@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   INFINITE WISDOM — the Limited Edition
   Every colour in this file is sampled from the production jacket artwork.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Progressive no-JS fallback. boot.js marks the root before first paint; if
   scripts are unavailable, the decorative cinematic layer and its scroll cue
   stay out of the complete static document without requiring body-level CSS. */
html:not([data-booted]) .stage { display: none !important; }

/* ------------------------------------------------------------------ type --- */
@font-face{font-family:"Archivo";src:url("../type/archivo-var.woff2") format("woff2-variations"),url("../type/archivo-var.woff2") format("woff2");font-weight:300 900;font-stretch:88% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../type/fraunces-var.woff2") format("woff2-variations"),url("../type/fraunces-var.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"PlexMono";src:url("../type/plexmono.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------- tokens --- */
:root{
  /* jacket ink */
  --ink:#07070a; --ink-2:#0b0a0f; --ink-3:#131219; --ink-4:#1d1b24;
  /* bookshop paper */
  --paper:#f4efe4; --paper-2:#e8e0cf; --paper-3:#dbd2be; --paper-ink:#16150f;
  /* upgrade */
  --gold:#d9ac35; --gold-deep:#bb922a; --gold-dark:#8a7000;
  --gold-lit:#f6e6ad; --burnt:#be7129;
  /* unplug */
  --green:#13af62;      /* the jacket's own field green */
  --green-type:#34a468; /* the same hue at display scale on ink: 6.1:1 */
  --green-mid:#0c7849; --green-deep:#0a4c2e; --forest:#0f2a17;
  /* jacket roundel */
  --teal:#1b837b; --teal-ink:#11655e;   /* the same hue, taken to AA on paper */
  --yellow:#ffcd01;
  /* text on ink */
  --tx:#ece7dd; --tx-2:#b3aca0; --tx-3:#918b7f;   /* 5.5:1 on ink at 9px */

  --shell:1272px;
  --gut:clamp(18px,4.6vw,60px);
  --tooth:radial-gradient(circle at 50% 50%,rgba(22,21,15,.17) .6px,transparent .75px);
  --hair:rgba(236,231,221,.13);
  --hair-gold:rgba(217,172,53,.26);

  --f-sans:"Archivo",ui-sans-serif,"Helvetica Neue",Arial,sans-serif;
  /* Campaign display voice. A system stack by request: it resolves to
     Helvetica Neue on macOS and iOS, and to Segoe UI, Roboto or Arial
     elsewhere, so the display face is not identical on every platform. The
     sizing below is set for the widest fallback that can be measured, and the
     hero lines are allowed to wrap rather than clip on any that cannot. */
  --f-display:"Helvetica Neue",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --f-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --f-mono:"PlexMono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.6,0,.2,1);

  /* Height of the fixed top stack — the header alone, now that the concept
     preview bar above it has gone. JS re-measures it, but these defaults are
     the measured values, so the correction is 0 px and nothing shifts. */
  --bars:61px;
  color-scheme:dark;
}

@media (max-width:719px){:root{--bars:58px}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--bars) + 18px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink);color:var(--tx);
  font-family:var(--f-sans);font-variation-settings:"wdth" 100,"wght" 400;
  font-size:clamp(15.5px,.42vw + 14.4px,17.5px);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p,ul,ol,dl{margin:0}
ul,ol{padding:0}
.journeys ol,.faq ol{padding-inline-start:1.3em}
a{color:inherit}
button{font:inherit;color:inherit;margin:0}
::selection{background:var(--gold);color:#0b0900}

.shell{width:min(var(--shell),100% - var(--gut)*2);margin-inline:auto}
.nowrap{white-space:nowrap}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:-100px;z-index:120;background:var(--gold);color:#0b0900;
  display:inline-flex;align-items:center;min-height:44px;padding:.7em 1.1em;font:600 .8rem/1 var(--f-sans);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-radius:2px}
.skip:focus-visible{top:12px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ------------------------------------------------------------ type roles --- */
.mega{
  font-family:var(--f-display);text-transform:uppercase;
  font-weight:900;font-variation-settings:normal;font-stretch:normal;
  font-size:clamp(2.45rem,7.1vw,6.55rem);line-height:.88;
  letter-spacing:-.035em;text-wrap:balance;
}
.mega--md{font-size:clamp(2.05rem,5.2vw,4.3rem);line-height:.9;letter-spacing:-.033em}
.serif{
  font-family:var(--f-serif);font-variation-settings:"opsz" 144,"wght" 560;
  font-size:clamp(1.95rem,4.4vw,3.65rem);line-height:1.0;letter-spacing:-.017em;
}
.lede{
  font-size:clamp(1.06rem,1.05vw + .8rem,1.36rem);line-height:1.5;
  color:var(--tx);font-variation-settings:"wdth" 100,"wght" 380;
  letter-spacing:-.006em;text-wrap:pretty;
}
.lede b{font-variation-settings:"wdth" 100,"wght" 640}
p{text-wrap:pretty}

.rubric{
  display:flex;flex-wrap:wrap;align-items:center;gap:.62em;
  font-size:clamp(.6rem,.2vw + .55rem,.7rem);line-height:1.2;
  font-variation-settings:"wdth" 94,"wght" 640;
  text-transform:uppercase;letter-spacing:.185em;color:var(--tx-2);
}
.rubric i{width:15px;height:1px;background:currentColor;opacity:.5;flex:none}
.rubric--gold{color:var(--gold)}
.rubric--ink{color:#5b5445}
.src{margin-top:1.5em;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 560;color:var(--tx-3)}
.foot{margin-top:2em;font-size:.86rem;line-height:1.62;color:var(--tx-2);max-width:56ch;
  padding-top:1.1em;border-top:1px solid var(--hair)}

/* ---------------------------------------------------------------- buttons --- */
.btn{
  --bg:var(--gold);--fg:#100c00;
  position:relative;display:inline-flex;flex-direction:column;justify-content:center;
  gap:.24em;min-height:52px;padding:.85em 1.45em;
  background:var(--bg);color:var(--fg);border:1px solid var(--bg);border-radius:2px;
  font-variation-settings:"wdth" 100,"wght" 680;font-size:.9rem;line-height:1.15;
  letter-spacing:.005em;text-decoration:none;cursor:pointer;overflow:hidden;
  transition:transform .34s var(--e-out),box-shadow .34s var(--e-out),background-color .28s,color .28s,border-color .28s;
}
.btn small{font-size:.665rem;letter-spacing:.115em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 560;opacity:.72}
.btn small b{font-family:var(--f-mono);font-weight:400;letter-spacing:.03em;opacity:1}
.btn::after{
  content:"";position:absolute;inset:3px;pointer-events:none;border-radius:1px;
  border:1px solid currentColor;opacity:0;transition:opacity .3s var(--e-io),inset .3s var(--e-out);
}
.btn:hover{box-shadow:0 10px 26px -14px rgba(0,0,0,.9)}
.btn:hover::after{opacity:.26;inset:4px}
.btn:active{transform:translateY(1px);box-shadow:0 2px 6px -4px rgba(0,0,0,.9)}
.btn:active::after{inset:3px;opacity:.4}
.btn--gold{--bg:var(--gold);--fg:#100c00}
.btn--line{--bg:transparent;--fg:var(--tx);border-color:rgba(236,231,221,.34)}
.btn--line:hover{--fg:#100c00;background:var(--tx);border-color:var(--tx);box-shadow:0 12px 34px -16px rgba(236,231,221,.4)}
.btn--sm{min-height:44px;padding:.5em .95em;font-size:.78rem}
.btn--wide{width:100%;align-items:center;text-align:center}
.chip{
  display:inline-flex;align-items:center;gap:.5em;margin:0 0 .9em;
  padding:.36em .72em;border:1px solid currentColor;border-radius:100px;
  font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 620;color:var(--teal);
}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}

/* ═══════════════════════════════════════════════ the cinematic layer ═════ */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;contain:strict}
.stage__gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;
  transition:opacity 1.1s var(--e-io)}
html[data-gl="on"] .stage__gl{opacity:1}
/* the spine: the axis the whole page is composed about */
.stage__seam{
  position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px);
  background:linear-gradient(180deg,transparent,rgba(217,172,53,.0) 4%,rgba(217,172,53,.20) 26%,rgba(217,172,53,.30) 50%,rgba(217,172,53,.16) 74%,transparent 97%);
  opacity:var(--seam,1);transition:opacity .8s var(--e-io);
}
.stage__vignette{
  position:absolute;inset:0;
  background:radial-gradient(122% 88% at 50% 42%,transparent 38%,rgba(0,0,0,.52) 100%);
}
/* Grain sits above everything, so the whole page shares one film stock. */
.stage__grain{
  position:fixed;inset:-60px;z-index:60;pointer-events:none;opacity:.5;
  mix-blend-mode:overlay;will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(1,end) infinite;
}
@keyframes grain{
  0%{transform:translate3d(0,0,0)}         14%{transform:translate3d(-14px,7px,0)}
  28%{transform:translate3d(9px,-12px,0)}  42%{transform:translate3d(-7px,-9px,0)}
  56%{transform:translate3d(13px,11px,0)}  70%{transform:translate3d(-11px,4px,0)}
  84%{transform:translate3d(5px,-14px,0)}  100%{transform:translate3d(0,0,0)}
}

/* ═══════════════════════════════════════════════════ fixed top stack ═════ */
.topbars{position:fixed;top:0;left:0;right:0;z-index:50}
/* The concept-preview bar that used to sit above the header has gone. The
   internal `?qa` readout it carried moved into the header and is still shown
   by nothing but that hatch, so QA keeps its instrument with no reader surface. */
/* Out of flow on purpose: the hatch must never change the layout it is being
   used to measure. In flow at 320 px it squeezed the header row and reported
   three overflows that do not exist without it. */
.qa-flag{position:absolute;top:100%;right:0;z-index:1;padding:.3em .6em;
  background:rgba(0,0,0,.92);border:1px solid var(--hair-gold);
  font-family:var(--f-mono);font-size:.62rem;color:var(--gold);
  max-width:min(46ch,96vw);line-height:1.35}
@media (max-width:1019px){}

.head{position:relative;border-bottom:1px solid var(--hair);
  transition:border-color .5s,transform .42s var(--e-io),opacity .32s var(--e-io)}
/* Reading downward, the navigation row retires and gives its height back to
   the artwork; it returns the moment the reader scrolls up or reaches the top. */
html[data-chrome="lean"] .head{transform:translateY(-100%);opacity:0;pointer-events:none}
html[data-chrome="lean"] .menu[open] nav{display:none}
.head::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(7,7,10,.93);backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35)}
.head__in{display:flex;align-items:center;gap:clamp(10px,2vw,30px);min-height:60px;padding:.4em 0;
  min-width:0;flex-wrap:nowrap}

