/* ============================================================
   YKC Agency. The Screening Room. Design system.
   One Muller-Brockmann grid, three registers.
   ============================================================ */

/* ---- Tokens (v6, the Daylight Ledger, recut 2 Aug 2026) ---- */
:root{
  --lb:clamp(48px,5.5vh,68px); /* nav height, one value site-wide */
  --seal:#F8F4E7;           /* ground, the daylight paper */
  --seal-mid:#DED7C3;       /* relief, the second paper */
  --black:#0B0B0A;          /* the cinema: title card, one band, bars */
  --pure:#000000;           /* letterbox bars only */
  --ink:#0D0D0B;            /* voice on paper */
  --bone:#E8E3D7;           /* title card, links, emphasis inside black */
  --ash:#ADABA4;            /* body + metadata inside black, the one sanctioned tint */
  --reef:#1C3A4A;           /* DEEP RELIEF GROUND ONLY. never an ink (v6 s6) */
  /* the highlight, added 7 Aug 2026, token added 8 Aug 2026 on Paul's ruling.
     .xp-clay referenced var(--clay) on 11 pages while the token existed only in
     method.html's inline :root, so every clay band fell back to Seal Mid or
     transparent and the colour was live on the homepage alone.
     DARK GROUNDS ONLY, OR A GROUND ITSELF. Ink on clay 8.39; bone 1.81 so no
     cinema flip, tungsten 1.10 so no crown; paper 2.11 / 1.61 / 1.83. */
  --clay:#E4968E;
  --tung:#BFB28A;           /* proof figures inside black only */
  --slate:#3C3D40;          /* metadata on paper */
  --assay:#8C8265;          /* rules, borders, the seal. furniture only */
  --red:#C8102E;            /* signal, REC only */
  --cream:#EAE4D4;          /* print and money artefacts only */

  /* ground-dependent roles, paper values. the cinema flip below inverts them */
  --voice:var(--ink);
  --meta:var(--slate);
  --fig:var(--ink);         /* proof on paper is Ink, totals included (v5 s4); Tungsten on dark via the flip */
  --line:rgba(13,13,11,.16);      /* hairline on paper */
  --line-2:rgba(13,13,11,.26);    /* dashed rule on paper */
  --line-b:#23231d;               /* hairline inside black */
  --line-b2:#33322a;
  --muted:var(--ink);       /* all reading text on paper is Ink (v5 s4) */
  --dim:var(--slate);       /* metadata on paper is Slate, the pencil graphite (v5 s4) */

  --disp:'Big Shoulders Display','Arial Narrow',sans-serif;
  --text:'Big Shoulders Text','Archivo',sans-serif;
  --count:'Big Shoulders Text','Archivo',sans-serif;  /* the counting layer */
  --banner-cond:'meno-banner-condensed','bodoni-tuned',Georgia,serif; /* 700 + 900 */
  --prose:'meno-text','Meno Text','newsreader-tuned','Newsreader',Georgia,serif; /* the body voice, recut 3 Aug 2026 */

  /* type-scale role tokens — the six roles, signed on specimen scene 08, 3 Aug 2026.
     Body holds the 17px web anchor flat; the zoom tiers below carry large screens. */
  --fs-body:16px;   --lh-body:1.5;
  --fs-lede:16px;   --lh-lede:1.5;  /* one serif size, Paul 4 Aug 2026 */
  --fs-sub:16px; --lh-sub:1.5;
  --fs-label:12px;  /* letterspaced caps furniture (raised from 10.5, Paul 4 Aug) */
  --fs-cta:14.5px;
  --fs-herosub:clamp(17px,1.35vw,19.5px);  /* hero subline, one value for every video hero */
  --fs-meta:12.5px;
  --fs-pull:clamp(22px,2.4vw,36px); --lh-pull:1.3; /* pull quotes and emphasis moments */
  --lh-count:1.3;     /* Big Shoulders in all its roles */

  /* ── H1 ROLE TOKENS, ruled by Paul 10 Aug 2026 ──────────────────────────
     The heroes were never one component, which is why "unify the h1" kept
     failing: a title card runs the whole sheet, a media hero is capped by
     measure over video, a split hero shares its band with a ledger, and an
     article headline is built to be read. Four roles, four tokens.

     What this replaces: two competing curves that differed only because
     <main class="xp-on"> made the inline block's .xp-on .title (0,2,0) beat
     styles.css's .hero-title (0,1,0). Same markup, same component, two sizes,
     and they crossed over (cases bigger on mobile, smaller on desktop).
     Plus three hand-typed style attributes on contact, work and the article.

     --h1-card holds the shipped 9.38vw. Identity Direction v6 s5 said 5 to 8vw
     and the site has run 9.38 since the refit; Paul amended the law to the
     site rather than the site to the law, 10 Aug 2026.
     --h1-media floor raised 41 -> 52px: measured at 390, the case-study floor
     reads better than the intended one on the primary surface. */
  --h1-card:clamp(49px,9.38vw,150px);     /* title card: home, method, pricing */
  /* media hero: cases + sector pages.
     Paul, 19 August 2026: "DESTINATION MARKETING." and "SOCIAL MEDIA
     MANAGEMENT" need to fit on screen. The floor was a flat 62px on every
     phone, because 9.38vw does not reach 62 until 661, so the type stopped
     responding exactly where the screen is narrowest. MARKETING. set 384px
     wide in a 350px column and MANAGEMENT. 417 in 328: not a wrapping problem,
     a single word wider than the sheet, and no amount of balancing fixes that.
     The floor now tracks the width instead of sitting flat: 47.5 at 360,
     51.5 at 390, 56.8 at 430, back to 62 from 470 up, and 9.38vw takes over
     again at 661 exactly where the two curves meet. Every H1 on the site is
     measured against its longest word after this. */
  --h1-media:clamp(47px,max(clamp(47px,13.2vw,62px),9.38vw),150px);
  --h1-split:clamp(55px,6.4vw,100px);     /* split hero beside a ledger: work */
  --h1-article:clamp(36px,6vw,72px);      /* article headline, built to rank */
  /* The media hero's box. Every sector page authors exactly one <br>, so the
     hero is DESIGNED as two lines; the old 12ch cap wrapped each authored line
     a second time and about, websites, property and FNQ all rendered four.
     Because the cap is in ch it also scaled with the font, which is why home
     and websites ran 2 lines and 4 lines at the identical 135px.
     Measured 10 Aug 2026 at 390/1440/1920/2240: 15ch returns about and
     websites to the authored 2 lines and property to 3, while 16ch and wider
     collapse headland's title to a single 1524px line. min(…,100%) keeps the
     cap from binding at 390, where the stack is already full width. */
  --h1-media-measure:min(15ch,100%);

  --container:1340px;       /* max content width */
  --measure:58ch;           /* body measure 55 to 60ch (v6 fourth amendment; 72ch retired with the grotesque body) */
  --pad:clamp(20px,5vw,64px);
  --band:clamp(56px,9vh,120px); /* vertical band rhythm */
}

/* Meno continuity insurance: Bodoni Moda 700, metric-tuned so a swap holds layout.
   Measured against real Meno in Chrome 2 Aug 2026 (canvas advance + bounding box):
   size-adjust 87%, ascent 110%, descent 34.5%. Provisional until the fragile-case
   round (v6 s11 item 5). Loads only if the kit face is unavailable at paint. */
@font-face{
  font-family:'bodoni-tuned';
  src:url(https://fonts.gstatic.com/s/bodonimoda/v28/aFTH7PxzY382XsXX63LUYL6GYFksw-NIrKp-S_31RuxQVAS1EmZ9.woff2) format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
  size-adjust:87%;ascent-override:110%;descent-override:34.5%;
}

/* Body continuity insurance: Newsreader 400, metric-tuned so a swap holds layout.
   Measured against real Meno Text (kit hlx5mct) in Chrome 3 Aug 2026, canvas advance
   + bounding box: size-adjust 99.3%, ascent 100%, descent 32%. Loads only if the kit
   body face is unavailable at paint. */
@font-face{
  font-family:'newsreader-tuned';
  src:url(https://fonts.gstatic.com/s/newsreader/v26/cY9XfjOCX1hbuyalUrK439vogqCz_goCYw7oRd6JFYYzbARA_n8.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  size-adjust:99.3%;ascent-override:100%;descent-override:32%;
}
@font-face{
  font-family:'newsreader-tuned';
  src:url(https://fonts.gstatic.com/s/newsreader/v26/cY9VfjOCX1hbuyalUrK49dLafXjalZCsZBsgBgbNJYQ5ayZC.woff2) format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
  size-adjust:99.3%;ascent-override:100%;descent-override:32%;
}

*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--seal);color:var(--ink);
  font-family:var(--prose);font-weight:400;font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* widow guards, everything means every set line (v6 measure rule) */
p{text-wrap:pretty}
h1,h2,h3,.title,.h2,.h3,.lede,.build-head,.ble-h,.bf-title,.lhero-title,.faq-qt{text-wrap:balance}
img,svg,video{display:block;max-width:100%}
a{color:var(--voice);text-decoration:none;transition:color .2s ease}
/* --fig on paper is Ink now, so hover reveals a rule instead of shifting hue.
   inside black the flip makes --fig Tungsten and the colour shift still reads. */
a:hover{color:var(--fig);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
/* buttons and CTAs are not prose links: never underline them (Paul, 4 Aug 2026) */
.btn:hover,.cta:hover,.nav-cta:hover,.mnav-cta:hover,.close-cta:hover,.prc-cta:hover,
.reveal-cta:hover,.rgo:hover,.nav-links a:hover,.dropdown-menu a:hover,.foot-cols a:hover,
.mnav-links a:hover,.brand:hover{text-decoration:none}
:focus-visible{outline:2px solid var(--fig);outline-offset:3px}

/* ---- The cinema flip. Inside black, voice goes bone, body and metadata speak ash,
   figures glow tungsten. These are the only surfaces where gold appears. ---- */
.site-head,.hero,.lhero,.audit-b,.closing,.teaser,.mobile-nav,.dropdown-menu{
  --voice:var(--bone);--meta:var(--ash);--fig:var(--tung);
  --muted:var(--ash);--dim:var(--ash);
  --line:var(--line-b);--line-2:var(--line-b2);
}

/* ---- Grid + containers ---- */
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--pad)}
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  mix-blend-mode:overlay;opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- Type scale (v6 fourth amendment: Meno shouts and speaks, Big Shoulders counts.
   Headers locked 3 Aug 2026: 900 / -0.05em / 0.8. Roles ride the --fs tokens.) ---- */
.title{font-family:var(--banner-cond);font-weight:900;text-transform:uppercase;
  letter-spacing:-.05em;line-height:.8;color:var(--voice)}
.h2{font-family:var(--banner-cond);font-weight:900;text-transform:uppercase;
  letter-spacing:-.05em;line-height:.8;color:var(--voice);
  font-size:calc(clamp(30px,4.4vw,58px)*var(--hdr,1))}
.h3{font-family:var(--text);font-weight:600;font-size:clamp(17px,1.4vw,19px);line-height:var(--lh-count);text-transform:lowercase;color:var(--voice)}
.body{font-family:var(--prose);font-weight:400;font-size:var(--fs-body);
  line-height:var(--lh-body);color:var(--muted);max-width:var(--measure)}
.body strong{color:var(--voice);font-weight:inherit} /* emphasis carries no weight change: colour, case, italic */
.body em{font-style:italic}
article .body + .body{margin-top:1.05em}
.lede{font-family:var(--prose);font-weight:400;font-size:var(--fs-lede);line-height:var(--lh-lede);color:var(--voice);max-width:58ch}
.meta{font-family:var(--count);font-weight:500;font-size:var(--fs-meta);line-height:var(--lh-count);letter-spacing:.16em;text-transform:uppercase;color:var(--meta)}
.tung{color:var(--fig)}

/* ---- Header. CANONICAL, one form site-wide (Paul's ruling, 4 Aug 2026).
   The homepage bar is the correct one: referenced <img> logo so the mark renders properly,
   destinations centred in the bar, solid black, no border, no blur. The 18 other pages
   adopted it; index keeps position:fixed because the scroll deck needs it, the rest are
   sticky, which is visually identical. Links are Bone (v5 s4: voice inside black). ---- */
.site-head,.nav{position:sticky;top:0;z-index:100;height:var(--lb);display:flex;align-items:center;
  justify-content:center;background:var(--black);color:var(--bone)}
.nav-in{width:100%;max-width:var(--container);display:flex;align-items:center;
  justify-content:space-between;padding-inline:clamp(20px,5vw,64px);gap:20px}
.brand{display:flex;align-items:center;gap:0;flex:0 0 auto}
.nav-wm{height:33px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:24px;font-family:var(--count);font-weight:500;
  font-size:var(--fs-cta);letter-spacing:.14em;text-transform:uppercase}
.nav-links a{color:var(--bone);opacity:.82;white-space:nowrap}
.nav-links a:hover{opacity:1;text-decoration:none}
.nav-cta{flex:0 0 auto;font-family:var(--count);font-weight:500;font-size:var(--fs-cta);
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone);border:1px solid currentColor;
  border-radius:0;padding:9px 16px;opacity:.92;white-space:nowrap;
  transition:background .25s,color .25s,border-color .25s,opacity .25s}
.nav-cta:hover{opacity:1;text-decoration:none}
button,summary,[role="button"],label[for]{cursor:pointer}
.nav-toggle{display:none;background:none;border:0;color:var(--bone);font-family:var(--count);
  font-weight:500;font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase;padding:0;cursor:pointer}
@media(max-width:900px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:flex-end;min-height:44px;min-width:44px}
}
@media(max-width:430px){.nav-cta{display:none}}  /* the panel carries it once the bar is tight */
/* Services dropdown: keeps all nine destinations reachable on desktop without moving the bar */
.dropdown{position:relative;display:flex;align-items:center}
.dropdown-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  background:var(--black);border:1px solid var(--line-b);padding:8px 0;min-width:210px;
  opacity:0;visibility:hidden;transition:opacity .18s ease;z-index:50}
.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{opacity:1;visibility:visible}
.dropdown-menu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:18px}
.dropdown-menu a{display:block;padding:10px 18px;font-size:var(--fs-cta);color:var(--bone);opacity:.82}
.dropdown-menu a:hover{background:#161611;opacity:1}

/* ---- Mobile menu panel. Nine destinations, the counting register (Big Shoulders 500
   letterspaced caps) so the panel speaks the same voice as the bar. Display 700 is the
   ledger/stat numeral weight and does not belong on navigation (v5 s5). ---- */
.mnav{position:fixed;inset:0;z-index:200;background:var(--black);color:var(--bone);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--lb) clamp(20px,7vw,40px) clamp(28px,6vh,48px)}
.mnav[hidden]{display:none}
.mnav-links{display:flex;flex-direction:column}
.mnav-links a{font-family:var(--count);font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(19px,5.2vw,26px);line-height:var(--lh-count);
  color:var(--bone);text-decoration:none;padding:13px 0;min-height:48px;display:flex;align-items:center;
  border-bottom:1px solid rgba(232,227,215,.14)}
.mnav-links a:hover{text-decoration:none}
.mnav-cta{margin-top:clamp(20px,4vh,34px);align-self:flex-start;font-family:var(--count);
  font-weight:500;font-size:var(--fs-cta);letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone);text-decoration:none;border:1px solid currentColor;padding:15px 22px;
  min-height:48px;display:inline-flex;align-items:center}
.mnav-close{position:absolute;top:calc((var(--lb) - 44px)/2);right:clamp(16px,5vw,32px);
  font-family:var(--count);font-weight:500;font-size:var(--fs-cta);letter-spacing:.14em;
  text-transform:uppercase;background:none;border:0;color:var(--bone);
  min-height:44px;min-width:44px;cursor:pointer}
body.menu-open{overflow:hidden}


/* CTA hover, one law site-wide (Paul, 4 Aug 2026): a keylined CTA fills solid gold on
   rollover and the keyline goes with it. Never a gold fill inside a visible keyline. */
.btn:hover,.cta:hover,.nav-cta:hover,.close-cta:hover,.prc-cta:hover,.mnav-cta:hover,
.closing .btn:hover,.audit-b .btn:hover{border-color:var(--tung);color:var(--black)}

/* ---- Letterbox hero (cinema poster register) ---- */
.hero{position:relative;overflow:hidden;background:var(--pure)}
/* The media hero fills the screen (Paul, 10 Aug 2026). The nav is sticky and holds
   its own space, so full viewport is what is left under it. svh, not vh, or a phone's
   collapsing URL bar makes the hero taller than the screen it is meant to fit.
   Was: aspect-ratio 2.39/1 with min 78vh / max 88vh, which rendered 70% of the viewport
   on a phone and 78 to 85% on a desktop, so the next band always peeked. */
/* --vph, 19 August 2026. Paul: "when scrolling down from the above fold there
   is a jump and more margin is adding to screen one", on several pages.
   Reproduced by changing the viewport height alone, with no reload: the hero
   grew by exactly the height the collapsing browser bar gave back, 84px, and
   pushed the whole document down behind it. Every viewport-height unit is
   live, so a bar that moves is a layout that moves.
   ykc-vh.js pins --vph to the height measured at load and only re-reads it
   when the WIDTH changes, which is the one case that is a real layout change
   rather than the chrome sliding. 100svh stays as the no-JS fallback, and the
   two agree at load, so nothing moves on the way in either. */
.hero-media{position:relative;width:100%;
  height:calc(100vh - var(--lb));
  height:calc(100svh - var(--lb));
  height:calc(var(--vph,100svh) - var(--lb));
  overflow:hidden}
.hero-media video,.hero-media .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) contrast(1.05) brightness(.72)}
.hero-media .still{background:
  radial-gradient(90% 130% at 72% 24%, rgba(191,178,138,.30) 0%, transparent 55%),
  radial-gradient(70% 90% at 16% 84%, rgba(28,58,74,.6) 0%, transparent 60%),
  linear-gradient(165deg,#0f1512 0%,#1a2420 42%,#2b2a1e 74%,#443722 100%);
  animation:pan 26s ease-in-out infinite alternate}
@keyframes pan{from{transform:scale(1.02)}to{transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.hero-media .still{animation:none}}
/* Paul, 6 Aug 2026: the burst sits ABOVE the type and blends difference, the same
   effect the Headland custom cursor uses. A filament crossing the headline darkens,
   the same filament on the ground lightens, so the overlap is the effect rather than
   something to mask away. */
.ykc-burst{position:absolute;inset:0;width:100%;height:100%;z-index:5;
  mix-blend-mode:difference;pointer-events:none}
/* Paul, 6 Aug 2026: the weave. A quiet Assay network over a cell grid so six boxes
   read as one system. Overlays rather than sits behind, because the cells carry their
   own paper ground. Decoration only: never takes the pointer. */
.ykc-weave{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.build-grid{position:relative}

/* Paul, 6 Aug 2026: on a woven grid the boxes come off entirely. The six items hang off
   nodes in the polygon field instead of sitting in cells, staggered vertically with
   margin (not transform, which the reveal already owns) so they read as free-floating. */
.build-grid[data-weave]{background:none;border-top:0;border-bottom:0;
  gap:clamp(30px,4.4vh,62px) clamp(26px,3.2vw,58px);margin-top:clamp(30px,4vh,52px)}
.build-grid[data-weave] .build-cell{position:relative;z-index:1;background:none;
  padding:0 0 0 clamp(18px,1.6vw,26px);min-height:0}
.build-grid[data-weave] .build-cell:hover{background:none}
.build-grid[data-weave] .build-cell .n{margin-left:-2px}
.build-grid[data-weave] .build-cell:nth-child(2){margin-top:clamp(14px,2.4vh,32px)}
.build-grid[data-weave] .build-cell:nth-child(3){margin-top:clamp(5px,.9vh,12px)}
.build-grid[data-weave] .build-cell:nth-child(4){margin-top:clamp(6px,1.1vh,15px)}
.build-grid[data-weave] .build-cell:nth-child(5){margin-top:clamp(20px,3.2vh,42px)}
.build-grid[data-weave] .build-cell:nth-child(6){margin-top:clamp(2px,.5vh,7px)}
@media(max-width:760px){.build-grid[data-weave] .build-cell{margin-top:0!important}}
.ykc-mesh{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* Paul, 5 Aug 2026: heroes stack from the bottom. The title and subline were anchored
   independently, so a subline that grew to 3 lines collided with the headline at 390.
   One flex column, one real gap, self-sizing at any line count. */
.hero-stack{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(40px,calc(var(--vph,100vh)*.07),80px);z-index:4;
  display:flex;flex-direction:column;gap:clamp(14px,1.9vh,24px)}
.hero-stack .hero-title,.hero-stack .hero-sub{position:static;left:auto;right:auto;bottom:auto;margin:0}
/* Paul, 6 Aug 2026: hero scrim. The house grade alone is not enough under high-key
   footage, and the type sets bottom-left, so protect exactly there. Sits above the
   media at z2, below the letterbox bars and the type. */
/* BASE-ALIGNED, in svh rather than percentages of the hero's own height. A
   percentage stop drifts the moment the hero grows past the viewport, which
   left the title sitting on the clear part of its own scrim. Paul, 17 Aug. */
.hero-media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(11,11,10,.9) 0,rgba(11,11,10,.78) 14svh,
      rgba(11,11,10,.34) 34svh,rgba(11,11,10,0) 58svh),
    linear-gradient(to right,rgba(11,11,10,.5) 0%,rgba(11,11,10,0) 48%)}
.hero-bars{position:absolute;left:0;right:0;height:clamp(24px,5vh,44px);background:var(--pure);z-index:3}
.hero-bars.t{top:0}.hero-bars.b{bottom:0}
.hero-rec{position:absolute;top:calc(clamp(24px,5vh,44px) + 18px);left:var(--pad);z-index:4;
  font-family:var(--count);font-weight:500;font-size:var(--fs-meta);letter-spacing:.18em;color:var(--ash);display:flex;gap:8px;align-items:center}
.hero-rec i{width:9px;height:9px;background:var(--red);border-radius:50%;display:inline-block;animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
@media(prefers-reduced-motion:reduce){.hero-rec i{animation:none}}
.hero-tc{position:absolute;top:calc(clamp(24px,5vh,44px) + 18px);right:var(--pad);z-index:4;
  font-family:var(--count);font-weight:500;font-size:var(--fs-meta);letter-spacing:.1em;color:var(--ash)}
/* the case serial in the hero furniture, matching .hero-tc's register.
   bottom offset mirrors .hero-rec/.hero-tc's top one: the letterbox bar
   (.hero-bars.b) is clamp(24px,5vh,44px) tall, so the serial has to clear
   that same height before its own 18px gap, not a flat 3vh that sits under it. */
.hero-serial{position:absolute;left:var(--pad);bottom:calc(clamp(24px,5vh,44px) + 18px);z-index:4;
  font-family:var(--count);font-weight:500;font-size:var(--fs-meta);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
/* headland-mission-beach.html pulls .hero-sub down to bottom:clamp(40px,7vh,80px)
   under the same 768px break, and the sitewide offset above lands the serial
   inside that paragraph's own box there. This is the only page carrying
   .hero-serial, so the exception stays local to it rather than the whole rule. */
@media(max-width:768px){.hero-serial{bottom:clamp(18px,3vh,30px)}}
.hero-title{position:absolute;left:var(--pad);bottom:clamp(78px,calc(var(--vph,100vh)*.13),150px);z-index:4;
  font-size:var(--h1-media);max-width:var(--h1-media-measure)}
/* The seven xp-on sector pages carry an inline .xp-on .title block (0,2,0) that
   was written for the title card and catches h1.title.hero-title by accident.
   This 0,3,0 rule takes the media hero back without touching seven inline
   blocks, and leaves that block's optical margins alone. CLAUDE.md trap 7. */
.xp-on .title.hero-title{font-size:var(--h1-media);max-width:var(--h1-media-measure)}
/* The other two roles. Both were hand-typed style attributes on the element:
   same values, now named roles that a later session can find and reason about.
   .h1-split — a hero sharing its band with a ledger (work.html), so the type is
   sized to a column, not to the sheet.
   .h1-article — a headline built to be read and to rank, where the H1 carries
   the search term plain (voice law) and 45 characters must not run six lines. */
.h1-split{font-size:var(--h1-split)}
.h1-article{font-size:var(--h1-article)}
/* .h1-card is for a title card that does NOT sit under <main class="xp-on">,
   where .xp-on .title already carries the role: 404.html and thanks.html.
   Both hard-coded clamp(48px,8vw,110px) and neither can simply drop the
   attribute, because .title sets family and weight but never a size. */
.h1-card{font-size:var(--h1-card)}

/* THE HERO WIPE, site standard, Paul 12 Aug 2026. Every hero carrying video
   erases to disclose whatever the page put right behind it, never fades,
   slides or cuts. Same mechanic as the homepage's .hx-hpin and websites.html's
   own two-stage .op sequence, generalised here against the shared .hero
   component so any page can opt in with two classes and no page-scoped CSS.
   Wrap the hero in .hero-wipe, mark the very next section .hero-wnext.

   THE SEAM, measured and closed 16 Aug 2026. The runway must be exactly TWICE
   the hero's own height, never 200vh, because .hero stands at 100svh - var(--lb)
   and not a full viewport. With a 200vh runway the erase outran the thing it was
   erasing by exactly 2 * var(--lb): the hero's clipped bottom edge and the next
   section's top separated by (1-p) * 98px on a 900px-tall screen, and the body
   ground showed through as a pale band. Measured at 1440x900: hero 851, runway
   1800, gap 99 -> 88 -> 73 -> 59 -> 44 -> 29 -> 14 as the wipe ran. It read as a
   white seam because it was one. Three earlier fixes tested clean only because
   headless Chrome defaults prefers-reduced-motion to reduce, which returns
   ykc-herowipe.js at its second line, so the wipe under test never ran at all.
   Both numbers below are now derived from the same expression the hero's own
   height is, so they cannot drift apart again; ykc-herowipe.js then overwrites
   them with the measured pixel values for sub-pixel exactness. */
/* pointer-events:none, 19 August 2026. Paul: "why can't I select the text on the
   region section of this page?" Because .hero-wipe was sitting on top of it.
   The hero is sticky inside this 200svh runway and clipped with clip-path as the
   wipe closes, and clip-path removes the CLIPPED element from hit testing, never
   its unclipped parent. The runway went on covering the band that .hero-wnext
   pulls up underneath it by -851px, so every selection, every click and every
   caret landed on DIV.hero-wipe instead of the paragraph. Verified: at 1440 the
   region copy hit-tested to .hero-wipe, at 390 (where these rules are off) it
   hit the paragraph.
   The runway holds no interactive content on any of the five pages that use it,
   checked, so it can stop taking input entirely. The hero keeps its own. */
.hero-wipe{position:relative;z-index:1;height:calc(200svh - (2 * var(--lb)));overflow-anchor:none;pointer-events:none}
.hero-wipe>.hero{pointer-events:auto}
.hero-wipe>.hero{position:sticky;top:0;clip-path:inset(0 0 var(--hswipe,0%) 0);overflow-anchor:none}
.hero-wipe+.hero-wnext{margin-top:calc(-100svh + var(--lb));position:relative;z-index:0;overflow-anchor:none}
@media(max-width:939px){
  .hero-wipe{height:auto}
  .hero-wipe>.hero{position:relative;clip-path:none!important}
  .hero-wipe+.hero-wnext{margin-top:0}
}
@media(prefers-reduced-motion:reduce){
  .hero-wipe{height:auto}
  .hero-wipe>.hero{position:relative;clip-path:none!important}
  .hero-wipe+.hero-wnext{margin-top:0}
}
/* HERO SUBLINE LAW: Big Shoulders 500, letterspaced caps, on every video hero site-wide. */
.hero-sub{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(40px,7vh,80px);z-index:4;
  font-family:var(--count);font-weight:500;font-size:var(--fs-herosub);line-height:var(--lh-count);
  letter-spacing:.14em;text-transform:uppercase;color:var(--voice)}
.hero-ctas{position:absolute;right:var(--pad);bottom:clamp(40px,7vh,80px);z-index:4}
.btn{font-family:var(--count);font-weight:500;font-size:var(--fs-cta);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--voice);padding:13px 22px;display:inline-block;color:var(--voice)}
.btn,.cta,.closing .btn,.nav-cta,.mnav-cta{position:relative;overflow:hidden;z-index:0;transition:color .28s ease,border-color .01s linear}.btn::before,.cta::before,.closing .btn::before,.nav-cta::before,.mnav-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tung);transform:scaleX(0);transform-origin:left center;transition:transform .42s cubic-bezier(.6,0,.25,1)}.btn:hover::before,.cta:hover::before,.closing .btn:hover::before,.nav-cta:hover::before,.mnav-cta:hover::before{transform:scaleX(1)}@media(prefers-reduced-motion:reduce){.btn::before,.cta::before,.closing .btn::before,.nav-cta::before,.mnav-cta::before{transition:none}}

.btn-red{border-color:var(--fig)}

/* ---- Bands ---- */
.band{padding-block:var(--band);border-top:1px solid var(--line)}
.band.reef{background:var(--seal-mid)}
.eyebrow{font-family:var(--count);font-weight:500;font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;color:var(--meta);margin-bottom:18px;display:block}

/* proof strip / ledger (editorial register) */
.ledger{border-top:2px solid var(--voice)}
.ledger-h{font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--meta);padding:12px 0;border-bottom:1px solid var(--line)}
.ledger-row{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px dashed var(--line-2);align-items:baseline}
.ledger-row .lbl{font-family:var(--text);font-weight:500;font-size:var(--fs-body);color:var(--muted);line-height:var(--lh-count)}
.ledger-row .val{font-family:var(--count);font-weight:500;font-size:clamp(18px,2.4vw,30px);
  color:var(--fig);white-space:nowrap}
