:root{
  --paper:#E4E0D2;
  --paper-dim:#DAD6C7;
  --ink:#1C1B17;
  --ink-soft:#514D40;
  --rule:#B7B19D;
  --stamp:#9B3223;
  --desk:#22211C;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--desk)}
body{margin:0;background:var(--desk);color:var(--ink);font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:14px;line-height:1.5}
body.viewer{overflow:hidden;background:var(--paper)}
a{color:inherit}
img{max-width:100%}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}

.grain{position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* ---------- receipt page shell ---------- */
.receipt{
  --s:22px;
  background:var(--paper);
  margin-bottom:56px;
  padding-bottom:calc(var(--s) * 1.5);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/var(--s) 100%;
          mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/var(--s) 100%;
}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}

.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;border-bottom:1px dashed var(--rule)}
.logo{display:flex;align-items:center;min-height:44px;text-decoration:none}
.logo img{height:44px;width:auto;display:block}
.logo-text{font-weight:700;font-size:16px;letter-spacing:.02em}
.logo-ph{height:44px;min-width:120px;padding:0 14px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--rule);color:var(--ink-soft);font-size:11px;letter-spacing:.06em}
.nav{display:flex;gap:22px;font-size:12px;letter-spacing:.04em}
.nav a{text-underline-offset:4px}

.notice{padding:40px 0;color:var(--ink-soft);font-size:13px;line-height:1.7;max-width:60ch}

/* ---------- receipt line items ---------- */
.album-row{display:flex;align-items:baseline;gap:10px;font-size:14px}
.album-row .no{color:var(--stamp);font-weight:700}
.album-row .name{font-weight:600}
.album-row .leader{flex:1;border-bottom:1px dotted var(--ink-soft);transform:translateY(-3px);min-width:20px}
.album-row .count{font-size:12px;color:var(--ink-soft);text-align:right}

/* ---------- hero (latest roll, auto-scrolling) ---------- */
.hero{padding:28px 0 32px;border-bottom:1px dashed var(--rule)}
.hero-link{display:block;text-decoration:none}
.hero-strip{position:relative;overflow:hidden;margin-top:12px;height:clamp(240px,58vh,600px);background:var(--paper-dim);border-top:1px dashed var(--rule);border-bottom:1px dashed var(--rule)}
.hero.empty{padding:56px 0;color:var(--ink-soft);font-size:13px}
.btn-open{display:inline-block;margin-top:16px;font-size:12px;letter-spacing:.04em;padding:10px 16px;border:1px solid var(--ink);text-decoration:none;font-weight:600}
.btn-open:hover{background:var(--ink);color:var(--paper)}

/* auto-scrolling track (hero + events previews) */
.mq-track{position:absolute;top:0;left:0;height:100%;display:flex;width:max-content;will-change:transform}
.mq-frame{flex:0 0 auto;height:100%;aspect-ratio:var(--r);background:var(--paper-dim)}
.mq-frame + .mq-frame{border-left:1px dashed var(--rule)}
.mq-frame img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- concept ---------- */
.concept{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;padding:44px 0;border-bottom:1px dashed var(--rule);align-items:start}
.concept h2{margin:0 0 18px;font-size:24px;line-height:1.25;font-weight:600;letter-spacing:-.01em}
.concept p{margin:0 0 14px;font-size:13.5px;line-height:1.75;max-width:52ch}
.media{aspect-ratio:4/3;border:1px dashed var(--rule);background:var(--paper-dim);overflow:hidden;display:flex;align-items:center;justify-content:center}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block}
.media-ph{font-size:11px;letter-spacing:.06em;color:var(--ink-soft);text-align:center;padding:20px}

/* ---------- big "past events" button ---------- */
.big-btn{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:44px 0;padding:34px 28px;background:var(--ink);color:var(--paper);text-decoration:none;font-size:clamp(20px,4.6vw,34px);font-weight:600;letter-spacing:-.01em}
.big-btn .big-count{font-size:12px;font-weight:400;letter-spacing:.05em;opacity:.75;white-space:nowrap}
.big-btn:hover{background:var(--stamp)}

