/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --background:#08080a;
  --foreground:#f3f1ea;
  --surface:#111114;
  --surface-2:#17171b;
  --muted:#807f78;
  --line:rgba(243,241,234,0.1);
  --line-strong:rgba(243,241,234,0.22);
  --accent:#ff3b1d;
  --accent-2:#ff6a3d;

  --font-display:"Anton", sans-serif;
  --font-sans:"Onest", sans-serif;

  --gutter:2.5rem;
  --section:9rem;

  --fs-hero:28rem;      --lh-hero:0.78;
  --fs-mega:13rem;      --lh-mega:0.86;
  --fs-display:7.5rem;  --lh-display:0.9;
  --fs-h1:5rem;         --lh-h1:0.95;
  --fs-h2:3.25rem;      --lh-h2:1;
  --fs-h3:1.75rem;      --lh-h3:1.15;
  /* Running text is the one thing that should not ride the vw grid: it used to be
     17px at 1920, 15.1px at 1280 and 12.8px at 768. Fixed in px it reads the same
     on every screen, and the display scale above still scales with the viewport.
     The lead only grows on a large desktop, where the measure is wide enough. */
  --fs-lead:17px;   --lh-lead:1.5;
  --fs-body:16px;   --lh-body:1.65;
  /* labels, captions, nav and footnotes: on the vw grid these fell to 11.6px on a
     13in laptop and 10.4px on a tablet, while a 27in desktop sat at 13px */
  --fs-eyebrow:13px;   --lh-eyebrow:1.25;
  --fs-micro:12px;     /* the mono markers that sit beside a label */
}

@media (min-width:1024px){ :root{ --fs-eyebrow:14px; --fs-micro:12.5px; } }
@media (min-width:1280px){ :root{ --fs-lead:19px; } }

/* ============================================================
   ADAPTIVE REM GRID — authored against a 1920px / 16px base
   ============================================================ */
html{ font-size:16px; background:#08080a; }
@media (max-width:1920px){ html{ font-size:0.833333vw; } }
@media (max-width:1440px){ html{ font-size:1.111111vw; } }
@media (max-width:1024px){ html{ font-size:1.5625vw; } }
@media (max-width:640px){
  html{ font-size:4.444444vw; }
  :root{
    --gutter:20px;            /* 16px left the copy sitting on the edge */
    --section:5.5rem;
    /* the display scale is authored for 1920 and is far too large on a phone:
       the hero name ran 506px wide on a 375px screen, stat figures hit 125px */
    --fs-hero:8rem;     --fs-mega:8rem;
    --fs-display:3.6rem;
    --fs-h1:2.9rem;
    --fs-h2:2.15rem;
    --fs-h3:1.375rem;
    /* lead, body and the label sizes are set in px and need no phone override */
  }
}

/* No hover on a touch screen, so the frames show their active state by default:
   colour, ring and sheen. The ring only spins on the frames that are playing. */

/* ============================================================
   RESET
   ============================================================ */
*{ margin:0; padding:0; box-sizing:border-box; }
img,video{ display:block; max-width:100%; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; -webkit-appearance:none; appearance:none; }
a{ color:inherit; text-decoration:none; }
svg{ display:block; }

body{
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--accent); color:var(--background); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============================================================
   TYPE HELPERS
   ============================================================ */
.eyebrow{
  display:flex; align-items:center; gap:0.75rem;
  font-size:var(--fs-eyebrow); line-height:var(--lh-eyebrow);
  font-weight:500; text-transform:uppercase; letter-spacing:0.22em;
  color:var(--muted);
}
.eyebrow::before{
  content:""; width:0.5rem; height:0.5rem; flex:none;
  border-radius:9999px; background:var(--accent);
}

.h-display{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:-0.01em; font-weight:400; }

/* ============================================================
   TEXT REVEAL PRIMITIVES
   ============================================================ */
.tr-line{ display:block; overflow:hidden; }
.tr-inner{ display:block; transform:translateY(110%); opacity:0; will-change:transform,opacity; }
.tr-line.play .tr-inner{
  transform:translateY(0); opacity:1;
  transition:transform 800ms cubic-bezier(0.16,1,0.3,1), opacity 800ms cubic-bezier(0.16,1,0.3,1);
}

/* letter-by-letter (hero name) */
.tr-letters{ display:block; white-space:nowrap; overflow:hidden; }
.tr-letter{ display:inline-block; transform:translateY(100%); opacity:0; will-change:transform,opacity; }
.tr-letters.play .tr-letter{
  transform:translateY(0); opacity:1;
  transition:transform 900ms cubic-bezier(0.16,1,0.3,1), opacity 900ms cubic-bezier(0.16,1,0.3,1);
}

/* word-by-word (quote) */
.tr-word{ display:inline-block; transform:translateY(18px); opacity:0; will-change:transform,opacity; }
.tr-words.play .tr-word{
  transform:translateY(0); opacity:1;
  transition:transform 520ms cubic-bezier(0.165,0.84,0.44,1), opacity 520ms cubic-bezier(0.165,0.84,0.44,1);
}

/* generic block fade+rise */
.rise{ opacity:0; transform:translateY(16px); will-change:transform,opacity; }
.rise.in-view{
  opacity:1; transform:translateY(0);
  transition:opacity 520ms cubic-bezier(0.16,1,0.3,1), transform 520ms cubic-bezier(0.16,1,0.3,1);
}
.rise-lg{ opacity:0; transform:translateY(60px); will-change:transform,opacity; }
.rise-lg.in-view{
  opacity:1; transform:translateY(0);
  transition:opacity 620ms cubic-bezier(0.16,1,0.3,1), transform 620ms cubic-bezier(0.16,1,0.3,1);
}
.rise-md{ opacity:0; transform:translateY(32px); will-change:transform,opacity; }
.rise-md.in-view{
  opacity:1; transform:translateY(0);
  transition:opacity 560ms cubic-bezier(0.16,1,0.3,1), transform 560ms cubic-bezier(0.16,1,0.3,1);
}

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  gap:0.75rem; padding:var(--gutter);
  transform:translateY(0);
}
#preloader::before{ content:""; position:absolute; inset:0; z-index:-10; background:var(--background); }
#preloader.wipe{ transform:translateY(-100%); transition:transform 650ms cubic-bezier(0.22,1,0.36,1); }
#preloader.done{ pointer-events:none; }
@media (min-width:640px){
  #preloader{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:1rem; }
}
.pl-brand{
  font-family:var(--font-display); font-size:var(--fs-h3); line-height:1;
  text-transform:uppercase; letter-spacing:-0.01em; color:var(--foreground);
  transition:opacity 300ms linear;
}
.pl-count{
  font-family:var(--font-display); font-size:var(--fs-display); line-height:1;
  font-variant-numeric:tabular-nums; color:var(--foreground);
  transition:opacity 300ms linear;
}
.pl-count span{ color:var(--accent); }
#preloader.fading .pl-brand,#preloader.fading .pl-count{ opacity:0; }