.ledger-src{font-family:var(--count);font-weight:500;font-size:var(--fs-meta);color:var(--dim);padding-top:12px}
.ledger-src a{color:var(--meta);text-decoration:underline}

/* proof scoreboard — big-number treatment for real metrics */
.score{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);column-gap:clamp(16px,3vw,40px);border-top:2px solid var(--assay);margin-top:6px}
.score-h{grid-column:1/-1;font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;color:var(--meta);padding:14px 0 2px}
.score .fig{grid-column:1;justify-self:start;align-self:center;font-family:var(--disp);font-weight:500;
  font-size:clamp(44px,7.5vw,84px);line-height:.9;letter-spacing:-.035em;color:var(--fig);
  white-space:nowrap;
  border-top:1px solid var(--line);padding:clamp(18px,3vh,32px) 0}
.score .cap{grid-column:2;align-self:center;font-family:var(--count);font-weight:500;font-size:var(--fs-meta);
  line-height:1.55;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  border-top:1px solid var(--line);padding:clamp(18px,3vh,32px) 0}
.score-src{grid-column:1/-1;font-family:var(--count);font-weight:500;font-size:var(--fs-meta);color:var(--dim);
  padding-top:16px;border-top:1px solid var(--line)}
.score-src a{color:var(--meta);text-decoration:underline}
/* compact stat grid — case-study lede proof */
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,28px);margin-top:8px}
.statgrid .stat{border-top:1px solid var(--line);padding-top:14px}
.statgrid .fig{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(34px,4vw,54px);line-height:.9;letter-spacing:-.03em;color:var(--fig);white-space:nowrap}
.statgrid .statcap{display:block;margin-top:10px;font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.statgrid--3{grid-template-columns:repeat(3,1fr)}
.statgrid--3 .fig{font-size:clamp(28px,3.4vw,46px)}
@media(max-width:640px){.statgrid--3{grid-template-columns:1fr}}
/* clickable case-study ledger — big number + metric/story/client hierarchy + CTA, per-case tint */
.caseledger{border-top:2px solid var(--assay);margin-top:6px}
.caseledger-h{display:block;font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;color:var(--meta);padding:14px 0 8px}
.lrow{display:grid;grid-template-columns:minmax(0,38%) 1fr auto;align-items:center;gap:clamp(18px,3vw,44px);padding:clamp(22px,3vw,34px) clamp(14px,2vw,26px);border-top:1px solid var(--line);text-decoration:none;transition:background .3s ease}
.lrow-fig{font-family:var(--count);font-weight:500;font-size:clamp(44px,6.6vw,80px);line-height:.9;letter-spacing:-.035em;color:var(--fig);white-space:nowrap}
.lrow-mid{display:flex;flex-direction:column;gap:4px;min-width:0}
.lrow-metric{font-family:var(--count);font-weight:500;font-size:var(--fs-meta);letter-spacing:.07em;text-transform:uppercase;color:var(--voice);line-height:1.5}
.lrow-story{font-family:var(--text);font-weight:500;font-size:var(--fs-body);color:var(--muted);line-height:var(--lh-count)}
.lrow-client{font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fig);margin-top:5px}
.lrow-cta{font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap;display:inline-flex;align-items:center;gap:8px;transition:color .25s}
.lrow-cta i{font-style:normal;transition:transform .25s}
.lrow:hover .lrow-cta{color:var(--voice)}
.lrow:hover .lrow-cta i{transform:translateX(4px)}
.lrow--wildside{background:linear-gradient(90deg,rgba(30,90,78,.16) 0%,rgba(30,90,78,0) 58%)}
.lrow--nala{background:linear-gradient(90deg,rgba(156,120,58,.15) 0%,rgba(156,120,58,0) 58%)}
.lrow--headland{background:linear-gradient(90deg,rgba(52,84,124,.15) 0%,rgba(52,84,124,0) 58%)}
.lrow--wildside:hover{background:linear-gradient(90deg,rgba(30,90,78,.30) 0%,rgba(30,90,78,.02) 64%)}
.lrow--nala:hover{background:linear-gradient(90deg,rgba(156,120,58,.28) 0%,rgba(156,120,58,.02) 64%)}
.lrow--headland:hover{background:linear-gradient(90deg,rgba(52,84,124,.28) 0%,rgba(52,84,124,.02) 64%)}
.lrow-src{font-family:var(--count);font-weight:500;font-size:var(--fs-meta);color:var(--dim);padding-top:18px;border-top:1px solid var(--line)}
@media(max-width:720px){.lrow{grid-template-columns:1fr;gap:9px;padding:24px 14px}.lrow-fig{font-size:clamp(52px,15vw,72px)}.lrow-cta{margin-top:8px}}
/* blog breakout feature */
.blogfeature{display:grid;grid-template-columns:minmax(0,42%) 1fr;gap:clamp(24px,3.5vw,52px);align-items:center;margin-top:24px}
.blogfeature-img{position:relative;display:block;margin:0;border-radius:4px;overflow:hidden;aspect-ratio:3/2}
.blogfeature-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.blogfeature-img:hover img{transform:scale(1.03)}
.bf-tag{position:absolute;top:12px;left:12px;font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--red);padding:5px 10px;border-radius:0}
.blogfeature-body{min-width:0}
.bf-kicker{display:block;font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.bf-title{font-family:var(--banner-cond);font-weight:700;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.01em;line-height:1.1;text-transform:lowercase;margin:10px 0 18px;color:var(--voice)}
@media(max-width:720px){.blogfeature{grid-template-columns:1fr;gap:20px}}
.blogfeature--phone{grid-template-columns:minmax(0,300px) 1fr}
.blogfeature--phone .phone{width:100%;max-width:280px;margin:0 auto}
@media(max-width:720px){.blogfeature--phone{grid-template-columns:1fr}.blogfeature--phone .phone{max-width:260px}}
@media(max-width:680px){
  .score{grid-template-columns:1fr}
  .score .fig{grid-column:1;font-size:clamp(52px,15vw,78px);padding:20px 0 4px}
  .score .cap{grid-column:1;border-top:0;padding:0 0 22px}
}
/* red is never a heading and never decorative (v5 s4). Emphasis inside a header is the
   italic inflection, which is the one thing s5 licenses for headers. */
.hot{font-style:italic}

/* before/after chart — the climb */
.ba{margin:4px 0 2px}
.ba-eyebrow{display:block;font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.22em;
  text-transform:uppercase;color:var(--red);margin-bottom:22px}
.ba-chart{width:100%;height:auto;display:block;overflow:visible}
.ba-grid line{stroke:var(--line);stroke-width:1}
.ba-yl{fill:var(--dim);font-family:var(--count);font-size:13px;text-anchor:end}
.ba-ceiling{stroke:var(--assay);stroke-width:2.5;stroke-dasharray:2 8;stroke-linecap:round}
.ba-dot-dead{fill:var(--assay)}
.ba-ceil-val{fill:var(--muted);font-family:var(--count);font-weight:600;font-size:21px}
.ba-ceil-sub{fill:var(--dim);font-family:var(--count);font-size:11px;letter-spacing:.03em}
.ba-break{fill:none;stroke:var(--dim);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ba-line{fill:none;stroke:var(--fig);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.ba-pts circle{fill:var(--fig)}
.ba-pts text{fill:var(--voice);font-family:var(--disp);font-weight:700;font-size:27px;text-anchor:middle}
.ba-now{fill:var(--fig);stroke:var(--seal);stroke-width:2}
.ba-now-val{font-size:32px}
.ba-nowlabel{fill:var(--fig);font-family:var(--count);font-size:11px;letter-spacing:.2em;text-anchor:middle}
.ba-xl{fill:var(--dim);font-family:var(--count);font-size:12px;letter-spacing:.06em;text-anchor:middle}
.ba-src{font-family:var(--count);font-weight:500;font-size:var(--fs-meta);color:var(--dim);margin-top:14px;max-width:74ch}
/* draw-in on scroll */
.js .ba-line{stroke-dasharray:560;stroke-dashoffset:560;transition:stroke-dashoffset 1.35s cubic-bezier(.32,.66,.2,1) .12s}
.ba.in .ba-line{stroke-dashoffset:0}
.js .ba-pts>*{opacity:0;transition:opacity .45s ease}
.ba.in .ba-pts>*{opacity:1}
.ba.in .ba-pts>*:nth-child(-n+2){transition-delay:.5s}
.ba.in .ba-pts>*:nth-child(n+3):nth-child(-n+4){transition-delay:.72s}
.ba.in .ba-pts>*:nth-child(n+5):nth-child(-n+6){transition-delay:.92s}
.ba.in .ba-pts>*:nth-child(n+7):nth-child(-n+8){transition-delay:1.08s}
.ba.in .ba-pts>*:nth-child(n+9):nth-child(-n+10){transition-delay:1.22s}
.ba.in .ba-pts>*:nth-child(n+11){transition-delay:1.36s}
@media(prefers-reduced-motion:reduce){
  .js .ba-line{stroke-dashoffset:0;transition:none}
  .js .ba-pts>*{opacity:1;transition:none}
}

/* rebrand exhibit — print mockups, before/after */
.ba2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3.5vw,48px);margin-top:24px;align-items:start}
@media(max-width:820px){.ba2{grid-template-columns:1fr;gap:32px}}
.tag{display:inline-block;font-family:var(--count);font-weight:500;font-size:var(--fs-meta);letter-spacing:.16em;
  text-transform:uppercase;padding:5px 11px;margin-bottom:14px}
.tag.old{color:var(--dim);border:1px solid var(--line)}
.tag.new{color:var(--black);background:var(--tung);font-weight:600}
.mock{margin:0 0 8px}
.mock .sheet{position:relative;display:block;border-radius:2px;overflow:hidden;
  box-shadow:0 34px 66px -26px rgba(0,0,0,.9),0 10px 22px rgba(0,0,0,.5)}
.mock .sheet img{width:100%;height:auto;display:block}
.mock .sheet::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:46px;transform:translateX(-50%);
  pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.14) 44%,rgba(255,255,255,.06) 50%,rgba(0,0,0,.14) 56%,rgba(0,0,0,0))}
.mock figcaption{font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:11px 0 4px}

/* photoreal brochure stage — hero cover standing, copies fanned on a lit surface */
.stage{position:relative;aspect-ratio:1/1;width:100%;overflow:hidden;border-radius:3px;
  background:radial-gradient(118% 82% at 50% 12%, #2c2921 0%, #17150e 46%, #0b0a06 100%)}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 44% at 50% 100%, rgba(0,0,0,.55), transparent 64%)}
.stage .bro{position:absolute;border-radius:2px;outline:1px solid rgba(255,255,255,.05);
  box-shadow:0 22px 40px -14px rgba(0,0,0,.78),0 5px 12px rgba(0,0,0,.5)}
.stage img.bro{height:auto}
.stage .bro{transform-origin:bottom center}
.stage .spread{width:60%;left:3%;bottom:6%;z-index:4;transform:perspective(1600px) rotateX(39deg) rotate(4deg);
  box-shadow:0 26px 42px -16px rgba(0,0,0,.8)}
.stage .backc{width:31%;left:2%;bottom:20%;z-index:2;transform:perspective(1400px) rotateX(26deg) rotate(-19deg)}
.stage .fan{width:32%;left:64%;bottom:9%;z-index:3;transform:perspective(1400px) rotateX(28deg) rotate(19deg)}
.castshadow{position:absolute;left:32%;bottom:9%;width:44%;height:14%;z-index:1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.7),transparent 70%);filter:blur(11px);transform:rotate(-4deg)}
.stage .hero{display:block;width:43%;left:36%;bottom:12%;z-index:6;transform-origin:bottom center;
  transform:perspective(1700px) rotateY(-16deg) rotateX(2deg);
  box-shadow:0 48px 72px -20px rgba(0,0,0,.92),0 16px 30px rgba(0,0,0,.6)}
.stage .hero img{width:100%;height:auto;display:block;border-radius:2px}
.stage .hero .sheen{position:absolute;inset:0;border-radius:2px;pointer-events:none;
  background:linear-gradient(122deg,rgba(255,255,255,.13),rgba(255,255,255,0) 36%,rgba(0,0,0,0) 64%,rgba(0,0,0,.2))}
@media(max-width:820px){.stage{aspect-ratio:4/5}.stage .fan{width:44%}.stage .hero{width:52%;left:24%}}

/* pull-up banner showroom — two banners standing in a lit room */
.showroom{display:flex;justify-content:center;align-items:flex-end;gap:clamp(26px,8vw,96px);position:relative;
  overflow:hidden;border-radius:3px;margin-top:24px;padding:clamp(34px,5vw,64px) 0 clamp(30px,4vw,50px);
  background:radial-gradient(92% 72% at 50% 6%, #26241d 0%, #141209 54%, #0a0906 100%)}
.showroom::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32%;pointer-events:none;
  background:radial-gradient(58% 100% at 50% 100%, rgba(0,0,0,.5), transparent 72%)}
.pullup{margin:0;position:relative;width:clamp(150px,27%,300px);z-index:1;transform-origin:bottom center}
.pullup>img{width:100%;height:auto;display:block;border-radius:2px;position:relative;z-index:2;
  outline:1px solid rgba(255,255,255,.05);box-shadow:0 30px 46px -20px rgba(0,0,0,.85),0 8px 18px rgba(0,0,0,.5)}
.showroom .pullup:first-of-type>img{transform:perspective(1700px) rotateY(6deg)}
.showroom .pullup:last-of-type>img{transform:perspective(1700px) rotateY(-6deg)}
.pullup .base{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:116%;height:15px;z-index:1;
  border-radius:50%;background:radial-gradient(50% 60% at 50% 38%,#3c3a30,#16140d 76%);box-shadow:0 8px 18px rgba(0,0,0,.6)}
.pullup::after{content:"";position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);width:150%;height:32px;z-index:0;
  pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.62),transparent 72%);filter:blur(9px)}
.pullup figcaption{margin-top:24px;text-align:center}
@media(max-width:600px){.showroom{gap:14px;padding:24px 0 20px}.pullup{width:42%}}

/* social exhibit — dailies (reels), sequence (carousel), grid (statics) */
.dailies{display:flex;gap:clamp(14px,3vw,30px);flex-wrap:wrap;margin-top:22px}
.reel{margin:0;position:relative;width:clamp(150px,29%,258px)}
.reel video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;border-radius:3px;background:#000;
  box-shadow:0 26px 46px -18px rgba(0,0,0,.82)}
.reel .rec{position:absolute;top:11px;left:11px;font-family:var(--count);font-size:9.5px;letter-spacing:.16em;
  color:#fff;display:flex;align-items:center;gap:6px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.reel .rec::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);animation:recblink 1.5s steps(1) infinite}
.reel .tc{position:absolute;top:11px;right:11px;font-family:var(--count);font-size:9.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.9);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.reel figcaption{font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:10px}
@keyframes recblink{0%,55%{opacity:1}56%,100%{opacity:.22}}
/* phone mockups — the three reels running in device UI */
.phones{display:flex;gap:clamp(18px,4vw,52px);justify-content:center;flex-wrap:wrap;margin-top:28px}
.phone{margin:0;width:clamp(200px,27vw,290px);text-align:center}
.phone-screen{position:relative;aspect-ratio:9/18;border-radius:30px;overflow:hidden;background:#0D0D0B;
  border:7px solid #0D0D0B;box-shadow:0 26px 64px rgba(13,13,11,.22)}
.phone-screen video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.phone-screen::before{display:none}
.phone figcaption{font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:15px}
@media(max-width:600px){.phone{width:44%}}
/* corner replay — reels play one at a time, stop, then offer replay */
.phone-screen .reel-replay{position:absolute;right:11px;bottom:11px;width:36px;height:36px;border-radius:50%;border:none;background:rgba(11,11,10,.62);color:#fff;font-size:16px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:4;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:background .2s}
.phone-screen .reel-replay:hover{background:rgba(200,16,46,.85)}
.phone.ended .reel-replay{display:flex}
/* carousel inside a phone — swipeable IG post */
.phone-post .phone-screen{background:#0a0a08;display:flex;flex-direction:column;justify-content:center}
.ig-head{display:flex;align-items:center;gap:8px;padding:11px 11px 9px}
.ig-ava{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--tung),#6f6446);flex:0 0 auto}
.ig-user{font-family:var(--count);font-size:10.5px;letter-spacing:.03em;color:var(--voice)}
.ph-carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;aspect-ratio:1/1;width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ph-carousel::-webkit-scrollbar{display:none}
.ph-carousel img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;display:block}
.ig-dots{display:flex;gap:5px;justify-content:center;padding:12px 0 9px}
.ig-dots i{width:5px;height:5px;border-radius:50%;background:rgba(232,227,215,.26);transition:background .2s}
.ig-dots i.on{background:var(--bone)}
.ig-cap{font-size:11px;line-height:1.45;color:var(--muted);padding:0 13px 13px}
.ig-cap b{color:var(--voice);font-weight:600}
.ig-react{display:flex;align-items:center;gap:6px;padding:0 13px 8px}
.ig-rx{display:inline-flex}
.ig-rx .rx{width:15px;height:15px;border-radius:50%;border:1.5px solid #0a0a08;margin-left:-4px}
.ig-rx .rx-like{background:#3b6bd6;margin-left:0}
.ig-rx .rx-love{background:#e0245e}
.ig-rx-n{font-family:var(--count);font-size:11px;color:var(--muted)}
/* brochure — curl: front cover opens to the inside spread, curls over to the back */
.brocurl{--bh:clamp(260px,42vw,470px);margin-top:14px}
.bc-stage{position:relative;height:var(--bh);perspective:2200px;display:grid;place-items:center;cursor:pointer;margin-bottom:18px}
.bc-page{grid-area:1/1;position:relative;height:var(--bh);backface-visibility:hidden;transform-origin:left center;transition:transform .95s cubic-bezier(.4,.1,.2,1),opacity .5s ease}
.bc-page img{height:var(--bh);width:auto;display:block;border-radius:2px;box-shadow:0 26px 54px -20px rgba(0,0,0,.9);outline:1px solid rgba(255,255,255,.05)}
.bc-page::after{content:"";position:absolute;inset:0;border-radius:2px;background:linear-gradient(100deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.5));opacity:0;transition:opacity .55s ease;pointer-events:none}
.bc-spread,.bc-back{opacity:0;pointer-events:none}
.brocurl[data-state="1"] .bc-front{transform:rotateY(-162deg);opacity:0}
.brocurl[data-state="1"] .bc-front::after{opacity:1}
.brocurl[data-state="1"] .bc-spread{opacity:1;pointer-events:auto}
.brocurl[data-state="2"] .bc-front{opacity:0}
.brocurl[data-state="2"] .bc-spread{transform:rotateY(-162deg);opacity:0}
.brocurl[data-state="2"] .bc-spread::after{opacity:1}
.brocurl[data-state="2"] .bc-back{opacity:1;pointer-events:auto}
.bc-ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:22px}
.bc-step{font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);min-width:120px;text-align:center}
.bf-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(232,227,215,.03);color:var(--voice);font-size:19px;line-height:1;cursor:pointer;transition:background .2s,border-color .2s}
.bf-btn:hover:not(:disabled){background:var(--tung);border-color:var(--tung);color:var(--black)}
.bf-btn:disabled{opacity:.3;cursor:default}
.bc-alt{display:flex;align-items:center;gap:14px;margin:0 auto;background:none;border:1px solid var(--line);border-radius:4px;padding:9px 16px 9px 9px;cursor:pointer;transition:border-color .2s,background .2s}
.bc-alt:hover{border-color:var(--fig);background:rgba(191,178,138,.05)}
.bc-alt-img{height:60px;width:auto;border-radius:2px;display:block;box-shadow:0 6px 16px -6px rgba(0,0,0,.7)}
.bc-alt-label{font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
html:not(.js) .bc-stage{display:flex;gap:16px;height:auto;flex-wrap:wrap;cursor:default}
html:not(.js) .bc-page{opacity:1!important;transform:none!important}
html:not(.js) .bc-ctrl,html:not(.js) .bc-alt{display:none}
@media(prefers-reduced-motion:reduce){.bc-page{transition:opacity .3s ease}.brocurl[data-state="1"] .bc-front,.brocurl[data-state="2"] .bc-spread{transform:none}}
@media(max-width:600px){.brocurl{--bh:clamp(230px,64vw,340px)}}
.filmstrip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:14px;padding-bottom:14px;-webkit-overflow-scrolling:touch}
.filmstrip img{height:clamp(300px,48vw,480px);width:auto;flex:0 0 auto;scroll-snap-align:start;border-radius:3px;display:block;outline:1px solid rgba(255,255,255,.05)}
/* subtle tint band to break up the black (brand book / foundation) */
.bandtint{background:var(--seal-mid);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feedgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:14px}
.feedgrid img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:2px}
/* authentic IG feed grid with play-once video cells */
.igfeed{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:16px auto 0;max-width:430px}
.igfeed>img,.igfeed .vcell{aspect-ratio:4/5;position:relative;margin:0;overflow:hidden;border-radius:2px;background:#100f0b}
.igfeed>img{width:100%;height:100%;object-fit:cover;display:block}
.vcell video{width:100%;height:100%;object-fit:cover;display:block}
.vcell .v-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
  border:none;background:rgba(11,11,10,.55);color:#fff;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;
  justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:2;transition:background .2s}
.vcell .v-btn:hover{background:rgba(200,16,46,.85)}
.vcell .replay{display:none}
.vcell.playing .play,.vcell.playing .replay{display:none}
.vcell.ended .play{display:none}
.vcell.ended .replay{display:flex}
@media(prefers-reduced-motion:reduce){.reel .rec::before{animation:none}}
@media(max-width:600px){.reel{width:46%}.feedgrid{gap:5px}}
/* exposed grid the social sits on */
.gridbg{position:relative}
.gridbg::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(140,130,101,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,130,101,.18) 1px,transparent 1px);
  background-size:clamp(46px,6vw,84px) clamp(46px,6vw,84px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.gridbg>.container{position:relative;z-index:1}

/* pull-in reveal — new site fills the frame, old sits one panel right */
.reveal{position:relative;margin-top:22px}
.reveal-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:14px;
  scrollbar-width:thin;scrollbar-color:var(--meta) transparent;-webkit-overflow-scrolling:touch}
