/* ============================================================
   DUSC shared brand tokens — SINGLE SOURCE OF TRUTH (R005)
   ------------------------------------------------------------
   The canonical v2 dark brand palette, shared by BOTH front-end
   surfaces:
     - apps/www  (Hugo marketing site, [data-theme="v2"])
     - apps/web  (Next.js auth front-door, .auth-shell)

   This is a PLAIN CSS file (no package.json, not a workspace
   package — see R005 Decision D2). Each app opts in by adding the
   `dusc-brand` class to its shell element and DELETES its own copy
   of these declarations; CSS custom-property inheritance carries
   the values to every descendant, so existing `var(--midnight)`
   etc. references resolve unchanged.

   DELIVERY (how this file reaches each pipeline — Decision D2):
     - apps/www: PREPENDED to the v2-theme compile input by
       apps/www/scripts/build-css.mjs (the FONT_FACE pattern). That
       script has no postcss-import; prepending the raw content is
       deterministic and version-robust. The compiled artifact
       apps/www/assets/css/v2-theme.css carries this block inline,
       with no residual @import at-rule.
     - apps/web: a relative `@import` of this file as the FIRST
       physical line of apps/web/src/app/(auth)/auth-theme.css.
       Next's @tailwindcss/postcss pipeline inlines that @import.

   SHARED vs LOCAL boundary (the documented contract):
     - SHARED (here): the colour palette below — names BOTH apps
       reference.
     - app-LOCAL (NOT here): geometry (--radius/--gutter),
       extra tints (--paper*, --icy-2, --ocean-2, --orange-2,
       --ash, --stone-2) and the font bindings (--display/--body/
       --mono) are www-only or have different per-app plumbing, so
       they stay in each app's own stylesheet.
     - INTENTIONAL LOCAL OVERRIDES (Decision D3 — preserve current
       pixels): apps/web/auth-theme.css re-declares `--icy` and
       `--rule` on `.auth-shell` with its historically-drifted
       values (--icy #b8d4d9, --rule rgba(...,0.12)). Those
       overrides win at equal specificity because auth-theme.css
       declares them AFTER its `@import` of this file. Do NOT
       "reconcile" them here without an explicit visual-diff
       sign-off — that is a separate, approved follow-up.

   To CHANGE or ADD a token: edit ONLY this file (see
   packages/brand/README.md). The brand-guard
   (apps/web/src/test/brand-guard.test.ts) enforces that neither
   app re-declares a shared name as a raw literal (except the D3
   allowlist), so drift cannot silently reappear.

   Plan: docs/planning/refactors/R005-shared-brand-tokens.md
   ============================================================ */
.dusc-brand {
  /* core canvas + surface greens */
  --midnight: #0d2024;
  --midnight-2: #112a2f;
  --midnight-3: #173238;
  --ocean: #175b6e;

  /* cool accent — CANONICAL is www's #bdd5db (apps/web keeps its
     drifted #b8d4d9 as a documented .auth-shell local override, D3) */
  --icy: #bdd5db;

  /* warm accent (M003 WCAG AA split): --orange decorative,
     --orange-btn button fill (white ≈ 5.47:1), --orange-text small
     text/labels (AA on all dark surfaces) */
  --orange: #dc4a2a;
  --orange-btn: #bf3a1c;
  --orange-text: #f07a4e;

  /* neutral warm grey */
  --stone: #b6b1a8;

  /* paper-ink text ladder on the dark canvas */
  --ink: #f4f0ea;
  --ink-2: rgba(244, 240, 234, 0.78);
  --ink-3: rgba(244, 240, 234, 0.55);

  /* hairline rules — CANONICAL is www's 0.1 (apps/web keeps 0.12 as
     a documented .auth-shell local override, D3) */
  --rule: rgba(244, 240, 234, 0.1);
  --rule-2: rgba(244, 240, 234, 0.2);
}

/* ============================================================
   F052 Homepage v2 — scoped dark theme
   ------------------------------------------------------------
   A REWRITE (not a mechanical wrap) of the committed design CSS
   `docs/planning/features/F052-design.css`. Every rule lives in
   `@layer v2` and every selector is scoped to `[data-theme="v2"]`
   (the HomepageV2Shell root element — built in Task 4).

   Rule split (see v2 Chrome Architecture):
   - Wrapper-element rules (the design's `:root` / `body` / `*`
     box-sizing / canvas paint incl. `overflow-x:hidden`) apply to
     the `[data-theme="v2"]` root element ITSELF.
   - Descendant rules (`a`, `h1-h4`, `::selection`, utilities,
     components) are `[data-theme="v2"] …`.

   Transformations applied vs the design source:
   - `:root` → `[data-theme="v2"]` (token block).
   - `--display/--body/--mono` literal 'Archivo'/'Inter'/'JetBrains
     Mono' strings → the `next/font/local` CSS-variable bridge
     (`var(--font-archivo)` …, defined in `src/fonts/v2-fonts.ts`).
   - design `html, body { margin/padding: 0 }` → expressed as a
     reset on the wrapper root (no bare `html`/`body` selectors).
   - design `body { … overflow-x: hidden }` rehomed to the shell
     root element (a nested div cannot clip viewport overflow).
   - ALL design `@font-face` dropped (fonts come from next/font).
   - `@keyframes ticker` → `@keyframes v2-ticker`.
   - `.wrap` ported verbatim, scoped (NOT `Container`).
   ============================================================ */