/* ============================================================
   NAV
   ============================================================ */
.site-nav{
  /* above the full-screen mobile menu (50) so its close button stays reachable; below the preloader (100) */
  position:fixed; inset-inline:0; top:0; z-index:60; pointer-events:none;
  transition:opacity 350ms ease-out;
}
/* a soft scrim behind the whole bar, so whatever scrolls underneath never competes with
   the links. It runs a little past the bar and fades to nothing, lets clicks through,
   and only appears once the page has moved (base.js sets .is-scrolled), so the top of
   each page still looks exactly as designed. */
.site-nav::before{
  content:""; position:absolute; inset:0 0 auto; height:calc(100% + 2.5rem);
  z-index:-1; pointer-events:none; opacity:0; transition:opacity 350ms ease-out;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--background) 92%, transparent) 0%,
    color-mix(in srgb, var(--background) 84%, transparent) 45%,
    color-mix(in srgb, var(--background) 50%, transparent) 72%,
    color-mix(in srgb, var(--background) 16%, transparent) 90%,
    transparent 100%);
}
.site-nav.is-scrolled::before{ opacity:1; }
.site-nav nav{
  pointer-events:auto; display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem var(--gutter);
}
/* fades out while reading down, back in on the way up (base.js sets .is-hidden).
   Keyboard focus always brings it back, and a hidden nav cannot be clicked. */
.site-nav.is-hidden{ opacity:0; }
.site-nav.is-hidden nav{ pointer-events:none; }
.site-nav.is-hidden:focus-within{ opacity:1; }
.site-nav.is-hidden:focus-within nav{ pointer-events:auto; }
.logo{ display:flex; align-items:center; gap:0.75rem; }
.monogram{
  display:grid; place-items:center; width:2.5rem; height:2.5rem; flex:none;
  border-radius:9999px; border:1px solid var(--line-strong);
  font-weight:600; letter-spacing:-0.01em; font-size:var(--fs-body);
}
.logo-name{
  display:none; font-size:var(--fs-eyebrow); font-weight:500;
  text-transform:uppercase; letter-spacing:0.22em; color:var(--muted);
}
@media (min-width:640px){ .logo-name{ display:block; } }

.nav-links{ display:none; align-items:center; gap:2.5rem; }
@media (min-width:768px){ .nav-links{ display:flex; } }
.nav-links a{
  position:relative; display:inline-block;
  font-size:var(--fs-eyebrow); font-weight:500; text-transform:uppercase;
  letter-spacing:0.18em; color:var(--muted);
  transition:color 340ms ease-out;
}
.nav-links a::after{
  content:""; position:absolute; bottom:-0.25rem; left:0; height:1px; width:0;
  background:var(--accent); transition:width 340ms ease-out;
}
.nav-links a:hover,.nav-links a:focus-visible{ color:var(--foreground); }
.nav-links a:hover::after,.nav-links a:focus-visible::after{ width:100%; }

.burger{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:0.375rem; width:2.5rem; height:2.5rem;
}
@media (min-width:768px){ .burger{ display:none; } }
.burger i{
  display:block; height:0.125rem; width:1.5rem; background:var(--foreground);
  transition:transform 340ms ease-out, opacity 200ms linear;
}
.burger.open i:nth-child(1){ transform:translateY(0.5rem) rotate(45deg); }
.burger.open i:nth-child(2){ opacity:0; }
.burger.open i:nth-child(3){ transform:translateY(-0.5rem) rotate(-45deg); }

#mobile-menu{
  position:fixed; inset:0; z-index:50; background:var(--background);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding-inline:var(--gutter); gap:1.5rem;
  opacity:0; visibility:hidden;
  transition:opacity 450ms ease-out, visibility 0s linear 450ms;
}
#mobile-menu.open{ opacity:1; visibility:visible; transition:opacity 450ms ease-out, visibility 0s; }
@media (min-width:768px){ #mobile-menu{ display:none; } }
#mobile-menu a{
  display:block; font-family:var(--font-display); font-size:var(--fs-h2);
  text-transform:uppercase; line-height:1; letter-spacing:-0.01em;
  transform:translateY(48px); opacity:0;
}
#mobile-menu.open a{
  transform:translateY(0); opacity:1;
  transition:transform 420ms ease-out, opacity 420ms ease-out;
}

/* ============================================================
   MAIN
   ============================================================ */
main{ position:relative; width:100%; overflow-x:hidden; }

