/* Design tokens: every colour, the type and spacing scales, the grid, the header sizes, radii and
   motion timings. A size that belongs to one component only (an arrowhead, the route's numbers)
   stays with that component in site.css.
   Sizes ramp linearly from the Mix's 390 px phone artboard to its 1280 px desktop artboard and
   hold outside that range: calc(A + (B - A) * (100vw - 390px) / 890) is A at 390 and B at 1280.
   The slab face is --font-slab. build.js reads it to pick the Google Fonts request, so switching
   to Roboto Slab is this one line. */
:root {
  --green: #006C31;
  --green-tint: #D3E6DA;
  --orange: #D33E15;
  --orange-deep: #B5330F;
  --sage: #63A581;
  --paper: #F2EFEC;
  --white: #FFFFFF;
  --ink: #393737;
  --text: #454444;
  --deep: #1C1C1C;
  --rule: #D6D0CB;
  --line: #E3DEDA;
  --line-strong: #CBC4BE;
  --note-bg: #FFF1A6;
  --note-border: #6E5600;
  --note-text: #3B3000;

  --font-slab: "Zilla Slab", Georgia, serif;
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  --h1-size: clamp(40px, calc(40px + 60 * (100vw - 390px) / 890), 100px);
  --h1-line: clamp(44px, calc(44px + 52 * (100vw - 390px) / 890), 96px);
  --h2-size: clamp(32px, calc(32px + 28 * (100vw - 390px) / 890), 60px);
  --h2-line: clamp(40px, calc(40px + 24 * (100vw - 390px) / 890), 64px);
  --h3-size: clamp(24px, calc(24px + 6 * (100vw - 390px) / 890), 30px);
  --h3-line: clamp(32px, calc(32px + 8 * (100vw - 390px) / 890), 40px);
  --index-size: clamp(24px, calc(24px + 12 * (100vw - 390px) / 890), 36px);
  --index-line: clamp(32px, calc(32px + 8 * (100vw - 390px) / 890), 40px);
  --lead-size: clamp(24px, calc(24px + 16 * (100vw - 390px) / 890), 40px);
  --lead-line: clamp(32px, calc(32px + 16 * (100vw - 390px) / 890), 48px);
  --step-size: clamp(22px, calc(22px + 4 * (100vw - 390px) / 890), 26px);
  --body-size: clamp(18px, calc(18px + 1 * (100vw - 390px) / 890), 19px);
  --body-line: clamp(28px, calc(28px + 4 * (100vw - 390px) / 890), 32px);
  --small-size: clamp(16px, calc(16px + 1 * (100vw - 390px) / 890), 17px);
  --caption-size: clamp(16px, calc(16px + 1 * (100vw - 390px) / 890), 17px);
  --control-size: 17px;
  --nav-size: 16px;
  --fine-size: 15px;
  --tracking-caps: 0.1em;

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-section: clamp(32px, calc(32px + 48 * (100vw - 390px) / 890), 80px);
  --space-block: clamp(24px, calc(24px + 24 * (100vw - 390px) / 890), 48px);
  --space-stack: clamp(16px, calc(16px + 8 * (100vw - 390px) / 890), 24px);
  --space-actions: clamp(24px, calc(24px + 8 * (100vw - 390px) / 890), 32px);

  /* The columns start at 1024 px wide (media queries cannot read custom properties, so that
     number lives in each media query). */
  --content-half: 576px;
  --gutter: clamp(24px, calc(24px + 40 * (100vw - 390px) / 890), 64px);
  --gap: 24px;

  --stripe: 6px;
  --header-row: 68px;
  --nav-band: 52px;
  --logo-h: 36px;
  --control-h: 56px;
  --target: 48px;

  --hero-h: clamp(260px, max(calc(260px + 260 * (100vw - 390px) / 890), 40.625vw), 640px);
  --bleed-h: clamp(200px, max(calc(200px + 240 * (100vw - 390px) / 890), 34.375vw), 540px);

  --radius: 0;
  --radius-round: 50%;

  --reveal-lift: 24px;
  --reveal-dur: 0.7s;
  --ease-travel: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-ui: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-ui: 0.2s;
  --push-in-dur: 9s;
}

