/* ==========================================================================
   stoyan.net
   Blue field: the studio backdrop of the portrait becomes the page's colour.
   Hero and contact sit on the field; everything between is plain white (or a
   cool near-black), with the same blue as the only accent.
   ========================================================================== */

/* ---------- Font (self-hosted, SIL Open Font License) ---------- */
/* Archivo, latin subset, variable weight axis at normal width: one file covers every weight used
   here (400, 500, 600, 700, 750, 800). Characters it lacks (the arrows) come from the system font. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/archivo-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallback: until Archivo arrives, text is set in Arial scaled to Archivo's widths
   and vertical metrics, one face per weight used. Widths were measured on this page's own text and
   tuned so the hero wraps the same way before and after the swap from 360 to 1440px wide.
   Liberation Sans and Arimo share Arial's metrics. */
@font-face {
  font-family: "Archivo Fallback";
  font-weight: 400;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo");
  size-adjust: 98.38%;
  ascent-override: 89.25%;
  descent-override: 21.35%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo Fallback";
  font-weight: 500;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo");
  size-adjust: 100.81%;
  ascent-override: 87.09%;
  descent-override: 20.83%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo Fallback";
  font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold");
  size-adjust: 96.75%;
  ascent-override: 90.75%;
  descent-override: 21.71%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo Fallback";
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold");
  size-adjust: 99.35%;
  ascent-override: 88.37%;
  descent-override: 21.14%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo Fallback";
  font-weight: 750;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold");
  size-adjust: 101.08%;
  ascent-override: 86.86%;
  descent-override: 20.78%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo Fallback";
  font-weight: 800;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold");
  size-adjust: 103.25%;
  ascent-override: 85.04%;
  descent-override: 20.34%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Sampled from assets/avatar.jpg (canvas probe): the mean of the backdrop where the photo's
     edges meet the page. The photo's own studio light and falloff continue around it (.portrait). */
  --field: #216696;
  --on-field: #FFFFFF;
  --on-field-2: #DCEAF5;
  --on-field-rule: rgba(255, 255, 255, .26);
  --photo: none;

  --bg: #FFFFFF;
  --bg-2: #F2F6F9;
  --ink: #0F1720;
  --ink-2: #384553;
  --ink-3: #5A6775;
  --rule: rgba(15, 23, 32, .13);
  --accent: #216696;
  --accent-hover: #174E76;
  --accent-ink: #FFFFFF;
  --tint: #EAF2F8;
  --selection: rgba(33, 102, 150, .2);

  --f-sans: "Archivo", "Archivo Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 56px);
  --gap: clamp(16px, 2.2vw, 32px);
  --section-y: clamp(80px, 9vw, 144px);
  --header-h: 72px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --field: #1D5983;
    --on-field-2: #D3E3F0;
    --photo: brightness(.87);

    --bg: #0F1318;
    --bg-2: #161C23;
    --ink: #E7ECF1;
    --ink-2: #B4BFCA;
    --ink-3: #8D99A6;
    --rule: rgba(231, 236, 241, .13);
    --accent: #7FB6E2;
    --accent-hover: #A6CDEE;
    --accent-ink: #0F1318;
    --tint: #142230;
    --selection: rgba(127, 182, 226, .3);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --field: #1D5983;
  --on-field-2: #D3E3F0;
  --photo: brightness(.87);

  --bg: #0F1318;
  --bg-2: #161C23;
  --ink: #E7ECF1;
  --ink-2: #B4BFCA;
  --ink-3: #8D99A6;
  --rule: rgba(231, 236, 241, .13);
  --accent: #7FB6E2;
  --accent-hover: #A6CDEE;
  --accent-ink: #0F1318;
  --tint: #142230;
  --selection: rgba(127, 182, 226, .3);
}