/* ---------- HERO ---------- */
.hero{
  position:relative; display:flex; flex-direction:column;
  min-height:100svh; overflow:hidden;
}
.hero-top{
  position:relative; z-index:30;
  display:flex; flex-direction:column; gap:2rem;
  padding:7rem var(--gutter) 0;
}
@media (min-width:640px){
  .hero-top{ flex-direction:row; align-items:flex-start; justify-content:space-between; padding-top:8rem; }
}
.hero-roles{
  font-family:var(--font-display); text-transform:uppercase;
  line-height:1.05; letter-spacing:-0.01em; color:var(--foreground);
  font-size:var(--fs-h3);
}
@media (min-width:640px){ .hero-roles{ font-size:var(--fs-h2); } }
.hero-desc{ max-width:26rem; font-size:var(--fs-body); color:var(--muted); }
@media (min-width:640px){ .hero-desc{ text-align:right; } }

.hero-portrait{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  z-index:20; height:86vh; width:80vw; pointer-events:none;
}
@media (min-width:640px){ .hero-portrait{ width:48vw; } }
@media (min-width:1024px){ .hero-portrait{ width:36vw; } }

.hero-fade{
  position:absolute; inset-inline:0; bottom:0; z-index:20; height:26vh;
  pointer-events:none;
  background:linear-gradient(to bottom, transparent, #08080a);
}
.hero-name{
  position:absolute; inset-inline:0; bottom:0; z-index:10;
  transform:translateY(6%);
  display:flex; flex-direction:column; align-items:center;
  font-family:var(--font-display); text-transform:uppercase;
  line-height:var(--lh-hero); letter-spacing:-0.01em;
  color:var(--accent); font-size:var(--fs-mega);
  pointer-events:none;
}
@media (min-width:640px){ .hero-name{ font-size:var(--fs-hero); } }
/* short landscape viewports: a bottom-anchored 28rem name collides with the top row */
@media (max-height:760px) and (min-width:640px){ .hero-name{ font-size:var(--fs-mega); } }
@media (max-height:560px){ .hero-name{ font-size:var(--fs-display); } }

.scroll-cue{
  position:absolute; bottom:2rem; left:var(--gutter); z-index:30;
  display:flex; align-items:center; gap:0.75rem;
  font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.22em;
  color:var(--muted);
}
.scroll-cue::before{ content:""; width:2.5rem; height:1px; background:var(--accent); flex:none; }

/* ---------- MARQUEE ---------- */
.marquee{
  overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-block:2rem;
}
/* No transform and no animation here on purpose. A 3,000px strip promoted to its
   own layer is where iOS Safari gave up: it flashed in and out and never moved.
   The rail is scrolled instead, one line of JS per frame, which no compositor
   has to hold in memory. */
.marquee-track{
  display:flex; width:max-content; flex-wrap:nowrap; align-items:center;
}
.marquee-item{
  display:flex; align-items:center;
  font-family:var(--font-display); font-size:var(--fs-h2);
  text-transform:uppercase; letter-spacing:-0.01em; line-height:1;
  white-space:nowrap;
}
.marquee-item::after{
  content:""; margin-inline:2rem; width:0.625rem; height:0.625rem; flex:none;
  border-radius:9999px; background:var(--accent);
}

/* ---------- SECTION SHELL ---------- */
.section{ padding:var(--section) var(--gutter); }

.sec-header{ display:flex; flex-direction:column; gap:2rem; }
@media (min-width:640px){
  .sec-header{ flex-direction:row; align-items:flex-end; justify-content:space-between; }
}
.sec-heading{
  margin-top:1.5rem; font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:-0.01em; line-height:0.95; font-size:var(--fs-h2);
}
@media (min-width:640px){ .sec-heading{ font-size:var(--fs-h1); } }
.sec-heading.tight{ line-height:1; }
.sec-count{
  font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.22em;
  color:var(--muted); flex:none;
}

/* ---------- STORY ---------- */
.story-grid{ display:grid; grid-template-columns:1fr; gap:3rem; }
@media (min-width:1024px){
  .story-grid{ grid-template-columns:repeat(12,1fr); gap:var(--gutter); }
  .story-left{ grid-column:span 6; }
  .story-right{ grid-column:span 6; padding-top:0.5rem; }
}
.story-heading{ max-width:16ch; }
.story-body{ margin-top:2rem; max-width:46ch; font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--muted); }

.principle{
  display:grid; grid-template-columns:auto 1fr; column-gap:1.5rem;
  border-top:1px solid var(--line); padding-block:2rem;
}
.principle:last-child{ border-bottom:1px solid var(--line); }
.principle-n{
  font-family:var(--font-sans); font-size:var(--fs-h3); font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--accent); line-height:var(--lh-h3);
}
.principle h3{
  font-family:var(--font-sans); font-size:var(--fs-h3); font-weight:600;
  letter-spacing:-0.01em; line-height:var(--lh-h3);
}
.principle p{ margin-top:0.75rem; max-width:44ch; font-size:var(--fs-body); color:var(--muted); }

/* ---------- WORK ---------- */
.work-list{
  margin-top:4rem; display:grid; grid-template-columns:1fr;
  column-gap:var(--gutter); row-gap:4rem;
}
@media (min-width:768px){
  .work-list{ grid-template-columns:repeat(2,1fr); }
  .work-list > li:nth-child(even){ margin-top:6rem; }
}
.work-meta{
  margin-top:1.5rem; border-top:1px solid var(--line); padding-top:1.25rem;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
}
.work-name{
  font-family:var(--font-sans); font-size:var(--fs-h3); font-weight:600;
  letter-spacing:-0.01em; line-height:var(--lh-h3);
  transition:color 340ms ease-out;
}
.work-card:hover .work-name,.work-card:focus-within .work-name{ color:var(--accent); }
.work-blurb{ margin-top:0.5rem; max-width:42ch; font-size:var(--fs-body); color:var(--muted); }
.work-right{ flex:none; text-align:right; }
.work-year{
  font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.18em; color:var(--muted);
}
.work-outcome{
  /* white, not accent: the result carries more weight than the year above it, and
     the accent is left to the one thing that is clickable, the view-project cue */
  margin-top:0.5rem; font-size:var(--fs-eyebrow); font-weight:500;
  text-transform:uppercase; letter-spacing:0.18em; color:var(--foreground);
}
.work-cat{
  margin-top:0.75rem; font-size:var(--fs-eyebrow); text-transform:uppercase;
  letter-spacing:0.22em; color:var(--muted);
}

