/* ---------------------------------------------------------------
   Overeating · Malnutrition · Student — landing page
   --------------------------------------------------------------- */

:root {
  --ink: #fbf8f3;
  /* headline — warm white, picks up the banana stems */
  --ink-bright: #ffffff;
  /* hover / active state */
  --base: #141a12;
  /* dark base behind the photo */

  --pad-x: clamp(1.5rem, 4.5vw, 5rem);
  --pad-y: clamp(2rem, 10vh, 7rem);

  /* ---- article palette ---- */
  --paper: #fbfaf8;
  --ink-dark: #191b16;
  /* body copy */
  --ink-muted: #575c4e;
  /* lead paragraphs, kickers */
  --leaf: #3a5a2c;
  /* accent: the "what works" blocks */
  --leaf-tint: #f1f5ec;
  --rule: #e4e2db;
  --stone: #f0eee9;
  /* the quiet band behind the portrait */
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

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

html,
body {
  margin: 0;
  padding: 0;
}

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

body {
  min-height: 100vh;
  background: var(--base);
  font-family: "Open Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* =========================== home page ============================ */

/* Plain for now: paper, ink, and a bar across the top. */
body.home {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink-dark);
}

/* --------------------------- opening film -------------------------- */

.film {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0d100b;
}

.film__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Shade top and bottom for the bar and the controls, plus a soft pool
   through the middle so the title holds up whatever the footage is
   doing behind it. Kept low so the film still reads. */
.film__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 10, 7, .62) 0%, rgba(8, 10, 7, 0) 26%),
    linear-gradient(0deg, rgba(8, 10, 7, .55) 0%, rgba(8, 10, 7, 0) 24%),
    radial-gradient(115% 75% at 50% 46%,
      rgba(8, 10, 7, .58) 0%,
      rgba(8, 10, 7, .3) 48%,
      rgba(8, 10, 7, .04) 78%);
}


/* ------------------------------ the title -------------------------- */

.film__inner {
  position: relative;
  z-index: 2;
  max-width: min(90vw, 46rem);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  text-align: center;
}

.film__title {
  margin: 0;
  font-size: clamp(2rem, 6.2vw, 5.25rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
  text-shadow:
    0 1px 3px rgba(8, 10, 7, .6),
    0 4px 40px rgba(8, 10, 7, .7);
  animation: rise 1.1s cubic-bezier(.2, .7, .3, 1) .25s backwards;
}

.film__sub {
  margin: clamp(1rem, 2.5vh, 1.6rem) auto 0;
  max-width: 34ch;
  font-size: clamp(1rem, 1.7vw, 1.375rem);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(251, 248, 243, .86);
  text-shadow: 0 2px 20px rgba(8, 10, 7, .8);
  animation: rise 1.1s cubic-bezier(.2, .7, .3, 1) .45s backwards;
}

.film__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.75rem, 5vh, 3rem);
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  transition: border-color .25s ease, background .25s ease;
}

.film__cue:hover,
.film__cue:focus-visible {
  border-color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .12);
}

.film__cueArrow {
  width: .6rem;
  height: .6rem;
  margin-top: -.2rem;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  rotate: 45deg;
  animation: nudge 2s ease-in-out infinite;
}


/* ---------------------------- sound toggle ------------------------- */

.sound {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  z-index: 5;

  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem;
  border: 0;
  background: transparent;

  font-family: inherit;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;

  opacity: .8;
  transition: opacity .25s ease;
}

.sound:hover,
.sound:focus-visible {
  opacity: 1;
}

.sound__label {
  text-shadow: 0 1px 10px rgba(8, 10, 7, .8);
}

.sound svg {
  width: 1.4rem;
  height: 1.4rem;
  filter: drop-shadow(0 1px 6px rgba(8, 10, 7, .8));
}

/* the icon carries the state: crossed out when silent, waves when not */
.sound[aria-pressed="false"] .sound__waves,
.sound[aria-pressed="true"] .sound__slash {
  display: none;
}


/* ----------------------------- masthead ---------------------------- */

/* The chapter page opens dark and hands over to white paper. Without
   this the reference pages just started as white documents and the two
   halves of the site did not look related. Same rhythm, no photograph. */
