/* =============================================================================
   shreyux.com — design system
   -----------------------------------------------------------------------------
   Built to the portfolio brief: Apple HIG (clarity / deference / depth) on an
   8pt grid, dark-first, with a monospace face reserved for structural and meta
   information only.

   ORDER OF SECTIONS
   01  Tokens (color, type, space, radius, motion)
   02  Reset + base
   03  Typography roles
   04  Layout (page, section, prose, grids)
   05  Signature motifs (dotted grid, crop marks, hatch rule)
   06  Navigation + mobile sheet + search palette
   07  Buttons
   08  Cards
   09  Chips
   10  Timeline (left rail)
   11  Cadence grid
   12  Pull quote
   13  Case study beats
   14  Forms
   15  Footer
   16  Landing sequence (Focus Pull)
   17  Reveal-on-scroll + reduced motion
   ============================================================================= */

/* -- 01 Tokens -------------------------------------------------------------- */
:root {
  /* Space — the only spacing values allowed anywhere in this system. */
  --s-4: 4px;    /* icon → label, inline tag internals */
  --s-8: 8px;    /* related items inside a component */
  --s-12: 12px;  /* primary ↔ secondary button pair */
  --s-16: 16px;  /* stacked buttons, list items */
  --s-24: 24px;  /* paragraph → paragraph */
  --s-32: 32px;  /* card → card */
  --s-48: 48px;  /* subsection → subsection */
  --s-64: 64px;  /* section → section, mobile */
  --s-96: 96px;  /* section → section, desktop */

  /* Type */
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* iOS type scale. Display sits one step above Large Title for desktop heroes. */
  --t-display: clamp(40px, 6.2vw, 68px);
  --t-large-title: clamp(30px, 3.6vw, 34px);
  --t-title-1: clamp(25px, 2.4vw, 28px);
  --t-title-2: 22px;
  --t-title-3: 20px;
  --t-headline: 17px;
  --t-body: 17px;
  --t-callout: 16px;
  --t-subhead: 15px;
  --t-footnote: 13px;
  --t-caption: 12px;

  /* Radius */
  --r-control: 12px;  /* buttons, inputs */
  --r-card: 18px;     /* cards, image containers */
  --r-card-lg: 20px;
  --r-pill: 999px;    /* chips, tags */

  /* Motion — iOS-style spring, plus a plain ease-out for layout moves. */
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-press: 180ms;
  --d-hover: 220ms;
  --d-move: 520ms;

  --measure: 640px;   /* text column cap */
  --page-max: 1200px;
  --gutter: var(--s-24);
  --nav-h: 56px;
}

/* Dark is the default theme. */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0b;
  --bg-sunken: #070708;
  --surface: #131315;
  --surface-2: #1a1a1d;
  --ink: #f2f1ee;
  --ink-2: #9d9d98;
  --ink-3: #6b6b67;
  --hair: rgba(242, 241, 238, 0.12);
  --hair-strong: rgba(242, 241, 238, 0.22);
  --dot: rgba(242, 241, 238, 0.10);
  --accent: #e9a05c;         /* warm film-emulsion amber */
  --accent-ink: #17120c;     /* text on an accent fill */
  --accent-wash: rgba(233, 160, 92, 0.10);
  --accent-wash-2: rgba(233, 160, 92, 0.18);
  --glass: rgba(10, 10, 11, 0.72);
  --shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #faf9f6;
  --bg-sunken: #f2f0eb;
  --surface: #ffffff;
  --surface-2: #f6f4f0;
  --ink: #16150f;
  --ink-2: #5b5a53;
  --ink-3: #86847c;
  --hair: rgba(22, 21, 15, 0.13);
  --hair-strong: rgba(22, 21, 15, 0.26);
  --dot: rgba(22, 21, 15, 0.13);
  --accent: #9c5215;
  --accent-ink: #fffaf4;
  --accent-wash: rgba(156, 82, 21, 0.08);
  --accent-wash-2: rgba(156, 82, 21, 0.14);
  --glass: rgba(250, 249, 246, 0.76);
  --shadow-rest: 0 1px 2px rgba(22, 21, 15, 0.06);
  --shadow-lift: 0 10px 28px rgba(22, 21, 15, 0.11);
}