/* ---------- HERO ROLES: TRUE FOCUS (phones) ---------- */
.hero-roles{ position:relative; }
.hero-roles.focus-on .tr-line{ overflow:visible; }          /* let the frame and blur breathe */
.hero-roles.focus-on .tr-inner{
  filter:blur(5px); transition:filter 550ms ease; will-change:filter;
}
/* the line reveal still owns transform and opacity: name them again so the blur
   transition does not replace the slide-up if the frame turns on mid-reveal */
.hero-roles.focus-on .tr-line.play .tr-inner{
  transition:transform 800ms cubic-bezier(0.16,1,0.3,1), opacity 800ms cubic-bezier(0.16,1,0.3,1),
             filter 550ms ease;
}
@media (max-width:640px){ .hero-roles.focus-on .tr-inner{ filter:blur(3.4px); } }
.hero-roles.focus-manual .tr-line{ cursor:pointer; }
.hero-roles.focus-on .tr-line.is-focus .tr-inner{ filter:blur(0) !important; }
.hero-roles.focus-manual .tr-line{ width:max-content; }   /* hover target hugs the word */
.hero-roles .focus-frame{
  position:absolute; top:0; left:0; opacity:0; pointer-events:none;
  transition:transform 550ms cubic-bezier(.22,1,.36,1), width 550ms cubic-bezier(.22,1,.36,1),
             height 550ms cubic-bezier(.22,1,.36,1), opacity 300ms ease;
}
.hero-roles .corner{
  position:absolute; width:0.5rem; height:0.5rem;
  border:2px solid var(--accent); border-radius:2px;
  filter:drop-shadow(0 0 4px var(--accent));
}
.hero-roles .top-left{ top:-5px; left:-5px; border-right:none; border-bottom:none; }
.hero-roles .top-right{ top:-5px; right:-5px; border-left:none; border-bottom:none; }
.hero-roles .bottom-left{ bottom:-5px; left:-5px; border-right:none; border-top:none; }
.hero-roles .bottom-right{ bottom:-5px; right:-5px; border-left:none; border-top:none; }
@media (prefers-reduced-motion:reduce){
  .hero-roles.focus-on .tr-inner{ filter:none; transition:none; }
  .hero-roles .focus-frame{ transition:none; }
}

/* ---------- BACK TO TOP (phones) ---------- */
.to-top{ display:none; }
@media (max-width:640px){
  .to-top{
    position:fixed; right:var(--gutter);
    bottom:calc(1.1rem + env(safe-area-inset-bottom, 0px));
    z-index:40;                       /* under the menu sheet, over the page */
    display:grid; place-items:center;
    width:2.75rem; height:2.75rem; border-radius:9999px;
    border:1px solid var(--line-strong); color:var(--foreground);
    background:rgba(8,8,10,0.72); backdrop-filter:blur(8px);
    opacity:0; visibility:hidden; transform:translateY(0.5rem);
    transition:opacity 300ms ease-out, transform 300ms ease-out, visibility 300ms;
  }
  .to-top.is-on{ opacity:1; visibility:visible; transform:none; }
  .to-top:active{ border-color:var(--accent); color:var(--accent); }
  .to-top svg{
    width:1.05rem; height:1.05rem; fill:none; stroke:currentColor;
    stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  }
}
@media (prefers-reduced-motion:reduce){ .to-top{ transition:none; } }

/* ---------- INTRO FILM ---------- */
.intro-film{ margin:1.75rem auto 0; max-width:72rem; }
/* The film is centred and capped, so on a wide screen its edge sits inside the
   section gutter. Give the label the same column: it then starts where the
   caption under the film starts, instead of floating out to the left of it. */
@media (min-width:1024px){
  #intro .eyebrow{ width:100%; max-width:72rem; margin-inline:auto; }
}
.intro-film video{
  display:block; width:100%; height:auto; aspect-ratio:16/9;
  background:var(--surface); border-radius:0.125rem;
  cursor:pointer;                 /* the whole frame plays, so say so */
}
.intro-film figcaption{
  margin-top:0.7rem; font-size:var(--fs-eyebrow); text-transform:uppercase;
  letter-spacing:0.14em; color:var(--muted);
}