.webframe{flex:0 0 93%;scroll-snap-align:center;margin:0;border-radius:8px;overflow:hidden;
  background:#100f0b;border:1px solid var(--line);box-shadow:0 30px 60px -24px rgba(0,0,0,.85)}
.wf-bar{display:flex;align-items:center;gap:7px;padding:9px 15px;background:#17160f;border-bottom:1px solid var(--line)}
.wf-bar i{width:9px;height:9px;border-radius:50%;background:#3a382f;flex:0 0 auto}
.wf-url{font-family:var(--count);font-weight:500;font-size:var(--fs-meta);color:var(--dim);margin-left:12px;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-year{margin-left:auto;font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.12em;padding:3px 10px;
  border-radius:3px;white-space:nowrap;flex:0 0 auto}
.wf-year.now{background:var(--tung);color:var(--black);font-weight:600}
.wf-year.then{color:var(--dim);border:1px solid var(--line)}
.webframe img{width:100%;height:auto;display:block}
.webframe:not(.objframe) img{aspect-ratio:16/10;object-fit:cover;object-position:top center}
.reveal-full .webframe{flex:0 0 100%}
.reveal-cta{position:absolute;top:48px;right:16px;z-index:6;font-family:var(--count);font-weight:500;font-size:var(--fs-meta);letter-spacing:.1em;text-transform:uppercase;padding:9px 15px;color:var(--voice);background:rgba(11,11,10,.74);border:1px solid rgba(232,227,215,.28);border-radius:3px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);text-decoration:none;transition:background .2s,border-color .2s,color .2s}
/*u*/.reveal-cta:hover{background:var(--tung);border-color:var(--tung);color:var(--black)}
@media(max-width:600px){.reveal-cta{top:42px;right:10px;font-size:var(--fs-label);padding:7px 11px}}
.reveal-cue{display:block;font-family:var(--count);font-weight:500;font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase;
  color:var(--fig);margin-top:9px}
.objframe{position:relative;background:radial-gradient(120% 100% at 50% 0%, #1a1912, #0b0a06)}
.wf-year.obj{position:absolute;top:12px;right:12px;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.55)}
@media(max-width:700px){.webframe{flex-basis:90%}}

/* score plates — before/after technical metrics */
.plates{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-top:2px solid var(--assay);margin-top:22px}
.plate{background:var(--seal);padding:26px 22px 28px}
.pv{display:block;font-family:var(--count);font-weight:500;font-size:clamp(24px,3.2vw,42px);line-height:1;
  letter-spacing:-.02em;white-space:nowrap}
.pv .was{color:var(--dim)}
.pv i{color:var(--meta);font-style:normal;margin:0 .26em;font-size:.72em;vertical-align:middle}
.pv .now{color:var(--fig)}
.plate .pl{display:block;font-family:var(--count);font-weight:500;font-size:var(--fs-meta);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:12px}
@media(max-width:720px){.plates{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.plates{grid-template-columns:1fr}}
/* PageSpeed-style dials */
.dials{display:flex;gap:clamp(14px,2.6vw,40px);flex-wrap:wrap;margin-top:24px;align-items:flex-start}
.dial{width:clamp(104px,14.5vw,148px);text-align:center}
.dial-ring{position:relative;width:100%}
.dial-ring svg{width:100%;height:auto;display:block;transform:rotate(-90deg)}
.dial-track{fill:none;stroke:var(--line);stroke-width:7}
.dial-arc{fill:none;stroke-width:7;stroke-linecap:round;transition:stroke .45s ease}
.dial.c-green .dial-arc{stroke:#3a9d6e}
.dial.c-amber .dial-arc{stroke:var(--assay)}
.dial.c-red .dial-arc{stroke:var(--red)}
.dial-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:clamp(30px,4.4vw,46px);color:var(--voice)}
.dial-label{display:block;font-family:var(--count);font-weight:500;font-size:var(--fs-meta);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.dial-was{display:block;font-family:var(--count);font-weight:500;font-size:var(--fs-meta);color:var(--dim);margin-top:3px}
/* hero stat plate (case-study video hero) */
.hero-stat{position:absolute;right:var(--pad);bottom:clamp(40px,7vh,84px);z-index:4;
  display:inline-flex;align-items:baseline;gap:.28em;font-family:var(--count);
  border:1px solid rgba(232,227,215,.22);background:rgba(11,11,10,.42);padding:11px 18px;border-radius:0;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
@media(max-width:760px){.hero-stat{right:auto;left:var(--pad);bottom:auto;top:clamp(58px,11vh,94px)}}
.hero-stat .was{color:var(--muted);font-size:clamp(19px,2.3vw,28px);font-weight:500}
.hero-stat i{color:var(--meta);font-style:normal;font-size:.78em}
.hero-stat .now{color:var(--fig);font-size:clamp(23px,2.9vw,36px);font-weight:700}
.hero-stat em{font-style:normal;font-weight:500;font-size:var(--fs-meta);letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  margin-left:9px;align-self:center}

/* two-column editorial */
.split{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,4vw,56px);align-items:start}
.quote{font-family:var(--prose);font-size:var(--fs-sub);line-height:var(--lh-sub);color:var(--muted);
  border-left:2px solid var(--assay);padding-left:16px;margin-top:22px}
.quote cite{display:block;font-style:normal;font-weight:500;font-size:var(--fs-meta);color:var(--meta);margin-top:8px;font-family:var(--count);letter-spacing:.08em}

/* build grid (exposed grid register) */
.build-head{font-size:calc(clamp(30px,5.4vw,70px)*var(--hdr,1));line-height:.8;letter-spacing:-.05em}
.build-head .bl{display:block}
.build-head .ans{color:var(--fig);margin-top:.34em}
/* line-by-line build reveal (gated on .js so no-JS shows everything) */
.js .build-head .bl{opacity:0;transform:translateY(22px);
  transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.15,1)}
.build-head.in .bl{opacity:1;transform:none}
.build-head.in .bl:nth-child(2){transition-delay:.09s}
.build-head.in .bl:nth-child(3){transition-delay:.18s}
.build-head.in .bl:nth-child(4){transition-delay:.27s}
.build-head.in .bl:nth-child(5){transition-delay:.36s}
.build-head.in .ans{transition-delay:.54s}
@media(prefers-reduced-motion:reduce){
  .js .build-head .bl{opacity:1;transform:none;transition:none}
}
/* build-grid cells slide in from the left, in order */
.build-grid.js-reveal{overflow:hidden}
.js .build-grid.js-reveal .build-cell{opacity:0;transform:translateX(-36px);
  transition:opacity .5s ease,transform .58s cubic-bezier(.2,.7,.15,1),background .2s ease}
.build-grid.js-reveal.in .build-cell{opacity:1;transform:none}
.build-grid.js-reveal.in .build-cell:nth-child(2){transition-delay:.08s}
.build-grid.js-reveal.in .build-cell:nth-child(3){transition-delay:.16s}
.build-grid.js-reveal.in .build-cell:nth-child(4){transition-delay:.24s}
.build-grid.js-reveal.in .build-cell:nth-child(5){transition-delay:.32s}
.build-grid.js-reveal.in .build-cell:nth-child(6){transition-delay:.40s}
@media(prefers-reduced-motion:reduce){
  .js .build-grid.js-reveal .build-cell{opacity:1;transform:none;transition:none}
}
.build-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:36px}
.build-cell{background:var(--seal);padding:26px 24px 30px;min-height:150px;display:block;transition:background .2s ease}
a.build-cell:hover{background:rgba(13,13,11,.05)}
.build-cell .n{display:block;font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--meta)}
.build-cell .t{display:block;font-family:var(--disp);font-weight:700;font-size:23px;text-transform:uppercase;color:var(--voice);margin-top:14px;letter-spacing:0}
.build-cell .d{display:block;font-family:var(--text);font-weight:500;font-size:var(--fs-body);color:var(--dim);margin-top:8px;line-height:var(--lh-count)}

/* case teaser */
.teaser{position:relative;overflow:hidden;aspect-ratio:2.39/1;min-height:320px;
  border:1px solid var(--line);display:flex;align-items:flex-end;padding:var(--pad)}
.teaser-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.teaser .still{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(11,11,10,.12) 0%,rgba(11,11,10,.46) 50%,rgba(11,11,10,.9) 100%),
  linear-gradient(90deg,rgba(11,11,10,.5) 0%,transparent 58%)}
.teaser-body{position:relative;z-index:2}
.teaser .fig{font-family:var(--count);font-weight:500;font-size:var(--fs-meta);letter-spacing:.14em;color:var(--fig);text-transform:uppercase}
.teaser-body p{font-family:var(--text);font-weight:500;font-size:var(--fs-sub);line-height:var(--lh-count);color:var(--voice);margin-top:10px;max-width:50ch}

/* pricing strip */
.price-strip{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(16px,3vw,40px)}
.price-strip .nums{font-family:var(--disp);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(40px,7vw,96px);color:var(--fig);line-height:.9}
.price-strip p{font-family:var(--text);font-weight:500;font-size:var(--fs-sub);line-height:var(--lh-count);color:var(--muted)}

/* closing band */
.closing{position:sticky;top:0;z-index:1;height:100vh;background:var(--film);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:clamp(40px,7vh,88px) 0 calc(var(--fh,340px) + clamp(14px,2.5vh,32px))}
/* padding-inline so the two-line stack can never touch the viewport edge (was padding:0,
   which let a one-line render bleed off both sides on the homepage). No change at 1440. */
.closing>.container{width:100%;max-width:none;padding-inline:var(--pad)}
/* CANONICAL CLOSER (Paul, 4 Aug 2026). Two lines are locked by a <br> in the markup, so the
   title can sit at the s5 header lock (-0.05em / 0.8) without risking a one-line overflow.
   The pencil shrinks to .66em so the tighter leading has room. */
.closing .title{font-size:clamp(56px,min(12vw,20vh),190px);line-height:.8;letter-spacing:-.05em;margin:0}
.closing .title .tstop{color:var(--fig)}
.close-pencil{height:.66em;width:auto;display:inline-block;vertical-align:baseline;margin-left:.08em}
.closing .btn{position:relative;overflow:hidden;z-index:0;transition:color .28s ease;border:1px solid var(--tung);color:var(--fig);background:transparent;font-family:var(--count);font-weight:500;font-size:var(--fs-cta);text-transform:uppercase;letter-spacing:.16em;padding:14px 28px;border-radius:0;margin-top:36px;gap:9px;display:inline-flex;align-items:center}

.closing.js-anim .title .tc{opacity:0;transition:opacity .07s linear}
.closing.js-anim .title .tc.on{opacity:1}
.close-caret{display:inline-block;width:.055em;height:.72em;background:var(--tung);margin-left:.02em;vertical-align:-.02em}
.close-caret.blink{animation:ccar .56s steps(1) 1}   /* one count sooner (Paul, 4 Aug 2026) */
@keyframes ccar{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.closing.js-anim .tstop{opacity:0;transform:translateY(.05em) scale(.4);transform-origin:center bottom;transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.7,.5,1)}
.closing.js-anim.typed .tstop{opacity:1;transform:none}
.closing.js-anim .btn{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .7s cubic-bezier(.22,.61,.36,1),color .28s ease}
.closing.js-anim.typed .btn{opacity:1;transform:none;transition-delay:.12s}
@media(prefers-reduced-motion:reduce){.closing .title .tc{opacity:1!important}.closing .tstop,.closing .btn{opacity:1!important;transform:none!important}}
@media(max-width:860px){.closing .title{font-size:clamp(34px,10.5vw,110px)}.closing{position:relative;height:auto;padding-bottom:clamp(60px,12vh,110px)}}


/* hero title typewriter (Paul, 4 Aug 2026: every hero types in, same beat as the closer) */
.js-type .tc{opacity:0;transition:opacity .07s linear}
.js-type .tc.on{opacity:1}
.hero-caret{display:inline-block;width:.055em;height:.72em;background:var(--tung);
  margin-left:.02em;vertical-align:-.02em}
.hero-caret.blink{animation:ccar .56s steps(1) 1}
.hero-sub.pending{opacity:0;transition:opacity .8s ease}
.hero-sub.pending.typed,.lhero-sub.pending.typed{opacity:1}
@media(prefers-reduced-motion:reduce){.js-type .tc{opacity:1!important}
  .hero-sub.pending,.lhero-sub.pending{opacity:1!important}}

/* ---- Page transition (Paul, 4 Aug 2026). A True Black title card carrying the YKC mark.
   Painted as a pseudo-element on <html>, armed by an inline snippet in the head, so it
   covers the very first frame: no flash of the incoming page before it resolves.
   Transitions only, no keyframes: an animation with fill-mode both fought the lift and
   read as a second flash. Never armed under prefers-reduced-motion. ---- */
html.xc-armed::before{content:"";position:fixed;inset:0;z-index:9000;background:#0B0B0A;
  pointer-events:none;transform:translateY(0);transition:transform .86s cubic-bezier(.76,0,.24,1)}
html.xc-armed::after{content:"";position:fixed;z-index:9001;pointer-events:none;
  left:50%;top:50%;width:clamp(64px,7.5vw,112px);aspect-ratio:1/1;
  background:url("assets/YKC-icon.svg") center/contain no-repeat;
  opacity:0;transform:translate(-50%,-50%) scale(.78);
  /* gradual arrival, with a back-out curve so the mark lands with some weight */
  transition:opacity .58s cubic-bezier(.32,0,.24,1),transform .82s cubic-bezier(.34,1.44,.5,1)}
/* the mark settles once, on the frame after arming */
html.xc-in::after{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* the lift: mark goes first, card clears the frame upward */
html.xc-lift::before{transform:translateY(-100%)}
/* and leaves without hurry: it rises and settles back a touch as the card clears */
html.xc-lift::after{opacity:0;transform:translate(-50%,-72%) scale(.94);
  transition:opacity .5s cubic-bezier(.45,0,.55,1),transform .78s cubic-bezier(.62,0,.24,1)}
/* the exit: the card drops over the outgoing page */
html.xc-exit::before{transform:translateY(-100%);transition:none}
html.xc-exit.xc-drop::before{transform:translateY(0);transition:transform .26s cubic-bezier(.66,0,.2,1)}
html.xc-nomark::after{display:none}
@media(prefers-reduced-motion:reduce){html.xc-armed::before,html.xc-armed::after{display:none}}

/* ---- Footer (canonical). Second paper, not a second black band: the closing band is
   each page's one further black band and two in a row is banned (v6 s6). ---- */
/* z-60: sections are auto-numbered by JS and the closing band can outrank a low value,
   which buries the footer on the long case pages (CLAUDE.md trap 7). */
/* the footer is always paper, even when it sits inside a dark wrapper like .tail */
.site-foot{--voice:var(--ink);--meta:var(--slate);--fig:var(--ink);--muted:var(--ink);--dim:var(--slate);
  --line:rgba(13,13,11,.16);--line-2:rgba(13,13,11,.26)}
.site-foot{position:relative;z-index:60;background:var(--seal-mid);color:var(--ink);padding:clamp(44px,6.5vh,80px) clamp(38px,4.6vw,66px) 38px;border-top:1px solid rgba(140,130,101,.55)}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,4vw,60px);max-width:1360px;margin:0 auto}
.foot-cols h4{font-family:var(--text);font-weight:600;text-transform:uppercase;font-size:15px;line-height:var(--lh-count);letter-spacing:.02em;margin-bottom:14px;color:var(--ink);display:flex;align-items:center;gap:9px;min-height:26px}
.fl-icon{height:26px;width:auto;flex:0 0 auto}
/* Paul, 4 Aug 2026: every column body in Big Shoulders at one size (14px);
   columns 1 and 2 set all caps. Headings keep their own treatment. */
.foot-cols a{display:block;font-family:var(--count);font-weight:500;font-size:14px;line-height:var(--lh-count);letter-spacing:.06em;color:var(--slate);padding:4px 0}
.foot-cols>div:nth-child(1) a,.foot-cols>div:nth-child(2) a{text-transform:uppercase;letter-spacing:.1em}
.foot-cols a:hover{color:var(--ink)}
.foot-cols p{font-family:var(--count);font-weight:500;font-size:14px;color:var(--muted);line-height:var(--lh-count)}
/* Paul, 4 Aug 2026: the footer mark goes home, and the socials sit with the contact column.
   The heading link has to opt out of the `.foot-cols a` body treatment above it. */
.foot-cols h4 a.fl-home{display:inline-flex;align-items:center;gap:9px;font:inherit;letter-spacing:inherit;
  text-transform:inherit;color:inherit;padding:0;transition:opacity .2s ease}
.site-foot .foot-cols h4 a.fl-home:hover{opacity:.68;color:inherit}
/* Paul, 5 Aug 2026: no keyline box on the social marks. The mark stands on its own and
   colours to Assay on rollover, which is gold's paper register. Box kept for the tap target. */
.foot-social{display:flex;gap:4px;margin-top:12px;margin-left:-9px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;
  border:0;color:var(--slate);transition:color .22s ease,transform .22s cubic-bezier(.22,.61,.36,1)}
.foot-social svg{width:18px;height:18px;fill:currentColor;display:block}
.site-foot .foot-social a:hover{background:none;color:var(--assay);transform:translateY(-1px)}
.foot-base{max-width:1360px;margin:clamp(16px,2.4vh,26px) auto 0;padding-top:20px;border-top:1px solid rgba(13,13,11,.14);display:flex;justify-content:space-between;font-family:var(--count);font-weight:500;font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);flex-wrap:wrap;gap:12px}
@media(max-width:820px){.foot-cols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.foot-cols{grid-template-columns:1fr;gap:26px}.foot-base{font-size:11.5px}}

/* ---- Responsive ---- */

@media(max-width:760px){
  .nav{display:none}
  .nav-toggle{display:block}
  /* .hero-media{aspect-ratio:16/10;min-height:70vh} retired 10 Aug 2026: the base rule
     now sets an explicit height, which beats aspect-ratio, and 70vh no longer binds.
     Left as a comment rather than silently dropped because this is the value that made
     the phone hero 70% of the viewport while desktop ran 78 to 85%. */
  .hero-ctas{position:static;display:block}
  .split{grid-template-columns:1fr;gap:28px}
  .build-grid{grid-template-columns:1fr}
  .price-strip{flex-direction:column;align-items:flex-start;gap:8px}
}
/* mobile nav overlay */
.mobile-nav{position:fixed;inset:0;background:var(--black);z-index:60;display:none;
  flex-direction:column;justify-content:center;gap:8px;padding:var(--pad)}
.mobile-nav.open{display:flex}
.mobile-nav a{font-family:var(--disp);font-weight:700;font-size:clamp(30px,9vw,52px);
  text-transform:uppercase;color:var(--voice);letter-spacing:-.01em}
.mobile-nav .close{position:absolute;top:20px;right:var(--pad);font-family:var(--count);
  font-weight:500;font-size:var(--fs-meta);letter-spacing:.14em;color:var(--voice);background:none;border:0;cursor:pointer}

/* viewfinder reticle cursor (desktop, fine pointer only) — site-wide */
@media (pointer:fine){
#rtRing,#rtCore{position:fixed;left:0;top:0;pointer-events:none;opacity:0;transform:translate3d(-100px,-100px,0);will-change:transform;z-index:2147483000;mix-blend-mode:difference}
html.rt-on #rtRing,html.rt-on #rtCore{opacity:1}
html.rt-on,html.rt-on *{cursor:none!important}
#rtRing{width:26px;height:26px;margin:-13px 0 0 -13px;border:1.5px solid #fff;border-radius:50%;transition:width .2s ease,height .2s ease,margin .2s ease,border-color .2s ease,opacity .2s ease}
#rtCore{width:16px;height:16px;margin:-8px 0 0 -8px;transition:opacity .2s ease}
#rtCore i{position:absolute;background:#fff}
#rtCore .rt-y{left:50%;top:0;width:1.5px;height:100%;margin-left:-.75px;opacity:0;transition:opacity .18s ease}
#rtCore .rt-x{top:50%;left:0;height:1.5px;width:100%;margin-top:-.75px;opacity:0;transition:opacity .18s ease}
#rtCore .rt-dot{left:50%;top:50%;width:2.6px;height:2.6px;border-radius:50%;margin:-1.3px 0 0 -1.3px}
html.rt-lock #rtRing{width:40px;height:40px;margin:-20px 0 0 -20px}
html.rt-lock #rtCore .rt-x,html.rt-lock #rtCore .rt-y{opacity:1}
html.rt-down #rtRing{width:22px;height:22px;margin:-11px 0 0 -11px}
@media (prefers-reduced-motion:reduce){#rtRing{transition:opacity .2s ease}}
}


/* ===== type-led ledger hero for service pages ===== */
/* ================================================================
   Ledger hero — type-led, proof-as-hero, no image.  Scope: .lhero
   Reuses from styles.css: tokens, .title, .grain, .btn (unchanged).
   64px in the min-height calc = .site-head height.
   ================================================================ */
.lhero{position:relative;overflow:hidden;background:var(--black);border-bottom:1px solid var(--line)}

/* accounting-paper ruling fills the dark space, masked soft top and bottom */
.lhero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(to bottom,
    transparent 0,transparent 53px,
    rgba(140,130,101,.055) 53px,rgba(140,130,101,.055) 54px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}

.lhero-inner{position:relative;z-index:3;max-width:var(--container);margin:0 auto;
  padding-inline:var(--pad);padding-block:clamp(22px,4vh,40px);
  min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);min-height:calc(var(--vph,100svh) - 64px);
  display:flex;flex-direction:column;gap:clamp(20px,3.4vh,38px)}

/* top furniture */
.lhero-top{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--count);font-weight:500;font-size:var(--fs-meta);letter-spacing:.18em;color:var(--ash)}
.lhero-rec{display:inline-flex;align-items:center;gap:8px}
.lhero-rec i{width:9px;height:9px;border-radius:50%;background:var(--red);display:inline-block}
@media(prefers-reduced-motion:no-preference){.lhero-rec i{animation:lhero-blink 1.6s steps(1) infinite}}
@keyframes lhero-blink{50%{opacity:.15}}
.lhero-tc{letter-spacing:.1em}

/* document slug */
.lhero-slug{display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--count);
  font-weight:500;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--meta);
  padding-bottom:clamp(4px,1vh,10px);border-bottom:1px solid var(--line)}

/* core: title plate + ledger, optically centered in the leftover space */
.lhero-core{flex:1;display:grid;align-content:center;gap:clamp(30px,5vh,58px)}
@media(min-width:920px){.lhero-core{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center;column-gap:clamp(40px,5vw,84px)}}
.lhero-title{font-size:calc(clamp(44px,7vw,96px)*var(--hdr,1));line-height:.85;max-width:14ch;text-wrap:balance}
.lhero-sub{margin-top:clamp(16px,2.2vh,24px);font-family:var(--count);font-weight:500;
  font-size:var(--fs-herosub);line-height:var(--lh-count);letter-spacing:.14em;text-transform:uppercase;
  color:var(--voice);max-width:44ch}
.lhero-head .btn{margin-top:clamp(22px,3vh,34px)}

/* the ledger (proof-as-hero) */
.lhero-ledger{border-top:2px solid var(--tung)}
.ll-head{display:flex;justify-content:space-between;gap:16px;font-family:var(--count);
  font-weight:500;font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--meta);
  padding:12px 0;border-bottom:1px solid var(--line)}
.ll-row{display:flex;align-items:baseline;gap:clamp(10px,1.4vw,16px);
  padding:clamp(15px,2.2vh,22px) 0;border-bottom:1px dashed var(--line-2)}
.ll-no{flex:0 0 auto;width:2.2ch;font-family:var(--count);font-weight:500;font-size:var(--fs-meta);
  color:var(--dim);}
.ll-lblwrap{display:flex;flex-direction:column;gap:3px;min-width:0}
.ll-lbl{font-family:var(--text);font-weight:500;font-size:var(--fs-body);color:var(--voice);line-height:var(--lh-count)}
.ll-sub{font-family:var(--text);font-weight:500;font-size:var(--fs-meta);color:var(--dim);line-height:var(--lh-count)}
.ll-dot{flex:1 1 auto;border-bottom:1px dotted var(--assay);opacity:.45;transform:translateY(-.34em)}
.ll-val{flex:0 0 auto;font-family:var(--disp);font-weight:700;font-size:clamp(30px,3.6vw,48px);
  line-height:.9;color:var(--fig);letter-spacing:-.01em;
  white-space:nowrap}
.ll-net{display:flex;align-items:baseline;gap:14px;padding:clamp(13px,1.8vh,18px) 0;border-bottom:1px solid var(--line)}
.ll-net-lbl{font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--fig)}
.ll-net-note{font-family:var(--text);font-weight:500;font-size:var(--fs-body);line-height:var(--lh-count);color:var(--muted)}
.ll-foot{margin-top:12px;font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}

/* bottom furniture */
.lhero-bottom{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-top:clamp(14px,2vh,20px);border-top:1px solid var(--line);
  font-family:var(--count);font-weight:500;font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase}
.lhero-filed{color:var(--meta)}
.lhero-master{color:var(--fig);letter-spacing:.2em}

/* left-gutter serial (decorative, wide screens only) */
.lhero-spine{position:absolute;left:12px;top:50%;z-index:2;transform:translateY(-50%);
  writing-mode:vertical-rl;font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.32em;
  text-transform:uppercase;color:var(--meta);opacity:.5;white-space:nowrap;pointer-events:none}
@media(max-width:1340px){.lhero-spine{display:none}}

/* mobile: stack the figure under its label */
@media(max-width:560px){
  .ll-row{flex-wrap:wrap}
  .ll-dot{display:none}
  .ll-lblwrap{flex:1 1 auto}
  .ll-val{flex-basis:100%;margin-top:6px;font-size:clamp(30px,10vw,44px)}
}
/* crown rule (v6 s6): on the dark hero ledger the rows speak Bone; the net line and gauge keep the one gold moment */
.lhero .ll-val{color:var(--bone)}

/* grafted ceiling gauge: 350 (48.28%) to 725, drawn not animated */
.ll-gauge{position:relative;height:3px;margin:7px 0 clamp(13px,2vh,20px) calc(2.2ch + clamp(10px,1.4vw,16px));background:linear-gradient(90deg,rgba(232,227,215,.20) 0 48.28%,var(--tung) 48.28% 100%)}
.ll-gauge-tick{position:absolute;left:48.28%;top:-3px;bottom:-3px;width:1px;background:var(--bone)}
@media(max-width:560px){.ll-gauge{margin-left:0}}

/* problem split: copy beside the search graph */
.prob-split{display:grid;gap:clamp(26px,4vw,60px);align-items:center}
@media(min-width:900px){.prob-split{grid-template-columns:.82fr 1.18fr}}
.prob-graph .ba{margin:0}
.prob-graph .ba-chart{max-height:none;width:100%;height:auto}
/* gold highlight variant of the search graph */
.ba--gold .ba-line{stroke:var(--fig)}
.ba--gold .ba-pts circle,.ba--gold .ba-now{fill:var(--fig)}
.ba--gold .ba-nowlabel{fill:var(--fig)}
.ba--gold .ba-eyebrow{color:var(--fig)}