:root[data-theme="light"] { color-scheme: light; }

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Smooth scrolling is switched on by script.js (html.is-ready) only after load, so a direct
     link to #speaking lands instantly instead of animating across the whole page. */
  scroll-padding-top: calc(var(--header-h) + 8px);
}
/* The header's own controls sit inside that padded strip. Without this, focusing one while scrolled
   (Tab, Esc out of the menu) makes the browser scroll the page to "reveal" a control that never moved. */
.masthead :is(a, button) { scroll-margin-top: calc(-1 * (var(--header-h) + 8px)); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

main:focus { outline: none; }

::selection { background: var(--selection); color: var(--ink); }

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
table { border-spacing: 0; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Things that only make sense when script.js runs (clock, copy button, toggles) */
html:not(.js) .js-only { display: none; }

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  font-size: .9375rem;
}
.skip-link:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Blue field (hero, contact, footer, mobile menu) ---------- */
.hero,
.contact,
.colophon,
.mobile-menu {
  background: var(--field);
  color: var(--on-field);
}
.hero :focus-visible,
.contact :focus-visible,
.colophon :focus-visible,
.mobile-menu :focus-visible,
.masthead:not(.is-solid) :focus-visible { outline-color: #fff; }
.hero ::selection,
.contact ::selection { background: rgba(255, 255, 255, .3); color: #fff; }

/* ---------- Masthead ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--field);
  color: var(--on-field);
  box-shadow: 0 1px 0 transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.masthead.is-solid {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--rule);
}
/* While the full-screen menu is open, the bar belongs to the (blue) menu. */
.masthead:has(.menu-toggle[aria-expanded="true"]) {
  background: var(--field);
  color: var(--on-field);
  box-shadow: 0 1px 0 var(--on-field-rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
}
.wordmark {
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  padding-block: 12px;
}

.nav { margin-left: auto; }
.nav__list { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.nav__list a {
  position: relative;
  display: inline-block;
  padding-block: 12px;
  font-size: .9375rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: .88;
  transition: opacity .2s var(--ease), color .2s var(--ease);
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s var(--ease);
}
.nav__list a.is-active { opacity: 1; }
.nav__list a.is-active::after { transform: scaleX(1); }
.masthead.is-solid .nav__list a { opacity: 1; color: var(--ink-2); }
.masthead.is-solid .nav__list a.is-active { color: var(--accent); }

.masthead__tools { display: flex; align-items: center; gap: 4px; }

.theme-toggle,
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color .2s var(--ease);
}
.theme-toggle svg { transition: transform .5s var(--ease); }
:root[data-theme="dark"] .theme-toggle svg { transform: rotate(180deg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle svg { transform: rotate(180deg); }
}
html:not(.js) .theme-toggle { display: none; }

.menu-toggle { display: none; padding: 0 8px 0 12px; }
.menu-toggle__label { font-size: .9375rem; font-weight: 600; }
.menu-toggle__icon { position: relative; width: 20px; height: 10px; }
.menu-toggle__icon span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.menu-toggle__icon span:first-child { top: 0; }
.menu-toggle__icon span:last-child { top: 8px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:first-child { top: 4px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:last-child { top: 4px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 49;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s;
}
.mobile-menu__list { padding-top: 8px; }
.mobile-menu__list:focus { outline: none; }
.mobile-menu__list li { border-bottom: 1px solid var(--on-field-rule); }
.mobile-menu__list a {
  display: block;
  padding: 16px 0 14px;
  font-weight: 700;
  font-size: clamp(2rem, 9vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.mobile-menu__foot {
  padding: 28px 0 40px;
  font-size: 1rem;
}
.mobile-menu__foot a {
  display: inline-block;
  padding-block: 10px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}
.mobile-menu__meta { margin-top: 20px; font-size: .9375rem; line-height: 1.6; color: var(--on-field-2); }
.mobile-menu__meta .clock { font-variant-numeric: tabular-nums; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }

.hero__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  min-height: min(calc(100svh - var(--header-h) - 56px), 800px);
}
.hero__copy {
  position: relative;
  z-index: 1;
  grid-column: 1 / span 7;
  grid-row: 1;
  align-self: center;
  padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 96px);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin-bottom: clamp(20px, 2.2vw, 32px);
  font-size: 1rem;
  line-height: 1.4;
}
.hero__role { font-weight: 700; }
.hero__where { color: var(--on-field-2); }

.hero__title {
  font-weight: 800;
  font-size: clamp(2.75rem, .5rem + 5.5vw, 5.5rem);
  line-height: .95;
  letter-spacing: -.04em;
}
.hero__line { display: block; white-space: nowrap; }
/* Optical alignment: the F's side bearing reads as an indent at this size ("to" and "And" sit flush). */
.hero__line--first { margin-left: -.05em; }
.hero__title-2 { color: #B9D6EE; }

.hero__deck { margin-top: clamp(28px, 3vw, 44px); max-width: 35rem; }
.hero__lede {
  font-size: clamp(1.0625rem, .98rem + .3vw, 1.25rem);
  line-height: 1.55;
  color: var(--on-field-2);
  text-wrap: pretty;
}
.hero__lede a {
  color: var(--on-field);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: rgba(255, 255, 255, .55);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 32px;
}
.hero__link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 44px;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--on-field);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 2px;
  background-position: 0 calc(50% + .85em);
  background-repeat: no-repeat;
  transition: background-size .3s var(--ease);
}
.hero__link--main { background-size: 100% 2px; }
.hero__link span { transition: transform .3s var(--ease); }

/* Portrait: set into the field. The field is the photo's backdrop colour; the photo's own studio
   light (brighter upper left) and falloff (darker lower right) are continued around it by ::before,
   and the photo's edges fade out, so there is no frame. Only the bottom edge is a hard crop. */
.portrait {
  position: relative;
  isolation: isolate;
  grid-column: 8 / -1;
  grid-row: 1;
  align-self: end;
  justify-self: end;
  width: 100%;
  max-width: 540px;
  margin-top: 24px;
  /* Dark theme: the photo and its light dim together with the field. */
  filter: var(--photo);
}
.portrait::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* The box runs 70% of the photo's width to its left, 40% to its right, 45% above it (2.1 photo
     widths in all). Both glows fade to nothing inside the box, so its edges never show:
     the falloff is centred on the photo's lower right corner and reaches 36% of a photo width past it,
     the light is centred 24% in from the photo's left edge and reaches 60% of a photo width. */
  inset: -45% -40% 0 -70%;
  background:
    radial-gradient(ellipse 17.14% 24% at 80.95% 100%, rgba(6, 70, 115, .85), rgba(6, 70, 115, 0)),
    radial-gradient(ellipse 28.57% 42% at 44.76% 56%, rgb(49, 117, 164), rgba(49, 117, 164, 0));
  pointer-events: none;
}
.portrait img {
  width: 100%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 12%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 12%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%);
  mask-composite: intersect;
}

/* ---------- Sections ---------- */
.section { padding-top: var(--section-y); }

.section__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 14px;
  align-items: baseline;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.section__label {
  grid-column: 1 / span 3;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--accent);
}
.section__title {
  grid-column: 4 / -1;
  max-width: 18em;
  font-weight: 700;
  font-size: clamp(1.875rem, 1.1rem + 2.3vw, 3.125rem);
  line-height: 1.06;
  letter-spacing: -.032em;
  text-wrap: balance;
}

/* ---------- About ---------- */
.about__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 48px;
  margin-top: clamp(36px, 4vw, 56px);
}
.about__body { grid-column: 4 / span 5; }
.facts { grid-column: 10 / span 3; }

.prose p { color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.prose p + p { margin-top: 1.1em; }
.prose p:first-child { color: var(--ink); font-size: 1.25rem; line-height: 1.5; font-weight: 500; letter-spacing: -.01em; }

.facts__title {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
  font-size: 1rem;
  font-weight: 700;
}
.facts__item {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 13px 0 12px;
  border-bottom: 1px solid var(--rule);
}
.facts__item dt {
  font-weight: 800;
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.facts__item dd { font-size: .9375rem; line-height: 1.35; color: var(--ink-2); }

/* ---------- Quote ---------- */
.quote { padding-top: var(--section-y); }
.quote__figure {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
.quote blockquote { grid-column: 3 / -1; }
.quote blockquote p {
  max-width: 21em;
  font-weight: 750;
  font-size: clamp(1.875rem, 1rem + 2.9vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  color: var(--accent);
  text-indent: -.42em;
  text-wrap: balance;
}
.quote figcaption {
  grid-column: 3 / -1;
  margin-top: 24px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}

/* ---------- Experience ---------- */
.route { margin-top: clamp(48px, 5vw, 72px); }
.route__plot {
  position: relative;
  height: clamp(116px, 9vw, 140px);
}
.route__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route__lane {
  stroke: var(--rule);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.route__path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.route__lane-label {
  position: absolute;
  left: 0;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-3);
  background: var(--bg);
  padding: 2px 8px 2px 0;
}
.route__lane-label--top { top: calc(25% - 1.9em); }
.route__lane-label--bottom { top: calc(75% + .8em); }

.route__dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--bg);
  border: 2.5px solid var(--accent);
}
.route__dot--now {
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--accent);
}
.route__note {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(0, 14px);
  font-size: .875rem;
  line-height: 1.3;
  color: var(--ink-2);
  white-space: nowrap;
}
.route__note b { font-weight: 700; color: var(--ink); margin-right: .3em; font-variant-numeric: tabular-nums; }
.route__note--start { background: var(--bg); padding: 2px 6px 2px 0; }
/* Mid labels sit on the side of their dot that the curve leaves free: the 2020 curve falls to the
   right, so its label goes above; the 2025 curve rises to the right, so its label goes below. */
.route__note--acq { transform: translate(12px, calc(-100% - 2px)); }
.route__note--build { transform: translate(12px, 2px); }
/* "Now" is pinned 12px in from the column edge, its label right-aligned to it. */
.route__dot--now,
.route__note--end { left: calc(100% - 12px); }
.route__note--end { transform: translate(calc(-100% + 7px), -2.4em); color: var(--accent); font-weight: 700; }

.roles { margin-top: clamp(40px, 5vw, 64px); }
.role {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 16px;
  padding-block: clamp(32px, 3.4vw, 48px);
  border-top: 1px solid var(--rule);
}
.role__years {
  grid-column: 1 / span 3;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.role__body { grid-column: 4 / span 5; }
.role__notes { grid-column: 10 / span 3; }

.role__title {
  font-weight: 750;
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.role__org { margin-top: 6px; font-size: 1.0625rem; font-weight: 500; color: var(--ink-2); }
.role__org a,
.note-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  padding-block: 10px;
  transition: color .2s var(--ease);
}
.role__text { margin-top: 16px; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }

.role__notes { display: grid; gap: 18px; align-content: start; padding-top: 4px; }
.role__notes dt { font-size: .8125rem; font-weight: 700; color: var(--ink-3); }
.role__notes dd { margin-top: 3px; font-size: .9375rem; line-height: 1.45; color: var(--ink); }
.tenure { color: var(--ink-3); }

.now-tag {
  display: inline-block;
  margin-left: 2px;
  padding: 1px 8px 2px;
  border-radius: 3px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: .05em;
}

/* The acquisition gets its own full-bleed band in the lightest tint of the field */
.acq {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 14px;
  align-items: center;
  padding-block: clamp(28px, 3vw, 40px);
  background: var(--tint);
  box-shadow: 0 0 0 100vmax var(--tint);
  clip-path: inset(0 -100vmax);
}
.acq + .role { border-top: 0; }
.acq__index { grid-column: 1 / span 3; }
.acq__label { font-weight: 700; font-size: 1.0625rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.acq__dip { display: block; width: 150px; max-width: 100%; height: 42px; margin-top: 12px; overflow: visible; }
.acq__lane { stroke: var(--accent); stroke-opacity: .28; stroke-width: 1; }
.acq__path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.acq__body { grid-column: 4 / span 8; }
.acq__title {
  font-weight: 750;
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
}
.acq__text { margin-top: 10px; color: var(--ink-2); max-width: 40em; text-wrap: pretty; }

/* ---------- Both sides ---------- */
.compare {
  width: 100%;
  margin-top: clamp(40px, 5vw, 64px);
  border-collapse: collapse;
  table-layout: fixed;
}
.compare th,
.compare td {
  text-align: left;
  vertical-align: top;
  font-weight: inherit;
  padding: 22px 0 24px;
}
.compare thead th,
.compare thead td { padding-top: 0; padding-bottom: 20px; }
/* The row labels take columns 1 to 3 of the page grid (3 columns + 3 gaps, about 25.6% at every
   width), so the two sides start on the rail. Table cells ignore calc() with percentages. */
.compare thead td,
.compare tbody th { width: 25.6%; }
.compare tbody tr { border-top: 1px solid var(--rule); }
/* The divider sits in the middle of a gutter. */
.compare th[scope="col"],
.compare tbody td { padding-right: calc(var(--gap) / 2 + 8px); }
.compare th[scope="col"] + th[scope="col"],
.compare tbody td + td { padding-left: calc(var(--gap) / 2); padding-right: 0; border-left: 1px solid var(--rule); }

.compare__name {
  display: block;
  font-weight: 750;
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.035em;
}
.compare__meta { display: block; margin-top: 10px; font-size: .9375rem; color: var(--ink-3); }
.compare tbody th { font-weight: 700; font-size: 1rem; color: var(--ink); }
.compare tbody td { font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

.now {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 24px;
  margin-top: clamp(64px, 7vw, 104px);
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.now__title {
  grid-column: 1 / span 3;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -.015em;
}
.principles {
  grid-column: 4 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px var(--gap);
  counter-reset: principle;
}
/* The number hangs in its own column, so wrapped titles and the text below line up with the first word. */
.principle { position: relative; padding-left: 1.75rem; counter-increment: principle; }
.principle__title {
  font-weight: 700;
  font-size: 1.3125rem;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.principle__title::before {
  content: counter(principle) ".";
  content: counter(principle) "." / "";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.principle p { margin-top: 8px; color: var(--ink-2); font-size: 1rem; line-height: 1.55; max-width: 30em; text-wrap: balance; }

.focus {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 16px;
  align-items: baseline;
  margin-top: clamp(56px, 6vw, 88px);
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.focus__title {
  grid-column: 1 / span 3;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -.015em;
}
.focus__list {
  grid-column: 4 / -1;
  max-width: 34em;
  font-weight: 600;
  font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem);
  line-height: 1.35;
  letter-spacing: -.02em;
}
.focus__list li { display: inline; white-space: nowrap; }
.focus__list li:not(:last-child)::after { content: ","; content: "," / ""; color: var(--ink-3); }
.focus__list li:last-child::after { content: "."; content: "." / ""; color: var(--ink-3); }

/* ---------- Speaking ---------- */
.media { margin-top: clamp(40px, 5vw, 64px); }
.media__row { border-top: 1px solid var(--rule); }
.media__row:last-child { border-bottom: 1px solid var(--rule); }
.media__link {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  grid-template-rows: auto 1fr;
  row-gap: 4px;
  align-items: baseline;
  padding-block: 26px 28px;
}
.media__date {
  grid-column: 1 / span 3;
  grid-row: 1;
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.media__type {
  grid-column: 1 / span 3;
  grid-row: 2;
  align-self: start;
  font-size: .9375rem;
  color: var(--ink-3);
}
.media__main { grid-column: 4 / span 7; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 8px; }
.media__title {
  font-weight: 700;
  font-size: clamp(1.3125rem, 1.05rem + .7vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
  transition: color .2s var(--ease);
}
.media__desc { color: var(--ink-2); font-size: 1rem; line-height: 1.55; max-width: 38em; text-wrap: pretty; }
.media__cta {
  grid-column: 11 / span 2;
  grid-row: 1;
  justify-self: end;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--accent);
  white-space: nowrap;
}
.media__cta [aria-hidden] { display: inline-block; transition: transform .3s var(--ease); }

/* ---------- Contact (blue field) ---------- */
.speaking { padding-bottom: var(--section-y); }
.contact {
  padding-block: clamp(72px, 8vw, 128px) clamp(64px, 7vw, 104px);
}
.contact__label { font-weight: 700; font-size: 1rem; color: var(--on-field-2); }
.contact__title {
  margin-top: 16px;
  font-weight: 800;
  font-size: clamp(4rem, 1.4rem + 9vw, 10.5rem);
  line-height: .88;
  letter-spacing: -.055em;
  /* Optical alignment: pulls the L's side bearing back to the text edge. */
  margin-left: -.06em;
}
.contact__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 48px;
  margin-top: clamp(40px, 4.4vw, 64px);
}
.contact__main { grid-column: 1 / span 6; }
.contact__side { grid-column: 8 / span 5; }
.contact__lead { color: var(--on-field-2); max-width: 30em; font-size: 1.125rem; line-height: 1.55; text-wrap: pretty; }

.email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 28px;
}
.email__link {
  display: inline-block;
  padding-block: 4px;
  font-weight: 750;
  font-size: clamp(1.625rem, 1rem + 2vw, 2.625rem);
  line-height: 1.15;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .16em;
  text-decoration-color: rgba(255, 255, 255, .45);
  transition: text-decoration-color .2s var(--ease);
}
.email__copy {
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid rgba(255, 255, 255, .6);
  border-radius: 3px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.email__copy[hidden] { display: none; }
.email__copy.is-copied { background: #fff; color: #174A70; border-color: #fff; }
.contact__time { margin-top: 18px; font-size: .9375rem; color: var(--on-field-2); }
.contact__time .clock { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

.contact__side-label { padding-bottom: 12px; border-bottom: 2px solid #fff; font-size: 1rem; font-weight: 700; }
.elsewhere a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1.25em;
  align-items: center;
  gap: 16px;
  min-height: 54px;
  border-bottom: 1px solid var(--on-field-rule);
  font-size: 1.0625rem;
  font-weight: 600;
}
.elsewhere__handle { font-size: .9375rem; font-weight: 400; color: var(--on-field-2); }
.elsewhere__arrow { text-align: right; transition: transform .3s var(--ease); }

/* ---------- Footer (still on the field) ---------- */
.colophon__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  padding-block: 16px 20px;
  border-top: 1px solid var(--on-field-rule);
  font-size: .9375rem;
  color: var(--on-field-2);
}
.colophon__top { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: #fff; }

/* ---------- Hover (pointer devices only, so taps never leave a stuck state) ---------- */
@media (hover: hover) {
  .nav__list a:hover { opacity: 1; }
  .nav__list a:hover::after { transform: scaleX(1); }
  .masthead.is-solid .nav__list a:hover { color: var(--ink); }
  .theme-toggle:hover,
  .menu-toggle:hover { background: rgba(255, 255, 255, .14); }
  .masthead.is-solid .theme-toggle:hover,
  .masthead.is-solid .menu-toggle:hover { background: var(--bg-2); }
  .hero__link:hover { background-size: 100% 2px; }
  .hero__link--main:hover span { transform: translateX(3px); }
  .hero__link:not(.hero__link--main):hover span { transform: translateY(3px); }
  .hero__lede a:hover { text-decoration-color: #fff; }
  .role__org a:hover,
  .note-link:hover { color: var(--accent-hover); }
  .media__link:hover .media__title { color: var(--accent); }
  .media__link:hover .media__cta [aria-hidden] { transform: translate(2px, -2px); }
  .email__link:hover { text-decoration-color: #fff; }
  .email__copy:not(.is-copied):hover { border-color: #fff; background: rgba(255, 255, 255, .12); }
  .elsewhere a:hover .elsewhere__arrow { transform: translate(2px, -2px); }
  .elsewhere a:hover .elsewhere__name { text-decoration: underline; text-underline-offset: .2em; }
  .colophon__top:hover { text-decoration: underline; text-underline-offset: .2em; }
  .mobile-menu__list a:hover { color: var(--on-field-2); }
}

/* ---------- Motion (only when motion is allowed) ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Until script.js marks the page ready (after load), nothing may animate from browser defaults. */
html:not(.is-ready) .mobile-menu,
html:not(.is-ready) .masthead { transition: none; }

@media (prefers-reduced-motion: no-preference) {
  html.is-ready { scroll-behavior: smooth; }

  /* Hero: CSS-only, never waits for JS */
  .rise { animation: rise .7s var(--ease) both; animation-delay: var(--d, 0ms); }

  /* Below-the-fold reveals: only when JS is present */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  .js .route__svg--path {
    clip-path: inset(-10px 100% -10px 0);
    transition: clip-path .8s cubic-bezier(.4, 0, .2, 1) .1s;
  }
  .js .route__plot.is-drawn .route__svg--path { clip-path: inset(-10px 0 -10px 0); }
  .js .route__dot, .js .route__note { opacity: 0; transition: opacity .4s var(--ease) .6s; }
  .js .route__plot.is-drawn .route__dot, .js .route__plot.is-drawn .route__note { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Laptop widths: the facts take the spare column next to them, so every item stays on one line. */
@media (min-width: 1101px) and (max-width: 1430px) {
  .facts { grid-column: 9 / span 4; }
}

@media (max-width: 1100px) {
  .about__body { grid-column: 4 / span 9; }
  .facts { grid-column: 4 / span 9; }
  .facts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }

  .role__body { grid-column: 4 / span 9; }
  .role__notes { grid-column: 4 / span 9; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }

  /* The CTA sits right under the type label in every row; a taller description adds space below it. */
  .media__link { grid-template-rows: auto auto 1fr; }
  .media__main { grid-column: 4 / span 9; grid-row: 1 / span 3; }
  .media__cta { grid-column: 1 / span 3; grid-row: 3; justify-self: start; align-self: start; margin-top: 10px; }

  /* Three columns get too narrow for the titles: the principles stack. */
  .principles { grid-template-columns: minmax(0, 36rem); row-gap: 28px; }
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }

  /* The collapsible menu exists only when JS runs; without it the nav stays inline. */
  .js .nav { display: none; }
  .js .menu-toggle { display: inline-flex; }
  .masthead__tools { margin-left: auto; }
  html:not(.js) .masthead__inner { flex-wrap: wrap; height: auto; padding-block: 10px 4px; row-gap: 0; }
  html:not(.js) .nav { order: 3; width: 100%; margin: 0; }
  html:not(.js) .nav__list { flex-wrap: wrap; gap: 0 20px; }
  html:not(.js) .nav__list a { padding-block: 8px; }
  html:not(.js) .masthead { position: static; }
  html:not(.js) { scroll-padding-top: 16px; }

  .hero__inner { min-height: 0; }
  .hero__copy { grid-column: 1 / -1; padding-block: 40px 8px; }
  .hero__line { white-space: normal; }
  .hero__deck { max-width: 34rem; }
  .portrait { grid-column: 1 / -1; grid-row: 2; justify-self: center; max-width: 440px; margin-top: 8px; }

  .section__label { grid-column: 1 / -1; }
  .section__title { grid-column: 1 / -1; }

  .about__body, .facts { grid-column: 1 / -1; }

  .quote blockquote, .quote figcaption { grid-column: 1 / -1; padding-left: .42em; }
  .quote figcaption { padding-left: 0; }

  .role__years, .role__body, .role__notes { grid-column: 1 / -1; }
  .role { row-gap: 10px; }
  .role__notes { margin-top: 8px; }
  .acq__index, .acq__body { grid-column: 1 / -1; }
  .acq__index { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .acq__dip { margin-top: 0; width: 120px; height: 34px; }

  .now__title, .principles, .focus__title, .focus__list { grid-column: 1 / -1; }

  .media__date, .media__type { grid-column: 1 / span 4; }
  .media__main { grid-column: 5 / -1; }
  .media__cta { grid-column: 1 / span 4; }

  .contact__main, .contact__side { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  :root { --header-h: 60px; --section-y: 72px; }
  body { font-size: 1rem; }
  .wordmark { font-size: 1.125rem; }

  .hero__copy { padding-top: 32px; }
  .hero__meta { margin-bottom: 18px; font-size: .9375rem; }
  .hero__actions { margin-top: 26px; gap: 8px 24px; }
  .portrait { max-width: 360px; margin-top: 16px; }

  .prose p:first-child { font-size: 1.125rem; }
  .facts__list { grid-template-columns: 1fr; }

  .route__plot { height: 132px; }
  .route__note { font-size: .8125rem; }
  .route__note--acq { left: 62.5%; top: 75%; transform: translate(-50%, 14px); padding: 0 4px; background: var(--bg); }
  .route__note--build { left: auto; right: 48px; top: 25%; transform: translate(0, -2em); padding: 0 4px; background: var(--bg); }

  .role__notes { grid-template-columns: 1fr; gap: 14px; }

  /* Compare: row by row, both sides stacked, so the comparison survives */
  .compare, .compare thead, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare thead tr { display: grid; grid-template-columns: 1fr 1fr; }
  .compare thead td {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
  .compare thead th { padding: 0 0 18px; }
  .compare th[scope="col"] + th[scope="col"] { padding-left: 16px; }
  .compare__name { font-size: 1.875rem; }
  .compare tbody tr { padding: 16px 0 18px; }
  .compare tbody th { padding: 0 0 10px; }
  .compare tbody td,
  .compare tbody td + td {
    position: relative;
    padding: 0 0 0 5.25rem;
    border-left: 0;
    font-size: 1rem;
  }
  .compare tbody td + td { margin-top: 10px; }
  .compare tbody td::before {
    content: attr(data-side);
    content: attr(data-side) / "";
    position: absolute;
    left: 0; top: .1em;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ink-3);
  }


  .media__link { grid-template-columns: 1fr auto; row-gap: 6px; padding-block: 22px 24px; }
  .media__date { grid-column: 1; grid-row: 1; }
  .media__type { grid-column: 1 / -1; grid-row: 2; }
  .media__main { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; }
  .media__cta { grid-column: 2; grid-row: 1; justify-self: end; margin-top: 0; }
}

/* Phones: the portrait runs edge to edge, so its sides are the screen's sides and only the top fades. */
@media (max-width: 480px) {
  .portrait { justify-self: stretch; width: auto; max-width: none; margin-inline: calc(var(--gutter) * -1); }
  .portrait img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 10%);
  }
}

@media (max-width: 380px) {
  .hero__title { font-size: 2.4375rem; }
  .hero__meta { gap: 2px 18px; }
}

/* ---------- Print: a clean one-document CV ---------- */
@media print {
  .masthead, .mobile-menu, .route, .email__copy, .hero__actions, .colophon__top, .skip-link, .portrait { display: none !important; }
  :root {
    --bg: #fff; --bg-2: #f2f2f2; --ink: #000; --ink-2: #222; --ink-3: #555;
    --rule: #ccc; --accent: #000; --tint: #fff;
    --field: #fff; --on-field: #000; --on-field-2: #222; --on-field-rule: #ccc;
  }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero__title-2 { color: #000; }
  .section, .quote { padding-top: 28pt; }
  .speaking { padding-bottom: 0; }
  .contact { margin-top: 28pt; padding-block: 28pt; }
  .role, .acq, .principle, .media__row { break-inside: avoid; }
  [data-reveal], .rise { opacity: 1 !important; transform: none !important; }
}