@media (min-width: 1024px) {
  :root {
    --header-row: 80px;
    --logo-h: 44px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 3px; }

.on-white, .on-paper, body { --band-bg: var(--white); --heading: var(--ink); --body: var(--text); --accent: var(--orange-deep); --focus: var(--ink); }
.on-white { background: var(--white); }
.on-paper { background: var(--paper); --band-bg: var(--paper); }
.on-green { background: var(--green); --band-bg: var(--green); --heading: var(--white); --body: var(--green-tint); --accent: var(--white); --focus: var(--white); }
.on-orange { background: var(--orange); --band-bg: var(--orange); --heading: var(--white); --body: var(--white); --accent: var(--white); --focus: var(--white); }
.on-sage { background: var(--sage); --band-bg: var(--sage); --heading: var(--deep); --body: var(--deep); --accent: var(--deep); --focus: var(--deep); }

.band {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start] min(var(--content-half), 50% - var(--gutter))
    [center] min(var(--content-half), 50% - var(--gutter))
    [content-end] minmax(var(--gutter), 1fr) [full-end];
}
.band > * { grid-column: content; min-width: 0; }
.band > .full { grid-column: full; }
.section { padding-block: var(--space-section); }

@media (min-width: 1024px) {
  .cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
}

h1, h2, h3 { color: var(--heading); font-family: var(--font-slab); text-wrap: balance; }
h1 { font-size: var(--h1-size); line-height: var(--h1-line); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--h2-size); line-height: var(--h2-line); font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: var(--h3-size); line-height: var(--h3-line); font-weight: 600; }
p { color: var(--body); text-wrap: pretty; }
p + p { margin-top: var(--space-16); }
.lead { font-family: var(--font-slab); font-weight: 500; font-size: var(--lead-size); line-height: var(--lead-line); color: var(--heading); }
.small { font-size: var(--small-size); line-height: 24px; }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 1023px) {
  p { max-width: 40em; }
}

.eyebrow {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  margin-bottom: var(--space-stack);
  color: var(--accent);
  font-size: var(--fine-size);
  line-height: 24px;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.eyebrow::before { content: ""; flex: none; width: 32px; height: 3px; margin-top: 10px; background: var(--accent); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::before { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  padding: var(--space-12) var(--space-24);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--control-size);
  line-height: 24px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui), transform var(--dur-ui) var(--ease-ui);
}
.btn--primary { background: var(--orange); border-color: var(--orange); color: var(--white); }
.btn--primary:hover { background: var(--orange-deep); border-color: var(--orange-deep); }
.btn--outline { border-color: var(--heading); color: var(--heading); }
.btn--outline:hover { background: var(--heading); color: var(--band-bg); }
.btn--inverse { background: var(--white); border-color: var(--white); color: var(--band-bg); }
.btn--inverse:hover { background: var(--paper); border-color: var(--paper); }
.btn--small { min-height: var(--target); padding: 0 20px; border-width: 1px; font-size: var(--nav-size); line-height: 22px; }

.link {
  position: relative;
  color: var(--accent);
  font-size: var(--control-size);
  line-height: 24px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: text-decoration-thickness var(--dur-ui) var(--ease-ui);
}
.link::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--target); margin-top: calc(var(--target) / -2); }
.link:hover { text-decoration-thickness: 3px; }

.note {
  display: inline-block;
  padding: 0 6px;
  border: 1px dashed var(--note-border);
  background: var(--note-bg);
  color: var(--note-text);
  font-family: var(--font-mono);
  font-size: var(--fine-size);
  line-height: 22px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: var(--space-8);
  left: var(--gutter);
  z-index: 30;
  padding: var(--space-12) var(--space-16);
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
}
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.concept {
  padding: 9px var(--gutter);
  background: var(--ink);
  color: var(--white);
  font-size: var(--fine-size);
  line-height: 22px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
}

main:focus { outline: none; }
.site-header { position: relative; z-index: 20; background: var(--white); border-top: var(--stripe) solid var(--sage); }
.site-header__row { display: flex; align-items: center; justify-content: space-between; height: var(--header-row); }
.logo { display: flex; align-items: center; min-height: var(--target); line-height: 0; }
.logo img { width: auto; height: var(--logo-h); }
.site-header__actions { display: none; }
.lang { color: var(--ink); font-size: var(--nav-size); line-height: 24px; font-weight: 500; text-decoration: none; }
.lang:hover { text-decoration: underline; text-underline-offset: 5px; }

