/* ==========================================================================
   Self-hosted webfonts: Spectral and IBM Plex Sans, latin subset.

   These are the exact same faces the site previously pulled from the Google
   Fonts CDN, in the exact same weights, extracted from Google's own css2
   response and stored locally. Nothing about how the page renders changes.

   Why self-host: the CDN stylesheet was a render-blocking request to a third
   party, worth ~900ms of First Contentful Paint on a throttled connection, and
   it is the difference between a failing and a passing Lighthouse performance
   score. It also removes the third-party request that logs visitor IPs, which
   is the EU privacy concern noted in README "Before you ship".

   Only the latin subset is shipped; the site's copy is English. If a language
   with other glyphs is ever added, re-extract the remaining subsets.

   Note that IBM Plex Sans 400/500/600 all resolve to one variable font file.
  
   that is upstream's own arrangement, not a mistake here.
   ========================================================================== */


@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin-f6667783.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin-f6667783.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin-f6667783.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/spectral-latin-cc148f7b.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/spectral-latin-c68b06f2.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/spectral-latin-c4e0a00d.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/spectral-latin-b7578f14.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   Marejada site styles
   --------------------------------------------------------------------------
   Shared by index.html and 404.html. Every page added later (/about,
   /who-its-for, …) should link this same file so the shell stays consistent.

   The palette is the PRODUCT app's committed palette, taken from theme/colors.json in
   the surf-training-engine repo, as of its "Migrate palette to deep ocean"
   change, so that a visitor moving from this site into the app does not see
   the colour shift under them. Ryan chose it on 2026-09-16 over the older
   brand-doc palette (warm cream, navy-charcoal panels, green teal #2C6E6A)
   that this site was originally built against. That alternative is not dead
   code here; it is in git history, in palette-ocean.css and the :root block
   this one replaced, if the decision is ever revisited.

   This is a LIGHT canvas with dark contrast panels, not a dark-mode site.
   Do not invert it.

   Colour pairings in use were checked against WCAG 2.1 AA (4.5:1 for normal
   text) and the measured ratios are recorded inline below. If you change a
   colour, re-measure it. Two values are deliberately NOT the app's, because
   the app uses them in contexts this site does not. Both are annotated.
   ========================================================================== */

:root {
  /* Brand surfaces, from the app's foundation palette */
  --cream:        #F3EFE5;  /* page canvas      (app --foundation-salt)    */
  --cream-deep:   #ECEAE0;  /* alternate band   (salt tinted with divider) */
  --charcoal:     #171918;  /* contrast panels  (app --foundation-charcoal)*/
  --charcoal-hi:  #2A2C2B;  /* button hover, see note above             */
  --white:        #FAF8F2;  /* cards            (app --foundation-surface) */

  /* Accents */
  --teal:         #1E5A70;  /* accent on light  (app --foundation-deep-ocean)
                               6.65:1 on --cream, AA pass                  */
  --teal-light:   #8FB8C8;  /* accent on dark   8.29:1 on --charcoal, AA pass */

  /* Text */
  --ink:          #0C0E0D;  /* body on light    (app --foundation-ink)
                               18.3:1 on --cream, AAA                      */
  --ink-soft:     #3A3B37;  /* secondary on light   9.83:1, AA pass       */
  --muted:        #676862;  /* meta/labels on light 4.99:1, AA pass
                               (darkened from app --foundation-stone)      */
  --ink-invert:   #D2CFC6;  /* body on charcoal 11.34:1, AA pass
                               (app --text-muted-on-dark, resolved)        */

  /* Lines */
  --border:       #D8D7D0;  /* app --foundation-divider */
  --border-dark:  rgba(243, 239, 229, 0.16);

  /* Derived surfaces, kept in step with the tokens they are tinted from */
  --header-veil:  rgba(243, 239, 229, 0.92); /* --cream at 92%      */
  --accent-wash:  rgba(143, 184, 200, 0.12); /* --teal-light at 12% */

  /* Layout. Not colour, and not affected by any palette decision. */
  --max:          1200px;
  --gutter:       28px;
  --radius:       6px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  line-height: 1.15;
  color: var(--charcoal);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal); }
img, svg { max-width: 100%; }

