:root{
  /* Shared with essay (site/index.html) — one building */
  --bg:#07080b;
  --bg2:#101218;
  --ink:#e8e4da;
  --ink-dim:#9a958a;
  --blood:#c1121f;
  --pumpkin:#d4550a;
  --amber:#e5a00d;
  --crt:#6b8f71;
  --plastic:#1a1714;
  --line:#2a2a30;
  --display:'Anton','Arial Narrow',Impact,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --typewriter:'Source Serif 4',Georgia,serif;
  --mono:'Space Mono',Menlo,monospace;
}
.demo-page *, .vhs-act-root *{box-sizing:border-box}
.demo-page *, .vhs-act-root *{margin:0;padding:0}
html.demo-page{scroll-behavior:auto}
body.demo-page{
  background:
    radial-gradient(ellipse 90% 70% at 70% 35%, rgba(80,35,12,.18), transparent 55%),
    radial-gradient(ellipse 60% 50% at 15% 80%, rgba(40,12,8,.28), transparent 50%),
    radial-gradient(ellipse 100% 85% at 50% 45%, #12161e 0%, #07080b 60%, #030408 100%);
  color:var(--ink);
  font-family:var(--serif);
  overflow-x:hidden;
  min-height:100%;
}
::selection{background:var(--blood);color:#fff}

#stage{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;
}
#stage canvas{display:block;width:100%;height:100%}

.fx{
  pointer-events:none;position:fixed;inset:0;z-index:1;
}
.fx-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 78% 68% at 55% 40%, transparent 35%, rgba(0,0,0,.55) 100%);
  transition:opacity .4s ease;
}
html.store-open .fx-vignette{
  opacity:.78;
  background:
    radial-gradient(ellipse 88% 78% at 60% 46%, transparent 32%, rgba(0,0,0,.58) 100%);
}
html.store-pull .fx-vignette{
  opacity:1;
  background:
    radial-gradient(ellipse 42% 48% at 52% 44%, transparent 10%, rgba(0,0,0,.25) 42%, rgba(0,0,0,.78) 100%);
}
html.store-pull .fx::before{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 36% 42% at 52% 44%, transparent 0%, transparent 35%, rgba(8,6,4,.55) 100%);
}
html.store-leave .fx-vignette{
  opacity:1;
  background:
    radial-gradient(ellipse 48% 52% at 52% 42%, rgba(180,80,30,.1) 0%, transparent 48%),
    radial-gradient(ellipse 75% 75% at 52% 45%, transparent 18%, rgba(0,0,0,.62) 72%, rgba(0,0,0,.88) 100%);
}
html.store-leave .fx::before{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 45% 50% at 52% 44%, rgba(255,180,90,.12) 0%, transparent 55%);
}
html.store-open .fx-grain{opacity:.08}
html.store-pull .fx-grain{opacity:.12}
html.store-leave .fx-grain{opacity:.16}
html.store-open .fx-scan{opacity:.09}
html.store-pull .fx-scan{opacity:.14}
html.store-leave .fx-scan{opacity:.18}
html.store-leave .beat[data-id="hero"] .beat-inner{
  transition:opacity .35s ease;
}
html.demo-page.store-open body.demo-page{
  background:
    radial-gradient(ellipse 70% 55% at 72% 42%, rgba(60,28,10,.28), transparent 58%),
    radial-gradient(ellipse 50% 40% at 8% 75%, rgba(20,10,8,.45), transparent 52%),
    linear-gradient(165deg, #0e0b09 0%, #060504 50%, #0a0706 100%);
}
html.store-open .beat[data-id="hero"]{
  align-items:flex-end;
  padding-bottom:clamp(72px,11vh,108px);
}
html.store-open .beat[data-id="hero"] .beat-inner{
  position:fixed;
  left:clamp(16px,3.2vw,44px);
  bottom:clamp(76px,10vh,112px);
  top:auto;
  max-width:min(360px,38vw);
  margin:0;
  padding:16px 18px 14px;
  /* Solid plate — no glass / no poster bleed-through */
  background:#0c0a08;
  border:1px solid rgba(240,230,212,.1);
  border-left:2px solid var(--blood);
  box-shadow:0 16px 48px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.9);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html.store-aisle .beat[data-id="hero"] .beat-title{
  font-size:clamp(32px,4.2vw,48px);
  line-height:1.05;
  margin-bottom:2px;
}
html.store-pull .beat[data-id="hero"] .beat-title{
  font-size:clamp(40px,5.2vw,64px);
  text-shadow:0 2px 0 #000, 0 0 28px rgba(212,85,10,.35);
}
html.store-open .beat[data-id="hero"] .beat-body{
  font-size:13px;
  line-height:1.5;
  max-width:32em;
}
html.store-open .beat[data-id="hero"] .scroll-cue{
  margin-top:16px;
  font-size:10px;
}
@media(max-width:720px){
  html.store-open .beat[data-id="hero"] .beat-inner{
    max-width:min(300px,88vw);
    left:14px;
    bottom:68px;
    padding:12px 14px;
  }
}
.fx-scan{
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent 0 2px,
    rgba(0,0,0,.07) 2px 3px
  );
  opacity:.1;mix-blend-mode:multiply;
}
.fx-grain{
  position:absolute;inset:0;
  opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation:grain 0.45s steps(2) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}
  25%{transform:translate(-1%,1%)}
  50%{transform:translate(1%,-1%)}
  75%{transform:translate(-1%,-2%)}
  100%{transform:translate(2%,1%)}
}