.masthead {
  background: var(--base);
  color: var(--ink);
}

/* A photograph behind the band instead of flat colour. The scrim is
   heavier on the left, where the text sits, and lifts on the right so
   the picture still reads. Page supplies --masthead-img inline. */
.masthead--photo {
  position: relative;
  isolation: isolate;
  background-image:
    linear-gradient(96deg,
      rgba(10, 12, 14, .88) 0%,
      rgba(10, 12, 14, .7) 34%,
      rgba(10, 12, 14, .38) 62%,
      rgba(10, 12, 14, .3) 100%),
    linear-gradient(180deg, rgba(10, 12, 14, .5) 0%, rgba(10, 12, 14, 0) 22%),
    var(--masthead-img);
  background-size: cover, cover, cover;
  background-position: center, center, center 35%;
  background-repeat: no-repeat;
}

.masthead--photo .masthead__inner {
  padding-top: clamp(4rem, 16vh, 9rem);
  padding-bottom: clamp(4rem, 16vh, 9rem);
}

@media (max-width: 700px) {
  .masthead--photo {
    /* the riders sit right of centre; keep them in frame when it crops */
    background-position: center, center, 68% 40%;
  }
}

.masthead__inner {
  max-width: 40rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 9vh, 5rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 11vh, 6rem);
}

.masthead__kicker {
  margin: 0 0 1rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(251, 248, 243, .6);
}

.masthead__title {
  margin: 0;
  font-size: clamp(1.9rem, 4.6vw, 3.5rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.015em;
}

.masthead__lead {
  margin: clamp(1rem, 2.5vh, 1.5rem) 0 0;
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(251, 248, 243, .78);
}


/* ------------------------------ top bar ---------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
}

/* Laid over the film rather than above it, so the video runs full
   bleed to the top of the window. Everything inside goes white. */
.topbar--onDark {
  border-bottom: 0;
}

.topbar--over {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  border-bottom: 0;
}

.topbar--over .topbar__brand,
.topbar--over .topbar__item,
.topbar--onDark .topbar__brand,
.topbar--onDark .topbar__item {
  color: var(--ink);
  text-shadow: 0 1px 12px rgba(8, 10, 7, .8);
}

.topbar--over .topbar__item:hover,
.topbar--over .topbar__item[aria-expanded="true"],
.topbar--onDark .topbar__item:hover,
.topbar--onDark .topbar__item[aria-expanded="true"] {
  background: rgba(255, 255, 255, .14);
  color: var(--ink-bright);
}

.topbar--over .learn__link,
.topbar--onDark .learn__link {
  color: var(--ink);
  text-shadow: 0 1px 12px rgba(8, 10, 7, .8);
}

.topbar--over .learn__link:hover,
.topbar--over .learn__link:focus-visible,
.topbar--onDark .learn__link:hover,
.topbar--onDark .learn__link:focus-visible {
  background: rgba(255, 255, 255, .14);
  color: var(--ink-bright);
}

.topbar__brand {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink-dark);
  text-decoration: none;
}

.topbar__nav {
  display: flex;
  gap: .25rem;
}

/* anchors the Learn panel to the item that opened it */
.topbar__section {
  position: relative;
}

/* used by both the Learn button and the Built by link, so it has to
   strip button chrome and link chrome alike */
.topbar__item {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
  padding: .5rem .75rem;
  border: 0;
  border-radius: .4rem;
  background: transparent;

  font-family: inherit;
  font-size: .9375rem;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.topbar__item:hover,
.topbar__item[aria-expanded="true"] {
  background: rgba(25, 27, 22, .06);
  color: var(--ink-dark);
}

.topbar__item[aria-current="page"] {
  color: rgba(25, 27, 22, .38);
}

.topbar--over .topbar__item[aria-current="page"],
.topbar--onDark .topbar__item[aria-current="page"] {
  color: rgba(251, 248, 243, .5);
}


/* ------------------------- author portrait ------------------------ */

.prose .portrait {
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 5vh, 3rem);
}

.portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .5rem;
}


/* ------------------------- the Learn panel ------------------------ */