@layer v2 {
  /* -- tokens + wrapper-root canvas (design `:root` + `body`) -- */
  [data-theme="v2"] {
    /* ---- SHARED brand palette (R005) ----
       The canonical shared v2 colour tokens — --midnight / -2 / -3,
       --ocean, --icy, --orange / --orange-btn / --orange-text,
       --stone, --ink / -2 / -3, --rule / --rule-2 — are NO LONGER
       declared here. They live ONCE in packages/brand/tokens.css on
       the `.dusc-brand` class (added to <body> in baseof.html) and
       are PREPENDED to this file's compile input by build-css.mjs
       (the FONT_FACE pattern). Every `var(--…)` reference below
       resolves via CSS inheritance from that block. To change a
       SHARED colour, edit packages/brand/tokens.css — NOT this file.
       See docs/planning/refactors/R005-shared-brand-tokens.md
       and packages/brand/README.md. */

    /* ---- www-ONLY tokens (NOT shared; they stay here) ---- */
    --ocean-2: #1f7184;
    --icy-2: #d6e6ea;
    --orange-2: #ec5a3a;
    /* M003 WCAG AA contrast split (research 2026-06-13): a single orange
       cannot pass BOTH white-on-fill AND orange-text-on-midnight at 4.5:1.
       The shared trio --orange (decorative: dots, gradients, glow),
       --orange-btn (button fill, white ≈ 5.47:1) and --orange-text
       (small text/labels, AA on all dark surfaces) now live in
       packages/brand/tokens.css. --orange-2 (hover tint) is www-only
       and stays here. */
    --ash: #6e6864;
    --stone-2: #d2cdc4;
    /* token bridge — design literals replaced with next/font vars */
    --display: var(--font-archivo), system-ui, sans-serif;
    --body: var(--font-inter), system-ui, sans-serif;
    --mono: var(--font-jetbrains), ui-monospace, monospace;

    /* ---- "Workbook" redesign tokens (home-redesign exploration) ---- */
    /* light "paper gear-shift" panel — brand Stone (#d2cdc4). On-paper accent
       darkened for WCAG AA on the light surface (#b23a1e on Stone ≈ 4.2:1 large,
       paired with --paper-ink for small labels). */
    --paper: #d2cdc4;
    --paper-ink: #1c211f;
    --orange-paper: #882c12; /* AA on Stone #d2cdc4 ≈ 5.5:1 (small-text kicker) */
    --radius: 12px;
    /* The editorial grid is a single fluid content column. It was a fixed
       margin rail + fluid column until F053-A collapsed the rail track to zero;
       the `--rail` token that sized it is gone with it. */
    --gutter: clamp(22px, 4vw, 56px);

    /* design `html, body { margin: 0; padding: 0 }` (wrapper reset) */
    margin: 0;
    padding: 0;

    /* design `body { … }` canvas — rehomed to the shell root so
       `overflow-x: hidden` clips at the homepage scroll/clip root */
    box-sizing: border-box;
    background: var(--midnight);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  /* design `* { box-sizing: border-box }` — descendants of the root */
  [data-theme="v2"] * {
    box-sizing: border-box;
  }

  [data-theme="v2"] ::selection {
    background: var(--orange);
    color: var(--midnight);
  }

  [data-theme="v2"] a {
    color: inherit;
    text-decoration: none;
  }

  /* .wrap — ported verbatim, scoped (v2 blocks use .wrap, NOT Container) */
  [data-theme="v2"] .wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 48px;
  }
  @media (max-width: 720px) {
    [data-theme="v2"] .wrap {
      padding: 0 22px;
    }
  }

  /* ----------------------------------------------------------------
     M003 Phase 4 (overflow fix) — responsive header nav.

     The header markup (v2-header.html) inline-styles `.v2-desktop-nav`
     with `display:flex` and renders the `.v2-mobile-toggle` hamburger +
     `#v2-mobile-menu` panel unconditionally. Without a breakpoint the
     full desktop nav + CTA + hamburger all lay out at every width, so at
     375px the row is ~827px wide — horizontal overflow that the body's
     `overflow-x:hidden` silently MASKS (caught only by the numeric
     scrollWidth gate in e2e/overflow.spec.ts, never by eye/visual-diff).

     Fix: a single breakpoint at 860px (the nav stops fitting below it).
     - Desktop (>860): show the inline-flex desktop nav; hide the
       hamburger + the mobile panel.
     - Mobile (<=860): hide the desktop nav (`!important` is required to
       beat the inline `display:flex`); show the hamburger; the panel
       stays JS-[hidden]-toggled.
     Selectors stay literally `[data-theme="v2"]`-prefixed (no
     :where()/:is()) so lint-v2-scope.mjs's startsWith check passes. */
  [data-theme="v2"] .v2-mobile-toggle {
    display: none;
  }
  @media (max-width: 860px) {
    [data-theme="v2"] .v2-desktop-nav {
      display: none !important;
    }
    [data-theme="v2"] .v2-mobile-toggle {
      display: inline-flex;
    }
    /* Hide the desktop header CTA at mobile too: logo (213px) + CTA (189px) +
       hamburger (32px) cannot share a 375px row (they sum to ~458px). The
       hamburger menu is the mobile nav affordance and every page body carries
       its own ctaV2 CTA. The element STAYS in the DOM (display:none, not
       removed) so the session-cta swap still finds [data-testid=v2-header-cta]
       and the assert-routes presence check still passes; a display:none element
       cannot cause CLS. */
    [data-theme="v2"] [data-v2-header] [data-testid="v2-header-cta"] {
      display: none;
    }
  }
  @media (min-width: 860.01px) {
    [data-theme="v2"] #v2-mobile-menu {
      display: none !important;
    }
  }

  /* DISPLAY — Archivo, wide width axis */
  [data-theme="v2"] .display {
    font-family: var(--display);
    font-weight: 800;
    font-stretch: 125%;
    letter-spacing: -0.02em;
    line-height: 0.92;
    text-transform: uppercase;
  }
  [data-theme="v2"] .display-2 {
    font-family: var(--display);
    font-weight: 700;
    font-stretch: 110%;
    letter-spacing: -0.005em;
    line-height: 1.05;
  }
  [data-theme="v2"] .roc {
    font-family: var(--display);
    font-weight: 500;
    font-stretch: 115%;
    letter-spacing: -0.005em;
  }
  [data-theme="v2"] .mono {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  [data-theme="v2"] h1,
  [data-theme="v2"] h2,
  [data-theme="v2"] h3,
  [data-theme="v2"] h4 {
    margin: 0;
    font-weight: 600;
  }

  /* button */
  /* M-redesign: rounded, mixed-case editorial button (one system site-wide). */
  [data-theme="v2"] .btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 28px;
    font-family: var(--display);
    font-stretch: 108%;
    font-weight: 680;
    font-size: 14px;
    letter-spacing: 0.02em;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s, background 0.2s, color 0.2s, box-shadow 0.2s;
  }
  [data-theme="v2"] .btn-primary {
    background: var(--orange-btn); /* M003 AA: white-on-#bf3a1c ≈ 5.47:1 */
    color: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0), 0 8px 24px -8px rgba(220, 74, 42, 0.6);
  }
  [data-theme="v2"] .btn-primary:hover {
    /* M003 AA: white-on-`--orange-2` (#ec5a3a) is only 3.45:1; keep the AA fill
       on hover and convey hover via the lift transform + box-shadow instead. */
    background: var(--orange-btn);
    transform: translateY(-1px);
  }
  [data-theme="v2"] .btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--rule-2);
  }
  [data-theme="v2"] .btn-ghost:hover {
    background: rgba(244, 240, 234, 0.06);
    border-color: var(--icy);
  }

  [data-theme="v2"] .arr {
    transition: transform 0.2s;
  }
  [data-theme="v2"] .btn:hover .arr {
    transform: translateX(3px);
  }

  /* gradient bg used for hero/cta */
  [data-theme="v2"] .gradient-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }
  [data-theme="v2"] .gradient-bg::before,
  [data-theme="v2"] .gradient-bg::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.7;
  }
  [data-theme="v2"] .gradient-bg::before {
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, var(--orange) 0%, transparent 70%);
    top: -10vw;
    right: -15vw;
  }
  [data-theme="v2"] .gradient-bg::after {
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, var(--ocean) 0%, transparent 70%);
    bottom: -15vw;
    left: -10vw;
  }

  /* gradient card backgrounds for tiles */
  [data-theme="v2"] .grad-orange-blue {
    background:
      radial-gradient(ellipse at 80% 10%, var(--orange) 0%, transparent 55%),
      radial-gradient(ellipse at 20% 90%, var(--ocean) 0%, transparent 60%),
      var(--midnight-2);
  }
  [data-theme="v2"] .grad-blue-orange {
    background:
      radial-gradient(ellipse at 20% 20%, var(--ocean) 0%, transparent 60%),
      radial-gradient(ellipse at 90% 80%, var(--orange) 0%, transparent 55%),
      var(--midnight-2);
  }
  [data-theme="v2"] .grad-stone {
    background:
      radial-gradient(ellipse at 70% 30%, var(--orange) 0%, transparent 50%),
      radial-gradient(ellipse at 30% 80%, var(--stone) 0%, transparent 60%),
      var(--midnight-2);
  }

  /* ticker — @keyframes ticker renamed v2-ticker (theme-leak guard) */
  @keyframes v2-ticker {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
  [data-theme="v2"] .ticker {
    display: flex;
    width: max-content;
    animation: v2-ticker 50s linear infinite;
  }
  /* Reduced motion: disable the marquee (F052 Task 7 a11y contract) */
  @media (prefers-reduced-motion: reduce) {
    [data-theme="v2"] .ticker {
      animation: none;
      flex-wrap: wrap;
      width: 100%;
    }
  }

  /* hover row arrow accent */
  [data-theme="v2"] .row {
    transition: background 0.2s;
  }
  [data-theme="v2"] .row:hover {
    background: rgba(244, 240, 234, 0.025);
  }
  [data-theme="v2"] .row:hover .row-num {
    color: var(--orange-text); /* M003 AA: text on midnight ≈ 4.86:1 */
  }
  [data-theme="v2"] .row:hover .row-cta {
    color: var(--orange-text); /* M003 AA: text on midnight ≈ 4.86:1 */
    transform: translateX(4px);
  }
  [data-theme="v2"] .row-cta {
    transition: color 0.2s, transform 0.2s;
  }

  /* section header label dot */
  [data-theme="v2"] .label-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--orange);
    border-radius: 50%;
    margin-right: 12px;
    vertical-align: middle;
  }

  /* grid lines decoration (net-new owner: StatementSection — Task 11) */
  [data-theme="v2"] .gridlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(to right, var(--rule) 1px, transparent 1px);
    background-size: 25% 100%;
    opacity: 0.4;
  }

  /* ============================================================
     M003 Phase 2 — net-new design-system CSS
     Reading panel, dark-theme focus ring, reduced-motion guards.
     All selectors are literally `[data-theme="v2"]`-prefixed (no
     :where()/:is() — the scope lint does a literal startsWith).
     ============================================================ */

  /* -- 2.1 Reading panel (`.v2-paper`) + full prose element set -- */
  /* Light paper surface on the dark canvas for long-form reading.
     paper (--ink #f4f0ea) on midnight ≈ 14.81:1; dark ink body text. */
  [data-theme="v2"] .v2-paper,
  [data-theme="v2"] .v2-reading {
    background: var(--ink);
    color: var(--midnight);
    max-width: min(720px, 65ch); /* readable measure (research: 65ch optimal) */
    margin-inline: auto;
    padding: 2.5rem 2rem; /* 40px / 32px generous internal whitespace */
    border-radius: 6px;
    /* Glare softening: hairline ring + depth + lift to kill the hard
       light-on-near-black edge (research-recommended triple shadow). */
    box-shadow:
      0 0 0 1px rgba(244, 240, 234, 0.1),
      0 4px 24px rgba(0, 0, 0, 0.4),
      0 1px 4px rgba(0, 0, 0, 0.25);
  }
  @media (max-width: 720px) {
    [data-theme="v2"] .v2-paper,
    [data-theme="v2"] .v2-reading {
      padding: 1.75rem 1.5rem; /* keep a 24px mobile gutter to the viewport */
      max-width: 100%;
    }
  }

  /* Prose body type — Inter (--body). Authored so the panel ink wins
     regardless of any stray ancestor text-colour utility (selectors below
     set colour explicitly on each prose element, not just the container). */
  [data-theme="v2"] .v2-paper p {
    font-family: var(--body);
    color: var(--midnight);
    line-height: 1.7;
    margin-block: 1.25em;
  }
  [data-theme="v2"] .v2-paper h2,
  [data-theme="v2"] .v2-paper h3,
  [data-theme="v2"] .v2-paper h4 {
    font-family: var(--body);
    color: var(--midnight);
    font-weight: 700;
    line-height: 1.25;
    margin-block: 2em 0.5em;
  }
  [data-theme="v2"] .v2-paper h2 {
    font-size: 1.75rem;
  }
  [data-theme="v2"] .v2-paper h3 {
    font-size: 1.375rem;
  }
  [data-theme="v2"] .v2-paper h4 {
    font-size: 1.125rem;
  }
  [data-theme="v2"] .v2-paper ul,
  [data-theme="v2"] .v2-paper ol {
    color: var(--midnight);
    padding-inline-start: 1.5em;
    margin-block: 1em;
  }
  [data-theme="v2"] .v2-paper li {
    color: var(--midnight);
    line-height: 1.7;
    margin-block: 0.35em;
  }
  [data-theme="v2"] .v2-paper blockquote {
    color: var(--ash);
    border-inline-start: 3px solid var(--ocean);
    padding-inline-start: 1em;
    margin-inline: 0;
    margin-block: 1.5em;
    font-style: italic;
  }
  /* pre/code keep the dark v2 palette inside the light panel (research note:
     code surfaces read better retaining a dark background). */
  [data-theme="v2"] .v2-paper pre {
    background: var(--midnight-2);
    color: var(--ink);
    padding: 1rem 1.25rem;
    border-radius: 4px;
    overflow-x: auto;
    margin-block: 1.5em;
  }
  [data-theme="v2"] .v2-paper pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: 0.875em;
  }
  [data-theme="v2"] .v2-paper code {
    background: rgba(13, 32, 36, 0.08);
    color: var(--midnight);
    padding: 0.15em 0.35em;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.875em;
  }
  [data-theme="v2"] .v2-paper table {
    border-collapse: collapse;
    width: 100%;
    margin-block: 1.5em;
    color: var(--midnight);
  }
  [data-theme="v2"] .v2-paper th,
  [data-theme="v2"] .v2-paper td {
    border: 1px solid rgba(13, 32, 36, 0.2);
    padding: 0.5rem 0.75rem;
    text-align: left;
  }
  [data-theme="v2"] .v2-paper th {
    font-weight: 700;
  }
  [data-theme="v2"] .v2-paper img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-block: 1.5em;
  }
  [data-theme="v2"] .v2-paper hr {
    border: none;
    border-block-start: 1px solid rgba(13, 32, 36, 0.15);
    margin-block: 2em;
  }

  /* Body-copy link affordance (WCAG 1.4.1). The global v2 rule
     `a { color: inherit; text-decoration: none }` makes links vanish on
     paper — restore an AA-contrast underlined link.
     ocean (--ocean #175b6e) on paper (#f4f0ea) ≈ 6.71:1 PASS. */
  [data-theme="v2"] .v2-paper a {
    color: var(--ocean);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
  [data-theme="v2"] .v2-paper a:hover {
    color: var(--midnight);
    text-decoration-thickness: 2px;
  }

  /* -- 2.2 Dark-theme :focus-visible (WCAG 2.4.11) -- */
  /* icy (--icy #bdd5db) on midnight ≈ 10.97:1 PASS. The globals.css base
     ring (ocean-blue ≈ 1.88:1 on midnight) fails on the dark canvas. */
  [data-theme="v2"] :focus-visible {
    outline: 2px solid var(--icy);
    outline-offset: 2px;
  }
  /* Inside the light paper the icy ring is only ≈ 1.41:1 — override to ocean
     (≈ 6.71:1 on paper) so the ring stays visible on the reading surface. */
  [data-theme="v2"] .v2-paper :focus-visible {
    outline-color: var(--ocean);
  }

  /* -- 2.4 Reduced-motion guards (WCAG 2.3.3) -- */
  /* The `.ticker` marquee is already guarded above. Neutralise the remaining
     CSS-driven motion that now runs site-wide under v2 chrome.
     NOTE: the JS-driven sticky-header blur transition in v2-shell.js still
     needs a matchMedia('(prefers-reduced-motion)') guard — that JS change is
     OUT of scope here (Task 3 / chrome owner). */
  @media (prefers-reduced-motion: reduce) {
    [data-theme="v2"] .btn,
    [data-theme="v2"] .btn-primary,
    [data-theme="v2"] .btn-ghost {
      transition: background 0.01ms, color 0.01ms, box-shadow 0.01ms;
    }
    [data-theme="v2"] .btn-primary:hover,
    [data-theme="v2"] .btn-ghost:hover {
      transform: none;
    }
    [data-theme="v2"] .arr,
    [data-theme="v2"] .btn:hover .arr {
      transform: none;
      transition: none;
    }
    [data-theme="v2"] .row,
    [data-theme="v2"] .row-cta {
      transition: none;
    }
    [data-theme="v2"] .row:hover .row-cta {
      transform: none;
    }
    /* NOTE: global `scroll-behavior: smooth` is gated at its source in
       globals.css @layer base (`@media (prefers-reduced-motion: no-preference)`)
       — it lives on `html`, which `data-theme="v2"` (on <body>) cannot override
       for viewport scrolling, so it is fixed there, not here. */
  }

  /* ============================================================
     "WORKBOOK" REDESIGN (home-redesign exploration → production)
     ------------------------------------------------------------
     Port of design-explorations/home-redesign/styles.css. Every
     class is namespaced `wb-` (the prototype's bare .grid/.stat/
     .hero/.row would collide with Tailwind utilities + the existing
     v2 classes) and every selector is `[data-theme="v2"]`-prefixed
     (lint-v2-scope.mjs). Orange text/labels use the AA tokens
     (--orange-text on dark, --orange-paper on the Stone panel); only
     decorative graphics use bare --orange. Keyframes renamed wb-*.
     ============================================================ */

  /* -- brand "dusk" wash: soft blurred orange↔ocean -- */
  [data-theme="v2"] .wb-dusk {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }
  [data-theme="v2"] .wb-dusk::before,
  [data-theme="v2"] .wb-dusk::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
  }
  [data-theme="v2"] .wb-dusk::before {
    width: 60vw;
    height: 60vw;
    top: -22vw;
    right: -12vw;
    background: radial-gradient(circle at 50% 50%, rgba(220, 74, 42, 0.5), rgba(220, 74, 42, 0) 66%);
  }
  [data-theme="v2"] .wb-dusk::after {
    width: 58vw;
    height: 58vw;
    bottom: -26vw;
    left: -14vw;
    background: radial-gradient(circle at 50% 50%, rgba(31, 113, 132, 0.55), rgba(31, 113, 132, 0) 66%);
  }

  /* orange "." accent (DUSC.DEV / "Your turn.") — AA text token on dark */
  [data-theme="v2"] .wb-o {
    color: var(--orange-text);
  }

  /* -- the editorial shell: rail + content column -- */
  [data-theme="v2"] .wb-band {
    position: relative;
  }
  /* F053-A "centred measure": the rail track is collapsed to zero, NOT deleted.
     A dozen band rules place their content with `grid-column: 2`; removing the
     first track drops that content into an IMPLICIT second column and scatters
     the left axis (measured: 6 different axes, 500px spread). A 0 track with a
     0 column-gap keeps every existing placement valid and puts column 2 flush
     against the page gutter — one shared left axis for every band.

     The rail carried a running index until the evidence pass (bc909eb0) emptied
     it; no content sets `railTick` any more, so the track was reserving ~270px
     of every band for nothing. See F053-home-page-balance.md. */
  [data-theme="v2"] .wb-grid {
    display: grid;
    grid-template-columns: 0 minmax(0, 1fr);
    column-gap: 0;
    max-width: 1180px;
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  /* Zero-WIDTH, not display:none — removing the rail from grid auto-placement
     drops band content that has no explicit `grid-column` (the hero) into the
     0px track and blows the page height out (measured: 7,040 -> 11,898px).
     A consequence: a `railTick` set in front matter would render inside this
     clipped box and be invisible. Nothing sets one; restoring the rail means
     restoring the track width too. */
  [data-theme="v2"] .wb-railcol {
    position: relative;
    width: 0;
    overflow: hidden;
  }
  [data-theme="v2"] .wb-rail-tick {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    position: sticky;
    top: 120px;
  }
  /* contents passthrough so block children land on the rail's content column */
  [data-theme="v2"] .wb-flow {
    display: contents;
  }
  @media (max-width: 760px) {
    /* Collapse the rail to a plain padded block. A 1-col grid left the bands'
       `grid-column: 2` content in an auto implicit track (wrong/extra left
       inset); as a block, both the hero's auto-placed content and the bands'
       grid-column:2 content flow normally inside the gutter padding. */
    [data-theme="v2"] .wb-grid {
      display: block;
    }
    [data-theme="v2"] .wb-railcol {
      display: none;
    }
  }

  /* -- hand-drawn underline on accent words -- */
  [data-theme="v2"] .wb-underline-mark {
    position: relative;
    color: var(--orange-text);
    white-space: nowrap;
  }
  [data-theme="v2"] .wb-underline-mark svg {
    position: absolute;
    left: -2%;
    bottom: -0.28em;
    width: 104%;
    height: 0.5em;
    overflow: visible;
  }
  [data-theme="v2"] .wb-underline-mark path {
    fill: none;
    stroke: var(--orange);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: var(--len, 400);
    stroke-dashoffset: var(--len, 400);
    transition: stroke-dashoffset 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s;
  }
  [data-theme="v2"] .wb-lit .wb-underline-mark path {
    stroke-dashoffset: 0;
  }

  /* -- scroll reveal -- */
  /* TRANSFORM-ONLY (no opacity): an opacity fade leaves text at partial alpha
     mid-transition, which the axe color-contrast gate (a11y.spec.ts runs at
     domcontentloaded, motion enabled) catches as a false low-contrast failure.
     A pure translate keeps every text node at full contrast at all times while
     preserving the slide-up reveal. */
  [data-theme="v2"] .wb-reveal {
    transform: translateY(26px);
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: transform;
  }
  [data-theme="v2"] .wb-reveal.wb-lit {
    transform: none;
  }
  [data-theme="v2"] .wb-reveal[data-d="1"] {
    transition-delay: 0.08s;
  }
  [data-theme="v2"] .wb-reveal[data-d="2"] {
    transition-delay: 0.16s;
  }
  [data-theme="v2"] .wb-reveal[data-d="3"] {
    transition-delay: 0.24s;
  }
  [data-theme="v2"] .wb-reveal[data-d="4"] {
    transition-delay: 0.32s;
  }

  /* -- shared section header (kicker + title), used across bands -- */
  [data-theme="v2"] .wb-sec-head {
    grid-column: 2;
    margin-bottom: 36px;
  }
  [data-theme="v2"] .wb-sec-kicker {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--orange-text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
  }
  [data-theme="v2"] .wb-sec-head .wb-sub {
    margin: 18px 0 0;
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 54ch;
  }
  [data-theme="v2"] .wb-sec-title {
    font-family: var(--display);
    font-weight: 600;
    font-stretch: 115%;
    letter-spacing: -0.02em;
    font-size: clamp(34px, 5vw, 70px);
    margin: 0;
    max-width: 22ch;
    line-height: 1;
    color: var(--ink);
  }

  /* ============== HERO ============== */
  /* Top padding clears the FIXED overlay header (the hero's plot/dusk bleed up
     behind the transparent nav, as in the prototype). */
  [data-theme="v2"] .wb-hero {
    padding: 150px 0 90px;
    position: relative;
    overflow: hidden;
  }
  /* (Mobile hero compaction lives in a single @media block near the END of the
     layer — it must come AFTER the hero base rules to win the cascade.) */
  [data-theme="v2"] .wb-plot {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(var(--rule) 1px, transparent 1px),
      linear-gradient(90deg, var(--rule) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(120% 90% at 75% 0%, #000 25%, transparent 72%);
    mask-image: radial-gradient(120% 90% at 75% 0%, #000 25%, transparent 72%);
    opacity: 0.5;
  }
  [data-theme="v2"] .wb-crosshair {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
  }
  [data-theme="v2"] .wb-crosshair span {
    position: absolute;
    background: rgba(220, 74, 42, 0.18);
  }
  [data-theme="v2"] .wb-vx {
    top: 0;
    bottom: 0;
    width: 1px;
  }
  [data-theme="v2"] .wb-hx {
    left: 0;
    right: 0;
    height: 1px;
  }
  [data-theme="v2"] .wb-masthead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 18px;
    margin-bottom: 54px;
    border-bottom: 1px solid var(--rule);
    flex-wrap: wrap;
  }
  /* dateline: ONE line on desktop (em-dash separator); on mobile the masthead
     stacks, so the two parts break onto their own lines, left-aligned. */
  [data-theme="v2"] .wb-dateline {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-align: right;
    line-height: 1.5;
    white-space: nowrap;
  }
  @media (max-width: 760px) {
    [data-theme="v2"] .wb-dateline {
      text-align: left;
      white-space: normal;
    }
    [data-theme="v2"] .wb-dl-part {
      display: block;
    }
    [data-theme="v2"] .wb-dl-sep {
      display: none;
    }
  }
  [data-theme="v2"] .wb-avail {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  [data-theme="v2"] .wb-pulse {
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: var(--orange);
    box-shadow: 0 0 0 0 rgba(220, 74, 42, 0.6);
    animation: wb-pulse 2.6s infinite;
  }
  @keyframes wb-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(220, 74, 42, 0.55);
    }
    70% {
      box-shadow: 0 0 0 9px rgba(220, 74, 42, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(220, 74, 42, 0);
    }
  }
  [data-theme="v2"] .wb-hero-h {
    font-family: var(--display);
    font-weight: 640;
    font-stretch: 104%;
    letter-spacing: -0.025em;
    line-height: 0.98;
    font-size: clamp(40px, 7.3vw, 108px);
    max-width: 16ch;
    margin: 0;
    text-wrap: balance;
    color: var(--ink);
  }
  [data-theme="v2"] .wb-hero-h .wb-soft {
    color: var(--ink-2);
    font-weight: 420;
    font-stretch: 96%;
  }
  [data-theme="v2"] .wb-hero-h .wb-nb {
    white-space: nowrap;
  }
  [data-theme="v2"] .wb-hero-foot {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 40px;
    align-items: end;
    margin-top: 64px;
    padding-top: 34px;
    border-top: 1px solid var(--rule);
  }
  [data-theme="v2"] .wb-lead {
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 46ch;
    margin: 0;
  }
  [data-theme="v2"] .wb-lead b {
    color: var(--ink);
    font-weight: 600;
  }
  [data-theme="v2"] .wb-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }
  [data-theme="v2"] .wb-hero-note {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  /* ============== "NOW" RIBBON (marqueeTicker) ============== */
  [data-theme="v2"] .wb-ribbon {
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--midnight-2);
    overflow: hidden;
    padding: 16px 0;
  }
  [data-theme="v2"] .wb-ribbon-track {
    display: flex;
    width: max-content;
    animation: wb-slide 48s linear infinite;
  }
  [data-theme="v2"] .wb-ribbon:hover .wb-ribbon-track {
    animation-play-state: paused;
  }
  @keyframes wb-slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
  [data-theme="v2"] .wb-ribbon-item {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
    padding: 0 26px;
    display: inline-flex;
    align-items: center;
    gap: 26px;
    white-space: nowrap;
  }
  [data-theme="v2"] .wb-ribbon-item.wb-sig {
    color: var(--orange-text);
  }
  [data-theme="v2"] .wb-ribbon-item .wb-dot {
    color: var(--ocean-2);
  }

  /* ============== STATS LEDGER ============== */
  [data-theme="v2"] .wb-ledger {
    padding: 96px 0;
  }
  [data-theme="v2"] .wb-lead-row {
    grid-column: 2;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--rule-2);
    padding-bottom: 18px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
  [data-theme="v2"] .wb-ledger .wb-lead-row h2 {
    font-family: var(--display);
    font-weight: 600;
    font-stretch: 104%;
    letter-spacing: -0.01em;
    font-size: clamp(20px, 2.2vw, 28px);
    margin: 0;
    color: var(--ink);
  }
  [data-theme="v2"] .wb-stat {
    grid-column: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    padding: 26px 0;
    border-bottom: 1px solid var(--rule);
  }
  [data-theme="v2"] .wb-stat .wb-cap {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
    max-width: 34ch;
  }
  [data-theme="v2"] .wb-stat .wb-fig {
    font-family: var(--display);
    font-weight: 660;
    font-stretch: 110%;
    letter-spacing: -0.03em;
    line-height: 0.8;
    color: var(--ink);
    text-align: right;
    white-space: nowrap;
    font-size: clamp(46px, 7vw, 96px);
  }
  [data-theme="v2"] .wb-stat .wb-sfx {
    font-size: 0.32em;
    color: var(--orange-text);
    letter-spacing: 0;
    margin-left: 0.18em;
    vertical-align: baseline;
  }
  [data-theme="v2"] .wb-stat.wb-stat-lg .wb-fig {
    font-size: clamp(64px, 11vw, 140px);
  }

  /* ============== STATEMENT (PAPER GEAR-SHIFT) ============== */
  [data-theme="v2"] .wb-statement {
    background: var(--paper);
    color: var(--paper-ink);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
  }
  [data-theme="v2"] .wb-statement .wb-grid {
    align-items: start;
  }
  [data-theme="v2"] .wb-statement .wb-rail-tick {
    color: rgba(28, 33, 31, 0.8);
  }
  [data-theme="v2"] .wb-kicker {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--orange-paper);
    margin-bottom: 26px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  [data-theme="v2"] .wb-big {
    font-family: var(--display);
    font-weight: 600;
    font-stretch: 104%;
    letter-spacing: -0.02em;
    line-height: 1.02;
    font-size: clamp(30px, 4.4vw, 62px);
    max-width: 23ch;
    margin: 0;
    color: var(--paper-ink);
  }
  [data-theme="v2"] .wb-big em {
    font-style: normal;
    color: var(--orange-paper);
  }
  [data-theme="v2"] .wb-statement .wb-body {
    margin-top: 42px;
    max-width: 60ch;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 34px;
  }
  [data-theme="v2"] .wb-statement .wb-body p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(28, 33, 31, 0.82);
  }
  [data-theme="v2"] .wb-statement .wb-body p:first-child {
    font-size: 18px;
    color: var(--paper-ink);
    font-weight: 500;
  }
  [data-theme="v2"] .wb-paper-num {
    position: absolute;
    right: -2vw;
    bottom: -6vw;
    font-family: var(--display);
    font-weight: 760;
    font-stretch: 120%;
    font-size: 38vw;
    line-height: 1;
    color: rgba(28, 33, 31, 0.045);
    pointer-events: none;
    user-select: none;
  }

  /* ============== INDUSTRIES — ledger rows ============== */
  /* The industries rows REUSE the .wb-prin ledger (see PRINCIPLES below) so
     this section and "Four principles" on /approach stay identical by
     construction rather than by copied values. The old .wb-idx* accordion
     (hover-to-peek, single-open, plus-rotate, sliding left orange bar) was
     removed along with its wb-motion.js handler; every body is visible at
     rest now. */
  [data-theme="v2"] .wb-industries {
    padding: 120px 0;
  }
  /* Third-column extra: industries rows carry a per-industry CTA under the
     body copy, which principles rows do not. */
  [data-theme="v2"] .wb-prin-b > p {
    margin: 0;
  }
  [data-theme="v2"] .wb-prin-b .wb-cta {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--orange-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
  }

  /* ============== ENGAGEMENT — offset staircase ============== */
  [data-theme="v2"] .wb-arc {
    padding: 120px 0;
    background: var(--midnight-2);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  [data-theme="v2"] .wb-steps {
    grid-column: 2;
    position: relative;
  }
  [data-theme="v2"] .wb-step {
    display: grid;
    grid-template-columns: clamp(112px, 16vw, 220px) minmax(0, 1fr);
    gap: clamp(16px, 2.5vw, 44px);
    padding: 40px 0;
    border-top: 1px solid var(--rule);
    position: relative;
    padding-left: clamp(38px, 5vw, 74px);
  }
  [data-theme="v2"] .wb-step:first-child {
    border-top: 0;
  }
  [data-theme="v2"] .wb-step .wb-when {
    font-family: var(--display);
    font-weight: 620;
    font-stretch: 110%;
    letter-spacing: -0.02em;
    font-size: clamp(30px, 4.6vw, 64px);
    line-height: 0.9;
    white-space: nowrap;
    /* AA: a muted ocean-on-dark teal failed 3:1 (large) even when lit; use a
       lighter ocean at rest (≈4.8:1 on midnight-2) that brightens to icy. */
    color: #5b9aab;
    transition: color 0.6s, transform 0.6s;
  }
  [data-theme="v2"] .wb-step.wb-lit .wb-when {
    color: var(--icy);
    transform: translateX(4px);
  }
  [data-theme="v2"] .wb-step::before {
    content: "";
    position: absolute;
    left: clamp(16px, 2.2vw, 30px);
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--rule);
  }
  [data-theme="v2"] .wb-step::after {
    content: "";
    position: absolute;
    left: clamp(16px, 2.2vw, 30px);
    top: 42px;
    width: 9px;
    height: 9px;
    border-radius: 99px;
    background: var(--midnight);
    border: 2px solid var(--ocean-2);
    transform: translateX(-50%);
    transition: background 0.5s, border-color 0.5s;
  }
  [data-theme="v2"] .wb-step.wb-lit::after {
    background: var(--orange);
    border-color: var(--orange);
  }
  [data-theme="v2"] .wb-step .wb-meta {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--orange-text);
    margin-bottom: 14px;
  }
  [data-theme="v2"] .wb-step h3 {
    font-family: var(--display);
    font-weight: 580;
    font-stretch: 104%;
    font-size: clamp(22px, 2.6vw, 34px);
    margin: 0 0 12px;
    color: var(--ink);
  }
  [data-theme="v2"] .wb-step p {
    margin: 0;
    color: var(--ink-2);
    font-size: 15.5px;
    line-height: 1.62;
    max-width: 56ch;
  }
  @media (max-width: 760px) {
    [data-theme="v2"] .wb-step {
      grid-template-columns: 1fr;
      gap: 8px;
      padding-left: clamp(28px, 8vw, 40px);
    }
  }

  /* ============== PRINCIPLES — big editorial statements ============== */
  [data-theme="v2"] .wb-principles {
    padding: 120px 0;
  }
  [data-theme="v2"] .wb-prin {
    grid-column: 2;
  }
  [data-theme="v2"] .wb-prin-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(20px, 4vw, 56px);
    align-items: baseline;
    padding: 42px 0;
    border-bottom: 1px solid var(--rule);
  }
  [data-theme="v2"] .wb-prin-row:first-child {
    border-top: 1px solid var(--rule-2);
  }
  [data-theme="v2"] .wb-prin-num {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--orange-text);
  }
  [data-theme="v2"] .wb-prin-h {
    font-family: var(--display);
    font-weight: 620;
    font-stretch: 106%;
    letter-spacing: -0.02em;
    font-size: clamp(28px, 3.6vw, 52px);
    margin: 0;
    color: var(--ink);
    line-height: 1;
  }
  [data-theme="v2"] .wb-prin-b {
    margin: 0;
    color: var(--ink-2);
    font-size: 16px;
    line-height: 1.66;
    max-width: 52ch;
  }
  @media (max-width: 760px) {
    [data-theme="v2"] .wb-prin-row {
      grid-template-columns: 1fr;
      gap: 14px;
    }
  }

  /* ============== DIRECTORS — monogram tiles ============== */
  [data-theme="v2"] .wb-directors {
    padding: 120px 0;
    background: var(--midnight-2);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  [data-theme="v2"] .wb-dgrid {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }
  @media (max-width: 760px) {
    [data-theme="v2"] .wb-dgrid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  [data-theme="v2"] .wb-dcard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }
  [data-theme="v2"] .wb-mono-tile {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--rule);
  }
  /* sheen: a diagonal highlight that sweeps across the tile when the card is
     hovered/focused (clipped by the tile's overflow:hidden) */
  [data-theme="v2"] .wb-mono-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 35%,
      rgba(244, 240, 234, 0.14) 50%,
      transparent 65%
    );
    transform: translateX(-130%);
    /* no transition on the resting state → on mouse-leave the streak snaps back
       off-canvas instantly instead of sweeping right→left */
    pointer-events: none;
  }
  [data-theme="v2"] a.wb-dcard:hover .wb-mono-tile::after {
    transform: translateX(130%);
    /* transition only on the hover state → animates the forward sweep only */
    transition: transform 1.1s ease;
  }
  /* real portrait: fills the same 1:1 box as the monogram fallback, so a grid
     part-way through getting photography still reads as one grid */
  [data-theme="v2"] .wb-portrait {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* portraits are shot warmer than the midnight surface; a slight desaturate
       settles them into the dark chrome without a colour overlay */
    filter: saturate(0.9);
  }
  [data-theme="v2"] .wb-mono-tile .wb-tnum {
    position: absolute;
    top: 14px;
    left: 14px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: rgba(244, 240, 234, 0.7);
  }
  [data-theme="v2"] .wb-mono-tile .wb-mark {
    position: absolute;
    top: 14px;
    right: 14px;
    color: rgba(244, 240, 234, 0.6);
    line-height: 0;
  }
  [data-theme="v2"] .wb-mono-tile .wb-ini {
    position: absolute;
    bottom: 14px;
    left: 16px;
    font-family: var(--display);
    font-weight: 720;
    font-stretch: 118%;
    font-size: 84px;
    line-height: 0.78;
    color: rgba(244, 240, 234, 0.96);
    mix-blend-mode: overlay;
  }
  /* director portrait: fills the tile, cropped to a square face (keeps the
     gradient + logomark frame; the sheen sweep still clips to the tile) */
  [data-theme="v2"] .wb-mono-tile .wb-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  /* a photo tile needs no frame — drop the hairline rule so the portrait sits
     edge to edge (monogram tiles keep their border) */
  [data-theme="v2"] .wb-has-photo {
    border: none;
  }
  /* lift the logomark off the photo so it stays legible on light faces */
  [data-theme="v2"] .wb-has-photo .wb-mark {
    z-index: 1;
    color: rgba(244, 240, 234, 0.92);
    filter: drop-shadow(0 1px 2px rgba(11, 15, 20, 0.55));
  }
  [data-theme="v2"] .wb-dcard h3 {
    font-family: var(--display);
    font-weight: 560;
    font-stretch: 104%;
    font-size: 22px;
    margin: 0;
    color: var(--ink);
  }
  /* placed AFTER the base rule above so the mobile override actually wins
     (equal specificity → later source order) */
  @media (max-width: 760px) {
    [data-theme="v2"] .wb-dcard h3 {
      font-size: 14px;
    }
  }
  /* whole card → director bio link (v2 strips link underline globally; inherit
     colour so the name/role keep their own, and add an orange hover cue) */
  [data-theme="v2"] a.wb-dcard {
    color: inherit;
    text-decoration: none;
  }
  [data-theme="v2"] a.wb-dcard h3 {
    transition: color 0.2s;
  }
  [data-theme="v2"] a.wb-dcard:hover h3,
  [data-theme="v2"] a.wb-dcard:focus-visible h3 {
    color: var(--orange-text);
  }
  [data-theme="v2"] .wb-dcard .wb-role {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--orange-text);
    margin-top: 5px;
    text-transform: none;
  }

  /* ============== WRITING ============== */
  [data-theme="v2"] .wb-writing {
    padding: 120px 0;
  }
  [data-theme="v2"] .wb-wlist {
    grid-column: 2;
    border-top: 1px solid var(--rule-2);
  }
  [data-theme="v2"] .wb-wrow {
    display: grid;
    /* date is content-sized; the read-time/category gets the flexible track so
       it never cramps the "category · N min →" line (the date 1fr previously
       hogged the width and wrapped the arrow). */
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "date meta" "title title" "ex ex";
    gap: 14px 18px;
    align-items: baseline;
    position: relative;
    padding: 30px 6px 30px 24px;
    border-bottom: 1px solid var(--rule);
    transition: background 0.25s;
  }
  [data-theme="v2"] .wb-wrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--orange);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  [data-theme="v2"] .wb-wrow:hover {
    background: rgba(244, 240, 234, 0.025);
  }
  [data-theme="v2"] .wb-wrow:hover::before {
    transform: scaleY(1);
  }
  [data-theme="v2"] .wb-wdate {
    grid-area: date;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--orange-text);
    white-space: nowrap;
  }
  [data-theme="v2"] .wb-wrow h3 {
    grid-area: title;
    font-family: var(--display);
    font-weight: 580;
    font-stretch: 104%;
    letter-spacing: -0.01em;
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.06;
    margin: 0;
    color: var(--ink);
    max-width: 26ch;
    transition: color 0.25s;
  }
  [data-theme="v2"] .wb-wrow:hover h3 {
    color: var(--orange-text);
  }
  [data-theme="v2"] .wb-wrow .wb-ex {
    grid-area: ex;
    margin: 0;
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.6;
    max-width: 62ch;
  }
  [data-theme="v2"] .wb-wrow .wb-rt {
    grid-area: meta;
    justify-self: end;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    white-space: nowrap;
  }
  [data-theme="v2"] .wb-rt svg {
    display: inline;
  }
  @media (max-width: 760px) {
    [data-theme="v2"] .wb-wrow {
      padding-left: 18px;
      gap: 10px 12px;
    }
    [data-theme="v2"] .wb-wrow .wb-ex {
      display: none;
    }
  }
  [data-theme="v2"] .wb-wall {
    grid-column: 2;
    display: flex;
    justify-content: flex-end;
    margin-top: 34px;
  }

  /* ============== CLOSING CTA ============== */
  [data-theme="v2"] .wb-closing {
    padding: 140px 0 90px;
    position: relative;
    /* overflow-x clip (no horizontal scroll) but allow the dusk glow to bleed
       vertically UP across the boundary into the section above, bridging the
       two. overflow:clip never creates scrollbars, so the 375px gate is safe. */
    overflow-x: clip;
  }
  /* the dusk glow extends above the closing section so the orange wash bridges
     the gap up into the people band. */
  [data-theme="v2"] .wb-closing .wb-dusk {
    top: -260px;
    /* fade the top so the upward bleed dissolves instead of ending in a hard
       clip cap; full strength only once inside the CTA section. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 300px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 300px);
  }
  [data-theme="v2"] .wb-closing .wb-plot {
    -webkit-mask-image: radial-gradient(120% 100% at 20% 100%, #000 20%, transparent 70%);
    mask-image: radial-gradient(120% 100% at 20% 100%, #000 20%, transparent 70%);
  }
  [data-theme="v2"] .wb-wm {
    position: absolute;
    right: clamp(-40px, -2vw, 0px);
    /* position the mark so its middle break sits just above the headline's last
       line ("Straight talk."); the mark is display:none on mobile. */
    top: 50%;
    transform: translateY(-50%);
    width: clamp(280px, 40vw, 560px);
    height: auto;
    aspect-ratio: 405.6 / 355.74;
    color: var(--ink);
    fill: currentColor;
    opacity: 0.04;
    pointer-events: none;
    /* fade the mark's edges so the section clip never cuts a hard edge. */
    -webkit-mask-image: radial-gradient(circle, #000 32%, transparent 72%);
    mask-image: radial-gradient(circle, #000 32%, transparent 72%);
  }
  [data-theme="v2"] .wb-wm svg {
    width: 100%;
    height: auto;
    display: block;
  }
  @media (max-width: 760px) {
    [data-theme="v2"] .wb-wm {
      display: none;
    }
  }
  [data-theme="v2"] .wb-closing .wb-inner {
    grid-column: 2;
    position: relative;
  }
  [data-theme="v2"] .wb-closing .wb-avail {
    margin-bottom: 30px;
  }
  [data-theme="v2"] .wb-closing h2 {
    font-family: var(--display);
    font-weight: 620;
    font-stretch: 115%;
    letter-spacing: -0.025em;
    line-height: 0.98;
    font-size: clamp(40px, 7vw, 104px);
    margin: 0 0 44px;
    max-width: 14ch;
    color: var(--ink);
  }
  [data-theme="v2"] .wb-closing h2 em {
    font-style: normal;
    color: var(--orange-text);
  }
  [data-theme="v2"] .wb-closing .wb-row {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
  }
  [data-theme="v2"] .wb-or {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  [data-theme="v2"] .wb-mailto {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--ink);
    border-bottom: 1px solid var(--rule-2);
    padding-bottom: 2px;
  }
  [data-theme="v2"] .wb-mailto:hover {
    border-color: var(--orange-text);
    color: var(--orange-text);
  }

  /* ============== "WE FOCUS ON PEOPLE" band ============== */
  [data-theme="v2"] .wb-people {
    padding: 26px 0 96px;
    /* lift the people band above the closing CTA's upward dusk bleed so the
       glow sits behind it (showing through the gap, never washing over the
       campfire image). */
    position: relative;
    z-index: 1;
  }
  [data-theme="v2"] .wb-people-band {
    grid-column: 2;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--rule);
    min-height: clamp(300px, 42vw, 460px);
    display: flex;
    align-items: flex-end;
    background: var(--midnight-2);
  }
  [data-theme="v2"] .wb-pb-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
  }
  [data-theme="v2"] .wb-pb-veil {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(13, 32, 36, 0.12), rgba(13, 32, 36, 0.55) 58%, rgba(13, 32, 36, 0.88)),
      radial-gradient(70% 80% at 92% 0%, rgba(220, 74, 42, 0.3), transparent 58%),
      radial-gradient(72% 92% at 0% 100%, rgba(23, 91, 110, 0.42), transparent 60%);
  }
  [data-theme="v2"] .wb-pb-inner {
    position: relative;
    padding: clamp(28px, 5vw, 56px);
    max-width: 56ch;
  }
  [data-theme="v2"] .wb-pb-kicker {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--orange-text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
  }
  [data-theme="v2"] .wb-people-band h2 {
    font-family: var(--display);
    font-weight: 620;
    font-stretch: 115%;
    letter-spacing: -0.02em;
    line-height: 1.02;
    font-size: clamp(28px, 4vw, 52px);
    margin: 0 0 16px;
    color: var(--ink);
    max-width: 16ch;
  }
  [data-theme="v2"] .wb-people-band p {
    margin: 0;
    color: var(--ink-2);
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.62;
    max-width: 48ch;
  }
  [data-theme="v2"] .wb-people-band p .wb-o {
    color: var(--orange-text);
  }

  /* ============== SUB-PAGE HERO (pageHero) ============== */
  [data-theme="v2"] .wb-page-hero {
    padding: 132px 0 64px;
    position: relative;
    overflow: hidden;
  }
  [data-theme="v2"] .wb-page-hero.wb-cool {
    background:
      radial-gradient(85% 80% at 84% -12%, rgba(220, 74, 42, 0.14), transparent 55%),
      radial-gradient(90% 80% at 6% 122%, rgba(31, 113, 132, 0.3), transparent 56%);
  }
  [data-theme="v2"] .wb-page-hero.wb-warm {
    background:
      radial-gradient(85% 80% at 84% -12%, rgba(220, 74, 42, 0.24), transparent 55%),
      radial-gradient(90% 80% at 6% 122%, rgba(31, 113, 132, 0.18), transparent 56%);
  }
  [data-theme="v2"] .wb-page-hero .wb-plot {
    -webkit-mask-image: radial-gradient(120% 90% at 75% 0%, #000 20%, transparent 70%);
    mask-image: radial-gradient(120% 90% at 75% 0%, #000 20%, transparent 70%);
    opacity: 0.45;
  }
  [data-theme="v2"] .wb-page-hero .wb-inner {
    grid-column: 2;
    position: relative;
  }
  [data-theme="v2"] .wb-crumb {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--orange-text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
  }
  [data-theme="v2"] .wb-crumb::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--orange);
  }
  [data-theme="v2"] .wb-page-hero h1 {
    font-family: var(--display);
    font-weight: 640;
    font-stretch: 115%;
    letter-spacing: -0.025em;
    line-height: 0.98;
    font-size: clamp(40px, 6.6vw, 92px);
    margin: 0;
    max-width: 15ch;
    text-wrap: balance;
    color: var(--ink);
  }
  [data-theme="v2"] .wb-page-hero .wb-sub {
    margin: 26px 0 0;
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 54ch;
  }

  /* ============== SERVICES LIST ============== */
  [data-theme="v2"] .wb-services {
    padding: 96px 0;
  }
  [data-theme="v2"] .wb-svc {
    grid-column: 2;
    border-top: 1px solid var(--rule-2);
  }
  [data-theme="v2"] .wb-svc-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1.25fr) auto;
    gap: 24px;
    align-items: center;
    padding: 34px 6px;
    border-bottom: 1px solid var(--rule);
    transition: background 0.25s, padding-left 0.3s;
    position: relative;
    overflow: hidden;
  }
  [data-theme="v2"] .wb-svc-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--orange);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  [data-theme="v2"] .wb-svc-row:hover {
    background: rgba(244, 240, 234, 0.025);
    padding-left: 18px;
  }
  [data-theme="v2"] .wb-svc-row:hover::before {
    transform: scaleY(1);
  }
  [data-theme="v2"] .wb-svc-num {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--orange-text);
  }
  [data-theme="v2"] .wb-svc-name {
    font-family: var(--display);
    font-weight: 580;
    font-stretch: 104%;
    letter-spacing: -0.01em;
    font-size: clamp(22px, 2.7vw, 34px);
    color: var(--ink);
    line-height: 1.04;
  }
  [data-theme="v2"] .wb-svc-sum {
    margin: 0;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.55;
    max-width: 46ch;
  }
  [data-theme="v2"] .wb-svc-go {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--orange-text);
    justify-self: end;
    white-space: nowrap;
    transition: transform 0.25s;
  }
  [data-theme="v2"] .wb-svc-go svg {
    display: inline;
  }
  [data-theme="v2"] .wb-svc-row:hover .wb-svc-go {
    transform: translateX(4px);
  }
  @media (max-width: 760px) {
    [data-theme="v2"] .wb-svc-row {
      grid-template-columns: auto 1fr;
      gap: 6px 18px;
      align-items: baseline;
    }
    [data-theme="v2"] .wb-svc-num {
      grid-row: 1;
      grid-column: 1;
    }
    [data-theme="v2"] .wb-svc-name {
      grid-row: 1;
      grid-column: 2;
    }
    [data-theme="v2"] .wb-svc-sum {
      grid-row: 2;
      grid-column: 2;
    }
    [data-theme="v2"] .wb-svc-go {
      grid-row: 3;
      grid-column: 2;
      justify-self: start;
      margin-top: 6px;
    }
  }

  /* ============== ABOUT — director bios ============== */
  [data-theme="v2"] .wb-dbios {
    grid-column: 2;
  }
  [data-theme="v2"] .wb-dbio {
    display: grid;
    grid-template-columns: clamp(116px, 17vw, 188px) minmax(0, 1fr);
    gap: clamp(22px, 4vw, 52px);
    align-items: start;
    padding: 46px 0;
    border-top: 1px solid var(--rule);
    /* clear the sticky header when linked to via #director-<slug> from home */
    scroll-margin-top: 108px;
  }
  [data-theme="v2"] .wb-dbio:first-child {
    border-top: 1px solid var(--rule-2);
  }
  [data-theme="v2"] .wb-dbio .wb-mono-tile {
    aspect-ratio: 4 / 5;
    width: 100%;
  }
  [data-theme="v2"] .wb-dbio h3 {
    font-family: var(--display);
    font-weight: 580;
    font-stretch: 104%;
    font-size: clamp(22px, 2.4vw, 30px);
    margin: 0;
    color: var(--ink);
  }
  [data-theme="v2"] .wb-dbio .wb-role {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--orange-text);
    margin: 6px 0 18px;
  }
  [data-theme="v2"] .wb-dbio .v2-prose,
  [data-theme="v2"] .wb-dbio p {
    margin: 0;
    color: var(--ink-2);
    font-size: 15.5px;
    line-height: 1.7;
    max-width: 62ch;
  }
  /* per-director "Email <name>" link under the bio (reuses .wb-mailto chrome) */
  [data-theme="v2"] .wb-dbio-mail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
  }
  @media (max-width: 760px) {
    [data-theme="v2"] .wb-dbio {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    [data-theme="v2"] .wb-dbio .wb-mono-tile {
      max-width: 160px;
    }
  }

  /* ============== CONTACT — direct-reach columns ============== */
  [data-theme="v2"] .wb-contactb {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(36px, 5vw, 72px);
    border-top: 1px solid var(--rule-2);
    padding-top: 54px;
  }
  [data-theme="v2"] .wb-contactb h2,
  [data-theme="v2"] .wb-contactb h3 {
    font-family: var(--display);
    font-weight: 600;
    font-stretch: 104%;
    letter-spacing: -0.01em;
    font-size: clamp(24px, 3vw, 38px);
    margin: 0 0 18px;
    color: var(--ink);
  }
  [data-theme="v2"] .wb-contactb p {
    margin: 0 0 26px;
    color: var(--ink-2);
    font-size: 16px;
    line-height: 1.65;
    max-width: 42ch;
  }
  [data-theme="v2"] .wb-contactb address {
    font-style: normal;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.8;
  }
  [data-theme="v2"] .wb-contactb .wb-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 12px;
  }
  [data-theme="v2"] .wb-contactb .wb-mailto {
    font-size: 13px;
    letter-spacing: 0.04em;
    display: inline-block;
  }

  /* ============================================================
     ARTICLE / LONG-READ (blog single) — dark editorial feature
     ============================================================ */
  [data-theme="v2"] .wb-read-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--orange);
    z-index: 60;
    box-shadow: 0 0 12px rgba(220, 74, 42, 0.6);
    transition: width 0.08s linear;
  }
  [data-theme="v2"] .wb-article {
    padding: 124px 0 30px;
  }
  [data-theme="v2"] .wb-toc {
    position: sticky;
    top: 118px;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  [data-theme="v2"] .wb-toc .wb-toc-lab {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 6px;
  }
  [data-theme="v2"] .wb-toc a {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    display: flex;
    gap: 9px;
    align-items: baseline;
    line-height: 1.3;
    transition: color 0.3s;
  }
  [data-theme="v2"] .wb-toc a .wb-n {
    color: #5b9aab; /* AA: ocean-2 was ~2.97:1 on midnight; lighter ocean ≈5:1 */
    transition: color 0.3s;
  }
  [data-theme="v2"] .wb-toc a:hover {
    color: var(--ink-2);
  }
  [data-theme="v2"] .wb-toc a.wb-active {
    color: var(--ink);
  }
  [data-theme="v2"] .wb-toc a.wb-active .wb-n {
    color: var(--orange-text);
  }
  [data-theme="v2"] .wb-art-head {
    grid-column: 2;
    max-width: 74ch;
  }
  [data-theme="v2"] .wb-art-kicker {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--orange-text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
  }
  [data-theme="v2"] .wb-art-title {
    font-family: var(--display);
    font-weight: 640;
    font-stretch: 113%;
    letter-spacing: -0.025em;
    line-height: 1;
    font-size: clamp(36px, 5.4vw, 70px);
    margin: 0;
    max-width: 18ch;
    text-wrap: balance;
    color: var(--ink);
  }
  [data-theme="v2"] .wb-art-standfirst {
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 52ch;
    margin: 24px 0 0;
  }
  [data-theme="v2"] .wb-byline {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
  }
  [data-theme="v2"] .wb-byline .wb-who {
    display: inline-flex;
    align-items: center;
    gap: 11px;
  }
  [data-theme="v2"] .wb-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-weight: 720;
    font-stretch: 115%;
    font-size: 18px;
    color: var(--ink);
    flex: 0 0 auto;
    background: linear-gradient(150deg, #bdd5db 0%, var(--midnight-3) 80%);
  }
  /* photo variant of the byline avatar: same 40px circle, portrait cropped in */
  [data-theme="v2"] img.wb-avatar-photo {
    object-fit: cover;
    object-position: center;
    background: none;
  }
  [data-theme="v2"] .wb-byline .wb-name {
    font-family: var(--display);
    font-weight: 560;
    font-stretch: 104%;
    font-size: 15px;
    color: var(--ink);
  }
  [data-theme="v2"] .wb-byline .wb-bmeta {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  [data-theme="v2"] .wb-byline .wb-sep {
    color: var(--rule-2);
  }
  [data-theme="v2"] .wb-art-cover {
    grid-column: 2;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--rule);
    aspect-ratio: 16 / 7.4;
    margin: 46px 0 10px;
    background: var(--midnight-2);
  }
  [data-theme="v2"] .wb-cover-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
  }
  [data-theme="v2"] .wb-cover-veil {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(13, 32, 36, 0.22), rgba(13, 32, 36, 0.74)),
      radial-gradient(70% 95% at 90% 4%, rgba(220, 74, 42, 0.32), transparent 60%),
      radial-gradient(80% 100% at 2% 100%, rgba(23, 91, 110, 0.46), transparent 60%);
  }
  [data-theme="v2"] .wb-art-cover .wb-cover-meta {
    position: absolute;
    top: 18px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    z-index: 1;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
  }
  [data-theme="v2"] .wb-art-cover .wb-cover-meta .wb-lm {
    color: var(--orange);
    fill: currentColor;
  }
  [data-theme="v2"] .wb-art-cover .wb-cover-cap {
    position: absolute;
    left: 20px;
    bottom: 15px;
    z-index: 1;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
  }

  /* prose column (article body) */
  [data-theme="v2"] .wb-prose {
    grid-column: 2;
    max-width: 68ch;
    margin-top: 10px;
  }
  [data-theme="v2"] .wb-prose > p {
    margin: 0 0 26px;
    font-size: 18px;
    line-height: 1.78;
    color: rgba(244, 240, 234, 0.84);
  }
  [data-theme="v2"] .wb-prose > p:first-of-type::first-letter {
    font-family: var(--display);
    font-weight: 680;
    font-stretch: 108%;
    font-size: 3.5em;
    line-height: 0.72;
    float: left;
    margin: 0.06em 0.12em 0 0;
    color: var(--orange-text);
  }
  [data-theme="v2"] .wb-prose h2 {
    font-family: var(--display);
    font-weight: 600;
    font-stretch: 104%;
    letter-spacing: -0.01em;
    font-size: clamp(24px, 3vw, 34px);
    color: var(--ink);
    margin: 56px 0 18px;
    scroll-margin-top: 108px;
    display: flex;
    align-items: baseline;
    gap: 14px;
    line-height: 1.05;
  }
  [data-theme="v2"] .wb-prose h2 .wb-n {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--orange-text);
    letter-spacing: 0.06em;
    flex: 0 0 auto;
  }
  [data-theme="v2"] .wb-prose h3 {
    font-family: var(--display);
    font-weight: 580;
    font-stretch: 104%;
    font-size: clamp(20px, 2.4vw, 26px);
    color: var(--ink);
    margin: 40px 0 14px;
  }
  [data-theme="v2"] .wb-prose ul,
  [data-theme="v2"] .wb-prose ol {
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
  }
  [data-theme="v2"] .wb-prose li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 13px;
    color: rgba(244, 240, 234, 0.84);
    font-size: 17px;
    line-height: 1.7;
  }
  [data-theme="v2"] .wb-prose li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 9px;
    height: 1px;
    background: var(--orange);
  }
  [data-theme="v2"] .wb-prose a {
    color: var(--ink);
    border-bottom: 1px solid var(--orange);
    padding-bottom: 1px;
  }
  [data-theme="v2"] .wb-prose a:hover {
    color: var(--orange-text);
  }
  [data-theme="v2"] .wb-prose strong,
  [data-theme="v2"] .wb-prose b {
    color: var(--ink);
    font-weight: 600;
  }
  [data-theme="v2"] .wb-prose code {
    font-family: var(--mono);
    font-size: 0.86em;
    background: var(--midnight-3);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--ink);
  }
  [data-theme="v2"] .wb-prose blockquote {
    margin: 48px 0;
    border-left: 3px solid var(--orange);
    padding: 4px 0 4px 28px;
  }
  [data-theme="v2"] .wb-prose blockquote p {
    font-family: var(--display);
    font-weight: 560;
    font-stretch: 104%;
    letter-spacing: -0.01em;
    font-size: clamp(22px, 2.8vw, 32px);
    line-height: 1.18;
    color: var(--ink);
    margin: 0;
  }

  /* article end — tags, author card, keep reading */
  [data-theme="v2"] .wb-art-end {
    grid-column: 2;
    max-width: 68ch;
    margin-top: 64px;
    padding-top: 30px;
    border-top: 1px solid var(--rule-2);
  }
  [data-theme="v2"] .wb-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    align-items: center;
  }
  [data-theme="v2"] .wb-tags .wb-lbl {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  [data-theme="v2"] .wb-tags .wb-tag {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
    border: 1px solid var(--rule-2);
    border-radius: 99px;
    padding: 7px 14px;
  }
  [data-theme="v2"] .wb-author-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    padding: 28px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  [data-theme="v2"] .wb-author-card .wb-mono-tile {
    width: 84px;
    aspect-ratio: 4 / 5;
  }
  [data-theme="v2"] .wb-author-card .wb-mono-tile .wb-ini {
    font-size: 40px;
    bottom: 10px;
    left: 12px;
  }
  [data-theme="v2"] .wb-author-card h4 {
    font-family: var(--display);
    font-weight: 580;
    font-stretch: 104%;
    font-size: 20px;
    margin: 0;
    color: var(--ink);
  }
  [data-theme="v2"] .wb-author-card .wb-role {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--orange-text);
    margin: 5px 0 12px;
  }
  [data-theme="v2"] .wb-author-card p {
    margin: 0;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.66;
  }
  [data-theme="v2"] .wb-art-cta {
    grid-column: 2;
    margin: 40px 0 0;
  }
  [data-theme="v2"] .wb-keep {
    grid-column: 2;
    max-width: 68ch;
    margin-top: 40px;
  }
  [data-theme="v2"] .wb-keep .wb-keep-lab {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--orange-text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }

  /* header CTA — keep the editorial rounded button compact in the sticky bar
     (the element keeps data-testid="v2-header-cta" for the session swap + gate) */
  [data-theme="v2"] [data-v2-header] [data-testid="v2-header-cta"] {
    padding: 12px 20px;
    font-size: 12px;
    font-stretch: 104%;
  }

  /* desktop nav links — brighten to full ink on hover/focus, plus a center-out
     accent underline that grows from the middle to both edges (NOT a left-origin
     wipe). The ::after is scaleX(0)→scaleX(1) with transform-origin:center; the
     site-wide prefers-reduced-motion guard neutralises the transition (it snaps
     instead of animating, still visible on hover/focus). */
  [data-theme="v2"] .wb-navlink {
    display: flex;
    align-items: center;
    height: 100%;
    color: var(--ink-2);
    transition: color 0.25s;
  }
  [data-theme="v2"] .wb-navlink > span {
    position: relative;
  }
  [data-theme="v2"] .wb-navlink > span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  [data-theme="v2"] .wb-navlink:hover,
  [data-theme="v2"] .wb-navlink:focus-visible {
    color: var(--ink);
  }
  [data-theme="v2"] .wb-navlink:hover > span::after,
  [data-theme="v2"] .wb-navlink:focus-visible > span::after {
    transform: scaleX(1);
  }
  /* Active section: pin the underline on and brighten the label so the current
     page's nav item reads as selected (not just a hover affordance). Keyed off
     aria-current="page" (set server-side on the matching nav link). */
  [data-theme="v2"] .wb-navlink[aria-current="page"] {
    color: var(--ink);
  }
  [data-theme="v2"] .wb-navlink[aria-current="page"] > span::after {
    transform: scaleX(1);
  }
  /* Mobile menu: the panel links have no ::after underline; mark the active one
     with an underline directly (colour is set inline in the partial). */
  [data-theme="v2"] .wb-navlink-m[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--orange);
    text-underline-offset: 4px;
  }

  /* footer big wordmark — never break "DUSC.DEV"; scale to fit the viewport
     (the partial hardcodes 64px inline, so override it with a clamp). */
  [data-theme="v2"] .wb-foot-mark,
  [data-theme="v2"] .wb-foot-mark .display {
    white-space: nowrap;
  }
  [data-theme="v2"] .wb-foot-mark .display {
    font-size: clamp(40px, 11vw, 64px) !important;
  }

  /* footer on mobile: left-align the est/locality block (its right-align made
     "EST. 2021" float off the longer locality line), and drop the cramped
     3-column nav to blurb-full-width + Site/Contact two-up. */
  @media (max-width: 760px) {
    [data-theme="v2"] .wb-foot-est {
      text-align: left !important;
      width: 100%;
    }
    [data-theme="v2"] .wb-foot-cols {
      /* Site ~30% / Contact ~70% so "Perth, Western Australia" doesn't wrap. */
      grid-template-columns: 3fr 7fr !important;
      gap: 36px 24px !important;
    }
    [data-theme="v2"] .wb-foot-cols > :first-child {
      grid-column: 1 / -1;
    }
    [data-theme="v2"] .wb-foot-cols p.mono {
      max-width: 100% !important;
    }
  }

  /* ============== mobile hero compaction (placed late to win cascade) ==========
     The fixed header is short and the iPhone SE viewport (375x667) is short, so
     the editorial hero rhythm is tightened on mobile to clear the fold (lead +
     primary CTA visible above 667px). Must come AFTER the hero base rules. */
  @media (max-width: 760px) {
    [data-theme="v2"] .wb-hero {
      padding-top: 76px;
      padding-bottom: 56px;
    }
    [data-theme="v2"] .wb-masthead {
      margin-bottom: 42px;
      padding-bottom: 14px;
    }
    [data-theme="v2"] .wb-hero-h {
      font-size: 36px;
      line-height: 1;
    }
    [data-theme="v2"] .wb-hero-foot {
      margin-top: 42px;
      padding-top: 20px;
      gap: 32px;
    }
    [data-theme="v2"] .wb-hero-actions .btn {
      width: 100%;
      justify-content: center;
    }
    [data-theme="v2"] .wb-lead {
      font-size: 15px;
      line-height: 1.55;
    }
    [data-theme="v2"] .wb-page-hero {
      padding-top: 92px;
    }
    [data-theme="v2"] .wb-article {
      padding-top: 88px;
    }
  }

  /* ============== reduced-motion guards (redesign) ============== */
  @media (prefers-reduced-motion: reduce) {
    [data-theme="v2"] .wb-reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
    [data-theme="v2"] .wb-mono-tile::after {
      display: none;
    }
    [data-theme="v2"] .wb-underline-mark path {
      stroke-dashoffset: 0;
      transition: none;
    }
    [data-theme="v2"] .wb-ribbon-track {
      animation: none;
      flex-wrap: wrap;
      width: 100%;
    }
    [data-theme="v2"] .wb-pulse {
      animation: none;
    }
    [data-theme="v2"] .wb-read-progress {
      transition: none;
    }
    [data-theme="v2"] .wb-navlink {
      transition: none;
    }
    [data-theme="v2"] .wb-dusk::before,
    [data-theme="v2"] .wb-dusk::after {
      filter: blur(70px);
    }
  }
}