/* ============================================================
   Enzwa — motion & devices
   Loads AFTER enzwa.css. One piece of theatre (the wordmark), one
   emphasis device (the highlighter), one texture (grain). Everything
   else is type and space.
   No-JS: the .js class is absent, so every hidden-until-revealed rule
   is inert and the page renders complete.
   ============================================================ */

:root{
  /* the five letters · the five referents, in wordmark order */
  --l-e:var(--cat-raise); --l-n:var(--cat-bid); --l-z:var(--cat-board); --l-w:var(--cat-fund); --l-a:var(--cat-ai);
  --run:linear-gradient(90deg,var(--l-e),var(--l-n),var(--l-z),var(--l-w),var(--l-a));
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-snap:cubic-bezier(.34,1.4,.5,1);
  --run-h:3px;
  --chrome-h:69px;   /* the run plus the sticky header */
}

/* ---- paper grain: the one texture, 3.5%, multiplied over everything ---- */
body::after{content:'';position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- reading progress ----
   It was a horizontal bar across the top of the page. Rejected 3 Sep 2026: too obvious
   and too small at once. Progress now reads only on the far-left spine, which runs the
   full height of the viewport, so there is one indicator instead of two. */
.run{display:none}
.hdr{top:0}
.hdr--field{border-top:0}

/* ---- the highlighter: one per page, behind the ink, hand-cut ---- */
.hl{position:relative;display:inline-block;isolation:isolate}
.hl::before{content:'';position:absolute;z-index:-1;pointer-events:none;left:-.18em;right:-.18em;top:.08em;bottom:-.04em;
  background-color:var(--hl,var(--ink));opacity:var(--hl-a,.13);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 32' preserveAspectRatio='none'%3E%3Cpath d='M1.5 8.4 C 24 5.2, 52 9.1, 78 6.3 C 104 3.6, 138 8.8, 166 5.9 C 178 4.7, 190 6.8, 198.5 5.1 L 197.2 26.4 C 172 29.3, 140 24.1, 112 27.2 C 84 30.2, 54 25.6, 28 28.1 C 18 29.1, 9 27.2, 2.8 28.6 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 32' preserveAspectRatio='none'%3E%3Cpath d='M1.5 8.4 C 24 5.2, 52 9.1, 78 6.3 C 104 3.6, 138 8.8, 166 5.9 C 178 4.7, 190 6.8, 198.5 5.1 L 197.2 26.4 C 172 29.3, 140 24.1, 112 27.2 C 84 30.2, 54 25.6, 28 28.1 C 18 29.1, 9 27.2, 2.8 28.6 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  transform:rotate(-.4deg);transform-origin:left center}
.js .hl::before{transform:scaleX(0) rotate(-.4deg);transition:transform .95s cubic-bezier(.33,0,.2,1)}
.js .hl.is-drawn::before{transform:scaleX(1) rotate(-.4deg)}
.hl--raise{--hl:var(--cat-raise);--hl-a:.24}.hl--bid{--hl:var(--cat-bid);--hl-a:.22}.hl--board{--hl:var(--cat-board);--hl-a:.22}
.hl--fund{--hl:var(--cat-fund);--hl-a:.22}.hl--ai{--hl:var(--cat-ai);--hl-a:.24}
.field .hl{--hl:var(--field-ink);--hl-a:.16}

/* ---- staggered arrival inside a revealed group ---- */
.js .stagger.reveal>*{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .55s var(--ease-out)}
.js .stagger.reveal.is-in>*{opacity:1;transform:none}
.js .stagger.reveal.is-in>*:nth-child(2){transition-delay:.08s}.js .stagger.reveal.is-in>*:nth-child(3){transition-delay:.16s}
.js .stagger.reveal.is-in>*:nth-child(4){transition-delay:.24s}.js .stagger.reveal.is-in>*:nth-child(5){transition-delay:.32s}
.js .stagger.reveal{opacity:1;transform:none}

/* ============================================================
   THE NAME · a band of type resolves into ENZWA on scroll
   The proposition is on screen from the first frame. The theatre
   happens above it, inside one and a half screens of scroll, and
   never blocks the page.
   ============================================================ */
.wm{position:relative;height:520vh;background:var(--paper)}
.wm__stage{position:sticky;top:var(--chrome-h);height:calc(100vh - var(--chrome-h));min-height:600px;
  overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(2rem,6vh,4.5rem)}
.wm__fg{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}

/* the field: the whole first screen is letterforms. It used to be a band across the
   top at 56% height; it now fills the stage, so the page opens on a full sheet of
   type that clears outward as the name assembles. */
.wm__field{position:absolute;inset:0;z-index:1;pointer-events:none;
  display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(6,1fr);place-items:center;
  padding:clamp(.5rem,2vh,1.6rem) clamp(.5rem,2vw,1.6rem)}
/* the copy sits over the field, so the field is dimmed beneath it rather than masked
   away: a mask on the field's own box dissolves any letter translated through it.
   The scrim arrives with the copy, so the opening frame is type and nothing else. */
.wm__fg::before{content:'';position:absolute;z-index:-1;left:calc(var(--gut) * -1);right:calc(var(--gut) * -1);
  top:-8vh;bottom:-14vh;pointer-events:none;opacity:var(--rev,1);
  background:radial-gradient(96% 108% at 34% 76%,var(--paper) 0%,var(--paper) 52%,transparent 88%)}
/* ⚠ --rev defaults to 1 so a build where the measure never completes still shows the
   copy. JS writes 0 only once the flight has actually been measured. */
.js .wm--live .wm__h,.js .wm--live .wm__sub,.js .wm--live .wm__cta,.js .wm--live .wm__cred{
  opacity:var(--rev,1);
  transform:translate3d(0,calc((1 - var(--rev,1)) * 30px),0);
  will-change:opacity,transform}
/* the headline's highlighter is held back until the copy is actually on screen,
   otherwise the observer draws it while it is still invisible and the reveal is flat */
.js .wm--live:not(.is-landed) .wm__fg .hl::before{transform:scaleX(0) rotate(-.4deg)}
/* the five that travel are CLONED into an unmasked layer: the field's fade
   mask is painted on the field's own box, so a letter translated below it
   dissolves on the way down. */
.wm__fly{position:absolute;inset:0;z-index:2;pointer-events:none}
.lf-fly{position:absolute;display:block;font-family:var(--ui);font-weight:800;
  font-optical-sizing:none;font-variation-settings:'opsz' 96,'wdth' 100;
  letter-spacing:0;line-height:1;will-change:transform;transform-origin:center}
.wm--live.is-landed .lf-fly{opacity:0}
.lf-c{display:grid;place-items:center;width:100%;height:100%;position:relative;opacity:var(--ghost,1)}
.lf-c.sign.is-flying{visibility:hidden}
.lf-c.sign{opacity:1}
.lf-g{display:grid;place-items:center;font-family:var(--ui);font-weight:800;
  font-optical-sizing:none;font-variation-settings:'opsz' 96,'wdth' 100;
  font-size:clamp(1.3rem,3.1vw,2.7rem);letter-spacing:0;line-height:1;will-change:transform,opacity}
.lf-g i{grid-area:1/1;font-style:normal;transition:opacity .4s ease}
.lf-out{display:none}
.lf-fill{color:var(--sc,var(--ink-2))}

/* the arrival: every cell drops in on a stagger the first time the page loads */
.wm--live .lf-c{animation:lf-in .62s cubic-bezier(.2,.9,.25,1) backwards;animation-delay:var(--del)}
@keyframes lf-in{
  0%{opacity:0;transform:scale(.45) translate3d(0,14px,0) rotate(var(--rot,0deg))}
  100%{opacity:var(--ghost,1);transform:none}
}
/* the departure: each cell leaves along its own outward vector as the name assembles */
.lf-c{transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .45s ease}
.lf-c.culled{opacity:0;transform:translate3d(var(--fx,0),var(--fy,0),0) scale(.7)}

/* the wave is CSS: never a per-frame JS colour write across sixty-six nodes */
.wm--live .lf-c:not(.sign) .lf-g{animation:lf-pulse 3.4s ease-in-out infinite;animation-delay:var(--del)}
.wm--live.is-landed .lf-c .lf-g{animation:none}
@keyframes lf-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.62;transform:scale(.92)}}

