/* styles.css - the page around the canvas.
   Static fallback tokens keep semantic profile content readable without JavaScript; page.js then mirrors settings.js
   onto <html> so the enhanced scene and page stay synchronized.

   FROM settings.js (set by page.js on :root)
     colours   --page-bg --ink --ink-soft --line --surface --accent --accent-soft --s3-backdrop
     type      --font-display --font-ui --headline-desktop --headline-mobile --mid-desktop --mid-mobile
               --body-size --label-size --card-title --card-title-feature
     spacing   --margin-desktop --margin-mobile --nav-h --section-pad-desktop --section-pad-mobile --content-max
               --pill-gap --pill-gap-mobile --radius-pill --radius-card --card-min-h
     motion    --ease-out --ui-ms --reduced-ms --text-drift --chrome-ghost
     geometry  --page-viewports --content-gap --content-gap-mobile (vh numbers) --head-h-desktop --head-h-mobile
               --head-y-offset --head-y-offset-mobile --head-aspect --s5-scale --s5-y --s5-y-mobile --s5-from --s5-to
               --s3-mid (fractions) --tint-pct
   MEASURED by page.js on resize only: --hero-h --pills-h --bar-h (px), and per pill --below (rows under it).
   WRITTEN by main.js (on change): --p, --s1..--s5, --head-k (S5 shrink applied), --head-cy / --head-hf (head box
   centre and height as shares of the canvas height); attributes data-stage, data-gl. All optional: CSS falls back.
   OWN attributes on <html>: data-page="ready", data-layout="desktop|mobile", data-motion="full|reduced",
   data-fallback="on" (main.js never answered), data-fallback-img="missing", data-bar="solid" (content under the bar).
   DERIVED here: --m --hl --ml --pad --pad-top --hh --gap-content --hyo --s5y --below-head (per layout), --k5 --hc1 --hc5
   --hk-scale --hcy --hhk --hwk (head on screen),
   --sh --sw (1% of the stage's height / width), --ink-2 (body ink, 80% ink on page).

   Z-INDEX SCALE (one stacking context per layer)
     inside .stage (z 0, fixed): canvas + fallback picture 1, S3 wash 2, stage text 3, pills 4
     .content 2 (scrolls over the stage), .chrome-top 3 (fixed top bar, always above the content), .hud and noscript 10
   Only transform and opacity ever transition. One easing: --ease-out. Accent hairline = the hover language. */