.site-nav { display: none; }

.menu > summary {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--target);
  padding: 0 var(--space-16);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--nav-size);
  line-height: 24px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu__close, .menu[open] .menu__open { display: none; }
.menu[open] .menu__close { display: inline; }
.menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: var(--space-8) var(--gutter) var(--space-24);
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line-strong);
}
.menu__panel li a {
  display: flex;
  align-items: center;
  min-height: var(--target);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--control-size);
  line-height: 24px;
  font-weight: 500;
  text-decoration: none;
}
.menu__panel li a[aria-current="page"] { color: var(--orange-deep); font-weight: 600; }
.menu__extra { display: flex; flex-direction: column; gap: var(--space-16); margin-top: var(--space-24); }
.menu__extra .lang { display: flex; align-items: center; min-height: var(--target); }

@media (max-width: 767px) {
  .site-header { border-bottom: 1px solid var(--line); }
}

@media (min-width: 768px) {
  .menu { display: none; }
  .site-header__actions { display: flex; align-items: center; gap: var(--space-24); }
  .site-nav { display: grid; background: var(--paper); }
  .site-nav ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: clamp(24px, calc(24px + 16 * (100vw - 1024px) / 256), 40px); min-height: var(--nav-band); }
  .site-nav a {
    display: block;
    padding: 12px 0;
    border-bottom: 3px solid transparent;
    color: var(--ink);
    font-size: var(--nav-size);
    line-height: 24px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui);
  }
  .site-nav a:hover { border-bottom-color: var(--orange); }
  .site-nav a[aria-current="page"] { color: var(--orange-deep); font-weight: 600; border-bottom-color: currentColor; }
}

.site-footer { border-top: 3px solid var(--green); padding-block: clamp(32px, calc(32px + 32 * (100vw - 390px) / 890), 64px) var(--space-48); }
.footer-top, .footer-pages { display: flex; flex-direction: column; gap: var(--space-32); }
.footer-pages { margin-top: var(--space-48); padding-top: var(--space-32); border-top: 1px solid var(--rule); }
.footer-brand img { width: auto; height: 54px; }
.footer-brand p { margin-top: var(--space-16); font-size: var(--small-size); line-height: 24px; }
.footer-head { margin-bottom: var(--space-8); color: var(--orange-deep); font-family: var(--font-sans); font-size: var(--fine-size); line-height: 24px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.footer-mail { display: flex; align-items: center; min-height: var(--target); margin-block: calc((32px - var(--target)) / 2); color: var(--green); font-family: var(--font-slab); font-size: 21px; line-height: 32px; font-weight: 600; overflow-wrap: anywhere; }
.footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.footer-list a {
  display: flex;
  align-items: center;
  min-height: var(--target);
  color: var(--ink);
  font-size: var(--control-size);
  line-height: 24px;
  text-decoration: none;
}
.footer-list a:hover { text-decoration: underline; text-underline-offset: 5px; }
.footer-follow .footer-list { display: flex; flex-wrap: wrap; column-gap: var(--space-24); }
.footer-base { margin-top: var(--space-48); padding-top: var(--space-16); border-top: 2px solid var(--ink); font-size: var(--fine-size); line-height: 24px; }

@media (min-width: 1024px) {
  .footer-top, .footer-pages { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--space-32); align-items: start; }
  .footer-top > *, .footer-pages > * { grid-column: span 4; }
  .footer-brand img { height: 64px; }
  .footer-mail { font-size: 22px; }
  .footer-list a { min-height: 0; line-height: 28px; }
  .footer-list li + li { margin-top: var(--space-8); }
  .footer-follow .footer-list { display: block; }
}

.notfound h1 { font-size: var(--h2-size); line-height: var(--h2-line); }
.notfound h1 + p { margin-top: var(--space-stack); }
.notfound__links { display: flex; flex-wrap: wrap; gap: var(--space-24) var(--space-32); margin-block: var(--space-block); }

h2.eyebrow { font-family: var(--font-sans); }
h2:not(.eyebrow) + p, h2 + .index, h2 + .steps, h2 + .statement, h2 + .pair { margin-top: var(--space-block); }
.after { margin-top: var(--space-block); font-size: var(--control-size); line-height: 24px; }
.wide { display: none; }

.actions { display: flex; flex-direction: column; gap: var(--space-16); margin-top: var(--space-actions); }
.actions .btn { width: 100%; }

