/* ══ page chrome ══════════════════════════════════════════════════════ */
*{box-sizing:border-box}
body{margin:0;color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}
.wrap{position:relative;z-index:1;max-width:1300px;margin:0 auto;padding:0 26px 130px}
a{color:var(--brand)}

header.mast{padding:62px 0 34px;border-bottom:1px solid var(--border)}
.kick{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--brand);font-weight:700}
h1{font-family:var(--font-display);font-weight:900;font-size:clamp(36px,5.2vw,60px);line-height:1.04;margin:14px 0 0;letter-spacing:-.015em}
.dek{max-width:70ch;margin:18px 0 0;font-size:16.5px;line-height:1.62;color:var(--muted)}
.dek b{color:var(--text)}

section{padding:58px 0;border-bottom:1px solid var(--border)}
section:last-of-type{border-bottom:0}
h2{font-family:var(--font-display);font-weight:900;font-size:clamp(25px,3.1vw,36px);margin:0 0 6px;letter-spacing:-.01em}
h2 .n{font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--brand);display:block;margin-bottom:12px;text-transform:uppercase}
.lede{max-width:72ch;font-size:16px;line-height:1.62;color:var(--muted);margin:12px 0 0}
.lede b{color:var(--text)}

/* ══ teardown ═════════════════════════════════════════════════════════ */
.refs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:30px}
.ref{border-radius:4px;overflow:hidden;box-shadow:0 4px 14px rgba(58,36,12,.28)}
.ref img{width:100%;display:block}
.refcap{font-size:11px;line-height:1.4;color:var(--faint);margin:8px 2px 0}
.refcap b{color:var(--muted);display:block;font-size:11.5px}

.formula{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:32px}
.fx{background:var(--cb-face);border-radius:5px;padding:20px 20px 22px;
  box-shadow:inset 0 1px 0 rgba(255,240,214,.44),0 4px 0 var(--cb-edge),0 6px 8px rgba(50,32,14,.3)}
.fx h4{font-family:var(--font-display);font-size:18px;margin:0 0 8px}
.fx p{margin:0;font-size:13.8px;line-height:1.56;color:var(--muted)}
.fx code{font-family:var(--font-ui);font-weight:700;color:var(--brand);font-size:12.5px}

.gap{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:2px}
.gap li{padding:16px 20px;background:rgba(255,240,214,.14);border-left:3px solid var(--brand)}
.gap b{display:block;font-family:var(--font-display);font-size:19px;margin-bottom:5px}
.gap span{font-size:14.5px;line-height:1.58;color:var(--muted)}
.gap .cite{display:block;margin-top:7px;font-size:12.5px;color:var(--faint);font-style:italic}

.pricetab{width:100%;border-collapse:collapse;margin-top:26px;font-size:14px}
.pricetab th{text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);padding:0 14px 10px 0;font-weight:700}
.pricetab td{padding:11px 14px 11px 0;border-top:1px dashed var(--border);color:var(--muted);vertical-align:top}
.pricetab td:first-child{font-weight:700;color:var(--text);white-space:nowrap}
.pricetab tr.us td{background:rgba(47,82,54,.10);color:var(--green);font-weight:600}
.pricetab tr.us td:first-child{color:var(--green)}

/* ══ THE FRAME ════════════════════════════════════════════════════════ */
.frames{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin-top:44px;
  position:relative;left:50%;transform:translateX(-50%);width:min(1500px,calc(100vw - 48px))}
@media(max-width:1060px){.frames{grid-template-columns:1fr;max-width:480px;left:auto;transform:none;width:100%}}
.fbox{container-type:inline-size}
.fnum{font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--brand);margin:0 0 10px;text-transform:uppercase;
  padding-bottom:9px;border-bottom:1px solid var(--border)}
.fnote{font-size:12.5px;line-height:1.5;color:var(--faint);margin:12px 0 0}
.fnote b{color:var(--muted);font-weight:600}
.fnote code{font-family:var(--font-ui);color:var(--brand);font-weight:700;font-size:.95em}

.fr{position:relative;aspect-ratio:1290/2796;width:100%;overflow:hidden;border-radius:6px;
  background:var(--cb-sheet);box-shadow:0 12px 30px rgba(58,36,12,.34);
  border:1px solid var(--border-2)}
/* the frame's own grain, so each shot reads as its own sheet of board */
.fr::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  mix-blend-mode:multiply;opacity:.52;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22f%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.022%200.85%22%20numOctaves%3D%224%22%20seed%3D%227%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23f%29%22%20opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22360%22%20height%3D%22360%22%3E%3Cfilter%20id%3D%22m%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.011%22%20numOctaves%3D%223%22%20seed%3D%2211%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23m%29%22%20opacity%3D%22.85%22%2F%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22260%22%3E%3Cfilter%20id%3D%22s%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%221.4%22%20numOctaves%3D%221%22%20seed%3D%223%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20value%3D%22%22%20values%3D%220%200%200%200%200.16%20%200%200%200%200%200.10%20%200%200%200%200%200.05%20%200%200%200%201%200%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22discrete%22%20tableValues%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%201%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23s%29%22%2F%3E%3C%2Fsvg%3E");
  background-size:150px 150px,240px 240px,175px 175px}