/* Anchored metric overlays (screen-projected from cover UVs) */
#overlays{
  position:fixed;inset:0;z-index:2;pointer-events:none;
}
.ov{
  position:absolute;opacity:0;visibility:hidden;
  transition:opacity .55s ease;
  pointer-events:none;
}
.ov.on{opacity:1;visibility:visible}
/* Never paint inactive shells */
.ov:not(.on){
  opacity:0 !important;visibility:hidden !important;
  width:0 !important;height:0 !important;
  left:auto !important;top:auto !important;
  transform:none !important;
  background:transparent !important;box-shadow:none !important;
  overflow:hidden !important;
}
.ov-box[hidden],
.ov-chip[hidden],
.ov-label[hidden],
.ov-chip:empty,
.ov-label:empty{
  display:none !important;
}
.ov-bbox .ov-box,
.ov-faces .ov-box{
  display:block;width:100%;height:100%;
  border:1px solid rgba(107,143,113,.9);
  background:transparent;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(107,143,113,.12);
  box-sizing:border-box;
}
/* Read OCR: hairline scan frame — don't bury the sleeve art */
.ov-bbox[data-beat="read"] .ov-box{
  border-color:rgba(201,162,39,.88);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35),
    0 0 18px rgba(201,162,39,.18);
  background:linear-gradient(
    180deg,
    rgba(201,162,39,.06) 0%,
    transparent 18%,
    transparent 82%,
    rgba(201,162,39,.05) 100%
  );
}
.ov-faces .ov-box{
  border-style:dashed;
  border-color:rgba(107,143,113,.72);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(107,143,113,.08);
  background:transparent;
}
/* Zero detections: null-zone — search frame, not a hit */
.ov-faces.ov-faces-null .ov-box{
  border-color:rgba(154,143,124,.55);
  border-style:dashed;
  box-shadow:0 0 0 1px rgba(0,0,0,.4);
  background:linear-gradient(
    180deg,
    rgba(154,143,124,.05) 0%,
    transparent 22%,
    transparent 78%,
    rgba(154,143,124,.04) 100%
  );
}
.ov-faces.ov-faces-null .ov-label{
  color:#c4b8a4;
  border-color:rgba(154,143,124,.35);
  background:rgba(8,6,5,.84);
}
.ov-label{
  position:absolute;left:0;top:-26px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--crt);
  text-shadow:0 1px 2px #000;
  white-space:nowrap;
  padding:3px 8px;
  background:rgba(8,6,5,.78);
  border:1px solid rgba(107,143,113,.35);
}
.ov-bbox[data-beat="read"] .ov-label{
  color:var(--amber);
  border-color:rgba(201,162,39,.4);
  background:rgba(8,6,5,.82);
}
.ov-bbox[data-beat="blood"] .ov-box{
  border-color:rgba(183,28,28,.85);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.4),
    0 0 16px rgba(183,28,28,.2);
  background:linear-gradient(
    180deg,
    rgba(183,28,28,.07) 0%,
    transparent 20%,
    transparent 80%,
    rgba(183,28,28,.05) 100%
  );
}
.ov-bbox[data-beat="blood"] .ov-label{
  color:#e8a090;
  border-color:rgba(183,28,28,.45);
  background:rgba(8,6,5,.84);
}
.ov-symmetry{
  background:linear-gradient(90deg, rgba(201,162,39,.15), rgba(201,162,39,.95), rgba(201,162,39,.15));
  box-shadow:0 0 12px rgba(201,162,39,.35);
  border-radius:1px;
}
.ov-symmetry .ov-label{
  left:8px;top:-22px;color:var(--amber);
  transform:none;
}
span.ov-chip{
  display:inline-block;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);
  border-left:2px solid var(--blood);
  padding:6px 10px;
  background:rgba(10,8,6,.88);
  text-shadow:0 1px 2px #000;
  white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,.45);
  border:1px solid rgba(183,28,28,.35);
  border-left-width:2px;
}
.ov-chip[data-beat],
.ov[data-beat="knife"] .ov-chip{
  color:#f0e6d4;
  border-color:rgba(201,162,39,.4);
  border-left-color:var(--amber);
  background:rgba(8,6,5,.9);
}