/* the wordmark the five letters land in */
.wm__mark{display:flex;align-items:baseline;font-family:var(--ui);font-weight:800;
  font-optical-sizing:none;font-variation-settings:'opsz' 96,'wdth' 100;
  font-size:clamp(3.2rem,8.4vw,7rem);line-height:.9;letter-spacing:0;margin:0 0 clamp(1.1rem,2.6vh,2rem) -.035em}
.wm__mark span{display:inline-block}
.wm__mark span:nth-child(1){color:var(--l-e)}.wm__mark span:nth-child(2){color:var(--l-n)}
.wm__mark span:nth-child(3){color:var(--l-z)}.wm__mark span:nth-child(4){color:var(--l-w)}
.wm__mark span:nth-child(5){color:var(--l-a)}
/* while the field is live the slot is empty; the travelling letters fill it */
.js .wm--live .wm__mark span{opacity:0}
.js .wm--live.is-landed .wm__mark span{opacity:1}

/* the headline runs the width of the stage in two lines rather than stacking four
   short ones against an empty right half */
.wm__mean{font-family:var(--mono);font-size:clamp(.72rem,1vw,.84rem);letter-spacing:.05em;
  color:var(--muted);margin:0 0 clamp(1rem,2.4vh,1.6rem);opacity:var(--rev,1);
  transform:translate3d(0,calc((1 - var(--rev,1)) * 30px),0)}