/* ---- base ------------------------------------------------------------------------------------------------------ */
:root {
  /* Static fallbacks keep the full page readable before modules load and when JavaScript is disabled. */
  --page-bg:#fafafa; --ink:#171717; --ink-soft:#6f6f6d; --line:#e4e4e2; --surface:#f1f1ef;
  --accent:#d8923a; --accent-soft:#f3d9b1; --s3-backdrop:#ededeb;
  --font-display:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --font-ui:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --headline-desktop:60px; --headline-mobile:38px; --mid-desktop:76px; --mid-mobile:42px;
  --body-size:16px; --label-size:13px; --card-title:30px; --card-title-feature:44px; --card-min-h:280px;
  --margin-desktop:36px; --margin-mobile:20px; --nav-h:64px; --section-pad-desktop:120px; --section-pad-mobile:72px;
  --pad-top-desktop:64px; --pad-top-mobile:40px; --content-max:1280px; --pill-gap:48px; --pill-gap-mobile:12px;
  --radius-pill:999px; --radius-card:14px; --ease-out:cubic-bezier(.16,1,.3,1); --ui-ms:420ms; --reduced-ms:600ms;
  --page-viewports:5.5; --content-gap:30; --content-gap-mobile:40; --head-h-desktop:.56; --head-h-mobile:.38;
  --head-y-offset:.02; --head-y-offset-mobile:.07; --head-aspect:.75; --s5-scale:.42; --s5-y:.30; --s5-y-mobile:.27;
  --s5-from:.8; --s5-to:1; --s3-mid:.5; --chrome-ghost:.3; --text-drift:12px; --tint-pct:55%;
  --p:0; --s1:1; --s2:0; --s3:0; --s4:0; --s5:0;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  background: var(--page-bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  --ink-2: color-mix(in srgb, var(--ink) 80%, var(--page-bg));
  /* per-layout aliases (desktop first) */
  --m: var(--margin-desktop);
  --hl: var(--headline-desktop);
  --ml: var(--mid-desktop);
  --pad: var(--section-pad-desktop);
  --pad-top: var(--pad-top-desktop);
  --hh: var(--head-h-desktop);
  --gap-content: var(--content-gap);
  --hyo: var(--head-y-offset);
  --s5y: var(--s5-y);
  --below-head: 1.5rem;            /* air kept under the small S5 head before the content surface starts */
  /* the head on screen, as fractions of the stage height. --k5 = how far into the S5 shrink we are (0..1).
     main.js may report the real values (--head-k, --head-cy, --head-hf); otherwise they are worked out from settings */
  --k5: var(--head-k, clamp(0, (var(--p) - var(--s5-from)) / (var(--s5-to) - var(--s5-from)), 1));
  --hc1: calc(0.5 - var(--hyo));
  --hc5: calc(0.5 - var(--s5y));
  --hk-scale: calc(1 + (var(--s5-scale) - 1) * var(--k5));
  --hcy: var(--head-cy, calc(var(--hc1) + (var(--hc5) - var(--hc1)) * var(--k5)));
  --hhk: var(--head-hf, calc(var(--hh) * var(--hk-scale)));
  --hwk: calc(var(--hhk) * var(--head-aspect));
}
html[data-layout="mobile"] {
  --m: var(--margin-mobile);
  --hl: var(--headline-mobile);
  --ml: var(--mid-mobile);
  --pad: var(--section-pad-mobile);
  --pad-top: var(--pad-top-mobile);
  --hh: var(--head-h-mobile);
  --gap-content: var(--content-gap-mobile);
  --hyo: var(--head-y-offset-mobile, var(--head-y-offset));
  --s5y: var(--s5-y-mobile, var(--s5-y));
  --below-head: calc(var(--pill-gap-mobile) + var(--pills-h, 0px) + 2.25 * var(--label-size)); /* pill block + note under the head */
}
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--body-size);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
img { display: block; }
:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }

/* ---- the fixed stage --------------------------------------------------------------------------------------------- */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  container-type: size;           /* children measure against the canvas box: 1cqh = 1% of the stage height */
  --sh: 1vh;
  --sw: 1vw;
}
@supports (height: 1cqh) { .stage { --sh: 1cqh; --sw: 1cqw; } }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; touch-action: pan-y; cursor: grab; }
#gl:active { cursor: grabbing; }
.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; }
.scene-status {
  position: absolute; z-index: 5; left: 50%; bottom: calc(var(--m) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); padding: 0.55rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--page-bg); color: var(--ink-soft); font: 500 var(--label-size)/1 var(--font-ui); letter-spacing: 0.02em;
  pointer-events: none; transition: opacity var(--ui-ms) var(--ease-out);
}
.status-failed { display: none; }
html[data-gl="ready"] .scene-status { opacity: 0; visibility: hidden; }
html[data-gl="nowebgl"] .status-loading, html[data-gl="failed"] .status-loading, html[data-fallback="on"] .status-loading { display: none; }
html[data-gl="nowebgl"] .status-failed, html[data-gl="failed"] .status-failed, html[data-fallback="on"] .status-failed { display: inline; }
.motion-reset {
  position: absolute; z-index: 5; right: calc(var(--m) + env(safe-area-inset-right, 0px)); bottom: calc(var(--m) + env(safe-area-inset-bottom, 0px));
  min-height: 2.25rem; padding: 0 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--page-bg); color: var(--ink-soft); font: 500 var(--label-size)/1 var(--font-ui); cursor: pointer;
  transition: color var(--ui-ms) var(--ease-out), border-color var(--ui-ms) var(--ease-out), opacity var(--ui-ms) var(--ease-out);
}
.motion-reset:hover { color: var(--ink); border-color: var(--accent); }
html:not([data-gl="ready"]) .motion-reset, html[data-motion="reduced"] .motion-reset { opacity: 0; pointer-events: none; }