/* ledger on a pale band: dark figures/labels for contrast, gold rule kept as accent */
.band.lt .lhero-ledger{border-top-color:#0D0D0B}
.band.lt .ll-head{color:var(--slate)}
.band.lt .ll-val{color:var(--fig)}
.band.lt .ll-no{color:var(--slate)}
.band.lt .ll-dot{border-bottom-color:rgba(13,13,11,.30)}
.band.lt .ll-foot{color:var(--slate)}
.band.lt .ll-foot a{color:var(--ink)}

/* graph on a pale band: reef climb line + dots, Signal Red value figures (echoes "A CLIMB."), black ceiling figure */
.band.lt .ba--gold .ba-line{stroke:var(--fig)}
.band.lt .ba--gold .ba-pts circle{fill:var(--fig)}
.band.lt .ba--gold .ba-pts text{fill:var(--fig)}
.band.lt .ba--gold .ba-now{fill:var(--fig);stroke:#EAE4D4;stroke-width:2}
.band.lt .ba--gold .ba-now-val{fill:var(--fig)}
.band.lt .ba--gold .ba-nowlabel{fill:#8C8265}
.band.lt .ba--gold .ba-eyebrow{color:var(--slate)}
.band.lt .ba-ceiling{stroke:rgba(13,13,11,.42)}
.band.lt .ba-ceil-val{fill:var(--ink)}
.band.lt .ba-ceil-sub,.band.lt .ba-nowlabel{opacity:1}

/* FAQ — dossier accordion, answers hidden until opened */
.faq{margin-top:clamp(16px,2.4vh,26px);border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:clamp(14px,2vw,30px);padding:clamp(19px,2.5vh,28px) 0}
.faq-q::-webkit-details-marker{display:none}
.faq-n{flex:0 0 auto;width:var(--faq-num,26px);font-family:var(--count);font-weight:500;font-size:var(--fs-meta);letter-spacing:.08em;color:var(--meta)}
.faq-qt{flex:1;font-family:var(--prose);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--voice);transition:color .2s}
.faq-q:hover .faq-qt,.faq-item[open] .faq-qt{color:var(--fig)}
.faq-toggle{flex:0 0 auto;position:relative;width:15px;height:15px;margin-top:.4em}
.faq-toggle::before,.faq-toggle::after{content:"";position:absolute;background:var(--assay);transition:transform .34s cubic-bezier(.22,.61,.36,1),opacity .3s}
.faq-toggle::before{left:0;right:0;top:50%;height:1.6px;margin-top:-.8px}
.faq-toggle::after{top:0;bottom:0;left:50%;width:1.6px;margin-left:-.8px}
.faq-item[open] .faq-toggle::before{transform:rotate(180deg)}
.faq-item[open] .faq-toggle::after{opacity:0;transform:scaleY(0)}
.faq-a{padding:0 0 clamp(20px,2.6vh,28px) calc(2.4ch + clamp(14px,2vw,30px));max-width:70ch}
.faq-a .body{color:var(--dim)}
.faq-count{color:var(--meta);letter-spacing:.14em}
@media(max-width:600px){.faq-a{padding-left:0}}
@media(prefers-reduced-motion:reduce){.faq-toggle::before,.faq-toggle::after{transition:none}}

/* light band (cream) flip for standard pages — case studies add their own sticky behaviour inline */
.band.lt{background:var(--seal-mid);color:#0D0D0B;--bone:#0D0D0B;--muted:var(--ink);--dim:var(--slate);--line:rgba(13,13,11,.16);--line-2:rgba(13,13,11,.26)}
.band.lt .h2,.band.lt .lede,.band.lt .body{color:#0D0D0B}
.band.lt .btn{border-color:#0D0D0B;color:#0D0D0B}

/* method + FAQ on cream (.band.lt) - accents legible + dossier page-breaks between stacked cream bands */
.band.lt .faq-toggle::before,.band.lt .faq-toggle::after{background:#8C8265}
.band.lt .faq-q:hover .faq-qt,.band.lt .faq-item[open] .faq-qt{color:#8C8265}
/* W6: Assay, not Tungsten. Tungsten on paper is banned for rules as well as text (v5 s4). */
.band.lt + .band.lt{border-top:1px solid rgba(140,130,101,.55)}

/* build ledger (How the Build Works) — Night Reef ground, foundation-up assembly */
.ble-split{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media(min-width:900px){.ble-split{grid-template-columns:.82fr 1.18fr}}
.ble-h{font-family:var(--banner-cond);font-weight:700;font-size:calc(clamp(38px,4.6vw,64px)*var(--hdr,1));line-height:1;letter-spacing:-.01em;text-transform:lowercase;margin:8px 0 16px;color:var(--voice)}
.ble-ledger{position:relative;border:1px solid rgba(140,130,101,.55);padding:0 clamp(15px,2vw,24px) clamp(15px,2vh,22px)}
.ble-ledger::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(140,130,101,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(140,130,101,.12) 1px,transparent 1px);background-size:34px 34px}
.ble-head,.ble-rows,.ble-foot{position:relative;z-index:1}
.ble-head{display:flex;justify-content:space-between;align-items:center;padding:13px 2px;border-bottom:1px solid rgba(140,130,101,.55);font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--meta)}
.ble-rec{display:inline-flex;align-items:center;gap:8px}
.ble-rec i{width:7px;height:7px;border-radius:50%;background:var(--red);display:inline-block}
.ble-row{display:grid;grid-template-columns:2.6ch auto 1fr auto;align-items:baseline;gap:clamp(10px,1.3vw,16px);padding:clamp(11px,1.7vh,17px) 2px;border-bottom:1px dashed rgba(140,130,101,.45)}
.ble-no{font-family:var(--count);font-weight:500;font-size:var(--fs-meta);color:var(--meta);}
.ble-lbl{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(17px,1.6vw,23px);letter-spacing:.012em;line-height:1;color:#0B0B0A}
.ble-dot{align-self:center;border-bottom:1px dotted rgba(140,130,101,.65)}
.ble-note{font-family:var(--text);font-weight:500;font-size:var(--fs-meta);color:var(--meta);text-align:right;line-height:1.25}
.ble-foot{margin-top:12px;font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--meta)}
.ble-ledger.ready .ble-row{opacity:0;transform:translateY(15px)}
.ble-ledger.ready.in .ble-row{animation:ble-rise .5s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc((var(--i) - 1) * .11s)}
@keyframes ble-rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ble-ledger.ready .ble-row{opacity:1!important;transform:none!important;animation:none!important}}
@media(max-width:560px){.ble-row{grid-template-columns:2.4ch 1fr;row-gap:2px}.ble-dot{display:none}.ble-note{grid-column:1 / -1;text-align:left;padding-left:calc(2.4ch + 10px)}}
/* second-paper ground for this section (Night Reef relief retired on the web, v6 s6) */

/* Paul, 6 Aug 2026: the ladder moves to the method page, where the six layers belong.
   The doc variant carries the full explanation on a second line, so the method keeps its
   substance instead of being reduced to a summary. Tourism drops the ladder entirely. */
.ble-ledger--doc .ble-row{grid-template-columns:2.8ch auto 1fr auto;row-gap:clamp(6px,.9vh,10px)}
.ble-ledger--doc .ble-ttl{font-family:var(--count);font-weight:500;font-size:var(--fs-meta);
  letter-spacing:.16em;text-transform:uppercase;color:var(--meta);text-align:right}
.ble-ledger--doc .ble-desc{grid-column:2 / -1;font-family:var(--prose);font-size:var(--fs-body);
  line-height:1.6;color:var(--muted);margin:0;max-width:62ch}
.ble-ledger--doc .ble-row--f .ble-desc{color:rgba(11,11,10,.72)}
.ble-ledger--doc .ble-row--f .ble-ttl{color:rgba(11,11,10,.6)}
@media(max-width:560px){.ble-ledger--doc .ble-row{grid-template-columns:2.6ch 1fr}
  .ble-ledger--doc .ble-ttl{grid-column:2;text-align:left}
  .ble-ledger--doc .ble-desc{grid-column:1 / -1;padding-left:calc(2.6ch + 10px)}}
.reefsec{background:var(--seal-mid);border-top:0}
.reefsec .eyebrow{color:var(--meta)}
.reefsec .ble-h{color:var(--voice)}
.reefsec .body{color:var(--muted)}
.reefsec .ble-ledger{border-color:rgba(140,130,101,.55)}
.reefsec .ble-ledger::before{background-image:linear-gradient(rgba(140,130,101,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(140,130,101,.12) 1px,transparent 1px)}
.reefsec .ble-head{border-bottom-color:rgba(140,130,101,.55);color:var(--meta)}
.reefsec .ble-row{border-bottom-color:rgba(140,130,101,.34)}
.reefsec .ble-no{color:var(--fig)}
.reefsec .ble-lbl{color:var(--voice)}
.reefsec .ble-dot{border-bottom-color:rgba(140,130,101,.5)}
.reefsec .ble-note{color:var(--dim)}
.reefsec .ble-foot{color:var(--meta)}
.reefsec .ble-row--f{background:var(--tung)}
.reefsec .ble-row--f .ble-lbl{color:var(--black)}
.reefsec .ble-row--f .ble-no{color:rgba(11,11,10,.58)}
.reefsec .ble-row--f .ble-note{color:rgba(11,11,10,.6)}
.reefsec .ble-row--f .ble-dot{border-bottom-color:rgba(11,11,10,.32)}

/* Brand Audit band (True Black) */
.aud-row{display:grid;gap:clamp(20px,3vw,48px);align-items:start;margin-top:8px}
@media(min-width:760px){.aud-row{grid-template-columns:auto 1fr}}
.aud-fig{font-family:var(--disp);font-weight:700;font-size:clamp(54px,8vw,104px);line-height:.82;letter-spacing:-.02em;white-space:nowrap}
.aud-note{font-family:var(--text);font-weight:500;font-size:var(--fs-body);line-height:var(--lh-count);margin-top:12px}
.aud-btn{margin-top:clamp(20px,3vh,28px)}
/* Paul, 6 Aug 2026: the audit band takes Night Reef, not True Black. It sat black
   directly above the black closer on every service page, which is the two-blacks-in-a-row
   breach, and Reef was specified as the ground that breaks up a page but had never painted. */
.audit-b{background:var(--reef);border-top:0}
.audit-b .eyebrow{color:var(--fig)}
.audit-b .aud-row{border-top:2px solid rgba(191,178,138,.4);padding-top:clamp(20px,3vh,28px)}
.audit-b .aud-fig{color:var(--fig)}
.audit-b .lede{color:var(--voice)}
.audit-b .aud-note{color:var(--meta)}
.audit-b .btn{border-color:var(--fig);color:var(--fig)}
/* Receipts ledger prints row by row (JS adds .ready then .in per row) */
.lhero-ledger.ready .ll-row{opacity:0;transform:translateY(-9px)}
.lhero-ledger.ready .ll-row.in{opacity:1;transform:none;transition:opacity .6s ease,transform .66s cubic-bezier(.22,.61,.36,1)}

/* hero letterbox bars removed — video fills, REC/timecode furniture stays (Paul 23 Jul) */
.hero-bars{display:none}

:root{--paper:var(--seal)}

:root{--film:#0B0B0A}  /* the closing band is True Black now (v6) */

/* work-page ledger on cream: dark figures, one sparing gold rule */
.band.lt .fig{color:var(--fig)}
.band.lt .score{border-top-color:#8C8265}


/* ---- Mobile: thumb-sized controls + small-type floor (audited at 390x844) ---- */
@media(max-width:768px){
  /* the menu control measured 36x16. thumbs, not cursors. */
  .nav-toggle{min-height:44px;min-width:44px;display:inline-flex;align-items:center;
    justify-content:flex-end;padding-block:12px}
  .mobile-nav a{min-height:48px;display:flex;align-items:center}
  /* ══ 44px, AND THIS ONE HAD A WITNESS ══════════════════════════════════
     Paul, 18 August 2026: "I just clicked on a link in the footer and it took 2
     taps." Every tap-target finding the verifier reports on this site is a
     footer link at 40px, and it has been carried as a known fault rather than
     fixed. A 40px row is under the 44px minimum, so a thumb landing a few
     pixels off hits nothing, and the reader reads that as a link needing two
     taps. It was never a hover problem, it was a miss.
     Full width as well as full height: the row is the target, not the word. */
  /* 38px, Paul's ruling 19 August 2026 (he asked for 30 percent off, which is
     31px, and took the middle when told 31 walks back into the mis-tap he
     reported). It is 6px under the 44px touch floor: a known, deliberate
     exception.
     This rule read 44 since 18 August and never once applied. Four live pages
     carry their own `.site-foot .foot-cols a{min-height:40px}` in a page-level
     block, and a page block loads after this sheet, so the sitewide value lost
     on every page that mattered. That is why verify kept reporting 40px tall
     against a stylesheet that plainly said 44. All five now say 38. */
  .site-foot .foot-cols a{min-height:38px;display:flex;align-items:center;width:100%}
  .btn,.closing .btn,.reveal-cta,.rgo,.nav-cta{min-height:44px;display:inline-flex;align-items:center}
  .brand{min-height:44px}
  /* nothing may exceed the viewport */
  img,video,iframe{max-width:100%}
  /* inline text links: a real thumb target without moving the type.
     stacked (br-separated) links get their own box, so hit areas cannot overlap. */
  a.tung{display:inline-block;padding-block:9px}
  .rv-src{padding-top:12px}   /* padding-top only: its underline must stay put */
  .ll-foot a,.score-src a,.ba-src a,.wh-foot a,figcaption a{display:inline-block;padding-block:9px}
}


/* ---- Large screens: the content scales up to fit the viewport (Paul, 2 Aug 2026).
   zoom sits on content wrappers only, so vh-panel geometry and the scroll-deck maths
   stay untouched: the wrapper lays out at width/zoom then magnifies to the same visual
   width with proportionally larger type, keeping the 1440 occupancy on big monitors.
   The bb-c board is a fitted 100vh composition, so it scales more gently. ---- */
@media(min-width:1600px){
  .band>.container,.lhero-inner,.dpanel>.container,.foot-cols,.foot-base{zoom:1.12;--hdr:.893}
  .bb-c .wrap{zoom:1.12}
  .bb-c .book{max-height:39vh}
}
@media(min-width:1900px){
  .band>.container,.lhero-inner,.dpanel>.container,.foot-cols,.foot-base{zoom:1.32;--hdr:.758}
  .bb-c .wrap{zoom:1.32}
  .bb-c .book{max-height:33vh}
}
@media(min-width:2200px){
  .band>.container,.lhero-inner,.dpanel>.container,.foot-cols,.foot-base{zoom:1.45;--hdr:.69}
  .bb-c .wrap{zoom:1.45}
  .bb-c .book{max-height:30vh}
}
@media(min-width:2560px){
  .band>.container,.lhero-inner,.dpanel>.container,.foot-cols,.foot-base{zoom:1.6;--hdr:.625}
  .bb-c .wrap{zoom:1.6}
  .bb-c .book{max-height:27vh}
}

/* ---- Scroll build: the page assembles as the reader descends (CLAUDE.md s3).
   ykc-reveal.js tags elements .rvl with a per-band stagger; reduced-motion never sees it. ---- */
.js .rvl{opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .72s cubic-bezier(.2,.7,.15,1)}
.js .rvl.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rvl{opacity:1;transform:none;transition:none}}

@media(min-width:2880px){
  .band>.container,.lhero-inner,.dpanel>.container,.foot-cols,.foot-base{zoom:1.8;--hdr:.556}
  .bb-c .wrap{zoom:1.8}
  .bb-c .book{max-height:24vh}
}
@media(min-width:3200px){
  .band>.container,.lhero-inner,.dpanel>.container,.foot-cols,.foot-base{zoom:2;--hdr:.5}
  .bb-c .wrap{zoom:2}
  .bb-c .book{max-height:22vh}
}

/* CTA hover, the last word in the cascade (Paul, 4 Aug 2026). Doubled class selectors so
   this outranks ground overrides like `.band.lt .btn{border-color:#0D0D0B}`, which were
   leaving a dark keyline around the gold fill on work.html and the homepage pricing CTA. */
.btn.btn:hover,.cta.cta:hover,.nav-cta.nav-cta:hover,.mnav-cta.mnav-cta:hover,
.close-cta.close-cta:hover,.prc-cta.prc-cta:hover,.closing .btn.btn:hover,
.audit-b .btn.btn:hover,.band.lt .btn.btn:hover{border-color:var(--tung);color:var(--black)}

/* <button class="btn"> otherwise keeps the user-agent grey, which sits over the gold sweep */
button.btn,button.cta,button.nav-cta{background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
button.btn.btn:hover,button.cta.cta:hover{background:var(--tung);border-color:var(--tung);color:var(--black)}
.rgo.rgo:hover{background:var(--tung);border-color:var(--tung);color:var(--black)}

/* Paul, 5 Aug 2026: FAQ rows as blocks. One accordion for the whole site: a subtle
   block lifts on hover, holds while open, and the answer expands on a curve. */

/* Paul, 6 Aug 2026: the career as tight columns, not rows. Company sets as a header,
   place and role sit under it as metadata, and the brands run as labels in the same
   device as the scope tags on work.html. text-transform:none on .cv-co is deliberate:
   the H3 lowercase lock would mangle proper nouns (Droga5, VML, TRESemme). */
.cv{margin-top:clamp(28px,3.6vh,46px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,2.6vw,44px) clamp(22px,2.4vw,40px)}
.cv-col{border-top:1px solid var(--line);padding-top:clamp(14px,1.8vh,20px)}
.cv-co{font-family:var(--banner-cond);font-weight:900;text-transform:none;
  font-size:clamp(23px,1.9vw,31px);line-height:.92;letter-spacing:-.02em;color:var(--voice);margin:0}
.cv-meta{display:block;margin-top:clamp(6px,.8vh,9px);font-family:var(--count);font-weight:500;
  font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;color:var(--meta)}
.cv-role{display:block;margin-top:3px;font-family:var(--prose);font-style:italic;
  font-size:var(--fs-meta);letter-spacing:0;text-transform:none;color:var(--dim)}
.cv-tags{display:flex;flex-wrap:wrap;gap:5px;list-style:none;margin:clamp(11px,1.5vh,15px) 0 0;padding:0}
.cv-tags li{font-family:var(--count);font-weight:500;font-size:var(--fs-label);letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);padding:4px 8px;
  white-space:nowrap;line-height:1.1}
.cv-src{margin-top:clamp(22px,2.8vh,32px);font-family:var(--count);font-weight:500;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.cv-src a{color:var(--dim);text-decoration:none;border-bottom:1px solid rgba(140,130,101,.5);
  padding-bottom:1px;transition:color .2s ease,border-color .2s ease}
.cv-src a:hover{color:var(--fig);border-color:var(--fig)}
@media(max-width:900px){.cv{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cv{grid-template-columns:1fr}.cv-co{font-size:clamp(22px,6.4vw,28px)}}

/* the statement, in the register of the Wildside review quote */
.mnf-lead{font-family:var(--prose);font-weight:400;font-size:var(--fs-pull);line-height:1.24;
  letter-spacing:-.01em;color:var(--voice);max-width:30ch;margin:0}
.mnf-body{font-family:var(--prose);font-size:var(--fs-body);line-height:1.62;color:var(--muted);
  max-width:60ch;margin-top:clamp(18px,2.4vh,26px)}
.mnf-close{font-family:var(--count);font-weight:500;font-size:var(--fs-cta);letter-spacing:.16em;
  text-transform:uppercase;color:var(--fig);margin-top:clamp(20px,2.6vh,28px)}

/* how the work runs: three phases as structure, not a sentence */
.proc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px);
  margin-top:clamp(26px,3.2vh,42px)}
.proc-col{border-top:2px solid var(--line-2);padding-top:clamp(15px,2vh,21px)}
.proc-n{font-family:var(--count);font-weight:500;font-size:var(--fs-meta);letter-spacing:.2em;color:var(--meta)}
.proc-t{display:block;margin-top:clamp(8px,1.1vh,12px);font-family:var(--banner-cond);font-weight:900;
  text-transform:uppercase;font-size:clamp(24px,2.2vw,36px);line-height:.9;letter-spacing:-.02em;color:var(--voice)}
.proc-d{margin-top:clamp(9px,1.2vh,13px);font-family:var(--prose);font-size:var(--fs-body);
  line-height:1.62;color:var(--muted)}
.proc-btns{display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,16px);margin-top:clamp(24px,3.2vh,40px)}
@media(max-width:760px){.proc{grid-template-columns:1fr;gap:clamp(18px,2.4vh,26px)}}
.faq{border-top:0}
.faq-item{border-bottom:1px solid var(--line);transition:background .28s ease}
.faq-q{padding-inline:clamp(14px,1.6vw,22px)}
/* the answer sets under the question, not under the number. The column is a px
   token because 2.4ch differs between Big Shoulders (the number) and Meno (the answer). */
.faq{--faq-num:26px}
.faq-a{padding-right:clamp(14px,1.6vw,22px);
  padding-left:calc(clamp(14px,1.6vw,22px) + var(--faq-num) + clamp(14px,2vw,30px))}
.faq-item:hover{background:rgba(13,13,11,.045)}
.faq-item[open]{background:rgba(13,13,11,.072)}
.band:not(.lt) .faq-item:hover{background:rgba(232,227,215,.06)}
.band:not(.lt) .faq-item[open]{background:rgba(232,227,215,.09)}

/* Paul, 5 Aug 2026: the hero sequence plays once. The replay control lives in the
   REC/timecode register, appears when the video ends and obeys the CTA fill law. */
.hero-replay{position:absolute;right:var(--pad);bottom:clamp(30px,5vh,54px);z-index:5;
  display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:9px 16px;
  background:none;border:1px solid rgba(232,227,215,.34);color:var(--ash);
  font-family:var(--count);font-weight:500;font-size:var(--fs-meta);letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;opacity:0;pointer-events:none;
  transform:translateY(6px);
  transition:opacity .42s ease,transform .42s cubic-bezier(.22,.61,.36,1),background .2s ease,border-color .2s ease,color .2s ease}
.hero-replay svg{width:14px;height:14px;fill:currentColor;display:block}
.vid-ended .hero-replay{opacity:1;pointer-events:auto;transform:none}
.hero-replay:hover,.hero-replay:focus-visible{background:var(--tung);border-color:var(--tung);color:var(--black)}
@media(max-width:820px){.hero-replay{padding:9px 13px;letter-spacing:.14em}}


/* ---- The about page ground. One band, Bone, with the survey grid running the whole way
   through it, so the prose and the agency columns read as two halves of one sheet rather
   than two bands stacked. The grid is the link: the same 8mm setting-out grid the hero chart
   draws, heavier every fifth line, in Assay because gold never touches paper as ink.
   Experience laid out on a grid, which is the point. ---- */
.band.bn{
  --gp:clamp(19px,1.9vw,27px);
  background-color:var(--bone);
  border-top:1px solid rgba(140,130,101,.45);
  background-image:
    repeating-linear-gradient(to right,rgba(140,130,101,.055) 0,rgba(140,130,101,.055) 1px,transparent 1px,transparent calc(var(--gp)*5)),
    repeating-linear-gradient(to bottom,rgba(140,130,101,.055) 0,rgba(140,130,101,.055) 1px,transparent 1px,transparent calc(var(--gp)*5)),
    repeating-linear-gradient(to right,rgba(140,130,101,.028) 0,rgba(140,130,101,.028) 1px,transparent 1px,transparent var(--gp)),
    repeating-linear-gradient(to bottom,rgba(140,130,101,.028) 0,rgba(140,130,101,.028) 1px,transparent 1px,transparent var(--gp));
}
/* the columns sit closer to the prose than a band break would allow, because they are the
   evidence for it, not a separate subject */
.band.bn .cv{margin-top:clamp(38px,5.4vh,72px)}

/* ---- The crowned row fills its box. It was inset by the ledger's own side padding, which
   made the gold read as a floating chip instead of a struck line. The negative margin takes
   it to the border and the matching padding keeps every column exactly where it was. ---- */
.ble-ledger{--blp:clamp(15px,2vw,24px);padding:0 var(--blp) clamp(15px,2vh,22px)}
.ble-row--f{margin-inline:calc(var(--blp) * -1);padding-inline:calc(var(--blp) + 2px)}

/* ---- The brand tags, solid. Outlined chips put a third hairline system on the page, at the
   same weight as the grid behind and the rule above each column, and they did it around the
   least important information on the screen. Filled and smaller, they become quiet texture
   and the company names get to lead. Assay at low alpha so the fill is warm on Bone and the
   ink still clears AAA. ---- */
.cv-tags li{
  border:0;
  background:rgba(140,130,101,.19);
  color:var(--ink);
  font-size:10px;
  letter-spacing:.1em;
  padding:5px 8px;
}
.band.bn .cv-co{font-size:clamp(21px,1.65vw,27px)}


/* ============================================================
   THE ENQUIRY — contact.html, built 6 August 2026.

   The form is the one thing on this site a visitor actually operates, and it shipped as
   four default browser boxes with no styles in this file at all. It is rebuilt in the
   ledger register: ruled lines on paper, a numbered gutter, and a rule that draws as the
   field takes a value, so filling it in reads as a document being completed rather than
   a web form being submitted. Motion carries meaning (CLAUDE.md s3): the line is drawn
   because you wrote on it, and it locks to Assay when the field is done.

   Two hard floors, both measured on the live page before the rebuild: fields were 13.33px,
   which makes iOS Safari zoom the viewport on focus, so 16px is a floor and not a
   preference; and they were 42px tall against the site's 44px tap target.
   ============================================================ */
.enq{border-top:2px solid var(--voice)}
.enq-head{display:flex;justify-content:space-between;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--count);font-weight:500;font-size:var(--fs-label);
  letter-spacing:.16em;text-transform:uppercase;color:var(--meta)}

/* No row separator. The input's own rule is the only line a field needs, and a dashed
   border here put two hairlines at the same weight within 40px of each other, which is
   the fault Paul named on the about page columns (3 competing hairline systems). */
.enq-f{display:grid;grid-template-columns:2.2ch 1fr;grid-template-rows:auto auto auto;
  column-gap:clamp(10px,1.4vw,16px);padding:clamp(13px,1.8vh,18px) 0 clamp(4px,0.6vh,7px)}
.enq-n{grid-column:1;grid-row:1/4;font-family:var(--count);font-weight:500;
  font-size:var(--fs-meta);line-height:1.9;color:var(--dim);transition:color .35s ease}
.enq-lb{grid-column:2;grid-row:1;display:block;margin-bottom:4px;
  font-family:var(--count);font-weight:500;font-size:var(--fs-meta);
  letter-spacing:.16em;text-transform:uppercase;color:var(--meta);transition:color .35s ease}
/* optional marker: lowercase italic prose, so it reads as an aside and not another label */
.enq-opt{margin-left:8px;font-family:var(--prose);font-style:italic;font-size:var(--fs-meta);
  letter-spacing:0;text-transform:none;color:var(--dim)}

.enq-w{grid-column:2;grid-row:2;position:relative;display:block}
.enq-in{width:100%;min-height:44px;padding:9px 0;
  font-family:var(--prose);font-weight:400;font-size:16px;line-height:1.45;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line-2);border-radius:0;
  -webkit-appearance:none;appearance:none;transition:background .35s ease}
textarea.enq-in{min-height:116px;resize:vertical;display:block}
.enq-in::placeholder{color:transparent}   /* placeholder exists only so :placeholder-shown works */
.enq-in:focus{background:rgba(13,13,11,.03)}
.enq-in:focus:not(:focus-visible){outline:none}  /* keyboard keeps the global focus ring */

/* the rule that draws. left to right, hand-tuned curve, never linear */
.enq-w::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:left center;
  transition:transform .52s cubic-bezier(.22,.61,.36,1),background .35s ease}
/* a completed field stays drawn, in Assay: the furniture gold, so done reads as filed */
.enq-f:has(.enq-in:not(:placeholder-shown)) .enq-w::after{transform:scaleX(1);background:var(--assay)}
.enq-f:has(.enq-in:not(:placeholder-shown)) .enq-n,
.enq-f:has(.enq-in:not(:placeholder-shown)) .enq-lb{color:var(--ink)}
/* focus outranks filed: the live line is Ink */
.enq-w:focus-within::after{transform:scaleX(1);background:var(--ink)}

/* the note under a field. Paul's line, 7 August 2026: it makes the money question
   collaborative instead of qualifying, which is why it sits on the field and not in the hero. */
.enq-help{grid-column:2;grid-row:3;margin-top:7px;font-family:var(--prose);font-style:italic;
  font-size:var(--fs-meta);line-height:1.45;color:var(--dim)}

.enq-send{display:flex;align-items:center;gap:clamp(14px,2vw,22px);flex-wrap:wrap;
  margin-top:clamp(20px,3vh,28px)}

@media(prefers-reduced-motion:reduce){
  .enq-n,.enq-lb,.enq-in,.enq-w::after{transition:none}
}

/* ---- ORPHANED 16 August 2026. contact.html was the only consumer of .band.rf
   and its header is now the method title card on True Black, ported at Paul's
   request. The rule is left in place rather than deleted because Night Reef as a
   hero ground is a live, ruled option and this is the only worked example of it
   in the stylesheet. It matches no markup today, so it cannot conflict with
   anything the way .band.tr's reef declaration silently did.

   ---- The contact hero, Night Reef. Paul chose ground D, 7 August 2026.
   The page opened flat before this: a Seal White hero running into a Seal White form band,
   so nothing happened on the first screen. Reef gives it a title card, and it is what makes
   the phone number possible, because Tungsten is hard-banned on paper (1.92 on Seal White,
   v6 s6) and reads 9.3:1 here. The number on the first screen also took the only reason the
   booking block had to be a black box, which is why that box is now paper. ---- */
.band.rf{background:var(--reef);border-top:0;
  --voice:var(--bone);--meta:var(--ash);--fig:var(--tung);--muted:var(--ash);--dim:var(--ash);
  --line:var(--line-b);--line-2:var(--line-b2)}
@media(min-width:900px){.hero-call{grid-template-columns:minmax(0,1fr) auto}}

/* ---- Book a time, on paper. The black plate was the only element on the page that was not
   native to the system: this site is built from full-width bands, not from cards, and a
   hard-edged filled rectangle inside a column reads as a card. With the number in the hero
   the plate has no ground to defend, so it is now a paper module in the same register as the
   form beside it: a 2px head rule, the ledger family, and the laptop drawn in Assay, which is
   what gold is allowed to be on paper (furniture, never ink). ---- */
@keyframes bkDay{0%{transform:scale(.2);opacity:0}62%{transform:scale(1.14);opacity:1}100%{transform:scale(1);opacity:1}}

.bk-dir{display:flex;flex-direction:column;align-items:flex-start;
  margin-top:clamp(20px,2.8vh,27px);padding-top:clamp(16px,2.2vh,22px);border-top:1px solid var(--line)}
.bk-dir-h{display:block;margin-bottom:8px;font-family:var(--count);font-weight:500;
  font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;color:var(--meta)}
.bk-em{display:inline-block;padding-bottom:2px;font-family:var(--count);font-weight:500;
  font-size:clamp(17px,1.5vw,21px);letter-spacing:.02em;color:var(--voice);text-decoration:none;
  border-bottom:1px solid rgba(140,130,101,.55);transition:color .25s,border-color .25s}
.bk-em:hover{color:var(--fig);border-color:var(--fig);text-decoration:none}
@media(max-width:768px){.bk-em{padding-top:20px}}

/* ---- Containment, and where it went, 16 Aug 2026. The rule that lived here capped
   the enquiry split at minmax(0,540px) and minmax(0,460px), which fixed the measure and
   created a second fault in doing it: at 1440 the two columns sat 391px apart with
   nothing between them, so the centre of the band read as left over rather than
   composed. The whole split is gone, replaced by the twelve-column setting-out grid
   in contact.html's own style block, where the measure is held by the column count and
   the gutter is a real gutter carrying a real object. The original note is kept because
   its warning still applies to anything two-class placed against `.split`: it outranks
   the single-class stack rule and will force two columns onto a phone. ---- */

/* ---- The review row. Three cards, verbatim, on the relief paper.
   Star gold matches the shipped .review band on wildside-rebrand.html exactly, so the two
   testimony surfaces on the site agree. ---- */
.rvrow{display:grid;gap:clamp(24px,3.2vw,44px);margin-top:clamp(6px,1.2vh,14px)}
@media(min-width:820px){.rvrow{grid-template-columns:repeat(3,1fr)}}
.rvc{display:flex;flex-direction:column;gap:clamp(11px,1.6vh,15px);margin:0;
  padding-top:clamp(15px,2.1vh,21px);border-top:2px solid var(--ink)}
.rvc-stars{color:var(--ink);font-size:16px;letter-spacing:3px;line-height:1}
.rvc-q{margin:0;font-family:var(--prose);font-weight:400;
  font-size:clamp(17px,1.45vw,20px);line-height:1.42;color:var(--ink)}
.rvc-sig{margin-top:auto;padding-top:clamp(8px,1.2vh,12px);display:flex;flex-direction:column;gap:3px}
.rvc-name{font-family:var(--count);font-weight:500;font-size:var(--fs-meta);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);font-style:normal}
.rvc-org{font-family:var(--prose);font-style:italic;font-size:var(--fs-meta);color:var(--slate)}
.rvc-src{align-self:flex-start;margin-top:7px;padding-bottom:2px;
  font-family:var(--count);font-weight:500;font-size:var(--fs-meta);letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate);text-decoration:none;   /* Assay is 3.47 furniture, not a small-text colour (v6 banned pairs) */
  border-bottom:1px solid rgba(140,130,101,.45);transition:color .25s,border-color .25s}
.rvc-src:hover{color:var(--ink);border-color:var(--ink);text-decoration:none}
.rvc-note{align-self:flex-start;margin-top:7px;font-family:var(--count);font-weight:500;
  font-size:var(--fs-meta);letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}

/* Thumb target for the review link. Padding-top only, never bottom: the underline is a
   border on the element box, so growing it downward would pull the rule off the text.
   Same reason .rv-src on the case page takes padding-top alone. */
@media(max-width:768px){
  .rvc-src{margin-top:0;padding-top:24px}
}
/* the base reads as a solid, the screen as a lit panel: same hairline, different fill */


/* ============================================================
   THE RECORD — the blog hub header. Paul, 7 August 2026.

   The record IS the heading: enlarged, centre left, running off the left edge and the bottom,
   so the first thing on the page is an object rather than a headline about one. The <h1> is
   still real text for search and screen readers, carried by .vh; the disc carries it visually.
   Standard image replacement, not a hack, because the visible content says the same words.

   Prefixed tr- throughout: `.rec` is already taken by the REC badge inside .reel.
   ============================================================ */
/* `background:var(--reef)` deleted 16 Aug 2026. Dead code that lied, and the
   cascade confirms it: .band.tr is (0,2,0) and .band.xp-black later in this file
   is also (0,2,0), so xp-black wins and this hero has been True Black all along
   while the rule claimed Night Reef. If xp-black ever came off the section the
   hero would silently turn reef with no warning. */
.band.tr{position:relative;overflow:hidden;border-top:0;
  min-height:min(78vh,720px);display:flex;align-items:center;
  padding-block:clamp(56px,9vh,110px);
  --voice:var(--bone);--meta:var(--ash);--fig:var(--tung);--muted:var(--ash);--dim:var(--ash);
  --line:var(--line-b);--line-2:var(--line-b2)}
/* Rebased 16 Aug 2026. The disc was 1020px because it was carrying the H1. A
   real H1 carries it now, so the disc stops having to be the title, and the room
   that frees is exactly the room the pressings rack needs. It still bleeds off
   the left edge, still spins, still dominates. */
.tr-art{position:absolute;left:-13%;top:61%;transform:translateY(-50%);
  width:min(56vw,720px);height:auto;pointer-events:none}
.tr-in{position:relative;z-index:2;width:100%}
/* --tr-x is measured from the nav at runtime so the copy starts on the same vertical as
   the first nav link. It cannot be a percentage: the bar is justify-content:space-between,
   so where WORK lands depends on the rendered widths of the logo, the link group and the
   CTA, and it drifts from 31% to 38% of the container between 1280 and 2240. Falls back to
   auto with no JS, which is where it sat before. */
.tr-txt{margin-left:0;width:auto}
.tr-h1{margin:0}
.tr-sub{margin:0;font-family:var(--prose);font-weight:400;
  font-size:clamp(22px,2.2vw,32px);line-height:1.3;color:var(--bone)}
@media(max-width:899px){
  /* display:block, not flex. The band is a flex row on desktop so the absolutely positioned
     record can be centred against the text; the moment the art goes position:relative for the
     stack it becomes a flex ITEM and sits beside the copy instead of above it. */
  .band.tr{display:block;min-height:auto;padding-block:0 clamp(34px,6vh,56px)}
  /* FLIPPED RIGHT, Paul 17 August 2026. The mirror of -34%: the art is 142% of
     the column and its centre sits at 47.6% of that, so +34% puts the spindle a
     few px past the right edge and the disc reads as running off the sheet. The
     negative bottom margin then lifts the H1, the subline AND the sleeve into
     the black it vacated, which is one change doing all three jobs. */
  /* ONE margin-bottom. The rule already carried a positive one on its second
     line and a longhand does not merge with itself: the later declaration just
     won and the lift did nothing. Measured, not guessed. */
  .tr-art{position:relative;left:40%;top:auto;transform:none;width:142%;
    /* THE LIFT SCALES AGAINST THE SCREEN, NOT WITH IT. Paul, 18 August 2026:
       the hero should land whole on the first screen.
       A vh percentage cannot do this, and trying two of them is how I found out.
       The block below the record is a fixed 636px of type and the record bottom
       sits at 494, so the lift needed is 1130 - viewport: 286px at 844, but
       385px at 745. The shorter the screen, the MORE lift is required, which is
       the opposite of what any vh multiple gives you. 26vh left 85px under the
       fold at 844; 37vh fixed 844 and still lost 109px at 745.
       Stated as the subtraction it actually is, it holds at every height.
       svh, so it is solved for the URL bar VISIBLE: fit there and it fits when
       the bar retracts. */
    margin-bottom:calc(clamp(200px, 1130px - 100svh, 460px) * -1)}
/* The no-JS floor, and deliberately an approximation: ykc-record-fit.js measures
   the real lift and overrides it. I tried flattening this to a constant to kill
   the last height-dependent term, and it made the fit worse at every size (over
   by 16 to 123px), because the script's own measurement starts from this value.
   Reverted and measured. The exact lift is (record bottom + block height -
   viewport); the record scales with WIDTH while the viewport constrains HEIGHT,
   so no single CSS expression satisfies both axes: 26vh lost 85px at 844, 37vh
   fixed 844 and lost 109px at 745, this form lost 99px at 430x932. Not a
   function of one variable, so it is measured rather than written. */
  .tr-in{width:auto}
  .tr-txt{margin-left:0;width:auto}
  .tr-sub{font-size:clamp(23px,6.2vw,30px)}
}

/* visually hidden, for real headings carried by a graphic */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* true 33 1/3 rpm is 1.8s a revolution. The real speed, not a decorative drift.
   transform-origin MUST be the disc centre: `center` resolves to the view-box centre, which
   is a different point, and rotating about it makes the record orbit rather than spin. */
@keyframes trSpin{to{transform:rotate(360deg)}}
.tr-disc{transform-box:view-box;transform-origin:198px 210px;
  animation:trSpin 1.8s linear infinite}
.tr-paused .tr-disc{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.tr-disc{animation:none}}

.tr-mount{fill:#0B0B0A;stroke:#8C8265;stroke-opacity:.55;stroke-width:1.3}
.tr-grv{fill:none;stroke:#E8E3D7;stroke-opacity:.075;stroke-width:.8}
.tr-grvb{fill:none;stroke:#E8E3D7;stroke-opacity:.17;stroke-width:1}
.tr-wear{fill:none;stroke:#E8E3D7;stroke-opacity:.15;stroke-width:.7;stroke-linecap:round}
.tr-lbl{font-family:'Big Shoulders Display',sans-serif;font-weight:700;fill:#0B0B0A;
  text-anchor:middle;letter-spacing:.02em}
/* fill-opacity:.62 deleted 16 Aug 2026. Composited it was #514C3B on Tungsten,
   which computes 4.07 and fails AA at the size these glyphs actually render.
   Separation comes from size and letterspacing, never from a transparency. */
.tr-lblm{font-family:'Big Shoulders Text',sans-serif;font-weight:500;fill:#0D0D0B;
  text-anchor:middle;letter-spacing:.16em}
.tr-arm{fill:none;stroke:#ADABA4;stroke-opacity:.9;stroke-width:2.4;stroke-linecap:round}
.tr-armj{fill:#ADABA4;fill-opacity:.9}
/* Tungsten -> Assay. Gold crowns once per view and the label now holds that
   crown with its serial, so the cartridge fitting cannot also be gold. Assay is
   the system furniture gold and reads 5.15 on black. */
.tr-head{fill:#8C8265}

/* The record has to grow with the zoom tiers, or the type magnifies to 145% above 2200px
   while the disc stays pinned at 1020px and the composition comes apart. These caps track
   the .band>.container zoom factors (1.12 / 1.32 / 1.45) applied to the 1020px base. */
@media(min-width:1600px){.tr-art{width:min(56vw,806px)}}
@media(min-width:1900px){.tr-art{width:min(56vw,950px)}}
@media(min-width:2200px){.tr-art{width:min(56vw,1044px)}}

/* ============================================================
   EXPRESSION FURNITURE, graduated site-wide 7 August 2026.
   Header, footer and the nav CTA. Prototyped page-scoped on method.html,
   verified, then lifted here. These three are identical on every page, so
   they belong in one place rather than repeated per page.

   NOTE: index.html does not load this file (CLAUDE.md trap 1). The same block
   is duplicated into its inline CSS. Change one, change both.
   ============================================================ */
:root{ --xedge:clamp(16px,1.7vw,26px); }

/* ---- header: edge to edge ----------------------------------------------
   The fault was structural. .nav-in was max-width:var(--container), so the nav
   floated in a 1340px mat while the page ran edge to edge; the two disagreed
   about where the page begins. ---------------------------------------- */
.site-head,.nav{border-bottom:1px solid rgba(232,227,215,.14)}
.site-head .nav-in,.nav .nav-in{max-width:none;padding-inline:var(--xedge)}

/* ---- the bracketed CTA -------------------------------------------------
   Matches the [Sheet 04] / [AU] language already running through the rails.
   IMPORTANT: .nav-cta::before is the hover-fill wipe defined above
   (position:absolute, inset:0, Tungsten, scaleX(0)). It must be fully
   neutralised here or it fights the bracket. ::after is unused upstream.
   Contrast on the black bar: label 9.33, brackets 5.15, hover 15.38.
------------------------------------------------------------------------ */
.site-head .nav-cta,.nav .nav-cta{border:0;background:none;padding:6px 0;overflow:visible;
  color:var(--bone);opacity:1;transition:color .24s}
.site-head .nav-cta::before,.nav .nav-cta::before{content:"[";position:static;inset:auto;z-index:auto;
  background:none;transform:none;margin-right:.55em;color:var(--assay);transition:color .24s}
.site-head .nav-cta::after,.nav .nav-cta::after{content:"]";margin-left:.55em;color:var(--assay);transition:color .24s}
/* Resting is Bone (Paul, 20 Aug 2026). Hover crowns it Tungsten rather than
   repeating Bone, which would have left the CTA with no hover state at all. */
.site-head .nav-cta:hover,.nav .nav-cta:hover{color:var(--tung);background:none}
.site-head .nav-cta:hover::before,.site-head .nav-cta:hover::after,
.nav .nav-cta:hover::before,.nav .nav-cta:hover::after{
  color:var(--tung);background:none;transform:none}

/* ---- footer: black, ruled, cropped to the rule -------------------------
   The grid's top hairline IS the top edge of the footer. Cells are separated
   by hairlines rather than whitespace, so the grid itself is the furniture.
   All pairings computed: Tungsten heads 9.33, Ash links and prose 8.57,
   Bone brand line 15.38.
------------------------------------------------------------------------ */
.site-foot{background:var(--black);color:var(--bone);border-top:0;
  padding-inline:0;padding-top:0;
  --voice:var(--bone);--meta:var(--ash);--fig:var(--tung);--muted:var(--ash);--dim:var(--ash)}
.foot-cols{display:grid;gap:1px;max-width:none;margin:0;
  background:rgba(232,227,215,.16);
  border-block:1px solid rgba(232,227,215,.16);border-inline:0;
  grid-template-columns:1fr}
@media(min-width:700px){.foot-cols{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.foot-cols{grid-template-columns:repeat(4,1fr)}}
.foot-cols>div{background:var(--black);padding:clamp(18px,2.6vh,26px) clamp(16px,1.6vw,24px)}
.foot-cols h4{font-family:var(--count);font-weight:500;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone);margin-bottom:13px;min-height:0}
.foot-cols a{color:var(--ash);font-size:13.5px}
.foot-cols a:hover{color:var(--bone)}
/* The one CTA in the footer reads Bone, so it sits above the Ash directory
   around it, and crowns to Tungsten on hover like the header CTA. */
.foot-cols a[href="contact.html"]{color:var(--bone)}
.foot-cols a[href="contact.html"]:hover{color:var(--tung)}
.foot-cols p{color:var(--ash);font-family:var(--prose);font-size:14px;line-height:1.5}
.foot-cols .fl-home{color:var(--bone)}
.foot-social a{color:var(--ash)}
.foot-social a:hover{color:var(--bone)}

/* the bottom line: one row, no separate legal strip */
.foot-base{max-width:none;margin:clamp(11px,1.7vh,19px) 0 0;padding:7px var(--xedge) 0;
  border-top:0;color:var(--ash);display:grid;gap:7px;align-items:baseline}
@media(min-width:760px){
  .foot-base{grid-template-columns:1fr auto 1fr}
  .foot-base>:nth-child(2){justify-self:center}
  .foot-base>:nth-child(3){justify-self:end}
  .foot-base>:only-child{grid-column:1/-1}
  .foot-base:has(>:nth-child(2):last-child){grid-template-columns:1fr auto}
}
.foot-base b{color:var(--tung);font-weight:500}

/* ============================================================
   THE EXPRESSION LAYER, 7 August 2026.
   Primitives extracted from the method.html prototype after it was verified,
   so the remaining pages compose from a system rather than repeat overrides.
   Prefix xp- checked clear against every production class.

   Opt-in: a page uses these on top of .band (so ykc-reveal still reaches its
   content) except where tier 3 choreography owns the section.
   Grounds: black, reef, cream, clay. Clay is the highlight and appears once.
   ============================================================ */

/* ---- grounds ---- */
.xp-black{background:var(--black);color:var(--bone);border-top:0;
  --voice:var(--bone);--meta:var(--ash);--fig:var(--tung);--muted:var(--ash);--dim:var(--ash);
  --line:#23231d;--line-2:#33322a}
.xp-reef{background:var(--reef);color:var(--bone);border-top:0;
  --voice:var(--bone);--meta:var(--ash);--fig:var(--tung);--muted:var(--ash);--dim:var(--ash);
  --line:rgba(232,227,215,.18);--line-2:rgba(232,227,215,.26)}
.xp-cream{background:var(--seal);color:var(--ink);border-top:0}
.xp-mid{background:var(--seal-mid);color:var(--ink);border-top:0}
/* clay is the highlight ground. Ink on clay computes 8.39. One per page. */
.xp-clay{background:var(--clay);color:var(--ink);border-top:0;
  --voice:var(--ink);--meta:rgba(13,13,11,.72);--fig:var(--ink);--muted:var(--ink);
  --dim:rgba(13,13,11,.72);--line:rgba(13,13,11,.28);--line-2:rgba(13,13,11,.4)}

/* ============================================================
   THE SHEET LAYER, 8 August 2026.
   Promoted from Direction B of YKC_Expression-Directions_v1.html, the direction
   that became the expression spec. Two devices stripped on the way out, per the
   standing warning that the studies still contain retired work:
     · .over carried `box-shadow:-14px 14px 0`. Shadows are banned by rule (v6),
       so the chip is a plain bordered box.
     · the study's colossal set weight 700; superseded by the 900 lock (v6 s5),
       so headers reuse .xp-colossal rather than redeclaring.
   Prefix sh- checked clear against styles.css and all 20 pages before writing.
   ============================================================ */

/* THE CLOSER, BROUGHT ONTO THE SYSTEM (Paul, 8 Aug 2026).
   The homepage fixed this inline on 7 Aug with the note "it never got the
   treatment here", but index.html does not load this file, so the other 16
   pages kept the old centred closer. Left-aligned and edge to edge, matching
   the homepage and method exactly. This is the whole difference: the title,
   weight, case and colour were already identical everywhere. */
.closing{align-items:flex-start;text-align:left}
.closing>.container{max-width:none;padding-inline:var(--xedge)}

/* THE LEDGER, STEPS VARIANT (v6 s7, built 8 Aug 2026).
   Specified in the guidelines since 8 August and never shipped: `.ledger--steps`
   is used on contact.html with zero rules, so that page has been rendering the
   block unstyled. This builds it once and both surfaces take it.

   A modifier, not a second component, because `.ledger` is shared with builder,
   method and work. Step numbers move to the LEFT GUTTER (the value column is
   where a ledger puts figures, and a step number is not a figure), and a rail
   runs down the sequence with a node per step.

   The markup writes the number in `.val`; CSS reorders rather than asking every
   page to change, so nothing has to be rewritten to adopt it. */
.ledger--steps{border-top:2px solid var(--voice)}
.ledger--steps .ledger-row{display:grid;grid-template-columns:2.8ch 1fr;gap:0 18px;
  align-items:start;position:relative;padding:0 0 clamp(16px,2.6vh,26px);border-bottom:0}
.ledger--steps .ledger-h + .ledger-row{padding-top:clamp(16px,2.6vh,26px)}
/* the number, in the gutter, in the counting register */
.ledger--steps .ledger-row .val{grid-column:1;grid-row:1;order:-1;
  font-family:var(--count);font-weight:500;font-size:12px;letter-spacing:.16em;
  color:var(--meta);text-align:left;padding-top:4px;line-height:1.3}
/* the rail, with a node per step */
.ledger--steps .ledger-row .lbl{grid-column:2;grid-row:1;position:relative;
  border-left:1px solid var(--line-2);padding-left:22px;padding-bottom:2px;
  font-family:var(--count);font-weight:600;font-size:clamp(16px,1.7vw,19px);
  color:var(--voice);text-transform:none;line-height:1.35;max-width:56ch}
.ledger--steps .ledger-row:last-child .lbl{border-left-color:transparent}
.ledger--steps .ledger-row .lbl::before{content:"";position:absolute;left:-4.5px;top:7px;
  width:8px;height:8px;background:var(--voice)}
/* the answer, when a step carries one. Meno at the note measure. */
.ledger--steps .ledger-row .ans{grid-column:2;grid-row:2;
  border-left:1px solid var(--line-2);padding:7px 0 0 22px;
  font-family:var(--prose);font-weight:400;font-size:16px;line-height:1.5;
  color:var(--muted);max-width:60ch}
.ledger--steps .ledger-row:last-child .ans{border-left-color:transparent}
@media(max-width:520px){
  .ledger--steps .ledger-row{grid-template-columns:2.4ch 1fr;gap:0 12px}
  .ledger--steps .ledger-row .lbl,.ledger--steps .ledger-row .ans{padding-left:16px}
}

/* THE FAQ DISCLOSURE, NATIVE (Paul, 8 August 2026: click to reveal, best practice).
   `interpolate-size: allow-keywords` lets block-size animate to and from `auto`,
   and `::details-content` is the box the browser already wraps the answer in, so
   the open AND the close run on a curve with no script measuring scrollHeight.

   `name` makes the group exclusive, so one answer stands at a time and the reader
   never scrolls a wall. A browser without `::details-content` ignores the block
   and gets a working disclosure without the curve, which is the right failure.

   SCOPED TO `.ledger--faq` ONLY. Paul, 8 August 2026: pricing goes first. The eight
   service pages still run `assets/ykc-faq.js` against `.faq-item` and have to meet
   the stylesheet they were built against, so the selectors below name the steps
   ledger and nothing else. Widening them to `.faq-item` is the second half of this
   job and it lands the day that script comes out. Do not widen one without the
   other: the script drives inline `height` and would fight this block. */
.ledger--faq{interpolate-size:allow-keywords}
.ledger--faq .ledger-row::details-content{
  block-size:0;opacity:0;overflow:hidden;
  transition:block-size .42s cubic-bezier(.22,.61,.36,1),opacity .26s ease,
             content-visibility .42s allow-discrete}
.ledger--faq .ledger-row[open]::details-content{block-size:auto;opacity:1}
@media(prefers-reduced-motion:reduce){
  .ledger--faq .ledger-row::details-content{transition:none;opacity:1}
}

/* THE FAQ ROW, RULED. Paul, 9 August 2026, chosen from three.
   The first build inherited the steps register whole: a vertical rail down the
   gutter and a solid 8px node per row. On a sequence that is right, because a
   sequence has to read continuous. On a list of questions it was just ink, and it
   read heavy. The rail and the nodes come out, and a hairline divides each row
   instead, the way a ledger rules its lines. The gutter clears completely, so the
   number and the question carry the row on their own.

   The summary carries the row rhythm because it is also the tap target: a closed
   row cannot borrow the answer's padding. 24px was the whole hit area before this,
   and the floor is 44. */
.ledger--faq .ledger-row{display:block;position:relative;padding:0;
  border-bottom:1px solid var(--line)}
.ledger--faq .ledger-row:last-child{border-bottom:0}
/* the control sits on the ledger's own column edge, not the band's. A `1fr`
   question column threw the toggle 700px clear of the question it opens. */
.ledger--faq .ledger-row>summary{display:grid;grid-template-columns:2.8ch minmax(0,50ch) auto;
  gap:0 18px;justify-content:start;align-items:start;cursor:pointer;list-style:none;
  padding:clamp(19px,2.8vh,28px) 0}
.ledger--faq .ledger-row>summary::-webkit-details-marker{display:none}
/* the steps register's rail and node belong to a sequence, not to a question list */
.ledger--faq .ledger-row>summary .lbl,
.ledger--faq .ledger-row .ans{border-left:0;padding-left:0}
.ledger--faq .ledger-row .lbl::before{display:none}
.ledger--faq .ledger-row .faq-toggle{margin-top:.42em}
.ledger--faq .faq-toggle::before{height:1.1px;margin-top:-.55px}
.ledger--faq .faq-toggle::after{width:1.1px;margin-left:-.55px}
.ledger--faq .ledger-row>summary:hover .faq-toggle::before,
.ledger--faq .ledger-row>summary:hover .faq-toggle::after{background:var(--voice)}
.ledger--faq .ledger-row[open] .faq-toggle::before{transform:rotate(180deg)}
.ledger--faq .ledger-row[open] .faq-toggle::after{opacity:0;transform:scaleY(0)}
.ledger--faq .ledger-row::details-content{margin-left:calc(2.8ch + 18px)}
.ledger--faq .ledger-row .ans{padding:6px 0 clamp(22px,3.2vh,32px);max-width:58ch}
@media(max-width:520px){
  .ledger--faq .ledger-row>summary{grid-template-columns:2.4ch 1fr auto;gap:0 12px}
  .ledger--faq .ledger-row::details-content{margin-left:calc(2.4ch + 12px)}
}

/* the tail runs to the bottom edge of its section: the host band's padding was
   leaving a cream strip below the reef. */
.band:has(.sh-tail),.xp-on .band:has(.sh-tail){padding-bottom:0}
/*  ^ the page-scoped `.xp-on .band` block loads after this file (trap 7),
     so the single-class form alone lost and the cream strip stayed. */

/* THE RECEIPT TAIL (Paul, 8 Aug 2026).
   The strip at the end of an invoice: attached to the ledger it belongs to, not
   floating as its own band. Black, because this is where a document closes, and
   the perforation above it is the etch doing the job it was licensed for.
   The figures themselves stay on paper (the receipts rule); it is only the tail
   that goes dark, which is what makes the ledger read as a finished document. */
.sh-tail{position:relative;margin-inline:calc(var(--xedge) * -1);background:var(--reef);color:var(--bone);
  --voice:var(--bone);--meta:var(--ash);--muted:var(--ash);
  --line:rgba(232,227,215,.18);--line-2:rgba(232,227,215,.26);
  padding:0 0 clamp(26px,4.4vh,50px);margin-top:clamp(22px,3.6vh,40px)}
/* The perforation. A row of dashes read as a chunky band rather than a tear, so
   this punches half-circles in the ground ABOVE out of the black, which is what
   a receipt stub actually looks like. --tail-notch is the colour of the band the
   tail is attached to; it defaults to the primary paper. */
.sh-tail{--tail-notch:var(--black)}
.sh-tail::before{content:"";display:block;height:6px;
  background-image:radial-gradient(circle at 5px 0,var(--tail-notch) 3px,transparent 3.4px);
  background-size:11px 6px;background-repeat:repeat-x;background-position:0 -1px}
/* short columns, one per thing bought. Big Shoulders, because a list of what was
   built is counting, not prose (v6 s5, the structural-block rule). */
.sh-tail-in{padding:clamp(20px,3.2vh,34px) var(--xedge) 0;display:grid;
  gap:clamp(18px,2.6vw,44px)}
/* the tail carries one column per rung. Four rungs since the ladder recut,
   so it steps 1, 2, 4 rather than jumping straight to four narrow columns. */
@media(min-width:760px){.sh-tail-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.sh-tail-in{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sh-tail-col{border-top:1px solid rgba(232,227,215,.26);padding-top:12px}
.sh-tail-k{display:block;font-family:var(--count);font-weight:600;font-size:13px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--bone);margin-bottom:7px}
.sh-tail-v{font-family:var(--count);font-weight:500;font-size:15.5px;line-height:1.45;
  color:var(--ash);max-width:34ch}

/* THE CLOSER'S LINE GRID (Paul, 8 Aug 2026, rolled out site-wide).
   The setting-out lines from Direction B, drawn on the black closer so the last
   screen has structure under the type rather than an unbroken field. Six columns,
   matching the six-slot index rail the same sheet uses.
   A drawn background, not content: it boxes nothing and it is the drafting sheet
   (v6 s7), which is licensed on any ground. Hairline weight kept low so the
   crowned title stays the only thing that shouts. */
.closing{
  background-image:linear-gradient(90deg,rgba(232,227,215,.085) 0 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  background-repeat:repeat-x;
  background-position:0 0;
}
@media(max-width:760px){
  .closing{background-size:calc(100% / 3) 100%}  /* three columns on a phone, or it reads as noise */
}

/* THE LEDGER ALWAYS COUNTS (Paul, 8 Aug 2026).
   Numbers count because they were counted, and the rows land one after another
   rather than all at once. The stagger is the ledger being written, not a
   decorative entrance. Visible by default; the delay only applies once JS has
   confirmed it is running, so a dead observer can never hide a figure. */
/* Scoped to [data-countup] on purpose: a ledger with no count-up wired never
   gets .count-in, so hiding its rows would leave them hidden for good. */
.js [data-countup] .ll-row{opacity:0;transform:translateY(10px)}
.js [data-countup].count-in .ll-row{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.js [data-countup].count-in .ll-row:nth-of-type(1){transition-delay:0ms}
.js [data-countup].count-in .ll-row:nth-of-type(2){transition-delay:90ms}
.js [data-countup].count-in .ll-row:nth-of-type(3){transition-delay:180ms}
.js [data-countup].count-in .ll-row:nth-of-type(4){transition-delay:270ms}
.js [data-countup].count-in .ll-row:nth-of-type(n+5){transition-delay:360ms}
@media(prefers-reduced-motion:reduce){
  .js [data-countup] .ll-row{opacity:1;transform:none;transition:none}
}

/* THE TITLE CARD, for any hero with no video or image (Paul, 8 Aug 2026).
   Promoted from method.html's page-scoped .xm-s1, which is the reference.
   Type on a ground is a complete design in this world, not an empty state
   (v6 s8, the hunger guard), so a media-less hero gets the colossal title,
   a crowned rule, and four facts on dotted leaders rather than a small
   headline floating in a band.
   Ground-agnostic: it reads its colours from the role tokens, so it works on
   black, reef or clay without a second declaration. */
.sh-card{position:relative;padding:clamp(56px,10vh,132px) 0 clamp(34px,5.5vh,64px)}
.sh-card .sh-title{font-family:var(--banner-cond);font-weight:900;text-transform:uppercase;
  line-height:.8;letter-spacing:-.05em;margin-left:-.05em;padding-inline:var(--xedge);
  font-size:var(--h1-card);color:var(--voice);text-wrap:balance}
@media(max-width:819px){.sh-card .sh-title{margin-left:0}}
/* the four-fact spec strip. Tungsten rule above it is the crowned moment. */
.sh-spec{display:grid;gap:0 clamp(18px,3vw,52px);margin:clamp(26px,4.4vh,52px) var(--xedge) 0;
  border-top:2px solid var(--fig);padding-top:14px}
@media(min-width:700px){.sh-spec{grid-template-columns:repeat(4,1fr)}}
.sh-spec div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px dotted var(--line-2);font-family:var(--count);font-weight:500;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
.sh-spec b{color:var(--voice);font-weight:600;letter-spacing:.04em}
/* the registration mark: drafting furniture, once per sheet */
.sh-reg{display:block;width:19px;height:19px;border:1px solid currentColor;border-radius:50%;
  opacity:.55;margin:0 var(--xedge) clamp(22px,4vh,44px);position:relative}
.sh-reg::after{content:"";position:absolute;inset:0;margin:auto;width:3px;height:3px;
  border-radius:50%;background:currentColor}

/* the meta rail: edge to edge, across the top of a surface. four slots. */
.sh-rail{display:grid;gap:8px;padding:13px var(--xedge);border-bottom:1px solid var(--line);
  font-family:var(--count);font-weight:500;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--meta);line-height:1.3}
@media(min-width:760px){
  .sh-rail{grid-template-columns:1fr auto 1fr auto;align-items:baseline}
  .sh-rail>:nth-child(2){justify-self:center}
  .sh-rail>:nth-child(3),.sh-rail>:nth-child(4){justify-self:end}
}
.sh-rail b{color:var(--voice);font-weight:500}
/* Paul, 17 August 2026: "taking up too much depth of the screen". Below 760 the
   grid had no columns, so four metadata strings became four rows plus three
   gaps: 118px of a 844px phone spent before the headline. As a wrapping row
   they fold to two lines and the middot does the work the row gap was doing.
   Measured at 390: 118px -> 44px, and the 74px goes to the H1. */
@media(max-width:759px){
  .sh-rail{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:9px;row-gap:2px;
    font-size:10px;letter-spacing:.1em;padding-block:10px}
  .sh-rail>*+*::before{content:"\00B7";margin-right:9px;opacity:.5}
}

/* the full-height vertical hairline. the setting-out line, made visible.
   the one drafting device the site has never used. */
.sh-vr{position:absolute;top:0;bottom:0;width:1px;background:var(--line);z-index:1;pointer-events:none}
@media(max-width:760px){.sh-vr{display:none}}

/* the rail as a black bar (Paul, 8 August 2026, option B). The rail is already
   edge to edge, so it takes the ground and nothing else: no bleed, or the metadata
   clips at both frames. Ash speaks on it at 8.57 and Bone carries the serial at
   15.38. Licensed by the balance law only on a surface that carries Clay, which
   pricing does, and it never sits next to another black band. The ledger under it
   drops its 2px top rule, because the bar is already the field's top edge and two
   terminations read as a mistake.

   The bar flips the tokens and does NOT set `color`. `.sh-rail` already reads
   `color:var(--meta)`, so setting colour here flattens the whole bar to one value
   and the serial stops being emphasis. Ash speaks, Bone is reserved for the `b`. */
.sh-rail--blk{background:var(--black);border-bottom:0;
  padding-block:clamp(13px,1.9vh,18px);
  --voice:var(--bone);--meta:var(--ash);--line:#23231d;--line-2:#33322a}
.sh-rail--blk + .container .ledger--faq{border-top:0;padding-top:clamp(16px,2.4vh,24px)}

/* the index rail: footnotes and enumerations under a surface */
.sh-idx{font-family:var(--count);font-weight:500;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;line-height:1.8;color:var(--meta);padding-inline:var(--xedge);
  display:grid;gap:2px 26px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.sh-idx b{color:var(--voice);font-weight:500}

/* the spec chip: a bordered fact that crosses the headline's field */
.sh-chip{display:inline-block;background:var(--seal);border:1px solid var(--ink);padding:14px 22px 15px}
.sh-chip .f{font-family:var(--disp);font-weight:700;font-size:clamp(28px,3.6vw,54px);
  line-height:.9;color:var(--fig)}
.sh-chip .c{font-family:var(--count);font-weight:500;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--meta);margin-top:5px}

/* the ledger at SHEET SCALE. The live ledger set its figures at 48px against
   Direction B's 106px at 1440, and that 2.2x is most of what reads as "short of
   the reference". Modifier on the existing .lhero-ledger so the countup JS hooks
   and the live bindings are untouched. */
.lhero-ledger.sh-scale{border-top-width:1px}
.lhero-ledger.sh-scale .ll-val{font-size:clamp(38px,7.2vw,112px);line-height:.82;letter-spacing:-.02em}
.lhero-ledger.sh-scale .ll-row{align-items:center;padding-block:clamp(15px,2.6vh,28px);
  border-bottom:1px solid var(--line);transition:background .25s}
.lhero-ledger.sh-scale .ll-row:last-child{border-bottom:0}
.lhero-ledger.sh-scale .ll-lbl{font-size:clamp(17px,2vw,24px)}
.lhero-ledger.sh-scale .ll-dot{opacity:.45}
/* the row hover steps down one paper. On the second paper it has to step the
   other way, or the receipts ledger hovers to the ground it already sits on. */
@media(min-width:761px){
  .lhero-ledger.sh-scale .ll-row:hover{background:var(--seal-mid)}
  .xp-mid .lhero-ledger.sh-scale .ll-row:hover{background:var(--seal)}
  /* ON CLAY THE ROW DOES NOT STEP, 16 Aug 2026. sh-scale rolled out from pricing
     to the other eight ledgers, and three of them sit on a Clay band. Stepping a
     row down to Seal Mid there does not deepen it, it leaves the band: Clay is
     the one dark-side ground in the system and paper is the other side of it.
     There is no second Clay to step to, and the band is already the surface's
     one active ground, so a row inside it has nothing left to mark. */
  .xp-clay .lhero-ledger.sh-scale .ll-row:hover{background:transparent}
}
@media(max-width:760px){
  .lhero-ledger.sh-scale .ll-val{font-size:clamp(34px,13vw,64px);margin-top:8px}
}

/* ---- specificity guard, 8 August 2026 -----------------------------------
   The ground classes above are single-class selectors. `.band.lt` is two, so
   wherever a page wrote `class="band lt xp-clay"` the Seal Mid rule won and the
   ground silently reverted. 12 bands across 9 pages were affected: 7 clay, 2
   reef, 3 cream. Re-declaring at .band specificity repairs all of them without
   touching a line of markup. Same trap as `.split--enq` beating `.split`.

   CORRECTED same day: the first version set `background` only, so on
   `class="band lt xp-reef"` the ground went dark while `.band.lt`'s two-class
   `color:var(--ink)` kept the text Ink. Ink on Night Reef is 1.62. The guard has
   to carry the voice and the role tokens too, not just the fill.
------------------------------------------------------------------------- */
.band.xp-black{background:var(--black);color:var(--bone);
  --voice:var(--bone);--meta:var(--ash);--fig:var(--tung);--muted:var(--ash);--dim:var(--ash);
  --line:#23231d;--line-2:#33322a}
.band.xp-reef{background:var(--reef);color:var(--bone);
  --voice:var(--bone);--meta:var(--ash);--fig:var(--tung);--muted:var(--ash);--dim:var(--ash);
  --line:rgba(232,227,215,.18);--line-2:rgba(232,227,215,.26)}
.band.xp-cream{background:var(--seal);color:var(--ink);
  --voice:var(--ink);--meta:var(--slate);--fig:var(--ink);--muted:var(--ink);--dim:var(--slate)}
.band.xp-mid{background:var(--seal-mid);color:var(--ink);
  --voice:var(--ink);--meta:var(--slate);--fig:var(--ink);--muted:var(--ink);--dim:var(--slate)}
/* clay keeps Ink: bone on clay is 1.81, tungsten 1.10. No flip, no crown. */
.band.xp-clay{background:var(--clay);color:var(--ink);
  --voice:var(--ink);--meta:var(--slate);--fig:var(--ink);--muted:var(--ink);--dim:var(--slate);
  --line:rgba(13,13,11,.28);--line-2:rgba(13,13,11,.4)}
/* text on a dark ground is Bone or Ash. Never Ink: 1.62 on reef, 1.0 on black. */
.band.xp-reef p,.band.xp-reef .body,.band.xp-reef .lede,
.band.xp-black p,.band.xp-black .body,.band.xp-black .lede{color:var(--muted)}

/* THE CTA ON CLAY FILLS BLACK, NOT GOLD (Paul, 8 Aug 2026).
   The house hover fills Tungsten, which is 1.10 against Clay, so the button
   dissolved into the band on hover. Same arithmetic that bans a crown on Clay.
   Doubled class names on purpose: `.band.lt .btn.btn:hover` sets Tungsten with
   black text and outranks a single-class rule, which left the label Ink on a
   black fill. The label goes Seal White so the rollover reads. */
.band.xp-clay .btn::before,.band.xp-clay .cta::before{background:var(--ink)}
.band.xp-clay .btn.btn:hover,.band.xp-clay .cta.cta:hover,
.band.xp-clay .btn.btn:focus-visible{color:var(--seal);border-color:var(--ink)}

/* ---- an edge-to-edge section ---- */
.xp-sect{position:relative;padding:clamp(44px,7.5vh,96px) 0 clamp(34px,6vh,76px)}
.xp-sect>.container{max-width:none;padding-inline:0}

/* ---- the section head rail ---- */
.xp-hd{display:grid;gap:10px;padding:0 var(--xedge) 13px;border-bottom:1px solid currentColor;
  font-family:var(--count);font-weight:500;font-size:11.5px;letter-spacing:.19em;
  text-transform:uppercase;opacity:.7;margin-bottom:clamp(20px,3.4vh,44px)}
@media(min-width:760px){.xp-hd{grid-template-columns:1fr auto}}

/* ---- the colossal title. Meno 900 sets its glyphs ABOVE the line box, so a
   box-level margin under-reads the optical gap by roughly half. Budget double
   what looks right wherever one of these sits under a rule. ---- */
.xp-colossal{font-family:var(--banner-cond);font-weight:900;text-transform:uppercase;
  line-height:.8;letter-spacing:-.05em;margin-left:-.05em;padding-inline:var(--xedge)}
@media(max-width:819px){.xp-colossal{margin-left:0}}
.xp-h1{font-size:var(--h1-card)} /* referenced by no live page; pointed at the token so it cannot go stale */
.xp-h2{font-size:clamp(34px,5.6vw,86px)}

/* ---- prose at the measure the spec actually asks for ---- */
.xp-lede{font-family:var(--prose);font-size:16px;line-height:1.5;
  padding-inline:var(--xedge);max-width:60ch;margin-top:clamp(12px,2vh,20px)}

/* ---- rules and texture ---- */
.xp-drw{position:relative;height:2px;background:currentColor;opacity:.22;overflow:hidden;
  margin:0 var(--xedge) clamp(18px,3vh,36px)}
.xp-drw::after{content:"";position:absolute;inset:0;background:currentColor;
  transform:scaleX(var(--dw,1));transform-origin:left;
  transition:transform 1.05s cubic-bezier(.22,.61,.36,1)}
.js .xp-drw::after{transform:scaleX(var(--dw,0))}
/* the etch. Carries texture where colour is not available. */
.xp-etch{height:9px;margin:0 var(--xedge);border-top:1px solid currentColor;opacity:.34;
  background:repeating-linear-gradient(135deg,currentColor 0 1px,transparent 1px 6px)}
.xp-seam{height:13px;border-block:1px solid currentColor;opacity:.4;
  margin-top:clamp(24px,4vh,50px);
  background:repeating-linear-gradient(135deg,currentColor 0 1px,transparent 1px 7px)}

/* ---- the ledger row: number, text, optional figure ---- */
.xp-row{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  padding:clamp(13px,2.2vh,22px) var(--xedge);border-bottom:1px solid var(--line);
  transition:background .25s}
.xp-row:first-of-type{border-top:1px solid var(--line)}
@media(min-width:820px){.xp-row.xp-has-fig{grid-template-columns:auto minmax(0,1fr) auto}}
.xp-no{font-family:var(--count);font-weight:500;font-size:11px;letter-spacing:.16em;color:var(--meta)}
.xp-tx{font-family:var(--text);font-weight:600;font-size:clamp(16px,1.7vw,21px);color:var(--voice)}
.xp-sub{display:block;font-family:var(--count);font-weight:500;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--meta);margin-top:4px}
.xp-val{font-family:var(--count);font-weight:700;font-size:clamp(28px,4.4vw,64px);
  line-height:.85;letter-spacing:-.02em;color:var(--fig);text-align:right;white-space:nowrap}
.xp-cream .xp-row:hover,.xp-mid .xp-row:hover{background:var(--seal-mid)}
.xp-reef .xp-row:hover,.xp-black .xp-row:hover{background:rgba(232,227,215,.05)}

/* ---- the crowned total. Figures right-align, per the ledger law. ---- */
.xp-total{display:grid;gap:10px clamp(16px,2.4vw,32px);align-items:baseline;
  padding:clamp(16px,2.6vh,28px) var(--xedge) 0}
@media(min-width:700px){.xp-total{grid-template-columns:1fr auto}}
.xp-fig{font-family:var(--count);font-weight:700;font-size:clamp(44px,8vw,118px);
  line-height:.82;letter-spacing:-.02em;color:var(--fig);text-align:right;order:2}
.xp-cap{font-family:var(--prose);font-style:italic;font-size:15.5px;color:var(--meta);
  max-width:40ch;order:1}

/* ---- the spec block: four facts under a crowned rule ---- */
.xp-spec{display:grid;gap:0 clamp(18px,3vw,52px);margin:clamp(24px,4vh,50px) var(--xedge) 0;
  border-top:2px solid var(--fig);padding-top:14px}
@media(min-width:700px){.xp-spec{grid-template-columns:repeat(4,1fr)}}
.xp-spec div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px dotted var(--line-2);font-family:var(--count);font-weight:500;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
.xp-spec b{color:var(--voice);font-weight:600;letter-spacing:.04em}

/* ---- a two-column band: statement left, support right ---- */
.xp-two{display:grid;gap:clamp(18px,3vw,50px);padding:0 var(--xedge)}
@media(min-width:940px){.xp-two{grid-template-columns:minmax(0,1.25fr) minmax(260px,.85fr)}}
.xp-pull{font-family:var(--prose);font-size:clamp(20px,2.5vw,34px);line-height:1.3;
  color:var(--voice);text-wrap:pretty}
.xp-note{font-family:var(--prose);font-size:16px;line-height:1.5;color:var(--muted);
  max-width:44ch;border-top:2px solid var(--voice);padding-top:13px}

/* ---- mobile overflow fix, 7 August 2026 --------------------------------
   PRE-EXISTING BUG, found during the expression sweep. styles.css line 168
   hides .nav-cta below 430px, but line 1070 (`.btn,.closing .btn,.reveal-cta,
   .rgo,.nav-cta{min-height:44px;display:inline-flex}`, from the tap-target
   pass) re-shows it at the same specificity and later in the file, so it wins.
   Result: a 270px desktop CTA sitting beside the hamburger on every page,
   pushing scrollWidth to 465 against a 390 viewport.

   This is why CLAUDE.md section 4's "zero horizontal overflow at 390 and 360"
   is no longer true. The mobile panel already carries .mnav-cta, so the path
   to contact is unaffected.
------------------------------------------------------------------------ */
@media(max-width:430px){
  .site-head .nav-cta,.nav .nav-cta{display:none}
}

/* ============================================================
   THE PLATE SEQUENCE (websites), 9 August 2026.
   Two screens wipe, one after the other, on to the first plate which is already
   sitting behind them. Then each client plate holds its left column while its
   right column runs. Built from the guidelines deck language: .pl grounds,
   .rows on a 2px voice rule, .etch, .pull, the 2.39:1 letterbox.
   ============================================================ */
/* ---- the opening plate, which wipes ---- */
/* the two screens are OVERLAYS, not a stack with a filler behind them. The first
   plate is pulled up a full viewport so it already sits underneath, which means
   the standfirst does not wipe to a black holding layer, it wipes to the next
   screen. When the runway ends the sticky releases and the plate carries on with
   no join to hide. */
.op{position:relative;height:280vh;z-index:1;background:transparent;pointer-events:none}
.op *{pointer-events:auto}
/* svh, not vh: this is a sticky full-screen stage and vh is the viewport with
   the URL bar hidden, which is the mismatch that produced the hero glitch on
   the homepage. Same class of bug, fixed before it is reported. */
.op-stage{position:sticky;top:0;height:100svh;overflow:hidden}
/* the page's own hero becomes the wiping card, so the letterbox bars, the REC
   dot, the timecode and the wireframe frame all survive: the sequence is added
   to the hero rather than replacing it. */
.op-card{position:absolute;inset:0;z-index:2;clip-path:inset(0 0 var(--wipe,0%) 0)}
/* the standfirst is its own screen and wipes out the same way the card did, so
   the sequence reads as one mechanism repeating rather than two ideas */
.op-beneath{position:absolute;inset:0;z-index:1;background:var(--seal);display:flex;align-items:center;
  padding:0 var(--xedge);clip-path:inset(0 0 var(--wipe2,0%) 0)}
/* the standfirst screen was a line of type in an empty field. It carries a film
   now: the lot 15 boundary drawing itself over the aerial, which is the plainest
   demonstration on either site that the work is drawn rather than decorated. */
/* THE PANEL SITS IN THE SPACE THE COPY LEAVES. Paul: "vertically centred
   between copy and base of view". The grid was two auto rows centred as a pair,
   so the dials tracked the length of the copy rather than the shape of the
   screen. auto + 1fr gives the copy exactly what it needs and hands the rest to
   the panel, which then centres inside it. Same rule reads correctly at every
   height, which two hand-tuned margins would not. */
.op-lead-in{display:grid;gap:clamp(22px,3.4vh,40px);width:100%;align-items:center}
@media(min-width:1000px){.op-lead-in{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(30px,4vw,64px)}}
/* THE CENTRING IS BACK, AND HERE IS WHY IT HAD TO BE.
   I replaced it with grid-template-rows:auto 1fr and height:100% to push the
   dials down. It did that, and it also drove the copy to y=48 on a phone, which
   is exactly where the 48px sticky header sits: Paul could not read the top of
   his own paragraph. The pair-centred layout leaves 97px of clearance and that
   clearance is doing a job.
   The dials got what was actually asked for by growing 15%, not by being
   repositioned into the header. */
.op-film{margin:0}

/* ---- the hero chart, round four: real monthly figures (400, 450, 500, 600, 700,
   800, 900, 1,020 — sourced from wildside-rebrand.html's own chart). Clay as an
   accent on the page's existing Night Reef ground. No REC/timecode: a chart has no
   real clock to read.
   The camera (.hc2-cam) is scale()+translate() with a FIXED transform-origin
   (50% 50%, never animated) rather than animating transform-origin itself — the
   earlier version re-pivoted the zoom at each stop, which reads as snapping
   between shots, not panning. translate() at a constant scale is a true pan: dx/dy
   per keyframe = (500-focusX, 280-focusY), so the maths center the target point
   without moving the pivot. Keyframe spacing shrinks as it goes (14/12/11/10/9/8/7/6%)
   so the pan visibly speeds up point to point, animation-timing-function stays
   linear throughout so CSS doesn't re-apply an ease at every one of the 9 stops
   (that repeated ease-in-out per segment was the other half of the "switching back
   and forth" complaint) — only the final pull-back keyframe gets its own easing,
   since it's a single isolated move, not one of many.
   The flat 23 months read as spaced dots, not a traced line, so nothing implies a
   continuous measurement across a period that was actually just one number held
   flat. A plain x-axis line sits under the date labels. ---- */
.hero-chart{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;overflow:hidden}
.hero-chart svg{width:100%;height:100%}
.hero-chart .hc2-cam{transform-origin:50% 50%;transform:scale(2.3) translate(170px,0px);
  animation:hc2-cam 4.6s linear forwards}
/* THE CHART ON A PHONE. Paul, 18 August 2026: "move graph and header up away
   from the headline to fill the space better."
   Measured at 390 before touching it: the hero runs 48 to 844, the chart paints
   336 to 470, and the headline starts at 507. So 288px of dead black sat above
   a 134px chart, which then crowded the H1 with 37px to spare. Desktop was
   already right, painting 59 to 559 against a 9px top gap, which is why this is
   scoped and not a change to the shared camera.
   The camera translate is in viewBox units and sits inside scale(), so a unit
   is worth scale x 0.39px on screen here. Values below were measured, not
   guessed, and the numbers are in the commit. */
@media(max-width:768px){
  /* The transform goes on the SVG, NOT on .hc2-cam. The camera runs
     `animation:hc2-cam 4.6s linear forwards`, and an animation with a forwards
     fill beats any static transform on the same element, so overriding the rule
     did nothing at all: measured, unchanged, 336 to 470 before and after.
     Transforming the parent composes with the animation instead of fighting it,
     and it carries the chart's own labels along with the plot, which is the
     "graph and header" moving together. */
  /* TRANSLATE ONLY. The scale(1.35) I shipped here widened the chart as well as
     raising it, and .hero-chart is overflow:hidden, so the graph was cropped 68px
     off each side of a 390 viewport. It passed my check because I tested document
     overflow, which a clipped child never triggers. The lesson is in the check,
     not the value: horizontal extent is now measured against the viewport. */
  .hero-chart svg{transform:translateY(-104px)}
}
.hero-chart .hc2-grid{stroke:rgba(232,227,215,.10)}
.hero-chart .hc2-axis{stroke:rgba(232,227,215,.22);stroke-width:1.5}
.hero-chart .hc2-ceillbl{fill:var(--ash);font-family:var(--count);font-size:20px;letter-spacing:.02em}
.hero-chart .hc2-mo{fill:var(--ash);opacity:0;animation:hc2-in .15s linear forwards}
.hero-chart .hc2-curve{stroke:var(--clay);stroke-width:6;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:650;stroke-dashoffset:650;animation:hc2-draw 3.55s linear .1s forwards}
.hero-chart .hc2-pt{fill:var(--reef);stroke:var(--clay);stroke-width:3;opacity:0;animation:hc2-in .3s ease forwards}
.hero-chart .hc2-pt--start{opacity:1;animation:none}
.hero-chart .hc2-ptl{fill:var(--bone);font-family:var(--disp);font-weight:700;font-size:20px;
  opacity:0;animation:hc2-in .3s ease forwards}
.hero-chart .hc2-now{fill:var(--clay);opacity:0;animation:hc2-in .4s ease forwards}
.hero-chart .hc2-nowl{fill:var(--clay);font-family:var(--disp);font-weight:800;font-size:38px;
  letter-spacing:-.01em;opacity:0;animation:hc2-in .5s ease forwards}
/* THE DATE LABELS ARE SVG TEXT IN A SCALED viewBox, which is why one number
   could never serve both ends. The svg is 1000 units wide and renders at the
   sheet width, so every user unit is multiplied by 1.44 at 1440 and by 0.39 at
   390. At 18 units these read 25.9px on a desktop, far past the 12.5px metadata
   register everything else on the site labels in, and 7px on a phone, which is
   below anything legible. Too big AND too small from the same declaration.
   11 units lands 15.8px at 1440. The phone gets its own number below, because
   scaling down is not the same problem as scaling up. */
.hero-chart .hc2-dl{fill:var(--ash);font-family:var(--count);font-size:11px;letter-spacing:.06em;
  opacity:0;animation:hc2-in .5s ease 3.9s forwards}
@keyframes hc2-cam{
  0%{transform:scale(2.3) translate(170px,0px)}
  14%{transform:scale(2.3) translate(109.4px,19.3px)}
  26%{transform:scale(2.3) translate(36.6px,38.7px)}
  37%{transform:scale(2.3) translate(-36.2px,58.1px)}
  47%{transform:scale(2.3) translate(-109px,97px)}
  56%{transform:scale(2.3) translate(-181.8px,135.8px)}
  64%{transform:scale(2.3) translate(-254.6px,174.6px)}
  71%{transform:scale(2.3) translate(-327.3px,213.4px)}
  77%{transform:scale(2.3) translate(-400px,260px);animation-timing-function:cubic-bezier(.25,.1,.25,1)}
  100%{transform:scale(1) translate(0,0)}
}
@keyframes hc2-draw{to{stroke-dashoffset:0}}
@keyframes hc2-in{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .hero-chart .hc2-cam{animation:none;transform:none}
  .hero-chart .hc2-curve{animation:none;stroke-dashoffset:0}
  .hero-chart .hc2-pt,.hero-chart .hc2-ptl,.hero-chart .hc2-now,.hero-chart .hc2-nowl,.hero-chart .hc2-dl,.hero-chart .hc2-mo{animation:none;opacity:1}
}
@media(max-width:640px){.hero-chart .hc2-ptl{font-size:16px}.hero-chart .hc2-nowl{font-size:30px}
  /* 11 units is 4.3px on a 390 phone. 28 units is 10.9px, which is the floor a
     letterspaced label can hold at this size, and it is the only way to get
     there while the text lives inside the scaled viewBox. */
  .hero-chart .hc2-dl{font-size:28px;letter-spacing:.04em}}

/* small source caption, the REC dot's old corner, no clock behind it so no ykc-tc.js
   binding: a plain label, never removed, never blinking (Signal Red stays for real
   live states only). The <em> line names what the figure actually is and whose it
   is — a proof line is the number, the window and the source, and "clicks per
   month, Wildside Adventures" was missing from the hero even though the source and
   the number both were already there. */
.hero-src{position:absolute;top:calc(clamp(24px,5vh,44px) + 18px);left:var(--pad);z-index:4;
  display:flex;flex-direction:column;gap:3px;
  font-family:var(--count);font-weight:500;font-size:var(--fs-meta);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash)}
.hero-src em{font-style:normal;font-weight:500;font-size:calc(var(--fs-meta) * .92);
  letter-spacing:.1em;opacity:.68}

/* ---- the PageSpeed dials, story screen: real before/after scores. Paul, 16 Aug
   2026: bring them into a tight square, grow the dial and the number, and let the
   colour grow into green as each one fills. Green sits outside the canonical
   palette (flagged, built anyway per direct instruction) — #3E8A63, chosen closer
   to the mark's own muted register than a bright traffic-light green. ---- */
.hd-panel{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vh,20px)}
.hd-eyebrow{font-family:var(--count);font-weight:500;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);text-align:center}
.hd-grid{display:inline-grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.4vw,16px);
  justify-content:center}
@media(min-width:520px) and (max-width:999px){.hd-grid{grid-template-columns:repeat(4,1fr)}}
.hd-dial{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
/* +15%, Paul 18 August 2026. The dials are the proof on this screen and they
   were sitting small in a lot of air: 104px on a phone with 49px of dead space
   under the panel. 104 -> 120 and 142 -> 163 is that 15%. */
.hd-dial svg{width:clamp(120px,12.1vw,163px);height:auto}
.hd-track{stroke:rgba(13,13,11,.14);fill:none;stroke-width:7}
.hd-arc{stroke:var(--ink);fill:none;stroke-width:7;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:50px 50px}
.hd-num{font-family:var(--disp);font-weight:800;font-size:32px;fill:var(--ink);transition:fill 1.1s linear}
.hd-dial.hd-done .hd-num{fill:#3E8A63}
.hd-was-in{font-family:var(--count);font-size:9px;letter-spacing:.04em;fill:var(--slate);opacity:.7}
.hd-label{font-family:var(--count);font-weight:500;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate)}
.hd-src{font-family:var(--count);font-size:10.5px;letter-spacing:.08em;color:var(--slate);opacity:.75;text-align:center}


/* ---- the plate ---- */
.pl2{position:relative;padding:clamp(40px,7vh,92px) 0 clamp(52px,9vh,120px)}
.pl2--blk{background:var(--black);color:var(--bone);
  --voice:var(--bone);--meta:var(--ash);--fig:var(--tung);--rule:rgba(232,227,215,.17);--rule-2:rgba(232,227,215,.3)}
.pl2--mid{background:var(--seal-mid);color:var(--ink);
  --voice:var(--ink);--meta:var(--slate);--fig:var(--ink);--rule:rgba(13,13,11,.18);--rule-2:rgba(13,13,11,.3)}
.pl2-rail{display:flex;justify-content:space-between;gap:20px;padding:0 var(--xedge) clamp(20px,3vh,34px);
  font-family:var(--count);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--meta)}
/* Same fault the .sh-rail carried, under a different name: two 42-character
   strings at 11px/.16em measure ~520px and cannot share a 358px phone line, so
   each wrapped and the rail cost 58px. Stepped down and pinned to the two
   edges, it is one line where it fits and two properly aligned ones where it
   does not. Never a centred stack. Paul, 17 August 2026. */
@media(max-width:759px){
  .pl2-rail{flex-wrap:wrap;font-size:9.5px;letter-spacing:.08em;gap:2px 14px}
  .pl2-rail>span{flex:1 1 auto}
  .pl2-rail>span:last-child{text-align:right}
}
/* marketing-far-north-queensland carries the longest pair on the site, 84
   characters against the 73 the other five run, so it alone still wrapped at
   the 9.5px step. One more notch clears it without dropping the rest of the
   set to a size they do not need. */
@media(max-width:409px){.pl2-rail{font-size:8.8px;letter-spacing:.05em}}
.pl2-grid{display:grid;gap:clamp(26px,4vh,44px);padding-inline:var(--xedge)}
@media(min-width:1000px){.pl2-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:clamp(34px,4.4vw,74px);align-items:start}}

/* the held column */
.pl2-hold{position:sticky;top:clamp(80px,12vh,120px);align-self:start}
.pl2-h{font-family:var(--banner-cond);font-weight:900;text-transform:uppercase;letter-spacing:-.05em;
  line-height:.8;margin:0 0 clamp(16px,2.4vh,26px) -.045em;font-size:clamp(36px,5.2vw,88px);color:var(--voice);text-wrap:balance}
.lede2{font-family:var(--prose);font-size:clamp(16px,1.15vw,17px);line-height:1.5;max-width:58ch;color:var(--voice);margin:0}
.etch2{height:9px;border-top:1px solid currentColor;opacity:.34;margin:clamp(20px,3vh,32px) 0;
  background:repeating-linear-gradient(135deg,currentColor 0 1px,transparent 1px 6px)}
.rows2{border-top:2px solid var(--voice)}
.row2{display:grid;grid-template-columns:minmax(112px,.42fr) minmax(0,1fr);gap:4px 20px;
  padding:12px 0;border-bottom:1px solid var(--rule)}
.row2 .k{font-family:var(--count);font-weight:500;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--meta);padding-top:3px}
.row2 .v{font-family:var(--prose);font-size:15.5px;line-height:1.5;color:var(--voice)}
.rows2--fig .row2{grid-template-columns:minmax(112px,.42fr) minmax(0,1fr) auto;align-items:baseline}
.row2 .f{font-family:var(--disp);font-weight:700;font-size:clamp(24px,2.6vw,42px);line-height:.9;
  letter-spacing:-.02em;color:var(--voice)}
.row2--crown .f{color:var(--fig)}
.pl2-link{display:inline-block;margin-top:clamp(18px,2.6vh,28px);font-family:var(--count);font-weight:500;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--voice);
  border-bottom:1px solid var(--fig);padding-bottom:3px;text-decoration:none}

/* the running column */
.pl2-run{display:grid;gap:clamp(16px,2.6vh,30px);min-width:0}
.lbx{position:relative}
.lbx-frame{position:relative;overflow:hidden;background:#0B0B0A;aspect-ratio:2.39/1}
.lbx-frame video{display:block;width:100%;height:100%;object-fit:cover}
.lbx-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;
  transform:translate3d(0,calc(var(--d,0) * 1px),0);will-change:transform}
/* the long frame holds the WHOLE desktop page and lets it travel through */
.lbx-frame--long{aspect-ratio:auto;height:clamp(300px,58vh,620px)}
.lbx-frame--long img{height:auto;object-fit:fill;position:absolute;top:0;left:0;
  transform:translate3d(0,calc(var(--y,0) * -1px),0)}
.lbx-bar{display:flex;justify-content:space-between;gap:14px;padding:8px 10px;background:#0B0B0A;
  font-family:var(--count);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.lbx-bar .rec{display:inline-flex;align-items:center;gap:6px}
.lbx-bar .rec i{width:6px;height:6px;border-radius:50%;background:var(--red)}

/* the layered element: sits inside the running column, only breaking upward
   over the video above it (Paul, 12 Aug 2026: pulled back off the seam, it
   was bleeding into the held column's text on narrower run columns). */
.pull2{position:relative;z-index:3;margin:clamp(-26px,-3vh,-14px) 0 0 0;
  background:var(--voice);color:var(--black);padding:clamp(14px,2vh,22px) clamp(16px,2vw,26px);
  font-family:var(--prose);font-size:clamp(18px,1.9vw,28px);line-height:1.3;max-width:22ch}
.pl2--mid .pull2{background:var(--ink);color:var(--seal)}
.pull2 cite{display:block;margin-top:9px;font-family:var(--count);font-weight:500;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;font-style:normal;opacity:.72}

@media(max-width:999px){
  .pl2-hold{position:static}
  .pull2{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .op{height:auto;pointer-events:auto}
  .pl2--blk[data-plate]{margin-top:0 !important}.op-stage{position:static;height:auto;overflow:visible}
  .op-card{position:static;clip-path:none;min-height:70vh}
  .op-beneath{position:static;padding-block:clamp(40px,8vh,80px)}
  .pl2-hold{position:static}
  .lbx-frame img{transform:none}
}


/* ============================================================
   THE INCLUDES STACK (websites), 9 August 2026. Paul: put this section in the
   same style as the homepage method. So it is the homepage's `.hx-stack`
   language ported into the stylesheet, since index.html carries its own copy
   and does not load this file.

   Rows stack, reveal on their own clock, and the one being read fills the panel
   beside them. The Clay left edge is the homepage's active marker, kept so the
   two surfaces read as one system.
   ============================================================ */
.wb{display:grid;gap:clamp(22px,3.4vw,54px);align-items:start;margin-top:clamp(26px,4vh,52px)}
@media(min-width:900px){.wb{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.wb-stack{display:flex;flex-direction:column;gap:3px;min-width:0}
.wb-l{--o:1;position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:8px 16px;
  align-items:baseline;padding:clamp(10px,1.5vh,17px) clamp(14px,1.5vw,22px);
  border:1px solid rgba(232,227,215,.26);border-left-width:5px;
  border-left-color:rgba(228,150,142,var(--o));background:rgba(232,227,215,.05);
  opacity:var(--o);transform:translateY(calc((1 - var(--o)) * 22px));cursor:default;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1),
    background .4s cubic-bezier(.22,.61,.36,1),border-color .4s cubic-bezier(.22,.61,.36,1)}
.js .wb-stack.on .wb-l{--o:clamp(0, calc((var(--b,1) - (0.03 + var(--i) * 0.125)) / 0.115), 1)}
.wb-l .n{font-family:var(--count);font-weight:500;font-size:11px;letter-spacing:.16em;color:var(--ash)}
.wb-l .t{font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(19px,2.4vw,36px);line-height:.9;letter-spacing:.004em;color:var(--bone)}
.wb-l .p{font-family:var(--count);font-weight:500;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash);text-align:right}
.wb-l.on,.wb-l:hover,.wb-l:focus-visible{background:var(--black);outline:0}
.wb-l.on .t,.wb-l:hover .t{color:var(--bone)}

/* the panel beside them: whichever row is being read */
.wb-panel{border-top:3px solid var(--clay);padding-top:16px;min-height:190px;align-self:start}
.wb-pk{font-family:var(--count);font-weight:500;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash)}
.wb-pt{font-family:var(--banner-cond);font-weight:900;text-transform:uppercase;
  font-size:clamp(28px,3.4vw,58px);line-height:.86;letter-spacing:-.04em;color:var(--bone);
  margin:clamp(8px,1.2vh,14px) 0 clamp(10px,1.6vh,18px)}
.wb-pd{font-family:var(--prose);font-size:16px;line-height:1.5;color:var(--ash);margin:0;max-width:44ch}
.wb-pfoot{display:grid;gap:6px 30px;margin-top:clamp(16px,2.4vh,26px);padding-top:12px;
  border-top:1px solid rgba(232,227,215,.2);font-family:var(--count);font-weight:500;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
@media(min-width:560px){.wb-pfoot{grid-template-columns:auto auto;justify-content:start;gap:6px clamp(24px,4vw,54px)}}
.wb-pfoot b{color:var(--bone);font-weight:500}
@media(prefers-reduced-motion:reduce){.wb-l{transform:none;opacity:1}}

/* ═══════════════════════════════════════════════════════════════════════════
   THE SHEET — the reference-article archetype. The Record, Side A.
   Built 17 August 2026. Every Record post inherits this and the YKC blog
   skill generates against it. Nothing in this block is page-specific.

   WHY IT EXISTS. Measured on `get-mentioned-by-chatgpt.html` before the
   rebuild: 558 words, one link in the body, one transparent band 3,706px
   tall, zero images, zero figures, no og:image. Type and measure were
   already correct, so this was never a tokens fault. It was one kind of
   object at one scale in one colour on one flat fill, which is the exact
   diagnosis v6 s6 made of method.html, the deadest page on the site.

   THE COMPOSITION. A document, not a blog post. Three columns above 1000px:
   a gutter carrying the section numeral and its rule, a reading column held
   at the 58ch body measure, and an open right margin that notes and figures
   float into. Asymmetric by construction. The sheet runs edge to edge; the
   text is contained by measure, never by a box (v6 s6).

   THE BAND SEQUENCE, and why it is legal. Black title card, Seal White
   index, Seal White spine, Seal Mid plate, Seal White spine, Clay rail,
   then the site's black closer. Clay is present, so the balance law lifts
   the ration on black (v6 s4). No two identical grounds sit adjacent.

   CONTRAST. Computed, none eyeballed.
     black card  H1 and answer Bone 15.38 · byline Ash 8.57 · serial Tungsten 9.33
     Seal White  body Ink 17.68 · numerals and metadata Slate 9.87
     Seal Mid    body Ink 13.54 · metadata Slate 7.56
     Clay        body Ink 8.39 · metadata Slate 4.68 · no crown, Tungsten is 1.10

   THE ONE THAT BITES. Assay is 3.47 on Seal White and 2.66 on Seal Mid, so
   it is banned as small text on both. Every letterspaced label on paper in
   this block is Slate. That is the live breach `ykc-site verify` found on
   four pages; the archetype must not add a fifth. Assay appears here only
   as a rule, which is its licensed role.

   MOTION. Nothing is gated. Every element paints at its final opacity with
   JS off and under reduced motion, and the .ar-in classes only enhance an
   already-visible default. The sitewide ykc-reveal.js fault (an observer
   that never fires in a background tab leaves content at opacity:0) must
   not be inherited by the one page built to receive strangers from search.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- the sheet's own measures ---- */
.ar{
  font-size:17px;                  /* the reading size, and what 58ch is measured in */
  --h1-article:clamp(49px,6.6vw,79px);  /* +10% desktop, Paul 17 Aug. 390 floor held */
  --fs-body:17px;
  --ar-gut:0px;                    /* the numeral gutter, desktop only */
  --ar-gap:clamp(18px,2.4vw,38px); /* gutter to column */
  --ar-col:58ch;                   /* the body measure, 55 to 60ch */
  --ar-note:38ch;                  /* the note measure, 36 to 44ch */
}
@media(min-width:1000px){ .ar{--ar-gut:clamp(58px,6vw,104px)} }
/* Above 1600 the apparatus widens rather than leaving the right third of the
   sheet dead. The reading column never moves: 58ch is the measure and a wider
   screen is not a reason to break it. The gutter and the note take the room. */
@media(min-width:1600px){ .ar{--ar-gut:clamp(104px,8vw,190px);--ar-note:42ch} }

/* ─── 1. THE TITLE CARD ───────────────────────────────────────────────────
   True Black. Carries the provenance frame: the serial is the sheet's one
   crowned moment, so nothing else on this card wears gold. ---------------- */
.ar-card{padding-top:0;padding-bottom:clamp(16px,2.2vh,26px);border-top:0;overflow:hidden}
.ar-card .sh-rail{border-bottom:1px solid var(--line-b2)}
.ar-card .sh-rail b{color:var(--bone)}   /* the disc label wears the gold now */
.ar-cardin{padding:clamp(30px,6vh,74px) 0 0}
/* margin-left keeps .xp-colossal's -.05em optical inset. Meno 900 sets its
   glyphs above the line box, so the air under it is budgeted double (v6 s6). */
.ar-h1{color:var(--bone);max-width:20ch;text-wrap:balance;margin:0 0 0 -.05em}
@media(max-width:819px){.ar-h1{margin-left:0}}
.ar-byl{display:flex;flex-wrap:wrap;gap:6px clamp(14px,2vw,26px);align-items:baseline;
  margin:clamp(18px,2.6vh,30px) var(--xedge) 0;padding-top:14px;
  border-top:1px solid var(--line-b2);
  font-family:var(--count);font-weight:500;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ash);line-height:1.3}
.ar-byl b{color:var(--bone);font-weight:500}
.ar-byl a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
/* the hook. one emphasis moment on the card, and the line the hub quotes. */
.ar-hook{font-family:var(--prose);font-size:clamp(20px,2.5vw,34px);line-height:1.3;
  color:var(--bone);margin:clamp(20px,3.4vh,38px) var(--xedge) 0;
  max-width:26ch;text-wrap:pretty}

/* ─── THE PRESSING, CONTINUED ONTO THE SHEET ──────────────────────────────
   The hub is the rack. The sheet is the record playing. It REUSES the hub's
   turntable artwork and its .tr-* rules rather than drawing a second disc,
   because two discs in one register is two registers. It spins on trSpin,
   1.8s linear, which is 33 1/3 RPM exactly, and it crops at the right edge so
   it reads as a record half out of its sleeve rather than a logo in a corner.

   THE CROWN MOVES. The disc label is Tungsten, so it becomes the sheet's one
   crowned moment and the rail's serial steps back to Bone. Two golds on one
   card is two crowns, which the crown rule closes.

   IT IS DECORATIVE AND IT MUST STAY THAT WAY. aria-hidden, and the H1 beside
   it is real, visible text. The visually-hidden-heading licence lapsed on 16
   August when Paul took the words off the centre label, so a graphic here may
   never be carrying the heading. -------------------------------------------- */
.ar-cardin{position:relative}
/* Paul, 17 Aug: the card carried too much dead space, the record fills it, and
   the byline rule is licensed to run across the record rather than stop short
   of it. So the disc takes a much wider column and spans only the H1 and the
   hook; the byline spans the whole sheet and draws OVER the disc, which is why
   it carries a z-index. */
@media(min-width:900px){
  .ar-cardin{display:grid;grid-template-columns:minmax(0,1fr) clamp(414px,46vw,782px);
    align-items:center;gap:clamp(20px,3vw,54px)}
  /* the H1 and the hook are ONE grid item. As separate items the record spanned
     their two rows and stretched both, so making the disc bigger opened a gap
     above the hook and another below it: more dead space, not less. */
  .ar-cardtxt{grid-column:1;grid-row:1;align-self:center}
  .ar-cardin>.ar-lp{grid-column:2;grid-row:1/-1;align-self:center}
  .ar-cardin>.ar-byl{grid-column:1/-1;grid-row:2;position:relative;z-index:2}
}
.ar-cardtxt>.ar-hook{margin-top:clamp(20px,3.4vh,38px)}
.ar-lp{display:block;width:100%;height:auto;max-width:100%;overflow:visible;
  margin-right:calc(var(--xedge) * -1 - 15%)}  /* crop hard at the sheet edge */
/* 56% and NO max-height. max-height was capping the disc at 150px tall, which
   put the whole viewBox at 0.28 scale and rendered the serial at 8.4px. The
   width is what the scale must be set by. At 56% the disc is 218px and the
   serial clears 12px at every width from 390 up. */
@media(max-width:899px){
  .ar-lp{width:56%;margin:0 calc(var(--xedge) * -1 - 12%) clamp(18px,3vh,26px) auto}
}
/* Paul, 17 August 2026: "Bring headline and sub copy up and overlay the record
   if you need to." The disc is right-aligned at 56%, so on a 390 phone it holds
   x234 to x452 and the 234px to its left is empty black. The negative margin
   lifts the whole text block into that space. The overlap is safe by geometry:
   the disc is a circle, so its lower-left is air, and the disc face is #080807
   against a #0B0B0A band, which is not a contrast event for Bone text. */
@media(max-width:899px){
  .ar-cardin{padding-top:clamp(12px,2.2vh,26px)}
  .ar-lp{margin-bottom:calc(clamp(72px,11vh,104px) * -1)}
}
@media(prefers-reduced-motion:reduce){.ar-lp .tr-disc{animation:none}}

/* ─── 2. THE INDEX ────────────────────────────────────────────────────────
   The short answer, then the contents. The numerals and titles match the
   hub's track list exactly, so the two surfaces can never disagree. ------- */
.ar-abs{margin:0 var(--xedge);max-width:var(--ar-col);
  border-top:2px solid var(--ink);padding-top:15px}
.ar-abs .eyebrow{margin-bottom:9px}
.ar-abs p{font-family:var(--prose);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--ink);margin:0;text-wrap:pretty}
.ar-toc{list-style:none;margin:clamp(30px,5vh,60px) 0 0;padding:0;
  border-top:1px solid var(--line)}
.ar-toc li{border-bottom:1px solid var(--line)}
.ar-toc a{display:grid;grid-template-columns:auto auto 1fr auto;gap:clamp(12px,1.8vw,22px);
  align-items:baseline;padding:clamp(12px,2vh,18px) var(--xedge);
  color:var(--ink);transition:background .22s cubic-bezier(.22,.61,.36,1)}
.ar-toc a:hover{background:var(--seal-mid)}
.ar-toc .n{font-family:var(--count);font-weight:500;font-size:12px;letter-spacing:.16em;
  color:var(--slate)}                              /* Slate 9.87. never Assay */
.ar-toc .t{font-family:var(--text);font-weight:600;font-size:clamp(16px,1.7vw,21px);min-width:0}
.ar-toc .ld{border-bottom:1px dotted var(--line-2);transform:translateY(-4px)}
/* The arrow sits where a printed contents puts the page number, at the right
   margin with the leader running to it. It stays visible: a leader with an
   invisible destination is a rule that goes nowhere. Full Slate at 9.87, so
   it is never an alpha-composited contrast question. */
.ar-toc .go{font-family:var(--count);font-weight:500;font-size:12px;color:var(--slate);
  transition:color .22s,transform .22s cubic-bezier(.22,.61,.36,1)}
.ar-toc a:hover .go,.ar-toc a:focus-visible .go{color:var(--ink);transform:translateX(4px)}

/* ─── 3. THE SPINE ────────────────────────────────────────────────────────
   Numeral in the gutter, prose at the measure, apparatus in the margin. -- */
.ar-spine{padding-block:0}
.ar-sec{display:grid;grid-template-columns:var(--ar-gut) minmax(0,var(--ar-col));
  column-gap:var(--ar-gap);padding:clamp(38px,6.4vh,78px) var(--xedge);
  border-top:1px solid var(--line)}
.ar-sec:first-child{border-top:0}
/* Paul, 17 August 2026: "the left hand margin is too much here, match it to the
   section below it". The spine read 34px left against 16px right, and the plate
   underneath it read 16px, so the two blocks did not line up. The 18px was the
   column-gap still being charged for a gutter that is 0 wide below 1000. A gap
   beside an empty column is not a margin, it is an accident. */
@media(max-width:999px){.ar-sec{column-gap:0}}
.ar-gutter{grid-column:1;grid-row:1/span 99;display:none}
@media(min-width:1000px){.ar-gutter{display:block;position:sticky;top:calc(var(--lb) + 26px);height:max-content}}
.ar-no{display:block;font-family:var(--count);font-weight:700;font-size:clamp(20px,1.9vw,28px);
  letter-spacing:.04em;line-height:1;color:var(--slate)}
.ar-tick{display:block;width:100%;height:1px;background:var(--assay);margin-top:13px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.ar-sec.ar-in .ar-tick{transform:scaleX(1)}
.ar-body{grid-column:2;min-width:0;position:relative}
/* the mobile numeral: the gutter's job, done inline, above the heading */
.ar-nom{font-family:var(--count);font-weight:500;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);display:block;margin-bottom:11px}
@media(min-width:1000px){.ar-nom{display:none}}
/* SECTION SUBHEADS SET TITLE CASE. Paul, 17 August 2026, and it amends
   guidelines v6 s5 ("H1 and H2 shout in caps") for this one role: caps are a
   headline setting and these are running subheads inside a body of text, where
   all-caps Meno reads as a sign rather than a heading.

   The case ladder still holds and arguably reads better for it: the H1 shouts
   in caps, the subhead speaks in Title Case, the H3 murmurs in lowercase.
   BAND TITLES (.ar-plateh, .ar-railh) KEEP THEIR CAPS. They open a band rather
   than sit inside a column of prose, which is the shout the law is about.

   Two values have to move with the case and this is why:
   - tracking -.05em to -.02em. Negative tracking exists to close the gaps caps
     leave; lowercase already fits tightly and -.05em jams the counters.
   - leading .8 to .9. Caps have no descenders, so .8 is safe on them and
     collides ascender into descender the moment lowercase arrives. */
.ar-h2{font-family:var(--banner-cond);font-weight:900;text-transform:none;
  line-height:.9;letter-spacing:-.02em;margin:0 0 0 -.015em;
  font-size:clamp(27px,3.2vw,49px);color:var(--ink);text-wrap:balance}
/* the answer line. One serif size holds (Paul, 4 Aug), so the answer is marked
   by structure rather than by scale: it is the only paragraph touching the
   2px rule that opens the section. */
.ar-a{font-family:var(--prose);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--ink);margin:clamp(26px,3.6vh,40px) 0 0;padding-top:15px;
  border-top:2px solid var(--ink);text-wrap:pretty}
.ar-p{font-family:var(--prose);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--ink);margin:1.05em 0 0;text-wrap:pretty}
.ar-body>.ar-p:first-of-type{margin-top:1.35em}
.ar-p a,.ar-a a,.ar-li a{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--assay);text-underline-offset:3px;
  transition:text-decoration-color .2s}
.ar-p a:hover,.ar-a a:hover,.ar-li a:hover{text-decoration-color:var(--ink)}
/* the numbered run inside a section: the ledger register, not a bullet list */
.ar-ol{list-style:none;margin:clamp(22px,3vh,34px) 0 0;padding:0;
  border-top:1px solid var(--line)}
.ar-li{display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,1.6vw,20px);
  padding:clamp(13px,2vh,19px) 0;border-bottom:1px solid var(--line);
  font-family:var(--prose);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--ink)}
