/* ==========================================================================
   Balanced Bites
   One stylesheet, in the order the page uses it:

     1.  Tokens          - change these to restyle everything
     2.  Reset & base
     3.  Layout helpers  - .wrap, .prose, .grid
     4.  Chrome          - skip link, progress bar, chapter rail
     5.  Masthead
     6.  Chapter shell   - headings, ghost numerals, section tints
     7.  Text pieces     - lead, pull quote, caption, note
     8.  Media           - .frame, before/after wipe, video embed
     9.  Content blocks  - steps, crops, rota, plate, benefits, stats, goals
     10. Footer
     11. Motion & reveal
     12. Print
   ========================================================================== */


/* 1. TOKENS ============================================================== */

:root {
  /* Paper and ink */
  --paper:        #f6f1e4;
  --paper-deep:   #efe7d5;
  --paper-card:   #fffdf7;
  --ink:          #17211a;
  --ink-soft:     #4d5a51;
  --rule:         rgba(23, 33, 26, .14);

  /* Greens */
  --moss:         #2c4a33;   /* headings, dark bands */
  --leaf:         #6c9a4c;   /* the accent green */
  --leaf-deep:    #3f6b40;
  --leaf-pale:    #cfe0b8;

  /* Everything else in the garden */
  --terracotta:   #bf5a38;   /* pots, soil, the warm accent */
  --soil:         #5a4534;
  --wheat:        #d8a548;
  --sun:          #e0b64a;
  --water:        #5a8fa8;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rhythm */
  --measure:      64ch;         /* comfortable reading width */
  --gutter:       clamp(1.25rem, 5vw, 4rem);
  --page:         1120px;       /* widest the content ever gets */
  --step:         clamp(3.5rem, 9vw, 7rem);  /* space between chapters */
  --radius:       3px;
}


/* 2. RESET & BASE ======================================================== */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .25vw, 1.12rem);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Faint paper grain over the whole page. Delete this block for a flat look. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  line-height: 1.1;
  color: var(--moss);
  margin: 0 0 .5em;
  text-wrap: balance;
}

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

em { font-style: italic; }

a {
  color: var(--leaf-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
a:hover { color: var(--terracotta); }

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

img, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; list-style: none; }


/* 3. LAYOUT HELPERS ====================================================== */

.wrap {
  width: min(100% - 2 * var(--gutter), var(--page));
  margin-inline: auto;
}

/* Text sits in a narrower column than photos do. */
.prose { max-width: var(--measure); }

.grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }


/* 4. CHROME ============================================================== */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--moss);
  color: var(--paper);
  text-decoration: none;
  border-radius: var(--radius);
  transition: top .15s;
}
.skip-link:focus { top: 1rem; color: var(--paper); }

/* Scroll progress. --progress is set by js/main.js, 0 to 1. */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 50;
  background: rgba(23, 33, 26, .07);
}
.progress__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--leaf-deep), var(--leaf));
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
}

/* The vertical "stem" of chapter dots down the left edge.
   Hidden on narrow screens - the progress bar covers that case. */
.stem {
  position: fixed;
  left: clamp(.75rem, 2.2vw, 1.75rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
}
@media (min-width: 1180px) { .stem { display: block; } }

.stem__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .95rem;
}
/* the stem itself */
.stem__list::before {
  content: "";
  position: absolute;
  left: 8px;               /* lines up with the centre of the dots */
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--rule);
}

.stem__link {
  position: relative;
  display: flex;
  align-items: center;
  padding: .2rem;          /* a bigger target than the dot itself */
  text-decoration: none;
  color: var(--ink-soft);
  font-size: .78rem;
  letter-spacing: .02em;
}
.stem__dot {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--rule);
  background: var(--paper);
  transition: background .25s, border-color .25s, transform .25s;
}
/* The chapter title only appears on hover or keyboard focus, and floats
   above the page rather than pushing the text column across. */
.stem__label {
  position: absolute;
  left: 1.7rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  translate: -6px 0;
  padding: .25rem .75rem;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: var(--paper-card);
  box-shadow: 0 8px 18px -14px rgba(23, 33, 26, .8);
  transition: opacity .2s ease, translate .2s ease;
}
.stem__link:hover .stem__label,
.stem__link:focus-visible .stem__label {
  opacity: 1;
  translate: 0 0;
}
.stem__link:hover .stem__dot { border-color: var(--leaf); }
.stem__link[aria-current="true"] .stem__dot {
  background: var(--leaf);
  border-color: var(--leaf-deep);
  transform: scale(1.25);
}
.stem__link[aria-current="true"] { color: var(--moss); font-weight: 600; }
/* a dot already passed */
.stem__link.is-past .stem__dot { background: var(--leaf-pale); border-color: var(--leaf-pale); }