/* flat picture of the head (no WebGL / scene failed): same size and place as the S1 head, follows the S5 shrink */
.head-fallback {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1;
  height: calc(var(--hh) * 100 * var(--sh));
  width: auto;
  max-width: none;
  pointer-events: none;
  transform-origin: 50% 50%;
  transform: translate(-50%, calc(var(--hcy) * 100 * var(--sh) - 50%)) scale(var(--hk-scale));
}
html[data-gl="nowebgl"] #gl, html[data-gl="failed"] #gl, html[data-fallback="on"] #gl { visibility: hidden; }

/* S3 grey wash. Multiply over the canvas, so it greys the white page and only darkens the strands a touch,
   whether or not the canvas is transparent. */
.s3-backdrop {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--s3-backdrop);
  mix-blend-mode: multiply;
  opacity: var(--s3);
  pointer-events: none;
}
html[data-stage="s1"] .s3-backdrop, html[data-stage="s5"] .s3-backdrop { visibility: hidden; }

/* nothing of the chrome shows until page.js has filled it; then it settles in once */
html[data-page="ready"] .chrome-top,
html[data-page="ready"] .hero-copy,
html[data-page="ready"] .pills { animation: page-in calc(var(--ui-ms) * 2) var(--ease-out) backwards; }
@keyframes page-in { from { opacity: 0; } }

/* ---- top bar (frame 001: name top-left, menu pill top-centre, one round CTA top-right) ---------------------------- */
.chrome-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) calc(var(--m) + env(safe-area-inset-right, 0px)) 0 calc(var(--m) + env(safe-area-inset-left, 0px));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 1rem;
  pointer-events: none;            /* only the name, menu and button take clicks, unless the bar is backed */
}
.chrome-top > * { position: relative; pointer-events: auto; }
/* solid page-coloured backing with one hairline, only while the content surface is under the bar (page.js sets
   html[data-bar="solid"] from an IntersectionObserver); no glass, no blur */
.chrome-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--page-bg);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transition: opacity var(--ui-ms) var(--ease-out);
}
html[data-bar="solid"] .chrome-top { pointer-events: auto; }
html[data-bar="solid"] .chrome-top::before { opacity: 1; }
/* solid in S1 and S5 (file 007 keeps the bar over the content). While the head is in strands (files 004/005) the
   name and menu stay as a ghost and the one button leaves completely; none of them take clicks then */
.brand, .menu { opacity: max(var(--s1), var(--s5), var(--chrome-ghost)); }
.cta { opacity: max(var(--s1), var(--s5)); }
html[data-stage="s2"] .chrome-top > *, html[data-stage="s3"] .chrome-top > *, html[data-stage="s4"] .chrome-top > * { pointer-events: none; }
.brand {
  justify-self: start;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1.1;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(var(--body-size) * 1.375);
  letter-spacing: -0.005em;
}
.brand-sub { margin-top: 0.15rem; font-size: calc(var(--label-size) * 0.92); color: var(--ink-soft); }

.menu {
  justify-self: center;
  display: flex;
  align-items: center;
  padding: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  white-space: nowrap;
}
.menu-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.95rem;
  font-size: var(--label-size);
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-pill);
}
.menu-link::after {
  content: "";
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  bottom: 0.3rem;
  height: 1px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--ui-ms) var(--ease-out);
}
.menu-link:focus-visible::after { opacity: 1; }

.cta {
  justify-self: end;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--page-bg);
  font-size: var(--label-size);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: transform var(--ui-ms) var(--ease-out);
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--accent);
  opacity: 0;
  transition: opacity var(--ui-ms) var(--ease-out);
  pointer-events: none;
}
.cta:focus-visible::after { opacity: 1; }
.cta:active { transform: scale(0.98); }