.ar-li>.n{font-family:var(--count);font-weight:500;font-size:12px;letter-spacing:.16em;
  color:var(--slate);padding-top:.32em}
.ar-li b{font-weight:400;font-style:italic}        /* emphasis without weight (v6 s5) */

/* the margin note. Floats into the open right margin above 1160px and falls
   back to a ruled inline block below it. The float sits entirely outside the
   content box, so the reading measure never changes. */
.ar-note{font-family:var(--prose);font-style:italic;font-size:15.5px;line-height:1.5;
  color:var(--slate);margin:1.4em 0 .4em;padding-top:12px;
  border-top:1px solid var(--line-2);max-width:var(--ar-note)}
.ar-note b{font-style:normal;font-weight:500;font-family:var(--count);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);
  display:block;margin-bottom:7px}
@media(min-width:1160px){
  .ar-note{float:right;clear:right;width:var(--ar-note);
    margin:.35em calc(-1 * (var(--ar-note) + var(--ar-gap))) 1.5em var(--ar-gap)}
}

/* the pull quote. A lift from the section it sits beside, set at the sanctioned
   pull size in Ink. It repeats body copy by design, which is why it carries
   aria-hidden: a screen reader must not read the sentence twice.

   WHY IT ONLY FLOATS AT 1360 AND NOT AT 1160 LIKE THE NOTE. Measured. The note
   sets 15.5px, so 38ch is 349px and the margin holds it from 1160 up. A pull
   quote at 21px has a 12.4px ch, so the SAME 36ch floor needs 448px. At 1160
   the margin has 380px, which would force the quote to about 28ch: below the
   36ch floor and inside the band the measure rule bans outright. At 1440 the
   margin has 620px and it fits with room. So above 1360 it floats, and below
   it sets in the reading column at the body measure, which is a legal place
   for it and still breaks up the text. */