/* ---------- IMPACT ---------- */
.stats{
  margin-top:4rem; display:grid; grid-template-columns:1fr;
  border-top:1px solid var(--line);
  container-type:inline-size;
}
@media (min-width:640px){ .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .stats{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.stat{
  display:flex; flex-direction:column; gap:1rem;
  border-bottom:1px solid var(--line); padding-block:2.5rem;
}
@media (min-width:640px){
  .stat:nth-child(even){ border-left:1px solid var(--line); padding-left:2rem; }
}
@media (min-width:1024px){
  .stat{ padding-block:3rem; }
  .stat:nth-child(even){ border-left:1px solid var(--line); padding-left:2rem; }
  .stat:nth-child(4n+1){ border-left:none; padding-left:0; }
  .stat:nth-child(4n+2),.stat:nth-child(4n+3),.stat:nth-child(4n+4){
    border-left:1px solid var(--line); padding-left:2rem;
  }
}
.stat dd{
  /* capped by the column as well as the scale, so a long figure such as S$23.2K stays clear
     of the divider; 3.2em is the widest figure's advance plus some air */
  font-family:var(--font-display); font-size:min(var(--fs-display), calc(100cqi / 3.2)); line-height:1;
  letter-spacing:-0.01em; transition:color 340ms ease-out;
}
@media (min-width:640px){ .stat dd{ font-size:min(var(--fs-display), calc((50cqi - 2rem) / 3.2)); } }
@media (min-width:1024px){ .stat dd{ font-size:min(var(--fs-display), calc((25cqi - 2rem) / 3.2)); } }
.stat:hover dd{ color:var(--accent); }
.stat dt{
  max-width:20ch; font-size:var(--fs-body); text-transform:uppercase;
  letter-spacing:0.14em; color:var(--muted); line-height:1.4;
}
.stat-note{
  /* its own line under the label: set inline it read as one run of text that
     changed case halfway through. Sentence case also wants no extra tracking */
  display:block; margin-top:0.5rem;
  font-size:var(--fs-eyebrow); letter-spacing:0; line-height:1.5;
  color:var(--muted); opacity:0.85; text-transform:none; max-width:30ch;
}

/* ---------- BROKE (selector + featured) ---------- */
.broke-grid{ margin-top:4rem; display:grid; grid-template-columns:1fr; gap:var(--gutter); }
@media (min-width:1024px){
  .broke-grid{ grid-template-columns:repeat(12,1fr); }
  .broke-list{ grid-column:span 5; }
  .broke-feature{ grid-column:span 7; }
}
.broke-btn{
  width:100%; display:flex; align-items:baseline; gap:1.25rem;
  border-top:1px solid var(--line); padding-block:1.75rem; text-align:left;
}
.broke-list li:last-child .broke-btn{ border-bottom:1px solid var(--line); }
.broke-idx{
  font-size:var(--fs-eyebrow); font-variant-numeric:tabular-nums;
  letter-spacing:0.18em; color:var(--muted); flex:none;
  transition:color 340ms ease-out;
}
.broke-btn.is-on .broke-idx{ color:var(--accent); }
.broke-name{
  display:block;
  font-family:var(--font-sans); font-size:var(--fs-h3); font-weight:600;
  letter-spacing:-0.01em; line-height:var(--lh-h3); color:var(--muted);
  transition:color 340ms ease-out;
}
.broke-btn.is-on .broke-name,.broke-btn:hover .broke-name{ color:var(--foreground); }
.broke-role{
  display:block; margin-top:0.25rem; font-size:var(--fs-eyebrow); text-transform:uppercase;
  letter-spacing:0.18em; color:var(--muted);
}
.broke-rule{
  display:block; margin-top:0.75rem; height:1px; width:0; background:var(--accent);
  transition:width 340ms ease-out;
}
.broke-btn.is-on .broke-rule{ width:2.5rem; }

.broke-feature-inner{ display:grid; grid-template-columns:1fr; gap:2rem; align-items:flex-start; }
/* base first, desktop override second: the old order let these base rules
   cancel the media query, which is why the image ended up squeezed to ~188px */
.broke-quote{ order:2; }
.broke-figure{ order:1; width:100%; }
@media (min-width:640px){
  /* image first, then the quote — matches the stacked order on a phone, so the
     reading order is the same at every width */
  .broke-feature-inner{ grid-template-columns:auto 1fr; }
  .broke-figure{ order:1; width:20rem; }   /* sized for a diagram, not a portrait */
  .broke-quote{ order:2; }
}
.broke-quote p{
  max-width:30ch; font-family:var(--font-sans); font-size:var(--fs-h3);
  font-weight:500; line-height:1.3; letter-spacing:-0.01em; color:var(--foreground);
}
.broke-quote footer{
  margin-top:2rem; font-size:var(--fs-eyebrow); text-transform:uppercase;
  letter-spacing:0.18em; color:var(--muted);
}

/* ---------- CONTACT / FOOTER ---------- */
.contact{ padding-top:var(--section); padding-inline:var(--gutter); }
.contact-heading{
  margin-top:1.5rem; max-width:18ch; font-family:var(--font-display);
  text-transform:uppercase; line-height:0.95; letter-spacing:-0.01em;
  font-size:var(--fs-h1);
}
@media (min-width:640px){ .contact-heading{ font-size:var(--fs-display); } }
.contact-body{ margin-top:2rem; max-width:44ch; font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--muted); }
.email-link{
  margin-top:3rem; display:inline-flex; align-items:baseline; gap:0.75rem;
  font-family:var(--font-sans); font-size:var(--fs-h3); font-weight:600;
  letter-spacing:-0.01em; word-break:break-all;
  transition:color 340ms ease-out, transform 340ms ease-out;
}
@media (min-width:640px){ .email-link{ font-size:var(--fs-h1); gap:1rem; } }
.email-link:hover,.email-link:focus-visible{ color:var(--accent); transform:translateX(14px); }
.email-link i{ color:var(--accent); font-style:normal; }

.footer-bar{
  margin-top:var(--section); border-top:1px solid var(--line);
  padding-block:3rem; display:grid; grid-template-columns:1fr; gap:2.5rem;
}
@media (min-width:1024px){
  .footer-bar{ grid-template-columns:repeat(12,1fr); }
  .fb-a{ grid-column:span 8; }
  .fb-c{ grid-column:span 4; text-align:right; }
}
.signature{
  font-family:var(--font-display); font-size:var(--fs-h2);
  text-transform:uppercase; line-height:1; letter-spacing:-0.01em;
}
.sig-note{
  margin-top:1rem; font-size:var(--fs-eyebrow); text-transform:uppercase;
  letter-spacing:0.22em; color:var(--muted);
}
.social a{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-size:var(--fs-body); color:var(--muted);
  transition:color 340ms ease-out;
}
.social li + li{ margin-top:0.5rem; }
.social a:hover,.social a:focus-visible{ color:var(--foreground); }

/* the three ways to read more about me, directly under the email */
.contact-links{ margin-top:2rem; }
.contact-links .social{ display:flex; flex-wrap:wrap; gap:0.9rem 2.25rem; }
.contact-links .social li + li{ margin-top:0; }
.contact-links .social a{ padding-block:0.25rem; }   /* a thumb-sized target on a phone */
@media (max-width:640px){
  .contact-links .social{ flex-direction:column; gap:0.6rem; }
  .contact-links .social a{ padding-block:0.5rem; }   /* 44px of thumb */
}
.social .ic{
  width:1.15em; height:1.15em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  color:var(--muted); transition:color 340ms ease-out, transform 340ms ease-out;
}
.social a:hover .ic,.social a:focus-visible .ic{ color:var(--accent); transform:translateY(-1px); }
.social .dl{
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-style:normal;
  font-size:var(--fs-micro); letter-spacing:0.14em; color:var(--muted);
  margin-left:0.7rem; opacity:0.75; transition:color 340ms ease-out, opacity 340ms ease-out;
}
.social a:hover .dl,.social a:focus-visible .dl{ color:var(--accent); opacity:1; }
.copyright{
  font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.18em; color:var(--muted);
}

/* ============================================================
   LIQUID IMAGE
   ============================================================ */
.liquid{
  position:relative; overflow:hidden; background:var(--surface);
  border-radius:0.125rem;
}
.liquid.bare{ background:transparent; }
.liquid img,.liquid video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.liquid.bare img,.liquid.bare video{ object-fit:contain; object-position:center bottom; }

/* placeholder — shown until a real asset is dropped in */
.liquid-ph{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end; gap:0.5rem;
  padding:1.25rem;
  background:radial-gradient(130% 130% at 30% 15%, var(--surface-2), var(--background));
  border:1px solid var(--line);
  border-radius:0.125rem;
}
/* the hero asset is a transparent cutout, so its slot must not block the name behind it */
.liquid.bare .liquid-ph{
  border-style:dashed;
  background:linear-gradient(to bottom, rgba(23,23,27,0.35), rgba(8,8,10,0.72));
  backdrop-filter:blur(2px);
}
.ph-tag{
  font-size:var(--fs-eyebrow); font-weight:500; text-transform:uppercase;
  letter-spacing:0.22em; color:var(--accent);
}
.ph-label{
  font-size:var(--fs-body); line-height:1.35; color:var(--muted); max-width:34ch;
}
.ph-file{
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:var(--fs-micro);
  letter-spacing:0.02em; color:var(--muted); opacity:0.6;
}

.liquid-veil{
  position:absolute; inset:0; mix-blend-mode:color;
  background:var(--surface); opacity:0.88; pointer-events:none;
  transition:opacity 340ms ease-out;
}

.liquid-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 120%, color-mix(in srgb, #08080a 70%, transparent), transparent 60%);
}
.liquid.bare .liquid-veil,
.liquid.bare .liquid-vignette{ display:none; }

@media (hover:hover){
  .liquid:hover .liquid-veil,
  .work-card:hover .liquid-veil{ opacity:0; }
}
/* keyboard parity with the title rule — not gated on hover capability */
.work-card:focus-within .liquid-veil{ opacity:0; }
@media (hover:none){
  .liquid-veil{ opacity:0; }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  #preloader{ display:none !important; }
  /* a ticker that cannot move should read as a list, not as a clipped line */
  .marquee-track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; }
  .marquee-item:nth-child(n+6){ display:none; }
  .marquee-item:nth-child(5)::after{ display:none; }
  .tr-inner,.tr-letter,.tr-word{ transform:none !important; opacity:1 !important; transition:none !important; }
  .rise,.rise-lg,.rise-md{ opacity:1 !important; transform:none !important; transition:none !important; }
  .email-link:hover{ transform:none; }
  *{ scroll-behavior:auto !important; }
}

