/*
  michaelchristophermd.com — main stylesheet

  Loaded by every page. The inner pages (the gap, the hunter, the numbers,
  legal) add pages.css on top for their own layouts.

  Contents
    1. Colours, type and spacing (custom properties)
    2. Reset and base elements
    3. Type styles: display headings, ledes, small caps labels, pills
    4. Buttons
    5. Header, floating menu bar and the mobile drawer
    6. Homepage hero (film, headline, pause button)
    7. Meet the hunter
    8. The gap (text + the forearm photo pair)
    9. Proof points (four cards: spots, multiple, timeline, loupe)
   10. What a trained eye reads (four pattern tiles)
   11. The record (year switcher, readout, bar chart, county map)
   12. Case films and the film player
   13. His library (two scrolling rows of dermoscopy circles)
   14. In the press
   15. In conversation
   16. Closing section and footer
   17. Scroll-in animation helpers
   18. Reduced motion
*/


/* ==========================================================================
   1. Colours, type and spacing
   ========================================================================== */

:root {
  /* Brand blues. The light one is the accent on dark backgrounds, the dark
     one is for links on white. Pale, mist and wash are fills for cards. */
  --blue: #0F75DE;
  --blue-dark: #165FB1;
  --blue-light: #5AA0F8;
  --blue-pale: #A9CCF9;
  --blue-mist: #E3EEFC;
  --blue-wash: #DCEAFB;
  --navy-deep: #0E2138;     /* deepest map shade; small-text accent on the pattern tiles */

  /* Soft coloured shadows under cards and tiles */
  --glow-blue: rgba(15, 117, 222, .34);
  --glow-light: rgba(90, 160, 248, .38);
  --glow-pale: rgba(169, 204, 249, .45);
  --glow-wash: rgba(220, 234, 251, .5);

  /* Page surfaces */
  --paper: #F6FAFF;         /* page background */
  --stone: #EBF2FC;         /* alternating section bands, listen cards */
  --stone-2: #DDE9F9;       /* card hover, image placeholders */
  --warm: #f7f3ef;          /* the proof-point cards keep a warm ground */

  /* Type on light backgrounds */
  --ink: #0b0b0c;           /* headlines, strong text */
  --body: #49586B;          /* body copy */
  --muted: #5d6b7d;         /* captions, labels, notes */
  --hairline: rgba(14, 33, 56, .12);

  /* Dark bands: the hero, the case films, the inner-page heroes, the footer */
  --night: #0f1011;
  --navy: #000B1F;
  --navy-2: #0B1A30;
  --navy-3: #10223B;
  --cloud: #f5f5f7;         /* headlines on dark */
  --ash: #CFD8E4;           /* body copy on dark */
  --fog: #9aa7b8;           /* muted text on dark */
  --hair-dark: rgba(255, 255, 255, .1);
  --white: #ffffff;

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;

  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(84px, 9.5vw, 136px);
  --r-btn: 8px;
  --r-card: 16px;
  --r-tile: 30px;

  --ease-long: cubic-bezier(.455, .03, .515, .955);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}


/* ==========================================================================
   2. Reset and base elements
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p, dl, dd, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Keyboard focus ring: dark on light sections, white on dark ones */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible, .band--dark :focus-visible, .foot :focus-visible, .viewer :focus-visible, .nav :focus-visible { outline-color: #fff; }

/* "Skip to content" link, only visible when focused */
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--white); color: #000; padding: 10px 16px; border-radius: var(--r-btn);
}
.skip:focus { top: 16px; }

/* Text for screen readers only */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.band--stone { background: var(--stone); }
.band--dark { background: var(--night); color: var(--ash); }


/* ==========================================================================
   3. Type styles
   ========================================================================== */

/* Big serif headlines. An <em> inside gives one word the italic accent. */
.display {
  font-family: var(--serif);
  font-weight: 300;
  font-optical-sizing: auto;
  color: var(--ink);
  line-height: .92;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.display em { font-style: italic; font-weight: 300; letter-spacing: -.03em; }
.display em strong { font-weight: 400; }   /* a bold italic word, as on "never" in The melanoma you never saw */
.hero .display, .band--dark .display { color: var(--cloud); }
.h-section { font-size: clamp(44px, 6.6vw, 92px); }
.h-card { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 3.2vw, 44px); line-height: .95; letter-spacing: -.015em; }

/* Intro paragraph under a headline */
.lede { font-size: 18px; font-weight: 300; line-height: 1.5; color: var(--body); max-width: 34em; }
.lede a { color: var(--blue-dark); }
.band--dark .lede { color: var(--ash); }

/* Small tracked capitals, used for labels and eyebrows */
.caps {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.6;
}

/* Rounded label above a headline ("Meet the hunter", "The record"...) */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  border-radius: 9999px;
  background: rgba(29, 23, 25, .04);
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
}
.hero .pill, .band--dark .pill { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .15); color: #fafafa; }
.pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-light); box-shadow: 0 0 10px 2px rgba(90, 160, 248, .55); }

/* Centred pill + headline + lede at the top of a section */
.section-head { text-align: center; display: grid; justify-items: center; gap: 24px; margin-bottom: clamp(48px, 6vw, 80px); }
.section-head .lede { margin-inline: auto; }

/* Small centred note under a block */
.note { text-align: center; color: var(--muted); margin-top: 28px; }
.band--dark .note { color: var(--fog); }


/* ==========================================================================
   4. Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-radius: var(--r-btn);
  font: 400 16px/1.25 var(--sans);
  border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.btn:hover svg { transform: translateX(3px); }

/* Outlined button, the one used across the site */
.btn--ghost { border-color: rgba(29, 23, 25, .32); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: rgba(29, 23, 25, .05); border-color: var(--ink); }
.band--dark .btn--ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.band--dark .btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }

.btns { display: flex; flex-wrap: wrap; gap: 12px; }