/* a cut edge along the bottom of every sheet — the same flute the tiles carry */
.fr::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;z-index:8;pointer-events:none;
  background:linear-gradient(180deg,rgba(60,40,18,.5) 0 1px,transparent 1px),var(--cb-flute)}

/* ── caption block: the category formula, in our material ── */
.cap{position:absolute;left:7%;right:7%;top:5.4%;z-index:6;text-align:center}
.pill{display:inline-block;font-size:clamp(6px,1.85cqw,10px);font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;background:var(--brand);color:var(--on-brand);
  padding:.45em .85em;border-radius:2px;margin-bottom:3.6%}
.eye{font-family:var(--font-quote);font-style:italic;font-weight:600;font-size:clamp(10.5px,3.2cqw,17px);
  color:var(--brand);letter-spacing:.02em;margin:0 0 2.6%}
.cap h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(13px,4.15cqw,23px);line-height:1.06;letter-spacing:-.008em;margin:0;color:var(--text)}
.cap .sub{font-family:var(--font-quote);font-style:italic;font-weight:600;font-size:clamp(10px,2.95cqw,15.5px);
  line-height:1.42;color:var(--muted);margin:3.2% 0 0}

/* ── the iPhone: drawn, not a photo. --pw drives every dimension ── */
.iphone{position:absolute;z-index:4;width:var(--pw);aspect-ratio:430/932;
  border-radius:15.6% / 7.2%;padding:2.05%;
  background:linear-gradient(148deg,#8c8177 0%,#413a34 14%,#6d635a 30%,#2e2925 52%,#7d7168 72%,#3a342f 88%,#6b6159 100%);
  box-shadow:0 0 0 .35% rgba(20,16,12,.55),
    0 3% 6% rgba(38,24,8,.44), 0 7% 14% rgba(38,24,8,.34);}
.iphone .scr{position:relative;width:100%;height:100%;border-radius:14.2% / 6.55%;overflow:hidden;
  background:#C2996A;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16)}
.iphone .scr img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.iphone .isl{position:absolute;z-index:3;top:2.7%;left:50%;transform:translateX(-50%);
  width:30.5%;aspect-ratio:125/36;background:#07070a;border-radius:999px;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.07)}
/* buttons */
.iphone i{position:absolute;background:linear-gradient(180deg,#6f645b,#39332e);border-radius:1px}
.iphone i.a{left:-.9%;top:16%;width:1.6%;height:5.2%}      /* action */
.iphone i.v1{left:-.9%;top:24.5%;width:1.6%;height:8%}      /* vol up */
.iphone i.v2{left:-.9%;top:34%;width:1.6%;height:8%}        /* vol dn */
.iphone i.p{right:-.9%;top:26%;width:1.6%;height:11.5%}     /* power  */
/* screen glare — one soft diagonal, kept faint so the UI stays honest */
.iphone .glare{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,.13) 0 16%,transparent 34% 100%)}

/* ── floating tiles: real .saka-w markup, lifted off the board ── */
.air{position:absolute;inset:0;z-index:5;pointer-events:none}
.air .t{position:absolute;transform-origin:50% 50%}
.air .t .saka-w{width:100%;cursor:default}
/* depth: three altitudes. higher = bigger, softer shadow, slight blur */
.air .t.z1{filter:drop-shadow(0 6px 9px rgba(44,28,10,.30))}
.air .t.z2{filter:drop-shadow(0 14px 18px rgba(44,28,10,.34))}
.air .t.z3{filter:drop-shadow(0 26px 30px rgba(44,28,10,.36))}
.air .t.far{filter:drop-shadow(0 4px 7px rgba(44,28,10,.26)) blur(.35px);opacity:.94}

/* ── chair card: the unit of the business, in the same stock ── */
.chair{background:var(--cb-face);border-radius:5px;padding:9% 9% 10%;position:relative;isolation:isolate;
  box-shadow:inset 0 1px 0 rgba(255,240,214,.44),inset 0 -1px 0 rgba(90,62,32,.30),
    0 4px 0 var(--cb-edge),0 5.5px 0 var(--cb-edge-dark),
    0 9px 7px rgba(50,32,14,.34),0 18px 22px rgba(50,32,14,.24)}
.chair .no{font-size:clamp(5.5px,1.7cqw,9px);letter-spacing:.2em;text-transform:uppercase;color:var(--brand);font-weight:800}
.chair .nm{font-family:var(--font-display);font-weight:700;font-size:clamp(10px,3.1cqw,17px);margin:4% 0 0;line-height:1.1}
.chair .lk{font-size:clamp(6px,1.9cqw,10px);color:var(--faint);margin-top:3%;word-break:break-all}
.chair .rows{margin-top:8%;border-top:1px solid var(--line-soft);padding-top:6%}
.chair .rw{display:flex;justify-content:space-between;gap:6px;font-size:clamp(6px,2cqw,10.5px);
  color:var(--muted);padding:2.6% 0;border-bottom:1px dashed var(--line-soft)}
.chair .rw:last-child{border-bottom:0}
.chair .rw b{color:var(--text);font-weight:600}
.chair .rw .p{color:var(--brand);font-weight:700}
.chair .tagrow{display:flex;flex-wrap:wrap;gap:3%;margin-top:7%}
.chair .tg{font-size:clamp(5.5px,1.75cqw,9px);letter-spacing:.05em;background:var(--brand-weak);
  color:var(--brand);padding:.32em .6em;border-radius:2px;font-weight:700}
.chair .st{position:absolute;right:7%;top:7%;font-size:clamp(5.5px,1.7cqw,9px);font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--green);background:var(--green-weak);
  padding:.3em .55em;border-radius:2px}

/* ── the line of chairs (frame 3) ── */
.line{position:absolute;left:0;right:0;z-index:5;display:flex;align-items:flex-end;justify-content:center;
  gap:2.4%;padding:0 3.5%}
.line .chair{flex:0 0 auto}
.chair.line-c{padding:11% 8% 12%}
.chair.line-c .nm{font-size:clamp(9px,3.4cqw,15px);line-height:1.06;margin-top:6%}
.chair.line-c .rows{margin-top:11%;padding-top:8%}
.chair.line-c .rw{padding:4.2% 0;flex-direction:column;gap:1px}
.chair.line-c .rw b{font-size:.88em;color:var(--faint);font-weight:600;letter-spacing:.04em}
.chair .st.due{color:var(--brand);background:var(--brand-weak)}

/* ── walk-in, live ────────────────────────────────────────────────────
   The bolt is the only thing that changes: it fills instead of strokes and
   throws light into the tile face. Everything else stays the shipped tile,
   so this can become a real `on` state rather than a poster trick.
   Animation hook: pulse --lit 0->1 and add a 2deg shake on the tile. */
.saka-w.live{position:relative}
.saka-w.live .saka-ic{position:relative}
.saka-w.live .saka-ic::before{content:'';position:absolute;inset:-58%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,214,130,.62),rgba(255,190,90,.20) 46%,transparent 70%)}
.saka-w.live .saka-ic svg{position:relative;fill:#F6C86A;stroke:#7A4A12;stroke-width:1.4;
  filter:drop-shadow(0 0 3px rgba(255,196,96,.9))}