/* Anchored to its right edge, not its left. The Learn button sits at
   the right end of the bar, so opening leftwards is what keeps the
   panel on screen instead of pushing the page sideways. */
.learn {
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  z-index: 50;
  animation: panelIn .24s cubic-bezier(.2, .7, .3, 1) backwards;
}

.learn__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.learn__link {
  display: block;
  padding: .5rem .75rem;
  border-radius: .4rem;
  /* one line, however long the title gets */
  white-space: nowrap;
  font-size: .9375rem;
  color: var(--ink-muted);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.learn__link:hover,
.learn__link:focus-visible {
  background: rgba(25, 27, 22, .07);
  color: var(--ink-dark);
}

/* the page you are already on */
.learn__link[aria-current="page"] {
  color: rgba(25, 27, 22, .38);
}

.topbar--over .learn__link[aria-current="page"],
.topbar--onDark .learn__link[aria-current="page"] {
  color: rgba(251, 248, 243, .45);
}


/* ------------------------- plain main area ------------------------ */

.stage {
  max-width: 40rem;
  margin-inline: auto;
  padding: clamp(4rem, 18vh, 10rem) clamp(1.25rem, 4vw, 3rem);
}

.stage__kicker {
  margin: 0 0 .9rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.stage__title {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

/* the film has already made the argument; this is just a placeholder
   for what is being built, so it is centred and given room */
.stage--soon {
  min-height: 44vh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.stage__text {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-muted);
}



/* ============================ home icon ============================ */

/* Mirrors the menu button on the opposite corner: bare icon, no
   chrome, and it flips to dark over the white article pages through
   the same .on-paper switch. */
.homelink {
  position: fixed;
  top: clamp(1rem, 2.5vh, 1.75rem);
  left: clamp(1rem, 3vw, 2.5rem);
  z-index: 100;

  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--ink);

  opacity: .88;
  transition: opacity .25s ease, color .25s ease;
}

.homelink:hover,
.homelink:focus-visible {
  opacity: 1;
}

.homelink svg {
  width: 1.35rem;
  height: 1.35rem;
  filter: drop-shadow(0 1px 5px rgba(8, 14, 8, .55));
}

body.on-paper .homelink {
  color: var(--ink-dark);
}

body.on-paper .homelink svg {
  filter: none;
}


/* ============================== menu ============================== */

/* Bare icon, no chrome at all. The hit area is kept at 2.75rem even
   though nothing is drawn there, so it stays comfortably tappable. */
.menu {
  position: fixed;
  top: clamp(1rem, 2.5vh, 1.75rem);
  right: clamp(1rem, 3vw, 2.5rem);
  z-index: 100;

  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: transparent;

  color: var(--ink);
  cursor: pointer;

  opacity: .88;
  transition: opacity .25s ease, color .25s ease;
}

/* Nothing left to light up on hover, so the bars themselves respond. */
.menu:hover,
.menu:focus-visible {
  opacity: 1;
}

.menu:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .8);
  outline-offset: 3px;
}

/* Two bars that cross into an X, reusing the 45 degree rake the
   headline marks are built on. */
.menu__icon {
  position: relative;
  width: 1.05rem;
  height: .5rem;
}

.menu__icon::before,
.menu__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition:
    top .3s cubic-bezier(.2, .7, .3, 1),
    rotate .3s cubic-bezier(.2, .7, .3, 1);
}

.menu__icon::before {
  top: 0;
}

.menu__icon::after {
  top: calc(100% - 1.5px);
}

.menu[aria-expanded="true"] .menu__icon::before,
.menu[aria-expanded="true"] .menu__icon::after {
  top: calc(50% - .75px);
}

.menu[aria-expanded="true"] .menu__icon::before {
  rotate: 45deg;
}

.menu[aria-expanded="true"] .menu__icon::after {
  rotate: -45deg;
}


/* ---------------------------- the panel --------------------------- */

/* No card, no border, no fill. Just the words hanging under the icon,
   so the only chrome left in the whole menu is the hover highlight. */
.menu__panel {
  position: fixed;
  top: calc(clamp(1rem, 2.5vh, 1.75rem) + 3.1rem);
  right: clamp(1rem, 3vw, 2.5rem);
  z-index: 99;

  border: 0;
  background: transparent;

  animation: panelIn .28s cubic-bezier(.2, .7, .3, 1) backwards;
}

