/* ==========================================================================
   Balanced Bites
   ========================================================================== */


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

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

  --moss:         #2c4a33;
  --leaf:         #6c9a4c;
  --leaf-deep:    #3f6b40;
  --leaf-pale:    #cfe0b8;

  --terracotta:   #bf5a38;
  --soil:         #5a4534;
  --wheat:        #d8a548;
  --sun:          #e0b64a;
  --water:        #5a8fa8;

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

  --measure:      64ch;
  --gutter:       clamp(1.25rem, 5vw, 4rem);
  --page:         1120px;
  --step:         clamp(3.5rem, 9vw, 7rem);
  --radius:       3px;
}


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

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

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

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;
}

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;
}

.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));
}

/* Exactly two across, however wide the screen is. grid--2 above packs as
   many 320px columns as fit, which is right for photos and wrong for the
   chapter 01 clips - they need the room. Stacks on a phone. */
.grid--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 700px) {

  .grid--pair {
    grid-template-columns: 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);
}

.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%;
}

.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;
}

.stem__list::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--rule);
}

.stem__link {
  position: relative;
  display: flex;
  align-items: center;
  padding: .2rem;
  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;
}

.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;
}

.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;
}

/* The campaign badge at the top of the page. It is a round mark on a
   transparent background, so it sits straight on the paper colour. */
.logo {
  width: clamp(140px, 20vw, 210px);
  height: auto;
  margin: 0 auto 1.6rem;
  display: block;
}

.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);
  }
}

/* HERO IMAGE — CENTERING FIX */

.masthead .masthead__photo {
  width: min(1400px, calc(100% - 2 * var(--gutter)));
  max-width: 1400px;

  margin-top: clamp(2.5rem, 7vw, 5rem);
  margin-left: auto !important;
  margin-right: auto !important;

  padding: .55rem .55rem 0;
  display: block;
  position: relative;

  left: auto;
  right: auto;
  transform: none;
}

.masthead .masthead__photo img {
  display: block;
  width: 100%;
  height: auto;

  margin-left: auto;
  margin-right: auto;

  object-fit: cover;
  object-position: center center;
}


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

.chapter {
  position: relative;
  padding-block: var(--step);
}

.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;
}

.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 =============================================================== */

.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);
}

.frame img,
.frame video {
  width: 100%;
  border-radius: 1px;
  background: var(--paper-deep);
}

.frame figcaption {
  padding: .7rem .35rem .8rem;
}

/*
   Normal wide frames get their standard top margin.
   Masthead image is excluded because it has its own centering/margin rules.
*/
.frame--wide:not(.masthead__photo) {
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.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;
}

.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;
  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;
}

.embed {
  aspect-ratio: 16 / 9;
}

.embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


/* BEFORE / AFTER ========================================================= */

.ba {
  --pos: 55%;
  position: relative;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;

  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;
}

.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;
}

.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 ====================================================== */

.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 */

.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;
}


/* TABLE */

.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);
}


/* BALANCED PLATE */

.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;
}


/* BENEFITS */

.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;
}


/* STATS */

.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 */

.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);
  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 ==================================================== */

.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;
}

.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. MOBILE ============================================================= */