/* Palette: numbered handles on cover (swatch strip lives in beat copy) */
.ov-palette{
  left:0;top:0;width:0;height:0;overflow:visible;
}
.ov-palette.on{
  /* keep zero box so handles/cue position in viewport coords */
  width:0 !important;height:0 !important;overflow:visible !important;
}
.ov-palette .ov-box{display:none !important}
.pal-cue[hidden]{display:none !important}
.pal-cue{
  position:absolute;z-index:2;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);background:rgba(12,10,8,.88);
  border:1px solid rgba(201,162,39,.55);
  padding:6px 10px;white-space:nowrap;
  box-shadow:0 4px 18px rgba(0,0,0,.45);
}
.pal-handle{
  position:absolute;z-index:3;
  width:30px;height:30px;margin:-15px 0 0 -15px;
  border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:700;
  /* background + color set inline from sample hex */
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 0 0 1.5px rgba(10,8,6,.55), 0 4px 14px rgba(0,0,0,.55);
  pointer-events:none;
}
/* Swatch cards under sticky left copy (beside VHS) */
.beat-pal-panel.pal-panel{
  position:relative;z-index:1;
  display:flex;gap:8px;align-items:stretch;
  margin-top:18px;width:100%;max-width:100%;
  padding:10px;border-radius:14px;
  background:rgba(14,11,9,.88);
  border:1px solid rgba(201,162,39,.28);
  box-shadow:0 10px 36px rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  box-sizing:border-box;
}
.pal-swatch{
  flex:1;min-width:0;
  border-radius:10px;padding:10px 10px 12px;
  min-height:88px;
  display:flex;flex-direction:column;justify-content:flex-start;gap:2px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
  position:relative;
}
.pal-swatch .ps-n{
  position:absolute;top:8px;right:8px;
  width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:10px;font-weight:600;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.2);
}
.pal-swatch .ps-hex{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;
}
.pal-swatch .ps-oklch-label{
  font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.72;margin-top:6px;
}
.pal-swatch .ps-oklch{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.02em;
  opacity:.92;
}
.pal-swatch .ps-role{
  font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.65;margin-top:auto;padding-top:6px;
}

/* Diagonals: X guide over cover AABB */
.ov-diagonals .ov-box{display:none}
.ov-diagonals .diag-line{
  position:absolute;left:0;top:0;height:2px;
  background:linear-gradient(90deg, rgba(212,85,10,.15), rgba(201,162,39,.95), rgba(183,28,28,.2));
  box-shadow:0 0 10px rgba(201,162,39,.4);
  transform-origin:0 50%;
  pointer-events:none;
}
.ov-diagonals .ov-label{color:var(--amber)}

#metric-counter{
  position:fixed;z-index:4;pointer-events:none;
  right:clamp(14px,3vw,32px);top:50%;
  transform:translateY(-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber);opacity:0;transition:opacity .3s ease;
  text-shadow:0 2px 12px rgba(0,0,0,.8);
  writing-mode:horizontal-tb;
}
#metric-counter b{color:var(--ink);font-weight:500;margin-right:8px}

.chrome{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(14px,2.5vw,28px);
}
.chrome a,.chrome button{pointer-events:auto}