/* current page in the nav */
.nav-links a[aria-current="page"]{ color:var(--foreground); }
.nav-links a[aria-current="page"]::after{ width:100%; background:var(--accent); }
#mobile-menu a[aria-current="page"]{ color:var(--accent); }

/* current role — sits at the foot of the hero, opposite the scroll cue, so the
   two read as one footer row across the first screen */
.hero-now{
  display:flex; align-items:flex-start; gap:0.6rem;
  margin-top:1.75rem; padding-inline:var(--gutter);
  font-size:var(--fs-eyebrow); line-height:1.65;
  text-transform:uppercase; letter-spacing:0.14em;
  color:var(--foreground); opacity:0.88;   /* it overlays the red name, so it needs the contrast */
}
.now-lines{ display:block; }
.now-lines .nw{ white-space:nowrap; }   /* on a phone, break between facts, never inside one */
@media (min-width:640px){
  .hero-now{
    position:absolute; z-index:30;
    bottom:2rem; right:var(--gutter);
    margin:0; padding:0;
    flex-direction:row-reverse;      /* dot to the outside, mirroring the scroll rule */
    text-align:right;
  }
}
.now-dot{
  width:0.45rem; height:0.45rem; flex:none; margin-top:0.42em; border-radius:9999px;
  background:var(--accent); box-shadow:0 0 0 0 var(--accent);
  animation:now-pulse 2.8s ease-out infinite;
}
@keyframes now-pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%{ box-shadow:0 0 0 0.5rem transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}
@media (prefers-reduced-motion:reduce){ .now-dot{ animation:none; } }

.sec-context{
  margin-top:0.6rem; max-width:30ch;
  text-transform:none; letter-spacing:0; font-size:var(--fs-body);
  color:var(--muted); opacity:0.85;
}
@media (min-width:640px){ .sec-count{ text-align:right; } .sec-context{ margin-left:auto; } }