@media (min-width: 768px) {
  :root { --gutter: var(--s-32); --nav-h: 64px; }
}
@media (min-width: 1024px) {
  :root { --gutter: var(--s-48); }
}
/* At 1440 and above the page widens rather than the text column — the measure
   stays at 640px so line length never grows past a comfortable read. */
@media (min-width: 1440px) {
  :root { --page-max: 1320px; --gutter: var(--s-64); }
}

/* -- 02 Reset + base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
:target { scroll-margin-top: calc(var(--nav-h) + var(--s-32)); }

/* Focus: 2pt accent outline, offset 2pt. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

.skip {
  position: absolute; left: var(--s-16); top: var(--s-16);
  transform: translateY(-200%);
  z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: var(--s-8) var(--s-16); border-radius: var(--r-control);
  font: 600 var(--t-footnote)/1.4 var(--font-mono);
  letter-spacing: 0.04em; text-decoration: none;
}
.skip:focus { transform: translateY(0); }
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -- 03 Typography roles --------------------------------------------------- */
.display, .large-title, .title-1, .title-2, .title-3, .headline {
  margin: 0; text-wrap: balance; letter-spacing: -0.02em;
}
.display { font-size: var(--t-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; }
.large-title { font-size: var(--t-large-title); font-weight: 700; line-height: 1.15; }
.title-1 { font-size: var(--t-title-1); font-weight: 700; line-height: 1.2; }
.title-2 { font-size: var(--t-title-2); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.title-3 { font-size: var(--t-title-3); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.headline { font-size: var(--t-headline); font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; }
.body { font-size: var(--t-body); font-weight: 400; line-height: 1.5; }
.callout { font-size: var(--t-callout); line-height: 1.5; }
.subhead { font-size: var(--t-subhead); line-height: 1.45; color: var(--ink-2); }
.footnote { font-size: var(--t-footnote); line-height: 1.4; color: var(--ink-2); }
.caption { font-size: var(--t-caption); line-height: 1.35; color: var(--ink-2); }
.dim { color: var(--ink-2); }
.dimmer { color: var(--ink-3); }

/* Monospace is for labels, numbers and meta only — never body or headlines. */
.mono {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.mono--case { text-transform: none; letter-spacing: 0.02em; }
.mono--fn { font-size: var(--t-footnote); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.prose a { text-decoration-thickness: 1px; }

/* -- 04 Layout ------------------------------------------------------------- */
.page { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--gutter); }
.page--wide { max-width: 1440px; }
.section { padding-block: var(--s-64); }
@media (min-width: 768px) { .section { padding-block: var(--s-96); } }
.section--tight { padding-block: var(--s-48); }
.stack > * + * { margin-top: var(--s-24); }
.stack-16 > * + * { margin-top: var(--s-16); }
.stack-32 > * + * { margin-top: var(--s-32); }
.stack-48 > * + * { margin-top: var(--s-48); }

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 var(--s-24); font-size: var(--t-body); line-height: 1.55; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose ul { margin: 0 0 var(--s-24); padding-left: var(--s-24); }
.prose li + li { margin-top: var(--s-8); }
.prose li::marker { color: var(--accent); }

/* Section header: monospace number in a left rail, title beside it. */
.sec-head {
  display: grid; gap: var(--s-16);
  grid-template-columns: 1fr;
  margin-bottom: var(--s-48);
}
@media (min-width: 768px) {
  .sec-head { grid-template-columns: 96px 1fr; gap: var(--s-32); }
}
.sec-head__eyebrow { padding-top: var(--s-4); }
.sec-head__body { max-width: var(--measure); }
.sec-head__body > * + * { margin-top: var(--s-16); }

.grid { display: grid; gap: var(--s-32); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.split { display: grid; gap: var(--s-48); align-items: start; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s-64); } }
@media (min-width: 1024px) { .split--rail { grid-template-columns: 280px 1fr; gap: var(--s-64); } }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-12); }
.row--16 { gap: var(--s-16); }
.row--8 { gap: var(--s-8); }
.cta-row { display: flex; flex-direction: column; gap: var(--s-16); margin-top: var(--s-24); }
/* 12pt side by side, 16pt stacked, 24pt clear of the paragraph above. */
@media (min-width: 768px) { .cta-row { flex-direction: row; gap: var(--s-12); align-items: center; } }

/* -- 05 Signature motifs --------------------------------------------------- */
/* Dotted grid: hero backgrounds only, 24pt pitch, under 10% opacity. */
.dotgrid { position: relative; isolation: isolate; }
.dotgrid::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

/* Crop marks: photographic framing ticks, at hero and key-section corners. */
.crop { position: relative; }
.crop::before {
  content: ""; position: absolute; inset: -10px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--hair-strong) 0 0) left    top    / 14px 1px no-repeat,
    linear-gradient(var(--hair-strong) 0 0) left    top    / 1px 14px no-repeat,
    linear-gradient(var(--hair-strong) 0 0) right   top    / 14px 1px no-repeat,
    linear-gradient(var(--hair-strong) 0 0) right   top    / 1px 14px no-repeat,
    linear-gradient(var(--hair-strong) 0 0) left    bottom / 14px 1px no-repeat,
    linear-gradient(var(--hair-strong) 0 0) left    bottom / 1px 14px no-repeat,
    linear-gradient(var(--hair-strong) 0 0) right   bottom / 14px 1px no-repeat,
    linear-gradient(var(--hair-strong) 0 0) right   bottom / 1px 14px no-repeat;
}