/* Visible keyboard focus everywhere. Do not remove. */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible { outline-color: var(--teal-light); }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  background: var(--charcoal);
  color: var(--cream);
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--teal);
  margin-bottom: 12px;
}
.on-dark .eyebrow { color: var(--teal-light); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-primary { background: var(--charcoal); color: var(--cream); }
.btn-primary:hover { background: var(--charcoal-hi); }

.on-dark .btn-primary { background: var(--cream); color: var(--charcoal); }
.on-dark .btn-primary:hover { background: var(--white); }

.btn-nav { padding: 9px 18px; font-size: 13px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Deliberately quiet. People already in the beta know to look for it, and a
   new visitor should be reading the page rather than choosing between two
   calls to action. */
.nav-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.nav-link:hover { color: var(--charcoal); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header-veil);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}

.logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--charcoal);
}
.logo-lockup svg { width: 26px; height: 26px; flex-shrink: 0; }
.logo-lockup .logo-word {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Section rhythm
   -------------------------------------------------------------------------- */

.section { padding-block: 108px; }
.section-alt { background: var(--cream-deep); }

.on-dark { background: var(--charcoal); color: var(--ink-invert); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--cream); }
.on-dark p { color: var(--ink-invert); }

.section-head {
  max-width: 780px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head h2 { font-size: clamp(32px, 4.4vw, 47px); }
.section-head p { color: var(--ink-soft); }
.section-head:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: 116px 92px; text-align: center; }
.hero .eyebrow { color: var(--muted); }
.hero h1 {
  font-size: clamp(40px, 7vw, 78px);
  max-width: 900px;
  margin-inline: auto;
}
.hero .lede {
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 660px;
  margin: 22px auto 40px;
}
.hero .cta-note {
  font-size: 14px;
  color: var(--muted);
  margin-top: 16px;
}

/* --------------------------------------------------------------------------
   Wave band
   --------------------------------------------------------------------------
   Full-bleed photograph between the hero and the first section. The aspect
   ratio is declared here rather than left to the file so the space is
   reserved before the image arrives. This is the only image on the page and
   it would otherwise be the only source of layout shift.
   -------------------------------------------------------------------------- */

.wave-band {
  /* Holds the space in a page colour, so a slow decode reads as a pause
     rather than a dark slab appearing and then being replaced. */
  background: var(--cream-deep);
  line-height: 0;   /* removes the descender gap under an inline image */
  /* The drift in the Motion section scales the image past the band's edges.
     Without clipping here that overflow widens the document and the page
     scrolls sideways on narrow screens. Kept when the 2026-09-21 About pass
     was rolled back: the look went back, this did not. */
  overflow: hidden;
}

.wave-band picture { display: block; }

.wave-band img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  /* The barrel sits right of centre. Hold it in frame as the crop narrows,
     rather than centring on the empty water to its left. */
  object-position: 58% center;
}

@media (max-width: 640px) {
  /* A 2:1 band is about 195px tall on a phone, which reads as a stripe
     rather than a photograph. Trade width for height at that size. */
  .wave-band img { aspect-ratio: 3 / 2; }
}

/* --------------------------------------------------------------------------
   Why it's different
   -------------------------------------------------------------------------- */

.reason-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 48px;
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.reason { display: flex; gap: 16px; }

.reason-mark {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--teal-light);
  background: var(--accent-wash);
  color: var(--teal-light);
  font-family: 'Spectral', Georgia, serif;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reason > div { min-width: 0; }

/* Each point now leads with a short statement and explains it underneath. The
   heading is sized as body copy on purpose: it is a lead-in, not a section
   title, and scaling it up would compete with the h2 above the grid. */
.reason h3 {
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cream);
  margin: 0 0 4px;
}

.reason p { font-size: 16.5px; }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

/* This section carries three levels: the section label, a subsection heading
   partway down, and a closing line. They were all wearing the same small
   uppercase teal label, which flattened the hierarchy and made the section
   read as mismatched against the rest of the page. Each now looks like the
   job it is doing. */

.about-inner { max-width: 760px; margin-inline: auto; }

/* Centred like every other section head on the page. The prose underneath
   stays left-aligned, because centred body copy is harder to read and this is
   the longest stretch of text on the site. */
/* Centred, matching the section heads on the other sections. The body copy
   below stays left-aligned: this is the longest read on the site and centred
   prose is harder to follow. */
.about-head {
  text-align: center;
  margin-bottom: 44px;
}
.about-inner h2 { font-size: clamp(30px, 4.2vw, 42px); }
/* The section label is the H2 here, so the display size above would otherwise
   win on specificity and render a 42px letterspaced "ABOUT". It should look
   like the eyebrows on the other sections, not like a title. */