@media (max-width: 600px) {

  .masthead .masthead__photo {
    width: calc(100% - 2rem);
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .masthead__title {
    font-size: clamp(3rem, 17vw, 5rem);
  }

  .masthead__meta {
    flex-wrap: wrap;
  }
}


/* 13. 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;
  }
}

/* ============================================================
   CAPTIONS

   Most pictures speak for themselves and their figcaption is
   left blank, so an empty caption takes up no room. Type
   something into a figcaption and it shows.
   ============================================================ */

figcaption:empty {
  display: none;
}

/* ============================================================
   14. UNIFORM PHOTO BOXES

   The photos come from phones, so they are a mix of tall and
   wide. Left alone, two pictures side by side end up different
   heights and the rows look ragged.

   So: every picture box is given a shape, and the photo is
   cropped to fill it. Rows line up whatever the camera did.

   The shape is one variable, --shape. To change a whole row,
   change the number on that row. Handy shapes:

     4 / 5   upright, good for phone photos held vertically
     1 / 1   square
     4 / 3   a classic photo
     3 / 2   slightly wide
     16 / 9  cinema wide
   ============================================================ */

.frame img,
.frame video {
  display: block;
  aspect-ratio: var(--shape, 4 / 3);
  object-fit: cover;
  object-position: center;
}

/* Photos in a two- or three-across row. Most were shot upright,
   so an upright box crops the least. */
.grid .frame img {
  --shape: 4 / 5;
}

/* Videos in a row keep whatever shape they were filmed in. A photo can be
   cropped to match its neighbours; a clip cannot, so it sits inside a
   16:9 box instead, with the paper colour showing at the sides. */
.grid .frame video {
  --shape: 16 / 9;
  object-fit: contain;
}

/* Put grid--wide on a row whose photos were shot sideways.
   Example:  <div class="grid grid--2 grid--wide">          */
.grid--wide .frame img {
  --shape: 3 / 2;
}

/* Full-width photos and the video. */
.frame--wide img,
.frame--wide video {
  --shape: 16 / 9;
}

/* The drag-to-compare pair. Both halves share one shape or the
   wipe does not line up. */
.ba__img {
  --shape: 4 / 3;
  aspect-ratio: var(--shape);
}

/* On a narrow phone a wide box gets too short to see anything,
   so the wide pictures stand up a little. */
@media (max-width: 600px) {

  .frame--wide img,
  .frame--wide video,
  .ba__img {
    --shape: 3 / 2;
  }
}


/* ============================================================
   15. THE UPRIGHT CLIP

   The care video was filmed on a phone, so it is taller than it
   is wide. Stretched across the page it would be cropped to a
   letterbox slit, so it gets a narrow, centred column instead
   and keeps its own shape.
   ============================================================ */

.frame--clip {
  width: min(380px, 100%);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  margin-inline: auto;
}

/* The clip's own shape is set on the <figure> in the HTML, next to the
   video it belongs to, because it changes whenever the file changes:

     <figure class="frame frame--clip" style="--shape: 478 / 850">

   Nothing here to edit - put the clip's real width / height in that line. */


/* ============================================================
   16. THE TWO SIDE PAGES  (about.html, contact.html)
   Everything above is shared. This block only holds the few
   pieces that exist nowhere on the story page.
   ============================================================ */

/* A shorter masthead. The story page opens with a big photo under
   the title; these pages go straight into the text, so the head
   does not need to be as tall. */
.masthead--page {
  padding-bottom: clamp(1rem, 3vw, 2rem);
}

/* The three page links in the footer. */
.sitenav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.6rem;
  margin-top: 1.2rem;
  font-size: .85rem;
}

/* The page you are already on is not worth clicking. */
.sitenav a[aria-current="page"] {
  text-decoration: none;
  opacity: .55;
}


/* CONTACT DETAILS
   A label on the left, the detail on the right. On a phone the two
   stack instead, because the label column eats too much width. */
.contact-list {
  margin-top: clamp(2rem, 5vw, 3rem);
  max-width: 52ch;
}

.contact-list li {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: .3rem 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--rule);
}

.contact-list__label {
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--terracotta);
  padding-top: .25rem;
}

@media (max-width: 540px) {

  .contact-list li {
    grid-template-columns: 1fr;
  }
}


/* THE MESSAGE FORM
   Three moving parts, and none of them are decoration:

     - the label lifts out of the box once the box has something in it,
       so the question stays readable while you answer it
     - a stem grows down the left, one leaf per field, so you can see how
       much is left without counting
     - the button says what it is doing while it does it

   All of it stops moving on its own if the visitor has asked their
   system for reduced motion — see the block at the end of section 11. */

.form {
  margin-top: clamp(2rem, 5vw, 3rem);
  max-width: 46rem;
}

.form__note {
  font-size: .9rem;
  color: var(--ink-soft);
  margin-bottom: 1.8rem;
}


/* THE STEM
   Two lines lying on top of each other: a faint one the full height, and
   a green one squashed down to --grown, which the script sets between
   0 and 1 as fields get filled. */
.form__rows {
  position: relative;
  padding-left: 2rem;
}

.form__rows::before,
.form__rows::after {
  content: "";
  position: absolute;
  left: .4rem;
  top: .9rem;
  bottom: 1.4rem;
  width: 2px;
  border-radius: 2px;
}

.form__rows::before {
  background: var(--rule);
}

.form__rows::after {
  background: var(--leaf);
  transform-origin: top;
  scale: 1 var(--grown, 0);
  transition: scale .55s cubic-bezier(.4, 0, .2, 1);
}

.form__row {
  position: relative;
  margin-bottom: 1.15rem;
}

