/* Design tokens
   Lifted verbatim from "14 Website prototype.dc.html".
   Prototype lines 21-55 (:root plus the three breakpoint overrides). */

:root{
  --black:#222223;--cream:#d6d2c4;--terracotta:#c04c36;--blue:#a5b8c1;
  --terracotta-ink-cream:#9a3625;--terracotta-ink-black:#d97056;--terracotta-pressed:#8a2f20;--blue-ink-cream:#445a64;
  --ink-muted-black:#97948c;--ink-muted-cream:#585753;--rule-black:#3b3b3a;--rule-cream:#b2afa4;
  --rule-strong-black:#51504d;--rule-strong-cream:#a4a197;
  --rule-accent:rgba(214,210,196,0.34);--rule-strong-accent:rgba(214,210,196,0.58);
  --font-display:'Gravita GEO',sans-serif;--font-body:'Myriad Pro','Helvetica Neue',Arial,sans-serif;--font-ar:'Cairo',sans-serif;
  --track-display-xl:0.01em;--track-display:0.025em;--track-title:0.05em;--track-eyebrow:0.16em;--track-ui:0.09em;
  --type-display-2xl:300 54px/1.02 var(--font-display);--type-display-xl:300 42px/1 var(--font-display);
  --type-display-lg:300 26px/1.05 var(--font-display);--type-display-md:400 20px/1.1 var(--font-display);
  --type-display-sm:500 16px/1.2 var(--font-display);--type-title:500 16px/1.25 var(--font-display);
  --type-eyebrow:400 12px/1.2 var(--font-display);--type-ui:500 12px/1.2 var(--font-display);
  --type-body:400 16px/1.7 var(--font-body);--type-caption:400 14px/1.55 var(--font-body);
  --type-display-body:400 22px/1.4 var(--font-body);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
  --gutter:24px;--margin:72px;--hairline:1px;--target-min:44px;--focus-width:2px;--focus-offset:2px;--section-block:clamp(52px,6vw,104px);
  --dur-micro:360ms;--dur-hover:560ms;--dur-signature:600ms;--dur-pixel:520ms;--ease-out:cubic-bezier(0.42,0,0.18,1);--ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --dur-press:90ms;--dur-release:480ms;--dur-unfold:640ms;
  --ease-press:cubic-bezier(0.4,0,1,1);--ease-release:cubic-bezier(0.36,0.01,0.24,1.09);--ease-unfold:cubic-bezier(0.62,0,0.14,1);
  --press-deep:0.965;--press-soft:0.985;
  --bar-h:88px;--icon-land:40px;--icon-top:24px;
  --logo-icon:150px;--arr-gap:4svh;--logo-scale:0.26667;--word-ratio:0.046921;--logo-veil:0.82;
  --logo-gap:calc(var(--logo-icon) / 2);
  --content-w:calc(100vw - 2 * var(--margin));
  --word-w:calc(var(--content-w) - var(--logo-icon) - var(--logo-gap));
  --block-h:var(--logo-icon);
  --arr-top:calc(100svh - var(--arr-gap) - var(--block-h));
  --logo-rise:calc(var(--icon-top) - var(--arr-top));
  --ov-frame:300svh;--media-w:560px;
  --ar-wide:40/21;--ar-card:3/4;--ar-tile:1/1;
  /* The mark's own silhouette, lifted from the outline path in
     assets/img/logo/icon.svg rather than redrawn: a 25% flat on each side
     and four 9.39% steps per corner. The path's bounding box is square, so
     anything wearing --mark must also take --mark-ar or the steps shear. */
  --mark-ar:1/1;
  /* The ground behind a photograph, before it loads and wherever it does not
     reach the edges of its box. Eleven media containers carried background:#111
     -- a hard-coded literal, which §2 forbids, and on a cream ground it read as
     a black flash on every card, band and plate the moment an image was slow.

     This is only the default, for a box standing outside any ground. Each
     ground declares its own, because a ground is a pair: var() inside a custom
     property is substituted where the property is DECLARED, not where it is
     used, so a single :root definition reading var(--surface) resolves against
     :root -- where no ground has been set -- and inherits that one answer
     everywhere. Measured 11 September: it came out 86% cream on the black
     pages, the exact inverse of what was wanted. */
  --media-ground:color-mix(in oklab,var(--cream) 86%,var(--black) 14%);
  --mark:polygon(90.604% 37.469%,90.604% 28.168%,81.213% 28.168%,81.213% 18.777%,71.822% 18.777%,71.822% 9.386%,62.444% 9.386%,62.444% 0,37.466% 0,37.466% 9.391%,28.102% 9.391%,28.102% 18.782%,18.738% 18.782%,18.738% 28.173%,9.373% 28.173%,9.373% 37.474%,0 37.474%,0 62.45%,9.378% 62.45%,9.378% 71.841%,18.742% 71.841%,18.742% 81.232%,28.106% 81.232%,28.106% 90.623%,37.471% 90.623%,37.471% 100%,62.448% 100%,62.448% 90.623%,71.826% 90.623%,71.826% 81.232%,81.217% 81.232%,81.217% 71.841%,90.609% 71.841%,90.609% 62.45%,100% 62.45%,100% 37.474%,90.609% 37.474%);
}
@media (max-width:1439px){:root{--margin:48px;--logo-icon:110px;--logo-scale:0.36364;--type-display-2xl:300 46px/1.04 var(--font-display)}}
@media (max-width:1023px){:root{--margin:40px;--bar-h:76px;--icon-land:34px;--icon-top:21px;--logo-icon:80px;--logo-scale:0.425;--ov-frame:190svh;--media-w:300px;--type-display-2xl:300 40px/1.05 var(--font-display);--type-display-lg:300 26px/1.02 var(--font-display);--type-display-body:400 22px/1.35 var(--font-body);--space-9:64px;--space-10:88px}}
@media (max-width:560px){:root{--margin:20px;--logo-icon:40px;--logo-scale:0.85;--type-display-2xl:300 33px/1.06 var(--font-display);--type-display-body:400 19px/1.4 var(--font-body)}}