/* Hatch rule: a section boundary, used sparingly. */
.hatch {
  height: 24px; border-block: 1px solid var(--hair);
  background-image: repeating-linear-gradient(45deg, var(--hair) 0 1px, transparent 1px 7px);
}
.rule { height: 1px; background: var(--hair); border: 0; margin: 0; }

/* -- 06 Navigation --------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hair);
}
.nav__in {
  height: 100%; max-width: var(--page-max); margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: var(--s-24);
}
.wordmark {
  font-family: var(--font-mono); font-size: var(--t-footnote); font-weight: 600;
  letter-spacing: 0.14em; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--s-4);
  min-height: 44px;
}
.wordmark:hover { text-decoration: none; color: var(--accent); }
.wordmark b { font-weight: 600; }
.wordmark span { color: var(--accent); }

.nav__links { display: none; gap: var(--s-24); margin-left: var(--s-16); }
@media (min-width: 768px) { .nav__links { display: flex; } }
.nav__link {
  font-family: var(--font-mono); font-size: var(--t-footnote); letter-spacing: 0.06em;
  color: var(--ink-2); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color var(--d-hover) var(--ease-out);
}
.nav__link:hover { color: var(--ink); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); margin-left: var(--s-4); align-self: center;
}
.nav__spacer { flex: 1; }
.nav__tools { display: flex; align-items: center; gap: var(--s-4); }

.iconbtn {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--r-control);
  color: var(--ink-2); cursor: pointer;
  transition: background var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out);
}
.iconbtn:hover { background: var(--surface-2); color: var(--ink); }
.iconbtn:active { transform: scale(0.96); opacity: 0.9; }
.iconbtn svg { width: 18px; height: 18px; }
@media (min-width: 768px) { .iconbtn--menu { display: none; } }

/* Full-screen mobile sheet (never a dropdown). */
.sheet {
  position: fixed; inset: 0; z-index: 150;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding: var(--s-24) var(--gutter) var(--s-48);
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity 260ms var(--ease-out), transform 320ms var(--spring), visibility 260ms;
}
.sheet[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.sheet__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-48); }
.sheet__nav { display: flex; flex-direction: column; }
.sheet__nav a {
  padding-block: var(--s-16); min-height: 44px;
  border-bottom: 1px solid var(--hair);
  color: var(--ink); text-decoration: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-16);
  font-size: var(--t-title-3); font-weight: 600; letter-spacing: -0.01em;
}
.sheet__nav a:hover { text-decoration: none; color: var(--accent); }
.sheet__nav a span { font-family: var(--font-mono); font-size: var(--t-caption); color: var(--ink-3); letter-spacing: 0.08em; }