/* ==========================================================================
   5. Header, floating menu bar and the mobile drawer
   ========================================================================== */

/* The header is fixed; the bar inside it floats as a frosted glass panel and
   darkens slightly once the page has scrolled (.is-scrolled, set by script.js). */
.nav { position: fixed; inset: 14px 0 auto; z-index: 50; }
.nav__in {
  display: flex; align-items: center; gap: 24px;
  width: calc(100% - 24px);
  max-width: 1320px;
  height: 68px;
  padding-inline: clamp(16px, 2vw, 26px);
  border-radius: 18px;
  background: rgba(24, 18, 20, .38);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 18px 50px -24px rgba(0, 0, 0, .45);
  transition: background-color .4s ease, box-shadow .4s ease;
}
.nav.is-scrolled .nav__in { background: rgba(24, 18, 20, .59); box-shadow: 0 20px 60px -26px rgba(0, 0, 0, .5); }

/* Name and "MD · Dermatology" lockup, also used in the drawer and footer */
.brand { display: grid; line-height: 1; margin-right: auto; }
/* The signature logo: Michael's handwritten name, white on the dark header and footer, ink in the light menu drawer */
.brand__sig { display: block; width: auto; height: 34px; }
.nav .brand__sig { height: 32px; }
.drawer .brand__sig { height: 40px; }
.foot .brand__sig { height: 38px; }
.brand__name { font-family: var(--serif); font-weight: 300; font-size: 22px; color: var(--cloud); letter-spacing: -.01em; }
.brand__sub { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ash); margin-top: 6px; }
.nav .brand__name { color: #fff; }
.nav .brand__sub { color: rgba(255, 255, 255, .62); }

.nav__links { display: flex; gap: 4px; }
.nav__links a {
  padding: 9px 12px; border-radius: var(--r-btn);
  font-size: 14px; color: rgba(255, 255, 255, .86);
  transition: background-color .2s ease, color .2s ease;
}
.nav__links a:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* "Menu" button, shown instead of the links on small screens */
.menu-btn {
  display: none; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--r-btn); padding: 9px 12px;
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--white);
}
.menu-btn span { display: grid; gap: 4px; }
.menu-btn i { display: block; width: 14px; height: 1px; background: currentColor; }
.nav .menu-btn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); color: #fff; border-radius: 9999px; }

/* Full-screen menu on small screens */
.drawer {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(255, 255, 255, .985);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  display: flex; flex-direction: column;
  padding: 0 var(--gutter) 32px;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.drawer.is-open { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.drawer .brand__name { color: var(--ink); }
.drawer .brand__sub { color: var(--muted); }
.drawer .menu-btn { background: rgba(29, 23, 25, .04); border-color: var(--hairline); color: var(--ink); }
.drawer nav { margin-top: 32px; display: grid; }
.drawer nav a {
  font-family: var(--serif); font-weight: 300; font-size: 44px; line-height: 1.1; color: var(--ink);
  padding: 8px 0; border-bottom: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: baseline;
}
.drawer nav a span { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--muted); }
.drawer__foot { margin-top: auto; display: grid; gap: 16px; }
.drawer__foot .btn { justify-content: center; }


/* ==========================================================================
   6. Homepage hero
   ========================================================================== */

/* A fixed-height band (about 650px on a 1440 screen) with the looping film
   behind a dark veil, the headline centred, and a strapline and pause button
   pinned to the bottom edge. */
.hero {
  position: relative;
  height: clamp(605px, 45.4vw, 756px);
  display: grid; place-items: center;
  overflow: hidden; isolation: isolate;
  padding: 112px var(--gutter) 84px;
  text-align: center;
}
.hero__film { position: absolute; inset: 0; z-index: -2; }
.hero__film video, .hero__film img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) brightness(.82); }
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0, 11, 31, .62) 0%, rgba(0, 11, 31, .34) 36%, rgba(0, 11, 31, .5) 72%, rgba(0, 11, 31, .72) 100%);
}
.hero__in { display: grid; justify-items: center; gap: 22px; max-width: 980px; }
.hero h1 {
  font-size: clamp(50px, 7.2vw, 108px);
  line-height: .9;
  letter-spacing: -.035em;
}
.hero h1 em { display: inline-block; padding-right: .04em; }
.hero .lede { font-size: clamp(19px, 1.65vw, 24px); line-height: 1.42; max-width: 30em; color: rgba(255, 255, 255, .88); font-weight: 300; }
.hero__foot {
  position: absolute; left: 0; right: 0; bottom: 22px;
  display: flex; justify-content: space-between; align-items: center;
  padding-inline: var(--gutter); color: #c9c9cb;
}
.film-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); border-radius: 9999px;
  padding: 7px 14px 7px 10px; color: var(--white);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background-color .2s ease;
}
.film-toggle:hover { background: rgba(255, 255, 255, .16); }
.film-toggle svg { width: 14px; height: 14px; }

/* The headline, pill and lede drift up slowly once the page is ready */
.js .rise { opacity: 0; transform: translateY(14px); }
.js .is-ready .rise { opacity: 1; transform: none; transition: opacity 2.5s var(--ease-long), transform 2.5s var(--ease-long); }
.js .is-ready .rise:nth-child(2) { transition-delay: .25s; }
.js .is-ready .rise:nth-child(3) { transition-delay: .6s; }
.js .is-ready .rise:nth-child(4) { transition-delay: .85s; }


/* ==========================================================================
   7. Meet the hunter
   ========================================================================== */

/* Portrait on the left, copy on the right. The text column is taller than the
   photo, so the photo is pinned near the top while the text scrolls past. */