.wm__mean b{font-weight:500;color:var(--ink-2)}
.wm__mean:has(+ .wm__cred){margin-bottom:0}
/* The credit line sits with the etymology, one step quieter: the awards are real and
   already carried on the work page, so they are stated and not sold. */
.wm__cred{font-family:var(--mono);font-size:clamp(.62rem,.8vw,.72rem);letter-spacing:.04em;
  color:var(--muted);margin:.45rem 0 clamp(1rem,2.4vh,1.6rem);line-height:1.7}
/* one line on a desktop; the campaign half drops to its own line on a phone rather
   than breaking mid-clause */
.wm__cred .sep{opacity:.5;padding:0 .35em}
@media(max-width:760px){.wm__cred .sep{display:block;height:0;overflow:hidden;padding:0}}
.wm__h{font-family:var(--serif);font-weight:700;font-variation-settings:'opsz' 60,'wdth' 100;
  font-size:clamp(1.7rem,3.3vw,3.15rem);line-height:1.1;letter-spacing:-.025em;color:var(--ink);
  max-width:none;margin:0}
.wm__h .k1{color:var(--l-e)}.wm__h .k2{color:var(--l-n)}.wm__h .k3{color:var(--l-z)}
@media(max-width:900px){.wm__h{max-width:22ch}}
.wm__sub{font-family:var(--sans);font-size:clamp(1rem,1.4vw,1.28rem);line-height:1.5;color:var(--ink-2);
  max-width:64ch;margin:clamp(.85rem,1.8vh,1.25rem) 0 0}
.wm__cta{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;margin-top:clamp(1.25rem,3vh,2rem)}
@media(max-width:760px){
  .wm{height:auto}
  .wm__stage{position:static;height:auto;min-height:0;padding:clamp(2rem,7vh,3.5rem) 0 clamp(2.5rem,7vh,4rem)}
  .wm__field{display:none}
  .wm__fg::before{display:none}
  .js .wm--live .wm__mark span{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .wm--live .lf-c,.wm--live .lf-c:not(.sign) .lf-g{animation:none}
  .lf-c{transition:none}
}

/* ---- scenarios: three stickers, the story beat ---- */
.scns{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.4vw,1.9rem);padding:6px 8px 12px 2px}
@media(max-width:900px){.scns{grid-template-columns:1fr}}
.scn{position:relative;background:var(--paper);border-radius:3px;padding:clamp(1.35rem,2.4vw,1.9rem);
  display:flex;flex-direction:column;gap:.7rem;
  box-shadow:5px 5px 0 var(--sc),0 2px 12px rgba(22,21,15,.07);
  transform:rotate(var(--rot,0deg));transition:transform .5s var(--ease-snap),box-shadow .22s ease}
.scns>.scn:nth-child(1){--rot:-.45deg}.scns>.scn:nth-child(2){--rot:.4deg}.scns>.scn:nth-child(3){--rot:-.35deg}
.scn:hover{transform:rotate(0) translateY(-2px);box-shadow:7px 7px 0 var(--sc),0 8px 20px rgba(22,21,15,.1)}
.scn__n{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;color:var(--sc);margin:0}
.scn__t{font-family:var(--ui);font-weight:700;font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.2;
  letter-spacing:-.018em;color:var(--ink);margin:0;text-wrap:balance}