/* Search palette */
.palette {
  position: fixed; inset: 0; z-index: 160;
  display: grid; place-items: start center;
  padding: max(8vh, var(--s-48)) var(--gutter) var(--s-24);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity 200ms var(--ease-out), visibility 200ms;
}
.palette[data-open="true"] { opacity: 1; visibility: visible; }
.palette__panel {
  width: 100%; max-width: 560px;
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-card); box-shadow: var(--shadow-lift);
  overflow: hidden;
  transform: scale(0.98) translateY(-8px);
  transition: transform 280ms var(--spring);
}
.palette[data-open="true"] .palette__panel { transform: none; }
.palette__field { display: flex; align-items: center; gap: var(--s-8); padding: var(--s-16); border-bottom: 1px solid var(--hair); }
.palette__field svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.palette__field input {
  flex: 1; background: none; border: 0; outline: none; color: var(--ink);
  font-family: var(--font-text); font-size: var(--t-callout);
}
.palette__field input::placeholder { color: var(--ink-3); }
.palette__hint {
  font-family: var(--font-mono); font-size: var(--t-caption); color: var(--ink-3);
  border: 1px solid var(--hair); border-radius: var(--r-pill); padding: 2px var(--s-8);
}
.palette__list { max-height: min(52vh, 400px); overflow-y: auto; padding: var(--s-8); margin: 0; list-style: none; }
.palette__list a {
  display: flex; align-items: baseline; gap: var(--s-12);
  padding: var(--s-12); border-radius: var(--r-control); color: var(--ink); text-decoration: none;
}
.palette__list a:hover, .palette__list a[data-active="true"] { background: var(--surface-2); text-decoration: none; }
.palette__list a strong { font-size: var(--t-subhead); font-weight: 600; }
.palette__list a em { font-style: normal; font-size: var(--t-footnote); color: var(--ink-2); }
.palette__kind {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin-left: auto; flex: none; padding-top: 3px;
}
.palette__empty { padding: var(--s-24) var(--s-16); color: var(--ink-2); font-size: var(--t-subhead); }

/* -- 07 Buttons ----------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8);
  min-height: 44px; padding: var(--s-12) var(--s-24);
  border-radius: var(--r-control); border: 1px solid transparent;
  font-family: var(--font-text); font-size: var(--t-headline); font-weight: 600;
  letter-spacing: -0.005em; text-decoration: none; cursor: pointer;
  transition: background-color var(--d-hover) var(--ease-out),
              border-color var(--d-hover) var(--ease-out),
              color var(--d-hover) var(--ease-out),
              transform var(--d-press) var(--spring),
              opacity var(--d-press) linear;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.96); opacity: 0.9; }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 92%, var(--ink)); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--hair-strong); }
.btn--secondary:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn--ghost { background: transparent; color: var(--ink-2); padding-inline: var(--s-12); }
.btn--ghost:hover { color: var(--ink); background: var(--surface-2); }
.btn--sm { min-height: 44px; padding: var(--s-8) var(--s-16); font-size: var(--t-subhead); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.4; box-shadow: none; cursor: not-allowed; pointer-events: none;
}
.btn[data-loading="true"] { color: transparent; pointer-events: none; }
.btn[data-loading="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--accent-ink);
  animation: spin 640ms linear infinite;
}
.btn--secondary[data-loading="true"]::after { color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* A button and the nearest unrelated section keep 48–64pt of clearance. */
.btn-clearance { margin-bottom: var(--s-64); }