.hunter__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.hunter__photo { position: sticky; top: 112px; }
.hunter__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--r-tile); }
.hunter__photo figcaption {
  position: absolute; left: 20px; bottom: 20px;
  background: rgba(15, 16, 17, .6); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .15); border-radius: 9999px; padding: 7px 14px; color: var(--cloud);
}
.hunter__copy { display: grid; gap: 24px; justify-items: start; }
.hunter__copy .h-section { font-size: clamp(44px, 5.4vw, 80px); }
.hunter__copy p { max-width: 34em; }
.hunter__copy p strong { color: var(--ink); font-weight: 500; }

/* Two-column list of facts (residency, clinical focus...) */
.facts { width: 100%; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hairline); }
.facts div { padding: 18px 0; border-bottom: 1px solid var(--hairline); display: grid; gap: 4px; }
.facts div:nth-child(odd) { padding-right: 16px; }
.facts div:only-child { grid-column: 1 / -1; padding-right: 0; }   /* a lone fact runs the full width */
.facts dt { color: var(--muted); }
.facts dd { color: var(--ink); font-size: 16px; }


/* ==========================================================================
   8. The gap and the proof points share one white band
   ========================================================================== */

.gap-band { background: var(--paper); color: var(--body); padding-block: clamp(64px, 7vw, 104px) clamp(84px, 9.5vw, 136px); }
.rule { border: 0; border-top: 1px solid var(--hairline); margin: 0 0 20px; }
.eyebrow { display: block; color: var(--ink); }

/* The gap: headline and two paragraphs on the left, the forearm photo and its
   dermatoscope view side by side on the right */
.gap { margin-top: 0; }
.gap .eyebrow { margin-bottom: clamp(28px, 3vw, 48px); }
.gap__grid { display: grid; gap: 48px; }
.gap__text .display { font-size: clamp(44px, 4.6vw, 68px); max-width: 11ch; margin: 0 0 28px; }
.gap__text .lede { margin: 0; max-width: 32em; }
.gap__text .lede + .lede { margin-top: 18px; }
.gap__text .btn { margin-top: 36px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pair figure { margin: 0; }
.pair__frame { aspect-ratio: 3 / 4; border-radius: var(--r-card); overflow: hidden; background: var(--stone-2); }
.pair__frame img { width: 100%; height: 100%; object-fit: cover; }
/* The arrow on the forearm photo: slides up to the melanoma three seconds after the pair has faded in, so the eye gets a moment to search first */
.pair__frame { position: relative; }
.pair__frame .pointer { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateY(16px); transition: opacity .7s ease 3s, transform .8s var(--ease-out) 3s; }
.pair__frame .pointer path { stroke: var(--blue); stroke-width: 7; }
.pair__frame .pointer .halo { stroke: #fff; stroke-width: 15; }
.pair.is-in .pointer { opacity: 1; transform: none; }
.pair figure:last-child .pair__frame { box-shadow: 0 40px 90px -50px var(--glow-pale); }
.pair figcaption { font-size: 14px; line-height: 1.45; color: var(--muted); margin-top: 14px; }
.pair figcaption strong { color: var(--ink); font-weight: 500; }
@media (min-width: 900px) {
  .gap__grid { grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
  .pair { gap: 15px; }
}


/* ==========================================================================
   9. Proof points: four cards, each with a small animation
   ========================================================================== */

.proof { margin-top: clamp(80px, 9vw, 144px); }
.proof__h { text-align: center; font-size: clamp(34px, 4.4vw, 64px); line-height: 1.05; letter-spacing: -.01em; color: var(--ink); margin: 0 auto clamp(32px, 4vw, 56px); max-width: 16em; }

/* A 12-column grid: the two wide cards span 7, the two narrow ones span 5 */
.proof-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.proof-card {
  --c: var(--blue); --c-soft: var(--blue-light);   /* accent colour and its lighter fill */
  position: relative; overflow: hidden;
  background: var(--warm); border-radius: var(--r-tile);
  padding: clamp(26px, 2.8vw, 40px);
  display: flex; flex-direction: column; gap: 28px;
}
.proof-card--wide { grid-column: span 7; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 3vw, 44px); align-items: center; }
.proof-card--multiple, .proof-card--years { grid-column: span 5; }
.proof-card--spots { --c: var(--blue); --c-soft: var(--blue); }
.proof-card--multiple { --c: var(--blue-dark); --c-soft: var(--blue-light); }
.proof-card--years { --c: var(--blue); --c-soft: var(--blue-light); }
.proof-card--lens { --c: var(--ink); --c-soft: var(--blue-wash); }

.proof-card__label { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); margin: 0; }
.proof-card__label i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.proof-card__figure {
  display: flex; align-items: flex-start; margin: 18px 0 0;
  font-family: var(--serif); font-weight: 300; font-optical-sizing: auto; color: var(--ink);
  font-size: clamp(64px, 6vw, 104px); line-height: .82; letter-spacing: -.04em;
  font-variant-numeric: lining-nums tabular-nums;
}
.proof-card__unit { font-style: italic; font-size: .36em; line-height: 1; letter-spacing: -.01em; color: var(--c); margin: .14em 0 0 .12em; white-space: nowrap; }
/* The trained-eye card says "The difference" instead of a number: both words at one modest size, the second in italic */
.proof-card--lens .proof-card__figure { font-size: clamp(40px, 3.4vw, 56px); line-height: .95; letter-spacing: -.025em; align-items: baseline; flex-wrap: wrap; column-gap: .22em; }
.proof-card--lens .proof-card__unit { font-size: 1em; margin: 0; letter-spacing: -.02em; }
.proof-card--lens .proof-card__copy { align-self: start; }   /* its label lines up with "The record" on the card beside it */
.proof-card__text { margin: 18px 0 0; font-size: 15px; line-height: 1.55; color: var(--body); max-width: 30ch; }

/* 95%: a field of 100 spots, 95 filled and 5 outlined */
.dotfield { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(5px, .7vw, 9px); }
.dotfield span { aspect-ratio: 1; border-radius: 50%; transform: scale(.35); opacity: 0; transition: transform .5s var(--ease-out), opacity .5s ease, background-color .5s ease; transition-delay: calc(var(--i) * 12ms); }
.dotfield .f { background: var(--c); }
.dotfield .f:nth-child(3n) { background: var(--blue-dark); }
.dotfield .f:nth-child(7n) { background: var(--blue-light); }
.dotfield .o { box-shadow: inset 0 0 0 1.5px var(--ink); background: transparent; }
.is-on .dotfield span { transform: none; opacity: 1; }
.legend-row { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; color: var(--muted); }
.legend-row span { display: inline-flex; align-items: center; gap: 8px; }
.legend-row i { width: 10px; height: 10px; border-radius: 50%; }
.legend-row i.f { background: var(--c); }
.legend-row i.o { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* 12.8×: a row of circles, one per average clinician's count, against one circle */
.multiple { margin-top: auto; display: grid; gap: 10px; }
.multiple__label { margin: 0; color: var(--muted); }
.multiple__label + .multiple__row + .multiple__label { margin-top: 10px; }
.multiple__row { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: clamp(4px, .5vw, 7px); }
.multiple__dot {
  width: 100%; max-width: 30px; aspect-ratio: 1; border-radius: 50%;
  background: var(--c-soft); box-shadow: inset 0 0 0 1.5px var(--c);
  transform: scale(0); transition: transform .55s var(--ease-out); transition-delay: calc(var(--i) * 70ms + .1s);
}
.multiple__dot--part { background: linear-gradient(90deg, var(--blue-light) 80%, transparent 80%); }
.multiple__dot--avg { background: #c3ccd8; box-shadow: inset 0 0 0 1.5px #7d8a9b; transition-delay: 1.1s; }
.is-on .multiple__dot { transform: none; }

/* 4 years: a timeline that draws itself across, one dot per year */
.timeline { position: relative; list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.timeline__line { position: absolute; left: 12.5%; right: 12.5%; top: 34.25px; height: 1.5px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-out) .1s; }
.is-on .timeline__line { transform: none; }
.proof-card--years .timeline { max-width: 340px; }   /* hugs the left, under the text, rather than spanning the card */
.timeline li { display: grid; grid-template-rows: 18px 18px auto auto; align-content: start; justify-items: center; gap: 8px; text-align: center; }
.timeline__year { color: var(--ink); height: 18px; line-height: 18px; white-space: nowrap; }
.timeline__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--warm); box-shadow: inset 0 0 0 1.5px var(--c); position: relative; z-index: 1; align-self: center; transition: background-color .4s ease, transform .4s var(--ease-out); transition-delay: calc(var(--i) * .3s + .3s); }
.is-on .timeline__dot { background: var(--c); transform: scale(1.12); }
.timeline__count { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 2.2vw, 32px); line-height: 1; color: var(--ink); opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s var(--ease-out); transition-delay: calc(var(--i) * .3s + .45s); }
.is-on .timeline__count { opacity: 1; transform: none; }
.timeline__rank { color: var(--muted); font-size: 10px; white-space: nowrap; }
@media (max-width: 420px) { .timeline__rank { font-size: 9px; letter-spacing: .08em; } }