/* IN COLUMN it sets at BODY SIZE, and that is not timidity, it is the measure
   law. `ch` resolves against the element's own font-size, so a 20px pull held
   at the column's 58ch box measures 46ch of itself: between the 44ch note
   measure and the 55ch body measure, which is the band the rule bans outright.
   At body size the same box is 58ch of itself and legal. It is marked by rules
   and by italic instead of by scale, which is also how emphasis works in body
   copy here (colour, case, italic, never weight).
   FLOATED it shares its row with the body copy, which licenses the note
   measure, so it takes 36ch of the pull size and can be the size it wants. */
/* ITALIC AND BOLD, Paul 17 Aug 2026. THE 700 IS REAL, measured the same day:
   document.fonts.check("700 20px meno-text") returns false on a cold page and
   TRUE after document.fonts.load, both 700 faces then report `loaded`, and the
   glyph widths differ from the 400s (221.47 vs 227.27 roman, 206.34 vs 223.48
   italic). Kit hlx5mct serves it. CLAUDE.md's note that the 700s are
   "unassigned" meant unassigned in OUR css, not unserved, and nothing on the
   site had ever used it. This is the first thing that does.
   It is a departure from "emphasis in body carries no weight change", and the
   licence is that a pull quote is a display object rather than body emphasis. */