@keyframes panelIn {
  from {
    opacity: 0;
    translate: 0 -.5rem;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Items stretch to the width of the longest word, so every hover
   highlight is the same length instead of tracking its own label. */
.menu__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__link {
  display: block;
  padding: .42rem .7rem;
  border-radius: .4rem;
  font-size: 1rem;
  /* flush left inside the equal-width boxes, which stay anchored to
     the right margin under the icon */
  text-align: left;
  color: var(--ink);
  text-decoration: none;
  /* the words now sit straight on the photograph, so they need the
     same shadow the headline uses to survive a bright patch */
  text-shadow:
    0 1px 3px rgba(8, 14, 8, .55),
    0 2px 16px rgba(8, 14, 8, .6);
  transition: background .2s ease, color .2s ease, text-shadow .25s ease;
}

.menu__link:hover,
.menu__link:focus-visible {
  background: rgba(255, 255, 255, .1);
  color: var(--ink-bright);
  outline: none;
}

.menu__link:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
}

/* separates moving around inside the piece from leaving it */
.menu__heading {
  margin: 0 .7rem .15rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: left;
  color: rgba(251, 248, 243, .5);
  text-shadow: 0 1px 10px rgba(8, 14, 8, .8);
}

.menu__list+.menu__heading {
  margin-top: .9rem;
}

.menu__link[aria-current="page"] {
  color: rgba(251, 248, 243, .45);
}

body.on-paper .menu__heading {
  color: rgba(25, 27, 22, .45);
  text-shadow: none;
}

body.on-paper .menu__link[aria-current="page"] {
  color: rgba(25, 27, 22, .4);
}


/* ------------------- over the white article pages ------------------ */

/* The menu is fixed, so it drifts off the photography and onto paper
   as you scroll. script.js puts .on-paper on <body> whenever an
   article is actually behind the button, and the whole thing inverts. */

body.on-paper .menu {
  color: var(--ink-dark);
}

body.on-paper .menu:focus-visible {
  outline-color: rgba(25, 27, 22, .65);
}

body.on-paper .menu__link {
  color: var(--ink-dark);
  text-shadow: none;
}

body.on-paper .menu__link:hover,
body.on-paper .menu__link:focus-visible {
  background: rgba(25, 27, 22, .07);
  color: var(--ink-dark);
}

body.on-paper .menu__link:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(25, 27, 22, .4);
}



/* ------------------------------ hero ------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

/* The photograph. Centred so the motorcycle and the standing figure
   stay in frame while the left third carries the headline.
   The gradient underneath is the fallback if assets/hero.jpg is
   missing — dark, so white type never lands on a blank white page. */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: var(--base);
  background-image:
    url("assets/hero.jpg"),
    linear-gradient(160deg, #2f3d26 0%, #1d2718 55%, #141a12 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center;
  background-size: cover, cover;
}

/* Readability layer. Two stacked gradients:
   the diagonal one anchors the headline's left column, the top-down
   one knocks back the blown-out sky so white type doesn't dissolve
   into it. Tinted a desaturated forest black rather than neutral
   grey so it reads as shade in the scene, not a grey film over it. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(102deg,
      rgba(14, 21, 12, .82) 0%,
      rgba(14, 21, 12, .66) 26%,
      rgba(14, 21, 12, .28) 50%,
      rgba(14, 21, 12, 0) 72%),
    linear-gradient(180deg,
      rgba(12, 18, 11, .52) 0%,
      rgba(12, 18, 11, .10) 32%,
      rgba(12, 18, 11, 0) 55%);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding: var(--pad-y) var(--pad-x);
}


/* ---------------------------- headline ---------------------------- */

.headline {
  margin: 0;
  /* stays at regular — a light weight goes fragile over a busy photo */
  font-weight: 400;
  font-size: clamp(2.5rem, 7.6vw, 8rem);
  line-height: 1.14;
  letter-spacing: -.005em;
  max-width: 12ch;
  /* carries the type over the busiest patches of foliage */
  text-shadow:
    0 1px 2px rgba(8, 14, 8, .45),
    0 4px 30px rgba(8, 14, 8, .5);
}