/* ---------- contact ---------- */
.foot{padding:36px 0 12px;border-top:1px dashed var(--rule)}
.foot h3{margin:0 0 16px;font-size:12px;font-weight:600;letter-spacing:.05em}
.crow{display:flex;align-items:baseline;gap:10px;max-width:520px;margin-bottom:10px;font-size:14px}
.crow .lbl{font-size:11px;color:var(--ink-soft);letter-spacing:.05em}
.crow .leader{flex:1;border-bottom:1px dotted var(--rule);transform:translateY(-3px);min-width:16px}

/* ---------- past events list ---------- */
.page-title{margin:0;padding:36px 0 10px;font-size:26px;font-weight:600;letter-spacing:-.01em}
.page-sub{margin:0 0 22px;font-size:12px;color:var(--ink-soft)}
.album{display:block;text-decoration:none;padding:18px 0 22px;border-top:1px dashed var(--rule);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.album img{-webkit-user-drag:none}
.album-sub{margin:2px 0 0 0;font-size:12px;color:var(--ink-soft)}
.album-strip{position:relative;overflow:hidden;margin-top:12px;height:clamp(110px,17vw,170px);background:var(--paper-dim);touch-action:pan-y}
.album-strip > img.cover{width:100%;height:100%;object-fit:cover;display:block}
.album-strip .mq-track{opacity:0;transition:opacity .18s}
.album-strip.playing .mq-track{opacity:1}
.album-strip.empty{display:flex;align-items:center;justify-content:center;border:1px dashed var(--rule);font-size:11px;color:var(--ink-soft);letter-spacing:.06em}
.album:hover .name,.album:focus-visible .name{text-decoration:underline;text-underline-offset:4px}
.list-end{border-top:1px dashed var(--rule)}

/* ---------- album viewer ---------- */
.viewer-root{position:fixed;inset:0;height:100vh;height:100dvh;background:var(--paper);display:flex;flex-direction:column}
.v-head{flex:0 0 auto;padding:16px 22px 12px;border-bottom:1px dashed var(--rule)}
.masthead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:13px}
.masthead .title{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.back{font-size:12px;white-space:nowrap;text-underline-offset:4px}
.subline{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:11px;color:var(--ink-soft);letter-spacing:.04em}
.subline button{font:inherit;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.subline button[disabled]{opacity:.6;cursor:progress}
.gallery{flex:1 1 auto;min-height:0;display:flex;align-items:stretch;overflow-x:hidden;overflow-y:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.gallery.dragging{cursor:grabbing}
.frame{flex:0 0 auto;height:100%;display:flex;flex-direction:column;overflow:hidden}
.frame + .frame{border-left:1px dashed var(--rule)}
.frame-img-wrap{flex:1 1 0;min-height:0;background:var(--paper-dim)}
.frame img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;-webkit-user-drag:none}
.frame-caption{flex:0 0 auto;padding:10px 16px 12px;font-size:11px;display:flex;justify-content:space-between;gap:16px;border-top:1px dashed var(--rule);white-space:nowrap;letter-spacing:.03em}
.frame-caption .no{color:var(--stamp);font-weight:700}
.frame-caption .stamp{color:var(--ink-soft)}
.frame-caption a{text-underline-offset:4px}
.endcap{flex:0 0 auto;height:100%;width:min(50vw,480px);display:flex;align-items:center;justify-content:center;padding:0 40px;text-align:center;border-left:1px dashed var(--rule)}
.endcap p{font-size:12px;line-height:1.7;color:var(--ink-soft);letter-spacing:.03em;max-width:30ch}
.endcap a{display:inline-block;margin-top:10px}
.v-foot{flex:0 0 auto;padding:10px 22px calc(16px + env(safe-area-inset-bottom))}
.gauge-row{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-soft);letter-spacing:.05em;margin-bottom:8px}
.gauge{height:3px;background:var(--rule);position:relative}
.gauge-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink)}
.ticks{display:flex;justify-content:space-between;margin-top:4px}
.ticks span{width:1px;height:5px;background:var(--rule)}