/* Text link with a trailing arrow that nudges on hover. */
.arrowlink {
  display: inline-flex; align-items: center; gap: var(--s-8);
  min-height: 44px;
  font-family: var(--font-mono); font-size: var(--t-footnote);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
}
.arrowlink svg { width: 14px; height: 14px; transition: transform var(--d-hover) var(--ease-out); }
.arrowlink:hover svg { transform: translateX(3px); }

/* -- 08 Cards ------------------------------------------------------------- */
.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-rest);
  transition: transform var(--d-hover) var(--ease-out),
              box-shadow var(--d-hover) var(--ease-out),
              border-color var(--d-hover) var(--ease-out);
}
/* Whole card is the target. */
.card__hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card__hit span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (hover: hover) {
  .card:hover { transform: translateY(-3px) scale(1.012); box-shadow: var(--shadow-lift); border-color: var(--hair-strong); }
  .card:hover .card__title { color: var(--accent); }
}
.card:has(.card__hit:active) { transform: scale(0.98); }
.card:has(.card__hit:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.card__thumb {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--surface-2);
  border-bottom: 1px solid var(--hair);
}
.card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--s-24); display: flex; flex-direction: column; gap: var(--s-12); flex: 1; }
.card__title { transition: color var(--d-hover) var(--ease-out); }
.card__hook { color: var(--ink-2); font-size: var(--t-subhead); line-height: 1.45; margin: 0; }
.card__foot { margin-top: auto; padding-top: var(--s-8); }
.card--flat { background: transparent; box-shadow: none; }
.card--flat:hover { box-shadow: none; }

/* A card with no hit area is not tappable, so it gets no hover affordance.
   Used for the service and discipline cards, which are descriptive, not links. */
@media (hover: hover) {
  .card:not(:has(.card__hit)):hover {
    transform: none;
    border-color: var(--hair);
    box-shadow: var(--shadow-rest);
  }
  .card--flat:not(:has(.card__hit)):hover { box-shadow: none; }
  .card:not(:has(.card__hit)):hover .card__title { color: inherit; }
}

/* Plate: a composed stand-in for a still that has not been dropped in yet,
   and the frame that real stills sit in once they are. */
.plate {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 22% 8%, var(--accent-wash) 0%, transparent 58%),
    linear-gradient(155deg, var(--surface-2) 0%, var(--surface) 48%, var(--bg-sunken) 100%);
}
.plate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
  background-size: 24px 24px;
}
.plate__meta {
  position: absolute; left: var(--s-16); bottom: var(--s-16); z-index: 1;
  font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}

/* Hero rule: the accent line the landing animation draws under the name.
   Same width and weight everywhere so every page hero reads as one family. */
.underline {
  height: 2px; width: 168px; border: 0; margin: var(--s-24) 0 0;
  background: var(--accent);
}

/* Figure + monospace caption */
.fig { margin: 0; }
.fig figcaption {
  margin-top: var(--s-12);
  font-family: var(--font-mono); font-size: var(--t-caption);
  letter-spacing: 0.02em; color: var(--ink-3);
}
.fig__frame { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--hair); background: var(--surface); }

/* -- 09 Chips ------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-8); margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-4);
  /* 12pt horizontal, 6pt vertical — the chip padding the spec calls for. */
  padding: 6px var(--s-12); border-radius: var(--r-pill);
  background: var(--accent-wash); border: 1px solid transparent;
  font-family: var(--font-mono); font-size: var(--t-caption);
  letter-spacing: 0.04em; color: var(--ink-2); white-space: nowrap;
}
.chip--neutral { background: var(--surface-2); }
.chip--accent { background: var(--accent-wash-2); color: var(--accent); }
/* Filter chips take on button interaction. */
button.chip {
  cursor: pointer; min-height: 32px; position: relative;
  transition: background-color var(--d-hover) var(--ease-out),
              color var(--d-hover) var(--ease-out),
              transform var(--d-press) var(--spring);
}
button.chip:hover { background: var(--accent-wash-2); color: var(--ink); }
button.chip:active { transform: scale(0.96); opacity: 0.9; }
button.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
/* The chip stays visually small — 28pt pill, 6/12 padding — while the tappable
   region is expanded to a full 44pt, the way iOS treats small controls. */
