/* ============================================================
   site.css — the whole design system.

   Modeled closely on andreavollendorf.com: white page, one grey
   surface (#f6f7f9) doing all the framing work, a serif reserved
   for h1/h2 and the wordmark, and a quiet 15px sans for
   everything else. Mackinac's role is played by Cheltenham
   Classic; Geist plays itself.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../assets/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cheltenham Classic';
  src: url('../assets/fonts/CheltenhamClassic.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cheltenham Classic';
  src: url('../assets/fonts/CheltenhamClassicItalic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cheltenham Classic';
  src: url('../assets/fonts/CheltenhamClassicMedium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cheltenham Classic';
  src: url('../assets/fonts/CheltenhamClassicMediumltalic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cheltenham Classic';
  src: url('../assets/fonts/CheltenhamClassicBold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cheltenham Classic';
  src: url('../assets/fonts/CheltenhamClassicBoldltalic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --background: #fff;
  --foreground: #171717;
  --surface: #f6f7f9;
  --surface-hover: #f0f1f4;
  --border: rgba(0, 0, 0, .08);
  --accent: #4c74ff;

  --ink-85: rgba(0, 0, 0, .85);
  --ink-80: rgba(0, 0, 0, .8);
  --ink-78: rgba(0, 0, 0, .78);
  --ink-65: rgba(0, 0, 0, .65);
  --ink-55: rgba(0, 0, 0, .55);
  --ink-50: rgba(0, 0, 0, .5);
  --ink-45: rgba(0, 0, 0, .45);
  --ink-40: rgba(0, 0, 0, .4);
  --ink-30: rgba(0, 0, 0, .3);

  --sans: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Cheltenham Classic', Georgia, serif;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', monospace;

  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);

  --shadow-flush: inset 0 0 0 1px rgba(0, 0, 0, .06);
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, .04), inset 0 0 0 1px rgba(0, 0, 0, .06);
  --shadow-floating: 0 4px 24px rgba(0, 0, 0, .06), inset 0 0 0 1px rgba(0, 0, 0, .08);

  --z-overlay: 40;
  --z-nav: 50;
  --z-dropdown: 60;

  --gutter: 24px;

  /* Diagram palette (the inline SVGs from the old pages read these) */
  --paper: #fff;
  --paper-pure: #fff;
  --ink: #171717;
  --ink-soft: rgba(0, 0, 0, .55);
  --muted: rgba(0, 0, 0, .45);
  --rule: rgba(0, 0, 0, .15);
}
@media (min-width: 1024px) {
  :root { --gutter: 80px; }
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, .28) transparent;
  overflow-y: scroll;
}