.purchase-confirmation{background:#d9ac35;color:#17130a;border-bottom:1px solid #7d5c0f;
  box-shadow:0 8px 24px rgba(0,0,0,.24)}
.purchase-confirmation__in{min-height:42px;display:flex;align-items:center;justify-content:space-between;
  gap:1em;padding-block:.45em;font-size:.78rem;letter-spacing:.04em}
.purchase-confirmation p{display:flex;align-items:baseline;gap:.65em;min-width:0}
.purchase-confirmation p>span{text-transform:uppercase;font-size:.66rem;letter-spacing:.14em;font-weight:700}
.purchase-confirmation b{font-family:var(--f-mono);font-size:1rem;font-weight:500;white-space:nowrap}
.purchase-confirmation small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.purchase-confirmation a{color:inherit;font-weight:700;white-space:nowrap;text-underline-offset:.18em}
@media (max-width:540px){
  .purchase-confirmation__in{align-items:flex-start}
  .purchase-confirmation p{display:grid;gap:.1em}
  .purchase-confirmation small{white-space:normal}
}
.brand{display:flex;align-items:center;gap:.68em;text-decoration:none;min-width:0;flex:0 1 auto;
  min-height:44px;padding-block:.2em}
.brand__seam{position:relative;width:15px;height:26px;flex:none;
  border:1px solid rgba(236,231,221,.32);border-radius:1px;overflow:hidden;
  background:linear-gradient(90deg,var(--green-deep) 0 46%,#fff 46% 54%,var(--gold-deep) 54% 100%)}
.brand__txt{font-variation-settings:"wdth" 100,"wght" 660;font-size:.87rem;letter-spacing:.005em;
  line-height:1.08;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The byline is part of the identity, not a strapline, so it survives every
   width — it only loses its letter-spacing and a little size on a phone. */
.brand__txt small{display:block;font-variation-settings:"wdth" 92,"wght" 500;
  font-size:.585rem;letter-spacing:.115em;text-transform:uppercase;color:var(--tx-2);margin-top:.28em}
.head__nav{display:flex;gap:clamp(10px,1.5vw,22px);margin-inline-start:auto}
.head__nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:.5em 0;text-decoration:none;font-size:.775rem;
  font-variation-settings:"wdth" 96,"wght" 520;letter-spacing:.055em;color:var(--tx-2);
  transition:color .28s}
.head__nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .38s var(--e-out)}
.head__nav a:hover,.head__nav a[aria-current]{color:var(--tx)}
.head__nav a:hover::after,.head__nav a[aria-current]::after{transform:scaleX(1)}
.head__tools{display:flex;align-items:center;gap:8px;flex:none;margin-inline-start:auto}
.head__nav+.head__tools{margin-inline-start:0}

/* ------------------------------------------------------ small-screen menu --- */
.menu{display:none;position:relative;margin-inline-start:auto;flex:none}
.menu>summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:.5em;
  min-height:44px;min-width:44px;padding:.4em .8em;cursor:pointer;
  border:1px solid rgba(236,231,221,.22);border-radius:2px;
  font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 560;color:var(--tx-2)}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary i{position:relative;width:13px;height:9px;flex:none}
.menu>summary i::before,.menu>summary i::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor}
.menu>summary i::before{top:0}.menu>summary i::after{bottom:0}
.menu[open]>summary{color:var(--gold);border-color:var(--hair-gold)}
.menu[open]>summary i::before{top:4px}.menu[open]>summary i::after{bottom:4px}
.menu:not([open]) nav{display:none}
.menu nav{position:fixed;right:max(12px,env(safe-area-inset-right));top:calc(var(--bars) - 4px);
  min-width:min(15em,calc(100vw - 24px));max-width:calc(100vw - 24px);
  display:grid;background:var(--ink-2);border:1px solid var(--hair-gold);
  box-shadow:0 26px 60px -22px #000;padding:.35em}
.menu nav a{display:flex;align-items:center;min-height:44px;padding:.6em .85em;text-decoration:none;font-size:.82rem;
  font-variation-settings:"wdth" 96,"wght" 520;color:var(--tx-2);border-radius:2px}
.menu nav a:hover,.menu nav a:focus-visible{color:var(--tx);background:rgba(236,231,221,.06)}
.sound{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:44px;min-width:44px;padding:.42em .7em;
  background:transparent;border:1px solid rgba(236,231,221,.22);border-radius:2px;cursor:pointer;
  font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 560;color:var(--tx-2);transition:color .3s,border-color .3s}
.sound:hover{color:var(--tx);border-color:rgba(236,231,221,.5)}
.sound[aria-pressed="true"]{color:var(--gold);border-color:var(--hair-gold)}
.sound__bars{display:flex;align-items:flex-end;gap:2px;height:11px}
.sound__bars i{width:2px;height:3px;background:currentColor;transition:height .3s}
.sound[aria-pressed="true"] .sound__bars i{animation:vu .9s ease-in-out infinite alternate}
.sound[aria-pressed="true"] .sound__bars i:nth-child(2){animation-delay:.15s}
.sound[aria-pressed="true"] .sound__bars i:nth-child(3){animation-delay:.3s}
.sound[aria-pressed="true"] .sound__bars i:nth-child(4){animation-delay:.45s}
@keyframes vu{from{height:3px}to{height:11px}}
.sound__txt b{font-variation-settings:"wdth" 92,"wght" 700}

/* ═══════════════════════════════════════════════════ ACT I — the hero ════ */
/* A title card: the question at plate scale on the left, the object standing
   full-height on the right, the seam running between them. */
.hero{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;
  padding-top:calc(var(--bars) + clamp(18px,3.4vh,44px));padding-bottom:clamp(12px,2vh,22px)}
.hero__grid{
  flex:1;display:grid;min-height:0;
  grid-template-columns:minmax(0,1fr) clamp(196px,21.5vw,306px);
  grid-template-rows:auto auto 1fr;
  column-gap:clamp(22px,3.2vw,54px);row-gap:clamp(12px,2vh,26px);
  padding-block:clamp(2px,.8vh,12px);
}
.hero__copy{grid-column:1;grid-row:1/4;display:grid;grid-template-rows:subgrid;
  align-content:center;min-width:0;container-type:inline-size}
@supports not (grid-template-rows:subgrid){.hero__copy{display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,2vh,26px)}}
.hero .rubric{align-self:end}
.hero__body{align-self:start;display:grid;gap:clamp(14px,2.2vh,26px);align-content:start}

.mega--hero{font-size:clamp(2.5rem,10.9vw,3.45rem);letter-spacing:-.034em}
.mega__l{display:block}
/* stagger order, in CSS rather than style attributes, so the deployed CSP can
   keep style-src strict */
.mega--hero .mega__l:nth-child(1){--i:0}
.mega--hero .mega__l:nth-child(2){--i:1}
.mega--hero .mega__l:nth-child(3){--i:2}
.mega--hero .mega__l:nth-child(4){--i:3}
.hero__lede{--i:4}
.hero__acts{--i:5}
.mega__l .up{font-style:normal;color:var(--gold)}
.mega__l .un{font-style:normal;color:var(--green-type)}
/* Self-fitting: the longest line is measured against its own column, so the
   headline can never wrap into a different shape than it was composed in. */
@supports (width:1cqw){
  @media (min-width:1100px){
    /* Sized from the widest fallback the stack can resolve to here (Arial and
       Helvetica at 7.658em against Helvetica Neue's 7.639em). Segoe UI and
       Roboto cannot be measured on this machine, so this carries headroom and
       the lines are deliberately NOT set to nowrap: on a platform whose face is
       wider than measured the headline wraps, which is survivable, rather than
       overflowing a clipped container, which is not. */
    .mega--hero{font-size:min(11.3cqw,7.1rem)}
  }
}
.hero__lede{max-width:54ch;
  font-size:clamp(.95rem,.5vw + .84rem,1.08rem);line-height:1.55;color:var(--tx-2);
  font-variation-settings:"wdth" 100,"wght" 380}