/* One leaf per field, sitting on the stem. Same leaf shape as the goals
   list on the story page. */
.form__row::before {
  content: "";
  position: absolute;
  left: -1.88rem;
  top: 1.2rem;
  width: 11px;
  height: 11px;
  background: var(--rule);
  border-radius: 0 100% 0 100%;
  rotate: -20deg;
  transition: background .3s ease, scale .35s cubic-bezier(.34, 1.56, .64, 1);
}

.form__row.is-done::before {
  background: var(--leaf);
  scale: 1.4;
}


/* THE FIELDS
   Roomy top padding, because that is where the label goes once it lifts. */
.form input,
.form select,
.form textarea {
  font: inherit;
  color: var(--ink);
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.55rem .9rem .6rem;
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease, min-height .25s ease;
}

.form textarea {
  resize: vertical;
  min-height: 8rem;
}

.form textarea:focus {
  min-height: 11rem;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(108, 154, 76, .18);
}

/* A filled field stays marked, so you can see at a glance what is done. */
.form input:not(:placeholder-shown),
.form textarea:not(:placeholder-shown) {
  border-color: rgba(108, 154, 76, .55);
}


/* THE LIFTING LABEL
   It sits over the field until the field has content, then shrinks up into
   the space at the top. The label is after the input in the HTML so the
   sibling selectors below can reach it. */
.form label {
  position: absolute;
  left: .95rem;
  top: 1.05rem;
  font-size: 1rem;
  color: var(--ink-soft);
  pointer-events: none;
  transform-origin: left top;
  transition: translate .2s ease, scale .2s ease, color .2s ease;
}

.form input:focus + label,
.form input:not(:placeholder-shown) + label,
.form textarea:focus + label,
.form textarea:not(:placeholder-shown) + label,
.form__row--select label {
  translate: 0 -.75rem;
  scale: .78;
  color: var(--terracotta);
}

/* A dropdown always has a value, so its label starts lifted and stays there. */
.form__row--select select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--moss) 50%),
    linear-gradient(135deg, var(--moss) 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) calc(50% + .2rem),
    calc(100% - .85rem) calc(50% + .2rem);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}


/* THE BUTTON AND THE COUNT */
.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.4rem;
  margin-top: 1.8rem;
  padding-left: 2rem;
}

.form__send {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--paper);
  background: var(--moss);
  border: 0;
  border-radius: var(--radius);
  padding: .9rem 1.7rem;
  cursor: pointer;
  transition: background .2s ease, translate .18s ease, box-shadow .2s ease;
}

.form__send:hover {
  background: var(--leaf-deep);
  translate: 0 -2px;
  box-shadow: 0 8px 18px rgba(44, 74, 51, .22);
}

.form__send:active {
  translate: 0 0;
  box-shadow: none;
}

/* While the mail app is opening. The dots are the only thing on the page
   that loops, and they stop after the button is put back. */
.form__send.is-sending {
  background: var(--leaf);
  pointer-events: none;
}

/* Three dots revealed one at a time by widening a clipped box. Animating
   the text itself does not work in every browser; animating a width does. */
.form__send.is-sending .form__send-text::after {
  content: "...";
  display: inline-block;
  width: 0;
  overflow: hidden;
  vertical-align: bottom;
  animation: sending 1.2s steps(4, jump-none) infinite;
}

@keyframes sending {
  to {
    width: 3ch;
  }
}

.form__status {
  font-size: .86rem;
  color: var(--ink-soft);
  margin: 0;
}


/* The rows arrive one after another when the form scrolls into view.
   js/main.js puts .is-in on the form; the stagger is all below. */
.form.is-in .form__row {
  animation: rowIn .5s cubic-bezier(.2, .7, .3, 1) both;
}

.form.is-in .form__row:nth-child(2) { animation-delay: .07s; }
.form.is-in .form__row:nth-child(3) { animation-delay: .14s; }
.form.is-in .form__row:nth-child(4) { animation-delay: .21s; }