.scn__b{margin:0;color:var(--ink-2);font-size:.97rem;line-height:1.55}
.scn__f{margin-top:auto;padding-top:1rem;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.scn__w{margin:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.02em;color:var(--muted);line-height:1.6}
.scn__w b{font-family:var(--ui);font-weight:700;font-size:.9rem;letter-spacing:-.01em;color:var(--ink);display:block;margin-bottom:.2rem}
.scn__f .tlink{font-size:.85rem}
.js .scns.reveal .scn{opacity:0;transform:translateY(12px) rotate(var(--rot,0deg));transition:transform .55s var(--ease-out),opacity .5s ease,box-shadow .22s ease}
.js .scns.reveal.is-in .scn{opacity:1;transform:rotate(var(--rot,0deg))}
.js .scns.reveal.is-in .scn:nth-child(2){transition-delay:.1s}
.js .scns.reveal.is-in .scn:nth-child(3){transition-delay:.2s}
.js .scns.reveal.is-in .scn:hover{transform:rotate(0) translateY(-2px)}
.js .scns.reveal{opacity:1;transform:none}

/* ============================================================
   THE WORK · three shelves. A piece is a sticker that plays,
   runs or opens.
   ============================================================ */
.shelf{margin-top:clamp(2.6rem,5vw,3.6rem)}
.shelf__h{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;flex-wrap:wrap;border-bottom:1px solid var(--rule);padding-bottom:.9rem;margin-bottom:1.35rem}
.shelf__tag{display:flex;align-items:center;gap:.8rem;min-width:0;flex-wrap:wrap}
.shelf__tag svg{width:26px;height:26px;flex:none;color:var(--ink)}
.shelf__tag b{font-family:var(--ui);font-weight:700;font-size:1.05rem;letter-spacing:-.012em;color:var(--ink);white-space:nowrap}
.shelf__tag span{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted)}
@media(max-width:820px){.shelf__tag span{display:none}}
.shelf__row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.4vw,1.75rem);padding:4px 8px 10px 2px}
@media(max-width:900px){.shelf__row{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.shelf__row{grid-template-columns:1fr}}
.piece{position:relative;margin:0;display:flex;flex-direction:column;background:var(--paper);border-radius:3px;overflow:hidden;color:inherit;
  box-shadow:5px 5px 0 var(--ink),0 2px 12px rgba(22,21,15,.07);transform:rotate(var(--rot,0deg));transition:transform .5s var(--ease-snap),box-shadow .22s ease}
.shelf__row>.piece:nth-child(1){--rot:-.4deg}.shelf__row>.piece:nth-child(2){--rot:.35deg}.shelf__row>.piece:nth-child(3){--rot:-.3deg}
.piece:hover{transform:rotate(0) translateY(-2px);box-shadow:7px 7px 0 var(--ink),0 8px 20px rgba(22,21,15,.1)}
.piece__media{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--field)}
.piece figcaption,.piece__cap{display:flex;flex-direction:column;gap:.3rem;padding:.9rem 1rem 1.05rem}
.piece__k{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--muted)}
.piece__t{font-family:var(--ui);font-weight:600;font-size:1rem;line-height:1.3;letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
a.piece__t:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.piece--film video{cursor:pointer}
.piece__watch{display:block;position:relative;line-height:0;color:inherit;text-decoration:none}
.piece__watch .piece__go{pointer-events:none;opacity:.92;transition:opacity .18s ease;top:.7rem;bottom:auto}
.piece:hover .piece__watch .piece__go{opacity:1}
.piece__run{position:relative;display:block;padding:0;border:0;background:none;cursor:pointer;text-align:left;width:100%}
.piece__go{position:absolute;left:.8rem;bottom:.7rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;color:var(--paper);background:var(--ink);padding:.4rem .7rem;border-radius:2px;display:inline-flex;align-items:center;gap:.45rem}
.piece__go::before{content:'';width:0;height:0;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.piece--page.is-live{box-shadow:5px 5px 0 var(--ink),0 0 0 2px var(--ink)}
/* the stage: the chosen page runs here, inside the shelf */
.stage{margin:clamp(1.25rem,2.4vw,1.75rem) 8px 10px 2px;background:var(--paper);border-radius:3px;overflow:hidden;box-shadow:5px 5px 0 var(--ink),0 2px 12px rgba(22,21,15,.07)}
.stage__bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 1rem;border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted)}
.stage__t{color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage__acts{display:flex;align-items:center;gap:1.1rem;flex:none}
.stage__acts .tlink{font-size:.72rem;font-family:var(--mono);letter-spacing:.06em}
.stage__x{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted);border:1px solid var(--rule-2,#C9C2B0);border-radius:999px;padding:.35rem .7rem;transition:all .18s}
.stage__x:hover{color:var(--ink);border-color:var(--ink)}
.stage iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:var(--paper-2)}
@media(max-width:700px){.stage iframe{aspect-ratio:3/4}}

/* ============================================================
   THE REDLINE · raw material read down to what the reader keeps.
   Lives on the decks service page. html.play (set in that page's
   <head> on a first visit without reduced motion) holds the "as
   received" state; the JS walks it to the finished mark-up, which
   is also the no-JS and return-visit state.
   ============================================================ */
@property --x{syntax:'<percentage>';inherits:false;initial-value:100%}
.rm{margin:0;position:relative;padding:8px 10px 0 2px}
.rm__sheet{position:relative;background:var(--paper);border-radius:3px;padding:clamp(1.25rem,2.2vw,1.75rem) clamp(1.35rem,2.4vw,2rem) clamp(1.4rem,2.4vw,1.9rem);
  box-shadow:5px 5px 0 var(--ink),0 2px 12px rgba(22,21,15,.07);transform:rotate(-1.1deg)}
.rm__lab{display:flex;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--muted);margin:0 0 .9rem}
.rm__p{margin:0;font-family:var(--sans);font-size:clamp(.92rem,1.15vw,1.02rem);line-height:1.62;color:var(--ink-2);letter-spacing:-.003em}
/* the strike: a graphite line drawn left to right through each clause. Painted
   as a background on the inline span so it follows every wrapped line; clone
   makes each line fragment carry its own stroke. */