/* 5. MASTHEAD ============================================================ */

.masthead {
  padding-top: clamp(3rem, 9vh, 6rem);
  padding-bottom: clamp(2rem, 6vw, 4rem);
  background:
    radial-gradient(120% 90% at 50% 0%, #fbf8ef 0%, var(--paper) 62%);
}

.masthead__inner { text-align: center; }

.sprout {
  width: clamp(56px, 8vw, 84px);
  height: auto;
  margin: 0 auto 1.4rem;
  display: block;
  fill: none;
  stroke-linecap: round;
}
.sprout__stem { stroke: var(--leaf-deep); stroke-width: 4; }
.sprout__soil { stroke: var(--soil); stroke-width: 4; opacity: .5; }
.sprout__leaf { fill: var(--leaf); stroke: var(--leaf-deep); stroke-width: 2.5; }

.masthead__kicker {
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: .8rem;
}

.masthead__title {
  font-size: clamp(3.2rem, 13vw, 8.5rem);
  font-weight: 700;
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144;
  letter-spacing: -.02em;
  line-height: .92;
  margin: 0 0 .35em;
}

.masthead__blurb {
  max-width: 46ch;
  margin-inline: auto;
  font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem);
  color: var(--ink-soft);
}

.masthead__meta {
  margin-top: 1.6rem;
  display: flex;
  justify-content: center;
  gap: .6rem;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 2.2rem;
  padding: .55rem 1.1rem .55rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-size: .85rem;
  text-decoration: none;
  color: var(--moss);
  background: var(--paper-card);
  transition: border-color .2s, transform .2s;
}
.scroll-cue:hover { border-color: var(--leaf); transform: translateY(2px); color: var(--moss); }
.scroll-cue svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  animation: nudge 2.4s ease-in-out infinite;
}
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

.masthead__photo {
  width: min(100% - 2 * var(--gutter), 1400px);
  margin: clamp(2.5rem, 7vw, 5rem) auto 0;
}


/* 6. CHAPTER SHELL ======================================================= */

.chapter {
  position: relative;
  padding-block: var(--step);
}
/* a hairline between chapters, but not above the first one */
.chapter + .chapter:not(.chapter--tint):not(.chapter--dark)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - 2 * var(--gutter), var(--page));
  height: 1px;
  background: var(--rule);
}

.chapter--tint { background: var(--paper-deep); }

.chapter--dark {
  background: var(--moss);
  color: var(--paper);
}
.chapter--dark h2, .chapter--dark h3 { color: var(--paper); }
.chapter--dark .eyebrow { color: var(--leaf-pale); }
.chapter--dark .chapter__ghost { color: rgba(246, 241, 228, .09); }
.chapter--dark .lead { color: rgba(246, 241, 228, .82); }
.chapter--dark a { color: var(--leaf-pale); }

.chapter__head {
  position: relative;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.chapter__head h2 {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 90;
  max-width: 18ch;
  margin: 0;
}

.eyebrow {
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 .7rem;
}

/* The big washed-out numeral behind each chapter title. */
.chapter__ghost {
  position: absolute;
  right: -.04em;
  top: 50%;
  transform: translateY(-52%);
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 13rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(44, 74, 51, .07);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.chapter__head h2, .chapter__head .eyebrow { position: relative; z-index: 1; }


/* 7. TEXT PIECES ========================================================= */

.lead {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + .8vw, 1.6rem);
  font-weight: 400;
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 40;
  line-height: 1.4;
  color: var(--moss);
}

.pull {
  margin: clamp(2.5rem, 6vw, 4rem) 0;
  padding-left: clamp(1rem, 3vw, 2rem);
  border-left: 3px solid var(--terracotta);
  max-width: 34ch;
}
.pull p {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.4rem);
  font-style: italic;
  font-variation-settings: "SOFT" 70, "WONK" 1;
  line-height: 1.25;
  color: var(--moss);
  margin: 0;
}