.ar-pull{font-family:var(--prose);font-style:italic;font-weight:700;
  font-size:var(--fs-body);
  line-height:var(--lh-body);color:var(--ink);margin:clamp(26px,3.4vh,38px) 0;
  padding:14px 0;border-block:2px solid var(--ink);max-width:var(--ar-col);
  text-wrap:pretty}
@media(min-width:1360px){
  .ar-pull{font-size:clamp(21px,1.5vw,22px);line-height:1.3;
    --ar-pullw:36ch;width:var(--ar-pullw);max-width:none;
    float:right;clear:right;border-bottom:0;padding-bottom:0;
    margin:.5em calc(-1 * (var(--ar-pullw) + var(--ar-gap))) 1.7em var(--ar-gap)}
}

/* the figure. Documentary of real work, or a real place. Never a library image
   (guidelines v6 s8), so this component has no decorative mode: if there is no
   real artefact to show, there is no figure. Floats with the note at 1160,
   because a figure has no measure to breach. FIG. captions run in the counting
   register per the instrument. */
/* font-size pins the ch that --ar-note is measured in, so the figure and the
   note come out the same width. Without it the figure floated 403px against
   the note's 349px and overflowed the sheet by 3px at 1160. */
/* THE ITALIC CH TRAP, measured 17 Aug 2026. --ar-note is 38ch, and `ch` is the
   width of "0" in THE ELEMENT'S OWN FONT. The note is italic and the figure is
   roman, and Meno Text's italic zero is 11 percent narrower, so one variable
   produced 349px on the note and 391px on the figure and the two would not
   line up in the same margin. font-style here is not a visual choice: the img
   ignores it and the caption declares italic itself. It exists to make the two
   ch resolve identically. If the note ever stops being italic, drop it. */