/* ---- hero copy, bottom-left (frame 001) ------------------------------------------------------------------------- */
.hero-copy {
  position: absolute;
  left: calc(var(--m) + env(safe-area-inset-left, 0px));
  bottom: calc(var(--m) + env(safe-area-inset-bottom, 0px));
  z-index: 3;
  max-width: calc(100% - 2 * var(--m));
  pointer-events: none;
  opacity: var(--s1);
  transform: translateY(calc((1 - var(--s1)) * -1 * var(--text-drift)));
}
.headline {
  margin: 0;
  max-width: 11em;
  padding-bottom: 0.06em;           /* descender room for the italic word */
  font-family: var(--font-display);
  font-weight: 500;
  /* HEADLINE_SIZE on screens tall enough (1440x900 keeps it exactly); on shorter laptop windows it shrinks so the
     two lines plus the subline still fit under the bust instead of running into its shoulders (floor: the phone size) */
  --hl-fit: calc(((1 - var(--hc1) - var(--hh) / 2) * 100 * var(--sh) - var(--m) - 0.5rem - 0.75rem - 1.5 * var(--body-size)) / 2.26);
  font-size: clamp(var(--headline-mobile), var(--hl-fit), var(--hl));
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.headline em, .mid-text em { font-style: italic; font-weight: 500; }
.subline {
  margin: 0.75rem 0 0;
  color: var(--ink-soft);
  font-size: var(--body-size);
  line-height: 1.5;
  white-space: nowrap;
}
.hero-links { display:flex; gap:1.5rem; margin:.45rem 0 0; pointer-events:auto; }
.hero-links a { min-height:2.5rem; display:inline-flex; align-items:center; color:var(--ink); font-size:var(--label-size); font-weight:500; text-decoration:none; background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 1px no-repeat,linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat; transition:background-size var(--ui-ms) var(--ease-out); }
.hero-links a:hover, .hero-links a:focus-visible { background-size:100% 1px,100% 1px; }

/* ---- S3 statement, left and vertically centred (frames 004/005) ------------------------------------------------- */
.mid-line {
  position: absolute;
  left: calc(var(--m) + env(safe-area-inset-left, 0px));
  top: 50%;
  z-index: 3;
  max-width: calc(100% - 2 * var(--m));
  pointer-events: none;
  opacity: var(--s3);
  /* rises in from below while S3 arrives, keeps rising while it leaves */
  transform: translateY(calc(-50% + (1 - var(--s3)) * var(--text-drift) * clamp(-1, (var(--s3-mid) - var(--p)) * 1000, 1)));
}
.mid-text {
  margin: 0;
  max-width: none;                  /* one line on desktop (the brief: one line of large text); phones wrap it */
  padding-bottom: 0.06em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--ml);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.mid-note { margin: 1rem 0 0; max-width: 36ch; color: var(--ink); font-size: var(--body-size); font-weight: 500; line-height: 1.5; }

/* ---- side pills: 2 + 2 beside the head in S1, beside the small head in S5 (frames 001, 007) --------------------- */
.pills {
  position: absolute;
  top: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: max(var(--s1), var(--s5));
  /* distance from the page centre to the column's inner edge, and the head centre, both tracking the S5 shrink */
  --x: calc(var(--hwk) / 2 * 100 * var(--sh) + var(--pill-gap));
  --y: calc(var(--hcy) * 100 * var(--sh));
}
.pills-left { right: 50%; align-items: flex-end; transform: translate(calc(-1 * var(--x)), calc(var(--y) - 50%)); }
.pills-right { left: 50%; align-items: flex-start; transform: translate(var(--x), calc(var(--y) - 50%)); }
html[data-stage="s2"] .pills, html[data-stage="s3"] .pills, html[data-stage="s4"] .pills { pointer-events: none; }

.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--label-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--ui-ms) var(--ease-out);
}
.pill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--accent);
  opacity: 0;
  transition: opacity var(--ui-ms) var(--ease-out);
  pointer-events: none;
}
.pill-note {
  position: absolute;
  top: 50%;
  color: var(--ink-soft);
  font-weight: 400;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--ui-ms) var(--ease-out), transform var(--ui-ms) var(--ease-out);
}
.pills-left .pill-note { right: calc(100% + 0.875rem); transform: translate(0.25rem, -50%); text-align: right; }
.pills-right .pill-note { left: calc(100% + 0.875rem); transform: translate(-0.25rem, -50%); }

/* hover (fine pointers), tap-hold (.is-active) and keyboard focus all look the same: accent hairline, the note
   appears on the outer side, the pill leans 2px toward the head */