body {
  background: var(--background);
  color: var(--ink-80);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 450;
  line-height: 1.45rem;
  letter-spacing: -.005rem;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

h1, h2, h3 { text-wrap: balance; }
h1, h2 { font-family: var(--serif); }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; background: none; border: none; cursor: pointer; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

::selection { background: rgba(76, 116, 255, .18); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Shared micro-interactions ---------- */
.link-hover { transition: color .15s ease, background-color .15s ease; }
.link-hover:hover { color: rgba(0, 0, 0, .85); }
.press-scale { transition: transform .1s; }
.press-scale:active { transform: scale(.97); }
.img-hover { transition: opacity .15s ease; }
.img-hover:hover { opacity: .9; }

/* Animated text highlights — wiped in by site.js on view */
.highlight {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  border-radius: .25em .2em .22em .18em;
  margin: -.04em -.06em;
  padding: .04em .06em;
  transition: background-size .6s var(--ease-out-quart);
}
.highlight.is-on { background-size: 100% 100%; }
.highlight-blue   { background-image: linear-gradient(82deg, #3884f46b, #3884f41f 6%, #3884f438 93%, #3884f47a); }
.highlight-yellow { background-image: linear-gradient(82deg, #f2be2273, #f2be221f 6%, #f2be2240 93%, #f2be2280); }
.highlight-green  { background-image: linear-gradient(82deg, #2ea06e6b, #2ea06e1f 6%, #2ea06e38 93%, #2ea06e7a); }
.highlight-purple { background-image: linear-gradient(82deg, #8244be6b, #8244be1f 6%, #8244be38 93%, #8244be7a); }
.highlight-pink   { background-image: linear-gradient(82deg, #d6409f6b, #d6409f1f 6%, #d6409f38 93%, #d6409f7a); }

/* ============================================================
   NAV — sticky, blurred, hides on scroll down
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, .8);
  transition: transform .3s var(--ease-out-quart);
  will-change: transform;
}
.nav.is-hidden { transform: translateY(-100%); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter);
  position: relative;
}

.nav__wordmark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--foreground);
}
.nav__wordmark svg {
  display: block;
  flex-shrink: 0;
  /* Optical: flex centers on the line box; the cap band sits a
     hair higher, so the heart rides up half a pixel to match. */
  position: relative;
  top: -.5px;
}

.nav__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-55);
}
.nav__back svg { display: block; }

.nav__scrolltitle {
  display: none;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -8px);
  font-size: 13px;
  font-weight: 550;
  color: var(--ink-85);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease-out-quart), transform .2s var(--ease-out-quart);
  white-space: nowrap;
  max-width: 44vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav__scrolltitle.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
@media (min-width: 640px) { .nav__scrolltitle { display: block; } }

.nav__links {
  display: none;
  align-items: center;
  gap: 16px;
}
@media (min-width: 640px) { .nav__links { display: flex; } }

.nav__link {
  font-size: 13px;
  font-weight: 450;
  color: var(--ink-55);
  height: 32px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  transition: color .15s ease, background-color .15s ease;
}
.nav__link:hover { color: rgba(0, 0, 0, .85); background: var(--surface); }
.nav__link[aria-current="page"] { color: var(--ink-85); }
.nav__link .chev {
  transition: transform .2s var(--ease-out-quart);
  will-change: transform;
}
.nav__link[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Dropdown */
.nav__drop { position: relative; }
.nav__menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  z-index: var(--z-dropdown);
  background: var(--background);
  border-radius: 8px;
  overflow: hidden;
  width: 300px;
  box-shadow: var(--shadow-floating);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .15s var(--ease-out-quart);
}
.nav__menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .2s var(--ease-out-quart), transform .2s var(--ease-out-quart);
}
.nav__menu-pad { padding: 8px; }

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  padding: 12px;
  transition: background-color .15s ease;
}
.menu-item:hover { background: var(--surface-hover); }
.menu-item__tile {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-flush);
}
.menu-item__tile svg { width: 28px; height: 28px; display: block; }
.menu-item__title {
  display: block;
  font-size: 14px;
  font-weight: 550;
  color: var(--ink-85);
  line-height: 1.25;
}
.menu-item__desc {
  display: block;
  font-size: 13px;
  color: var(--ink-45);
  line-height: 1.25;
  margin-top: 2px;
}

.menu-item--all {
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-55);
  padding: 10px 12px;
}

/* Duotone icons: grey by default, colored on row hover */
.icon-duo .duo-a { fill: #E1E3E8; transition: fill .15s ease; }
.icon-duo .duo-b { fill: #8790A1; transition: fill .15s ease; }
@media (hover: hover) {
  :is(.menu-item, .case-plate):hover .icon-duo.c-blue   .duo-a { fill: #C2E5FF; }
  :is(.menu-item, .case-plate):hover .icon-duo.c-blue   .duo-b { fill: #0090FF; }
  :is(.menu-item, .case-plate):hover .icon-duo.c-orange .duo-a { fill: #FFD19A; }
  :is(.menu-item, .case-plate):hover .icon-duo.c-orange .duo-b { fill: #F76B15; }
  :is(.menu-item, .case-plate):hover .icon-duo.c-purple .duo-a { fill: #EAD5F9; }
  :is(.menu-item, .case-plate):hover .icon-duo.c-purple .duo-b { fill: #8E4EC6; }
  :is(.menu-item, .case-plate):hover .icon-duo.c-green  .duo-a { fill: #C4E8D1; }
  :is(.menu-item, .case-plate):hover .icon-duo.c-green  .duo-b { fill: #30A46C; }
  :is(.menu-item, .case-plate):hover .icon-duo.c-pink   .duo-a { fill: #F6CEE7; }
  :is(.menu-item, .case-plate):hover .icon-duo.c-pink   .duo-b { fill: #D6409F; }
  :is(.menu-item, .case-plate):hover .icon-duo.c-teal   .duo-a { fill: #BFEEE4; }
  :is(.menu-item, .case-plate):hover .icon-duo.c-teal   .duo-b { fill: #12A594; }
}
/* In the mobile menu the icons are always colored */
.icon-duo.is-colored.c-blue   .duo-a { fill: #C2E5FF; }
.icon-duo.is-colored.c-blue   .duo-b { fill: #0090FF; }
.icon-duo.is-colored.c-orange .duo-a { fill: #FFD19A; }
.icon-duo.is-colored.c-orange .duo-b { fill: #F76B15; }
.icon-duo.is-colored.c-purple .duo-a { fill: #EAD5F9; }
.icon-duo.is-colored.c-purple .duo-b { fill: #8E4EC6; }
.icon-duo.is-colored.c-green  .duo-a { fill: #C4E8D1; }
.icon-duo.is-colored.c-green  .duo-b { fill: #30A46C; }
.icon-duo.is-colored.c-pink   .duo-a { fill: #F6CEE7; }
.icon-duo.is-colored.c-pink   .duo-b { fill: #D6409F; }
.icon-duo.is-colored.c-teal   .duo-a { fill: #BFEEE4; }
.icon-duo.is-colored.c-teal   .duo-b { fill: #12A594; }

/* Hamburger */
.nav__burger-wrap { display: block; }
@media (min-width: 640px) { .nav__burger-wrap { display: none; } }
.nav__burger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  border-radius: 8px;
}
.nav__burger span {
  position: absolute;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--foreground);
  transition: transform .2s var(--ease-out-quart);
}
.nav__burger span:first-child { transform: translateY(-4px) rotate(0deg); }
.nav__burger span:last-child { transform: translateY(4px) rotate(0deg); }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(0) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(0) rotate(-45deg); }

/* Mobile menu — full-screen white overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--background);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s var(--ease-out-quart);
}
.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transition: opacity .2s var(--ease-out-quart);
}
.mobile-menu__inner {
  padding: 64px 24px 32px;
  height: 100%;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .15s var(--ease-out-quart);
}
.mobile-menu.is-open .mobile-menu__inner {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .2s var(--ease-out-quart), transform .2s var(--ease-out-quart);
}
.mobile-menu__link {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--foreground);
  padding: 10px 16px;
  margin: 0 -16px 12px;
  border-radius: 8px;
  transition: background-color .15s ease;
}
.mobile-menu__link:active { background: var(--surface-hover); }
.mobile-menu__section {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.mobile-menu__label {
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -.005em;
  color: var(--ink-78);
  margin-bottom: 12px;
}
.mobile-menu__list { display: flex; flex-direction: column; }
.mobile-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  padding: 10px 16px;
  margin: 0 -16px;
  transition: background-color .15s ease;
}
.mobile-menu__item:active { background: var(--surface-hover); }
.mobile-menu__item .menu-item__tile { width: 44px; height: 44px; }
.mobile-menu__item .menu-item__tile svg { width: 24px; height: 24px; }
body.menu-locked { overflow: hidden; }

/* ============================================================
   SECTION FURNITURE
   ============================================================ */
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.section-label span {
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -.005em;
  color: var(--ink-78);
  white-space: nowrap;
}
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, .08);
}

/* ============================================================
   HOME
   ============================================================ */
.hero {
  padding: 32px var(--gutter);
}
@media (min-width: 640px) { .hero { padding: 64px var(--gutter) 56px; } }
.hero__inner { max-width: 60rem; }
.hero__lede { max-width: 700px; }

/* The manual break that keeps the name and the role on one line —
   only where the line actually fits; narrower screens wrap free. */
.hero-br { display: none; }
@media (min-width: 1100px) { .hero-br { display: inline; } }
.hero__title {
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -.01em;
  font-weight: 500;
  color: var(--ink-85);
  margin-bottom: 16px;
}
@media (min-width: 640px) { .hero__title { font-size: 36px; } }
.hero__title .spark {
  font-family: var(--sans);
  font-size: .55em;
  /* Poppy against the iris of the role and the green of the
     field — the complement doing what it did in his poppy fields. */
  color: #D9603B;
  vertical-align: .25em;
  letter-spacing: 0;
}

/* The heart beside the name — the same mark as the wordmark,
   scaled to the headline. Hovering the name (or the heart) makes
   it beat: the old wordmark's double-pulse, brought over. */
.hero__title .hero-heart {
  display: inline-block;
  width: .6em;
  height: auto;
}
.hero-em--name:hover + .hero-heart,
.hero-heart:hover {
  animation: heart-pulse 1.3s ease-in-out infinite;
}
@keyframes heart-pulse {
  0%, 100% { transform: scale(1); }
  15%      { transform: scale(1.15); }
  30%      { transform: scale(1); }
  45%      { transform: scale(1.15); }
  60%      { transform: scale(1); }
}

/* Hovering the city flies the W — off to the side, in the open
   air top-right of the headline, so it never covers the name.
   site.js relays the hover; the pop is the same spring the
   reference site gives its testimonial reactions. */
.city-pop { white-space: nowrap; }
.hero__inner { position: relative; }

/* The two hero pop-ups ride the cursor: hover the name and a
   photo springs up beside the pointer; hover the city and the W
   flies there, just as big. The wrapper handles the following
   (positioned by site.js, with a short trailing ease so it
   floats), the inner element handles the spring. */
.pop-follow {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 60;
  will-change: transform;
  transition: transform .15s var(--ease-out-cubic);
}
@media (min-width: 1100px) and (hover: hover) {
  .pop-follow { display: block; }
}
.chi-flag,
.me-pop {
  display: block;
  opacity: 0;
  transform: scale(.3) rotate(-8deg);
  transform-origin: left center;
  transition: transform 250ms var(--ease-out-quart), opacity 150ms ease;
}
.chi-flag.is-up, .me-pop.is-up {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.chi-flag {
  width: 320px;
  height: auto;
  /* drop-shadow (not box-shadow) so the shadow follows the
     rippling cloth, not the rectangle around it */
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .16)) drop-shadow(0 1px 3px rgba(0, 0, 0, .1));
}
.chi-flag.is-up { animation: flag-sway 2.4s ease-in-out .3s infinite; }
.me-pop {
  width: 240px;
  height: auto;
  border-radius: 14px;
  transform: scale(.3) rotate(12deg);
  box-shadow: 0 6px 32px rgba(0, 0, 0, .18), 0 1px 4px rgba(0, 0, 0, .08);
}
/* Lands tilted, like a photo handed to you rather than filed. */
.me-pop.is-up { transform: scale(1) rotate(3.5deg); }
/* On "More about me" the whole pack arrives: Hudson leans in from the
   right edge to give the page his side-eye, Bean beams up from the
   bottom left, and the two of us rise between them a beat later.
   Die-cut stickers; the drop-shadows follow their own edges. */
.pop-follow--right { left: auto; right: 0; top: 56%; }
.pop-follow--bl { top: auto; bottom: 0; left: 3vw; }
.pop-follow--bc { top: auto; bottom: 0; left: 40%; }
.hudson-pop {
  display: block;
  /* fluid so he stays clear of us on a narrower window */
  width: clamp(260px, 23vw, 340px);
  height: auto;
  /* 125%, not 110% — the -7deg tilt swings his top corner back
     toward the edge, and at 110% he cleared it by a single pixel. */
  transform: translateX(125%) rotate(-7deg);
  transform-origin: right center;
  transition: transform .45s var(--ease-out-quart);
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .22)) drop-shadow(0 1px 4px rgba(0, 0, 0, .12));
}
/* Lands with a slight tilt, the way you lean around a doorframe. */
.hudson-pop.is-up {
  transform: translateX(13%) rotate(-2.5deg);
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1);
}
.bean-pop {
  display: block;
  width: 330px;
  height: auto;
  transform: translateY(122%) rotate(6deg);
  transform-origin: bottom center;
  transition: transform .45s var(--ease-out-quart);
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .22)) drop-shadow(0 1px 4px rgba(0, 0, 0, .12));
}
.bean-pop.is-up {
  transform: translateY(24%) rotate(-3deg);
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1);
}
/* Us, wider than a dog and tilted the other way, landing last so the
   pack arrives as three beats instead of one. The width is fluid so
   that on a narrower window we stay clear of Hudson on the right. */
.us-pop {
  display: block;
  width: clamp(300px, 29vw, 430px);
  height: auto;
  transform: translateY(112%) rotate(-5deg);
  transform-origin: bottom center;
  transition: transform .45s var(--ease-out-quart);
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .22)) drop-shadow(0 1px 4px rgba(0, 0, 0, .12));
}
.us-pop.is-up {
  transform: translateY(30%) rotate(2.5deg);
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) 90ms;
}
@keyframes flag-sway {
  0%, 100% { rotate: 0deg; }
  50%      { rotate: 1.5deg; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-em--name:hover + .hero-heart, .hero-heart:hover { animation: none; }
  .chi-flag, .me-pop { transition: opacity 150ms ease; transform: none; animation: none !important; }
  .hudson-pop, .bean-pop, .us-pop { transition: none !important; animation: none !important; }
}

/* The four emphasised things — name, role, city, field — each in
   its own petal gradient, clipped to the type: the name in the
   crushed-brick pink of the house warming into poppy, the role in
   iris, the city in cerulean water, the field in the green of the
   door. Engines without clip support keep the charcoal. */
.hero-em { font-style: italic; font-weight: 700; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-em {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .hero-em--name  { background-image: linear-gradient(100deg, #A64A3F, #D9603B); }
  .hero-em--role  { background-image: linear-gradient(100deg, #5D5192, #7B6FAE); }
  .hero-em--city  { background-image: linear-gradient(100deg, #3E688F, #5E87AE); }
  .hero-em--field { background-image: linear-gradient(100deg, #217251, #2E9169); }
}
.hero__lede {
  font-size: 15px;
  font-weight: 450;
  line-height: 1.45rem;
  letter-spacing: -.005em;
  color: var(--ink-80);
}

/* Company tags — the employers in the lede as quiet links: a low
   underline and a small outbound arrow, nothing chip-shaped. */
.co-tag {
  font-weight: 500;
  color: var(--ink-80);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, .22);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.co-tag:hover {
  /* The name's rose-brick → poppy, borrowed for the hover. */
  color: #D9603B;
  background-image: linear-gradient(100deg, #A64A3F, #D9603B);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration-color: rgba(217, 96, 59, .6);
}

/* ---------- Hero load-in ----------
   site.js splits the rendered title into its visual lines; each
   line rises out of its own clipping row, the spikes spin in
   after their line lands, the stars unskew last, and the lede
   fades up at the end. Armed by an inline head script
   (html.js-rise) so nothing is ever hidden without scripting,
   and skipped under reduced motion.

   :where() keeps the from-state at low specificity so the
   settled rules below can outrank it — written plainly as
   `html.js-rise ...` it wins instead and the type never moves. */
:where(html.js-rise) .hero__title,
:where(html.js-rise) .hero__lede { visibility: hidden; }
.hero.is-split .hero__title,
.hero.is-split .hero__lede { visibility: visible; }

.hero__line {
  display: block;
  overflow: hidden;
  /* room for descenders inside the clip row */
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.hero__line-inner { display: block; }
.hero__title .spark { display: inline-block; }

:where(html.js-rise) .hero__line-inner { translate: 0 115%; }
:where(html.js-rise) .hero__lede { opacity: 0; translate: 0 12px; }
:where(html.js-rise) .hero-heart { translate: 0 100%; scale: 0; rotate: 0deg; }
:where(html.js-rise) .spark--spike { scale: 0; rotate: y -720deg; }
:where(html.js-rise) .spark--star { transform: skew(-45deg, -45deg); }

.hero.is-lit .hero__line-inner {
  translate: 0 0;
  transition: translate 520ms var(--ease-out-quint) var(--d, 0ms);
}
.hero.is-lit .hero__lede {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity .6s ease var(--ld, 0ms),
    translate .6s var(--ease-out-quint) var(--ld, 0ms);
}
.hero.is-lit .hero-heart {
  translate: 0 0;
  scale: 1;
  rotate: 360deg;
  transition:
    translate 400ms ease-out var(--hd, 0ms),
    scale 300ms ease calc(var(--hd, 0ms) + 150ms),
    rotate 1000ms ease-in-out calc(var(--hd, 0ms) + 150ms);
}
.hero.is-lit .spark--spike {
  scale: 1;
  rotate: y 0deg;
  transition:
    scale .5s ease var(--sd, 600ms),
    rotate .5s cubic-bezier(.175, .885, .32, 1.275) var(--sd, 600ms);
}
.hero.is-lit .spark--star {
  transform: skew(0deg, 0deg);
  transition: transform .5s ease var(--sd, 2000ms);
}

@media (prefers-reduced-motion: reduce) {
  .hero__line-inner, .hero-heart, .spark--spike {
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    transition: none !important;
  }
  .spark--star { transform: none !important; transition: none !important; }
  .hero__line { overflow: visible; }
}

/* Selected Work — a 2×2 of metric plates */
.work-grid { padding: 0 var(--gutter) 80px; }
.work-grid__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) { .work-grid__grid { grid-template-columns: repeat(2, 1fr); } }
.case-plate {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 8px;
  padding: 24px;
  transition: background-color .15s ease;
}
.case-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: var(--shadow-flush);
}
/* On hover the surface warms toward the card's own color
   family — the palest tint of the icon's hue, at the same
   lightness as the resting grey, so the card blushes rather
   than changes clothes. */
.case-plate:hover { background: var(--surface-hover); }
.case-plate--orange:hover { background: #FBF1E9; }
.case-plate--blue:hover   { background: #EDF5FB; }
.case-plate--purple:hover { background: #F6F1FA; }
.case-plate--pink:hover   { background: #FBF1F7; }
.case-plate__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.case-plate__head .menu-item__tile { width: 44px; height: 44px; }
.case-plate__head .menu-item__tile svg { width: 24px; height: 24px; }
.case-plate__kicker {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.case-plate__cta {
  margin-left: auto;
  font-size: 12px;
  font-weight: 450;
  color: var(--ink-40);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s var(--ease-out-quart);
}
.case-plate:hover .case-plate__cta { opacity: 1; transform: translateX(0); }
@media (hover: none) { .case-plate__cta { opacity: 1; transform: none; } }
.case-plate__name {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink-85);
  margin-bottom: 8px;
}
/* On hover the name lights up in the icon's color family: the
   gradient is always painted beneath the text, and the solid ink
   fill fades to transparent to reveal it. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .case-plate__name {
    display: inline-block;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: var(--ink-85);
    transition: -webkit-text-fill-color .25s ease;
  }
  .case-plate--orange .case-plate__name { background-image: linear-gradient(100deg, #C2560F, #F76B15); }
  .case-plate--blue   .case-plate__name { background-image: linear-gradient(100deg, #0072CC, #0090FF); }
  .case-plate--purple .case-plate__name { background-image: linear-gradient(100deg, #7239A8, #8E4EC6); }
  .case-plate--pink   .case-plate__name { background-image: linear-gradient(100deg, #B32E85, #D6409F); }
  .case-plate:hover .case-plate__name { -webkit-text-fill-color: transparent; }
}
.case-plate__story p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-65);
  margin-bottom: 20px;
  max-width: 46ch;
}
/* Ledger rows: one metric per line, label left, figure right
   on a shared baseline — set like the financial statements the
   copy keeps invoking. */
.case-plate__stats {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, .06);
}
.case-plate__stats > div {
  display: flex;
  flex-direction: row-reverse; /* markup is number-first; the ledger reads label-first */
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
}
.case-plate__stats > div + div { border-top: 1px solid rgba(0, 0, 0, .05); }
.case-plate__stats span {
  font-size: 14px;
  font-weight: 550;
  color: var(--ink-85);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.case-plate__stats em {
  font-style: normal;
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 500;
  color: var(--ink-40);
}
.work-grid__more {
  margin-top: 24px;
  font-size: 13px;
}

/* Quote cards ("From the Floor") */
.quotes { padding: 0 var(--gutter) 80px; }
.quotes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) { .quotes__grid { grid-template-columns: repeat(3, 1fr); } }
.quote-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 8px;
  padding: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-flush);
}
.quote-card p {
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -.005em;
  color: var(--ink-65);
  margin-bottom: 20px;
}
.quote-card cite {
  font-style: normal;
  display: block;
  font-size: 14px;
  font-weight: 550;
  color: var(--ink-85);
  line-height: 1.25;
}
.quote-card .quote-card__role {
  font-size: 13px;
  color: var(--ink-40);
}

/* Writing card */
.writing-strip { padding: 0 var(--gutter) 80px; }
.writing-card {
  display: block;
  border-radius: 8px;
  padding: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-flush);
  transition: background-color .15s ease;
  max-width: 700px;
}
.writing-card:hover { background: var(--surface-hover); }
.writing-card__kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-30);
  font-weight: 500;
  margin-bottom: 12px;
}
.writing-card__title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink-85);
  margin-bottom: 8px;
}
.writing-card__dek {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-65);
  margin-bottom: 16px;
  max-width: 56ch;
}
.writing-card__more { font-size: 13px; font-weight: 450; color: var(--ink-40); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: 32px var(--gutter);
  border-top: 1px solid var(--border);
}
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  font-size: 13px;
  color: var(--ink-50);
}
@media (min-width: 640px) {
  .footer__inner { flex-direction: row; align-items: center; }
}
.footer__inner a.text-link { transition: color .15s ease; }
.footer__inner a.text-link:hover { color: rgba(0, 0, 0, .85); }
.footer__social { display: flex; align-items: center; gap: 12px; }
.footer__social a {
  color: var(--ink-40);
  transition: color .15s ease;
  display: block;
}
.footer__social a:hover { color: rgba(0, 0, 0, .8); }
.footer__social svg { display: block; }

/* ============================================================
   ARTICLE PAGES (case studies, about, work index)
   ============================================================ */
.article {
  max-width: 48rem;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
@media (min-width: 640px) { .article { padding-top: 80px; } }

.article__kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-30);
  font-weight: 500;
  margin-bottom: 12px;
}
.article__title {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink-85);
  margin-bottom: 16px;
}
@media (min-width: 640px) { .article__title { font-size: 32px; } }
.article__intro {
  font-size: 15px;
  font-weight: 450;
  line-height: 1.45rem;
  letter-spacing: -.005em;
  color: var(--ink-80);
}

/* Meta grid under a case-study header */
.meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 32px;
  row-gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, .06);
}
@media (min-width: 640px) { .meta-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.meta-grid dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-30);
  font-weight: 500;
  margin-bottom: 2px;
}
.meta-grid dd {
  font-size: 14px;
  font-weight: 450;
  line-height: 1.45;
  color: var(--ink-65);
  white-space: pre-line;
}

/* Sections */
.cs-section { padding-top: 64px; scroll-margin-top: 96px; }
.cs-section .section-label { margin-bottom: 16px; }
.cs-section h2 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--ink-85);
  margin-bottom: 16px;
}
.cs-section h3 {
  font-size: 15px;
  font-weight: 550;
  color: var(--ink-85);
  margin-top: 8px;
}
.cs-flow { display: flex; flex-direction: column; gap: 14px; }
.cs-flow p {
  font-size: 15px;
  font-weight: 450;
  line-height: 1.45rem;
  letter-spacing: -.005em;
  color: var(--ink-80);
}
.cs-flow ul { display: flex; flex-direction: column; gap: 6px; }
.cs-flow ul li {
  font-size: 15px;
  line-height: 1.45rem;
  color: var(--ink-80);
  padding-left: 18px;
  position: relative;
}
.cs-flow ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .25);
}

/* Stat cards */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 16px 0;
}
@media (min-width: 640px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .stat-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) { .stat-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow-raised);
}
.stat-card__num {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-85);
  margin-bottom: 4px;
}
.stat-card__label {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-50);
}

/* Figures & grey image placeholders */
.cs-figure { margin: 4px 0; }
.cs-figure figcaption {
  font-size: 13px;
  color: var(--ink-50);
  margin-top: 8px;
}
.ph {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
}
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: var(--shadow-flush);
}
.ph--tall { aspect-ratio: 4 / 3; }
.ph--wide { aspect-ratio: 21 / 9; }
.ph span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .35);
  text-align: center;
  padding: 0 24px;
}

/* Diagram figures (inline SVGs on the surface) */
.diagram {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  padding: 32px 20px;
}
@media (min-width: 640px) { .diagram { padding: 40px 32px; } }
.diagram::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: var(--shadow-flush);
}
.diagram svg { width: 100%; height: auto; display: block; color: var(--ink-80); }

/* Diagram entrance animation hooks (ported from the old pages) */
.d-fade { opacity: 0; transition: opacity .6s var(--ease-out-cubic); }
.d-line, .d-bar { transition: stroke-dashoffset .8s var(--ease-out-cubic), transform .8s var(--ease-out-cubic); }
.d-bar { transform: scaleX(0); transform-origin: left; }
.d-bar--delay { transition-delay: .25s; }
.d-bar--delay-2 { transition-delay: .5s; }
.d-bar--delay-3 { transition-delay: .75s; }
.d-fade--late { transition-delay: 1.1s; }
[data-diagram-reveal].is-revealed .d-fade { opacity: 1; }
[data-diagram-reveal].is-revealed .d-line { stroke-dashoffset: 0 !important; }
[data-diagram-reveal].is-revealed .d-bar { transform: scaleX(1); }

/* Blockquotes */
.cs-quote {
  margin: 16px 0;
  padding: 4px 0 4px 20px;
  border-left: 1.5px solid rgba(0, 0, 0, .08);
}
.cs-quote p {
  font-size: 15px;
  font-weight: 450;
  line-height: 1.6;
  font-style: italic;
  color: var(--ink-65);
}
.cs-quote cite {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 450;
  font-style: normal;
  color: var(--ink-30);
}

/* Case-study footer nav */
.cs-footnav {
  padding: 32px 0;
  margin-top: 32px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cs-footnav a { font-size: 13px; color: var(--ink-55); }

/* ---------- TOC rail (≥1280px) ---------- */
.toc {
  display: none;
  position: fixed;
  left: 80px;
  top: 9.25rem;
  width: 176px;
}
@media (min-width: 1280px) { .toc { display: block; } }
.toc__inner { display: flex; gap: 12px; }
.toc__track {
  position: relative;
  width: 1.5px;
  border-radius: 1px;
  background: rgba(0, 0, 0, .08);
  flex-shrink: 0;
}
.toc__thumb {
  position: absolute;
  left: 0;
  width: 1.5px;
  height: 12px;
  border-radius: 1px;
  background: rgba(0, 0, 0, .8);
  transition: transform .26s var(--ease-out-cubic);
  will-change: transform;
}
.toc ul { display: flex; flex-direction: column; }
.toc a {
  display: block;
  font-size: 13px;
  padding: 3px 0;
  color: var(--ink-30);
  transition: color .2s var(--ease-out-expo);
}
.toc a.is-active { color: var(--ink-80); font-weight: 550; }

/* ---------- Password gate ---------- */
.gate {
  margin-top: 64px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-flush);
  padding: 40px 24px;
  text-align: center;
}
.gate__mark { width: 22px; height: 22px; margin: 0 auto 12px; color: var(--ink-40); }
.gate__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 500;
  color: var(--ink-30);
  margin-bottom: 8px;
}
.gate__title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink-85);
  margin-bottom: 12px;
}
.gate__copy {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-65);
  max-width: 46ch;
  margin: 0 auto 20px;
}
.gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-65);
  background: #fff;
  box-shadow: var(--shadow-raised);
  transition: color .15s ease, transform .1s;
}
.btn:hover { color: var(--ink-85); }
.btn:active { transform: scale(.97); }
.btn--primary {
  background: rgba(0, 0, 0, .85);
  color: #fff;
  box-shadow: none;
}
.btn--primary:hover { color: #fff; background: rgba(0, 0, 0, .75); }
.gate__or { font-size: 12px; color: var(--ink-30); margin-bottom: 12px; }
.gate__form {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.gate__input {
  height: 32px;
  width: 180px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  background: #fff;
  box-shadow: var(--shadow-flush);
  font: inherit;
  font-size: 13px;
  color: var(--ink-85);
}
.gate__input::placeholder { color: var(--ink-30); }
.gate__error {
  display: none;
  font-size: 13px;
  color: #c0392b;
  margin-top: 10px;
}
.gate__error.is-visible { display: block; }
.gate__unlocked { display: none; font-size: 13px; color: var(--ink-40); margin-top: 10px; }

.cs-details { display: none; }
body.cs-unlocked .cs-details { display: block; }
body.cs-unlocked .gate__form, body.cs-unlocked .gate__or, body.cs-unlocked .gate__error { display: none; }
body.cs-unlocked .gate__unlocked { display: block; }

.cs-unlocked-note {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 500;
  color: var(--ink-30);
  padding-top: 48px;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-hero { overflow: hidden; }
.about-hero__photo {
  display: none;
  float: right;
  margin: 0 0 16px 32px;
  width: 38%;
  border-radius: 8px;
  object-fit: cover;
}
@media (min-width: 640px) { .about-hero__photo { display: block; } }
.about-hero__photo--mobile {
  display: block;
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  margin-bottom: 24px;
}
@media (min-width: 640px) { .about-hero__photo--mobile { display: none; } }
.about-hero h1 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--ink-85);
  margin-bottom: 16px;
}
@media (min-width: 640px) { .about-hero h1 { font-size: 28px; } }
.about-hero p { margin-bottom: 16px; }
.about-hero p:last-child { margin-bottom: 0; }

.photo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .photo-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.photo-grid figure { transition: transform .3s ease-out; }
@media (hover: hover) { .photo-grid figure:hover { transform: translateY(-4px); } }
.photo-grid .photo-frame {
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.photo-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.photo-grid figcaption {
  font-size: 13px;
  color: var(--ink-40);
  margin-top: 8px;
  line-height: 1.5;
}

/* Experience / volunteering-style rows */
.rows { display: flex; flex-direction: column; }
.row {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 32px;
  row-gap: 4px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
}
.row:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 640px) { .row { grid-template-columns: 160px 160px 1fr; } }
.row__span { font-size: 14px; color: var(--ink-40); }
.row__org { font-size: 14px; font-weight: 550; color: var(--ink-85); }
.row__body { font-size: 15px; line-height: 1.5; color: var(--ink-80); }
.row__body .row__role { color: var(--ink-45); }

/* ============================================================
   WORK INDEX
   ============================================================ */
.work-list { display: flex; flex-direction: column; gap: 4px; margin: 0 -12px; }
.work-list .menu-item { padding: 14px 12px; }
.work-list .menu-item__meta {
  display: none;
  font-size: 13px;
  color: var(--ink-40);
  margin-left: auto;
  white-space: nowrap;
  padding-left: 16px;
}
@media (min-width: 640px) { .work-list .menu-item__meta { display: block; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .highlight { transition: none; background-size: 100% 100%; }
  .d-fade, .d-line, .d-bar { transition: none; opacity: 1; transform: none; }
  [data-diagram-reveal] .d-line { stroke-dashoffset: 0 !important; }
  .nav, .plate__reveal-inner, .mobile-menu, .mobile-menu__inner { transition: none; }
}