.rm-w{--x:100%;color:var(--muted);-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(transparent 54%,var(--ink) 54%,var(--ink) calc(54% + 1.5px),transparent 0) no-repeat 0 0/var(--x) 100%;
  transition:color .45s ease,--x .55s cubic-bezier(.33,0,.2,1)}
.play .rm-w{--x:0%;color:var(--ink-2)}
.play .rm.marking .rm-w.struck{--x:100%;color:var(--muted)}
.rm-f{color:var(--ink);font-weight:600}
.rm-f b{font-family:var(--ui);font-weight:800;font-variation-settings:'opsz' 24,'wdth' 100;font-size:1.06em;letter-spacing:-.01em}
.rm .hl{--hl-a:.14}
.rm__kept{margin:clamp(1.4rem,2.6vw,2rem) .5rem 0 .25rem}
.rm__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;border-top:1px solid var(--rule);padding-top:1rem}
.rm__tile b{display:block;font-family:var(--ui);font-weight:800;font-variation-settings:'opsz' 96,'wdth' 100;font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:.9;letter-spacing:-.04em;color:var(--ink)}
.rm__tile span{display:block;margin-top:.45rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--muted)}
.play .rm__kept{opacity:0;transform:translateY(8px)}
.play .rm.landing .rm__kept,.play .rm.kept .rm__kept{opacity:1;transform:none;transition:opacity .5s ease,transform .5s var(--ease-out)}
.play .rm__tile b{opacity:0}
.play .rm.kept .rm__tile b{opacity:1}
.rm__fly{position:fixed;left:0;top:0;z-index:90;pointer-events:none;font-family:var(--ui);font-weight:800;font-variation-settings:'opsz' 96,'wdth' 100;
  line-height:.9;letter-spacing:-.04em;color:var(--ink);will-change:transform;transform-origin:center}
@media(max-width:980px){.rm__sheet{transform:rotate(-.7deg)}}

/* ---- reduced motion: every device declares its landed state ---- */
@media(prefers-reduced-motion:reduce){
  .wm{height:auto}
  .wm__stage{position:static;height:auto;min-height:0;padding:clamp(2rem,7vh,3.5rem) 0 clamp(2.5rem,7vh,4rem)}
  .wm__field{display:none}
  .js .wm--live .wm__mark span{opacity:1}
  .js .hl::before{transform:scaleX(1) rotate(-.4deg);transition:none}
  .js .stagger.reveal>*,.js .scns.reveal .scn{opacity:1;transform:rotate(var(--rot,0deg));transition:none}
  .play .rm-w{--x:100%;color:var(--muted)}
  .play .rm__kept,.play .rm__tile b{opacity:1;transform:none}
}