@media (min-width: 768px) and (max-width: 1023px) {
  .actions { flex-direction: row; flex-wrap: wrap; }
  .actions .btn { width: auto; }
}

@media (min-width: 1024px) {
  .wide { display: inline; }
  .actions--fit { align-items: flex-start; }
  .actions--fit .btn { width: auto; }
}

.hero__frame { height: var(--hero-h); overflow: hidden; }
.hero__photo { width: 100%; height: 100%; object-fit: cover; }
.hero__aside { margin-top: var(--space-24); }
@media (min-width: 1024px) {
  .hero__grid { align-items: baseline; }
  .hero__title { grid-column: 1 / span 7; }
  .hero__aside { grid-column: 9 / span 4; margin-top: 0; }
}

.steps { --num: 50px; }
.steps__step { display: flex; gap: var(--space-16); }
.steps__mark { display: flex; flex-direction: column; align-items: center; flex: none; width: var(--num); }
.steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--num);
  height: var(--num);
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-slab);
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
}
.steps__line { position: relative; flex-grow: 1; width: 3px; margin: var(--space-8) 0 calc(var(--space-8) + 12px); background: var(--orange); }
.steps__line::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  margin-left: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 12px solid var(--orange);
}
.steps__body { min-width: 0; padding: var(--space-8) 0 var(--space-24); }
.steps__step:last-child .steps__body { padding-bottom: 0; }
.steps h3 { font-size: var(--step-size); line-height: 32px; font-weight: 700; }
.steps p { margin-top: var(--space-8); font-size: 17px; line-height: clamp(26px, calc(26px + 2 * (100vw - 390px) / 890), 28px); }

@media (min-width: 1024px) {
  .steps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .steps__step { display: block; grid-column: span 4; }
  .steps__mark { flex-direction: row; width: auto; }
  .steps__line { width: auto; height: 3px; margin: 0 14px 0 var(--space-24); }
  .steps__line::after {
    left: auto;
    right: -14px;
    bottom: auto;
    top: 50%;
    margin: -9px 0 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 14px solid var(--orange);
    border-right: 0;
  }
  .steps__body { padding: var(--space-24) var(--space-24) 0 0; }
}

.about__aside { --rule-color: var(--green); margin-top: var(--space-24); padding-top: var(--space-24); }
@media (min-width: 1024px) {
  .about { align-items: end; align-items: last baseline; }
  .about__main { grid-column: 1 / span 8; }
  .about__aside { grid-column: 9 / span 4; margin-top: 0; }
}

.split__photo { width: 100%; aspect-ratio: 390 / 220; max-height: 480px; object-fit: cover; }
.split h2 + p { margin-top: var(--space-stack); }
@media (min-width: 1024px) {
  .split { position: relative; }
  .split__frame { position: absolute; top: 0; left: 0; width: 50%; height: 100%; }
  .split__photo { height: 100%; max-height: none; aspect-ratio: auto; }
  .split__text { grid-column: 8 / span 5; }
}

.index__row { padding-block: var(--space-16); border-top: 1px solid var(--rule); }
.index__row--more { padding-bottom: 0; }
.index__row h3 + p { margin-top: var(--space-8); }
@media (min-width: 1024px) {
  .index__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; }
  .index h3 { grid-column: 1 / span 4; font-size: var(--index-size); line-height: var(--index-line); }
  .index__row p { grid-column: 5 / span 8; }
  .index__row h3 + p { margin-top: 0; }
}

.bleed__photo { width: 100%; height: var(--bleed-h); object-fit: cover; }
.bleed figcaption { padding-top: var(--space-16); }
figcaption { color: var(--heading); font-family: var(--font-slab); font-style: italic; font-weight: 500; font-size: var(--caption-size); line-height: 24px; }
figure figcaption { margin-top: var(--space-8); }
.bleed figcaption { margin-top: 0; }

.station { padding-top: clamp(32px, calc(32px + 16 * (100vw - 390px) / 890), 48px); }
.station__text { margin-top: var(--space-16); }
.station__text .after { margin-top: var(--space-24); }
@media (min-width: 1024px) {
  .station__head { align-items: end; align-items: last baseline; }
  .station__title { grid-column: 1 / span 5; }
  .station__text { grid-column: 7 / span 6; margin-top: 0; }
}