button.chip::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: 44px; transform: translateY(-50%);
}
/* 12pt row gap so wrapped rows of expanded hit areas never overlap. */
.row:has(button.chip), .chips:has(button.chip) { row-gap: var(--s-12); }

/* -- 10 Timeline ---------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--s-24); position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px;
  width: 1px; background: var(--hair);
}
.timeline > li { position: relative; padding-left: 0; }
.timeline > li + li { margin-top: var(--s-32); }
.timeline > li::before {
  content: ""; position: absolute; left: calc(-1 * var(--s-24)); top: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--hair-strong);
}
.timeline > li[data-now="true"]::before { background: var(--accent); border-color: var(--accent); }
.timeline__date { display: block; margin-bottom: var(--s-4); }
.timeline__title { margin: 0 0 var(--s-8); }
.timeline__body { margin: 0; color: var(--ink-2); font-size: var(--t-subhead); line-height: 1.5; max-width: var(--measure); }

/* -- 11 Cadence grid ----------------------------------------------------- */
.cadence { display: flex; flex-direction: column; gap: var(--s-12); }
.cadence__scroll { overflow-x: auto; padding-bottom: var(--s-4); }
.cadence__grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, 10px); gap: 3px; min-width: max-content; }
/* 10px cells with a 2px corner: below the radius scale on purpose, because
   a 12pt radius on a 10px square is a circle. This is texture, not a card. */
.cadence__cell { width: 10px; height: 10px; border-radius: 2px; background: var(--surface-2); }
.cadence__cell[data-l="1"] { background: var(--accent-wash-2); }
.cadence__cell[data-l="2"] { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.cadence__cell[data-l="3"] { background: color-mix(in srgb, var(--accent) 72%, transparent); }
.cadence__cell[data-l="4"] { background: var(--accent); }
.cadence__axis { display: grid; grid-auto-flow: column; gap: 3px; min-width: max-content; }
.cadence__year {
  font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: 0.08em; color: var(--ink-3);
}
.cadence__legend { display: flex; align-items: center; gap: var(--s-8); }
.cadence__legend .cadence__cell { width: 9px; height: 9px; }

/* -- 12 Pull quote ------------------------------------------------------- */
.pullquote {
  position: relative; margin: 0; padding: var(--s-32) 0 0;
  max-width: var(--measure);
}
.pullquote::before {
  content: "\201C"; position: absolute; top: -12px; left: -6px;
  font-family: Georgia, "Times New Roman", serif; font-size: 96px; line-height: 1;
  color: var(--accent); opacity: 0.16; pointer-events: none;
}
.pullquote p {
  margin: 0; position: relative;
  font-size: var(--t-title-3); font-style: italic; font-weight: 400;
  line-height: 1.4; letter-spacing: -0.01em; color: var(--ink);
}
.pullquote footer { margin-top: var(--s-16); }

/* -- 13 Case study ------------------------------------------------------- */
/* First screen: hook, tags, hero image only. */
.cs-hero { padding-block: var(--s-48) var(--s-48); }
@media (min-width: 768px) { .cs-hero { padding-block: var(--s-64) var(--s-64); } }
.cs-hero__meta { margin-bottom: var(--s-24); }
.cs-hero__hook { margin-top: var(--s-24); max-width: 20ch; }
.cs-hero__line { max-width: var(--measure); margin-top: var(--s-24); color: var(--ink-2); font-size: var(--t-callout); line-height: 1.5; }
/* The largest image on the site gets the top of the radius range. */
.cs-hero__frame { margin-top: var(--s-48); }
.cs-hero__frame .plate,
.cs-hero__frame img { border-radius: var(--r-card-lg); }

.cs-facts {
  display: grid; gap: var(--s-24); grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: var(--s-32);
  border-block: 1px solid var(--hair);
}
@media (min-width: 768px) { .cs-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cs-facts dt { margin-bottom: var(--s-8); }
.cs-facts dd { margin: 0; font-size: var(--t-subhead); line-height: 1.45; }

/* Summary anchors — the recruiter's shortcut. */
.jump { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.jump a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--s-8) var(--s-16); border-radius: var(--r-pill);
  border: 1px solid var(--hair); background: transparent;
  font-family: var(--font-mono); font-size: var(--t-caption);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
  transition: border-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out), transform var(--d-press) var(--spring);
}
.jump a:hover { color: var(--ink); border-color: var(--ink-3); text-decoration: none; }
.jump a:active { transform: scale(0.96); }