.caption, figcaption {
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.caption--center { text-align: center; margin-top: .85rem; }

.note {
  margin-top: 2rem;
  font-size: .88rem;
  color: rgba(246, 241, 228, .6);
  border-top: 1px solid rgba(246, 241, 228, .18);
  padding-top: 1rem;
}


/* 8. MEDIA =============================================================== */

/* Every photo and video on the page sits in a .frame. */
.frame {
  margin: 0;
  background: var(--paper-card);
  padding: .55rem .55rem 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(23, 33, 26, .05), 0 12px 28px -18px rgba(23, 33, 26, .5);
}
/* The width/height attributes on each <img> already reserve the right
   space, so the page does not jump about while photos load. */
.frame img, .frame video {
  width: 100%;
  border-radius: 1px;
  background: var(--paper-deep);
}
.frame figcaption { padding: .7rem .35rem .8rem; }

.frame--wide { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* A gentle tilt, like a photo dropped on a desk. Straightens on hover.
   Uses the standalone `rotate` property so the reveal animation below can
   own `translate` without the two fighting each other. */
.frame--tilt-l { rotate: -.9deg; }
.frame--tilt-r { rotate: .9deg; }
.frame--tilt-l, .frame--tilt-r { transition: rotate .35s ease; }
.frame--tilt-l:hover, .frame--tilt-r:hover { rotate: 0deg; }

/* Missing photo? js/main.js adds .is-empty and the file name.
   You get a dashed slot that says what to drop in, instead of a broken icon. */
.frame.is-empty img, .frame.is-empty video { display: none; }
.frame.is-empty::before {
  content: "add  " attr(data-file);
  display: grid;
  place-content: center;
  width: 100%;
  aspect-ratio: var(--ratio, 4 / 3);
  max-height: 46vh;   /* a missing wide photo should not eat a whole screen */
  border: 1.5px dashed rgba(23, 33, 26, .25);
  border-radius: 2px;
  background: repeating-linear-gradient(
    45deg,
    transparent 0 10px,
    rgba(23, 33, 26, .035) 10px 20px
  );
  color: var(--ink-soft);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .78rem;
  letter-spacing: .02em;
  text-align: center;
  padding: 1rem;
}

/* Responsive iframe box, for the YouTube option in chapter 06. */
.embed { aspect-ratio: 16 / 9; }
.embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- Before / after wipe ------------------------------------------------
   --pos is set by js/main.js from the range input. With JavaScript off you
   still see both photos: the "after" one simply sits at its start position. */
.ba {
  --pos: 55%;
  position: relative;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  /* the hatch shows through until both photos exist */
  background: repeating-linear-gradient(
    45deg,
    var(--paper-deep) 0 10px,
    rgba(23, 33, 26, .04) 10px 20px
  );
  box-shadow: 0 12px 28px -18px rgba(23, 33, 26, .5);
}
.ba__img {
  width: 100%;
  aspect-ratio: 14 / 9;
  object-fit: cover;
  display: block;
}
.ba__img--after {
  position: absolute;
  inset: 0;
  height: 100%;
  clip-path: inset(0 0 0 var(--pos));
}
.ba__tag {
  position: absolute;
  bottom: .8rem;
  padding: .25rem .7rem;
  border-radius: 100px;
  background: rgba(23, 33, 26, .72);
  color: var(--paper);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
}
.ba__tag--l { left: .8rem; }
.ba__tag--r { right: .8rem; }

/* The handle is a real <input type=range>, so keyboard and touch work free. */
.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}
.ba__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  background: var(--leaf-deep);
  box-shadow: 0 0 0 1px rgba(23, 33, 26, .25), 0 2px 8px rgba(23, 33, 26, .35);
  cursor: ew-resize;
}
.ba__range::-moz-range-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  background: var(--leaf-deep);
  box-shadow: 0 0 0 1px rgba(23, 33, 26, .25), 0 2px 8px rgba(23, 33, 26, .35);
  cursor: ew-resize;
}
/* the vertical seam that follows the handle */
.ba::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--paper);
  pointer-events: none;
  opacity: .9;
}


/* 9. CONTENT BLOCKS ====================================================== */

/* --- Numbered steps, chapter 03 --- */
.steps {
  counter-reset: step;
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3.4rem;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -.15rem;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
}
.steps h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.steps p { font-size: .95rem; color: var(--ink-soft); margin: 0; }

/* --- Crop list, chapter 04 --- */
.crops {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid;
  gap: 0;
}
.crops li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .1rem 1rem;
  align-items: start;
  padding: 1.4rem 0;
  border-top: 1px solid var(--rule);
}
.crops li:last-child { border-bottom: 1px solid var(--rule); }
.crops li::before {
  content: "";
  grid-row: 1 / 3;
  width: 14px;
  height: 14px;
  margin-top: .45rem;
  border-radius: 50%;
  background: var(--dot, var(--leaf));
}
.crops h3 { font-size: 1.25rem; margin: 0; }
.crops__alt { font-family: var(--font-body); font-size: .8em; color: var(--ink-soft); font-weight: 400; }
.crops p { color: var(--ink-soft); margin: .3rem 0 0; max-width: 58ch; }