.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16) var(--space-12); margin-top: var(--space-block); }
.photo-grid img { width: 100%; aspect-ratio: 165 / 104; object-fit: cover; }
.photo-grid__wide { grid-column: span 2; }
.photo-grid__wide img { aspect-ratio: 342 / 144; }
@media (min-width: 1024px) {
  .photo-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-32) var(--gap); }
  .photo-grid > figure { grid-column: span 4; }
  .photo-grid > .photo-grid__big { grid-column: span 6; }
  .photo-grid img, .photo-grid__wide img { aspect-ratio: 368 / 192; }
  .photo-grid__big img { aspect-ratio: 564 / 288; }
}

.statement { color: var(--heading); font-family: var(--font-slab); font-weight: 500; font-size: var(--lead-size); line-height: var(--lead-line); }
.research__cols { margin-top: var(--space-block); }
.research__actions { margin-top: var(--space-32); }
@media (min-width: 1024px) {
  .statement { max-width: calc(11 * (100% - 11 * var(--gap)) / 12 + 10 * var(--gap)); }
  .research__cols > p { grid-column: span 6; }
  .research__cols > p + p { margin-top: 0; }
}

.videos__head { text-align: center; }
.videos__head p { margin-inline: auto; }
.videos__head h2 + p { margin-top: var(--space-stack); }
.videos { margin-top: var(--space-block); }
.videos > li { display: flex; }
.videos__link { display: flex; flex: 1; align-items: center; gap: var(--space-16); padding-block: var(--space-12); border-top: 1px solid var(--rule); text-decoration: none; }
.videos__mark { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-round); background: var(--orange); color: var(--white); transition: background-color var(--dur-ui) var(--ease-ui); }
.videos__link:hover .videos__mark { background: var(--orange-deep); }
.videos__text { display: flex; flex-direction: column; gap: var(--space-4); }
.videos__title { color: var(--ink); font-family: var(--font-slab); font-size: clamp(20px, calc(20px + 2 * (100vw - 390px) / 890), 22px); line-height: 28px; font-weight: 600; }
.videos__cta { color: var(--orange-deep); font-size: var(--fine-size); line-height: 24px; font-weight: 600; }
@media (min-width: 1024px) {
  .videos__head { grid-column: 3 / span 8; }
  .videos > li { grid-column: span 6; }
  .videos__link { padding-block: var(--space-16); }
}

.pair { display: flex; flex-direction: column; gap: 40px; }
.pair__item { display: flex; flex-direction: column; padding-top: var(--space-24); }
.pair__item h3 + p { margin-top: var(--space-16); }
.pair__item .actions { margin-top: auto; padding-top: var(--space-actions); }
@media (min-width: 1024px) {
  .pair { display: grid; gap: 0 var(--gap); align-items: stretch; }
  .pair__item { grid-column: span 6; }
}

.ruled { --rule-width: 3px; position: relative; border-top: var(--rule-width) solid transparent; }
.ruled::before { content: ""; position: absolute; top: calc(var(--rule-width) * -1); left: 0; right: 0; height: var(--rule-width); background: var(--rule-color, var(--ink)); transform-origin: left center; }

/* Scroll motion: the patterns MOTION.md describes. Every rule hangs off html[data-anim], which
   js/reveal.js sets only after it has marked what is already on screen. Without it (no
   JavaScript, reduced motion, a failed script) nothing here applies and the page is simply there.
   Every duration and delay is a fraction of --reveal-dur, so the 6 second perception test in
   tools/site/motion.js slows the whole choreography evenly. --d is a unit's place in a group
   that arrives together; it inherits, so a unit's photo, caption and rule wait with it. */

[data-reveal] { --d: 0; --stagger: calc(var(--reveal-dur) * 0.1); }
[data-reveal-d="1"] { --d: 1; }
[data-reveal-d="2"] { --d: 2; }
[data-reveal-d="3"] { --d: 3; }
[data-reveal-d="4"] { --d: 4; }

[data-anim] [data-reveal]:not(img, figure, .eyebrow):not([data-revealed]) { opacity: 0; transform: translateY(var(--reveal-lift)); }
[data-anim] [data-reveal][data-from="above"]:not(img, figure, .eyebrow):not([data-revealed]) { transform: translateY(calc(var(--reveal-lift) * -1)); }
[data-anim-live] [data-reveal]:not(img, figure, .eyebrow) {
  transition: opacity var(--reveal-dur) var(--ease-travel), transform var(--reveal-dur) var(--ease-travel);
  transition-delay: calc(var(--d) * var(--stagger));
}