.about-inner h2.eyebrow {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.about-inner p { font-size: 17.5px; }

/* The subsection heading is a heading, so it is set in the display face at a
   real heading size rather than as another label. The rule above it marks the
   turn from what the product is to who built it. */
/* Set to match the "About" label exactly: same size, face, weight, tracking
   and teal, and centred like it. The rule above stays, because it is what
   separates what the product is from who built it, and the belief block below
   is marked the same way. */
.about-inner h3 {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  text-align: center;
  margin-top: 56px;
  margin-bottom: 26px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

/* The closing line. Centred and given room, so it lands as a summation
   instead of looking like a stray blockquote hanging off the last paragraph. */
.belief-block {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.about-inner .belief-label {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 14px;
  padding-top: 0;
  border-top: 0;
}
.belief,
.about-inner p.belief {
  margin: 0;
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  font-size: 19.5px;
  line-height: 1.35;
  color: var(--charcoal);
}

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */

.final-cta { text-align: center; }
.final-cta h2 {
  font-size: clamp(34px, 5vw, 52px);
  max-width: 700px;
  margin-inline: auto;
}
.final-cta p {
  max-width: 580px;
  margin: 18px auto 38px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 32px;
  font-size: 13px;
  color: var(--muted);
}
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--charcoal); }
.site-footer .footer-note { flex-basis: 100%; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.error-page {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 80px;
}
.error-page h1 { font-size: clamp(32px, 5vw, 44px); }
.error-page p { color: var(--ink-soft); margin-bottom: 28px; }

/* --------------------------------------------------------------------------
   Legal pages (/privacy). Plain reading column in the same shell.
   -------------------------------------------------------------------------- */

.legal {
  max-width: 680px;
  padding-block: 56px 88px;
}
.legal h1 { font-size: clamp(32px, 5vw, 44px); }
.legal h2 {
  font-size: clamp(22px, 3vw, 28px);
  margin-top: 44px;
}
.legal h3 {
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 28px;
  margin-bottom: 8px;
}
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { padding-left: 22px; margin: 0 0 1em; }
.legal li { margin-bottom: 6px; }
.legal-meta { font-size: 14px; color: var(--muted); margin-bottom: 32px; }

/* --------------------------------------------------------------------------
   Founder story link: the strip at the bottom of the homepage (issue 7)
   --------------------------------------------------------------------------
   Quiet on purpose: no fill, no shadow, a hairline frame and a short
   thumbnail. It sits under the final Request access, which stays the page's
   call to action.
   -------------------------------------------------------------------------- */

.story-strip-band { padding-block: 40px; }

.story-strip {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  max-width: 980px;
  margin-inline: auto;
  padding: 10px 24px 10px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.story-strip:hover { border-color: var(--teal-light); }
.story-strip:focus-visible { border-radius: var(--radius); }

.story-strip img {
  display: block;
  width: 148px;
  height: 76px;
  object-fit: cover;
  object-position: 50% 82%;   /* hold the swell lines, not the sky */
  border-radius: 4px;
}

.story-strip-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 2px;
  min-width: 0;
}
.story-strip .eyebrow { font-size: 11px; margin: 0; flex-basis: 100%; }
.story-strip-title {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
  color: var(--charcoal);
}
.story-strip-desc { font-size: 14.5px; line-height: 1.5; color: var(--muted); min-width: 0; }
.story-strip-cta { font-size: 13.5px; font-weight: 600; color: var(--teal); white-space: nowrap; }
.story-strip-cta span { display: inline-block; transition: transform 0.15s ease; }
.story-strip:hover .story-strip-cta span { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Founder story page: /why-i-built-marejada (issue 7)
   --------------------------------------------------------------------------
   The essay was written as many one-line paragraphs. On the page those are
   joined into full paragraphs, with roughly one line per section set apart as
   a pull line, so the column reads as prose rather than a list of fragments.
   The words are unchanged.
   -------------------------------------------------------------------------- */

.story-top { padding-block: 72px 48px; text-align: center; }
.back-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 40px;
}
.back-link:hover { color: var(--charcoal); text-decoration: underline; }
.story-top h1 {
  font-size: clamp(40px, 6.4vw, 70px);
  max-width: 860px;
  margin: 0 auto;
}

/* The photo breaks out of the 660px reading column by about 110px each side
   rather than running the full page width, so photo and essay read as one
   column. */
.story-photo { margin-block: 0; max-width: calc(880px + 2 * var(--gutter)); }
.story-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: 50% 78%;
  border-radius: var(--radius);
}

.essay {
  max-width: 660px;
  margin-inline: auto;
  padding: 72px var(--gutter) 96px;
  box-sizing: content-box;
}
.essay p { font-size: 18px; line-height: 1.75; margin: 0 0 1.35em; }
.essay p.lede { font-size: 21px; line-height: 1.6; color: var(--charcoal); }
.essay h2 { font-size: clamp(26px, 3.2vw, 32px); margin: 76px 0 24px; }
.essay .pull {
  margin: 40px 0 44px;
  padding-left: 22px;
  border-left: 2px solid var(--teal-light);
  font-family: 'Spectral', Georgia, serif;
  font-size: 25px;
  line-height: 1.35;
  color: var(--charcoal);
}
.essay .closing {
  margin: 64px 0 0;
  padding-top: 44px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.35;
  color: var(--charcoal);
}

.signoff { text-align: center; margin-top: 28px; }
.signoff p { margin: 0; }
.signoff-name { font-family: 'Spectral', Georgia, serif; font-size: 20px; color: var(--charcoal); }
.signoff-role { font-size: 14px; color: var(--muted); }

.essay .explore { text-align: center; margin: 64px 0 0; }
.explore a { font-size: 14px; font-weight: 600; color: var(--teal); text-decoration: none; }
.explore a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .story-strip-band { padding-block: 28px; }
  .story-strip { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 10px 14px 10px 10px; }
  .story-strip img { width: 84px; height: 84px; }
  .story-strip-desc { display: none; }
  .story-strip-cta { grid-column: 2; margin-top: -8px; }
  .story-strip-title { font-size: 19px; }

  .story-top { padding-block: 44px 32px; }
  .back-link { margin-bottom: 28px; }
  .story-photo img { aspect-ratio: 3 / 2; }
  .essay { padding: 48px var(--gutter) 72px; }
  .essay p { font-size: 17px; }
  .essay p.lede { font-size: 19px; }
  .essay h2 { margin-top: 56px; }
  .essay .pull { font-size: 22px; padding-left: 16px; margin: 32px 0 36px; }
  .essay .closing { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   Motion
   --------------------------------------------------------------------------
   Two mechanisms, chosen by what happens when each one fails.

   Content reveals use an IntersectionObserver, not a CSS scroll-driven
   animation. The first version of this used `animation-timeline: view()` on
   every block, and on a real page with a dozen or more subjects Chrome left
   whole screens of text reporting a negative timeline progress, which with
   `fill: both` means holding the hidden keyframe. An entire section of copy
   was invisible while sitting in the middle of the viewport. Nothing that can
   hide body copy is worth a scroll effect, so the reveals now hide content
   only after JavaScript has confirmed it can also show it again: the hidden
   state lives behind `.reveal-ready`, which is added at runtime. No script, an
   old browser, or reduced motion all mean the page renders complete and
   static.

   Decoration still uses scroll-driven animation, because its failure mode is
   harmless. If the wave's timeline misbehaves it holds a slightly offset
   frame, and if the progress bar's does it stays at zero width. Neither can
   swallow a paragraph.

   Everything animated here is transform and opacity only, so none of it
   triggers layout and none of it can shift the page. The hero is deliberately
   untouched: it holds the Largest Contentful Paint and the first text
   painted, and fading either one in costs real milliseconds on both.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .reveal-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }

  /* The differentiators are a grid, so without a stagger all four arrive at
     once. Transitions take a delay in time, which is what makes this simpler
     than the scroll-timeline version it replaced. */
  .reveal-ready .reason:nth-child(2) { transition-delay: 0.08s; }
  .reveal-ready .reason:nth-child(3) { transition-delay: 0.16s; }
  .reveal-ready .reason:nth-child(4) { transition-delay: 0.24s; }
}

