/* ==========================================================================
   andrewdeutsch.xyz — 2026
   Light theme, single committed look: white ground, near-black
   type, deep blue + amber accents.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ground + surfaces — white ground, neutral grey surfaces and hairlines */
  --ground:     #FFFFFF;
  --surface:    #F6F6F3;
  --raised:     #FBFBFA;
  --line:       #DBDBD6;
  --line-soft:  #E9E9E5;

  /* type */
  --ink:        #1A1C20;
  --ink-2:      #4A4F58;
  --muted:      #7B7E72;

  /* two accents, used for different jobs:
     --accent   structure, links, active state, diagram emphasis
     --evidence citations, numerals, "this is checkable" markers */
  --accent:     #213B90;
  --accent-dim: #DCE1F3;
  --evidence:   #96660F;
  --evidence-dim: #F3E5C4;

  /* type stacks */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* rhythm */
  --measure: 68ch;
  --gutter: 1.5rem;
  --max: 82rem;

  /* golden-mean spacing scale — each step is the previous × φ (1.618) */
  --s-2: .38rem;  /* 1 / φ² */
  --s-1: .62rem;  /* 1 / φ  */
  --s0:  1rem;
  --s1:  1.62rem; /* φ  */
  --s2:  2.62rem; /* φ² */
  --s3:  4.24rem; /* φ³ */
  --s4:  6.85rem; /* φ⁴ */

  /* fluid structural air, interpolating between φ steps */
  --space-section: clamp(var(--s2), 9vw, var(--s4));  /* section breaks */
  --space-flow:    clamp(var(--s2), 7vw, var(--s3));  /* items within a section */
  --space-seam:    clamp(var(--s2), 9vw, var(--s3)); /* reduced seam (work → contact); φ² floor keeps mobile breathing */
}

@media (min-width: 48rem) { :root { --gutter: 2.5rem; } }
@media (min-width: 72rem) { :root { --gutter: 4rem; } }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg { max-width: 100%; display: block; }

::selection { background: var(--accent); color: var(--ground); }

/* --------------------------------------------------------------- skip link */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--ground);
  padding: .6rem 1rem; font-family: var(--mono); font-size: .8125rem;
}
.skip:focus { left: 0; }

/* -------------------------------------------------------------------- type */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  margin: 0;
  letter-spacing: -.02em;
  line-height: 1.06;
  text-wrap: balance;
}

/* golden-mean scale: 4.9rem / 1.618 = 3.03rem desktop; 3.03rem / 1.618 = 1.87rem mobile */
.h-xl { font-size: clamp(1.87rem, 3.96vw, 3.03rem); font-weight: 700; letter-spacing: -.028em; line-height: 1.05; }
.h-lg { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.028em; }
.h-md { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.022em; }
.h-sm { font-size: clamp(1.1rem, 2vw, 1.3rem); letter-spacing: -.014em; }

p { margin: 0; max-width: var(--measure); }