.saka-w.live::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 80% at 28% 22%,rgba(255,208,124,.24),transparent 62%)}
.saka-w.live b{color:#3A2408}
.livetag{position:absolute;right:6%;top:5%;z-index:4;font-size:clamp(5px,1.5cqw,8px);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#5A3A0C;background:rgba(246,200,106,.5);
  padding:.22em .45em;border-radius:2px}

/* ── straight product blocks: no rotation, no hand-laid tilt ───────────
   Anything that IS the product sits square. Only the loose tiles angle. */
.sq{position:absolute;z-index:5}
.sq .lbl{text-align:center;font-family:var(--font-quote);font-style:italic;
  font-size:clamp(8.5px,2.5cqw,13px);color:var(--brand);margin-bottom:4%}

/* ── saka tokens map to the skin EVERYWHERE in poster contexts ─────────
   The board mapping only covered .saka-board; loose tiles (the menu, the
   floats, exhibit tiles) fell back to the engine's gray defaults — which is
   how "live on your booking page..." shipped near-invisible. */
.fr,.pstage{
  --saka-surface:var(--surface);--saka-surface-2:var(--surface-2);
  --saka-text:var(--text);--saka-muted:var(--muted);--saka-faint:var(--faint);
  --saka-accent:var(--brand);--saka-accent-weak:var(--brand-weak);--saka-on-accent:var(--on-brand);
  --saka-border:var(--border);--saka-border-2:var(--border);
  --saka-green:var(--green);--saka-green-weak:var(--green-weak);
  --saka-red:var(--red);--saka-amber:var(--amber);
  --saka-radius:var(--r-md);--saka-font:var(--font-ui)}
/* the menu's promise line speaks in the poster's own voice */
.fr .menu-tile .saka-foot,.pstage .menu-tile .saka-foot{
  color:var(--muted);font-family:var(--font-quote);font-style:italic;font-weight:600;
  font-size:clamp(9.5px,3cqw,15.5px)}

/* ── the This-week chart — production rules, app.html verbatim ── */
.wch-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.wch-tot{font-size:11px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.wch{display:flex;gap:5px;height:132px;padding:2px 0}
.wch-col{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.wch-d{text-align:center;font-size:8.5px;font-weight:700;color:var(--muted)}
.wch-track{flex:1;position:relative;background:color-mix(in srgb,var(--bg) 55%,var(--surface-2));border-radius:6px}
.wch-col.shut .wch-track{background:repeating-linear-gradient(45deg,transparent 0 5px,var(--line-soft) 5px 8px)}
.wch-col.tdy .wch-track{outline:1.5px solid var(--brand);outline-offset:-1.5px}
.wch-track i{position:absolute;left:2px;right:2px;border-radius:4px;background:var(--brand);opacity:.85}
.wch-track i.done{opacity:.3}
.wch-track i.walk{background:var(--amber);opacity:.75}
.wch-n{text-align:center;font-size:9.5px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.fr .wch,.pstage .wch{height:84px}
/* the chart as a loose float is 45% wide — its internals scale down to fit */
.air .wch{height:64px;gap:3px}
.air .wch-head .saka-wt{font-size:8.5px}
.air .wch-tot{font-size:8.5px}
.air .wch-d{font-size:7px}
.air .wch-n{font-size:7.5px}

/* ── the menu rows — production rules, app.html Services tab verbatim ── */
.sv-r { display: flex; align-items: center; gap: 9px; padding: 12px 13px; cursor: pointer; }
.sv-r + .sv-r { border-top: 1px solid var(--line-soft); }
.sv-nm { font: 700 15.5px var(--font-display); letter-spacing: -.01em; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-du { color: var(--muted); font-size: 12px; flex: none; }
.sv-pr { font-weight: 800; font-variant-numeric: tabular-nums; width: 52px; text-align: right; flex: none; }
/* scaled type inside a frame */
.fr .sv-r,.pstage .sv-r{padding:3.8% 3.8%;gap:2.6%}
.fr .sv-r + .sv-r,.pstage .sv-r + .sv-r{border-top:1.5px solid rgba(90,62,32,.42)}
.fr .sv-nm,.pstage .sv-nm{font-size:clamp(10.5px,3.5cqw,18px)}
.fr .sv-du,.pstage .sv-du{font-size:clamp(8.5px,2.6cqw,13.5px)}
.fr .sv-pr,.pstage .sv-pr{font-size:clamp(10px,3.3cqw,17px);width:auto;min-width:2.8em}
.fr .saka-w{cursor:default}
.menu-tile .saka-wt{padding:3.6% 3.8% 0;font-size:clamp(8.5px,2.8cqw,14.5px);letter-spacing:.06em}
.menu-tile .saka-foot{padding:0 3.6% 3.4%;margin-top:1.5%}

/* ── exhibits: a real shot, condensed, tilted, with a header for what it is ── */
.exh{position:absolute;z-index:5}
.exh .xh{margin-bottom:2.8%}
.exh .xh b{display:block;font-family:var(--font-display);font-weight:900;
  font-size:clamp(13.5px,4.5cqw,24px);letter-spacing:-.014em;line-height:1.04}
/* status chips: the shop owner's three big points read as states, not prose */
.xh .tag{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-ui);font-style:normal;
  font-size:clamp(6.5px,2cqw,10.5px);font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  vertical-align:.26em;margin-left:.55em;padding:.34em .7em;border-radius:2px}
.xh .tag.live{color:var(--green);background:var(--green-weak)}
.xh .tag.live::before{content:'';width:.5em;height:.5em;border-radius:50%;background:var(--green);
  animation:xpulse 1.6s ease-in-out infinite}
.xh .tag.done{color:var(--green);background:var(--green-weak)}
@keyframes xpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}
@media (prefers-reduced-motion: reduce){.xh .tag.live::before{animation:none}}
.exh .xbody{filter:drop-shadow(0 10px 14px rgba(44,28,10,.32))}
.exh .xbody.shot{border-radius:8px;overflow:hidden;border:1px solid var(--border-2)}
.exh .xbody.shot img{width:100%;display:block}
.exh.r .xh{text-align:right}

/* ── the floor — production rules, app.html shop room verbatim ── */
.room-grid { display: grid; gap: 8px; margin-top: 4px; }
.seat { border-radius: 11px; padding: 9px 9px 8px; border: 1px solid var(--line-soft);
  position: relative; min-height: 72px; background: var(--surface-2); }
.seat.cut { background: color-mix(in srgb, var(--brand) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.seat.free { background: color-mix(in srgb, var(--green) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.seat .who { font: 700 13px var(--font-display); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 14px; }
.seat .cl { font-size: 10px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.seat .dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; }
.seat.cut .dot { background: var(--brand); }
.seat.free .dot { background: var(--green); }
.seat.off { opacity: .55; }
.seat.off .dot { background: var(--faint); }
.room-lobby { display: flex; align-items: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.room-lobby .lchip { font-size: 10.5px; background: var(--amber-weak); color: var(--amber);
  font-weight: 700; border-radius: 7px; padding: 4px 8px; }
.room-ln { font-size: 10.5px; color: var(--faint); margin-left: auto; }
/* ── exhibit innards wear the kraft, not flat web chrome ──────────────
   Seats, rent rows and avatar circles read as small cardboard chips ON the
   tile: pressed face, top lift, cut edge. State tints stay, in the material. */
.fr .exh .seat,.pstage .exh .seat,
.fr .exh .row,.pstage .exh .row{
  background:var(--cb-face);border:1px solid rgba(90,62,32,.42);border-radius:5px;
  box-shadow:inset 0 1px 0 rgba(255,240,214,.5),inset 0 -1px 0 rgba(90,62,32,.28),
    0 2px 0 var(--cb-edge),0 3px 0 var(--cb-edge-dark),0 4px 4px rgba(50,32,14,.22)}
.fr .exh .seat.cut,.pstage .exh .seat.cut{
  background:linear-gradient(174deg,color-mix(in srgb,var(--brand) 10%,#C8A273),color-mix(in srgb,var(--brand) 10%,#B78F60));
  border-color:color-mix(in srgb,var(--brand) 45%,rgba(90,62,32,.42))}
.fr .exh .seat.free,.pstage .exh .seat.free{
  background:linear-gradient(174deg,color-mix(in srgb,var(--green) 10%,#C8A273),color-mix(in srgb,var(--green) 10%,#B78F60));
  border-color:color-mix(in srgb,var(--green) 40%,rgba(90,62,32,.42))}
.fr .exh .seat.off,.pstage .exh .seat.off{opacity:.62}
.fr .exh .avatar,.pstage .exh .avatar{
  background:var(--cb-face);color:var(--brand);border:1px solid rgba(90,62,32,.5);
  box-shadow:inset 0 1px 0 rgba(255,240,214,.5),0 1.5px 0 var(--cb-edge),0 2.5px 3px rgba(50,32,14,.24)}
.fr .exh .st,.pstage .exh .st,
.fr .exh .lchip,.pstage .exh .lchip{
  box-shadow:inset 0 1px 0 rgba(255,240,214,.4),0 1.5px 0 var(--cb-edge),0 2.5px 3px rgba(50,32,14,.2);
  border-radius:4px}
.fr .exh .mini.gold,.pstage .exh .mini.gold{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 0 color-mix(in srgb,var(--brand) 60%,#000),0 3px 4px rgba(50,32,14,.3)}

/* the mini chair every seat carries, pushed right */
.seat .mchair{position:absolute;right:6px;bottom:5px;width:20px;height:auto;opacity:.5}
.seat.cut .mchair{color:var(--brand)}
.seat.free .mchair{color:var(--green)}
.seat.off .mchair{color:var(--faint);opacity:.4}

/* the rent roster — production rules, app.html shop rent verbatim */
.row{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:13px 14px;display:flex;align-items:center;gap:12px;margin-bottom:9px}
.row .grow{flex:1;min-width:0}
.rname{display:block;font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rmeta{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--brand-weak);color:var(--brand);
  display:grid;place-items:center;font-weight:700;font-size:16px;border:1px solid var(--border);flex:none}
.st{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);font-size:10.5px;font-weight:700;
  letter-spacing:0.8px;text-transform:uppercase;flex:none}
.st-paid{background:var(--green-weak);color:var(--green)}
.st-due{background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
.mini{border:1px solid var(--border);background:var(--surface);border-radius:var(--r-pill);
  padding:9px 15px;font:600 13px var(--font-ui);color:var(--text);flex:none}
.mini.gold{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
/* scaled inside a frame */
.fr .row,.pstage .row{padding:2.9% 3.2%;gap:2.8%;margin-bottom:2.6%;border-radius:8px;cursor:default}
.fr .avatar,.pstage .avatar{width:clamp(15px,5cqw,26px);height:clamp(15px,5cqw,26px);font-size:clamp(7.5px,2.5cqw,13px)}
.fr .rname,.pstage .rname{font-size:clamp(8px,2.6cqw,13.5px)}
.fr .rmeta,.pstage .rmeta{font-size:clamp(6.5px,2.05cqw,11px);margin-top:1%}
.fr .st,.pstage .st{font-size:clamp(5.5px,1.8cqw,9.5px);padding:.3em .85em;letter-spacing:.06em}
.fr .mini,.pstage .mini{min-height:auto;padding:.5em 1.1em;font-size:clamp(6.5px,2.1cqw,11px)}
.fr .seat .mchair,.pstage .seat .mchair{width:clamp(12px,4cqw,20px);right:4%;bottom:6%}
.fr .seat,.pstage .seat{min-height:auto;padding:3.2% 20% 3% 3.4%;border-radius:8px}
.fr .seat .who,.pstage .seat .who{font-size:clamp(8px,2.75cqw,13px)}
.fr .seat .cl,.pstage .seat .cl{font-size:clamp(6.5px,2.1cqw,10px)}
.fr .seat .dot,.pstage .seat .dot{width:5px;height:5px;top:6px;right:6px}
.fr .room-grid,.pstage .room-grid{gap:2.6%}
.fr .room-lobby .lchip,.pstage .room-lobby .lchip{font-size:clamp(6px,2cqw,10.5px);padding:.3em .7em}
.fr .room-ln,.pstage .room-ln{font-size:clamp(6px,1.95cqw,10.5px)}
.fr .exh .saka-w,.pstage .exh .saka-w{cursor:default}

/* ── frame-3 tile stack: strict grid, everything square ── */
.stack{display:flex;flex-direction:column;gap:3.8%}
.stack .seclbl{font-size:clamp(7px,2.35cqw,12px);font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brand);margin:2.4% 0 .4%;text-align:left}
.stack .row2{display:grid;grid-template-columns:1fr 1fr;gap:3%}
.stack .row12{display:grid;grid-template-columns:1fr 2.05fr;gap:3%}
.fr .stack .saka-w{padding:4.6% 4.8%}
.fr .stack .saka-wt,.fr .exh .saka-wt,.pstage .exh .saka-wt{font-size:clamp(6.5px,2.3cqw,12px)}
.fr .stack .saka-btrack{height:clamp(3.5px,1.1cqw,6px);background:rgba(90,62,32,.22);border-radius:99px;overflow:hidden}
.fr .stack .saka-bfill{background:var(--green);height:100%;display:block;border-radius:99px}
.fr .stack .saka-big,.fr .exh .saka-big,.pstage .exh .saka-big{font-size:clamp(10px,3.7cqw,19px)}
.fr .stack .saka-srow,.pstage .exh .saka-srow{font-size:clamp(7px,2.4cqw,12px);padding:2% 0}
.fr .stack .saka-sub,.fr .stack .saka-foot,.fr .exh .saka-sub,.pstage .exh .saka-sub{font-size:clamp(6.5px,2.15cqw,11px)}
.fr .stack .saka-qa b{font-size:clamp(8px,2.7cqw,14px)}
.fr .stack .saka-qa span{font-size:clamp(6.3px,2.05cqw,10.5px)}
.fr .stack .saka-ic svg{width:clamp(10px,3.4cqw,18px);height:auto}
.rchip{font-size:clamp(6px,1.95cqw,10px);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green);background:var(--green-weak);padding:.28em .6em;border-radius:2px;flex:none}
.rchip.due{color:var(--brand);background:var(--brand-weak)}
.namerow{display:flex;align-items:center;gap:6px}
.namerow .saka-big{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmark{display:inline-block;vertical-align:-2px;margin-right:4px}

/* ── the chair station — the app's own floor unit ───────────────────────
   Rebuilt from the walk's step 6. Swap in the production asset when the
   build that owns it turns up; everything here keys off .chsvg. */
.stn{display:flex;flex-direction:column;align-items:center;text-align:center}
.stn .av{width:26%;aspect-ratio:1;border-radius:50%;border:1.5px solid var(--border-2);
  background:var(--cb-face);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:clamp(7px,2.5cqw,13px);
  color:var(--muted);box-shadow:0 2px 5px rgba(50,32,14,.24);position:relative;z-index:2}
.stn .av.set{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.stn .plate{margin-top:5%;background:var(--cb-face);border-radius:3px;
  padding:.34em .9em;font-size:clamp(6px,2cqw,10.5px);font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,240,214,.5),0 2px 0 var(--cb-edge),0 3.5px 5px rgba(50,32,14,.3)}
.stn .chsvg{width:88%;margin-top:6%;color:#241708;display:block;
  filter:drop-shadow(0 5px 6px rgba(44,28,10,.34))}
.stn .terms{margin-top:5%;font-size:clamp(6px,2.05cqw,11px);color:var(--muted);line-height:1.45}
.stn .terms b{color:var(--brand);font-weight:700}
.stn .terms .wait{color:var(--faint);font-style:italic}
/* the shop floor line */
.floorline{position:absolute;left:0;right:0;z-index:5;display:flex;align-items:flex-end;
  justify-content:center;gap:1.4%;padding:0 2.5%}
.floorline .stn{flex:0 0 20.8%}
.floorline .stn .chsvg{width:100%;margin-top:7%}
/* frame 2's single station, and the menu that hangs off it */
.solo{position:absolute;z-index:5}
.solo .lk{margin-top:4%;font-size:clamp(5.5px,1.9cqw,10px);color:var(--faint)}
.menu{margin-top:9%;background:var(--cb-face);border-radius:5px;padding:6% 7% 6.5%;position:relative;isolation:isolate;
  box-shadow:inset 0 1px 0 rgba(255,240,214,.44),inset 0 -1px 0 rgba(90,62,32,.30),
    0 4px 0 var(--cb-edge),0 5.5px 0 var(--cb-edge-dark),0 9px 7px rgba(50,32,14,.34)}
.menu .mh{font-size:clamp(5.5px,1.8cqw,9.5px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand);font-weight:800;margin-bottom:4%}
.menu .mr{display:flex;justify-content:space-between;align-items:baseline;gap:6px;
  font-size:clamp(6.5px,2.15cqw,11.5px);padding:3% 0;border-bottom:1px dashed var(--line-soft)}
.menu .mr:last-of-type{border-bottom:0}
.menu .mr b{color:var(--text);font-weight:600;flex:1;text-align:left}
.menu .mr .d{color:var(--faint);font-size:.88em}
.menu .mr .p{color:var(--brand);font-weight:700}
.menu .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:3%;margin-top:6%}
.menu .chips span{font-size:clamp(5.5px,1.75cqw,9px);background:var(--brand-weak);color:var(--brand);
  padding:.32em .6em;border-radius:2px;font-weight:700;letter-spacing:.04em}

.onebook{position:absolute;left:8%;right:8%;top:57%;z-index:5}
.onebook .obk{text-align:center;font-family:var(--font-quote);font-style:italic;
  font-size:clamp(9px,2.7cqw,14px);color:var(--brand);margin-bottom:4%}
.onebook .obw .saka-w{width:100%;cursor:default;padding:8% 8% 8.5%}
.onebook .obw .saka-wt{font-size:clamp(6.5px,2cqw,11px)}
.onebook .obw .saka-srow{padding:4% 0;font-size:clamp(7.5px,2.4cqw,13px)}
.onebook .obw .saka-foot{margin-top:5%;font-size:clamp(6px,1.85cqw,10px)}
.onebook .obw{filter:drop-shadow(0 16px 20px rgba(44,28,10,.34))}

.crumb{position:absolute;left:8%;right:8%;bottom:4.2%;z-index:7;text-align:center;
  font-size:clamp(6.5px,2.1cqw,11px);letter-spacing:.05em;color:var(--faint);font-weight:600}
.crumb b{color:var(--brand)}

/* ══ the App Preview, live ════════════════════════════════════════════
   Flat POV — the poster itself, animated. Tiles drop from the top and land
   like dominoes; picked ones float up and seat into the phone. The phone
   board is the app's REAL markup under the app's real CSS. */
.pwrap{display:flex;flex-wrap:wrap;gap:40px;justify-content:center;align-items:flex-start;margin-top:44px}
.pcol{display:flex;flex-direction:column;align-items:center}
.plabel{font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);
  margin-bottom:12px;align-self:flex-start;padding-bottom:8px;border-bottom:1px solid var(--border);width:100%}
/* barber stage: everything arrives top to bottom */
.bsolo{position:absolute;left:15%;right:15%;top:24%;z-index:4}
.bhide{opacity:0}
.pstage .menu-tile .saka-wt{padding:3.6% 3.8% 0;font-size:clamp(8.5px,2.8cqw,14.5px);letter-spacing:.06em}
.pstage .menu-tile .saka-foot{padding:0 3.6% 3.4%;margin-top:1.5%;font-size:clamp(6px,1.9cqw,10px)}
.pstage .stn .chsvg{width:70%;margin-top:5%}
.pstage{position:relative;width:min(464px,92vw);aspect-ratio:1290/2796;border-radius:6px;
  overflow:hidden;border:1px solid var(--border-2);box-shadow:0 14px 34px rgba(58,36,12,.36);
  background:var(--cb-sheet);container-type:inline-size}
.pstage::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;z-index:9;pointer-events:none;
  background:linear-gradient(180deg,rgba(60,40,18,.5) 0 1px,transparent 1px),var(--cb-flute)}
.pgrain{position:absolute;inset:0;z-index:0;mix-blend-mode:multiply;opacity:.5;pointer-events:none;
  background-size:150px 150px,240px 240px,175px 175px}
.pcap{position:absolute;left:7%;right:7%;top:4.6%;z-index:7;text-align:center;pointer-events:none}
.ptile{position:absolute;z-index:3;will-change:transform;opacity:0;
  filter:drop-shadow(0 7px 10px rgba(44,28,10,.32))}
.ptile .saka-w{width:100%;cursor:default}
.ptile.sel .saka-w{box-shadow:0 0 0 2px var(--brand),
  inset 0 1px 0 rgba(255,240,214,.44),0 4px 0 var(--cb-edge),0 6px 8px rgba(50,32,14,.3)}
/* the phone — screen is header crop (real pixels) + the real board (real DOM) */
.pphone{position:absolute;left:50%;bottom:2.4%;width:46%;transform:translateX(-50%);z-index:6}
.psafe{height:8%;flex:none}
.pphone .scr{display:flex;flex-direction:column}
.pphone .scr img.pscr-hdr{display:block;width:100%;height:auto;flex:none;object-fit:unset;object-position:unset}
.pphone .scr img.pscr-full{display:block;width:100%;flex:1;min-height:0;height:auto;object-fit:cover;object-position:top center}
.pboardhost{position:relative;flex:1;overflow:hidden}
.pboard{position:absolute;left:0;top:0;width:430px;transform-origin:0 0;padding:8px 12px 12px}
.pboard .saka-w{cursor:default}
/* app.html's saka mapping, verbatim — the engine follows the skin */
.pboard .saka-board{
  --saka-surface:var(--surface);--saka-surface-2:var(--surface-2);
  --saka-text:var(--text);--saka-muted:var(--muted);--saka-faint:var(--faint);
  --saka-accent:var(--brand);--saka-accent-weak:var(--brand-weak);--saka-on-accent:var(--on-brand);
  --saka-border:var(--border);--saka-border-2:var(--border);
  --saka-green:var(--green);--saka-green-weak:var(--green-weak);
  --saka-red:var(--red);--saka-amber:var(--amber);
  --saka-radius:var(--r-md);--saka-font:var(--font-ui);
  --saka-row-h:94px}
.pboard .saka-ic svg{width:20px;height:20px;display:block;color:var(--brand)}
/* the strip wears NO card in the app — app.html 1038/1051 verbatim: the seven
   day cells are already seven cards, so the tile itself goes bare */
.pboard .saka-w[data-id="weeknav"]{grid-row:auto;min-height:0;display:block;padding:0;overflow:visible;
  background:none!important;border:0!important;box-shadow:none!important;rotate:none!important}
.pboard .saka-w[data-id="weeknav"]::before,
.pboard .saka-w[data-id="weeknav"]::after{display:none!important}
.pboard .ghost{visibility:hidden}
/* weeknav strip — production rules, app.html verbatim, scoped to the board */
.pboard .wkhead{display:flex;align-items:center;gap:9px;padding:2px 2px 8px}
.pboard .wkm{display:inline-flex;align-items:baseline;gap:7px;border:0;background:none;font:inherit;
  padding:3px 2px;color:var(--text)}
.pboard .wkm b{font-size:22px;font-weight:600;letter-spacing:-0.025em}
.pboard .wkm u{font-size:22px;font-weight:600;letter-spacing:-0.025em;color:var(--faint);text-decoration:none}
.pboard .wkm .car{width:9px;height:9px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:rotate(45deg) translate(-2px,-2px);margin-left:2px}
.pboard .wktoday{margin-left:auto;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-pill);
  font:inherit;font-size:12px;font-weight:650;color:var(--brand);padding:6px 13px;opacity:0;transform:scale(.9)}
.pboard .wksheet{overflow:hidden;max-height:0}
.pboard .wkwrap{overflow:hidden;padding:0 0 4px}
.pboard .wktrack{display:flex;gap:6px}
.pboard .wkd{flex:0 0 calc((100% - 36px)/7);border-radius:12px;border:1px solid var(--border);
  background:var(--lift);padding:8px 0 7px;text-align:center;position:relative}
.pboard .wkd .w{font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}
.pboard .wkd .n{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:1px;line-height:1.1}
.pboard .wkd .hb{display:flex;gap:2px;justify-content:center;margin-top:4px;height:4px}
.pboard .wkd .hb i{width:3px;height:3px;border-radius:50%;background:var(--brand);opacity:.26}
.pboard .wkd .hb i.f{opacity:.9}
.pboard .wkd.sel{background:linear-gradient(180deg,
    color-mix(in srgb,var(--brand) 92%,#fff 8%) 0%,
    color-mix(in srgb,var(--brand) 92%,#000 8%) 160%);
  border-color:var(--brand);box-shadow:0 6px 18px color-mix(in srgb,var(--brand) 30%,transparent)}
.pboard .wkd.sel .w{color:color-mix(in srgb,var(--on-brand) 72%,transparent)}
.pboard .wkd.sel .n{color:var(--on-brand)}
.pflier{position:fixed;z-index:80;pointer-events:none;will-change:transform;left:0;top:0}
.pflier .saka-w{width:100%;cursor:default}
.pctl{display:flex;gap:12px;align-items:center;margin-top:16px}
.pbtn{border:1px solid var(--border-2);background:var(--cb-face);color:var(--text);cursor:pointer;
  font:700 13px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;border-radius:3px;
  padding:9px 18px;box-shadow:inset 0 1px 0 rgba(255,240,214,.44),0 3px 0 var(--cb-edge),0 5px 6px rgba(50,32,14,.28)}
.pbtn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,240,214,.44),0 1px 0 var(--cb-edge)}
.pnote{font-size:12.5px;color:var(--faint)}

/* ══ preview / verdict blocks ═════════════════════════════════════════ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;margin-top:32px}
.card{background:var(--cb-face);border-radius:5px;padding:22px 22px 24px;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,240,214,.44),0 4px 0 var(--cb-edge),0 6px 9px rgba(50,32,14,.3)}
.card .who{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin-bottom:10px}
.card.go .who{color:var(--green)}
.card h4{font-family:var(--font-display);font-size:19px;margin:0 0 6px}
.card p{margin:0 0 10px;font-size:14px;line-height:1.58;color:var(--muted)}
.card p:last-child{margin-bottom:0}
.card ul{margin:8px 0 0;padding-left:17px;font-size:13.5px;line-height:1.6;color:var(--muted)}

.strip{margin-top:32px;padding:26px 30px;background:rgba(255,240,214,.20);border:1px solid var(--border);border-radius:4px}
.strip p{margin:0;font-family:var(--font-display);font-size:clamp(17px,2.2vw,25px);line-height:1.52;font-weight:700}
.strip p span{color:var(--brand)}
.strip small{display:block;margin-top:13px;font-family:var(--font-ui);font-size:13px;color:var(--muted);line-height:1.6}