.topbar{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
}
.brand{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
}
.brand img{height:28px;width:auto;filter:drop-shadow(0 0 10px rgba(183,28,28,.35))}
.brand-meta{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-dim);line-height:1.45;
}
.brand-meta b{color:var(--amber);font-weight:500}
.nav-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav-links a,.nav-links button{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);background:none;border:none;cursor:pointer;text-decoration:none;
}
.nav-links a:hover,.nav-links button:hover{color:var(--amber)}
.nav-links button{
  border:1px solid rgba(201,162,39,.35);padding:8px 12px;color:var(--amber);
}
.nav-links #btn-mute{
  border-color:rgba(138,127,110,.4);color:var(--ink-dim);
}
.nav-links #btn-mute[aria-pressed="true"]{
  border-color:rgba(107,143,113,.5);color:var(--crt);
}
.nav-links button:focus-visible,.nav-links a:focus-visible{
  outline:2px solid var(--amber);outline-offset:3px;
}

/* Aisle: nav must read over light poster art */
html.store-open .topbar{
  padding:10px 12px 14px;
  margin:-10px -12px 0;
  background:linear-gradient(180deg,rgba(6,5,4,.88) 0%, rgba(6,5,4,.55) 70%, transparent 100%);
}
html.store-open .brand-meta{
  color:#c8bba8;
  text-shadow:0 1px 3px #000, 0 0 12px rgba(0,0,0,.9);
}
html.store-open .brand-meta b{
  color:var(--amber);
}
html.store-open .nav-links{
  gap:8px;
}
html.store-open .nav-links a,
html.store-open .nav-links button{
  color:var(--ink);
  background:rgba(10,8,6,.82);
  border:1px solid rgba(240,230,212,.16);
  padding:8px 12px;
  text-shadow:0 1px 2px #000;
  box-shadow:0 4px 16px rgba(0,0,0,.45);
}
html.store-open .nav-links a:hover,
html.store-open .nav-links button:hover{
  color:var(--amber);
  border-color:rgba(201,162,39,.45);
  background:rgba(14,11,9,.92);
}
html.store-open .nav-links #btn-mute{
  color:var(--ink-dim);
  border-color:rgba(138,127,110,.45);
}
html.store-open .nav-links #btn-mute[aria-pressed="true"]{
  color:var(--crt);
  border-color:rgba(107,143,113,.55);
}
html.store-open .nav-links #btn-top{
  color:var(--amber);
  border-color:rgba(201,162,39,.5);
}

.hud-bottom{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  flex-wrap:wrap;
}
.progress-wrap{
  flex:1;min-width:140px;max-width:300px;
}
.progress-label{
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:4px;
}
.act-label{
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--pumpkin);margin-bottom:6px;
}
.progress{
  height:2px;background:rgba(255,255,255,.08);overflow:hidden;
}
.progress > i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--blood),var(--pumpkin),var(--amber));
  box-shadow:0 0 10px rgba(183,28,28,.45);
}
.tape-stamp{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--crt);opacity:1;
  text-shadow:0 1px 3px #000, 0 0 12px rgba(0,0,0,.8);
}
html.store-open .hud-bottom{
  background:linear-gradient(180deg,transparent,rgba(6,5,4,.92) 35%);
  margin:0 -4px -4px;
  padding:18px 4px 4px;
}