/* --- Care rota table, chapter 06 --- */
.table-scroll {
  margin-top: clamp(2rem, 5vw, 3rem);
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-card);
}
.rota {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: .95rem;
}
.rota caption {
  text-align: left;
  padding: 1rem 1.1rem .4rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--moss);
}
.rota th, .rota td {
  text-align: left;
  padding: .75rem 1.1rem;
  border-top: 1px solid var(--rule);
  vertical-align: top;
}
.rota thead th {
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
.rota tbody th { font-weight: 600; color: var(--moss); white-space: nowrap; }
.rota tbody td { color: var(--ink-soft); }
.rota tbody tr:nth-child(even) { background: rgba(23, 33, 26, .022); }

/* --- The balanced plate, chapter 07 --- */
.plate {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.plate li {
  padding: 1.15rem 1.25rem 1.3rem;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--bed, var(--leaf));
  border-radius: var(--radius);
}
.plate h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.plate p { font-size: .93rem; color: var(--ink-soft); margin: 0; }

/* --- Who benefits, chapter 08 --- */
.benefits {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid;
  gap: 1.4rem clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.benefits li { padding-top: 1rem; border-top: 2px solid var(--leaf); }
.benefits h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.benefits p { font-size: .93rem; color: var(--ink-soft); margin: 0; }

/* --- Impact numbers, chapter 09 --- */
.stats {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.stat { border-top: 1px solid rgba(246, 241, 228, .22); padding-top: 1rem; }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 2rem + 4vw, 4.6rem);
  font-weight: 700;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 120;
  line-height: 1;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-top: .55rem;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--leaf-pale);
}

/* --- Future goals, chapter 10 --- */
.goals {
  margin-top: clamp(2rem, 5vw, 3rem);
  max-width: 62ch;
}
.goals li {
  position: relative;
  padding: .9rem 0 .9rem 2.4rem;
  border-bottom: 1px solid var(--rule);
}
.goals li::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: 1.25rem;
  width: 13px;
  height: 13px;
  background: var(--leaf);
  /* a leaf: round on two opposite corners */
  border-radius: 0 100% 0 100%;
  transform: rotate(-20deg);
}

.cta {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--terracotta);
  border-radius: var(--radius);
  max-width: 52ch;
}
.cta h3 { font-size: 1.3rem; }
.cta__contact { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .95rem; }


/* 10. FOOTER ============================================================= */

.footer {
  background: var(--moss);
  color: rgba(246, 241, 228, .75);
  padding-block: clamp(3rem, 7vw, 5rem);
  text-align: center;
}
.footer__mark {
  width: 44px;
  height: auto;
  margin: 0 auto 1.25rem;
  display: block;
  fill: none;
  stroke-linecap: round;
  opacity: .9;
}
.footer .sprout__leaf { fill: var(--leaf); stroke: var(--leaf-pale); }
.footer .sprout__stem { stroke: var(--leaf-pale); }
.footer__line { color: var(--paper); max-width: 44ch; margin-inline: auto; }
.footer__small { font-size: .84rem; margin-bottom: .4rem; }
.footer a { color: var(--leaf-pale); }


/* 11. MOTION & REVEAL ==================================================== */

html { scroll-behavior: smooth; }

/* .reveal is added by js/main.js. Without JavaScript nothing is ever
   hidden, so the page still reads fine. */
.reveal {
  opacity: 0;
  translate: 0 16px;
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1),
              translate .7s cubic-bezier(.2, .7, .3, 1);
}
.reveal.is-in { opacity: 1; translate: none; }

/* stagger children inside a grid or list */
.reveal:nth-child(2) { transition-delay: .08s; }
.reveal:nth-child(3) { transition-delay: .16s; }
.reveal:nth-child(4) { transition-delay: .24s; }
.reveal:nth-child(5) { transition-delay: .32s; }
.reveal:nth-child(6) { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; translate: none; }
  .frame--tilt-l, .frame--tilt-r { rotate: none; }
}


/* 12. PRINT ============================================================== */

@media print {
  body::after, .stem, .progress, .scroll-cue, .ba__range { display: none; }
  .chapter, .masthead { page-break-inside: avoid; padding-block: 1.5rem; }
  .chapter--dark { background: #fff; color: #000; }
  .chapter--dark h2, .chapter--dark .stat__num { color: #000; }
  .frame { box-shadow: none; rotate: none; }
}