/* ==========================================================================
   MILAN NOVOTNÝ — personal site
   Signal editorial system: one grotesque, three colors, zero ornament.
   ========================================================================== */

:root{
  --cream:#EDE4DD;
  --cream-dark:#D2CAC3;
  --black:#000000;
  --red:#FF0001;
  --red-ink:#C20003; /* accessible red for small text on cream (5.08:1 AA) */

  --line:var(--red);

  --font-grotesk:'Archivo',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --w-regular:400; --w-medium:500; --w-bold:700; --w-black:900;

  --t-label:11px; --t-body:16px;

  --page-x:27px; --page-x-lg:72px;
  --sp-section:136px;

  --dur:300ms;
  --ease-out-standard:cubic-bezier(0.22,1,0.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-grotesk);
  background:var(--cream);
  color:var(--red);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--red);color:var(--cream);}
img,svg{display:block;}
a{color:inherit;text-decoration:none;}

/* visible keyboard focus (a11y) */
:focus-visible{outline:3px solid var(--black);outline-offset:3px;}
.speaking :focus-visible,.awards :focus-visible,.contact :focus-visible,.footer :focus-visible,.cell.feature :focus-visible,.li-card :focus-visible{outline-color:var(--cream);}
.nav-links>a:not(.nav-cta):focus-visible::after{transform:scaleX(1);}

.pad{padding-left:var(--page-x-lg);padding-right:var(--page-x-lg);}
@media(max-width:768px){.pad{padding-left:var(--page-x);padding-right:var(--page-x);}}

/* ---------- typographic atoms ---------- */
.label{
  font-size:var(--t-label);font-weight:var(--w-bold);
  letter-spacing:.04em;text-transform:uppercase;color:var(--black);
  display:inline-flex;align-items:center;gap:14px;
}
.label .l-dot{width:7px;height:7px;border-radius:999px;background:var(--red);flex:0 0 auto;}
.aside-note{font-size:12px;font-weight:var(--w-bold);letter-spacing:.04em;text-transform:uppercase;}
.rule{border:0;border-top:1px solid var(--line);}

/* screen-reader-only utility */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* skip link : off-screen until focused, then an on-system black chip */
.skip-link{position:fixed;left:12px;top:-64px;z-index:200;background:var(--black);color:var(--cream);
  padding:12px 18px;font-size:12px;font-weight:var(--w-bold);letter-spacing:.04em;text-transform:uppercase;
  transition:top .2s var(--ease-out-standard);}
.skip-link:focus{top:12px;}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--red);z-index:120;}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px var(--page-x-lg);
  background:color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--red);
  transition:transform .45s var(--ease-out-standard);
}
.nav.hidden{transform:translateY(-100%);}
.mono{
  width:42px;height:42px;background:var(--red);color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  font-weight:var(--w-black);font-size:14px;letter-spacing:.02em;
}
.nav-links{display:flex;gap:34px;align-items:center;}
.nav-links>a:not(.nav-cta){
  position:relative;
  font-size:var(--t-label);font-weight:var(--w-bold);
  letter-spacing:.04em;text-transform:uppercase;color:var(--black);
  padding-bottom:3px;
}
.nav-links>a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease-out-standard);
}
.nav-links>a:not(.nav-cta):hover::after,.nav-links>a:not(.nav-cta).active::after{transform:scaleX(1);}

/* sticky Contact CTA inside the nav */
.nav-cta{padding:11px 20px;font-size:12px;margin-left:6px;}
.nav-cta .cta-dot{width:8px;height:8px;}

/* compact Get-in-touch CTA in the mobile top bar (shown only with the hamburger).
   Scoped under .nav so it out-specifies the base .cta{display:inline-flex}. */
.nav .nav-cta-mobile{display:none;height:44px;padding:0 16px;font-size:11px;gap:8px;margin-left:auto;margin-right:10px;}
.nav-cta-mobile .cta-dot{width:8px;height:8px;}

/* hamburger (mobile only) */
.nav-burger{
  display:none;width:44px;height:44px;border:0;background:var(--red);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;
}
.nav-burger span{display:block;width:18px;height:2px;background:var(--cream);
  transition:transform .35s var(--ease-out-standard),opacity .25s var(--ease-out-standard);}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* mobile drawer — full-screen sheet */