.pill.is-active::after, .pill:focus-visible::after { opacity: 1; }
.pill.is-active .pill-note, .pill:focus-visible .pill-note { opacity: 1; }
.pills-left .pill.is-active, .pills-left .pill:focus-visible { transform: translateX(2px); }
.pills-right .pill.is-active, .pills-right .pill:focus-visible { transform: translateX(-2px); }
.pills-left .pill.is-active .pill-note, .pills-left .pill:focus-visible .pill-note,
.pills-right .pill.is-active .pill-note, .pills-right .pill:focus-visible .pill-note { transform: translate(0, -50%); }

@media (hover: hover) {
  .pill:hover::after, .cta:hover::after, .menu-link:hover::after { opacity: 1; }
  .pill:hover .pill-note { opacity: 1; }
  .pills-left .pill:hover { transform: translateX(2px); }
  .pills-right .pill:hover { transform: translateX(-2px); }
  .pills-left .pill:hover .pill-note, .pills-right .pill:hover .pill-note { transform: translate(0, -50%); }
  .cta:hover { transform: scale(1.02); }
}

/* ---- content section (frame 008): transparent gap for the small head, then the page ------------------------------ */
.scroll-track { height: calc((var(--page-viewports) - 1) * 100vh); }
.content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  /* CONTENT_TOP_GAP_VH(_MOBILE) is the minimum; the gap grows if the small S5 head (and, on phones, the pills
     under it) would otherwise be cut by the content surface at the end of the scroll. The S5 head sits at
     S5_HEAD_Y_FRACTION but never closer than S5_HEAD_CLEARANCE_PX under the top bar (main.js does the same) */
  --s5-hh: calc(var(--hh) * var(--s5-scale) * 100vh);
  --s5-cy: max(calc((0.5 - var(--s5y)) * 100vh), calc(var(--bar-h, var(--nav-h)) + var(--s5-clearance, 0px) + var(--s5-hh) / 2));
  padding-top: calc(var(--gap-content) * 1vh);
  padding-top: max(calc(var(--gap-content) * 1vh), calc(var(--s5-cy) + var(--s5-hh) / 2 + var(--below-head)));
  pointer-events: none;            /* the gap lets the pills beside the small head stay hoverable */
}
.content-surface {
  flex: 1;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  background: var(--page-bg);
  border-top: 1px solid var(--line);
}
.content-inner {
  width: 100%;
  max-width: var(--content-max);
  margin: 0;                        /* one editorial left edge: the column starts at the page margin, like the bar */
  padding: var(--pad-top) calc(var(--m) + env(safe-area-inset-right, 0px)) var(--pad) calc(var(--m) + env(safe-area-inset-left, 0px));
}
.content-headline {
  margin: 0;
  max-width: 14em;
  padding-bottom: 0.06em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--hl);
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.content-intro { margin: 1rem 0 0; max-width: 65ch; color: var(--ink-soft); font-size: var(--body-size); }

/* ---- canonical profile content: factual, semantic, and present without JavaScript ----------------------------- */
.profile-section { max-width: 1120px; scroll-margin-top: calc(var(--bar-h, var(--nav-h)) + 1rem); }
.profile-section + .profile-section { border-top: 1px solid var(--line); }
.record-layout { margin-top: 3rem; }
.identity-record { grid-column: 1; grid-row: 1; margin: 0; border-bottom: 1px solid var(--line); }
.identity-record > div { display:grid; grid-template-columns: 9rem minmax(0,1fr); gap:1.5rem; padding:1rem 0; border-top:1px solid var(--line); }
.identity-record dt { color:var(--ink-soft); font-size:var(--label-size); }
.identity-record dd { margin:0; font-family:var(--font-display); font-size:clamp(1.35rem,2.2vw,1.8rem); line-height:1.2; }
.work-list { margin-top:3rem; border-bottom:1px solid var(--line); }
.work-item { padding:2.5rem 0; border-top:1px solid var(--line); }
.work-item .work-type { margin:0 0 .65rem; color:var(--accent); font-size:var(--label-size); font-weight:500; }
.work-item h3 { margin:0; max-width:24ch; font:500 clamp(1.7rem,3vw,2.4rem)/1.08 var(--font-display); letter-spacing:-.01em; }
.work-item p { max-width:62ch; margin:1rem 0 0; color:var(--ink-soft); }
.work-item .work-note { font-size:var(--label-size); }
.text-link, .profile-links a { color:var(--ink); text-decoration:none; background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 1px no-repeat,linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat; transition:background-size var(--ui-ms) var(--ease-out), transform var(--ui-ms) var(--ease-out); }
.text-link:hover, .text-link:focus-visible, .profile-links a:hover, .profile-links a:focus-visible { background-size:100% 1px,100% 1px; }
.profile-links { margin:3rem 0 0; padding:0; list-style:none; border-bottom:1px solid var(--line); }
.profile-links li { border-top:1px solid var(--line); }
.profile-links a { display:flex; align-items:center; min-height:64px; width:fit-content; }