.headline__line {
  display: block;
}


/* ------------------------- the word buttons ------------------------ */

.word {
  /* strip the UA button chrome — these are type first, controls second */
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-block;
  margin: 0 0 0 -.22em;
  /* pull the padding back so the left edge stays flush */
  padding: .04em .22em .10em;
  border: 0;
  background: transparent;

  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;

  transition:
    color .3s ease,
    text-shadow .35s ease,
    transform .3s cubic-bezier(.2, .7, .3, 1);
}

/* The mark: two very short parallel lines sitting off the word's top
   right corner, both raked to 45 degrees. Drawn as one rotated box
   with a line gradient pinned to its top and bottom edge, so the pair
   stays perfectly parallel at any size. Sized in em, so it scales
   with the headline instead of shrinking on mobile. */
.word::after {
  content: "";
  position: absolute;
  top: .16em;
  right: -.30em;
  width: .34em;
  height: .14em;
  rotate: 45deg;
  background:
    linear-gradient(currentColor, currentColor) left top / 100% .045em no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 100% .045em no-repeat;
  filter: drop-shadow(0 1px 6px rgba(8, 14, 8, .6));

  /* parked back down the diagonal, so it slides out along the same
     axis the lines are drawn on */
  opacity: 0;
  translate: -.24em .24em;
  transition:
    opacity .32s ease,
    translate .42s cubic-bezier(.2, .7, .3, 1);
}

/* Hover: the mark flicks out to the corner and the type blooms. The
   glow is layered white on white, which reads as the colour going
   soft at the edges while the letterforms themselves stay sharp. */
.word:hover,
.word:focus-visible {
  color: var(--ink-bright);
  text-shadow:
    0 0 .06em rgba(255, 255, 255, .55),
    0 0 .22em rgba(255, 255, 255, .45),
    0 0 .6em rgba(255, 255, 255, .22),
    0 2px 16px rgba(8, 14, 8, .5);
  transform: translateX(.02em);
}

.word:hover::after,
.word:focus-visible::after {
  opacity: 1;
  translate: 0 0;
}

/* No panel to carry a focus ring anymore, so the keyboard state gets
   a real outline of its own on top of the hover treatment. */
.word:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .75);
  outline-offset: .06em;
  border-radius: .1em;
}

.word:active {
  transform: translateX(.02em) translateY(1px);
}


/* ---------------------------- entrance ---------------------------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(.32em);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.headline__line {
  animation: rise .85s cubic-bezier(.2, .7, .3, 1) backwards;
}

.headline__line:nth-child(1) {
  animation-delay: .10s;
}

.headline__line:nth-child(2) {
  animation-delay: .22s;
}

.headline__line:nth-child(3) {
  animation-delay: .34s;
}


/* --------------------------- responsive --------------------------- */

/* Portrait / narrow: the frame crops to the centre of the scene, which
   is the busiest part of it — so the scrim swings top-down and gets
   heavier to keep a clean band behind the type. */
@media (max-width: 860px) {
  .hero__photo {
    background-position: 58% center, center;
  }

  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(12, 18, 11, .86) 0%,
        rgba(12, 18, 11, .62) 34%,
        rgba(12, 18, 11, .18) 62%,
        rgba(12, 18, 11, .35) 100%);
  }

  .headline {
    font-size: clamp(2.25rem, 11vw, 4.5rem);
    max-width: 9ch;
  }
}

/* Short landscape windows — keep all three lines on screen. */
@media (max-height: 560px) and (orientation: landscape) {
  :root {
    --pad-y: clamp(1.25rem, 6vh, 2.5rem);
  }

  .headline {
    font-size: clamp(2rem, 6.4vh, 4rem);
  }
}

/* Touch devices get no hover state, so the mark is parked at the
   corner permanently — otherwise nothing reads as tappable. */