.beat { padding-block: var(--s-48); border-top: 1px solid var(--hair); }
.beat:first-of-type { border-top: 0; }
.beat__head { display: flex; align-items: baseline; gap: var(--s-12); margin-bottom: var(--s-24); flex-wrap: wrap; }
.beat__num { font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: 0.14em; color: var(--accent); }
.beat__grid { display: grid; gap: var(--s-32); }
@media (min-width: 1024px) { .beat__grid { grid-template-columns: 1fr 1fr; gap: var(--s-48); align-items: start; } }

.datapoint { padding: var(--s-24); background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); }
.datapoint__n { display: block; font-size: var(--t-title-1); font-weight: 700; letter-spacing: -0.03em; color: var(--accent); margin-bottom: var(--s-8); }
.datapoint p { margin: 0; font-size: var(--t-subhead); color: var(--ink-2); line-height: 1.45; }

.deflist { margin: 0; }
.deflist > div { padding-block: var(--s-16); border-top: 1px solid var(--hair); }
.deflist > div:first-child { border-top: 0; padding-top: 0; }
.deflist dt { margin-bottom: var(--s-4); }
.deflist dd { margin: 0; color: var(--ink-2); font-size: var(--t-subhead); line-height: 1.5; }

.nextup {
  display: flex; flex-direction: column; gap: var(--s-8);
  padding-block: var(--s-48);
  border-top: 1px solid var(--hair);
}

/* -- 14 Forms ------------------------------------------------------------ */
.form { max-width: var(--measure); }
.field { margin-bottom: var(--s-24); }
.field > label { display: block; margin-bottom: var(--s-8); }
.field__hint { display: block; margin-top: var(--s-8); }
.input, .select, .textarea {
  width: 100%; padding: var(--s-12) var(--s-16);
  min-height: 44px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hair); border-radius: var(--r-control);
  font-family: var(--font-text); font-size: var(--t-callout); line-height: 1.4;
  transition: border-color var(--d-hover) var(--ease-out), background-color var(--d-hover) var(--ease-out);
}
.textarea { min-height: 120px; resize: vertical; }
.select { appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--hair-strong); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: #e5675a; }
[data-theme="light"] .input[aria-invalid="true"],
[data-theme="light"] .textarea[aria-invalid="true"] { border-color: #b3392b; }
.error {
  display: none; margin-top: var(--s-8);
  font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: 0.02em;
  color: #e5675a;
}
[data-theme="light"] .error { color: #a5301f; }
.field[data-invalid="true"] .error { display: block; }
.honeypot { position: absolute; left: -9999px; }

.segmented { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--s-8) var(--s-16); border-radius: var(--r-control);
  border: 1px solid var(--hair); cursor: pointer;
  font-size: var(--t-subhead); font-weight: 500;
  transition: border-color var(--d-hover) var(--ease-out), background-color var(--d-hover) var(--ease-out), transform var(--d-press) var(--spring);
}
.segmented label:hover { background: var(--surface-2); }
.segmented label:active { transform: scale(0.96); }
.segmented input:checked + label { background: var(--accent-wash-2); border-color: var(--accent); color: var(--ink); }
.segmented input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.formstatus {
  display: none; gap: var(--s-12); align-items: flex-start;
  margin-bottom: var(--s-24); padding: var(--s-16);
  border-radius: var(--r-control); border: 1px solid var(--hair);
  background: var(--surface); font-size: var(--t-subhead); line-height: 1.45;
}
.formstatus[data-show="true"] { display: flex; }
.formstatus[data-kind="ok"] { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-wash); }