.m-menu{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:90;
  background:var(--cream);
  padding:calc(70px + 44px) var(--page-x) 40px;
  transform:translateY(-100%);opacity:0;pointer-events:none;
  transition:transform .5s var(--ease-out-standard),opacity .35s var(--ease-out-standard);
}
.m-menu.open{transform:translateY(0);opacity:1;pointer-events:auto;}
.m-menu-inner{display:flex;flex-direction:column;gap:2px;min-height:100%;}
.m-menu-inner a:not(.m-menu-cta){
  font-size:clamp(30px,9vw,40px);font-weight:var(--w-black);letter-spacing:-.015em;color:var(--black);
  padding:16px 0;border-bottom:1px solid color-mix(in srgb,var(--red) 35%,transparent);
  transition:color .25s var(--ease-out-standard),padding-left .25s var(--ease-out-standard);
}
.m-menu-inner a:not(.m-menu-cta):active{color:var(--red);padding-left:10px;}
.m-menu-cta{margin-top:auto;align-self:stretch;justify-content:center;padding-top:22px;padding-bottom:22px;font-size:14px;}
/* Scroll lock while the drawer is open.
   overflow:hidden alone does NOT lock scrolling on iOS Safari, which let the page
   behind the drawer scroll, fired scroll events, and hid the top bar with the
   drawer still open — leaving no way to close it. position:fixed does lock iOS;
   script-v2.js stores the scroll offset in body.style.top and restores it on close. */
body.menu-open{position:fixed;left:0;right:0;width:100%;overflow:hidden;}
/* The bar carries the drawer's only close control, so it must never slide away
   while the drawer is open. JS also guards this; this is the belt-and-braces half. */
body.menu-open .nav{transform:none;}

/* switch to hamburger early enough that the desktop nav + CTA never crowd */
@media(max-width:860px){
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .nav .nav-cta-mobile{display:inline-flex;align-items:center;}
}
@media(max-width:768px){
  .nav{padding:14px var(--page-x);}
}

/* ---------- CTA family (signature: red-dot sweep wipe) ---------- */
.cta{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:14px;
  font-size:14px;font-weight:var(--w-bold);
  letter-spacing:.04em;text-transform:uppercase;
  padding:18px 28px;cursor:pointer;isolation:isolate;
}
.cta .cta-dot{
  width:10px;height:10px;border-radius:999px;background:var(--red);flex:0 0 auto;
  transition:transform .45s var(--ease-out-standard);
}
.cta .cta-label{position:relative;z-index:2;transition:color .35s var(--ease-out-standard);}
.cta::before{
  content:"";position:absolute;inset:0;background:var(--red);
  transform:translateX(-101%);z-index:1;
  transition:transform .45s var(--ease-out-standard);
}
.cta:hover::before{transform:translateX(0);}
.cta-primary{background:var(--black);color:var(--cream);}
.cta-primary:hover .cta-label{color:var(--black);}
.cta-primary:hover .cta-dot{transform:scale(1.4);background:var(--cream);}
.cta-primary .cta-dot{z-index:2;}
.cta-link{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-size:14px;font-weight:var(--w-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--red-ink);
  text-decoration:underline;text-underline-offset:4px;
  transition:gap .25s var(--ease-out-standard);
}
.cta-link:hover{gap:16px;}

/* ---------- section scaffolding ---------- */
section{position:relative;}
.sec-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  padding-top:var(--sp-section);
}
@media(max-width:768px){.sec-head{padding-top:88px;}}
@media(max-width:640px){.sec-head .aside-note{display:none;}}
.sec-head .aside-note{color:var(--black);}
/* coloured sections carry a top margin, so their heads take less padding (≈160px total lead-in) */
.awards .sec-head,.speaking .sec-head,.contact .sec-head{padding-top:72px;}

/* ---------- reveal animations ----------
   Hidden initial states apply ONLY when JS is present (html.js).
   Without JS everything is visible — animation is enhancement, never a gate. */
.reveal{transition:opacity .8s var(--ease-out-standard),transform .8s var(--ease-out-standard);
  transition-delay:var(--d,0ms);}
html.js .reveal{opacity:0;transform:translateY(30px);}
html.js .reveal.in,.reveal.in{opacity:1;transform:none;}
.mask{overflow:hidden;display:block;}
.mask>span{display:block;transition:transform .9s var(--ease-out-standard);transition-delay:var(--d,0ms);}
html.js .mask>span{transform:translateY(110%);}
html.js .in .mask>span,html.js .mask.in>span,.in .mask>span,.mask.in>span{transform:translateY(0);}

/* ==========================================================================
   01 — HERO
   ========================================================================== */