#scroll-track{position:relative;z-index:2;pointer-events:none}
.beat{
  min-height:150vh;
  display:flex;align-items:flex-start;
  padding:clamp(110px,18vh,160px) clamp(18px,4vw,48px) clamp(96px,14vh,140px);
  opacity:1;
  pointer-events:none;
  overflow:visible;
}
.beat-inner{
  max-width:min(440px,92vw);
  pointer-events:none;
  /* Hold copy in view for the whole beat runway (overlay mid-beat stays readable) */
  position:sticky;
  top:clamp(100px,14vh,136px);
  align-self:flex-start;
  opacity:0;
  will-change:opacity;
}
.beat[data-id="hero"] .beat-inner{
  max-width:min(560px,94vw);
}
.beat-act{
  font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--pumpkin);margin-bottom:8px;opacity:.85;
}
.beat-kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--blood);margin-bottom:10px;
  text-shadow:0 0 18px rgba(183,28,28,.3);
}
.beat-title{
  font-family:var(--display);font-size:clamp(44px,10vw,96px);
  line-height:1.02;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink);
  text-shadow:0 2px 0 #000, 0 0 36px rgba(212,85,10,.18);
  padding-top:0.06em;
  overflow:visible;
}
.beat[data-id="read"] .beat-title{
  /* Huge all-caps was clipping into the HUD — keep OCR energy, not a banner */
  font-size:clamp(36px,7.2vw,68px);
  line-height:1.06;
  letter-spacing:.06em;
  margin-bottom:2px;
  padding-bottom:0.04em;
}
.beat[data-id="read"] .beat-inner{
  max-width:min(420px,90vw);
  /* Keep sticky copy clear of bottom chrome */
  top:clamp(96px,12vh,118px);
  padding-bottom:12px;
}
.beat[data-id="read"] .beat-body{
  max-width:28em;
  color:#9a8f7c;
}
.beat[data-id="faces"] .beat-title{
  font-size:clamp(36px,7vw,64px);
  letter-spacing:.04em;
  margin-bottom:2px;
}
.beat[data-id="faces"] .beat-inner{
  max-width:min(400px,90vw);
  top:clamp(96px,12vh,118px);
}
.beat[data-id="faces"] .beat-body{
  max-width:28em;
  color:#9a8f7c;
}
.beat[data-id="palette"] .beat-title,
.beat[data-id="symmetry"] .beat-title,
.beat[data-id="diagonals"] .beat-title,
.beat[data-id="blood"] .beat-title,
.beat[data-id="knife"] .beat-title{
  font-size:clamp(36px,7vw,64px);
  letter-spacing:.04em;
}
.beat[data-id="palette"] .beat-inner,
.beat[data-id="symmetry"] .beat-inner,
.beat[data-id="diagonals"] .beat-inner,
.beat[data-id="blood"] .beat-inner,
.beat[data-id="knife"] .beat-inner,
.beat[data-id="archive"] .beat-inner{
  max-width:min(420px,90vw);
  top:clamp(96px,12vh,118px);
}
.beat[data-id="hero"] .beat-title{
  font-size:clamp(58px,13vw,128px);
  color:#f0e6d4;
}
.beat[data-id="hero"] .beat-kicker{
  font-size:12px;letter-spacing:.32em;color:var(--amber);
}
.beat-body{
  margin-top:14px;font-size:clamp(14px,1.7vw,16px);line-height:1.55;
  color:var(--ink-dim);max-width:34em;
}
.beat-swatches{display:flex;gap:7px;margin-top:16px}
.beat-swatches i{
  width:22px;height:22px;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 12px rgba(0,0,0,.5);
}
.scroll-cue{
  margin-top:28px;
  font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--amber);
  animation:cuePulse 1.8s ease-in-out infinite;
}
.scroll-cue span{display:inline-block;margin-left:6px}
@keyframes cuePulse{
  0%,100%{opacity:.35;transform:translateY(0)}
  50%{opacity:1;transform:translateY(4px)}
}

.beat-essay-hint{
  margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);line-height:1.45;max-width:28em;
}
.beat-essay-cta{margin-top:10px;pointer-events:auto}
.beat-essay-cta a{
  pointer-events:auto;
  display:inline-block;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);text-decoration:none;
  border-bottom:1px solid rgba(201,162,39,.45);padding-bottom:2px;
  text-shadow:0 1px 2px #000;
  transition:color .15s ease,border-color .15s ease;
}
.beat-essay-cta a:hover,.beat-essay-cta a:focus-visible{
  color:var(--ink);border-color:var(--blood);outline:none;
}
.beat[data-id="archive"] .beat-essay-cta a{
  color:#f0e6d4;border-color:rgba(201,162,39,.55);
}
.beat[data-id="archive"] .beat-essay-cta a:hover,
.beat[data-id="archive"] .beat-essay-cta a:focus-visible{
  color:var(--amber);border-color:var(--blood);
}