.hero__lede b{font-variation-settings:"wdth" 100,"wght" 660;color:#fff}
.hero__acts{display:flex;flex-wrap:wrap;gap:10px}

.hero__obj{margin:0;position:relative;grid-column:2;grid-row:1/4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9em;
  justify-self:end;width:100%;min-width:0}
/* a container so the drag cue can be sized against the object it sits on,
   rather than against the viewport — the object is 306 px on a wide desktop
   and 150 px on a small phone, and the cue must fit inside both */
.hero__poster{position:relative;width:100%;container-type:inline-size}
.hero__poster img{transition:opacity 1s var(--e-io),transform 1s var(--e-io)}
html[data-gl="on"] .hero__poster img{opacity:0;transform:scale(.965);
  transition:opacity 1s var(--e-io),transform 1s var(--e-io)}
.hero__poster img{
  width:100%;border-radius:1px;
  box-shadow:0 2px 2px rgba(0,0,0,.4),0 22px 50px -18px rgba(0,0,0,.9),
             0 60px 110px -50px rgba(0,0,0,1);
}
.hero__poster-back{
  position:absolute;left:-13%;top:5.5%;width:78%;z-index:-1;
  transform:rotate(-6.5deg);filter:brightness(.62) saturate(.9);
}
.hero__obj figcaption{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  font-variation-settings:"wdth" 90,"wght" 520;color:var(--tx-3);text-align:center;max-width:26ch}
html[data-gl="on"] .hero__obj figcaption{opacity:0;transition:opacity .6s}

/* ---------------------------------------------- the handle on the object --- */
/* The affordance is persistent, sits inside the object's own box so it can
   never collide with neighbouring copy, and states both ways of operating it.
   After the first turn it stays — reduced, not removed. */
.grab{display:none}
html[data-gl="on"] .grab{
  display:block;position:absolute;inset:-5% -7%;z-index:3;
  background:transparent;border:0;padding:0;cursor:grab;
  touch-action:pan-y;                       /* a phone must still scroll */
  -webkit-tap-highlight-color:transparent}
html[data-gl="on"] .grab[data-on]{cursor:grabbing}
/* Placed over the jacket's own white foot margin rather than across its title,
   and inside the object's box, so it can never collide with the copy or the
   allocation strip below it. */
.grab__cue{
  position:absolute;left:50%;bottom:2.5%;translate:-50% 0;
  display:flex;align-items:center;gap:.6em;max-width:92%;
  padding:.5em .8em;pointer-events:none;
  background:rgba(6,6,9,.84);border:1px solid var(--hair-gold);border-radius:100px;
  box-shadow:0 10px 26px -14px #000;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .6s var(--e-io) .8s,padding .4s var(--e-out)}
html[data-gl="on"] .grab__cue{opacity:1}
.grab__txt{display:flex;flex-direction:column;gap:.15em;min-width:0;
  font-size:.585rem;letter-spacing:.13em;text-transform:uppercase;
  font-variation-settings:"wdth" 90,"wght" 620;color:var(--tx);white-space:nowrap}
.grab__txt b{font-variation-settings:"wdth" 90,"wght" 500;letter-spacing:.1em;
  color:var(--tx-3)}
/* A two-way drag, drawn as one: a chevron at each end of a short track, both
   nudging outward together. The old three leaning strokes only ever pointed
   one way, which is not what the gesture does. */
/* The chevrons are squares turned 45°, so each one's box is 8.5 px across, not
   6 — and the nudge moves them another 2. The track is inset far enough that
   nothing, at any point in the animation, reaches the edge of this span. */
.grab__ico{position:relative;flex:none;width:32px;height:11px}
.grab__ico i{position:absolute;top:50%;background:none;border:0}
.grab__ico .grab__t{left:12px;right:12px;height:1px;background:var(--gold);opacity:.5;
  transform:translateY(-50%)}
.grab__ico .grab__w,.grab__ico .grab__e{width:6px;height:6px;margin-top:-3px;
  border-top:1px solid var(--gold);border-left:1px solid var(--gold);
  animation:grabsplit 3.6s var(--e-io) infinite}
.grab__ico .grab__w{left:4px;transform:rotate(-45deg)}
.grab__ico .grab__e{right:4px;transform:rotate(135deg)}
@keyframes grabsplit{
  0%,70%,100%{translate:0 0}
  80%{translate:-2px 0}
  90%{translate:2px 0}
}
.grab__ico .grab__e{animation-name:grabsplit-e}
@keyframes grabsplit-e{
  0%,70%,100%{translate:0 0}
  80%{translate:2px 0}
  90%{translate:-2px 0}
}
/* once the reader has turned it, the cue keeps its place but stands down */
html[data-turned] .grab__cue{padding:.42em .6em;background:rgba(6,6,9,.66);
  border-color:var(--hair)}
html[data-turned] .grab__txt b{display:none}
html[data-turned] .grab__ico i{animation:none}
.grab:hover .grab__cue{border-color:var(--gold);background:rgba(6,6,9,.92)}
.grab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.grab__ico i{animation:none}}
/* Below these object widths the full label is wider than the book it labels,
   so it steps down instead of hanging off both edges. The phrase is never
   allowed to wrap — it loses words, in this order, and stays one line. */
@container (max-width: 250px){
  .grab__cue{gap:.45em;padding:.4em .62em}
  .grab__txt{font-size:.52rem;letter-spacing:.07em}
  .grab__txt b{display:none}
}
@container (max-width: 192px){
  .grab__ico{width:27px}
  .grab__ico .grab__t{left:11px;right:11px}
  .grab__ico .grab__w,.grab__ico .grab__e{width:5px;height:5px;margin-top:-2.5px}
  .grab__txt{font-size:.47rem;letter-spacing:.04em}
  .grab__long{display:none}
}

/* ---------------------------------------------------- the hero's ground --- */
/* The Upgrade artwork on one side of the spine axis and the Unplug artwork on
   the other, held far back. It is rgba-translucent by construction (opacity,
   not an opaque fill) so the cinematic layer behind it is never painted over. */
/* Sized so each artwork reads as a whole portrait held back at the outer edge,
   with the dot screen carrying the centre — not scaled to `cover`, which
   blew each face up until only an eye or a mouth was in frame. */
.split-ground{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 54%,transparent 96%);
          mask-image:linear-gradient(180deg,#000 0%,#000 54%,transparent 96%)}
.split-ground__up,.split-ground__un{position:absolute;top:0;bottom:0;width:50%;display:block;
  background-repeat:no-repeat;background-size:auto 64%;opacity:.115;
  filter:saturate(.7) contrast(1.02)}
.split-ground__up{left:0;background-image:url("../img/split-up-640.webp");background-position:left 12%}
.split-ground__un{right:0;background-image:url("../img/split-un-640.webp");background-position:right 12%}
.split-ground__dots{position:absolute;inset:0;display:block;
  background-image:radial-gradient(circle at 50% 50%,rgba(236,231,221,.2) .9px,transparent 1.15px);
  background-size:7px 7px;opacity:.7;
  -webkit-mask-image:radial-gradient(44% 62% at 50% 28%,#000,transparent 76%);
          mask-image:radial-gradient(44% 62% at 50% 28%,#000,transparent 76%)}
@media (min-width:1100px){
  .split-ground__up{background-image:url("../img/split-up-1000.webp")}
  .split-ground__un{background-image:url("../img/split-un-1000.webp")}
}



/* ═══════════════════════════════════════════ ACT I b — the allocation ════ */
/* Scarcity is the commercial fact of this edition, so it is drawn at the scale
   of a fact. Two tranches of one hard-capped run, charted thickly enough to be
   read across a room — and every value comes from the edition state object, so
   there is no invented demand, no countdown and no viewer count anywhere. */
.alloc{position:relative;z-index:1;padding-block:clamp(52px,9vh,120px) clamp(46px,8vh,104px)}
.alloc::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.5) 34%,rgba(0,0,0,.5) 66%,rgba(0,0,0,0))}
.alloc .mega{margin-block:.34em .9em;max-width:16ch}
.alloc .mega b{font-weight:inherit;font-variation-settings:inherit;color:var(--gold);
  font-variant-numeric:tabular-nums}
/* CTA-02: the commercial next step stands in the same visual unit as the
   availability it answers, not three acts further down. */
.alloc__act{margin-bottom:clamp(24px,3.6vh,40px)}
.alloc__none{max-width:56ch;font-size:.95rem;line-height:1.6;color:var(--tx-2);
  padding-left:1em;border-left:2px solid var(--gold)}

.tranche{list-style:none;display:grid;gap:clamp(22px,3.4vh,40px)}
.tranche__row{display:grid;gap:.7em}
.tranche__k{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em .9em}
.tranche__k b{font-variation-settings:"wdth" 100,"wght" 760;
  font-size:clamp(1.02rem,1.5vw,1.28rem);letter-spacing:-.01em;color:var(--tx)}
.tranche__k span{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 560;color:var(--tx-3)}
.tranche__row--early .tranche__k b{color:var(--gold)}

.tranche__chart{display:grid;gap:.6em}
/* The bar itself. Thick enough to be the loudest element in the act, with a
   ten-part scale scored across it so a proportion can be read, not guessed. */
.tranche__bar{--barh:clamp(30px,5.4vw,58px);
  position:relative;height:var(--barh);overflow:hidden;
  background:rgba(236,231,221,.07);border:1px solid var(--hair)}
.tranche__fill{position:absolute;inset:0 auto 0 0;display:block;
  width:calc(var(--fill,1) * 100%);
  /* Flat ink, not a vertical ramp: the gradient read as an old progress bar.
     The bar keeps its weight and its ten-part scale; only the shading goes. */
  background:var(--gold);
  transition:width .7s var(--e-out)}
.tranche__row--standard .tranche__bar{border-color:rgba(143,185,155,.26)}
.tranche__row--standard .tranche__fill{background:var(--green-mid)}
.tranche__grid{position:absolute;inset:0;display:block;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,
    rgba(7,7,10,.42) 0 1px,transparent 1px 10%)}

.tranche__read{display:flex;align-items:baseline;gap:.5em;
  font-size:clamp(1.02rem,1.6vw,1.32rem);line-height:1.24;
  font-variation-settings:"wdth" 100,"wght" 500;color:var(--tx)}
.tranche__read b{font-family:var(--f-mono);font-weight:400;
  font-size:1.22em;letter-spacing:.02em;color:var(--gold);font-variant-numeric:tabular-nums}
.tranche__row--standard .tranche__read b{color:var(--green-type)}
.tranche__meta{font-size:.82rem;line-height:1.56;color:var(--tx-2);max-width:62ch}
.tranche__meta b{font-family:var(--f-mono);font-weight:400;color:var(--tx)}


/* ═══════════════════════════════════════════ ACT II — one jacket ═════════ */
.unfold{position:relative;z-index:1}
/* No opaque ground in the dark acts: the cinematic layer sits behind them at
   z-index 0 and an opaque section background would paint straight over it. */
.unfold::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.42) 30%,rgba(0,0,0,.42) 70%,rgba(0,0,0,0))}

/* ---------------------------------------------------- the two positions --- */
/* The split, imported from the campaign's illustrated language and composed
   about the same spine axis the rest of the page uses. It states the two
   positions and offers no way to pick one, because there is nothing to pick. */
/* Moved into the novel act (IA-01): the artwork stands with the vote it
   depicts, and the blurb above has already defined both positions, so each
   panel now carries only the name of the face it shows. */
.split{position:relative;margin-top:clamp(34px,6vh,72px);display:grid;
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
  width:min(var(--shell),100% - var(--gut)*2);margin-inline:auto;
  border:1px solid var(--hair);background:var(--ink-2)}
/* The artwork is square and the face fills nearly all of it, so a landscape
   panel cuts her off at the mouth however the crop is positioned: a 1.5 aspect
   can only show two thirds of the source's height. The panel is kept close to
   square instead, and the copy sits over the shoulder rather than the chin. */
.split__side{position:relative;isolation:isolate;min-width:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(300px,40vw,548px);padding:clamp(16px,2.2vw,28px)}
.split__side img{position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;max-width:none;object-fit:cover}
.split__side--up img{object-position:36% 22%}
.split__side--un img{object-position:64% 22%}
/* a local ground so the copy is legible over unpredictable artwork, and the
   dot screen that carries the campaign's circuit language across both faces */
.split__side::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(circle at 50% 50%,rgba(6,6,9,.30) .9px,transparent 1.15px) 0 0/6px 6px,
    linear-gradient(180deg,rgba(6,6,9,.24) 0%,rgba(6,6,9,.62) 46%,rgba(6,6,9,.95) 100%)}
.split__seam{background:linear-gradient(180deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent);
  opacity:.5}
.split__k{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-2)}
.split__h{font-family:var(--f-display);text-transform:uppercase;font-weight:900;
  font-variation-settings:normal;font-size:clamp(1.9rem,5vw,3.1rem);line-height:.9;
  letter-spacing:-.034em;margin:.2em 0 .34em}