/* ---- the brief's running estimate: a chip that moves with every answer ---- */
.rune{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,1.75rem);z-index:70;
  background:var(--field);color:var(--field-ink);border-radius:3px;padding:.75rem 1.1rem .8rem;
  box-shadow:5px 5px 0 rgba(22,21,15,.14),0 10px 30px -12px rgba(22,21,15,.5);
  display:grid;gap:.15rem;max-width:min(92vw,20rem)}
.rune__l{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--muted-field)}
.rune__v{font-family:var(--ui);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rune__m{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--muted-field)}
.rune.is-bump{animation:rune-bump .42s var(--ease-snap)}
@keyframes rune-bump{0%{transform:translateY(4px) scale(.98)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.rune.is-bump{animation:none}}

/* the current-page nav item turns cream on a dark header, which on the inverted
   CTA button is cream on cream: the label vanished on brief.html. The button
   keeps the inverted pair whether or not it is the page you are on. */
.hdr--field .nav a.btn[aria-current]{color:var(--ink)}

/* ============================================================
   ATTENTION · one thing moves per viewport, and it is the thing
   the eye should land on next. The section label flickers through
   the five hues and settles; then the content arrives plainly.
   ============================================================ */
.lab i{font-style:normal;display:inline-block;white-space:pre}
.js .lab.is-lit i{animation:lab-flick .62s ease-in-out both;animation-delay:calc(var(--i,0) * 26ms)}
@keyframes lab-flick{
  0%{color:var(--l-e)}22%{color:var(--l-n)}44%{color:var(--l-z)}66%{color:var(--l-w)}84%{color:var(--l-a)}100%{color:inherit}
}

/* ---- the spine: the name is the map ----
   One letter per section, filled in its own hue when you are in it and
   outlined when you are not, with the five-hue run filling the rail behind. */
/* Far left, full height, and quiet. It ran short and centred on the right, which read
   as a widget rather than as the edge of the page. The rail now runs the whole viewport
   and the letters distribute down it. */
.spine--wm{
  right:auto;left:clamp(.9rem,2vw,2.2rem);
  top:0;bottom:0;transform:none;height:100vh;
  gap:0;padding:clamp(5rem,14vh,10rem) 0 clamp(5rem,14vh,10rem) 16px;
  justify-content:space-between;
}
.spine--wm::before{content:'';position:absolute;left:4px;right:auto;top:0;bottom:0;width:1px;background:var(--rule);opacity:.4}
.spine--wm::after{content:'';position:absolute;left:4px;right:auto;top:0;width:1px;height:var(--fill,0%);opacity:.5;
  background:linear-gradient(180deg,var(--l-e),var(--l-n),var(--l-z),var(--l-w),var(--l-a));
  background-size:100% var(--rail-h,320px);background-repeat:no-repeat;
  transition:height .35s var(--ease-out)}
.spine--wm a{display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-end;gap:.65rem;padding:.32rem 0}
.spine__l{font-family:var(--ui);font-weight:800;font-optical-sizing:none;font-variation-settings:'opsz' 96,'wdth' 100;
  font-size:1.2rem;line-height:1;letter-spacing:0;color:transparent;
  -webkit-text-stroke:1.3px color-mix(in srgb,var(--ink) 22%,transparent);
  transition:color .3s var(--ease-out),-webkit-text-stroke-color .3s var(--ease-out)}
.spine--wm a[aria-current] .spine__l{color:var(--sc);-webkit-text-stroke-color:transparent}
.spine--wm a:hover .spine__l{-webkit-text-stroke-color:var(--sc)}
.spine--wm .spine__t{max-width:0;overflow:hidden;white-space:nowrap;text-align:left;opacity:0;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--muted);
  transition:max-width .32s var(--ease-out),opacity .22s ease}
.spine--wm:hover .spine__t,.spine--wm a:focus-visible .spine__t{max-width:10rem;opacity:1}
.spine--wm.spine--onfield::before{background:var(--rule-field)}
.spine--wm.spine--onfield .spine__l{-webkit-text-stroke-color:color-mix(in srgb,var(--field-ink) 36%,transparent)}
.spine--wm.spine--onfield .spine__t{color:var(--muted-field)}