.essay-outro-bar{
  position:fixed;z-index:5;left:50%;
  bottom:clamp(68px,11vh,92px);
  transform:translateX(-50%) translateY(calc(100% + 20px));
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s ease,transform .45s ease,visibility .45s;
  max-width:min(440px,92vw);
  padding:12px 18px 14px;
  background:rgba(8,6,5,.94);
  border:1px solid rgba(201,162,39,.42);
  border-left:3px solid var(--amber);
  box-shadow:0 10px 36px rgba(0,0,0,.72);
  text-align:center;
}
html.essay-outro-visible .essay-outro-bar{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.essay-outro-hint{
  margin:0 0 10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);line-height:1.45;
}
.essay-outro-link{
  display:inline-block;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);text-decoration:none;
  border-bottom:1px solid rgba(201,162,39,.5);padding-bottom:2px;
  text-shadow:0 1px 2px #000;
  transition:color .15s ease,border-color .15s ease;
}
.essay-outro-link:hover,.essay-outro-link:focus-visible{
  color:#f0e6d4;border-color:var(--blood);outline:none;
}

#loader{
  position:fixed;inset:0;z-index:10;display:grid;place-items:center;
  background:var(--bg);transition:opacity .55s ease, visibility .55s;
}
#loader.hide{opacity:0;visibility:hidden;pointer-events:none}
#loader p{
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-dim);text-align:center;line-height:1.7;
}
#loader .pulse{color:var(--blood);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