.cards-anchor { margin-top: calc(var(--pad-top) * 0.75); scroll-margin-top: calc(var(--bar-h, var(--nav-h)) + 1rem); }
.cards { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; }
.card-item { display: flex; }
.card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: var(--card-min-h);
  padding: 1.75rem;
  border-radius: var(--radius-card);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--ui-ms) var(--ease-out);
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--accent);
  opacity: 0;
  transition: opacity var(--ui-ms) var(--ease-out);
  pointer-events: none;
}
.card:focus-visible::after { opacity: 1; }
.card--1 { background: var(--surface); }
.card--2 { background: var(--page-bg); border: 1px solid var(--line); }
.card--3 { background: var(--accent-soft); background: color-mix(in srgb, var(--accent-soft) var(--tint-pct), var(--page-bg)); }
.card-meta { font-size: var(--label-size); font-weight: 500; line-height: 1.2; }
.card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--card-title);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.card--1 .card-title { font-size: var(--card-title-feature); }
.card-body { margin: 0.75rem 0 0; max-width: 40ch; color: var(--ink-2); font-size: var(--body-size); line-height: 1.5; }
@media (hover: hover) {
  .card:hover { transform: translateY(-2px); }
  .card:hover::after { opacity: 1; }
}

.footer {
  width: 100%;
  max-width: var(--content-max);
  margin: auto 0 0;
  padding: 0 calc(var(--m) + env(safe-area-inset-right, 0px)) calc(var(--pad) * 0.5 + env(safe-area-inset-bottom, 0px)) calc(var(--m) + env(safe-area-inset-left, 0px));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  color: var(--ink-soft);
  font-size: var(--label-size);
  line-height: 1.5;
}
.footer { align-items: baseline; scroll-margin-top: var(--bar-h, var(--nav-h)); }
.footer p { margin: 0; }
.contact-link { color: var(--ink); font-size: var(--body-size); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.2em; }
.contact-link:hover { text-decoration-color: currentColor; }
.credit { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.credit a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.2em; }
.credit a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ---- debug HUD (settings.DEBUG_HUD; main.js writes the text) ---------------------------------------------------- */
.hud {
  position: fixed;
  right: var(--m);
  bottom: var(--m);
  z-index: 10;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-card);
  background: var(--page-bg);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--label-size);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  white-space: pre;
  pointer-events: none;
}
.noscript { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; margin: 0; padding: 1rem; text-align: center; }

/* ---- phones (html[data-layout="mobile"], set from settings.MOBILE_MAX_WIDTH_PX) ---------------------------------- */
/* phone top bar: name and the CTA on the first row, the menu pill centred on its own single line under them */
html[data-layout="mobile"] .brand-sub { display: none; }
html[data-layout="mobile"] .chrome-top {
  height: auto;
  padding-bottom: 0.5rem;          /* the solid backing (content underneath) reaches past the menu pill */
  grid-template-columns: 1fr auto;
  grid-template-rows: var(--nav-h) auto;
  column-gap: 0.5rem;
}
html[data-layout="mobile"] .brand { grid-column: 1; grid-row: 1; }
html[data-layout="mobile"] .cta { grid-column: 2; grid-row: 1; min-height: 2.25rem; padding: 0 1rem; }
html[data-layout="mobile"] .menu { grid-column: 1 / -1; grid-row: 2; padding: 0.1875rem; }
html[data-layout="mobile"] .brand-name { font-size: calc(var(--body-size) * 1.25); }