.hero{display:flex;flex-direction:column;position:relative;padding-bottom:8px;}
.hero-inner{flex:0 0 auto;position:relative;padding-top:clamp(120px,14vh,146px);}
.hero-cols{display:grid;grid-template-columns:1fr clamp(200px,20vw,260px);gap:clamp(32px,3.4vw,52px);align-items:start;}

/* headline : uniform size, single red, fits every viewport */
.hero h1{margin-top:18px;}
.h-line{display:block;font-size:clamp(30px,3.4vw,48px);font-weight:var(--w-black);line-height:1.02;letter-spacing:-.02em;color:var(--red);text-wrap:balance;}

/* subheadline : black, short */
.hero .sub{margin-top:20px;max-width:620px;font-size:16px;line-height:1.58;color:var(--black);}
.hero .sub b{color:var(--red-ink);font-weight:var(--w-bold);}

.hero .ctas{margin-top:26px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;}

/* hero-scoped CTA sizing : larger than the default 14px/18px-28px */
.hero .ctas .cta{padding:18px 34px;font-size:15px;}

/* headshot */
.photo{margin:0;}
.photo-frame{position:relative;aspect-ratio:3/4;border:1px solid var(--red);background:var(--black);overflow:hidden;}
.photo-frame img{width:100%;height:100%;object-fit:cover;object-position:45% 42%;display:block;transition:transform .7s var(--ease-out-standard),filter .7s var(--ease-out-standard);}
.photo-frame:hover img{transform:scale(1.045);}
.photo-frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--red);pointer-events:none;}
.photo-frame .ph-note{display:none;}
.photo-frame.empty img{display:none;}
.photo-frame.empty .ph-note{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:24px;text-align:center;
  font-size:11px;font-weight:var(--w-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--cream);
}
.photo-frame.empty .ph-note span{font-size:72px;font-weight:var(--w-black);color:var(--red);line-height:1;}
.photo figcaption{
  margin-top:12px;font-size:11px;font-weight:var(--w-bold);
  letter-spacing:.04em;text-transform:uppercase;color:var(--black);
}
@media(max-width:900px){
  .hero-cols{grid-template-columns:1fr;gap:36px;}
  .photo{margin-top:0;max-width:300px;}
}

/* ---------- hero social proof : quiet company logo bar ---------- */
.hero-proof{margin-top:clamp(18px,2.6vh,34px);}
.hero-proof .rule{margin:0;}

/* company logo bar (desktop: static single row) */
.worked{display:flex;align-items:center;gap:28px;padding:16px 0;}
.worked-label{flex:0 0 auto;font-size:10px;font-weight:var(--w-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--black);}
.logo-marquee{flex:1;min-width:0;overflow:hidden;}
.logo-lane{display:flex;align-items:center;width:100%;}
.logo-track{display:flex;align-items:center;gap:clamp(26px,4vw,60px);}
.logo-track:first-child{flex:1;justify-content:space-between;}
.logo-track[aria-hidden]{display:none;}
.wm-logo{width:auto;flex:0 0 auto;opacity:.9;transition:opacity var(--dur) var(--ease-out-standard);}
.wm-logo:hover{opacity:1;}
/* per-logo optical heights so every mark reads at the same visual weight (brand colour) */
.lb-ct{height:17px;} .lb-ts{height:20px;} .lb-bd{height:27px;}
.lb-cr{height:20px;} .lb-ph{height:18px;}

/* award band : now inside the hero left column, under the CTAs.
   Plaques sized so both fit on one row at 1440 and 1280. */
.award-band{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px;}
.award-band-label{flex:0 0 auto;font-size:10px;font-weight:var(--w-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--black);}
.award-proofs{display:flex;gap:12px 14px;flex-wrap:wrap;}
.award-proof{display:inline-flex;align-items:center;gap:14px;background:transparent;border:1px solid var(--red);padding:9px 15px;}
.award-logo{width:auto;height:30px;flex:0 0 auto;}
.award-result{font-size:11px;font-weight:var(--w-black);letter-spacing:.03em;text-transform:uppercase;color:var(--red-ink);white-space:nowrap;}