@media(max-width:720px){
  .brand img{height:22px}
  .brand-meta{display:none}
  .beat{align-items:flex-start;padding-top:100px;padding-bottom:120px;min-height:145vh}
  .beat-inner{top:92px;max-width:min(360px,92vw)}
  .beat-title{font-size:clamp(32px,10vw,52px);line-height:1.05}
  .beat-body{font-size:13px;max-width:28em;line-height:1.45}
  .beat-kicker{font-size:9px;letter-spacing:.2em}
  .tape-stamp{font-size:7px;max-width:42vw;text-align:right;letter-spacing:.08em}
  #metric-counter{
    right:10px;top:auto;bottom:118px;transform:none;font-size:9px;
  }
  .ov-label{font-size:8px;padding:2px 6px;top:-22px}
  .nav-links{gap:6px}
  .nav-links a,.nav-links button{font-size:9px;padding:6px 8px;letter-spacing:.1em}
  .nav-links #btn-mute{padding:6px 8px}
  .pal-handle{width:22px;height:22px;margin:-11px 0 0 -11px;font-size:10px;border-width:1.5px}
  .pal-cue{font-size:7px;padding:4px 6px;letter-spacing:.12em}

  /* Aisle card: leave Halloween clear above the plate */
  html.store-open .beat[data-id="hero"] .beat-inner{
    max-width:min(280px,86vw);
    left:12px;
    bottom:64px;
    padding:10px 12px 10px;
  }
  html.store-aisle .beat[data-id="hero"] .beat-title{
    font-size:clamp(28px,8vw,40px);
  }
  html.store-open .beat[data-id="hero"] .beat-body{font-size:12px}

  /* Measure titles: keep energy without eating the sleeve */
  .beat[data-id="read"] .beat-title,
  .beat[data-id="faces"] .beat-title,
  .beat[data-id="palette"] .beat-title,
  .beat[data-id="symmetry"] .beat-title,
  .beat[data-id="diagonals"] .beat-title,
  .beat[data-id="blood"] .beat-title,
  .beat[data-id="knife"] .beat-title,
  .beat[data-id="archive"] .beat-title{
    font-size:clamp(28px,9vw,44px);
  }
  .beat[data-id="read"] .beat-inner,
  .beat[data-id="faces"] .beat-inner,
  .beat[data-id="palette"] .beat-inner,
  .beat[data-id="symmetry"] .beat-inner,
  .beat[data-id="diagonals"] .beat-inner,
  .beat[data-id="blood"] .beat-inner,
  .beat[data-id="knife"] .beat-inner,
  .beat[data-id="archive"] .beat-inner{
    top:88px;
    max-width:min(340px,90vw);
  }

  /* Measure beats: tighter copy so overlays stay visible on sleeve */
  .beat[data-id="diagonals"] .beat-inner,
  .beat[data-id="blood"] .beat-inner,
  .beat[data-id="knife"] .beat-inner{
    top:80px;
    max-width:min(300px,86vw);
  }
  .beat[data-id="diagonals"] .beat-title,
  .beat[data-id="blood"] .beat-title,
  .beat[data-id="knife"] .beat-title{
    font-size:clamp(26px,8.5vw,40px);
    margin-bottom:2px;
  }
  .beat[data-id="diagonals"] .beat-body,
  .beat[data-id="blood"] .beat-body,
  .beat[data-id="knife"] .beat-body{
    font-size:12px;
    line-height:1.4;
    max-width:24em;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  html.beat-measure #metric-counter{
    opacity:0 !important;
    visibility:hidden;
  }
  .ov-diagonals .diag-line{height:1.5px}
  span.ov-chip{font-size:9px;padding:5px 8px;letter-spacing:.12em}

  /* Palette: compact copy + fixed swatch strip — keep sleeve + handles clear */
  .beat[data-id="palette"] .beat-inner{
    top:76px;
    max-width:min(320px,88vw);
  }
  .beat[data-id="palette"] .beat-title{
    font-size:clamp(24px,8vw,36px);
    margin-bottom:4px;
  }
  .beat[data-id="palette"] .beat-kicker{margin-bottom:6px}
  .beat[data-id="palette"] .beat-body{
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:12px;
    line-height:1.4;
    max-width:24em;
  }
  .ov-palette .pal-cue{display:none !important}
  html.beat-palette #metric-counter{opacity:0 !important;visibility:hidden}
  .beat[data-id="palette"] .beat-pal-panel.pal-panel{
    position:fixed;
    left:10px;right:10px;
    bottom:80px;
    z-index:6;
    margin:0;
    gap:4px;padding:6px 7px;border-radius:8px;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    pointer-events:auto;
    background:rgba(10,8,6,.94);
    border:1px solid rgba(201,162,39,.35);
    box-shadow:0 10px 28px rgba(0,0,0,.65);
  }
  .beat[data-id="palette"] .beat-pal-panel.pal-panel::-webkit-scrollbar{display:none}
  .beat-pal-panel.pal-panel{
    gap:4px;padding:6px;border-radius:8px;
    margin-top:10px;
    flex-wrap:nowrap;
    overflow-x:auto;
  }
  .beat-pal-panel .pal-swatch{
    flex:1 1 0;
    min-width:0;
    max-width:none;
    min-height:44px;
    padding:6px 4px 7px;
    border-radius:7px;
  }
  .pal-swatch .ps-hex{font-size:6px;letter-spacing:0}
  .pal-swatch .ps-oklch-label,
  .pal-swatch .ps-oklch,
  .pal-swatch .ps-role{display:none}
  .pal-swatch .ps-n{width:14px;height:14px;font-size:8px;top:4px;right:4px}

  /* Archive: short plate — leave cassette window readable; CTA to full essay */
  .beat[data-id="archive"] .beat-body{
    max-width:22em;
    font-size:11px;
    line-height:1.4;
    background:rgba(8,6,5,.82);
    padding:8px 10px;
    border-left:2px solid var(--blood);
    display:block;
    overflow:visible;
  }
  .beat[data-id="archive"] .beat-essay-hint{
    font-size:9px;margin-top:12px;letter-spacing:.12em;
  }
  .beat[data-id="archive"] .beat-essay-cta{
    margin-top:8px;
    background:rgba(8,6,5,.88);
    padding:8px 10px;
    border:1px solid rgba(201,162,39,.35);
    border-left:2px solid var(--amber);
  }
  .beat[data-id="archive"] .beat-essay-cta a{font-size:10px;letter-spacing:.12em}
  .essay-outro-bar{
    bottom:clamp(58px,10vh,76px);
    max-width:min(360px,94vw);
    padding:10px 14px 12px;
  }
  .essay-outro-hint{font-size:9px;letter-spacing:.12em;margin-bottom:8px}
  .essay-outro-link{font-size:10px;letter-spacing:.12em}
  .hud-bottom{gap:8px}
  .progress-wrap{min-width:110px;max-width:160px}
}
@media(min-width:900px){
  .beat{align-items:flex-start;padding-left:clamp(28px,5vw,72px)}
  .beat-inner{transform:none;margin-right:min(36vw,420px);max-width:34rem}
}
@media(prefers-reduced-motion:reduce){
  .fx-grain{animation:none}
  .scroll-cue{animation:none}
  #loader .pulse{animation:none}
  .ov{transition:none}
}

/* Embedded in essay (index.html#exhibit-a) — trim redundant chrome */
html.demo-embed .nav-links a[data-demo-essay-link]{display:none}
html.demo-embed .essay-outro-link{cursor:pointer}