html[data-layout="mobile"] .hero-copy { right: calc(var(--m) + env(safe-area-inset-right, 0px)); }
html[data-layout="mobile"] .headline { max-width: none; font-size: var(--hl); }
html[data-layout="mobile"] .subline { white-space: normal; max-width: 40ch; }
html[data-layout="mobile"] .mid-line { right: calc(var(--m) + env(safe-area-inset-right, 0px)); }
html[data-layout="mobile"] .mid-text { max-width: 9em; }

/* the four pills sit as a 2x2 block under the head's chin and ride up with it into S5; if the screen is short, the
   block is lifted so it never runs into the headline */
html[data-layout="mobile"] .pills {
  --x: 0.25rem;
  --limit: calc(100 * var(--sh) - var(--m) - env(safe-area-inset-bottom, 0px) - var(--hero-h, 0px) - var(--pills-h, 0px) - 2 * var(--pill-gap-mobile) - 1.5 * var(--label-size));
  --y: min(calc((var(--hcy) + var(--hhk) / 2) * 100 * var(--sh) + var(--pill-gap-mobile)), calc(var(--limit) + var(--k5) * 100 * var(--sh)));
}
html[data-layout="mobile"] .pills-left { transform: translate(calc(-1 * var(--x)), var(--y)); }
html[data-layout="mobile"] .pills-right { transform: translate(var(--x), var(--y)); }
html[data-layout="mobile"] .pill { min-height: 2.125rem; padding: 0 0.875rem; }
/* phone note: one line under the whole block, on the pill's own half of the screen */
html[data-layout="mobile"] .pill-note {
  top: calc(100% + var(--below, 0) * (100% + 0.5rem) + 0.5rem);
  max-width: calc(50 * var(--sw) - var(--m) - 0.25rem);
  white-space: normal;
  line-height: 1.35;
}
html[data-layout="mobile"] .pills-left .pill-note { right: 0; transform: translate(0, -0.25rem); }
html[data-layout="mobile"] .pills-right .pill-note { left: 0; transform: translate(0, -0.25rem); }
html[data-layout="mobile"] .pills-left .pill.is-active .pill-note, html[data-layout="mobile"] .pills-left .pill:focus-visible .pill-note,
html[data-layout="mobile"] .pills-right .pill.is-active .pill-note, html[data-layout="mobile"] .pills-right .pill:focus-visible .pill-note { transform: none; }
html[data-layout="mobile"] .pill-note { width: max-content; }

html[data-layout="mobile"] .cards { grid-template-columns: 1fr; gap: 0.75rem; }
html[data-layout="mobile"] .card { min-height: 0; padding: 1.5rem; gap: 2rem; }
html[data-layout="mobile"] .card--1 .card-title { font-size: calc(var(--card-title) * 1.2); }
html[data-layout="mobile"] .footer { flex-direction: column; }
html[data-layout="mobile"] .record-layout { display:block; }
html[data-layout="mobile"] .identity-record > div { grid-template-columns:1fr; gap:.2rem; }

/* CSS-only counterpart for first paint and no-JS phones; page.js later sets the equivalent data-layout state. */
@media (max-width: 820px) {
  html { --m:var(--margin-mobile); --hl:var(--headline-mobile); --ml:var(--mid-mobile); --pad:var(--section-pad-mobile); --pad-top:var(--pad-top-mobile); --hh:var(--head-h-mobile); --gap-content:var(--content-gap-mobile); --hyo:var(--head-y-offset-mobile); --s5y:var(--s5-y-mobile); }
  .chrome-top { height:auto; padding-bottom:.5rem; grid-template-columns:1fr auto; grid-template-rows:var(--nav-h) auto; column-gap:.5rem; }
  .brand { grid-column:1; grid-row:1; }
  .brand-sub { display:none; }
  .cta { grid-column:2; grid-row:1; min-height:2.25rem; padding:0 1rem; }
  .menu { grid-column:1 / -1; grid-row:2; padding:.1875rem; }
  .menu-link { padding:.45rem .68rem; }
  .hero-copy { right:calc(var(--m) + env(safe-area-inset-right,0px)); }
  .headline { max-width:none; font-size:var(--hl); }
  .subline { white-space:normal; max-width:40ch; }
  .record-layout { display:block; }
  .identity-record > div { grid-template-columns:1fr; gap:.2rem; }
  .profile-section { padding-left:calc(var(--m) + env(safe-area-inset-left,0px)); padding-right:calc(var(--m) + env(safe-area-inset-right,0px)); }
}