@keyframes rowIn {
  from {
    opacity: 0;
    translate: 0 14px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}


@media (max-width: 540px) {

  /* The stem costs 2rem of width the fields need more. */
  .form__rows,
  .form__foot {
    padding-left: 1.5rem;
  }

  .form__row::before {
    left: -1.4rem;
  }

  .form__rows::before,
  .form__rows::after {
    left: .2rem;
  }
}

/* The "Choose one" option is not a real answer, so it reads as placeholder
   text until something is picked. */
.form select:invalid {
  color: var(--ink-soft);
}


/* THE TEAM
   Four cards. Each photo sits at a slight angle and straightens when you
   point at it, which is the same idea as the tilted photos on the story
   page — the page is a scrapbook, not a brochure.

   The cards arrive one after another on scroll for free: js/main.js puts
   .reveal on every direct child of a .grid, and section 11 already staggers
   those by position. */

.team {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}

.team__member {
  text-align: center;
}

/* Odd cards lean one way, even cards the other. */
.team__member:nth-child(odd) .frame {
  rotate: -1.4deg;
}

.team__member:nth-child(even) .frame {
  rotate: 1.4deg;
}

.team__member .frame {
  margin: 0;
  transition: rotate .35s cubic-bezier(.2, .7, .3, 1),
              translate .35s cubic-bezier(.2, .7, .3, 1),
              box-shadow .35s ease;
}

.team__member:hover .frame,
.team__member:focus-within .frame {
  rotate: 0deg;
  translate: 0 -6px;
  box-shadow: 0 18px 34px -20px rgba(23, 33, 26, .75);
}

/* A green edge that is not there until you look at the card. */
.team__member .frame img {
  border-radius: var(--radius);
  outline: 0 solid var(--leaf);
  outline-offset: 4px;
  transition: outline-width .3s ease, scale .5s cubic-bezier(.2, .7, .3, 1);
}

.team__member:hover .frame img,
.team__member:focus-within .frame img {
  outline-width: 2px;
  scale: 1.03;
}

.team__name {
  position: relative;
  display: inline-block;
  margin: 1.05rem 0 0;
  font-size: 1.08rem;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 40;
}

/* An underline that grows out from the middle, like the stem does. */
.team__name::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.28rem;
  width: 100%;
  height: 2px;
  background: var(--leaf);
  border-radius: 2px;
  translate: -50% 0;
  scale: 0 1;
  transition: scale .32s cubic-bezier(.2, .7, .3, 1);
}

.team__member:hover .team__name::after,
.team__member:focus-within .team__name::after {
  scale: 1 1;
}

.team__role {
  margin: .55rem 0 0;
  font-size: .84rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terracotta);
}


/* TOP-RIGHT PAGE BUTTONS
   Fixed rather than scrolled away, so the other two pages are one click from
   anywhere on a long page. They sit on a card-coloured pill so they stay
   readable over the dark chapter as well as over the paper. */

.topnav {
  position: fixed;
  top: clamp(.9rem, 2vw, 1.5rem);
  right: clamp(.75rem, 1.4vw, 1.15rem);
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .4rem;
}

.topnav a {
  padding: .45rem .85rem;
  border: 1px solid var(--rule);
  border-radius: 100px;
  color: var(--moss);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 16px -12px rgba(23, 33, 26, .9);
  transition: background .2s ease, color .2s ease,
              translate .18s ease, box-shadow .2s ease;

  /* Frosted rather than solid, so a photo or a table underneath still shows
     through instead of vanishing behind a block of cream. Browsers without
     backdrop-filter get the solid card colour from the first line. */
  background: var(--paper-card);
  background: color-mix(in srgb, var(--paper-card) 78%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.topnav a:hover {
  background: var(--moss);
  color: var(--paper);
  translate: 0 -2px;
  box-shadow: 0 10px 20px -11px rgba(23, 33, 26, .9);
}

/* The page you are already on is not worth clicking. */
.topnav a[aria-current="page"] {
  background: transparent;
  border-color: transparent;
  color: var(--ink-soft);
  box-shadow: none;
  pointer-events: none;
}

@media (max-width: 620px) {

  .topnav {
    top: .7rem;
    right: .7rem;
    gap: .3rem;
  }

  .topnav a {
    padding: .4rem .75rem;
    font-size: .72rem;
  }

  /* Leave room for the buttons above the badge. */
  .masthead {
    padding-top: 4.75rem;
  }
}


/* A CARD THAT MUST NOT BE CROPPED
   For a made graphic with words on it. Wider than the phone-clip column so
   the text is readable, centred, and it keeps whatever shape the file is -
   put the real width / height in a --shape on the <img> itself:

     <img src="..." style="--shape: 1121 / 1403" ...>                      */

.frame--card {
  width: min(560px, 100%);
  margin-inline: auto;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}