.hero-left{ display:flex; flex-direction:column; }
.hero-right{ display:flex; flex-direction:column; align-items:flex-start; }
@media (min-width:640px){ .hero-right{ align-items:flex-end; } }

.page-count a{ color:var(--accent); border-bottom:1px solid transparent; }
.page-count a:hover{ border-color:var(--accent); }

/* ---------- motion frames: looping video and live animation ---------- */
.liquid video,
.liquid .liquid-anim{ position:absolute; inset:0; width:100%; height:100%; }
.liquid video{ object-fit:cover; object-position:center top; }
.liquid-anim svg{ display:block; width:100%; height:100%; }

/* while motion plays the card is live: same glow as hover. On desktop hover
   already sets this; on touch screens it is the only way the glow appears. */
.liquid.is-playing .liquid-veil{ opacity:0; }


/* What Broke: you interact with the list, not the image, so a grey-until-hovered
   image would never show its colour (including the ILLUSTRATIVE label). */
.broke-figure .liquid-veil{ display:none; }

/* ============================================================
   PHONE OVERRIDES — last in the file on purpose.
   Earlier in the cascade these lose to the base component rules,
   which is what kept the portrait at full height and the work
   meta row right-aligned off the edge of the screen.
   ============================================================ */
@media (max-width:640px){
  /* the year + outcome column cannot shrink, so it ran past the right edge */
  .work-meta{ flex-direction:column; gap:0.75rem; }
  .work-right{ text-align:left; }

  /* the hero copy stacks on a phone and needs more room than a phone screen
     leaves above the portrait, so the hero gets a little extra height, the copy
     starts higher, and the portrait begins below it instead of behind the face */
  .hero{ min-height:calc(100svh + 9rem); }
  .hero-top{ padding-top:7rem; }

  /* the four roles fill the width as a two by two block instead of a narrow list */
  .hero-roles{
    display:grid; grid-template-columns:max-content max-content;
    justify-content:space-between; justify-items:center; row-gap:0.12em;
    font-size:min(11.3vw, 3.2rem); line-height:1.04;
  }
  .hero-roles .tr-line{ position:relative; display:flex; align-items:baseline; }
  .hero-roles .tr-line .tr-inner{ display:inline-block; }
  .hero-portrait{ height:52vh; width:94vw; }

  /* The duplicated strip has to stay inside what a phone GPU will hold: at the h2
     size it ran past 4,000px, which is where iOS stops compositing it */
  .marquee{ padding-block:1.5rem; }
  .marquee-item{ font-size:1.55rem; }
  .marquee-item::after{ margin-inline:1.1rem; width:0.5rem; height:0.5rem; }

  /* the four figures read as a two by two block: one per row ran the section to
     1,352px on a 375 screen, which is most of two phone screens for four numbers */
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat{ padding-block:1.75rem; gap:0.75rem; }
  .stat:nth-child(odd){ padding-right:1rem; }   /* keep the labels off the divider */
  .stat:nth-child(even){ border-left:1px solid var(--line); padding-left:1rem; }
  .stat dd{ font-size:min(var(--fs-display), calc((50cqi - 1rem) / 3.2)); }
  .stat dt{ font-size:13px; letter-spacing:0.1em; line-height:1.45; max-width:none; }
  .stat-note{ margin-top:0.4rem; max-width:none; }

  /* WHAT BROKE reads as an accordion here: the panel is moved under the open row
     by initBroke, so the row, the quote and the diagram stay in one eyeline */
  .broke-btn{ position:relative; padding-right:2.25rem; }
  .broke-btn::after{
    content:"+"; position:absolute; right:0; top:1.75rem;
    font-size:20px; line-height:1; color:var(--accent);
  }
  .broke-btn.is-on::after{ content:"\2212"; }     /* minus */
  .broke-list{ border-bottom:1px solid var(--line); }
  .broke-list li:last-child .broke-btn{ border-bottom:none; }
  .broke-feature{ padding-bottom:2rem; }
  .broke-still{ overflow:hidden; pointer-events:none; }   /* the copy left behind to collapse */
  .broke-feature-inner{ gap:1.25rem; }
  .broke-figure{ max-width:13rem; margin-inline:auto; }
  /* the quote set at the h3 scale was 460px of the section on its own */
  .broke-quote p{ font-size:17px; line-height:1.5; max-width:none; }
  .broke-quote footer{ margin-top:1.25rem; }
}

/* ============================================================
   PROJECT DIALOGS — opened by links to "#project-{slug}".
   Kept after the phone overrides: nothing above styles these classes.
   ============================================================ */
html.pd-open{ overflow:hidden; }

.pd-cue{
  display:inline-flex; align-items:center; gap:0.45rem; margin-top:1rem;
  font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.18em;
  color:var(--accent);
}
.pd-cue i{ font-style:normal; transition:transform 340ms ease-out; }
.pd-trigger{ color:inherit; text-decoration:none; }
.pd-trigger:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

/* the landing page cards: the whole card is the target */
.work-card{ position:relative; }
.work-card .pd-trigger::after{ content:""; position:absolute; inset:0; z-index:2; }
@media (hover:hover){
  .work-card:hover .pd-cue i{ transform:translate(0.2rem,-0.2rem); }
}