/* ── Theme extension ──────────────────────────────────────────────────────────
   Everything above is the prototype's :root, lifted line for line. Everything
   below is added by the theme, and only because the content model asks for
   something the prototype never had to name.

   §4 lets an editor put a room on four grounds — black, cream, blue and
   terracotta — but the prototype only ever drew two as classes; blue and
   terracotta lived as literals inside the story closer's scene data. A ground
   is a pair, so each needs its own muted tier and rules.

   --ink-muted-blue is the one value HANDOFF §3 states outright: "Blue carries
   its own muted value (#3a4247), not --ink-muted-cream", because blue is a
   lower-luminance ground than cream and needs a darker secondary tier to hold
   4.5:1. The rules are mixed from tokens rather than picked, so no new literal
   colour enters the system. */
:root{
  --ink-muted-blue:#3a4247;
  --rule-blue:color-mix(in srgb,var(--black) 20%,var(--blue));
  --rule-strong-blue:color-mix(in srgb,var(--black) 34%,var(--blue));
  --terracotta-ground:var(--terracotta-ink-cream);
  /* Cream on this ground measures 4.74:1 — there is no headroom for a darker
     secondary tier, so the terracotta ground has no muted colour and its
     caption tier is the ink itself. Measured, not assumed: a 78% cream mix
     came out at 2.92:1. The prototype's terracotta panel does the same thing,
     setting no muted value at all. */
  --ink-muted-terracotta:var(--cream);
  --rule-terracotta:color-mix(in srgb,var(--cream) 26%,var(--terracotta-ink-cream));
  --rule-strong-terracotta:color-mix(in srgb,var(--cream) 44%,var(--terracotta-ink-cream));
}

/* The arrival's runway, retuned for a phone.

   Measured at 390x745 before this block existed: the mark travelled 654.2px --
   almost a whole screen -- while the page scrolled 483px, so it climbed at
   1.35x the speed of the page and then stopped dead on the 78% keyframe
   boundary under a linear timing function. Desktop runs the same move at 0.85x,
   slower than the page, which is why it reads as anchored there and as a lurch
   here. The travel is fixed by --arr-top (the mark starts a screen down and
   lands in the bar), so the only free variable is the runway: 190svh gave the
   contain range 670px to spend and ovLogo may use 72% of it.

   240svh gives the range 1043px, so ovLogo's 6%-78% window is 751px of scroll
   for the same 654.2px of travel -- 0.87x, within a hair of desktop's 0.85x.
   The cost is 50svh more scrolling before the first slide; the arrival is the
   one place on the site where that buys something.

   --icon-top is where the mark lands, and it was 0.5px above where the bar
   icon actually sits: .bar reserves --hairline of its height for its own
   bottom rule, so its flex centring works on --bar-h minus that rule. Naming
   the landing off the same geometry closes the handoff at both breakpoints
   (desktop 24 -> 23.5, mobile 21 -> 20.5) instead of at neither. */
:root{--icon-top:calc((var(--bar-h) - var(--hairline) - var(--icon-land)) / 2)}
@media (max-width:1023px){:root{--ov-frame:240svh}}