/* PearlHelix design tokens, v4.2. Every colour, size, duration and easing lives here; site.css reads them through
   var() only. Ratios are measured on --paper. */
:root{
  color-scheme:light;

  /* Paper and ink */
  --paper:#F8F7F2;
  --paper-raised:#FBFAF6;
  --paper-deep:#EEEFE7;
  --sage:#E8ECE2;
  --ink:#1C302D;          /* headings, 12.9:1 */
  --ink-2:#3F4D48;        /* body, 8.3:1; 7.3:1 on worst-case glass */
  --ink-3:#55645B;        /* meta at 14px or larger, 5.8:1 */
  --ink-accent:#35736C;   /* second line of the display heading, 5.1:1 */

  /* Teal and support */
  --teal-950:#0B2E2B;     /* the ribbon's underside where the deep strand turns away (D-69) */
  --teal-900:#0F3A37;
  --teal-800:#174D49;
  --teal-600:#1F5F59;
  --teal-500:#2F766F;      /* top of the glass Rise mark (404 art), decorative only */
  --teal-400:#3C867E;      /* the lighter strand's face; decorative only */
  --teal-300:#8FB5AC;
  --teal-100:#D5E6E0;
  --champagne:#E9DBC4;
  --genesis-grain:#C4A36E;/* the grain at the heart of the About art: champagne, deepened; decorative only */
  --light:#FFFFFF;
  --strand-mid:#53827B;
  --pearl-core:#FDFCF9;
  --pearl-mid:#EDF2EE;
  --pearl-edge:#D5E6E0;
  --on-teal:#FFFFFF;      /* 7.7:1 on teal glass, worst case */
  --on-teal-2:#D5E3DE;    /* 5.8:1 on teal glass, worst case */
  --link:var(--teal-800);
  --focus:#8A5A28;        /* 5.5:1 */
  --focus-width:2px; --focus-offset:3px; --focus-offset-from:6px;
  --selection:var(--teal-100);
  --line:rgb(28 48 45/.12);
  --line-strong:rgb(28 48 45/.28);
  --line-on-teal:rgb(255 255 255/.18);
  --on-teal-line:rgb(255 255 255/.34);
  --on-teal-wash:rgb(255 255 255/.08);
  --on-teal-wash-2:rgb(255 255 255/.14);
  --on-teal-ring:rgb(255 255 255/.22);
  --hover-wash:rgb(28 48 45/.05);
  --hover-wash-2:rgb(28 48 45/.08);
  --scrim:rgb(16 36 33/.08);

  /* Light fields: decorative only, never behind text without glass or paper */
  /* Light-field colours: off the pages since v4 (D-60); kept for the style guide's glass samples and the contrast gate */
  --field-teal:rgb(23 77 73/.15);
  --field-champagne:rgb(233 219 196/.55);
  --field-mist:rgb(200 221 213/.60);
  --band:rgb(238 239 231/.72);

  /* Glass */
  --glass-tint:rgb(251 250 246/.66);
  --glass-tint-nav:rgb(251 250 246/.78);
  --glass-tint-sheet:rgb(251 250 246/.88);
  --glass-tint-teal:rgb(23 77 73/.92);
  --glass-solid:#FBFAF6;
  --glass-sheen:linear-gradient(180deg,rgb(255 255 255/.40),rgb(255 255 255/0) 42%);
  --glass-sheen-teal:linear-gradient(180deg,rgb(255 255 255/.10),rgb(255 255 255/0) 40%);
  --glass-rim:linear-gradient(155deg,rgb(255 255 255/.95),rgb(255 255 255/.20) 32%,rgb(255 255 255/0) 55%,rgb(23 77 73/.10) 80%,rgb(255 255 255/.55));
  --glass-rim-teal:linear-gradient(155deg,rgb(255 255 255/.42),rgb(255 255 255/.08) 35%,rgb(255 255 255/0) 60%,rgb(255 255 255/.16));
  --glass-inset:inset 0 1px 0 rgb(255 255 255/.70),inset 0 -1px 0 rgb(23 77 73/.05);
  --glass-inset-teal:inset 0 1px 0 rgb(255 255 255/.22);
  --glass-light:rgb(255 255 255/.22);   /* pointer sheen */
  --glass-glint:rgb(255 255 255/.85);   /* contact rim sweep */
  --sheen-size:22rem;
  --node-inset:inset 0 1px 0 rgb(255 255 255/.22);

  /* Buttons */
  --button-teal-inset:inset 0 1px 0 rgb(255 255 255/.16);
  --button-teal-shadow:0 1px 2px rgb(15 58 55/.18),0 8px 20px -10px rgb(15 58 55/.50);

  /* Matte */
  --grain-url:url(../assets/v1/grain.png);
  --grain-size:128px;
  --grain-opacity:.14;

  /* Radii: nested radius = outer minus padding, 6px minimum */
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

  /* Space */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:144px;
  --gutter:clamp(1rem,.5rem + 2.5vw,2.5rem);
  --gutter-x:max(var(--gutter),env(safe-area-inset-left),env(safe-area-inset-right));
  --section:clamp(4rem,2.4rem + 4.6vw,6.25rem);
  --content:75rem;
  /* Measures in em (62, 40, 44 and 30ch x Instrument Sans' .666em "0"), so line widths hold when the fallback font swaps */
  --measure:41.3em;
  --tap:44px;
  --measure-lede:26.6em;
  --measure-intro:29.3em;
  --measure-step:20em;
  --head-gap:clamp(2.5rem,1.8rem + 3vw,4.5rem);
  --page-pad-top:clamp(3rem,1.5rem + 6vw,7rem);
  --step-gap:var(--s-8);   /* the strand between two steps is the animation: it needs room to be seen */
  --approach-run:130vh; /* desktop: how far the pinned Approach block scrubs while its four steps arrive in turn */
  --band-fade:96px;
  --sentinel:24px;
  --grid-gap:clamp(1rem,.6rem + 1.4vw,1.5rem);
  --plate-pad:clamp(1.5rem,1rem + 1.6vw,2.25rem);
  --header-top:12px;
  --header-h:56px;
  --capsule-bleed:clamp(0px,var(--gutter) - 8px,14px);
  --capsule-pad-start:max(10px,var(--capsule-bleed)); /* logo on the content edge at every width */
  --capsule-pad-end:8px;
  --capsule-pad-end-sm:6px;
  /* Brand lockup (brand/README.md): symbol ink 1.45 x cap height (.72em); ink-to-ink gap half the symbol width */
  --mark-h:1.044em;
  --mark-w:1.007em;    /* tilted 32 cut ink box, 24.6 x 25.5 */
  --word-h:.72em;      /* the wordmark SVG is boxed from cap top to baseline, so its centre is the cap centre */
  --brand-gap:.419em;  /* .48em ink to ink, less the P's .061em side bearing */
  --button-h-lg:52px;
  --button-h-nav:40px;
  --button-pad-icon:20px;
  --menu-row:52px;
  --chip-h:36px;
  --indicator-bottom:4px;
  --contact-pad-x:56px;
  --intro-baseline:.4em;
  --display-optical:-.045em;
  --anchor-offset:96px;
  --sticky-top:120px;
  --pearl:6px;
  --sep-gap:40px;
  --plate-top-gap:clamp(2rem,1.4rem + 2vw,3rem);
  --node:32px;
  --glyph:24px;
  --icon:16px;
  --icon-lg:20px;
  --glyph-well:44px;
  --link-w:28px;
  --art-w-mobile:22rem;
  --lost-mark:min(13rem,56vw);
  --genesis:min(18rem,100%);                  /* About art (Nacre Genesis): phone band */
  --genesis-lg:clamp(15rem,100vh - 16rem,28rem);/* sticky column: always fits under the held H2 (svh where supported, below) */
  --about-hold:6rem;                          /* extra run for the sticky About heading, so the art's story ends while it is held */

  /* Type (fluid from 320 to 1280px) */
  --font:"Instrument Sans","PH Fallback",Arial,sans-serif;
  --fs-display:clamp(2.25rem,1.45rem + 4.25vw,4.75rem);
  --fs-h1-page:clamp(2.25rem,1.7rem + 2.6vw,3.5rem);
  --fs-h2:clamp(1.875rem,1.4rem + 2.4vw,3.125rem);
  --fs-h3:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --fs-lede:clamp(1.125rem,1.02rem + .5vw,1.3125rem);
  --fs-body:clamp(1rem,.96rem + .2vw,1.0625rem);
  --fs-small:.875rem;
  --fs-meta:.75rem;
  --fs-brand:1.3125rem;  /* 21px: keeps the horizontal lockup above its 120px minimum */
  --fs-button:.9375rem;
  --fs-nav:.9375rem;
  --fs-menu:1.125rem;
  --fs-email:clamp(1.3125rem,1.05rem + 1.1vw,1.875rem);
  --lh-display:1.02; --lh-h2:1.08; --lh-h3:1.25; --lh-lede:1.5; --lh-body:1.62; --lh-tight:1.3;
  --tr-display:-.035em; --tr-h2:-.025em; --tr-h3:-.01em; --tr-meta:.14em; --tr-button:-.005em; --tr-num:.02em;
  --wdth-display:88%; --wdth-h2:92%; --wdth-body:100%;
  --wght-body:400; --wght-medium:500; --wght-display:460; --wght-h2:470; --wght-strong:560; --wght-meta:600;

  /* Motion */
  --dur-instant:90ms; --dur-fast:160ms; --dur-base:240ms; --dur-header:320ms; --dur-slow:420ms;
  --dur-rise:560ms; --dur-reveal:640ms; --dur-sweep:1400ms;
  --dur-orb:520ms; --dur-toast:2400ms;
  --dur-nav-in:400ms; --dur-eyebrow:480ms; --dur-link:420ms; --dur-reduced:150ms;
  --dur-vt-out:220ms; --dur-vt-in:280ms;
  --ease-standard:cubic-bezier(.25,.1,.25,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-exit:cubic-bezier(.55,0,1,.45);
  --ease-settle:var(--ease-out);
  --stagger:70ms;
  --lift:-2px;
  --lift-sm:-1px;
  --nudge:2px;
  --rise-md:10px;
  --rise:12px;
  --rise-sm:8px;
  --press:.985;
  /* Load choreography offsets */
  --t-eyebrow:60ms; --t-h1-2:80ms; --t-lede:240ms; --t-cta:320ms;
  --sheen-start:-170px; --sheen-end:190px;
  /* Rise mark: distances are SVG user units; the replay is DESIGN.md 9.7 */
  --dur-mark:600ms; --dur-mark-replay:960ms; --dur-mark-close:500ms;
  --mark-rise:2px;      /* 32 cut: half of its 4-unit offset */
  --mark-close:1.1px;   /* 32 cut: half of its 2-unit gap, plus .1 overlap so the whole pearl shows no seam */
  --glass-rise:7.556px; /* master cut (128 box): half of its 15.111-unit offset */
  --glass-close:3.333px;/* master cut: half of its 6.667-unit gap */
  /* 404: in, one nacre sheen across the closed pearl, then split and rise */
  --t-glass-in:100ms; --t-glass-sheen:200ms; --t-glass-split:1140ms; --t-glass-rise:1280ms;
  --glass-sheen-start:-64px; --glass-sheen-end:68px;
  /* Arrival veil (DESIGN.md 9.6). boot.js mirrors three of these by hand: 360 and 480ms font wait, 840ms to "done" */
  --dur-veil-in:280ms; --t-veil-split:0ms; --t-veil-rise:100ms; --t-veil-lift:480ms; --dur-veil-lift:300ms;
  --veil-lift:40px; --t-veil:0ms;

  /* Elevation */
  --e-1:0 1px 2px rgb(16 36 33/.05),0 12px 32px -14px rgb(16 36 33/.14);
  --e-2:0 2px 4px rgb(16 36 33/.05),0 20px 48px -18px rgb(16 36 33/.18);
  --e-3:0 4px 12px -4px rgb(16 36 33/.10),0 32px 72px -28px rgb(16 36 33/.28);

  /* Z-index */
  --z-backdrop:-1; --z-content:1; --z-raised:10; --z-header:50; --z-menu:80; --z-toast:90; --z-veil:95; --z-skip:100;
}

@supports (transition-timing-function:linear(0,1)){
  :root{
    --ease-settle:linear(0,.052 4%,.173 8%,.321 12%,.507 17%,.669 22%,.817 28%,.916 34%,.982 41%,1.011 48%,1.02 56%,1.016 65%,1.009 75%,1.003 87%,1);
  }
}
@supports (height:1svh){
  :root{--genesis-lg:clamp(15rem,100svh - 16rem,28rem)}
}

/* Hero band and the two artworks (D-60 to D-63). The hero window and the About stage share one frame language:
   a warm paper surface under an arch. */
:root{
  --fs-sculpture:clamp(3.25rem,1.25rem + 5.8vw,6.75rem);
  --sculpture-leading:.96;
  --sculpture-tracking:-.055em;
  --sculpture-hero-space:clamp(3rem,5vw,5rem);
  --sculpture-copy-width:31rem;
  --sculpture-rule:rgb(248 247 242/.28);  /* hairline outline of the secondary action on teal */
  --brand-hairline:1px;
  --sculpture-art-ratio:4/5;
  --sculpture-arch:50% 50% var(--r-lg) var(--r-lg)/40% 40% var(--r-lg) var(--r-lg); /* a true semicircle on a 4:5 window */
  --sculpture-mobile-height:clamp(17rem,90vw,22.5rem);
  --sculpture-pearl-shadow:0 24px 64px rgb(0 0 0/.12);
  --sculpture-drift:34px;   /* how far the artwork lags the page as the hero scrolls away */
  /* The turn (D-67). Travelling a helix along its own axis IS a rotation of it, and after one whole pitch the drawing
     is identical, so this animation has no seam and no end. The ribbons never move relative to each other, so the
     ribbon can never tear. It runs only while a fine pointer is in the hero, and freezes where it is on the way out. */
  --sculpture-revolve:8s;   /* one whole turn, once, when a fine pointer arrives */
  --sculpture-glint:7px;    /* the pearl's highlights move against the pointer */
  --sculpture-form:5px;     /* its form shadow moves with it */
  --sculpture-light-paint:radial-gradient(circle closest-side,rgb(255 255 255/.4),rgb(255 255 255/.12) 34%,transparent 62%); /* a disc of light --sheen-size across; it is moved to the pointer, not repainted (D-96) */
  --sculpture-settle:700ms;
  --sculpture-emerge:1400ms;
  --sculpture-sheen:1800ms;
  --sculpture-delay:200ms;
  --sculpture-sheen-paint:linear-gradient(115deg,transparent 25%,rgb(255 255 255/.04) 42%,rgb(255 255 255/.28) 49%,rgb(255 255 255/.04) 56%,transparent 72%);
  --turn-art-width:30rem;   /* the About stage never grows wider than the hero window */
  --genesis-surface:radial-gradient(ellipse at 50% 60%,var(--champagne),var(--paper) 68%);
  --genesis-halo:radial-gradient(ellipse at 50% 52%,rgb(233 219 196/.5),rgb(233 219 196/.22) 42%,transparent 70%); /* the About art has no frame: it sits in its own warm light (D-64) */
  --art-frame:1px solid var(--line);
}

/* v5 (D-74 to D-80): night chapters, the serif accent, the story and the film. Light theme still: night is a room
   some sections stand in, not a dark mode. */
:root{
  --night:#071F1D;          /* the room the story is told in; one step below --teal-950. Mirrored in js/stage.js PALETTE */
  --night-field:radial-gradient(64rem 44rem at 76% 46%,var(--teal-900),transparent 72%); /* the hero artwork's own light */
  --veil-field:radial-gradient(40rem 30rem at 50% 50%,var(--teal-900),transparent 72%); /* the arrival veil's own light, round its pearl */
  --night-line:rgb(255 255 255/.14);   /* hairlines on night */
  --night-wash:rgb(255 255 255/.06);   /* a raised surface on night */
  --glass-tint-night:rgb(7 31 29/.78); /* the nav capsule while it is over a night section */
  --font-serif:"Instrument Serif",Georgia,"Times New Roman",serif; /* italic accent, a word or two in a headline; never body */
  --serif-size:1.1em;       /* the serif's x-height is smaller: this matches it to Instrument Sans optically */
  --serif-tracking:-.012em;
  --top-pad:calc(var(--header-top) + var(--header-h) + var(--s-3)); /* a night band that runs up under the header */
  --fs-chapter:clamp(1.625rem,1.25rem + 1.9vw,2.75rem);
  --measure-chapter:21em;
  --chapter-h:92vh;         /* one chapter's share of the scroll while the story is pinned */
  --still-w:30rem;
  --dur-chapter:420ms;
  --chapter-rest:.3;        /* a chapter that is not the current one */
  /* The film's room (v5.1, D-98). The film has no frame: its edges dissolve into the band, and the band is lit by it. */
  --film-fit:calc((100vh - var(--header-h) - var(--header-top) * 2) * 16 / 9); /* as wide as the film can be and still fit under the header */
  --film-light-cool:radial-gradient(ellipse 40% 42% at 50% 50%,rgb(143 181 172/.22),rgb(143 181 172/.07) 50%,transparent 76%); /* --teal-300: its light on the room */
  --film-light-warm:radial-gradient(ellipse 30% 34% at 50% 50%,rgb(233 219 196/.2),transparent 72%); /* --champagne: its warmth */
  /* Where the film dissolves into the band: along its own light, not its edges. The film is a pool of light in a dark
     frame (its vignette), so its dark edges fall away and the pearl, the strands and every word stay whole: the words
     sit within .33 of the height from the centre, the strands within .23 of the width */
  --film-fade:radial-gradient(ellipse 40% 56% at 50% 50%,#000 58%,transparent 100%);
  --film-fade-y:linear-gradient(transparent,#000 6%,#000 94%,transparent);
  --film-fade-narrow:radial-gradient(ellipse 48% 56% at 50% 50%,#000 60%,transparent 100%); /* the phone's 4:3 crop */
  --film-dim:.16;           /* what is left of the page round the film while it plays */
  --film-rest:.55;          /* the film's controls while it plays, until they are wanted */
  --film-play:3.5rem;       /* the play mark on the poster's pearl */
  --film-play-ground:rgb(7 31 29/.66);
  --film-ring:rgb(248 247 242/.7); /* the ring round the pearl when it is the play button */
  --film-thumb:.875rem;     /* the slider's handle */
  --film-track:2px;
  --ask-num:2.5rem;
  --genesis-wait:1600ms;     /* how long the About art's resting Rise waits for its story to take over (D-86) */
}
@supports (height:1svh){
  :root{--chapter-h:92svh;--film-fit:calc((100svh - var(--header-h) - var(--header-top) * 2) * 16 / 9)}
}