/* ============================================================
   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;
  --fs-lead:1.375rem;   --lh-lead:1.45;
  --fs-body:1.0625rem;  --lh-body:1.6;
  --fs-eyebrow:0.8125rem; --lh-eyebrow:1.2;
}

/* ============================================================
   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;
    --fs-lead:1.125rem;
    --fs-body:1rem;
    --fs-eyebrow:0.75rem;
  }
}

/* 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{ position:fixed; inset-inline:0; top:0; z-index:50; pointer-events:none; }
.site-nav nav{
  pointer-events:auto; display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem var(--gutter);
}
.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;
}
.marquee-track{
  display:flex; width:max-content; flex-wrap:nowrap; align-items:center;
  animation:marquee 22s linear infinite;
}
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.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{
  margin-top:0.5rem; font-size:var(--fs-eyebrow); font-weight:500;
  text-transform:uppercase; letter-spacing:0.18em; color:var(--accent);
}
.work-cat{
  margin-top:0.75rem; font-size:var(--fs-eyebrow); text-transform:uppercase;
  letter-spacing:0.22em; color:var(--muted);
}

/* ---------- IMPACT ---------- */
.stats{
  margin-top:4rem; display:grid; grid-template-columns:1fr;
  border-top:1px solid var(--line);
}
@media (min-width:640px){ .stats{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .stats{ grid-template-columns:repeat(4,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{
  font-family:var(--font-display); font-size:var(--fs-display); line-height:1;
  letter-spacing:-0.01em; transition:color 340ms ease-out;
}
.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{
  margin-top:0.35rem; font-size:var(--fs-eyebrow); letter-spacing:0.06em;
  color:var(--muted); opacity:0.72; text-transform:none; max-width:24ch;
}

/* ---------- 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[aria-selected="true"] .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[aria-selected="true"] .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[aria-selected="true"] .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 6; }
  .fb-b{ grid-column:span 3; }
  .fb-c{ grid-column:span 3; 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; font-size:var(--fs-body); color:var(--muted);
  transition:color 340ms ease-out;
}
.social li + li{ margin-top:0.5rem; }
.social a::before{
  content:""; width:0; height:1px; background:var(--accent); margin-right:0;
  transition:width 340ms ease-out, margin-right 340ms ease-out;
}
.social a:hover,.social a:focus-visible{ color:var(--foreground); }
.social a:hover::before,.social a:focus-visible::before{ width:1.5rem; margin-right:0.75rem; }
.social .dl{
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-style:normal;
  font-size:0.6875rem; 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:0.75rem;
  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; }
  .marquee-track{ animation: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; }
@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:5.5rem; }
  .hero-portrait{ height:52vh; width:94vw; }
}