dialog.pd{
  position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:0 var(--gutter);
  border:0; background:transparent; color:var(--foreground);
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; transition:opacity 260ms ease-out;
}
dialog.pd::backdrop{ background:rgba(8,8,10,0.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
dialog.pd.is-open{ opacity:1; }

.pd-sheet{
  position:relative; max-width:72rem; margin:clamp(0rem, 3vw, 3rem) auto;
  background:var(--surface); border:1px solid var(--line); border-radius:0.125rem; outline:none;
  padding:clamp(1.5rem, 4vw, 4.5rem);
  transform:translateY(1.5rem); transition:transform 380ms cubic-bezier(.22,1,.36,1);
}
dialog.pd.is-open .pd-sheet{ transform:none; }

.pd-bar{
  position:sticky; top:0; z-index:3; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  margin:calc(-1 * clamp(1.5rem, 4vw, 4.5rem)) calc(-1 * clamp(1.5rem, 4vw, 4.5rem)) 0;
  /* the close button sits as far from the card's right edge as from its top edge */
  padding:1rem 1rem 1rem clamp(1.5rem, 4vw, 4.5rem);
  background:var(--surface);
}
.pd-bar::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:1.75rem; pointer-events:none;
  background:linear-gradient(var(--surface), transparent);
}
.pd-eyebrow{ font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.18em; color:var(--accent); }
.pd-close{
  flex:none; position:relative; width:2.75rem; height:2.75rem; border-radius:9999px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--foreground); cursor:pointer;
  transition:border-color 200ms ease, background 200ms ease;
}
.pd-close::before,.pd-close::after{
  content:""; position:absolute; left:50%; top:50%; width:1rem; height:1.5px; background:currentColor;
}
.pd-close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.pd-close::after { transform:translate(-50%,-50%) rotate(-45deg); }
.pd-close:hover{ border-color:var(--foreground); }
.pd-close:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.pd-title{
  margin-top:1.5rem; font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(2.5rem, 6.2vw, 5.5rem); line-height:0.92; letter-spacing:-0.005em;
}
.pd-lead{ margin-top:1.5rem; max-width:58ch; font-size:var(--fs-lead); line-height:var(--lh-lead); }

.pd-facts{
  margin:2.25rem 0 0; display:grid; gap:1.25rem 2rem;
  grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr));
  padding:1.5rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.pd-facts dt{ font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.18em; color:var(--muted); }
.pd-facts dd{ margin:0.4rem 0 0; font-size:var(--fs-body); }

.pd-sec{ margin-top:3.25rem; }
.pd-h{ font-size:1.375rem; font-weight:600; letter-spacing:-0.01em; line-height:1.25; }
.pd-sec p{ margin-top:0.75rem; max-width:62ch; color:rgba(243,241,234,0.74); }
.pd-sec p + p{ margin-top:0.9rem; }
.pd-sec code{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:0.9em; color:var(--foreground); }

.pd-fig{ margin:1.5rem 0 0; }
.pd-fig img,.pd-fig video,.pd-fig .pd-svg{
  display:block; width:100%; height:auto; border-radius:0.125rem; background:var(--surface-2);
}
.pd-fig img.pd-clear{ background:transparent; }
.pd-fig figcaption,.pd-cap{
  margin-top:0.7rem; font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.14em; color:var(--muted);
}
.pd-grid{ display:grid; gap:0.75rem; }
.pd-grid-2{ grid-template-columns:repeat(2, 1fr); }
.pd-grid-3{ grid-template-columns:repeat(3, 1fr); }
.pd-grid > *{ min-width:0; }
.pd-tall{ max-height:34rem; width:auto !important; margin:0 auto; }

/* before / after with the reasoning beside it */
.pd-compare{ display:grid; gap:2rem; margin-top:1.5rem; align-items:start; }
.pd-phones{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.pd-phones figure{ margin:0; text-align:center; }
.pd-phones img{ width:100%; max-width:15rem; height:auto; margin:0 auto; display:block; }
.pd-notes{ list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; }
.pd-notes li{ padding-left:1rem; border-left:2px solid var(--line-strong); }
.pd-notes b{ display:block; font-weight:600; }
.pd-notes span{ display:block; margin-top:0.25rem; color:rgba(243,241,234,0.74); }
@media (min-width:900px){ .pd-compare{ grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); } }

/* numbers */
.pd-stats{ display:grid; gap:1.5rem 2rem; grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); margin-top:1.5rem; }
.pd-stat b{ display:block; font-family:var(--font-display); font-weight:400; font-size:clamp(2.2rem, 4vw, 3.4rem); line-height:1; color:var(--foreground); }
.pd-stat span{ display:block; margin-top:0.5rem; color:rgba(243,241,234,0.74); max-width:30ch; }

.pd-next{
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem;
  margin-top:4.5rem; padding-top:1.5rem; border-top:1px solid var(--line-strong);
}
.pd-next p{ font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.18em; color:var(--muted); }
.pd-next a{
  display:inline-flex; gap:0.6rem; align-items:baseline; margin-top:0.5rem;
  font-size:var(--fs-h3); font-weight:600; letter-spacing:-0.01em; color:var(--foreground); text-decoration:none;
}
.pd-next a i{ font-style:normal; color:var(--accent); transition:transform 300ms ease-out; }
.pd-next a:hover i{ transform:translateX(0.3rem); }
.pd-next a:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

@media (max-width:640px){
  dialog.pd{ padding:0; }
  .pd-sheet{ min-height:100%; margin:0; border:0; border-radius:0; padding:1.25rem var(--gutter) 3rem; }
  .pd-bar{ margin:-1.25rem calc(-1 * var(--gutter)) 0; padding:0.9rem 0.9rem 0.9rem var(--gutter); }
  .pd-title{ font-size:3rem; margin-top:1rem; }
  .pd-grid-3{ grid-template-columns:repeat(2, 1fr); }
  .pd-grid-2.pd-stack-sm{ grid-template-columns:1fr; }
  .pd-next a{ font-size:1.25rem; }
}
@media (prefers-reduced-motion:reduce){
  dialog.pd,.pd-sheet{ transition:none; }
  .pd-sheet{ transform:none; }
}