@media (hover: none) {
  .word::after {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .word:hover,
  .word:focus-visible,
  .word:active {
    transform: none;
  }
}


/* --------------------- the arriving image ------------------------- */

/* A throwaway copy of a chapter image, used only while one view is
   handing over to another. Sits under the fixed menu and home icon so
   those stay put, and takes no clicks. */
.slide {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(100%);
}

/* the copy is exactly one window tall, not one window minimum */
.slide .chapter__hero {
  height: 100%;
  min-height: 0;
}


/* =================================================================
   CHAPTER — all three are in the page from the start, so it reads as
   one continuous scroll. The headline words are shortcuts into it.
   ================================================================= */


/* --------------------- chapter image + title --------------------- */

.chapter__hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

/* Each chapter supplies its own photo through --chapter-img; the
   gradient behind it is the fallback if the file is missing. */
.chapter__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: #2a2620;
  background-image:
    var(--chapter-img),
    linear-gradient(160deg, #4a4238 0%, #322c25 55%, #241f1a 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center;
  background-size: cover, cover;
}

[data-chapter="overeating"] {
  --chapter-img: url("assets/overeating.jpg");
}

[data-chapter="malnutrition"] {
  --chapter-img: url("assets/eatingburger.jpg");
}

[data-chapter="student"] {
  --chapter-img: url("assets/student.jpg");
}

/* The student photo is already dim and golden, so the standard scrim
   would crush it. Lighter, and tinted amber rather than neutral, to
   keep the warmth of the room the picture is selling. */
[data-chapter="student"] .chapter__scrim {
  background:
    linear-gradient(180deg,
      rgba(26, 16, 8, .66) 0%,
      rgba(26, 16, 8, .34) 24%,
      rgba(26, 16, 8, 0) 52%),
    linear-gradient(0deg,
      rgba(26, 16, 8, .42) 0%,
      rgba(26, 16, 8, 0) 26%);
}

/* The photo is bright and cream coloured almost everywhere, so the
   title needs its own band of shade at the top to sit in. Tinted
   warm rather than neutral so it reads as the room's own shadow. */
.chapter__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(24, 20, 16, .78) 0%,
      rgba(24, 20, 16, .52) 22%,
      rgba(24, 20, 16, .10) 45%,
      rgba(24, 20, 16, 0) 62%),
    linear-gradient(0deg,
      rgba(24, 20, 16, .45) 0%,
      rgba(24, 20, 16, 0) 25%);
}

.chapter__heroInner {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding: clamp(2rem, 7vh, 4.5rem) var(--pad-x) 0;
}

.chapter__title {
  margin: 0;
  font-weight: 400;
  font-size: clamp(2.1rem, 6.4vw, 6rem);
  line-height: 1.08;
  letter-spacing: .01em;
  color: var(--ink);
  text-shadow:
    0 1px 2px rgba(20, 16, 12, .5),
    0 4px 30px rgba(20, 16, 12, .55);
}

.chapter__standfirst {
  margin: clamp(.75rem, 2vh, 1.25rem) 0 0;
  max-width: 34ch;
  font-size: clamp(1rem, 1.6vw, 1.375rem);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(251, 248, 243, .88);
  text-shadow: 0 2px 18px rgba(20, 16, 12, .6);
}


/* scroll cue */

.chapter__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.75rem, 5vh, 3rem);
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  transition: background .25s ease, border-color .25s ease;
}

.chapter__cue:hover,
.chapter__cue:focus-visible {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .85);
}

.chapter__cueArrow {
  width: .6rem;
  height: .6rem;
  margin-top: -.2rem;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  rotate: 45deg;
  animation: nudge 2s ease-in-out infinite;
}

@keyframes nudge {

  0%,
  100% {
    transform: translateY(-.12rem);
  }

  50% {
    transform: translateY(.12rem);
  }
}


/* ------------------------- the white page ------------------------- */

.prose {
  background: var(--paper);
  color: var(--ink-dark);
  padding: clamp(3.5rem, 12vh, 8rem) var(--pad-x) clamp(4rem, 14vh, 9rem);
}

.prose>* {
  max-width: 40rem;
  margin-inline: auto;
}

.prose p {
  /* deliberately large: this page is meant to be read, not skimmed */
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.75;
  margin: 0 0 1.15em;
}


/* article header */

.prose__head {
  margin-bottom: clamp(2.5rem, 7vh, 4.5rem);
}