/* Hidden unless the @supports block below opts in. */
.scroll-progress { display: none; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* The photograph drifts against the scroll. The scale is what makes room
       for the drift: without it the translate would expose the band's
       background at one edge. */
    @keyframes wave-drift {
      from { transform: scale(1.08) translateY(-1.8%); }
      to   { transform: scale(1.08) translateY(1.8%); }
    }
    .wave-band img {
      animation: wave-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* A hairline of progress across the top. Cheap, and it gives a long page
       a sense of its own length. */
    @keyframes progress-grow { to { transform: scaleX(1); } }
    .scroll-progress {
      display: block;
      position: fixed;
      inset: 0 0 auto 0;
      height: 2px;
      z-index: 20;
      background: var(--teal);
      transform: scaleX(0);
      transform-origin: 0 50%;
      animation: progress-grow linear both;
      animation-timeline: scroll(root block);
    }

    /* The header earns its separation from the page only once you have left
       the top of it. */
    @keyframes header-settle {
      to { box-shadow: 0 10px 30px -18px rgba(12, 14, 13, 0.45); }
    }
    .site-header {
      animation: header-settle linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 140px;
    }
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  :root { --gutter: 20px; }

  .reason-grid { grid-template-columns: 1fr; gap: 30px; }
  .section { padding-block: 68px; }
  .hero { padding-block: 72px 60px; }
  .site-footer .wrap { justify-content: center; text-align: center; }

  /* The body size that reads well on a wide screen is slightly loud in a
     narrow column, and the display sizes need more room to breathe than the
     desktop clamps give them at this width. */
  body { font-size: 17px; }
  .hero .lede { font-size: 19px; }
  .belief { font-size: 21px; }
}