/* ---------- admin ---------- */
body.admin{background:var(--paper)}
.admin-wrap{max-width:820px;margin:0 auto;padding:0 18px 80px}
.admin-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0;border-bottom:1px dashed var(--rule)}
.admin-top strong{letter-spacing:.06em}
.tabs{display:flex;gap:6px;margin:18px 0 6px;flex-wrap:wrap}
.tabs button{font:inherit;font-size:12px;padding:9px 14px;background:transparent;border:1px solid var(--ink);color:var(--ink);cursor:pointer}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--paper)}
.panel h2{margin:26px 0 12px;font-size:14px;letter-spacing:.04em}
.field{display:block;margin:0 0 14px;font-size:11px;color:var(--ink-soft)}
.field input:not([type=file]),.field textarea,.field select{display:block;width:100%;margin-top:4px;font:inherit;font-size:14px;color:var(--ink);background:#F3F1E8;border:1px solid var(--rule);padding:10px;border-radius:0}
.field input[type=file]{display:block;margin-top:6px;font:inherit;font-size:12px;max-width:100%}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row > .field{flex:1;min-width:150px}
.btn{font:inherit;font-size:12px;font-weight:600;letter-spacing:.03em;background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:11px 16px;cursor:pointer;text-decoration:none;display:inline-block}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.danger{background:var(--stamp);border-color:var(--stamp);color:#fff}
.btn.small{padding:6px 9px;font-size:11px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.status{margin:14px 0;font-size:12px;min-height:18px;color:var(--ink-soft)}
.status.bad{color:var(--stamp);font-weight:600}
.status.good{color:#2F5D2A;font-weight:600}
.bar{height:4px;background:var(--rule);margin:8px 0}
.bar > div{height:100%;width:0;background:var(--ink);transition:width .2s}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin:12px 0}
.tile{border:1px dashed var(--rule);padding:5px;background:#EDEADF}
.tile .pic{aspect-ratio:4/3;background:var(--paper-dim);display:flex;align-items:center;justify-content:center;overflow:hidden}
.tile .pic img{width:100%;height:100%;object-fit:cover;display:block}
.tile .acts{display:flex;gap:4px;margin-top:5px;justify-content:space-between}
.tile .acts button{flex:1;font:inherit;font-size:12px;padding:5px 0;background:transparent;border:1px solid var(--ink);cursor:pointer}
.tile .acts button:hover{background:var(--ink);color:var(--paper)}
.card{border:1px dashed var(--rule);padding:14px;margin:0 0 14px;background:#EDEADF}
.card summary{cursor:pointer;font-weight:600;display:flex;justify-content:space-between;gap:12px;list-style:none}
.card summary::-webkit-details-marker{display:none}
.card summary small{font-weight:400;color:var(--ink-soft)}
.hint{color:var(--ink-soft);font-size:12px;line-height:1.6;margin:0 0 12px}
.preview-logo{max-height:44px;max-width:100%;display:block;margin:6px 0}

@media (max-width:760px){
  .wrap{padding:0 16px}
  .concept{grid-template-columns:1fr;gap:28px;padding:32px 0}
  .concept h2{font-size:21px}
  .v-head{padding:14px 16px 10px}
  .v-foot{padding-left:16px;padding-right:16px}
  .frame-caption{font-size:10px;padding:8px 12px 10px}
  .endcap{width:78vw;padding:0 24px}
  .masthead{font-size:12px}
  .masthead .title{font-size:13px}
  .subline{font-size:10px}
  .big-btn{padding:26px 20px}
  .nav{gap:16px}
}