.split__side--up .split__h{color:var(--gold)}
.split__side--un .split__h{color:var(--green-type)}

.unfold__scene{position:relative;height:240vh}
.unfold__pin{position:sticky;top:0;height:100svh;display:grid;
  grid-template-rows:1fr auto;gap:clamp(14px,2.6vh,34px);
  padding-top:var(--bars);padding-bottom:clamp(16px,3vh,34px);overflow:hidden}

.plate{--panh:min(48svh,38vw,392px);grid-row:1;
  position:relative;align-self:center;width:100%;display:grid;gap:.8em}
.plate__rule{display:flex;justify-content:space-between;gap:1em;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.09em;color:var(--tx-3);
  padding-inline:var(--gut)}
.plate__rule--top{border-bottom:1px solid var(--hair);padding-bottom:.5em;justify-content:center}
.plate__rule--bot{border-top:1px solid var(--hair);padding-top:.5em}
.plate__strip{
  display:flex;align-items:flex-end;gap:0;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:thin;padding-inline:var(--gut);
}
html[data-gl="on"] .plate{display:none}
.unfold__stage{display:none;grid-row:1;align-self:center;width:100%;height:min(48svh,420px)}
@media (min-width:720px){.unfold__stage{height:min(58svh,42vw,470px)}}
html[data-gl="on"] .unfold__stage{display:block}
/* The object appears in exactly three places — held in the hero, opened out in
   the panel study, and once more as the closing reprise (whose own rules live
   with Act IX). The novel, the verdicts and the pair carry no rendered copy at
   all, which is what stops the jacket from being revealed four times. */
.pan{margin:0;position:relative;flex:none;display:flex;flex-direction:column;gap:.55em;
  scroll-snap-align:center}
.pan img{height:var(--panh);width:auto;max-width:none;object-fit:contain;
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 26px 60px -26px rgba(0,0,0,.95)}
.pan--spine img{box-shadow:none}
.pan figcaption{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.08em;
  color:var(--tx-3);text-align:center;white-space:nowrap}
.pan figcaption b{color:var(--gold);font-weight:400;margin-inline-end:.4em}

/* The narration column that used to stand beside the plate has gone. With it
   went the reason the pinned scene needed a second grid column at all, so on a
   wide screen the sheet now simply owns the frame. */
@media (min-width:1100px){
  .unfold__pin{grid-template-rows:minmax(0,1fr);align-items:center}
}

/* ═══════════════════════════════════════════════ ACT III — the novel ════ */
.novel{position:relative;z-index:1;padding-block:clamp(80px,14vh,180px);
  background:radial-gradient(112% 74% at 50% 0%,rgba(217,172,53,.055),transparent 62%)}
.novel::before,.novel::after{
  content:"";position:absolute;top:0;bottom:0;width:min(30%,340px);pointer-events:none;
  background-repeat:no-repeat;background-size:cover;opacity:.11;
}
.novel::before{left:0;background-image:url("../img/motif-branch-canopy.webp");
  background-position:left top;transform:scaleX(-1)}
.novel::after{right:0;background-image:url("../img/motif-circuit-band.webp");
  background-position:right bottom;background-size:contain;opacity:.14}
/* One column: the referendum-terms sidebar has gone and the two faces now sit
   beneath the blurb at full width. The measure is held on the copy itself. */
.novel__grid{display:grid;position:relative}
.novel__copy{max-width:74ch}
.novel__copy .serif{margin-block:.34em .7em}
.novel__copy p+p{margin-top:1em;color:var(--tx-2)}
.novel__copy p b{color:var(--tx);font-variation-settings:"wdth" 100,"wght" 640}
.novel__kick{margin-top:1.5em!important;font-family:var(--f-serif);font-style:italic;
  font-variation-settings:"opsz" 60,"wght" 430;
  font-size:clamp(1.14rem,1.5vw,1.5rem);line-height:1.34;color:var(--gold-lit)!important;
  padding-left:1em;border-left:1px solid var(--hair-gold)}


/* ═══════════════════════════════════ ACT IV b — the reader verdicts ═════ */
/* A short deck of review slips, lit and stacked like paper on a table. It is
   pulled through by hand — dragged, pressed, or stepped with the arrow keys —
   which is the same gesture the jacket uses in the hero, so the page has one
   physical language rather than two. Until boot.js sets `data-on` the slips
   simply stack and read as a list of quotations. */
.verdicts{position:relative;z-index:1;padding-block:clamp(66px,11vh,150px)}
.verdicts::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(88% 64% at 50% 30%,rgba(217,172,53,.05),transparent 66%),
             linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0) 34%,rgba(0,0,0,.42))}
/* The head states the fact and the deck is the object: side by side on a wide
   screen so neither is stranded in half an empty frame. */
.verdicts__grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  column-gap:clamp(28px,4.4vw,72px);row-gap:clamp(24px,3.6vh,44px);align-items:start}
.verdicts__src{grid-column:1/-1}
@media (max-width:1099px){
  .verdicts__grid{grid-template-columns:1fr}
}
.verdicts__head{max-width:62ch}
.verdicts__head .serif{margin-block:.34em .7em}
.verdicts__agg{display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap;
  padding-top:.9em;border-top:1px solid var(--hair-gold);max-width:52ch}
.verdicts__agg b{font-variation-settings:"wdth" 112,"wght" 760;
  font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;letter-spacing:-.026em;color:var(--gold);
  font-variant-numeric:tabular-nums}
.verdicts__agg span{flex:1 1 14em;font-size:.8rem;line-height:1.5;color:var(--tx-2)}
.verdicts__src{margin-top:clamp(22px,3.4vh,38px);padding-top:1.1em;
  border-top:1px solid var(--hair);max-width:78ch;
  font-size:.78rem;line-height:1.6;color:var(--tx-3)}
.verdicts__src b{color:var(--gold);font-variation-settings:"wdth" 100,"wght" 660}
.verdicts__src code{font-family:var(--f-mono);font-size:.94em;color:var(--tx-2)}

.deck{position:relative}
.deck__slips{list-style:none;display:grid;gap:clamp(14px,2.2vh,22px)}

/* the slip: a printed card, not a testimonial box */
.slip{position:relative;background:var(--paper);color:var(--paper-ink);
  background-image:var(--tooth);background-size:3px 3px;
  border-radius:1px;padding:clamp(20px,3vw,34px) clamp(20px,3vw,36px);
  box-shadow:0 2px 2px rgba(0,0,0,.4),0 30px 62px -30px rgba(0,0,0,.95)}
.slip blockquote{margin:0;display:grid;gap:clamp(14px,2vh,22px)}
.slip__q{font-family:var(--f-serif);font-variation-settings:"opsz" 90,"wght" 460;
  font-size:clamp(1.16rem,1.5vw + .82rem,1.82rem);line-height:1.2;letter-spacing:-.012em;
  text-wrap:pretty}
.slip__q::before{content:"\201C"}
.slip__q::after{content:"\201D"}
.slip__by{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em 1.1em;
  padding-top:.85em;border-top:1px solid var(--paper-3)}
.slip__who{font-variation-settings:"wdth" 100,"wght" 700;font-size:.88rem;
  letter-spacing:-.004em;min-width:0;overflow-wrap:anywhere;color:inherit;
  text-decoration-color:rgba(40,35,24,.32);text-underline-offset:.18em}
.slip__who:hover{text-decoration-color:currentColor}
.slip__who:focus-visible{outline:2px solid #6b5405;outline-offset:3px;border-radius:1px}
.slip__out{font-size:.72em;margin-inline-start:.35em;opacity:.62}
.slip__rate{font-family:var(--f-mono);font-size:.86rem;letter-spacing:.02em;color:#6b5405;
  font-variant-numeric:tabular-nums}
.slip__rate i{font-style:normal;opacity:.5;margin-inline:.12em}
.slip__when{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 520;color:#5b5445;margin-inline-start:auto}

/* ── stacked, once scripting is there to pull it apart ─────────────────── */
.deck[data-on]{cursor:grab;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.deck[data-grabbing]{cursor:grabbing}
/* Every slip fills the same reserved box, so the stack behind the front one is
   a stack rather than a ragged edge of differently sized cards. The box has to
   hold the longest quote at the narrowest column this layout allows. */
.deck[data-on] .deck__slips{display:block;position:relative;
  min-height:clamp(300px,24vw,350px)}
/* The fanned copies are transformed to the right, and a transformed descendant
   still counts toward its scroll container's overflow — the stack was pushing
   26 px past its own column. The slips give up a tenth of the width so the fan
   has somewhere to sit inside the grid rather than outside it. */
.deck[data-on] .slip{position:absolute;inset:0 10% 0 0;
  transition:transform .55s var(--e-out),opacity .45s var(--e-io),filter .45s var(--e-io);
  will-change:transform}
.deck[data-on] .slip blockquote{height:100%;align-content:space-between}
/* depth is stated as distance-from-front, so the rules do not need to know how
   many slips there are */
.deck[data-on] .slip[data-d="0"]{transform:rotate(-.55deg);z-index:4;opacity:1}
.deck[data-on] .slip[data-d="1"]{transform:translate(3.2%,20px) rotate(1.5deg) scale(.955);
  z-index:3;opacity:.9;filter:brightness(.82)}
.deck[data-on] .slip[data-d="2"]{transform:translate(6.2%,38px) rotate(-1.9deg) scale(.915);
  z-index:2;opacity:.72;filter:brightness(.64)}
.deck[data-on] .slip[data-d="3"]{transform:translate(8.8%,54px) rotate(2.4deg) scale(.88);
  z-index:1;opacity:0;filter:brightness(.5)}
.deck[data-on] .slip:not([data-front]){pointer-events:none}
.deck[data-on]:hover .slip[data-d="0"]{transform:rotate(-.55deg) translateY(-3px)}

/* clear of the deepest visible slip, which sits 38 px down and a shade wider
   than the front card once it is rotated */
.deck__ctl{display:flex;align-items:center;gap:clamp(10px,1.6vw,18px);flex-wrap:wrap;
  margin-top:clamp(38px,5vh,54px)}
.deck__nav{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;flex:none;padding:0;cursor:pointer;
  background:transparent;border:1px solid rgba(236,231,221,.3);border-radius:50%;
  transition:border-color .28s,background-color .28s}
.deck__nav:hover{border-color:var(--gold);background:rgba(217,172,53,.09)}
.deck__nav span{width:8px;height:8px;display:block;
  border-top:1px solid var(--gold);border-left:1px solid var(--gold);
  transform:rotate(-45deg) translate(1px,1px)}
.deck__nav--next span{transform:rotate(135deg) translate(1px,1px)}
.deck__count{font-family:var(--f-mono);font-size:.84rem;letter-spacing:.06em;color:var(--tx-3);
  font-variant-numeric:tabular-nums}
.deck__count b{font-weight:400;color:var(--gold)}
.deck__cue{font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  font-variation-settings:"wdth" 90,"wght" 560;color:var(--tx-3);
  margin-inline-start:auto;white-space:nowrap}

/* ═══════════════════════════════════════════════ ACT V — the pair ═══════ */
/* Two books, one treatment. Artificial Wisdom is photographed on the same
   ground, at the same canvas aspect, with the same contact shadow as the
   Infinite Wisdom packshot, so the pair reads as two prints of one series
   rather than a product and its accessory. */
.pair{position:relative;z-index:1;padding-block:clamp(80px,14vh,180px)}
.pair::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(96% 70% at 50% 34%,rgba(0,0,0,0) 24%,rgba(0,0,0,.58) 80%),
             linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.34))}