/* marquee keyframe (mobile) */
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(max-width:768px){
  .worked{flex-direction:column;align-items:flex-start;gap:12px;}
  .logo-marquee{width:100%;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
  .logo-lane{width:max-content;animation:marquee 26s linear infinite;}
  .logo-track{gap:34px;padding-right:34px;flex:0 0 auto;justify-content:flex-start;}
  .logo-track:first-child{flex:0 0 auto;}
  .logo-track[aria-hidden]{display:flex;}
  .logo-marquee:hover .logo-lane,.logo-marquee:active .logo-lane{animation-play-state:paused;}
  .award-proofs{width:100%;}
  .award-result{white-space:normal;}
  /* QA no-anim hook: fall back to a scrollable single row */
  html.noanim .logo-lane{animation:none;width:auto;}
  html.noanim .logo-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none;}
  html.noanim .logo-track[aria-hidden]{display:none;}
  html.noanim .logo-track:first-child{flex:1;}
}
@media(max-width:768px) and (prefers-reduced-motion:reduce){
  .logo-lane{animation:none;width:auto;}
  .logo-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch;-webkit-mask-image:none;mask-image:none;}
  .logo-track[aria-hidden]{display:none;}
  .logo-track:first-child{flex:1;}
}

/* ==========================================================================
   02 — WHAT I DO
   ========================================================================== */
.what h2{font-size:clamp(38px,5.2vw,80px);font-weight:var(--w-black);line-height:.9;letter-spacing:-.02em;color:var(--red);margin-top:26px;}
.what h2 em{font-style:normal;color:var(--black);}
.what-lede{margin-top:24px;max-width:52ch;font-size:16px;line-height:1.6;color:var(--black);font-weight:var(--w-medium);}
.what-lede b{color:var(--red-ink);}
.work-grid{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--red);}
.cell{
  position:relative;border-right:1px solid var(--red);border-bottom:1px solid var(--red);
  padding:34px 32px 40px;min-height:262px;display:flex;flex-direction:column;gap:14px;
  transition:background .35s var(--ease-out-standard);
}
.cell:nth-child(3n){border-right:0;}
.cell:nth-child(n+4){border-bottom:0;}
.cell .idx{font-size:11px;font-weight:var(--w-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--black);transition:color .35s;}
.cell-metric{
  font-size:clamp(42px,4.6vw,64px);font-weight:var(--w-black);line-height:.82;
  letter-spacing:-.03em;color:var(--red);font-variant-numeric:tabular-nums;margin-top:auto;
  transition:color .35s var(--ease-out-standard);
}
.cell-metric .u{font-size:.34em;font-weight:var(--w-bold);letter-spacing:0;margin-left:5px;}
.cell h3{font-size:19px;font-weight:var(--w-black);letter-spacing:-.01em;color:var(--black);line-height:1.1;transition:color .35s;}
.cell p{font-size:14px;line-height:1.55;color:var(--black);max-width:40ch;transition:color .35s;}
.cell p b{color:var(--red-ink);font-weight:var(--w-bold);transition:color .35s;}
.cell:hover,.cell.feature{background:var(--black);}
.cell:hover .idx,.cell.feature .idx{color:var(--cream-dark);}
.cell:hover h3,.cell.feature h3{color:var(--cream);}
.cell:hover p,.cell.feature p{color:var(--cream-dark);}
.cell:hover p b,.cell.feature p b{color:var(--red);}
.cell.feature:hover{background:var(--red);}
.cell.feature:hover .idx,.cell.feature:hover p{color:var(--black);}
.cell.feature:hover h3{color:var(--cream);}
.cell.feature:hover p b{color:var(--cream);}
.cell.feature:hover .cell-metric{color:var(--cream);}
@media(max-width:1024px){
  .work-grid{grid-template-columns:repeat(2,1fr);}
  .cell:nth-child(3n){border-right:1px solid var(--red);}
  .cell:nth-child(2n){border-right:0;}
  .cell:nth-child(n+4){border-bottom:1px solid var(--red);}
  .cell:nth-child(n+5){border-bottom:0;}
}
@media(max-width:640px){
  .work-grid{grid-template-columns:1fr;}
  .cell{border-right:0 !important;border-bottom:1px solid var(--red) !important;min-height:0;}
  .cell:last-child{border-bottom:0 !important;}
}

/* ==========================================================================
   03 — EARNED LINKS (closes the What-I-do section)
   ========================================================================== */
.earned-wrap{margin-top:72px;padding-bottom:0;}
/* proximity fix (UX Movement): label sits directly above its chips as one
   left-aligned cluster, so the eye does not travel across the page to link them */