/* ---- reduced motion: the head stays whole, stages become opacity cross-fades, nothing slides ---------------------- */
html[data-motion="reduced"] {
  --k5: 0;
  --text-drift: 0px;
}
html[data-motion="reduced"] .hero-copy,
html[data-motion="reduced"] .mid-line,
html[data-motion="reduced"] .pills,
html[data-motion="reduced"] .brand,
html[data-motion="reduced"] .menu,
html[data-motion="reduced"] .s3-backdrop { transition: opacity var(--reduced-ms) var(--ease-out); }
html[data-motion="reduced"] .hero-copy { opacity: 0; }
html[data-motion="reduced"][data-stage="s1"] .hero-copy { opacity: 1; }
html[data-motion="reduced"] .mid-line { opacity: 0; }
html[data-motion="reduced"][data-stage="s3"] .mid-line { opacity: 1; }
html[data-motion="reduced"] .s3-backdrop { opacity: 0; }
html[data-motion="reduced"][data-stage="s3"] .s3-backdrop { opacity: 1; }
html[data-motion="reduced"] .pills { opacity: 0; }
html[data-motion="reduced"][data-stage="s1"] .pills, html[data-motion="reduced"][data-stage="s5"] .pills { opacity: 1; }
html[data-motion="reduced"] .brand, html[data-motion="reduced"] .menu { opacity: var(--chrome-ghost); }
html[data-motion="reduced"] .cta { opacity: 0; }
html[data-motion="reduced"][data-stage="s1"] .brand, html[data-motion="reduced"][data-stage="s5"] .brand,
html[data-motion="reduced"][data-stage="s1"] .menu, html[data-motion="reduced"][data-stage="s5"] .menu,
html[data-motion="reduced"][data-stage="s1"] .cta, html[data-motion="reduced"][data-stage="s5"] .cta { opacity: 1; }
html[data-motion="reduced"] .pill, html[data-motion="reduced"] .pill-note, html[data-motion="reduced"] .cta,
html[data-motion="reduced"] .card, html[data-motion="reduced"] .card::after, html[data-motion="reduced"] .pill::after,
html[data-motion="reduced"] .cta::after, html[data-motion="reduced"] .menu-link::after {
  transition: opacity var(--reduced-ms) var(--ease-out);
  transform: none !important;
}
html[data-motion="reduced"] .pills-left .pill-note, html[data-motion="reduced"] .pills-right .pill-note { transform: translateY(-50%) !important; }
html[data-motion="reduced"][data-layout="mobile"] .pills-left .pill-note,
html[data-motion="reduced"][data-layout="mobile"] .pills-right .pill-note { transform: none !important; }
html[data-motion="reduced"] .chrome-top, html[data-motion="reduced"] .hero-copy,
html[data-motion="reduced"] .pills { animation-duration: var(--reduced-ms); }
/* same safety net straight from the media query, for the moment before page.js has set data-motion */
@media (prefers-reduced-motion: reduce) {
  .pill, .cta, .card, .pill-note { transition-property: opacity; }
  .pill:hover, .cta:hover, .card:hover, .cta:active { transform: none; }
}
/* a keyboard user always sees what has focus, in every stage and motion mode */
html .pills:focus-within, html[data-motion] .pills:focus-within,
html .brand:focus-visible, html[data-motion] .brand:focus-visible,
html .menu:focus-within, html[data-motion] .menu:focus-within,
html .cta:focus-visible, html[data-motion] .cta:focus-visible { opacity: 1; }

.brain-label { position:fixed; z-index:4; right:var(--margin-desktop); top:52%; margin:0; color:var(--brain); font:500 var(--label-size)/1 var(--font-ui); letter-spacing:.14em; opacity:var(--s1); pointer-events:none; }
html[data-layout="mobile"] .brain-label { right:var(--margin-mobile); top:48%; font-size:10px; }