/* Every spot: a live loupe. The lens shows the dermatoscope image, aligned to
   the spot under it; script.js moves it with the pointer. */
.loupe { position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: #e9dfd8; cursor: none; touch-action: none; }
.loupe > img { width: 100%; height: 100%; object-fit: cover; }
.loupe__lens {
  --x: 50%; --y: 45%; --r: clamp(64px, 7vw, 92px);
  position: absolute; left: var(--x); top: var(--y); width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%;
  background-image: var(--bg); background-repeat: no-repeat;
  background-size: var(--bw, 100%) var(--bh, 100%); background-position: var(--bx, 50%) var(--by, 50%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .95), 0 0 0 4px rgba(29, 23, 25, .18), 0 24px 50px -16px rgba(0, 0, 0, .5);
  pointer-events: none;
}
/* a faint scale ring just inside the lens edge */
.loupe__lens::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .75) 0 .6deg, transparent .6deg 10deg); -webkit-mask: radial-gradient(circle, transparent 0 calc(100% - 10px), #000 calc(100% - 10px)); mask: radial-gradient(circle, transparent 0 calc(100% - 10px), #000 calc(100% - 10px)); }
.loupe__tag { position: absolute; top: auto; bottom: 14px; left: 14px; padding: 6px 11px; border-radius: 9999px; background: rgba(255, 255, 255, .82); color: var(--ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 10px; }
.loupe__tag--lens { top: auto; bottom: -34px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: #fff; }

@media (max-width: 1060px) {
  .proof-card--wide { grid-column: span 12; }
  .proof-card--multiple, .proof-card--years { grid-column: span 6; }
}
@media (max-width: 760px) {
  .proof-grid { gap: 12px; }
  .proof-card--wide, .proof-card--multiple, .proof-card--years { grid-column: span 12; }
  .proof-card--wide { grid-template-columns: 1fr; }
  .proof-card { border-radius: 24px; }
  .proof-card__figure { font-size: clamp(56px, 16vw, 72px); }
  .loupe { aspect-ratio: 1; }
}


/* ==========================================================================
   10. What a trained eye reads: four pattern tiles
   ========================================================================== */

/* .tile is the generic rounded panel, also used on the gap and hunter pages.
   Its --c is the fill and --g the coloured shadow under it. */
.tile {
  --c: var(--blue-light); --g: var(--glow-light);
  position: relative;
  background: var(--c);
  color: var(--ink);
  border-radius: var(--r-tile);
  padding: 32px;
  box-shadow: 0 40px 90px -55px var(--g), 0 0 0 1px rgba(29, 23, 25, .04);
  transition: box-shadow .6s ease;
}
.tile:hover { box-shadow: 0 46px 110px -45px var(--g), 0 0 0 1px rgba(29, 23, 25, .06); }
.tile--rose { --c: var(--blue-light); --g: var(--glow-light); }
.tile--ochre { --c: var(--blue-pale); --g: var(--glow-pale); }
.tile--mauve { --c: var(--blue); --g: var(--glow-blue); }
.tile--blush { --c: var(--blue-wash); --g: var(--glow-wash); }
.tile .caps { color: var(--ink); }
.tile :focus-visible { outline-color: var(--ink); }
/* the deep-blue tile takes white type */
.tile--mauve, .tile--mauve .caps, .tile--mauve .h-card { color: #fff; }
.tile--mauve .chip { border-color: rgba(255, 255, 255, .7); color: #fff; }
.tile--mauve .chip:hover { background: #fff; color: var(--blue); }

/* Small outlined buttons ("Case 05") that open a film */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(26, 15, 18, .55); background: transparent; color: var(--ink);
  border-radius: 9999px; padding: 6px 12px 6px 9px;
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
}
.chip svg { width: 10px; height: 10px; }
.chip:hover { background: var(--ink); color: var(--c); }

/* The four pattern tiles: white with a soft blue glow, text left, round photo right */
.patterns__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.patterns .tile {
  --c: #ffffff; --g: rgba(15, 117, 222, .35);
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: start;
  padding: clamp(28px, 3.4vw, 44px); min-height: 380px;
  background:
    radial-gradient(90% 80% at 88% 8%, rgba(90, 160, 248, .22) 0%, rgba(90, 160, 248, 0) 60%),
    #ffffff;
  color: var(--ink);
  box-shadow: 0 40px 90px -60px rgba(15, 117, 222, .35), inset 0 0 0 1px rgba(15, 117, 222, .10);
}
.patterns .tile:hover { box-shadow: 0 46px 110px -50px rgba(15, 117, 222, .4), inset 0 0 0 1px rgba(15, 117, 222, .16); }
.patterns .tile .h-card { color: var(--ink); }
.patterns .tile p:not(.caps) { color: var(--body); }
.patterns .tile .caps { color: var(--blue-dark); }
.patterns .tile .chip { border-color: rgba(14, 33, 56, .35); color: var(--navy-deep); }
.patterns .tile .chip:hover { background: var(--navy-deep); color: #fff; border-color: var(--navy-deep); }
.patterns .tile :focus-visible { outline-color: var(--navy-deep); }
.patterns__body { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.patterns__body p:not(.caps) { font-size: 16px; line-height: 1.5; max-width: 30ch; }
.patterns__lens {
  width: clamp(150px, 15vw, 210px); aspect-ratio: 1;
  border-radius: 50%; padding: 7px;
  border: 1px solid rgba(15, 117, 222, .30);
}
.patterns__lens img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.seen-in { margin-top: auto; padding-top: 16px; display: grid; gap: 10px; }


/* ==========================================================================
   11. The record
   ========================================================================== */

#record .section-head { margin-bottom: clamp(36px, 4vw, 52px); }

/* Year switcher under the headline */
.years { display: inline-flex; gap: 6px; padding: 6px; border-radius: 9999px; background: #fff; border: 1px solid var(--hairline); }
.years button {
  border: 0; background: transparent; color: var(--body);
  font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .02em;
  padding: 9px 18px; border-radius: 9999px;
  transition: background-color .2s ease, color .2s ease;
}
.years button:hover { color: var(--ink); background: rgba(29, 23, 25, .05); }
.years button[aria-pressed="true"] { background: var(--blue); color: #fff; }

.record__grid { display: grid; grid-template-columns: 1fr; gap: 15px; margin-top: 0; }

/* Readout strip: the year's figures in one row on a pale blue card */
.readout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end; gap: 12px clamp(24px, 3.4vw, 48px); padding: 24px 32px 20px;
  background: var(--blue-mist); color: var(--ink); border-radius: var(--r-tile);
  box-shadow: 0 40px 90px -55px rgba(15, 117, 222, .35);
}
.readout .caps { color: var(--ink); }
.readout__main { display: grid; gap: 18px; }
.readout__num {
  font-family: var(--serif); font-weight: 300; font-optical-sizing: auto;
  font-size: clamp(72px, 6.4vw, 96px); line-height: .8; letter-spacing: -.045em;
  font-variant-numeric: lining-nums tabular-nums;
}
.readout__txt { font-size: 18px; font-weight: 300; line-height: 1.45; max-width: 24ch; margin: 0 0 4px; }
.readout__txt strong { font-weight: 500; }
.readout__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0; border-left: 1px solid rgba(29, 23, 25, .16); padding-left: clamp(20px, 2.6vw, 36px); align-self: stretch; align-content: end; }
.readout__stats div { padding-top: 0; display: grid; gap: 4px; }
.readout__stats b { font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 1; letter-spacing: -.02em; }
.source { grid-column: 1 / -1; border-top: 1px solid rgba(29, 23, 25, .14); padding-top: 14px; margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #3d3538; }
.source a { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 3px; }

/* Bar chart and county map, side by side on white cards */
.record__vis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 15px; }
.chart {
  background: #fff; border-radius: var(--r-tile); box-shadow: 0 0 0 1px var(--hairline);
  padding: 28px 28px 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
.chart__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.chart__head figcaption { color: var(--ink); }
.legend { display: flex; gap: 8px 16px; flex-wrap: wrap; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--blue); }
.legend i.avg { background: #b9b2b5; }
.legend i.pend { background: repeating-linear-gradient(135deg, var(--blue) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--blue); }

/* The bar chart itself is drawn by script.js as inline SVG */
.chart__plot { position: relative; height: 340px; }
.chart__plot svg { width: 100%; height: 100%; overflow: visible; }
.chart__plot text { font-family: var(--sans); font-size: 11px; letter-spacing: 0; }
.chart__plot [data-hit] { outline: none; }
.bar { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 1.2s var(--ease-out), fill .35s ease, opacity .35s ease; }
.bar.is-low { transform: scaleY(0); }

/* County map */
.map__body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: center; flex: 1; }
.map__svg svg { display: block; width: 100%; max-height: 360px; height: auto; overflow: visible; }
.map__svg path { fill: var(--blue-mist); stroke: #fff; stroke-width: .5; stroke-linejoin: round; transition: fill .8s var(--ease-out); }
.map__svg path.is-home { stroke: #fff; stroke-width: 1.1; }
.map__svg text { font-family: var(--sans); font-size: 2.6px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; transition: fill .8s var(--ease-out); }
.map__svg .val { font-size: 3.4px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.map__svg .pin { fill: #fff; }
.map__svg .pin-ring { fill: none; stroke: #fff; stroke-width: .3; transform-origin: center; transform-box: fill-box; animation: map-pin 2.6s var(--ease-out) infinite; }
@keyframes map-pin { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.map__side { display: grid; gap: 12px; align-content: center; }
.map__figure { font-family: var(--serif); font-weight: 300; font-size: clamp(48px, 4.2vw, 64px); line-height: .9; letter-spacing: -.035em; color: var(--ink); margin: 0; font-variant-numeric: lining-nums; }
.map__figure small { display: block; font-size: 11px; letter-spacing: .14em; color: var(--ink); margin: 10px 0 0; }
.map__text { color: var(--body); font-size: 14px; line-height: 1.5; margin: 0; }
.map__legend { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 8px 14px; color: var(--muted); margin-top: 4px; }
.map__legend span { display: inline-flex; align-items: center; gap: 7px; }
.map__legend i { width: 11px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(29, 23, 25, .08); }

/* The short film under the chart and map: the 215 versus 16.8 story */
.record__film { margin-top: 15px; aspect-ratio: 16 / 9; border-radius: var(--r-tile); overflow: hidden; background: var(--ink); box-shadow: 0 40px 90px -55px var(--glow-light); }
.record__film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.record__foot { text-align: center; margin-top: 32px; }

@media (max-width: 1100px) {
  .map__body { grid-template-columns: 1fr; }
  .map__svg svg { max-height: 320px; margin: 0 auto; width: auto; max-width: 100%; }
}
@media (max-width: 960px) {
  .record__vis { grid-template-columns: 1fr; }
  .map__body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .readout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .readout__stats { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid rgba(29, 23, 25, .16); padding-top: 16px; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .readout { grid-template-columns: 1fr; padding: 24px; }
  .map__body { grid-template-columns: 1fr; }
  .chart { padding: 22px 16px 14px; }
  .years button { padding: 9px 13px; }
}


/* ==========================================================================
   12. Case films and the film player
   ========================================================================== */

/* A navy band. The first case is a large feature card; the rest are small. */
#cases.band--dark { background: var(--navy); }
.cases__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.case {
  display: flex; flex-direction: column;
  border: 0; padding: 0; text-align: left;
  background: var(--navy-2); border-radius: var(--r-card); overflow: hidden;
  transition: background-color .3s ease;
}
.case:hover { background: var(--navy-3); }
.case__media { position: relative; aspect-ratio: 960 / 772; overflow: hidden; background: #000; }
.case__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), opacity .4s ease; opacity: .9; }
.case:hover .case__media img { transform: scale(1.035); opacity: 1; }
.play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--white);
  transition: background-color .25s ease, color .25s ease;
}
.play svg { width: 14px; height: 14px; margin-left: 2px; }
.case:hover .play { background: var(--white); color: #000; }
.case__dur { position: absolute; right: 12px; bottom: 12px; background: rgba(0, 11, 31, .65); color: var(--cloud); border-radius: 9999px; padding: 3px 10px; }
.case__body { padding: 16px 18px 20px; display: grid; gap: 8px; }
.case__meta { display: flex; justify-content: space-between; color: var(--cloud); }
.case__meta span:last-child { color: var(--ash); }
.case__cap { font-size: 14px; line-height: 1.55; color: var(--ash); }
.case--feature { grid-column: span 2; grid-row: span 2; }
.case--feature .case__media { aspect-ratio: auto; flex: 1; min-height: 300px; }
.case--feature .play { width: 72px; height: 72px; }
.case--feature .case__body { padding: 24px 28px 28px; gap: 12px; }
.case--feature .case__cap { font-family: var(--serif); font-weight: 300; font-size: 28px; line-height: 1.15; color: var(--cloud); letter-spacing: -.01em; }
.cases__foot { display: flex; justify-content: center; margin-top: 28px; color: var(--fog); }

/* The player: a <dialog> with the film on top and title, caption and
   previous/next buttons underneath */
.viewer {
  width: min(1100px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px);
  padding: 0; border: 1px solid var(--hair-dark); border-radius: var(--r-card);
  background: var(--navy); color: var(--cloud); overflow: auto;
}
.viewer::backdrop { background: rgba(5, 5, 6, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.viewer[open] { animation: viewer-in .4s var(--ease-out); }
@keyframes viewer-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.viewer__stage { aspect-ratio: 16 / 9; background: #000; }
.viewer__stage video { width: 100%; height: 100%; object-fit: contain; }
.viewer__bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 24px 24px; }
.viewer__txt { display: grid; gap: 6px; min-width: 0; }
.viewer__title { font-family: var(--serif); font-weight: 300; font-size: 30px; line-height: 1; letter-spacing: -.01em; }
.viewer__cap { color: var(--ash); font-size: 15px; max-width: 60ch; }
.viewer__nav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.viewer__count { color: var(--ash); margin-right: 8px; }
.round {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: var(--white);
  display: grid; place-items: center;
  transition: background-color .2s ease, color .2s ease;
}
.round:hover { background: var(--white); color: #000; }
.round svg { width: 16px; height: 16px; }
.viewer__close { position: absolute; top: 12px; right: 12px; background: rgba(9, 10, 11, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 2; }


/* ==========================================================================
   13. His library: two rows of dermoscopy circles scrolling opposite ways
   ========================================================================== */

#library .section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.reels { display: grid; }
/* The bottom padding leaves room for the circles' shadow, which overflow: hidden would otherwise cut off */
.reel { overflow: hidden; position: relative; padding: 6px 0 46px; }
/* fade the rows out at both edges */
.reel::before, .reel::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12vw; z-index: 2; pointer-events: none; }
.reel::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.reel::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }
/* Each row holds its set of photos twice, so sliding by exactly half loops seamlessly */
.reel__track { display: flex; width: max-content; animation: reel-scroll 95s linear infinite; }
.reel--rev .reel__track { animation-direction: reverse; animation-duration: 107s; }
.reel:hover .reel__track { animation-play-state: paused; }
.reel__item {
  width: clamp(150px, 16vw, 220px); aspect-ratio: 1; flex: none; position: relative;
  margin-right: 22px;   /* margin rather than gap, so half the track is exactly one set */
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(29, 23, 25, .08), 0 24px 50px -28px rgba(14, 33, 56, .28);
}
.reel__item img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.reel__item::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 30px rgba(0, 0, 0, .16); }
@keyframes reel-scroll { to { transform: translateX(-50%); } }


/* ==========================================================================
   14. In the press
   ========================================================================== */

/* Two columns of rows: thumbnail, outlet name, one-line note, arrow */
.press__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; border-bottom: 1px solid var(--hairline); }
.press__list li { border-top: 1px solid var(--hairline); }
.press__list li[hidden] { display: none; }
.press__list a { display: grid; grid-template-columns: 132px 1fr auto; gap: 4px 22px; align-items: center; padding: 24px 0 26px; }
.press__img { grid-row: 1 / span 2; grid-column: 1; display: block; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background: var(--stone-2); }
.press__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.press__list a:hover .press__img img { transform: scale(1.05); }
.press__outlet { grid-column: 2; align-self: end; font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; color: var(--ink); letter-spacing: -.01em; transition: color .2s ease; }
.press__note { grid-column: 2; align-self: start; font-size: 15px; color: var(--body); }
.press__go { grid-row: 1 / span 2; grid-column: 3; align-self: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hairline); display: grid; place-items: center; color: var(--ink); transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.press__go svg { width: 13px; height: 13px; }
.press__list a:hover .press__go { background: var(--ink); color: #fff; border-color: var(--ink); }
.press__list a:hover .press__outlet { color: #000; }
.press__more { display: flex; justify-content: center; margin-top: 32px; }


/* ==========================================================================
   15. In conversation
   ========================================================================== */

.listen__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.listen__card {
  background: var(--stone); border-radius: var(--r-card); padding: 14px 14px 26px;
  min-height: 240px; display: flex; flex-direction: column; gap: 14px;
  transition: background-color .3s ease;
}
.listen__card:hover { background: var(--stone-2); }
.listen__card > :not(.listen__img) { margin-inline: 14px; }
.listen__img { display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--stone-2); margin-bottom: 6px; }
.listen__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.listen__card:hover .listen__img img { transform: scale(1.04); }
.listen__card .pill { align-self: flex-start; padding: 5px 12px; font-size: 10px; }
.listen__name { font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 1; color: var(--ink); letter-spacing: -.015em; }
.listen__line { font-size: 15px; color: var(--body); }
.listen__go { margin-top: auto; display: flex; justify-content: space-between; align-items: center; color: var(--ink); }
.listen__go svg { width: 14px; height: 14px; transition: transform .2s ease; }
.listen__card:hover .listen__go svg { transform: translate(2px, -2px); }


/* ==========================================================================
   16. Closing section and footer
   ========================================================================== */

/* Pale blue band with three soft blurred lights behind the headline */
/* Closing section, as used on the inner pages: everything centred on a soft blue wash */
.closing { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding-block: clamp(140px, 16vw, 220px); margin-top: 0; background: #EEF5FF; }
.closing__light { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.closing__light i { position: absolute; border-radius: 50%; filter: blur(120px); opacity: .5; }
.closing__light i:nth-child(1) { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; background: var(--blue-light); left: 50%; top: 50%; transform: translate(-82%, -55%); }
.closing__light i:nth-child(2) { width: 36vw; height: 36vw; max-width: 520px; max-height: 520px; background: var(--blue-pale); left: 50%; top: 50%; transform: translate(-8%, -36%); opacity: .42; }
.closing__light i:nth-child(3) { width: 26vw; height: 26vw; max-width: 380px; max-height: 380px; background: var(--blue); left: 50%; top: 50%; transform: translate(40%, -80%); opacity: .22; }
.closing__in { display: grid; justify-items: center; gap: 28px; }
.closing h2 { font-size: clamp(60px, 11vw, 168px); line-height: .88; letter-spacing: -.035em; }
.closing .btns { justify-content: center; }

/* The homepage's closing (.closing--split): the words on the left, the portrait on the right standing on the bottom edge */
.closing--split { text-align: left; padding-block: 0; background: linear-gradient(120deg, #F4F7FB 0%, #E9F1FC 55%, #DDE9F9 100%); }
.closing--split .closing__in { grid-template-columns: 1fr; justify-items: stretch; gap: 24px; align-items: end; }
.closing__text { display: grid; gap: 26px; justify-items: start; padding-block: clamp(72px, 9vw, 130px) 0; }
.closing--split h2 { font-size: clamp(34px, 3.8vw, 56px); line-height: .94; letter-spacing: -.03em; max-width: 11em; }
.closing__sub { font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); max-width: 22em; margin-top: -6px; }
.closing--split .lede { max-width: 30em; }
.closing--split .btn { background: var(--ink); color: #fff; border-color: var(--ink); }
.closing--split .btn:hover { background: var(--navy); border-color: var(--navy); }
.closing__portrait { align-self: end; justify-self: center; width: min(100%, 440px); margin-top: 8px; }
.closing__portrait img { width: 100%; height: auto; display: block; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%); mask-composite: intersect; }
@media (min-width: 801px) {
  .closing--split .closing__in { grid-template-columns: 1fr 1fr; gap: 40px; }
  .closing__text { padding-block: clamp(90px, 10vw, 150px); }
  .closing__portrait { width: 100%; max-width: 640px; justify-self: end; margin-top: 36px; }
}
/* The enrollment-interest form: name and email side by side, the button beneath */
.enroll { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 520px; }
.enroll input { min-width: 0; padding: 13px 16px; border-radius: var(--r-btn); border: 1px solid rgba(29, 23, 25, .22); background: rgba(255, 255, 255, .8); font: 400 16px/1.25 var(--sans); color: var(--ink); }
.enroll input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22, 95, 177, .15); }
.enroll .btn { grid-column: 1 / -1; justify-self: start; }
.enroll__note { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--muted); min-height: 1.4em; }
.enroll__note.is-error { color: #B3261E; }
@media (max-width: 480px) { .enroll { grid-template-columns: 1fr; } }

.foot { padding-block: 64px 40px; background: #000; color: rgba(255, 255, 255, .78); }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.foot__about { display: grid; gap: 20px; align-content: start; max-width: 380px; }
.foot__about p { font-size: 14px; line-height: 1.6; }
.foot .brand__name { color: #fff; }
.foot .brand__sub { color: rgba(255, 255, 255, .66); }
.foot h3 { color: rgba(255, 255, 255, .66); margin-bottom: 14px; }
.foot ul { display: grid; gap: 8px; }
.foot ul a { font-size: 14px; color: rgba(255, 255, 255, .9); transition: color .2s ease; }
.foot ul a:hover { color: var(--blue-light); }
.foot__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .7); }
.foot__base .caps { color: rgba(255, 255, 255, .7); }


/* ==========================================================================
   17. Scroll-in animation helpers
   ========================================================================== */

/* Elements with .reveal fade up when they scroll into view (script.js adds
   .is-in). .reveal-stagger does the same for each child in turn. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1.3s var(--ease-long), transform 1.3s var(--ease-long); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--ease-long), transform 1.1s var(--ease-long); }
.js .reveal-stagger.is-in > * { opacity: 1; transform: none; }
.js .reveal-stagger.is-in > *:nth-child(2) { transition-delay: .1s; }
.js .reveal-stagger.is-in > *:nth-child(3) { transition-delay: .2s; }
.js .reveal-stagger.is-in > *:nth-child(4) { transition-delay: .3s; }
.js .reveal-stagger.is-in > *:nth-child(5) { transition-delay: .4s; }
.js .reveal-stagger.is-in > *:nth-child(6) { transition-delay: .5s; }


/* ==========================================================================
   Responsive adjustments for the sections above
   ========================================================================== */

@media (max-width: 1100px) {
  .cases__grid { grid-template-columns: repeat(3, 1fr); }
  .case--feature { grid-column: span 3; grid-row: auto; }
  .case--feature .case__media { flex: none; aspect-ratio: 16 / 9; }
}
@media (max-width: 960px) {
  .nav__links { display: none; }
  .menu-btn { display: inline-flex; }
  .hero { height: auto; min-height: 605px; padding-top: 128px; padding-bottom: 96px; }
  .hunter__grid, .record__grid { grid-template-columns: 1fr; }
  .hunter__photo { position: relative; top: auto; max-width: 560px; }
  .patterns__grid { grid-template-columns: 1fr; }
  .listen__grid { grid-template-columns: 1fr 1fr; }
  .press__list { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__about { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .cases__grid { grid-template-columns: 1fr; gap: 10px; }
  .case--feature { grid-column: auto; }
  /* small cases become a thumbnail beside the text */
  .case:not(.case--feature) { flex-direction: row; align-items: stretch; }
  .case:not(.case--feature) .case__media { width: 118px; flex-shrink: 0; aspect-ratio: auto; }
  .case:not(.case--feature) .play { width: 36px; height: 36px; }
  .case:not(.case--feature) .play svg { width: 10px; height: 10px; }
  .case:not(.case--feature) .case__dur { display: none; }
  .case:not(.case--feature) .case__body { padding: 14px 16px 16px; }
  .case--feature .case__cap { font-size: 23px; }
  .case--feature .case__body { padding: 20px; }
  .patterns .tile { grid-template-columns: 1fr; min-height: 0; }
  .patterns__lens { order: -1; width: 150px; }
  .viewer__bar { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px; }
  .viewer__nav { justify-content: space-between; }
  .viewer__title { font-size: 26px; }
}
@media (max-width: 600px) {
  .nav { inset: 10px 0 auto; }
  .nav__in { width: calc(100% - 20px); height: 60px; border-radius: 16px; }
  .hero { min-height: 670px; padding-top: 112px; }
  .hero h1 { font-size: clamp(46px, 13vw, 60px); }
  .hero__foot .caps:first-child { display: none; }
  .hero__foot { justify-content: center; }
  .listen__grid { grid-template-columns: 1fr; }
  .listen__card { min-height: 0; }
  .facts { grid-template-columns: 1fr; }
  .facts div:nth-child(odd) { padding-right: 0; }
  .foot__grid { grid-template-columns: 1fr; gap: 32px; }
  .section-head { gap: 20px; }
  .tile { border-radius: 24px; }
  .press__list a { grid-template-columns: 96px 1fr auto; column-gap: 16px; }
  .press__outlet { font-size: 22px; }
  .press__note { font-size: 14px; }
}


/* ==========================================================================
   18. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .rise, .js .reveal, .js .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .reel__track { animation: none; }
  .dotfield span, .multiple__dot, .timeline__count { opacity: 1 !important; transform: none !important; }
  .timeline__line { transform: none !important; }
}