.earned{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-top:28px;}
.earned .lead{font-size:15px;color:var(--black);font-weight:var(--w-medium);}
.earned .lead b{color:var(--red-ink);font-weight:var(--w-black);}
.logo-chips{display:flex;gap:12px;flex-wrap:wrap;}
.logo-chips span{
  border:1px solid var(--black);color:var(--black);padding:10px 16px;
  font-size:var(--t-label);font-weight:var(--w-bold);letter-spacing:.04em;text-transform:uppercase;
  transition:background var(--dur),color var(--dur),border-color var(--dur);
}
.logo-chips span:hover{background:var(--black);color:var(--cream);}

/* ==========================================================================
   04 — AWARDS (dark edition)
   ========================================================================== */
.awards{background:var(--black);color:var(--cream);overflow:hidden;margin-top:64px;}
.awards .sec-head .label{color:var(--cream);}
.awards .sec-head .aside-note{color:var(--cream-dark);}
.awards h2{font-size:clamp(33px,5.2vw,84px);font-weight:var(--w-black);line-height:.88;letter-spacing:-.02em;color:var(--cream);margin-top:30px;position:relative;z-index:2;}
.awards h2 em{font-style:normal;color:var(--red);}
.awards .sec-head{position:relative;z-index:2;}
.badges{margin-top:60px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;z-index:2;}
.badge{
  border:1px solid var(--cream);padding:26px 28px;
  display:flex;flex-direction:column;gap:14px;background:var(--black);
  transition:transform .35s var(--ease-out-standard),background .35s;
}
.badge:hover{transform:translateY(-6px);}
.badge .b-org{font-size:11px;font-weight:var(--w-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--cream);}
.badge .b-place{font-size:38px;font-weight:var(--w-black);line-height:.9;letter-spacing:-.02em;color:var(--red);}
.badge .b-cat{font-size:12px;line-height:1.5;color:var(--cream-dark);text-transform:uppercase;letter-spacing:.04em;}
/* awarding-organization logos on the dark field: full-colour brand marks on cream
   plates (matches the hero plaque language, instant brand recognition). No filter. */