/* -- 15 Footer ----------------------------------------------------------- */
.footer { border-top: 1px solid var(--hair); padding-block: var(--s-64) var(--s-48); margin-top: var(--s-32); }
.footer__grid { display: grid; gap: var(--s-48); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-32); } }
.footer__col h2 { margin: 0 0 var(--s-16); }
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li + li { margin-top: var(--s-8); }
.footer__col a { color: var(--ink-2); font-size: var(--t-subhead); }
.footer__col a:hover { color: var(--ink); }
.footer__base {
  margin-top: var(--s-48); padding-top: var(--s-24); border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: var(--s-16); justify-content: space-between; align-items: center;
}

/* -- 16 Landing sequence: Focus Pull ------------------------------------- */
.fp {
  position: fixed; inset: 0; z-index: 190;
  background: var(--bg);
  display: grid; place-items: center;
  padding: var(--gutter);
  cursor: pointer;
}
.fp[data-done="true"] { opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease-out), visibility 400ms; }
.fp__grid {
  position: absolute; inset: 0; opacity: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
  background-size: 24px 24px;
}
.fp__stage { position: relative; text-align: left; max-width: 720px; width: 100%; }
.fp__name { filter: blur(24px); opacity: 0.35; transform: scale(1.05); }
.fp__line { margin-top: var(--s-16); filter: blur(24px); opacity: 0; }
.fp__underline { height: 2px; background: var(--accent); width: 0; margin-top: var(--s-24); }
.fp__skip {
  position: absolute; bottom: var(--s-32); left: 50%; transform: translateX(-50%);
  opacity: 0;
}
.fp[data-play="true"] .fp__grid { animation: fp-grid 2200ms var(--ease-out) forwards; }
.fp[data-play="true"] .fp__name { animation: fp-focus 1600ms var(--ease-out) forwards; }
.fp[data-play="true"] .fp__line { animation: fp-focus-soft 1600ms 120ms var(--ease-out) forwards; }
.fp[data-play="true"] .fp__underline { animation: fp-draw 300ms 1700ms var(--ease-out) forwards; }
.fp[data-play="true"] .fp__skip { animation: fp-fade 400ms 700ms var(--ease-out) forwards; }
@keyframes fp-grid {
  0%   { opacity: 0; }
  18%  { opacity: 0; }
  45%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fp-focus {
  0%   { filter: blur(26px); opacity: 0.3; transform: scale(1.05); }
  25%  { filter: blur(20px); opacity: 0.5; transform: scale(1.05); }
  62%  { filter: blur(8px);  opacity: 0.9; transform: scale(1.02); }
  100% { filter: blur(0);    opacity: 1;   transform: scale(1); }
}
@keyframes fp-focus-soft {
  0%   { filter: blur(20px); opacity: 0; }
  60%  { filter: blur(6px);  opacity: 0.7; }
  100% { filter: blur(0);    opacity: 1; }
}
@keyframes fp-draw { from { width: 0; } to { width: 168px; } }
@keyframes fp-fade { from { opacity: 0; } to { opacity: 1; } }

/* The page underneath fades up as the sequence lands. */
body[data-landing="running"] { overflow: hidden; }
body[data-landing="running"] .site { opacity: 0; }
.site { transition: opacity 600ms var(--ease-out); }

/* -- 17 Reveal on scroll ------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(14px); }
[data-reveal][data-shown="true"] {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .fp__name, .fp__line { filter: none; opacity: 1; transform: none; }
  .card:hover { transform: none; }
}