@media(prefers-reduced-motion:reduce){
  .js .lab.is-lit i{animation:none}
  .spine--wm::after{transition:none}
}

/* the label is the section heading, so it carries a little more presence than
   a caption while staying a label */
.lab{font-size:.78rem;letter-spacing:.09em}
.lab b{font-weight:500}

/* ---- the brief button: a slow refraction that reveals colour ----
   ⚠ The first version made the label itself transparent and painted it with a clipped
   gradient. When background-clip:text does not paint, the primary CTA has NO LABEL, and
   that is exactly what happened. The label now keeps its own colour and a duplicate sits
   over it carrying the gradient, faded in only while the light passes: if the clip ever
   fails, the button still reads. */
.btn--live{position:relative;overflow:hidden;isolation:isolate}
.btn--live > span,.btn--live > svg{position:relative;z-index:2}
.btn--live .bwrap{position:relative;display:inline-block}
.btn--live .bglow{                       /* the real label, always painted */
  display:inline-block;color:inherit;
}
.btn--live .bshine{                      /* the colour pass, decorative only */
  position:absolute;inset:0;display:inline-block;pointer-events:none;opacity:0;
  background-image:linear-gradient(100deg,
    transparent 0%, transparent 28%,
    #E0341C 36%, #E08A00 40%, #12855A 44%, #1F5FD0 48%, #7A2FC4 52%, #D6197D 56%,
    transparent 64%, transparent 100%);
  background-size:300% 100%;
  background-repeat:no-repeat;      /* ⚠ default `repeat` tiles a second colour band
                                       in behind the first, mid-pass. */
  background-position:118% 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.btn--live.is-sweep .bshine{
  opacity:1;
  transition:background-position 2.6s cubic-bezier(.42,0,.22,1), opacity .5s ease;
  background-position:-72% 0;
}
.btn--live::after{
  content:'';position:absolute;inset:-45% -55%;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,
    transparent 40%,
    rgba(255,255,255,.05) 45%,
    rgba(255,255,255,.18) 49%,
    rgba(255,255,255,.05) 53%,
    transparent 60%);
  filter:blur(1px);
  transform:translate3d(-115%,0,0) rotate(1.5deg);
}
.btn--live.is-sweep::after{animation:btn-glass 2.6s cubic-bezier(.42,0,.22,1) 1}
@keyframes btn-glass{
  0%{opacity:0;transform:translate3d(-115%,0,0) rotate(1.5deg)}
  14%{opacity:1}
  86%{opacity:1}
  100%{opacity:0;transform:translate3d(115%,0,0) rotate(1.5deg)}
}
@media(prefers-reduced-motion:reduce){
  .btn--live::after,.btn--live .bshine{display:none}
}

/* Direct homepage: the introduction is visible on arrival at every width. */
.wm--direct{height:auto}
.wm--direct .wm__stage{position:relative;top:auto;height:auto;min-height:0;padding:clamp(2.5rem,6vw,5rem) 0}
.wm--direct .wm__field,.wm--direct .wm__fg::before{display:none}
.wm--direct .wm__mark{font-size:clamp(4rem,10vw,8rem);margin-bottom:1.5rem}
.wm--direct .wm__h{font-size:clamp(2.2rem,4.6vw,4.5rem);max-width:24ch;line-height:1.06}
.wm--direct .wm__sub{max-width:42ch}
@media(max-width:600px){
  .wm--direct .wm__stage{padding:2.5rem 0 3rem}
  .wm--direct .wm__h{font-size:clamp(2.1rem,8.8vw,3.2rem)}
  .wm--direct .wm__cta{gap:1rem 1.5rem}
  .shelf__row{padding-inline:0;gap:1.8rem}
  .shelf__row>.piece{--rot:0deg}
  .shelf__h{gap:.7rem}
  .shelf__tag b{font-size:1.2rem}
}
.wm--direct .wm__mark{line-height:1.1}
.wm--direct .wm__h{line-height:1.14}
@media(max-width:760px){.lab i{animation:none!important;opacity:1!important;transform:none!important}}
.wm--direct .wm__mark{line-height:1.2}
.rm__tile b{line-height:1.2!important}
.lab i{animation:none;opacity:1;transform:none}
.wm--direct .wm__h{line-height:1.2}
.rm__kept{transform:none}
.play .rm__kept,.rm__sheet{transform:none}