.award-logos{margin-top:44px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.award-logos img{box-sizing:content-box;height:40px;width:auto;background:var(--cream);padding:12px 16px;}
.awards .proj{margin-top:34px;font-size:13px;letter-spacing:.04em;color:var(--cream-dark);line-height:1.7;}
.awards .proj b{color:var(--cream);}
.quote{margin-top:44px;display:grid;grid-template-columns:56px 1fr;gap:24px;align-items:start;padding-bottom:var(--sp-section);}
.qmark{font-size:90px;font-weight:var(--w-black);color:var(--red);line-height:.6;}
.quote p{font-size:clamp(17px,1.6vw,22px);line-height:1.45;color:var(--cream);max-width:62ch;font-weight:var(--w-medium);}
.quote p b{color:var(--red);}
.quote .src{margin-top:14px;font-size:11px;font-weight:var(--w-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--cream-dark);}
@media(max-width:1024px){.badges{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.badges{grid-template-columns:1fr;}.quote{grid-template-columns:1fr;padding-bottom:88px;}.qmark{display:none;}}

/* ==========================================================================
   05 — MENTORING
   ========================================================================== */
.mentor .lede{margin-top:26px;display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:end;}
.mentor h2{font-size:clamp(40px,5vw,80px);font-weight:var(--w-black);line-height:.85;letter-spacing:-.02em;color:var(--red);}
.mentor h2 em{font-style:normal;color:var(--black);}
.mentor .lede p{font-size:var(--t-body);line-height:1.6;color:var(--black);max-width:46ch;justify-self:end;}
.mentor .lede p b{color:var(--red-ink);font-weight:var(--w-bold);}
.rows{margin-top:56px;border-top:1px solid var(--red);}
.mrow{
  display:grid;grid-template-columns:90px 1.1fr 1fr .9fr;gap:28px;align-items:baseline;
  padding:21px var(--page-x-lg);border-bottom:1px solid var(--red);
  margin:0 calc(-1 * var(--page-x-lg));
  transition:background .3s var(--ease-out-standard);
}
.mrow .idx{font-size:12px;font-weight:var(--w-bold);letter-spacing:.04em;color:var(--black);transition:color .3s;}
.mrow .org{font-size:clamp(20px,1.8vw,26px);font-weight:var(--w-black);letter-spacing:-.01em;color:var(--red);transition:color .3s;}
.mrow .role{font-size:12px;font-weight:var(--w-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--black);transition:color .3s;}
.mrow .note{font-size:13px;line-height:1.5;color:var(--black);text-align:right;transition:color .3s;}
.mrow .note b{color:var(--red-ink);}
.mrow:hover,.mrow.lead-row{background:var(--black);}
.mrow:hover .org,.mrow.lead-row .org{color:var(--cream);}
.mrow:hover .idx,.mrow.lead-row .idx,
.mrow:hover .role,.mrow.lead-row .role,
.mrow:hover .note,.mrow.lead-row .note{color:var(--cream-dark);}
.mrow:hover .note b,.mrow.lead-row .note b{color:var(--red);}
@media(max-width:1024px){
  .mentor .lede{grid-template-columns:1fr;gap:24px;}
  .mentor .lede p{justify-self:start;}
  .mrow{grid-template-columns:60px 1fr;gap:8px 20px;}
  .mrow .role{grid-column:2;}
  .mrow .note{text-align:left;grid-column:2;}
}
@media(max-width:768px){
  .mrow{margin:0 calc(-1 * var(--page-x));padding-left:var(--page-x);padding-right:var(--page-x);}
}

/* ==========================================================================
   06 — SPEAKING (red edition)
   ========================================================================== */
.speaking{background:var(--red);color:var(--black);margin-top:64px;overflow:hidden;}
.speaking .sec-head .label{color:var(--black);}
.speaking .sec-head .label .l-dot{background:var(--cream);}
.speaking .sec-head .aside-note{color:var(--black);}
.speaking h2{margin-top:30px;font-size:clamp(56px,9.4vw,150px);font-weight:var(--w-black);line-height:.83;letter-spacing:-.03em;color:var(--black);}
.speaking h2 em{font-style:normal;color:var(--cream);}
.talks-lede{margin-top:24px;font-size:16px;line-height:1.6;color:var(--black);font-weight:var(--w-medium);max-width:52ch;}
/* lecture cards on the red field: black cards, cream type */
.lect-grid{margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.lect{background:var(--black);padding:36px 32px 40px;display:flex;flex-direction:column;gap:16px;min-height:300px;transition:transform .35s var(--ease-out-standard);}
.lect:hover{transform:translateY(-6px);}
.lect .l-tag{font-size:10px;font-weight:var(--w-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--red);}
.lect h3{font-size:clamp(24px,2.2vw,32px);font-weight:var(--w-black);line-height:1;letter-spacing:-.015em;color:var(--cream);}
.lect p{font-size:14px;line-height:1.6;color:var(--cream-dark);}
.lect .lect-soon,.lect .lect-watch{margin-top:auto;align-self:flex-start;}
/* inert placeholder: a muted label, not a button (no border, no dot) */
.lect .lect-soon{
  color:var(--cream-dark);
  font-size:11px;font-weight:var(--w-bold);letter-spacing:.08em;text-transform:uppercase;
  padding-top:14px;
}
/* when a recording link lands: <a class="cta lect-watch" href="…"><span class="cta-dot"></span><span class="cta-label">Watch the talk</span></a> */
.lect .lect-watch{box-shadow:inset 0 0 0 1px var(--cream);color:var(--cream);}
.lect .lect-watch .cta-label{color:var(--cream);}
.lect .lect-watch .cta-dot{background:var(--red);z-index:2;}

/* ---------- click-to-load video facade (Talks) ---------- */
.lect-vid .video{position:relative;margin-top:16px;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;}
.video-facade{position:relative;display:block;width:100%;height:100%;margin:0;padding:0;border:0;background:#000;cursor:pointer;overflow:hidden;}
.video-poster{width:100%;height:100%;object-fit:cover;display:block;opacity:.8;transition:opacity .3s var(--ease-out-standard),transform .5s var(--ease-out-standard);}
.video-facade:hover .video-poster,.video-facade:focus-visible .video-poster{opacity:1;transform:scale(1.05);}
.video-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;transition:transform .4s var(--ease-out-standard);}
.video-play::before{content:"";width:60px;height:60px;border-radius:999px;background:var(--red);}
.video-tri{position:absolute;width:0;height:0;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent var(--cream);margin-left:4px;}
.video-facade:hover .video-play,.video-facade:focus-visible .video-play{transform:scale(1.08);}
.video-facade:focus-visible{outline:3px solid var(--cream);outline-offset:-3px;}
.video-iframe{width:100%;height:100%;border:0;display:block;}
/* in a video card the Watch CTA sits directly under the player, not pinned to the card bottom */
.lect-vid .lect-watch{margin-top:16px;}
.stages{
  margin-top:48px;padding-bottom:110px;display:flex;gap:10px 14px;flex-wrap:wrap;align-items:baseline;
  font-size:13px;font-weight:var(--w-bold);color:var(--black);
}
.stages .stages-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-right:8px;}
@media(max-width:1024px){.lect-grid{grid-template-columns:1fr;}.lect{min-height:0;}}
@media(max-width:640px){.stages{padding-bottom:72px;}}

@media(max-width:768px){.footer{padding-left:var(--page-x);padding-right:var(--page-x);}}

/* ==========================================================================
   07 — WRITING
   ========================================================================== */
.writing h2{margin-top:26px;font-size:clamp(38px,5.2vw,80px);font-weight:var(--w-black);line-height:.9;letter-spacing:-.02em;color:var(--red);}
.writing h2 em{font-style:normal;color:var(--black);}
.writing .w-grid{margin-top:56px;display:grid;grid-template-columns:1.25fr .75fr;gap:18px;align-items:stretch;}
.sub-card{
  border:1px solid var(--red);padding:56px;display:flex;flex-direction:column;
  justify-content:space-between;min-height:480px;position:relative;overflow:hidden;
}
.sub-card .tag{font-size:11px;font-weight:var(--w-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--black);display:flex;gap:12px;align-items:center;}
.sub-card .tag i{width:7px;height:7px;border-radius:999px;background:var(--red);}
.sub-card h3{font-size:clamp(34px,5.4vw,84px);font-weight:var(--w-black);line-height:.85;letter-spacing:-.02em;color:var(--red);margin-top:28px;overflow-wrap:anywhere;}
.sub-card>div>p{margin-top:26px;font-size:var(--t-body);line-height:1.6;color:var(--black);max-width:48ch;}
.sub-card>div>p b{color:var(--red-ink);font-weight:var(--w-bold);}
.sub-card .foot{margin-top:40px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.stamp{
  position:absolute;right:42px;top:48px;width:120px;height:120px;
  animation:stamp-spin 26s linear infinite;
}
@keyframes stamp-spin{to{transform:rotate(360deg);}}
.li-card{background:var(--black);padding:44px;display:flex;flex-direction:column;justify-content:space-between;gap:48px;}
.li-card .tag{font-size:11px;font-weight:var(--w-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--cream-dark);}
.li-card h3{font-size:clamp(26px,2.4vw,34px);font-weight:var(--w-black);line-height:1;color:var(--cream);margin-top:22px;}
.li-card h3 em{font-style:normal;color:var(--red);}
.li-card p{font-size:14px;line-height:1.6;color:var(--cream-dark);margin-top:18px;}
.li-card .cta-link{color:var(--cream);}
@media(max-width:1024px){.writing .w-grid{grid-template-columns:1fr;}.sub-card{min-height:0;padding:40px 27px;}.li-card{padding:36px 27px;}}
@media(max-width:768px){.stamp{width:88px;height:88px;right:18px;top:18px;}}
/* on narrow phones the spinning stamp overlapped the tag: drop it into flow */
@media(max-width:640px){
  .sub-card{padding-bottom:32px;}
  .sub-card .stamp{position:static;margin:0 0 16px;width:72px;height:72px;}
  .sub-card .tag{padding-right:0;}
}

/* ==========================================================================
   08 — ABOUT (cream, editorial, LLM-readable static text)
   ========================================================================== */
.about h2{margin-top:26px;font-size:clamp(38px,5.2vw,80px);font-weight:var(--w-black);line-height:.9;letter-spacing:-.02em;color:var(--red);}
.about h2 em{font-style:normal;color:var(--black);}
.about-body{margin-top:34px;max-width:72ch;display:flex;flex-direction:column;gap:20px;}
.about-body p{font-size:17px;line-height:1.62;color:var(--black);}
.about-body p b{color:var(--red-ink);font-weight:var(--w-bold);}
/* Fast facts : the design system's row language (red rules, uppercase keys) */
.fast-facts{margin-top:60px;}
.ff-label{font-size:11px;font-weight:var(--w-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--black);display:inline-flex;align-items:center;gap:14px;}
.ff-label .l-dot{width:7px;height:7px;border-radius:999px;background:var(--red);flex:0 0 auto;}
.ff-list{margin-top:24px;border-top:1px solid var(--red);max-width:900px;}
.ff-row{display:grid;grid-template-columns:190px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--red);align-items:baseline;}
.ff-row dt{font-size:12px;font-weight:var(--w-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--red-ink);}
.ff-row dd{font-size:15px;line-height:1.55;color:var(--black);}
@media(max-width:640px){
  .about-body p{font-size:16px;}
  .ff-row{grid-template-columns:1fr;gap:6px;padding:16px 0;}
}

/* ==========================================================================
   09 — CONTACT (dark)
   ========================================================================== */
.contact{background:var(--black);color:var(--cream);margin-top:64px;}
.contact .sec-head .label{color:var(--cream);}
.contact .sec-head .aside-note{color:var(--cream-dark);}
.contact h2{
  margin-top:40px;font-size:clamp(58px,14.4vw,230px);
  font-weight:var(--w-black);line-height:.8;letter-spacing:-.04em;color:var(--cream);
}
.contact h2 em{font-style:normal;color:var(--red);}
.contact-line{margin-top:34px;font-size:18px;line-height:1.6;color:var(--cream);max-width:40ch;}
.contact .wall{margin-top:40px;}
.wall{display:flex;gap:14px 26px;align-items:center;margin-top:8px;flex-wrap:wrap;padding-bottom:120px;}
.wall a,.wall span{font-size:12px;font-weight:var(--w-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--cream-dark);}
.wall a{text-decoration:underline;text-underline-offset:4px;color:var(--cream);}
.wall a:hover{color:var(--red);}
@media(max-width:768px){.wall{padding-bottom:72px;}}
@media(max-width:640px){.wall span{display:none;}}

/* ---------- contact form : single column, labels above fields, on the dark field ---------- */
.contact-form{margin-top:40px;max-width:560px;display:flex;flex-direction:column;gap:22px;padding-bottom:72px;}
.cf-field{display:flex;flex-direction:column;gap:10px;}
.cf-field label{font-size:11px;font-weight:var(--w-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--cream);}
.cf-field input,.cf-field textarea{
  font-family:inherit;font-size:16px;line-height:1.5;color:var(--cream);
  background:transparent;border:1px solid var(--cream);border-radius:0;
  padding:14px 16px;width:100%;
  transition:border-color .25s var(--ease-out-standard);
}
.cf-field textarea{resize:vertical;min-height:132px;}
.cf-field input:hover,.cf-field textarea:hover{border-color:var(--red);}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:var(--cream-dark);}
/* honeypot : off-screen for people, out of the tab order, catnip for naive bots */
.cf-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
/* black submit CTA needs a light edge to read on the dark field (same trick as .lect-watch) */
.cf-submit{align-self:flex-start;box-shadow:inset 0 0 0 1px var(--cream);}
.cf-note{font-size:12px;letter-spacing:.02em;color:var(--cream-dark);min-height:1.2em;}
@media(max-width:768px){.contact-form{padding-bottom:56px;}}

/* ---------- about ----------
   No scroll-margin-top here on purpose. It used to carry 80px, which made About
   the only section that landed 80px lower than every other anchor target. The
   sections already reserve their own top padding (~72-88px) for the fixed bar,
   so an extra offset just reads as a random empty band. */

/* ---------- writing now closes the page, so it carries the bottom lead-out ---------- */
.writing{padding-bottom:var(--sp-section);}
@media(max-width:768px){.writing{padding-bottom:88px;}}

/* ---------- footer ---------- */
.footer{
  border-top:1px solid var(--red);background:var(--black);
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:26px var(--page-x-lg);flex-wrap:wrap;
}
.footer .mono{width:38px;height:38px;font-size:12px;}
.f-links{display:flex;gap:18px 28px;flex-wrap:wrap;}
.f-links a{font-size:11px;font-weight:var(--w-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--cream);}
.f-links a:hover{color:var(--red);}
.triad{display:inline-flex;gap:8px;align-items:center;}
.triad i{width:16px;height:16px;border-radius:999px;display:block;}
.triad .t-b{background:var(--black);box-shadow:inset 0 0 0 1px var(--cream);}
.triad .t-c{background:var(--cream);}
.triad .t-r{background:var(--red);}
.footer .copy{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--cream-dark);}

/* ---------- QA / no-animation mode ---------- */
html.noanim{scroll-behavior:auto;}
html.noanim *,html.noanim *::before,html.noanim *::after{animation:none !important;transition:none !important;}
html.noanim .reveal,html.noanim .mask>span{opacity:1 !important;transform:none !important;}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .reveal,.mask>span{opacity:1 !important;transform:none !important;}
}