[data-anim] img[data-reveal], [data-anim] figure[data-reveal] img { clip-path: inset(0 0 0 0); }
[data-anim] img[data-reveal]:not([data-revealed]), [data-anim] figure[data-reveal]:not([data-revealed]) img { clip-path: inset(0 0 100% 0); }
[data-anim] img[data-reveal][data-from="above"]:not([data-revealed]), [data-anim] figure[data-reveal][data-from="above"]:not([data-revealed]) img { clip-path: inset(100% 0 0 0); }
[data-anim-live] img[data-reveal], [data-anim-live] figure[data-reveal] img { transition: clip-path var(--reveal-dur) var(--ease-travel) calc(var(--d) * var(--stagger)); }
[data-anim] figure[data-reveal]:not([data-revealed]) figcaption { opacity: 0; }
[data-anim-live] figure[data-reveal] figcaption { transition: opacity calc(var(--reveal-dur) * 0.6) var(--ease-travel) calc(var(--d) * var(--stagger) + var(--reveal-dur) * 0.4); }

.eyebrow::before { transform-origin: left center; }
[data-anim] .eyebrow[data-reveal]:not([data-revealed]) { color: transparent; }
[data-anim] .eyebrow[data-reveal]:not([data-revealed])::before { transform: scaleX(0); }
[data-anim-live] .eyebrow[data-reveal] { transition: color calc(var(--reveal-dur) * 0.6) var(--ease-travel) calc(var(--d) * var(--stagger) + var(--reveal-dur) * 0.3); }
[data-anim-live] .eyebrow[data-reveal]::before { transition: transform calc(var(--reveal-dur) * 0.6) var(--ease-travel) calc(var(--d) * var(--stagger)); }

[data-anim] .ruled[data-reveal]:not([data-revealed])::before { transform: scaleX(0); }
[data-anim-live] .ruled[data-reveal]::before { transition: transform var(--reveal-dur) var(--ease-travel) calc(var(--d) * var(--stagger)); }

.steps__step { --stagger: calc(var(--reveal-dur) * 0.5); }
[data-anim] .steps__step[data-reveal] .steps__line { clip-path: inset(0 -10px -14px -10px); }
[data-anim] .steps__step[data-reveal]:not([data-revealed]) .steps__line { clip-path: inset(0 -10px 100% -10px); }
[data-anim-live] .steps__step[data-reveal] .steps__line { transition: clip-path calc(var(--reveal-dur) * 0.9) var(--ease-travel) calc(var(--d) * var(--stagger) + var(--reveal-dur) * 0.4); }

@media (min-width: 1024px) {
  [data-anim] .steps__step[data-reveal] .steps__line { clip-path: inset(-10px -14px -10px 0); }
  [data-anim] .steps__step[data-reveal]:not([data-revealed]) .steps__line { clip-path: inset(-10px 100% -10px 0); }

  [data-anim] .split__photo[data-reveal]:not([data-revealed]),
  [data-anim] .split__photo[data-reveal][data-from]:not([data-revealed]) { clip-path: inset(0 100% 0 0); }
  [data-anim] .split__text [data-reveal]:not([data-revealed]),
  [data-anim] .split__text [data-reveal][data-from]:not([data-revealed]) { transform: translateX(var(--reveal-lift)); }
}

@keyframes push-in {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}
[data-anim] .hero__photo { animation: push-in var(--push-in-dur) var(--ease-travel) both; }

@media (prefers-reduced-motion: no-preference) {
  .btn:active { transform: scale(0.97); }
}

[data-anim] :target:not(main)[data-reveal],
[data-anim] :target:not(main) [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
[data-anim] :target:not(main) .eyebrow[data-reveal] { color: var(--accent) !important; }
[data-anim] :target:not(main) [data-reveal]::before, [data-anim] :target:not(main) [data-reveal] img { transform: none !important; clip-path: none !important; transition: none !important; }

@media print {
  [data-anim] [data-reveal], [data-anim] [data-reveal] img, [data-anim] [data-reveal]::before { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-anim] .eyebrow[data-reveal] { color: var(--accent) !important; }
}