/* Note: the .prose__* and .fix__* rules below are scoped with a
   leading .prose so they outrank the blanket `.prose p` sizing. */

.prose .prose__kicker {
  margin: 0 0 .9rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--leaf);
}

.prose__title {
  margin: 0 0 1.4rem;
  font-size: clamp(1.85rem, 4.2vw, 3.1rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.015em;
  color: var(--ink-dark);
}

.prose .prose__lead {
  font-size: clamp(1.1875rem, 1.75vw, 1.4375rem);
  line-height: 1.6;
  color: var(--ink-muted);
}


/* the five points */

.point {
  padding-top: clamp(2rem, 5vh, 3rem);
  border-top: 1px solid var(--rule);
  margin-bottom: clamp(2.25rem, 6vh, 3.5rem);
}

/* on the masthead pages the article opens straight into a point, and
   a rule there would sit just under the dark band looking like a seam */
.prose>.point:first-child {
  padding-top: 0;
  border-top: 0;
}

.point__title {
  margin: 0 0 1.1rem;
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink-dark);
}


/* "what works" block — the only colour on the page, so the reader can
   find the actionable half at a glance */

.fix {
  margin-top: 1.6rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.15rem, 2.5vw, 1.75rem);
  border-left: 3px solid var(--leaf);
  border-radius: 0 .375rem .375rem 0;
  background: var(--leaf-tint);
}

.prose .fix__label {
  margin: 0 0 .5rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--leaf);
}

.fix p:last-child {
  margin-bottom: 0;
}

/* Shopping list. Two columns so it reads as a glanceable list rather
   than a paragraph you have to parse. */
.prose .fix__list {
  margin: .1rem 0 1.15rem;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.95;
  color: var(--ink-dark);
}

.fix__list li {
  break-inside: avoid;
}

.fix__list li::before {
  content: "•";
  margin-right: .55rem;
  color: var(--leaf);
  font-weight: 700;
}

@media (max-width: 520px) {
  .prose .fix__list {
    columns: 1;
  }
}


.prose .sources {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.sources li {
  margin-bottom: .85rem;
  padding-left: 1rem;
  text-indent: -1rem;
}

.sources a {
  color: var(--leaf);
  text-underline-offset: .18em;
}


/* close */

.prose__foot {
  padding-top: clamp(2rem, 5vh, 3rem);
  border-top: 1px solid var(--rule);
}

.prose .prose__close {
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.65;
  font-weight: 600;
  color: var(--ink-dark);
}

/* Plain text link. No pill, no border, no transition. */
.backlink {
  display: inline-block;
  margin-top: 1rem;
  font-size: .9375rem;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.backlink:hover {
  color: var(--ink-dark);
}


/* ------------------- portrait beside the text -------------------- */

/* Breaks out wider than the 40rem reading measure so it lands as a
   deliberate pause in the article rather than another paragraph.
   The stone panel exists because the photograph has a pale grey
   background of its own, which would otherwise bleed into the white
   page and leave the child floating with no edge. */
.prose .split {
  max-width: 62rem;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
  margin-block: clamp(2.5rem, 7vh, 4.5rem);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  background: var(--stone);
  border-radius: .5rem;
}

.split__photo {
  aspect-ratio: 2 / 3;
  border-radius: .375rem;
  background-color: #d8d5d0;
  background-image:
    url("assets/childnotenough.jpg"),
    linear-gradient(165deg, #cfccc6 0%, #a8a49d 100%);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  box-shadow: 0 26px 55px -32px rgba(30, 26, 20, .65);
}

.prose .split__quote {
  margin-bottom: 1.1rem;
  font-size: clamp(1.375rem, 2.7vw, 1.9375rem);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.015em;
  color: var(--ink-dark);
}

.split__text p:last-child {
  margin-bottom: 0;
}

/* Stack on narrow screens, and cap the portrait so it does not eat
   the whole viewport before the words beside it get read. */
@media (max-width: 760px) {
  .prose .split {
    grid-template-columns: 1fr;
  }

  .split__photo {
    width: 100%;
    max-width: 19rem;
    margin-inline: auto;
  }
}