.pair__head{max-width:62ch}
.pair__head .serif{margin-block:.34em .66em}
.pair__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3.4vw,52px);align-items:start;
  margin-top:clamp(28px,4.6vh,58px)}
.pair__object{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(28px,4vw,66px);align-items:start;
  margin-top:clamp(36px,6vh,80px);padding-top:clamp(26px,4vh,48px);
  border-top:1px solid var(--hair)}
.pair__h3{font-family:var(--f-serif);font-variation-settings:"opsz" 40,"wght" 580;
  font-size:1.22rem;line-height:1.2}
.pair__mark{display:grid;justify-items:start;gap:0}
.specs{margin-top:clamp(20px,3vh,34px);border-top:1px solid var(--hair)}
.specs div{display:grid;grid-template-columns:minmax(6.4em,auto) 1fr;gap:.3em 1.5em;
  padding:1em 0;border-bottom:1px solid var(--hair);align-items:baseline}
.specs dt{font-variation-settings:"wdth" 108,"wght" 700;font-size:1rem;color:var(--gold);
  letter-spacing:.005em;font-variant-numeric:tabular-nums}
.specs dd{margin:0;font-size:.92rem;line-height:1.55;color:var(--tx-2)}

/* Each book is presented as a physical print: paper margin, cast shadow, a
   slight and opposite tilt so the two sit on the page as a pair of objects. */
.print{margin:0;position:relative;display:grid;gap:0}
/* The tilt makes the print's own bounding box wider than its column by
   height × sin(0.9°); the inset gives that back, so the cast shadow is never
   clipped by a narrow gutter and the column never overflows. */
.print__img{margin-inline:6px;
  padding:clamp(12px,1.5vw,22px) clamp(12px,1.5vw,22px) clamp(24px,2.8vw,38px);
  background:#f1f2f7;box-shadow:0 3px 3px rgba(0,0,0,.35),0 34px 70px -28px rgba(0,0,0,.95)}
.print--iw .print__img{rotate:-.9deg}
.print--aw .print__img{rotate:.8deg}
.print img{width:100%}
.print figcaption{margin-top:clamp(18px,2.6vh,28px);font-size:.9rem;line-height:1.55;
  color:var(--tx-2);max-width:42ch}
.print figcaption b{color:var(--tx);font-variation-settings:"wdth" 100,"wght" 660}
.print figcaption small{display:block;margin-top:.55em;padding-top:.55em;
  border-top:1px solid var(--hair);
  font-size:.76rem;line-height:1.5;color:var(--tx-3)}
.stamp{position:relative;margin-top:clamp(14px,2vh,22px);display:inline-block;
  background:var(--ink);border:1px solid var(--hair-gold);padding:.7em .95em;text-align:center;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.9)}
.stamp span{display:block;font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.stamp strong{display:block;font-family:var(--f-mono);font-weight:400;font-size:1.06rem;
  letter-spacing:.06em;color:var(--tx);margin:.3em 0 .24em}
.stamp small{display:block;font-size:.52rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-3)}

.colophon{margin-top:clamp(22px,3vh,36px);border-top:1px solid var(--hair);padding-top:1.1em}
.colophon ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9em 1.4em}
.colophon li{display:flex;align-items:center;gap:.7em;min-width:0}
.colophon img{width:34px;height:auto;flex:none;padding:3px;border-radius:1px;
  background:var(--paper-2);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.colophon span{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.02em;color:var(--tx-2);min-width:0}
.colophon b{display:block;font-family:var(--f-sans);font-variation-settings:"wdth" 90,"wght" 480;
  font-size:.575rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);margin-top:.18em}

/* ═══════════════════════════════════════════ ACT V — the edition ════════ */
/* The lights come up. This act is opaque paper: the cinematic layer is
   deliberately occluded here so the offer is read, not watched. */
.offer,.faq{position:relative;z-index:2}
/* A sheet of paper laid onto the dark, not a background that changes: a warm
   cut line at the edge and the dark falling away above it. */
.offer::after,.faq::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(138,112,0,0),rgba(138,112,0,.55) 22%,rgba(138,112,0,.55) 78%,rgba(138,112,0,0));
  pointer-events:none}
.offer::before,.faq::before{content:"";position:absolute;left:0;right:0;top:-64px;height:64px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55));pointer-events:none}
/* Screenprint tooth, carried over from the v2 paste-up. It belongs only on the
   acts that ARE printed matter: when the lights come up, the ground you land on
   is paper with a visible dot screen. It is never laid over the cinematic
   layer, where the subject is a lit object in a room rather than a print. */
.offer,.faq{background-image:var(--tooth);background-size:3px 3px}
.offer{background-color:var(--paper);color:var(--paper-ink);
  padding-block:clamp(66px,11vh,140px);
  box-shadow:0 -1px 0 rgba(0,0,0,.55)}
.offer .lede{color:#3f3a2e}
.offer .lede b{color:var(--paper-ink)}
.offer__head{max-width:60ch;padding-bottom:clamp(26px,4vh,48px)}
.offer__head .serif{margin-block:.3em .55em;color:var(--paper-ink)}
.panel{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);
  gap:clamp(20px,3vw,44px);align-items:start}
.panel__main{display:grid;gap:clamp(16px,2.2vw,26px)}

.copyno{border:1px solid var(--paper-3);background:#fff;padding:clamp(18px,2.4vw,30px);
  position:relative;overflow:hidden}