.lede {
  font-size: clamp(1.125rem, 2.2vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
}

.eyebrow {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.mono { font-family: var(--mono); font-size: .8125em; }

strong, b { font-weight: 600; color: var(--ink); }

a { color: var(--accent); text-decoration: none; }
a:not(.plain) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
a:hover:not(.plain) { text-decoration-color: var(--accent); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

code {
  font-family: var(--mono);
  font-size: .8125em;
  background: var(--raised);
  padding: .12em .38em;
  border-radius: 3px;
  color: var(--ink-2);
}

/* ------------------------------------------------------------------ layout */

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
/* reading column: the page frame divided by φ (82rem / 1.618) */
.narrow { max-width: 50.7rem; margin-inline: auto; }
/* prose that fills the φ column instead of stopping at --measure */
.prose-wide p, .prose-wide li { max-width: none; }

.stack { display: grid; gap: var(--s0); }
.stack-sm { display: grid; gap: var(--s-1); }
.stack-lg { display: grid; gap: var(--s2); }

section { padding-block: var(--space-section); }

/* work → contact carries one φ step less air */
#work { padding-block-end: var(--space-seam); }
#work + section { padding-block-start: 0; }

.rule { border: 0; border-top: 1px solid var(--line-soft); margin: 0; }
/* the standalone divider between the hero and the work list: pull the
   neighbours' padding in by 40% so the break isn't so airy */
main > .rule {
  margin-top: calc(var(--space-flow) * -.4);
  margin-bottom: calc(var(--space-section) * -.4);
}

/* Available to screen readers, invisible on screen. Used for table captions
   where the preceding heading already does the visible labelling. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------- nav */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.nav-inner {
  max-width: var(--max); margin: 0 auto;
  padding: .9rem var(--gutter);
  display: flex; align-items: baseline; gap: 1.5rem;
}

.wordmark {
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  color: var(--ink);
}
.wordmark:hover { color: var(--accent); }

/* signature image wordmark in the nav */
.nav .wordmark img { display: block; height: 2rem; width: auto; }
.nav .wordmark:hover img { opacity: .7; }

.nav-links {
  margin-left: auto;
  display: flex; gap: 1.25rem;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .04em;
}
.nav-links a { color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--accent); }

/* -------------------------------------------------------------------- hero */

.hero { padding-block: clamp(var(--s2), 8vw, var(--s4)) var(--space-flow); }

.hero { position: relative; overflow: hidden; }
/* hard breaks own the line structure (headline-cube.js inserts them);
   balance is off because Safari 18 re-balances asynchronously when the
   typed adjective changes, bouncing the words after it down a line and
   stranding any keyboard map built mid-bounce */
.hero h1 { max-width: 26ch; cursor: default; text-wrap: wrap; }
/* the built cube adds the adjective: same type size, a wider measure to hold it */
.hero h1.with-playful { max-width: 30ch; }
.headline-stage { position: relative; min-height: 26rem; padding-right: 42%; }
.headline-stage #cube { display: block; position: absolute; top: 0; right: 0; width: 42%; height: auto; max-width: 26rem; cursor: pointer; }
/* the locked instrument owns the touch gesture, so drags rotate instead of
   scrolling; before the build, the page scrolls normally over the cube */
.headline-stage #cube.play { touch-action: none; }
/* the locked cube needs less room than the scattered invitation:
   once it builds, give the reserved space back to the page */
.headline-stage { transition: min-height .9s cubic-bezier(.3, .7, .2, 1) .45s; }
@media (min-width: 46.0625rem) {
  .headline-stage.cube-up { min-height: 21rem; }
}
.hero h1 .hw { white-space: nowrap; }
/* locked keyboard: the word under the pointer pulses and reads in ink */
.hero h1 .hw.wordlit .hc { color: var(--ink); opacity: 1; }
.hero h1 .hw.wpulse { animation: hw-pulse .45s cubic-bezier(.3, .7, .3, 1); }
@keyframes hw-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .hw.wpulse { animation: none; }
}
.hero h1 .hc { display: inline-block; position: relative; opacity: .7; transition: color .15s ease, opacity .12s ease; }
.hero h1 .hc.done, .hero h1 .hc.tease { opacity: 1; }
/* a quiet ring radiates from each letter the moment it is claimed */
.hero h1 .hc::after {
  content: '';
  position: absolute;
  left: 50%; top: 55%;
  width: 1.5em; height: 1.5em;
  margin: -.75em 0 0 -.75em;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.hero h1 .hc.ping::after { animation: hc-ping .65s cubic-bezier(.2, .6, .3, 1); }
@keyframes hc-ping {
  0%   { opacity: .3; transform: scale(.35); }
  100% { opacity: 0;  transform: scale(1.8); }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .hc.ping::after { animation: none; }
}
.hero h1 .hc.on { color: var(--ink); opacity: 1; }
.cube-hint, .cube-sound { font-family: var(--mono); font-size: .6875rem; color: var(--ink-2); }
.cube-hint { grid-column: 1; margin: -5.05rem 0 0; max-width: 65ch; }
/* idle nudge: 5s after lock with no cube interaction, the tap hint swells
   once to bold and 10% larger from its center. Collision, not choreography:
   the swelling left edge grows 1.75ch total (half of 10% of the 35ch
   sentence) and crosses the 1ch gap ~27% into the timeline — only then
   does the lead sentence get shoved the remaining 0.75ch, returning as the
   edge recedes. Plex Mono keeps advance widths across weights, so the
   weight itself never reflows. */
.cube-hint .hint-lead, .cube-hint .hint-tap { display: inline-block; }
.cube-hint .hint-tap { transform-origin: center; }
.cube-hint .hint-tap.nudge { animation: hint-tap-nudge .667s ease-in-out; }
.cube-hint .hint-lead.nudge { animation: hint-lead-bump .667s linear; }
@keyframes hint-tap-nudge {
  50% { font-weight: 700; transform: scale(1.1); }
}
@keyframes hint-lead-bump {
  0%, 27% { transform: translateX(0); animation-timing-function: ease-out; }
  50%     { transform: translateX(-.75ch); animation-timing-function: ease-in; }
  73%, 100% { transform: translateX(0); }
}
/* invisible bold glyph that warms the 700 face ahead of the nudge */
.cube-hint .hint-warm { position: absolute; opacity: 0; font-weight: 700; pointer-events: none; }
.headline-stage .cube-hint { margin-top: .55rem; }
.headline-stage .cube-sound { display: inline-block; margin-top: .7rem; }
/* the set pager only exists while the cube is up (headline-cube.js toggles
   .show); on reveal the label appears and the numbers build in left to right */
.headline-stage .cube-set { display: none; margin-left: .55rem; vertical-align: middle; }
.headline-stage .cube-set.show { display: inline-flex; align-items: center; gap: .3rem; }
.cube-set-label {
  font-family: var(--mono); font-size: .6875rem; color: var(--ink-2);
  margin-right: .1rem;
}
.cube-set-num {
  font-family: var(--mono); font-size: .6875rem; line-height: 1; color: var(--ink-2);
  background: none; border: 1px solid var(--line); border-radius: 4px;
  padding: .3rem .5rem; cursor: pointer;
}
.cube-set-num:hover { border-color: var(--ink-2); }
.cube-set-num:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cube-set-label, .cube-set-num {
  opacity: 0; transform: translateY(5px);
  transition: opacity .3s ease-out, transform .3s ease-out;
}
.cube-set-label.in, .cube-set-num.in { opacity: 1; transform: none; }
.cube-set-num.on { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .cube-set-label, .cube-set-num { transition: none; }
}
.cube-sound { background: none; border: 1px solid var(--line); border-radius: 4px; padding: .4rem .7rem; cursor: pointer; }
#cube:focus-visible, .cube-sound:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 46rem) {
  /* the fixed breaks pin the sentence to three lines; on mobile the size
     scales with the viewport so the longest line always fits */
  .hero h1 { font-size: min(1.87rem, calc((100vw - 3rem) * 0.066)); }
  .headline-stage { min-height: 0; padding-right: 0; }
  .headline-stage #cube { position: static; max-width: 19rem; width: 100%; margin: .5rem auto 0; transition: margin .9s cubic-bezier(.3, .7, .2, 1) .45s; }
  .headline-stage.cube-up #cube { margin-bottom: -2rem; }
  .headline-stage .cube-hint { margin-top: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .hc { transition: none; opacity: 1; }
  .headline-stage, .headline-stage #cube { transition: none; }
}
.hero .accent-word { color: var(--accent); }

/* echo glyph: the letter under the cursor, blown up beside the headline
   (created by site.js on hover-capable devices) */
.hero-glyph {
  /* left-anchored just beyond the headline block so the glyph hugs the
     text and wide letters grow away from it */
  position: absolute; left: calc(var(--gutter) + 56rem); top: 50%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: clamp(14rem, 28vw, 26rem);
  line-height: 1;
  color: var(--accent);
  pointer-events: none; user-select: none;
  opacity: 0; transition: opacity .18s ease;
}
.hero-glyph.on { opacity: 1; }
.hero h1 .hw { display: inline-block; }
.hero h1 .hc { transition: color .15s ease; }
/* real hover only: on touch, :hover sticks to the last tapped letter */
@media (hover: hover) {
  .hero h1 .hc:hover { color: var(--ink); }
}
.hero h1 .hc.lit { color: var(--ink); }

/* audio-unlock hint, shown after lingering on the headline (site.js) */
.hero-hint {
  position: absolute; left: var(--gutter); bottom: 1.1rem;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em;
  color: var(--muted);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.hero-hint.on { opacity: 1; }

/* recorder chip (site.js): appears once audio is live */
.hero-rec {
  /* sits below the echo glyph, sharing its left anchor */
  position: absolute; left: calc(var(--gutter) + 56rem); bottom: .9rem;
  display: none; align-items: center; gap: .4rem;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em;
}
.hero-rec.on { display: flex; }
.rec-actions { display: inline-flex; gap: .4rem; }
.hero-rec button {
  font: inherit; letter-spacing: inherit; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 2px; padding: .3rem .65rem; cursor: pointer;
}
.hero-rec button:hover { color: var(--ink); border-color: var(--line); }
.hero-rec button.rec-live { color: #B3261E; border-color: #B3261E; }
.hero-rec .snd-btn { display: inline-flex; align-items: center; gap: .45rem; }
.snd-meter { display: inline-flex; gap: 2px; align-items: flex-end; height: .7rem; }
.snd-meter i { display: block; width: 3px; height: 15%; background: currentColor; transition: height .08s linear; }
@media (max-width: 72rem) { .hero-rec, .hero-rec.on { display: none; } }
@media (max-width: 72rem) { .hero-glyph { display: none; } }

.hero-sub {
  margin-top: var(--s1);
  max-width: 58ch;
  font-size: 1.0625rem;
  color: var(--ink-2);
}
.hero-sub strong { color: var(--ink); font-weight: 500; }

.hero-meta {
  margin-top: var(--s2);
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
  font-family: var(--mono); font-size: .75rem; color: var(--muted);
}
.hero-meta span { display: inline-flex; gap: .5rem; }
.hero-meta b { color: var(--ink-2); font-weight: 500; }

/* --------------------------------------------------------------- work index */

/* stacked layout: one φ step above --space-flow so projects don't run together */
.work-list { display: grid; gap: clamp(var(--s3), calc(7vw * 1.618), var(--s4)); }

/* Stacked layout reads name → media → description: .work-body is flattened
   with display:contents and the pieces reordered around the media link. */
.work-item {
  display: grid; gap: var(--s-1);
  align-items: start;
}
.work-body { display: contents; }
.work-item > a { order: 1; }
.work-body p { order: 2; }
.work-tags { order: 3; }

/* Staggered rows: large media, text beside it, sides alternating per row. */
@media (min-width: 56rem) {
  .work-list { gap: var(--space-flow); }
  .work-item {
    grid-template-columns: minmax(0, 11fr) minmax(0, 8fr);
    grid-template-areas: "media body";
    column-gap: clamp(var(--s2), 5vw, var(--s3));
  }
  .work-item:nth-child(even) {
    grid-template-columns: minmax(0, 8fr) minmax(0, 11fr);
    grid-template-areas: "body media";
  }
  .work-item > a { grid-area: media; order: 0; }
  .work-body {
    grid-area: body; display: grid; gap: var(--s-1);
    align-content: start; padding-top: .5rem;
  }
}

.work-body h3 { font-size: clamp(1.4rem, 3.2vw, 2rem); letter-spacing: -.025em; }
.work-body h3 a { color: var(--ink); }
.work-item:hover .work-body h3 a { color: var(--accent); }
.work-body p { color: var(--ink-2); font-size: .9375rem; max-width: 52ch; }

.work-tags {
  display: flex; flex-wrap: wrap; gap: .4rem;
  font-family: var(--mono); font-size: .625rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.work-tags span {
  border: 1px solid var(--line); color: var(--muted);
  padding: .25em .55em; border-radius: 2px;
}

/* media slot — drop a poster + video in and it just works */
.media {
  position: relative; aspect-ratio: 16 / 10;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.media video, .media img { width: 100%; height: 100%; object-fit: cover; }

/* letterboxed variant — full video visible on white, scaled down so edge text clears the frame */
.media-contain { background: #fff; }
.media-contain video { object-fit: contain; transform: scale(.92); }

.media.empty::after {
  content: attr(data-slot);
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
  padding: 1rem;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  background-image:
    repeating-linear-gradient(135deg,
      transparent 0 10px,
      color-mix(in srgb, var(--line) 50%, transparent) 10px 11px);
}

/* ----------------------------------------------------------- case study page */

.cs-header { padding-block: clamp(var(--s2), 8vw, var(--s3)) var(--s2); }
.cs-header h1 { max-width: 22ch; margin-top: .75rem; }

/* Project header: case studies that share one project (All Things Trust) get
   an explainer plus a switch. The study being read is inked and underlined,
   its sibling greyed out; clicking the sibling opens that case study. */
.project-intro { margin-top: 1rem; color: var(--ink-2); max-width: 54ch; }
.project-switch { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s1); }
.project-switch a {
  font-family: var(--display); font-variation-settings: "wdth" 112;
  font-weight: 600; font-size: clamp(1.05rem, 1.8vw, 1.2rem); letter-spacing: -.015em;
  color: var(--muted);
  padding-bottom: .25rem; border-bottom: 2px solid transparent;
}
.project-switch a:hover { color: var(--accent); }
.project-switch a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.cs-facts {
  margin-top: var(--s2);
  display: grid; gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
@media (min-width: 40rem) { .cs-facts { grid-template-columns: repeat(3, 1fr); } }
.cs-facts > div { background: var(--surface); padding: .9rem 1.1rem; display: grid; gap: .2rem; }
.cs-facts dt {
  font-family: var(--mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.cs-facts dd { margin: 0; font-size: .9375rem; color: var(--ink); }

.cs-body { display: grid; --body-gap: clamp(var(--s2), 6vw, var(--s3)); }
.cs-body > * + * { margin-top: var(--body-gap); }
/* dividers carry 40% less air than a full section break */
.cs-body > .rule { margin-block: calc(var(--body-gap) * .6); }
.cs-body > .rule + * { margin-top: 0; }

/* .cs-section is a <section>, so it inherits the global section padding-block.
   Kill it here — spacing between case-study sections comes from .cs-body's gap. */
.cs-section { display: grid; gap: 1rem; padding-block: 0; }
.cs-section > .eyebrow { color: var(--accent); }
.cs-section p { font-size: 1.0625rem; }
.cs-section ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .7rem; max-width: var(--measure); }
.cs-section li { font-size: 1.0625rem; color: var(--ink-2); }
.cs-section li::marker { color: var(--evidence); }
.cs-section li strong { color: var(--ink); }

/* pull-quote / the hard call */
.callout {
  border-left: 2px solid var(--accent);
  background: var(--surface);
  padding: 1.25rem 1.5rem;
  display: grid; gap: .6rem;
}
.callout p { font-size: 1.0625rem; color: var(--ink); }

.honest {
  border-left: 2px solid var(--evidence);
  background: var(--surface);
  padding: 1.25rem 1.5rem;
  display: grid; gap: .6rem;
}

/* figure + diagram */
figure { margin: 0; display: grid; gap: .75rem; }
figcaption {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em;
  color: var(--muted); max-width: 62ch;
}

.diagram {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  padding: clamp(1rem, 3vw, 2rem);
  overflow-x: auto;
}
.diagram svg { width: 100%; height: auto; min-width: 20rem; }

/* diagram type — set here so the SVGs stay clean */
.d-label { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; fill: var(--muted); }
.d-title { font-family: var(--body); font-size: 13px; font-weight: 600; fill: var(--ink); }
.d-num   { font-family: var(--display); font-size: 20px; font-weight: 700; fill: var(--evidence); }
.d-text  { font-family: var(--body); font-size: 11px; fill: var(--ink-2); }
.d-box   { fill: var(--raised); stroke: var(--line); stroke-width: 1; }
.d-arrow { stroke: var(--accent); stroke-width: 1.25; fill: none; }
.d-tick  { stroke: var(--line); stroke-width: 1; }

/* ------------------------------------------------------------------- tables */

.table-scroll { overflow-x: auto; border: 1px solid var(--line-soft); background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .875rem; }
th, td { text-align: left; vertical-align: top; padding: .7rem .95rem; border-bottom: 1px solid var(--line-soft); }
thead th {
  font-family: var(--mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody th { font-weight: 500; color: var(--ink); white-space: nowrap; }
tbody tr:last-child > * { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; text-align: right; color: var(--evidence); }

/* ------------------------------------------------------------------ résumé */

.cv { display: grid; gap: var(--s2); }

.cv-role { display: grid; gap: var(--s-1); }
@media (min-width: 48rem) {
  .cv-role { grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--s2); }
}
.cv-role-head { display: grid; gap: .1rem; align-content: start; }
.cv-role-head .org { font-weight: 600; color: var(--ink); }
.cv-role-head .title { color: var(--ink-2); font-size: .9375rem; }
.cv-role-head .dates { font-family: var(--mono); font-size: .6875rem; color: var(--muted); margin-top: .2rem; }
.cv-role ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .55rem; }
.cv-role li { color: var(--ink-2); font-size: .9375rem; max-width: 58ch; }
.cv-role li::marker { color: var(--muted); }

.cv-block { display: grid; gap: var(--s-1); }
@media (min-width: 48rem) {
  .cv-block { grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--s2); }
}
.cv-block .k {
  font-family: var(--mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: .2rem;
}
.cv-block .v { font-size: .9375rem; color: var(--ink-2); }
.cv-block .v b { color: var(--ink); }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .08em;
  text-transform: uppercase;
  padding: .7rem 1.1rem;
  border: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.btn.primary { border-color: var(--accent); color: var(--accent); }
.btn.primary:hover { background: var(--accent); color: var(--ground); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --------------------------------------------------------------- elsewhere */

.elsewhere { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
@media (min-width: 44rem) { .elsewhere { grid-template-columns: repeat(2, 1fr); } }
.elsewhere > a {
  background: var(--surface); padding: 1.1rem 1.25rem;
  display: grid; gap: .3rem; text-decoration: none;
}
.elsewhere > a:hover { background: var(--raised); }
.elsewhere .src {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--evidence);
}
.elsewhere .ttl { color: var(--ink); font-weight: 500; font-size: .9375rem; }
.elsewhere > a:hover .ttl { color: var(--accent); }

/* ------------------------------------------------------------------ footer */

.foot {
  border-top: 1px solid var(--line-soft);
  padding-block: var(--s2) var(--s3);
  display: grid; gap: var(--s1);
}
@media (min-width: 44rem) { .foot-inner { display: flex; gap: var(--s1); align-items: flex-start; } }
.foot-inner { display: grid; gap: var(--s1); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s0); margin-left: auto; font-family: var(--mono); font-size: .75rem; }
.foot-links a { color: var(--ink-2); }
.foot-links a:hover { color: var(--accent); }
.foot-note { font-family: var(--mono); font-size: .6875rem; color: var(--muted); letter-spacing: .04em; }

/* --------------------------------------------------------------- next/prev */

.next {
  border-top: 1px solid var(--line-soft);
  padding-block: var(--s1);
  display: flex; flex-wrap: wrap; gap: var(--s0); align-items: baseline;
}
.next .eyebrow { flex: 0 0 auto; }
.next a { font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; }

/* ------------------------------------------------------------------ motion */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  video { display: none; }
}

/* ------------------------------------------------------------- pull quote */

.pull-quote {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.8vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.28;
  color: var(--accent);
  max-width: 42ch;
}

/* about page: pull quote beside the portrait */
.about-quote-row { align-items: center; }
.about-portrait { display: block; width: 100%; height: auto; opacity: .85; }
@media (min-width: 48rem) {
  .about-quote-row {
    grid-template-columns: minmax(0, 1fr) clamp(13rem, 30vw, 17rem);
    column-gap: var(--s2);
  }
}

/* ------------------------------------------------------------------ print */

@media print {
  :root { --ground: #fff; --surface: #fff; --raised: #fff; }
  body { background: #fff; font-size: .875rem; line-height: 1.42; }
  .nav, .foot, .btn-row, .skip, .next { display: none !important; }
  .wrap { padding-inline: 0; }
  section { padding-block: 1.1rem; }
  .cs-header { padding-block: 0 .75rem; }
  .cs-body { --body-gap: 1.4rem; }
  .cs-section { gap: .6rem; }
  .cs-section p, .cs-section li { font-size: .9375rem; }
  .cs-section ul { gap: .35rem; }
  .cv { gap: 1.15rem; }
  .cv-role { gap: .4rem; }
  .cv-role ul { gap: .3rem; }
  .cv-role li { font-size: .875rem; line-height: 1.42; }
  .cv-role-head .org a { color: var(--ink); }
}