.ar-fig{font-family:var(--prose);font-style:italic;font-size:15.5px;
  margin:clamp(24px,3.4vh,34px) 0;max-width:var(--ar-col)}
.ar-fig img{display:block;width:100%;height:auto;background:var(--seal-mid)}
.ar-fig figcaption{margin-top:11px;padding-top:9px;border-top:1px solid var(--line-2);
  font-family:var(--prose);font-style:italic;font-size:15.5px;line-height:1.45;
  color:var(--slate)}
.ar-fig figcaption b{font-style:normal;font-weight:500;font-family:var(--count);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);
  display:block;margin-bottom:6px}
@media(min-width:1160px){
  .ar-fig{float:right;clear:right;width:var(--ar-note);max-width:none;
    margin:.35em calc(-1 * (var(--ar-note) + var(--ar-gap))) 1.6em var(--ar-gap)}
}

/* ─── 4. THE PLATE ────────────────────────────────────────────────────────
   The receipt. A slot, not a rule: filled when the subject has real data,
   left out when it does not. Seal Mid, so it steps down in paper from the
   spine either side of it. Assay carries no structure here (2.66) so the
   rules are Slate and Ink. ---------------------------------------------- */
.ar-plate{padding-block:clamp(42px,7vh,92px)}
.ar-plate .sh-rail{margin-bottom:clamp(24px,4vh,44px);padding-inline:0;
  border-bottom-color:var(--line-2)}
.ar-plateh{font-family:var(--banner-cond);font-weight:900;text-transform:uppercase;
  line-height:.8;letter-spacing:-.05em;margin:0 var(--xedge) 0 calc(var(--xedge) - .05em);
  font-size:clamp(34px,3vw,44px);color:var(--ink)}
.ar-pcap{font-family:var(--prose);font-style:italic;font-size:15.5px;line-height:1.5;
  color:var(--slate);margin:clamp(16px,2.4vh,24px) var(--xedge) 0;max-width:44ch}
.ar-led{margin:clamp(28px,4.4vh,52px) 0 0;border-top:2px solid var(--ink)}
.ar-lrow{display:grid;grid-template-columns:auto 1fr;gap:4px clamp(14px,2vw,26px);
  align-items:baseline;padding:clamp(13px,2vh,18px) var(--xedge);
  border-bottom:1px solid var(--line-2)}
@media(min-width:820px){.ar-lrow{grid-template-columns:auto minmax(0,26ch) 1fr}}
.ar-lrow .n{font-family:var(--count);font-weight:500;font-size:12px;letter-spacing:.16em;
  color:var(--slate)}
.ar-lrow .k{font-family:var(--text);font-weight:600;font-size:clamp(15.5px,1.5vw,19px);
  color:var(--ink)}
.ar-lrow .v{font-family:var(--prose);font-size:var(--fs-body);line-height:1.45;
  color:var(--ink);grid-column:2/-1}
@media(min-width:820px){.ar-lrow .v{grid-column:3}}
.ar-src{display:block;margin:clamp(16px,2.4vh,22px) var(--xedge) 0;
  font-family:var(--count);font-weight:500;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--slate)}

/* ─── 5. THE FAQ ──────────────────────────────────────────────────────────
   Reuses the site's dossier accordion. Held at the reading measure so it
   sits in the same column as the prose above it. ------------------------ */
.ar-faq{padding:clamp(38px,6.4vh,78px) var(--xedge);border-top:1px solid var(--line)}
.ar-faqin{max-width:calc(var(--ar-col) + var(--ar-gut) + var(--ar-gap))}
@media(min-width:1000px){.ar-faqin{margin-left:calc(var(--ar-gut) + var(--ar-gap));
  max-width:var(--ar-col)}}

/* ─── 6. THE RAIL ─────────────────────────────────────────────────────────
   Clay, the one per surface. It marks what the eye goes to next, which on a
   reference article is the work behind it and the page that sells it. This
   is where the internal links live as furniture rather than scattered
   through the prose. No crown: Tungsten on Clay is 1.10. ---------------- */
.ar-rail{padding-block:clamp(40px,6.4vh,84px)}
.ar-railh{font-family:var(--banner-cond);font-weight:900;text-transform:uppercase;
  line-height:.8;letter-spacing:-.05em;font-size:clamp(30px,4vw,62px);
  margin:0 var(--xedge) clamp(24px,4vh,44px) calc(var(--xedge) - .05em);color:var(--ink)}
.ar-links{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ar-links li{border-bottom:1px solid var(--line)}
.ar-links a{display:grid;gap:3px clamp(14px,2vw,28px);align-items:baseline;
  padding:clamp(14px,2.2vh,20px) var(--xedge);color:var(--ink);
  transition:background .22s cubic-bezier(.22,.61,.36,1)}
@media(min-width:760px){.ar-links a{grid-template-columns:minmax(0,22ch) 1fr auto}}
.ar-links a:hover{background:rgba(13,13,11,.07)}
.ar-links .k{font-family:var(--count);font-weight:500;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate)}
.ar-links .t{font-family:var(--text);font-weight:600;font-size:clamp(16px,1.7vw,21px)}
.ar-links .go{font-family:var(--count);font-weight:500;font-size:12px;color:var(--slate);
  justify-self:start}
@media(min-width:760px){.ar-links .go{justify-self:end}}
/* the signature. Long-form artefacts may close signed (v6 s7). */
.ar-sign{margin:clamp(30px,5vh,58px) var(--xedge) 0;padding-top:16px;
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;
  gap:5px clamp(14px,2vw,24px);align-items:baseline;
  font-family:var(--count);font-weight:500;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--slate)}
.ar-sign b{color:var(--ink);font-weight:500}

/* ─── THE PROGRESS RULE ───────────────────────────────────────────────────
   Measures something real, so it is furniture rather than decoration. Assay
   is licensed as a rule (its role is rules, borders and the seal); it is
   never text here. Sits under the nav and yields entirely to reduced
   motion. -------------------------------------------------------------- */
.ar-prog{position:fixed;left:0;right:0;top:var(--lb);height:2px;z-index:55;
  background:var(--assay);transform:scaleX(var(--p,0));transform-origin:left;
  pointer-events:none}
@media(prefers-reduced-motion:reduce){.ar-prog{display:none}}

/* ─── MOTION ──────────────────────────────────────────────────────────────
   Enhancement only. Every rule below animates FROM a visible state, so a
   reader with JS off, a background tab or reduced motion sees the finished
   page rather than an empty one. ---------------------------------------- */
/* The H1 is NOT animated here. ykc-hero.js selects .h1-article and types it,
   which is Paul's 16 August ruling that every header title types; a second
   entrance on the same element fights the typewriter's own caret timing. */
.js .ar-card .ar-hook,.js .ar-card .ar-byl{
  animation:ar-set .95s cubic-bezier(.22,.61,.36,1) both}
.js .ar-card .ar-hook{animation-delay:.5s}
.js .ar-card .ar-byl{animation-delay:.62s}
@keyframes ar-set{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
.js .ar-toc li{animation:ar-set .7s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:calc(.05s * var(--i,0) + .1s)}
@media(prefers-reduced-motion:reduce){
  .js .ar-card .ar-hook,.js .ar-card .ar-byl,.js .ar-toc li{animation:none}
  .ar-tick{transition:none;transform:scaleX(1)}
}


/* ═══ THE SELECTION ═══════════════════════════════════════════════════════
   Paul, 17 Aug 2026: browser blue on a Seal White sheet is the one colour on
   the page nobody chose. Clay is the answer by definition rather than by
   taste, because v6 s4 says Clay "marks what is active, what is being read
   now, what the eye should go to next", which is what a selection is.

   The pairing is closed by arithmetic. On Clay the voice is Ink at 8.39, and
   Bone on Clay is 1.81, so the selected text is forced to Ink EVERYWHERE,
   including inside the black title card and the reef bands where the running
   colour is Bone. Without the colour declaration a selection on black would
   drop to 1.81 the moment it painted.

   The one Clay band inverts, because Clay on Clay is nothing: there the
   selection is Ink ground with Seal White text at 17.68.

   This is not the "one Clay band per surface" rule. That governs bands. A
   selection is a transient state, it exists only while a reader is holding
   it, and it is never on screen at load. ------------------------------- */
::selection{background:var(--clay);color:var(--ink);text-shadow:none}
.band.xp-clay ::selection,.ar-rail ::selection{background:var(--ink);color:var(--seal)}


/* ═══ THE CLOSER AND THE FOOTER ON A PHONE, Paul 17 Aug 2026 ═══════════════
   THE BEIGE BELOW THE FOOTER IS THE OVERSCROLL CANVAS, not a stray element:
   the document ends exactly at the footer (measured, gap 0), and iOS paints
   the bounce area with the BODY background, which is paper. Every page on
   this site opens on a black nav and ends on a black footer, so the canvas
   takes black and the rubber band stops showing a colour that belongs to the
   middle of the page. Setting it on html rather than body keeps the paper
   ground doing its job everywhere in between.
   ══════════════════════════════════════════════════════════════════════════ */
html{background:#0B0B0A}

@media(max-width:768px){
  /* MAKE IT BETTER fills its band. 10.5vw put it at 41px in a 392px band. */
  .closing .title{font-size:clamp(44px,15vw,110px)}
  /* the footer runs two columns on a phone, not one long list */
  .foot-cols{grid-template-columns:repeat(2,1fr)}

  /* ── THE FOOTER ON A PHONE. Paul, 19 August 2026. ──────────────────────
     Heads to Bone. Gold on this surface is the certification layer and the
     footer is not a crowned view, so Tungsten was reading as decoration.
     Bone on black computes 15.38.
     The Mission Beach line down 15 percent, 14px to 11.9px, Ash on black 8.57.
     The socials left-align. They were 9px left of the type above them and the
     glyph sat further left again, because .site-foot .foot-cols a sets
     width:100% and it was catching the social links too: 38px boxes rendering
     84px wide, so the -9px optical nudge was aimed at a box that had moved.
     Boxes back to 38, and the nudge is half the slack between the 38px target
     and the 18px glyph, which puts the glyph on the column's own left edge.
     The link rows go to 38px. Paul asked for 30 percent off the leading in
     columns 1 to 3, which lands them at 31px; they were raised 40 -> 44 on
     18 August for footer links he had to tap twice, so 31 walks straight back
     into the fault. Offered the trade, he chose the middle at 38 on 19 August:
     about 14 percent off the row, 6px under the 44px floor rather than 13.
     Recorded as a known, deliberate exception, not an oversight. Cell padding
     and the head's drop come in on top of it. */
  .foot-cols h4{color:var(--bone);margin-bottom:8px}
  .foot-cols>div{padding:clamp(15px,2vh,20px) clamp(16px,1.6vw,24px)}
  .foot-cols p{font-size:11.9px}
  .site-foot .foot-social{margin-top:8px;margin-left:-10px;gap:2px}
  .site-foot .foot-cols .foot-social a{width:38px;min-width:38px;flex:0 0 38px}
}


/* ═══ THE CASE-STUDY SECTION HEADER ════════════════════════════════════════
   Paul, 17 Aug 2026: the same numeral treatment the homepage sections take.
   There the numeral is the object, the label sits under it, and the title
   right-aligns. A case page has no right-hand title, its H2 IS the headline
   and sits below, so this carries the numeral and the label only, at the same
   scale and in the same place.
   Slate on paper at 9.87. Assay is 3.47 and 2.66 and is never small text here.
   ══════════════════════════════════════════════════════════════════════════ */
/* ONE LINE, 19 August 2026. Paul, on Headland: "make sure all eyebrows have
   the # smaller and on same line as the page name, can stay bold but utilise
   space better by being on one line." He asked for the same thing on Wildside
   on 18 August and it was fixed there page-level, which left Headland and Nala
   on the old stacked form. Promoted here so the three case pages share one
   rule instead of one of them carrying a private copy.
   The numeral is a marker, not a headline: 30px on its own line in a 48px block
   became 15 to 19 sitting on the label's baseline, in 18px. Still 700. */
.cs-hd{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;margin:0 0 clamp(12px,2vh,20px);
  font-family:var(--count);font-weight:500;text-transform:uppercase;color:var(--meta)}
.cs-hd .n{font-weight:700;font-size:clamp(15px,1.2vw,19px);line-height:1.1;letter-spacing:.02em}
.cs-hd .l{font-size:var(--fs-meta);letter-spacing:.16em;margin-top:0}


/* ═══ THE H1 ON A PHONE, SITE WIDE, Paul 17 Aug 2026 ═══════════════════════
   The floors above carry the +20 percent. This carries the leading: .8 is a
   desktop setting where a colossal has room to breathe, and on a phone where
   every title wraps to three or four lines it closes the lines into a block.
   Desktop is untouched.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Every H1 on the site, whatever class it carries: title hero-title,
     ct-colossal, xm-colossal, sh-title, h1-split, h1-article, tr-h1, hx-h1.
     The class list alone did not hold, because .xp-on .title.hero-title is a
     0,3,0 compound (the trap CLAUDE.md records) and won on three pages. A
     global type ruling against a dozen per-page rules is the case !important
     is for; it sets line-height only and nothing else is forced. */
  h1{line-height:.88!important}
}

/* ══ TOUCH DEVICES HAVE NO HOVER, AND SAFARI CHARGES A TAP FOR PRETENDING ══
   Paul, 17 August 2026: "buttons need two clicks to work." On iOS the first
   tap paints the :hover state and only the second activates the link. This
   sheet carried 52 hover rules and not one hover:hover gate, so every button
   on every page cost two taps.

   Where the pointer cannot hover, the hover state is reset to base. The tap
   then has nothing left to reveal and fires first time. :active carries the
   feedback instead, which is the correct affordance on a phone anyway: press,
   not hover. The wipe still runs on every pointer device.

   overscroll-behavior-y stops the rubber band scrolling on past the footer
   into the page ground, which reads as the page not ending where it ends. */
@media(hover:none){
  .cta:hover::before,.btn:hover::before,.close-cta:hover::before,
  .nav-cta:hover::before,.prc-cta:hover::before,.mnav-cta:hover::before,
  .tr-read a:hover::before{transform:scaleX(0)}
  .cta:hover,.btn:hover,.nav-cta:hover,.close-cta:hover,.prc-cta:hover,
  .mnav-cta:hover,.nav-links a:hover,.foot-cols a:hover,.mnav-links a:hover,
  .brand:hover,.dropdown-menu a:hover,a:hover{color:inherit}
  .tr-read a:hover,.tr-read a:focus-visible{background:var(--ink);color:var(--seal)}
  .ar-toc a:hover{background:transparent}
  /* the press state, which is what a phone actually has */
  .cta:active::before,.btn:active::before,.close-cta:active::before,
  .nav-cta:active::before,.prc-cta:active::before,
  .mnav-cta:active::before{transform:scaleX(1);transition:transform .18s ease-out}
  .cta:active,.btn:active,.nav-cta:active,.close-cta:active,
  .prc-cta:active,.mnav-cta:active{color:var(--ink)}
  .tr-read a:active{background:var(--tung);color:var(--ink)}
  .ar-toc a:active{background:var(--seal-mid)}
}
/* a hover-fill that can swallow the tap it is decorating is a bug, not a wipe */
.cta::before,.btn::before,.close-cta::before,.nav-cta::before,
.prc-cta::before,.mnav-cta::before{pointer-events:none}
html{overscroll-behavior-y:none}

/* ══ THE iOS PLAY BADGE, AND WHY IT IS HIDDEN ═════════════════════════════
   Paul, 18 August 2026, describing what he actually sees: "the videos with a
   play icon, not playing."

   That glyph is diagnostic. iOS draws its start-playback button only when it
   has REFUSED to autoplay. A missing file, an unplayable codec or a delivery
   fault gives you a bare poster with no affordance and tapping does nothing.
   His start on tap, so the media is fine and a policy is saying no. Nothing in
   the code can overrule that policy: Safari's per-site Auto-Play setting and
   iOS Low Data Mode both block muted inline autoplay outright.

   What code CAN do is stop the refusal looking like a fault. Every film on this
   site is a background layer behind type, never a thing to press, so a default
   OS play button over it reads as broken rather than as a still. Hidden here,
   the poster stands as a composed frame and ykc-video.js starts the film on the
   first gesture. Tapping still works: the button is chrome, not the hit area.

   Applies only where a video is decorative background. Anything a reader is
   meant to press deliberately must NOT be given this class. */
video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
video::-webkit-media-controls-overlay-play-button{display:none!important}
.hero-vid::-webkit-media-controls,.hx-film video::-webkit-media-controls,
.hx-wfilm video::-webkit-media-controls{display:none!important}

/* ══ THE HOVER RESET, COMPLETED ═══════════════════════════════════════════
   The first pass at this reset was a hand-picked list and it only ever reset
   `color`. Auditing every :hover rule on the site turned up eight more
   properties in play: opacity, transform, background, border-color, filter,
   text-decoration and visibility. A rule this one missed still paints on the
   first tap, which is the behaviour it was written to stop.
   So this resets the PROPERTIES rather than guessing the selectors. Anything
   that can be hovered gets its hover appearance pinned to its resting one where
   the pointer cannot hover, and :active carries the feedback. */
@media(hover:none){
  a:hover,button:hover,summary:hover,[role="button"]:hover,
  .hx-svc span:hover,.hx-r:hover,.hx-t:hover,.hero-btn:hover,
  .prc-sub a:hover,.hx-plink a:hover,.dropdown-menu a:hover,
  .foot-social a:hover,.site-foot .foot-cols h4 a.fl-home:hover,
  .nav-links a:hover,.audit-b .btn.btn:hover{
    opacity:inherit;transform:none;filter:none;text-decoration:inherit}
  .ex-media:hover video{transform:none;filter:saturate(.9) contrast(1.05) sepia(.05) brightness(.92)}
  .hx-r:hover,.hx-t:hover,.dropdown-menu a:hover{background:transparent}
  /* a press state, because that is the affordance a phone actually has */
  a:active,button:active{opacity:.72}
}