.copyno::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.copyno__label{font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 620;color:#5b5445}
.copyno__num{font-family:var(--f-mono);font-size:clamp(2.6rem,6vw,4.3rem);line-height:1;
  letter-spacing:.045em;margin:.2em 0 .5em;color:var(--paper-ink)}
.copyno__num [data-next-num]{display:inline-block;padding:.08em .13em .05em;
  margin-left:-.13em;background:rgba(222,173,43,.16);box-shadow:inset 0 -3px 0 var(--gold)}
.number-updated{animation:number-live-update .7s var(--e-out)}
@keyframes number-live-update{0%{background-color:rgba(222,173,43,.65);transform:translateY(-.06em)}
  100%{background-color:transparent;transform:none}}
@media (prefers-reduced-motion:reduce){.number-updated{animation:none}}
.copyno__num--none,.copyno__num--random{font-family:var(--f-sans);
  font-variation-settings:"wdth" 100,"wght" 800;letter-spacing:-.02em;
  font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:.94;color:#3f3a2e}

/* The one place the object and the novel touch. It is set as a note in the
   margin of the number rather than another paragraph of explanation. */

/* A registry counter, not an urgency widget: a hairline that depletes, with
   the numbers stated plainly. No red, no countdown, no pressure language. */
.gauge{margin-bottom:1.2em}
.gauge__track{height:3px;background:var(--paper-3);position:relative;overflow:hidden}
.gauge__track i{position:absolute;inset:0 auto 0 0;width:calc(var(--fill,1) * 100%);
  background:var(--gold-dark);transition:width .5s var(--e-out)}
.gauge__read{margin-top:.7em;font-size:.86rem;color:#3f3a2e}
.gauge__read b{font-family:var(--f-mono);font-weight:400;font-size:1.02em;color:var(--paper-ink)}

.copyno__note{font-size:.78rem;line-height:1.55;color:#4c4638;max-width:56ch}
.copyno__note b{font-variation-settings:"wdth" 100,"wght" 680;color:var(--paper-ink)}
.copyno--random::before{background:#8f8a7e}

.incl{padding:clamp(18px,2.4vw,28px) 0 0;border-top:1px solid var(--paper-3)}
.incl h3{font-family:var(--f-serif);font-variation-settings:"opsz" 40,"wght" 580;
  font-size:1.22rem;line-height:1.15;margin-bottom:.8em}
.incl ul{list-style:none;display:grid;gap:.62em}
.incl li{position:relative;padding-left:1.5em;font-size:.94rem;line-height:1.52;color:#3f3a2e}
.incl li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--gold-dark)}
.incl li b{font-variation-settings:"wdth" 100,"wght" 660;color:var(--paper-ink)}
/* The Artificial Wisdom add-on is a single honest line here; the book itself
   is presented as a co-equal object further up, not as a dense upsell panel. */
.addon-note{padding-top:clamp(16px,2.2vw,24px);border-top:1px solid var(--paper-3);
  font-size:.86rem;line-height:1.58;color:#4c4638;max-width:62ch}
.addon-note b{font-variation-settings:"wdth" 100,"wght" 680;color:var(--paper-ink)}
.addon-note a{color:#6b5405;text-underline-offset:.22em}

.receipt{border:1px solid var(--paper-ink);background:#fff;padding:clamp(18px,2.4vw,28px);
  position:sticky;top:calc(var(--bars) + 22px);
  box-shadow:8px 8px 0 rgba(22,21,15,.09)}
.receipt__r{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.15em;
  text-transform:uppercase;color:#5b5445;padding-bottom:.9em;border-bottom:1px dashed var(--paper-3)}
.receipt h3{font-family:var(--f-serif);font-variation-settings:"opsz" 40,"wght" 580;
  font-size:1.14rem;line-height:1.2;margin-top:.9em}
.receipt h3 i{font-style:normal;color:var(--gold-dark);margin-inline:.15em}
.receipt__p{font-variation-settings:"wdth" 112,"wght" 740;font-size:clamp(2.6rem,5.6vw,3.5rem);
  line-height:1;letter-spacing:-.028em;margin:.2em 0 .5em}
.receipt ul{list-style:none;display:grid;gap:.55em;padding-bottom:1.2em;
  border-bottom:1px dashed var(--paper-3);margin-bottom:1.2em}
.receipt li{position:relative;padding-left:1.35em;font-size:.83rem;line-height:1.48;color:#3f3a2e}
.receipt li::before{content:"";position:absolute;left:.15em;top:.58em;width:5px;height:5px;
  border-radius:50%;background:var(--gold)}
/* No destination configured means no href, so this is not a link at all: not
   focusable, not clickable, not announced as one. It is shown inert rather
   than dressed up as a working button. See IW_COMMERCE in the document head. */
[data-buy]:not([href]){opacity:.5;cursor:default}
[data-buy]:not([href]):hover{box-shadow:none}
[data-buy]:not([href])::after{display:none}
.offer .btn--line{--fg:var(--paper-ink);border-color:var(--paper-ink)}
.offer .chip,.faq .chip,.journeys .chip{color:var(--teal-ink)}

/* ═══════════════════════════════════════════ ACT III — provenance ═══════ */
/* A credit line at the scale of a credit line. The three names are printed on
   the jacket's own back flap, so this band takes that flap's colour and states
   them — the biographies, the explanation of why they count and the pull quote
   that closed the section have all gone. */
.made{position:relative;z-index:2;background:var(--forest);color:#dfe9e0;
  padding-block:clamp(40px,6vh,74px);overflow:hidden}
.made::before{content:"";position:absolute;right:-4%;bottom:-14%;width:min(34%,380px);height:150%;
  background:url("../img/motif-branch.webp") right bottom/contain no-repeat;opacity:.13;pointer-events:none}
.credits{list-style:none;position:relative;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:rgba(143,185,155,.24)}
.credit{background:var(--forest);padding:clamp(16px,2vw,24px) clamp(16px,2vw,26px);
  display:grid;gap:.45em;align-content:start}
.credit__role{font-size:.58rem;letter-spacing:.17em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 620;color:var(--green)}
.credit__name{font-family:var(--f-serif);font-variation-settings:"opsz" 60,"wght" 560;
  font-size:clamp(1.16rem,1.7vw,1.5rem);line-height:1.06;color:#fff}
.credit__name img{width:min(158px,78%)}
.credit__line{font-size:.84rem;line-height:1.52;color:#b7cebc;max-width:34ch}
.credit__at{color:#8fb99b;text-underline-offset:.22em;white-space:nowrap}
.credit__at:hover{color:#dfe9e0}

/* ═══════════════════════════════════════════════ ACT VI — Arca-27 ═══════ */
/* It is an event, so it leads with the four things that make one: when, where,
   what and how you get in — and it says plainly which of those is not settled. */
.event{position:relative;z-index:1;padding-block:clamp(80px,13vh,168px)}
.event__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,4.6vw,72px);align-items:center;margin-top:clamp(18px,3vh,32px)}
.event__copy .mega{margin-block:.28em .6em}
.event__key{margin:0 0 1.3em;display:grid;gap:0;border-top:1px solid var(--hair-gold)}
.event__key>div{display:grid;grid-template-columns:minmax(5.4em,auto) 1fr;
  gap:.3em 1.4em;padding:.85em 0;border-bottom:1px solid var(--hair);align-items:baseline}
.event__key dt{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 620;color:var(--tx-3)}
.event__key dd{margin:0;min-width:0}
.event__key b,.event__key time b{display:block;
  font-variation-settings:"wdth" 100,"wght" 660;font-size:1.02rem;line-height:1.24;color:var(--tx)}
.event__key span{display:block;margin-top:.16em;font-size:.8rem;line-height:1.45;color:var(--tx-2)}
/* the date is the headline fact of an event, so it is set like one */
.event__when dd b{font-family:var(--f-display);text-transform:uppercase;font-weight:900;
  font-variation-settings:normal;letter-spacing:-.03em;
  font-size:clamp(1.5rem,3.4vw,2.15rem);line-height:.94;color:var(--gold)}
.event__when dd span{font-family:var(--f-mono);letter-spacing:.05em;color:var(--tx)}
.event__copy p{color:var(--tx-2)}
.event__book{font-size:.9rem}
.event__copy .btn{margin-top:1.5em}

.ticket{--notch:clamp(84px,26%,132px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;background:var(--ink-3);
  border:1px solid var(--hair-gold);position:relative;
  box-shadow:0 30px 70px -34px rgba(0,0,0,1);
  -webkit-mask:radial-gradient(8px at 100% 0,transparent 98%,#000 100%) top right/calc(var(--notch) + 8px) 100% no-repeat,
               radial-gradient(8px at 100% 100%,transparent 98%,#000 100%) bottom right/calc(var(--notch) + 8px) 100% no-repeat,
               linear-gradient(#000,#000) left/calc(100% - var(--notch) - 8px) 100% no-repeat;
          mask:radial-gradient(8px at 100% 0,transparent 98%,#000 100%) top right/calc(var(--notch) + 8px) 100% no-repeat,
               radial-gradient(8px at 100% 100%,transparent 98%,#000 100%) bottom right/calc(var(--notch) + 8px) 100% no-repeat,
               linear-gradient(#000,#000) left/calc(100% - var(--notch) - 8px) 100% no-repeat}
.ticket__body{min-width:0;padding:clamp(20px,2.6vw,32px)}
.ticket__r{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold)}
.ticket__big{font-family:var(--f-sans);text-transform:uppercase;
  font-family:var(--f-display);font-weight:900;font-variation-settings:normal;
  font-size:clamp(1.54rem,3.2vw,2.6rem);line-height:.92;letter-spacing:-.03em;
  margin:.5em 0 .9em;color:#fff}
.ticket ol{list-style:none;display:grid;gap:.5em;border-top:1px solid var(--hair);padding-top:1em}
.ticket li{display:flex;gap:.75em;align-items:baseline;font-size:.84rem;color:var(--tx-2)}
.ticket li span{font-family:var(--f-mono);font-size:.66rem;color:var(--gold)}
.ticket__stub{min-width:0;border-left:1px dashed rgba(217,172,53,.4);padding:clamp(18px,2.2vw,26px) clamp(14px,1.8vw,22px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.3em;text-align:center;
  min-width:clamp(86px,22vw,140px)}
.ticket__stub p{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-2)}
.ticket__n{font-family:var(--f-mono);font-size:clamp(1.6rem,3.4vw,2.4rem)!important;
  letter-spacing:0!important;text-transform:none!important;color:var(--gold)!important;line-height:1}

/* ═══════════════════════════════════════ ACT VIII — what is confirmed ═══ */
.faq{background-color:var(--paper-2);color:var(--paper-ink);
  padding-block:clamp(66px,11vh,140px);box-shadow:0 -1px 0 rgba(0,0,0,.55)}
/* One column across the whole shell (FAQ-01). The register column that used
   to hold the questions to 1.14fr has gone, so they take the page's width. */
.faq__grid{display:block}
.faq__h{margin-bottom:clamp(18px,3vh,34px)}
.faq__list{counter-reset:faqn;border-top:1px solid rgba(22,21,15,.2)}
.faq details{counter-increment:faqn}
/* A counter rather than written-in numbers: a phase-gated question that is
   display:none does not increment it, so the register never skips a number
   when the offer switches phase. */
.faq summary::before{content:counter(faqn,decimal-leading-zero);
  flex:none;min-width:1.9em;margin-top:.35em;align-self:flex-start;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.06em;color:#8a8272;
  transition:color .3s}
.faq details[open] summary::before{color:var(--gold-dark)}
.faq details{border-bottom:1px solid rgba(22,21,15,.2)}
.faq summary{display:flex;justify-content:flex-start;align-items:baseline;gap:.9em;
  min-height:44px;padding:1.05em 0;cursor:pointer;list-style:none;
  font-variation-settings:"wdth" 100,"wght" 600;font-size:clamp(.96rem,.6vw + .82rem,1.08rem);
  line-height:1.34;transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;margin-left:auto;width:22px;height:1px;margin-top:.7em;
  background:var(--paper-ink);opacity:.5;
  transition:width .34s var(--e-out),opacity .3s,background-color .3s}
.faq details[open] summary::after{width:9px;opacity:1;background:var(--gold-dark)}

.faq summary:hover{color:#5b4a08}
.faq details>div{padding:0 0 1.3em 2.8em;max-width:60ch}
.faq details p{font-size:.92rem;line-height:1.6;color:#4c4638}

.faq details>div p+p{margin-top:.8em}
.faq details a{color:#6b5405;text-underline-offset:.22em}

/* ═══════════════════════════════════════════════ ACT IX — the close ═════ */
.close{position:relative;z-index:1;min-height:auto;display:grid;align-content:center;
  padding-block:clamp(64px,11vh,132px) clamp(40px,6vh,76px)}
/* the last frame answers the first: type left, object right */
.close__in{display:grid;grid-template-columns:minmax(0,1fr) clamp(196px,21.5vw,306px);
  column-gap:clamp(22px,3.2vw,54px);row-gap:clamp(14px,2.2vh,26px);align-items:center}
.close__in>*:not(.close__obj){grid-column:1;justify-self:start}
.close .mega{margin:0}
.close__p{max-width:52ch;color:var(--tx-2);font-size:1rem}
.close__p b{color:var(--gold);font-variation-settings:"wdth" 100,"wght" 700}

/* The object closed the page hanging in the dark with nothing under it and no
   way in. It now stands on a lit plinth and takes the same hand as the hero. */
.close__obj{margin:0;position:relative;grid-column:2;grid-row:1/span 9;
  align-self:center;justify-self:stretch;
  display:flex;flex-direction:column;align-items:center;gap:.7em;
  container-type:inline-size}
.close__stage{display:none}
html[data-gl="on"] .close__stage{display:block;height:min(42svh,330px);width:100%}
/* the ground: a pool of light and a hairline the object sits on, so it reads
   as standing rather than floating */
.close__plinth{position:absolute;left:50%;translate:-50% 0;bottom:-2.3em;
  width:min(100%,340px);height:76px;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 100%,rgba(217,172,53,.20),rgba(217,172,53,0) 72%)}
.close__plinth::after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(217,172,53,0),rgba(217,172,53,.55) 30%,
             rgba(217,172,53,.55) 70%,rgba(217,172,53,0))}
html:not([data-gl="on"]) .close__plinth{display:none}
/* The handle covers the object's own box. Unlike the hero's it takes no
   sideways bleed: the closing figure sits in a grid column whose width the
   shell depends on, and 8% of overhang each side put 24 px of scrollable
   overflow into `.close__in`. Vertically it may still reach past the render. */
html[data-gl="on"] .grab--close{inset:-4% 0 11% 0}
.close__num{margin:0;transition:opacity .6s var(--e-io)}
html[data-gl="on"] .close__num{opacity:0;height:0;margin:0;overflow:hidden}
.close__num img{width:clamp(96px,13vw,150px);opacity:.5}
@media (max-width:719px){
  .close__in{grid-template-columns:1fr}
  .close__in>*:not(.close__obj){grid-column:1}
  /* the proposition leads and the object follows, as it does in the hero */
  .close__obj{grid-column:1;grid-row:auto;justify-self:start;
    width:min(210px,50vw);margin-top:clamp(10px,2vh,20px)}
}

.foot-site{position:relative;z-index:2;background:#000;border-top:1px solid var(--hair);
  padding-block:clamp(26px,4vh,44px)}
.foot-site__in{display:grid;gap:.6em}
.foot-site p{font-size:.72rem;line-height:1.6;color:var(--tx-3)}
.foot-site b{color:var(--tx-2);font-variation-settings:"wdth" 100,"wght" 640}
.foot-site__legal{display:flex;flex-wrap:wrap;gap:.4em 1.4em}
.foot-site__legal a{color:var(--tx-2);text-underline-offset:.24em}
.foot-site__legal a:hover{color:var(--tx)}

/* ═════════════════════════════════════════════════════════ dialogs ══════ */

/* ═══════════════════════════════════ the Continuum access gate ══════════ */
/* The relay terminal. Its palette and grammar are the Continuum page's — near
   black, two mints, scan lines, a prompt — held to this one element so nothing
   of it leaks into the edition's own gold and green.

   It exists in the document at all times and is shown by nothing but the
   `data-gate` attribute, which only the head script sets. With scripting
   unavailable the door is simply not there. */
.gate{display:none}
html[data-gate] .gate{
  --relay:#4aff9e; --relay-dim:#63b39c; --relay-bg:#0a0a0f;
  display:flex;position:fixed;inset:0;z-index:200;
  align-items:center;justify-content:center;
  padding:clamp(18px,5vw,48px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--relay-bg);color:var(--relay-dim);
  font-family:var(--f-mono);
}
/* The page behind the door does not scroll. `overflow:hidden` on the root
   alone is not enough — the content still overflows, so `scrollTo` moves it and
   a trackpad fling can too. Pinning both boxes to the viewport height leaves
   the scrolling box with nothing to scroll. `inert`, set in boot.js, is what
   makes it unreachable; the two together, never one alone. */
html[data-gate],html[data-gate] body{height:100%;overflow:hidden}

.gate__crt{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%,rgba(74,255,158,.075),transparent 62%),
             radial-gradient(140% 120% at 50% 50%,transparent 42%,rgba(0,0,0,.72) 100%)}
.gate__scan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,
             rgba(74,255,158,.02) 2px,rgba(74,255,158,.02) 4px)}

.gate__in{position:relative;width:min(620px,100%);display:grid;gap:1.15em}
.gate__net{font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(99,255,158,.34)}

.gate__boot{list-style:none;display:grid;gap:.5em;margin:0;padding:0;
  font-size:clamp(.72rem,.4vw + .62rem,.82rem);line-height:1.5;
  color:var(--relay);text-shadow:0 0 8px rgba(74,255,158,.45);
  overflow-wrap:anywhere}
/* a caret on the line being typed, and a resting one on the last */
.gate__boot li[data-typing]::after,
.gate__boot li[data-caret][data-done]::after{
  content:"_";margin-left:.1em;animation:relaycaret .74s step-end infinite}
@keyframes relaycaret{50%{opacity:0}}
.gate__boot li:empty{min-height:1.5em}

.gate__h{font-family:var(--f-mono);font-weight:400;
  font-size:clamp(1.24rem,2.4vw,1.75rem);line-height:1.16;letter-spacing:.01em;
  color:#f5f2eb;text-transform:uppercase;margin-top:.4em}
.gate__lead{font-family:var(--f-sans);font-size:.92rem;line-height:1.6;
  color:rgba(245,242,235,.68);max-width:52ch}

.gate__form{display:grid;gap:.7em;margin-top:.5em}
.gate__label{font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(74,255,158,.72)}
.gate__row{display:flex;align-items:stretch;gap:.6em;flex-wrap:wrap;
  border:1px solid rgba(74,255,158,.34);background:rgba(74,255,158,.045);
  padding:.35em .35em .35em .8em}
.gate__prompt{display:flex;align-items:center;color:var(--relay);flex:none}
.gate__input{flex:1 1 10em;min-width:0;min-height:48px;
  background:transparent;border:0;outline-offset:-2px;
  font:inherit;font-size:1rem;letter-spacing:.12em;color:#f5f2eb}
.gate__input::placeholder{color:rgba(245,242,235,.3)}
.gate__go{flex:none;min-height:48px;padding:.5em 1.15em;cursor:pointer;
  background:rgba(74,255,158,.9);color:#06120c;border:1px solid rgba(74,255,158,.9);
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  transition:background-color .24s,color .24s}
.gate__go:hover{background:#fff;border-color:#fff}
.gate .gate__input:focus-visible,.gate .gate__go:focus-visible{outline:2px solid var(--relay)}
.gate__msg{min-height:1.5em;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:#ff8f8f;text-shadow:0 0 8px rgba(255,0,64,.34)}
html[data-gate="opening"] .gate__msg{color:var(--relay);text-shadow:0 0 8px rgba(74,255,158,.5)}
.gate__note{font-family:var(--f-sans);font-size:.72rem;line-height:1.6;
  color:rgba(245,242,235,.66);max-width:56ch;
  padding-top:1em;border-top:1px solid rgba(74,255,158,.16)}

/* a rejected phrase nudges the row; no delay, no lockout, no theatre of
   punishment — it simply has not opened */
.gate[data-bad] .gate__row{animation:relaybad .4s var(--e-io);border-color:rgba(255,0,64,.6)}
@keyframes relaybad{
  0%,100%{translate:0 0}20%{translate:-5px 0}45%{translate:4px 0}72%{translate:-2px 0}
}
/* the handoff: the relay closes down and hands the frame to the archive */
html[data-gate="opening"] .gate{animation:relayopen 1.15s var(--e-io) forwards}
@keyframes relayopen{
  0%{opacity:1}
  36%{opacity:1;filter:brightness(1.5)}
  100%{opacity:0;filter:brightness(2.2);transform:scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .gate[data-bad] .gate__row{animation:none}
  html[data-gate="opening"] .gate{animation:none;opacity:0}
  .gate__boot li[data-typing]::after,
  .gate__boot li[data-caret][data-done]::after{animation:none}
}

/* ═════════════════════════════════════════════════ phase state gates ════ */
/* Only ever hide the inactive branch. A missing attribute therefore degrades
   to the authored default rather than to a blank. (Learned the hard way.) */
html:not([data-sales-phase="early"])    [data-phase="early"]{display:none!important}
html:not([data-sales-phase="standard"]) [data-phase="standard"]{display:none!important}
html:not([data-num="unknown"]) [data-num-unknown]{display:none!important}
html[data-num="unknown"]       [data-num-known]{display:none!important}
/* The number and the counts fail independently: an unreadable state must not
   leave a bar drawn at 96% beside the words "not readable". */
html:not([data-alloc="unknown"]) [data-alloc-unknown]{display:none!important}
html[data-alloc="unknown"]       [data-alloc-known]{display:none!important}
/* The two unresolved external dependencies, gated the same way. Nothing inside
   these renders until the dependency is real: `data-aw-state` waits on
   ring-fenced publisher stock, `data-event-state` on a booking URL. */
html:not([data-aw-state="confirmed"]) [data-aw="confirmed"]{display:none!important}
html:not([data-event-state="open"])   [data-event="open"]{display:none!important}
html[data-event-state="open"]         [data-event="soon"]{display:none!important}

/* ═══════════════════════════════════════════════════ reveal system ══════ */
@media (prefers-reduced-motion:no-preference){
  html[data-booted] [data-reveal]{opacity:0;transform:translateY(20px);
    transition:opacity .82s var(--e-io),transform .82s var(--e-out);
    transition-delay:calc(var(--i,0) * 70ms)}
  html[data-booted] [data-reveal][data-seen]{opacity:1;transform:none}
  html[data-booted] .hero .mega__l,html[data-booted] .hero__lede,html[data-booted] .hero__acts{
    opacity:0;transform:translateY(22px);
    animation:rise .95s var(--e-out) forwards;
    animation-delay:calc(340ms + var(--i,0) * 88ms)}
  html[data-booted] .hero .rubric{opacity:0;animation:fade .9s var(--e-io) .18s forwards}
  }
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}

/* ═════════════════════════════════════════════════════ responsive ══════ */
@media (max-width:1099px){
  .hero__grid{grid-template-columns:minmax(0,1fr) clamp(170px,26vw,250px)}
  .novel__grid,.event__grid,.pair__object{grid-template-columns:1fr}
  .receipt{position:static}
  .panel{grid-template-columns:1fr}
  .credits{grid-template-columns:1fr}
  .pair__object{gap:clamp(26px,4vh,44px)}
  .pair__mark{justify-items:stretch}
}
@media (max-width:899px){
  .colophon ul{grid-template-columns:1fr}
  /* the two books stack rather than shrink: a print that small stops being a
     photograph of an object and becomes a thumbnail */
  .pair__grid{grid-template-columns:1fr;gap:clamp(34px,6vh,58px)}
  .print figcaption{max-width:none}
}
@media (max-width:719px){
  /* the split stacks, and the seam turns with it */
  .split{grid-template-columns:1fr;grid-template-rows:auto 1px auto}
  .split__seam{background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent)}
  .split__side{min-height:clamp(300px,92vw,392px)}
}
@media (max-width:719px){
  /* Section openings, staged. On a phone every section otherwise begins mid
     column; a rule, a held breath of space and a larger opening line mean the
     reader lands on a composed opening instead of arriving mid-thought. */
  .pair__head>.rubric,.offer__head>.rubric,
  .verdicts__head>.rubric,.event>.shell>.rubric{
    padding-top:clamp(18px,3.4vh,30px);border-top:1px solid currentColor;
    margin-bottom:clamp(16px,3vh,26px)}
  .offer__head>.rubric{border-top-color:rgba(22,21,15,.28)}
  .novel .serif,.pair .serif,.offer__head .serif,.verdicts__head .serif,.faq .serif{
    font-size:clamp(2.15rem,9.4vw,2.9rem);line-height:.98}
  .novel__copy .lede,.pair__head .lede{margin-bottom:.3em}
    .hero{padding-top:calc(var(--bars) + 14px)}
  /* On a phone the proposition leads and the object follows it. The book used
     to be placed in row 1, above the headline, so a reader met the packshot
     before they were told what the question was. */
  .hero__grid{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;
    row-gap:clamp(14px,2.6vh,26px);align-content:center}
  .hero__copy{grid-column:1;grid-row:1/4;display:flex;flex-direction:column;
    gap:clamp(12px,2.2vh,22px)}
  .hero__obj{grid-column:1;grid-row:4;width:min(198px,46vw);justify-self:start;margin-inline-start:1%;
    padding-bottom:2.2em}
  .hero__obj figcaption{display:none}
  .hero__lede{max-width:none}
  /* The primary action keeps its full-width button; the secondary becomes a
     text link, which is the honest hierarchy and buys back ~50 px so the
     primary is reachable without scrolling. */
    /* A 50/50 vertical split across a 390 px viewport would crop each face to a
     slice, so on a phone the ground becomes a band whose halves stay close to
     the artwork's own square. */
  .split-ground{bottom:auto;height:min(46%,300px);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 100%)}
  .split-ground__up,.split-ground__un{opacity:.13}
    /* The cue is sized by the container queries above, against the object it
     labels — not here, against the viewport. These rules used to sit after
     those and quietly win on source order, which put a 120 px label inside a
     116 px box on a 390 px phone. */
  /* the credits become one column, and the deck loses the tallest of its
     depth offsets so the stack cannot outgrow its reserved box */
  .credits{grid-template-columns:1fr}
  .deck[data-on] .deck__slips{min-height:clamp(246px,64vw,278px)}
  .deck__ctl{margin-top:clamp(34px,4.4vh,46px)}
  .deck__cue{flex:1 1 100%;margin-inline-start:0;white-space:normal}
  .hero__acts{gap:14px;align-items:center}
  .hero__acts .btn--gold{flex:1 1 100%}
  .hero__acts .btn--line{flex:0 0 auto;display:inline-flex;align-items:center;
    min-height:44px;padding:.2em .1em;border:0;background:none;
    color:var(--tx-2);text-decoration:underline;text-underline-offset:.28em;
    text-decoration-color:var(--hair-gold);font-size:.82rem}
  .hero__acts .btn--line::after{display:none}
  .hero__acts .btn--line:hover{background:none;color:var(--tx);box-shadow:none}
  .hero__acts .btn--line small{display:none}
  .head__nav{display:none}
  .menu{display:block}
  .head__in{min-height:52px;gap:8px}
  .head__tools{margin-inline-start:0}
  /* The bar is 354 px wide at 390: the tool labels go and the brand shrinks,
     but the byline is part of the identity and stays — it only gives up its
     letter-spacing. The primary action is never what falls off the edge. */
  .brand__txt small{font-size:.5rem;letter-spacing:.05em;margin-top:.2em}
  .brand__txt{font-size:.8rem;line-height:1.04}
  .brand__seam{width:13px;height:22px}
  .sound__txt{display:none}
  .sound{padding:.5em}
  .menu>summary span{display:none}
  .menu>summary{padding:.4em}
  .head__tools .btn--sm{min-width:48px;padding:.5em .8em;font-size:.76rem;text-align:center}
  .unfold__scene{height:225vh}
  .ticket{grid-template-columns:1fr}
  .ticket__stub{min-width:0;border-left:0;border-top:1px dashed rgba(217,172,53,.4);flex-direction:row;
    justify-content:space-between;gap:1em}
  .ticket{-webkit-mask:none;mask:none}
  .mega{font-size:clamp(2.1rem,10.2vw,3.4rem)}
}
@media (max-width:429px){
  /* the smallest phones: tighten the hero so the primary action still lands
     inside the first screen. The rubric now carries only two terms — the run
     size and the exclusivity — and neither may be dropped: the strip beneath
     the hero that used to restate them has gone, so hiding one would lose it
     from the page. It wraps to two lines instead. */
  .hero__grid{row-gap:clamp(7px,1.4vh,14px)}
  .hero__copy{gap:clamp(7px,1.3vh,13px)}
  .hero__obj{width:min(150px,42vw);padding-bottom:.9em;max-width:min(170px,46vw)}
  .hero__lede{font-size:.9rem;line-height:1.46}
  .hero .rubric{gap:.2em .5em}
  .brand__txt{font-size:.74rem}
  .cta-long{display:none}
}
/* Short landscape viewports: the hero must still fit. */
@media (max-height:700px) and (min-width:720px){
  .hero{min-height:0;padding-block:calc(var(--bars) + 20px) 24px}
  .hero__obj{width:min(220px,20vw)}
  /* a 104 px headline does not belong on a 620 px-tall laptop */
  .mega--hero{font-size:min(7.6cqw,4rem)}
}
@media (max-height:520px){
  .hero{min-height:0}
  .unfold__pin{height:auto;min-height:100svh}
}

/* ═════════════════════════════════════════════ reduced motion / no gl ══ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .head{transition:none}
  .stage__grain{animation:none;opacity:.34}
  .btn::after{display:none}
  .unfold__scene{height:auto}
  .unfold__pin{position:static;height:auto;padding-block:clamp(24px,4vh,44px)}
  /* the deck stops stacking and simply reads as the list it already is */
  .deck[data-on] .deck__slips{display:grid;position:static;min-height:0}
  .deck[data-on] .slip{position:static;transform:none;opacity:1;filter:none}
  .deck[data-on] .slip[data-d="3"]{opacity:1}
  .deck[data-on]:hover .slip[data-d="0"]{transform:none}
  .plate__strip{scroll-snap-type:none}
}
@media print{
  .stage,.topbars{display:none!important}
  body{background:#fff;color:#000}
}

/* ══════════════════════════════════════════ the reservation claim step ══ */
/* One canonical early-bird form inside the offer panel (plan §5.1). The
   controller sets html[data-resv="…"]; these gates only ever HIDE the
   inactive branches — a missing attribute degrades to the authored default
   (the loading notice), never to a blank. Media/query overrides for this
   component sit AFTER its base rules on purpose. */
html:not([data-resv="loading"]):not([data-resv=""]) [data-resv-only="loading"]{display:none!important}
html:not([data-resv="unavailable"]) [data-resv-only="unavailable"]{display:none!important}
html:not([data-resv="paused"]) [data-resv-only="paused"]{display:none!important}
html:not([data-resv="sold_out"]) [data-resv-only="sold_out"]{display:none!important}
html:not([data-resv="final_holds"]) [data-resv-only="final_holds"]{display:none!important}
html:not([data-resv="form"]):not([data-resv="claiming"]) [data-resv-only="form"]{display:none!important}

.claim{margin-top:clamp(20px,2.6vw,30px);border:1px solid var(--paper-ink);
  background:#fff;padding:clamp(18px,2.4vw,28px);position:relative}
.claim::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.claim__h{font-family:var(--f-serif);font-variation-settings:"opsz" 40,"wght" 580;
  font-size:clamp(1.15rem,1.9vw,1.4rem);margin-bottom:.65em;color:var(--paper-ink)}
.claim__status{font-size:.9rem;line-height:1.55;color:#3f3a2e;max-width:56ch}
.claim__status--warn{color:#6b3d17}
.claim__noscript{font-size:.9rem;line-height:1.55;color:#6b3d17;max-width:56ch;margin-bottom:1em}

.claim form{display:grid;gap:1.05em;margin-top:.4em}
.claim__field label,.claim__field legend{display:block;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--paper-ink);
  font-variation-settings:"wdth" 104,"wght" 640;margin-bottom:.45em}
.claim__optional{text-transform:none;letter-spacing:0;color:#6f6a5c;font-variation-settings:normal}
.claim__field input[type="text"],.claim__field input[type="email"]{
  width:100%;min-height:48px;padding:.55em .75em;font:400 1rem/1.3 var(--f-sans);
  color:var(--paper-ink);background:#faf8f3;border:1px solid #b9b2a0;border-radius:2px}
.claim__field input:focus-visible{outline:2px solid var(--gold-dark);outline-offset:1px}
.claim__field input[aria-invalid="true"]{border-color:#8f2f10}
.claim__help{margin-top:.5em;font-size:.78rem;line-height:1.5;color:#6f6a5c;max-width:56ch}
.claim__field-error{margin-top:.45em;font-size:.8rem;color:#8f2f10}
.claim__side-opts{display:flex;gap:1.6em}
.claim__side-opts label,.claim__consent label{display:flex;gap:.55em;align-items:baseline;
  font-size:.9rem;text-transform:none;letter-spacing:0;color:#3f3a2e;
  font-variation-settings:normal;margin-bottom:0}
.claim__side-opts input,.claim__consent input{accent-color:var(--gold-dark);
  width:1.05em;height:1.05em;flex:none;transform:translateY(.12em)}
.claim__side{border:0;padding:0;margin:0}
/* honeypot: removed from sight and from the tab order, still in the DOM */
.claim__hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.claim__errors{border:1px solid #8f2f10;background:#fdf3ee;padding:.8em 1em;
  font-size:.86rem;line-height:1.5;color:#63220b}
.claim__errors ul{list-style:none;display:grid;gap:.3em;margin:.35em 0 0}
.claim__errors a{color:inherit}

.claim__result:empty{display:none}
.claim__result{margin-top:.4em}
.claim__held{display:grid;gap:.9em}
.claim__held-label{font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:#6f6a5c}
.claim__held-num{font-family:var(--f-mono);font-size:clamp(2.4rem,5.4vw,3.6rem);
  line-height:1;color:var(--paper-ink)}
.claim__held-num small{display:block;font-family:var(--f-sans);font-size:.85rem;
  letter-spacing:0;color:#3f3a2e;margin-top:.4em}
.claim__countdown{font-size:.9rem;color:#3f3a2e}
.claim__countdown b{font-family:var(--f-mono);font-weight:400;font-size:1.05em;
  color:var(--paper-ink);font-variant-numeric:tabular-nums}
.claim__countdown[data-late]{color:#8f2f10}
.claim__countdown[data-late] b{color:#8f2f10}
.claim__note{font-size:.8rem;line-height:1.55;color:#6f6a5c;max-width:56ch}
.claim__result .btn{margin-top:.2em}
.claim__result .btn--line-paper{--bg:transparent;--fg:var(--paper-ink);
  border:1px solid #b9b2a0}
.claim__confirmed{border-left:3px solid var(--gold-dark);padding-left:1em;display:grid;gap:.5em}
.claim__confirmed b{font-family:var(--f-mono);font-weight:400}