/* ==========================================================================
   Rooted Nutrition — V3 · Almanac
   A seasonal almanac from a nutritional therapist. Editorial: a visible
   12-column grid, hairline rules, Fraunces set large and tight, plates with
   numbered captions, the journal at its heart.
   ========================================================================== */

:root {
  /* paper & ink */
  --paper: #F5F3EC;
  --paper-2: #EDEADF;          /* insets, coupon, form sheet */
  --paper-3: #E3E8D3;          /* matcha-tinted plate ground */
  --ink: #1A2620;
  --ink-2: #33423A;            /* body copy (9:1 on paper) */
  --muted: #5A665E;            /* meta & captions (5.4:1) */
  --matcha: #5A7C27;           /* display italics, marks, rules (3:1+ large only) */
  --matcha-ink: #4A6A1F;       /* text-size links & labels (5.6:1) */
  --spruce: #1D3B31;           /* masthead strip, footer, one feature band */
  --spruce-2: #17322A;
  --on-spruce: #F5F3EC;
  --on-spruce-2: #BFCBC2;
  --leaf: #C5DB8C;             /* italics on spruce */
  --yuzu: #EFE59A;             /* highlighter pen */
  --error: #9B2C1F;

  --rule: rgba(26, 38, 32, 0.17);
  --rule-2: rgba(26, 38, 32, 0.34);
  --rule-dark: rgba(245, 243, 236, 0.22);
  --guide: rgba(90, 124, 39, 0.11);

  /* type */
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs: 0.75rem;                                        /* 12 labels */
  --fs-sm: 0.875rem;                                       /* 14 meta */
  --fs-ui: 0.9375rem;                                      /* 15 nav, buttons */
  --fs-body: clamp(1.0625rem, 1.01rem + 0.22vw, 1.1875rem); /* 17–19 */
  --fs-lede: clamp(1.25rem, 1.1rem + 0.6vw, 1.5625rem);     /* 20–25 */
  --fs-h4: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);        /* 20–24 */
  --fs-h3: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);          /* 24–34 */
  --fs-h2: clamp(2.25rem, 1.55rem + 2.9vw, 4.375rem);       /* 36–70 */
  --fs-h1: clamp(2.75rem, 1.7rem + 4.6vw, 6.75rem);         /* 44–108 */
  --fs-cover: clamp(2.9rem, 1.4rem + 5.6vw, 6.4rem);        /* 46–102 */

  /* layout */
  --wrap: 1344px;
  --gutter: clamp(18px, 4vw, 48px);
  --gap: clamp(14px, 2.2vw, 32px);
  --section: clamp(72px, 9vw, 136px);
  --measure: 38rem;
  --bar-h: 76px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-body);
  font-weight: 370;
  line-height: 1.6;
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
main { display: block; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
p { margin: 0 0 1em; text-wrap: pretty; hanging-punctuation: first; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
blockquote { margin: 0; }
b, strong { font-weight: 560; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--yuzu); color: var(--ink); }
::placeholder { color: var(--muted); opacity: 1; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 330;
  font-variation-settings: "opsz" 144;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h3 { font-size: var(--fs-h3); font-weight: 360; line-height: 1.12; letter-spacing: -0.012em; font-variation-settings: "opsz" 72; }
h4 { font-size: var(--fs-h4); font-weight: 420; line-height: 1.2; letter-spacing: -0.005em; font-variation-settings: "opsz" 36; }
:is(h1, h2, h3, h4) em {
  font-style: italic;
  font-weight: 300;
  color: var(--matcha);
  letter-spacing: -0.01em;
}
h4 em { color: var(--matcha-ink); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.prose a, .link, p a:not(.btn):not(.more) {
  color: var(--matcha-ink);
  text-decoration-color: color-mix(in srgb, var(--matcha) 55%, transparent);
}
.prose a:hover, .link:hover, p a:not(.btn):not(.more):hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.on-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--on-spruce); }

/* the highlighter pen */
mark, .hl {
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(100deg, transparent 0.08em, var(--yuzu) 0.22em, var(--yuzu) calc(100% - 0.3em), transparent calc(100% - 0.06em));
  background-size: 100% 78%;
  background-position: 0 62%;
  background-repeat: no-repeat;
  padding: 0 0.16em;
  margin: 0 -0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 300;
  background: var(--ink); color: var(--paper);
  padding: 0.8rem 1.1rem; font-family: var(--sans); font-size: var(--fs-ui);
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* --------------------------------------------------------------------------
   Layout: wrap, the 12-column grid, sections, rules
   -------------------------------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section + .section:not(.band) { padding-top: 0; }

/* a column rule centred in the gutter to the left of an element */
.col-rule { position: relative; }
.col-rule::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--gap) / -2);
  width: 1px;
  background: var(--rule);
}

/* faint column guides: the grid made visible */
.guides { position: relative; isolation: isolate; }
.guides::before {
  --p: calc((100% + var(--gap)) / 12);
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(to right, var(--guide) 0 1px, transparent 1px var(--p)),
    repeating-linear-gradient(to right, transparent 0 calc(var(--p) - var(--gap) - 1px), var(--guide) calc(var(--p) - var(--gap) - 1px) calc(var(--p) - var(--gap)), transparent calc(var(--p) - var(--gap)) var(--p)),
    linear-gradient(to left, var(--guide) 0 1px, transparent 1px);
}

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule--ink { border-top-color: var(--ink); }

/* --------------------------------------------------------------------------
   Small type: labels, kickers, folios, meta
   -------------------------------------------------------------------------- */
.label, .kicker {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.35;
  margin: 0;
}
.kicker { color: var(--matcha-ink); }
.meta {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.num { font-variant-numeric: oldstyle-nums; }

.folio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  border-top: 1px solid var(--ink);
  padding-top: 0.75rem;
  margin-bottom: clamp(2.25rem, 4.5vw, 4rem);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}
.folio p { margin: 0; }
.folio .folio-h { font: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit; margin: 0; font-variation-settings: normal; text-wrap: wrap; }
.folio-no {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--matcha-ink);
  margin-right: 0.15em;
}
.folio .dash { color: var(--muted); margin-right: 0.35em; }
.folio a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  color: var(--ink);
}
.folio a svg { width: 13px; height: 13px; transition: transform 0.2s ease; }
.folio a:hover { text-decoration: underline; }
.folio a:hover svg { transform: translateX(3px); }
.folio-right { color: var(--muted); }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.45;
  font-weight: 340;
  font-variation-settings: "opsz" 36;
  color: var(--ink-2);
  max-width: 34ch;
}
.standfirst {
  font-size: var(--fs-lede);
  line-height: 1.42;
  font-weight: 330;
  font-style: italic;
  font-variation-settings: "opsz" 36;
  color: var(--ink-2);
  max-width: 40ch;
}
.body-copy { max-width: var(--measure); color: var(--ink-2); }
.small-print {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--muted);
  max-width: 62ch;
}
.small-print sup, .fn-mark { font-family: var(--serif); font-style: italic; color: var(--matcha-ink); font-size: 1em; vertical-align: baseline; }

/* --------------------------------------------------------------------------
   Buttons and link-arrows
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 0.95em 1.35em;
  font-family: var(--sans);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 1px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn svg { width: 15px; height: 15px; flex: none; transition: transform 0.2s ease; }
.btn:hover { background: var(--matcha-ink); border-color: var(--matcha-ink); }
.btn:hover svg { transform: translateX(3px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: var(--yuzu); border-color: var(--yuzu); color: var(--ink); }
.btn--sm { padding: 0.68em 1em; font-size: var(--fs-sm); }

.more {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--sans);
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2em;
}
.more svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.more:hover { color: var(--matcha-ink); }
.more:hover svg { transform: translateX(3px); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }

/* --------------------------------------------------------------------------
   Masthead & navigation
   -------------------------------------------------------------------------- */
.masthead { position: relative; z-index: 50; background: var(--paper); }
.ears {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem 2rem;
  padding: 0.55rem 0 0.5rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ears p { margin: 0; }
.ears i {
  font-family: var(--serif);
  font-size: 0.9375rem;
  font-weight: 370;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}
.ears .dash { margin: 0 0.3em; }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--bar-h);
  border-bottom: 1px solid var(--ink);
}
.nameplate-sm {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  z-index: 1;
}
.np-word {
  font-family: var(--serif);
  font-size: 2.125rem;
  font-weight: 350;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.03em;
  line-height: 1;
}
.np-sub {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--matcha-ink);
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 2rem);
  list-style: none;
}
.nav-list a:not(.btn) {
  font-family: var(--sans);
  font-size: var(--fs-ui);
  color: var(--ink);
  text-decoration: none;
  padding: 0.35rem 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.25s ease;
}
.nav-list a:not(.btn):hover { background-size: 100% 1px; }
.nav-list a[aria-current]:not(.btn) { background-size: 100% 1px; }
.nav-list a[aria-current]:not(.btn)::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin: 0 0.5em 0.18em 0;
  background: var(--matcha);
  border-radius: 50%;
}
.nav-cta[aria-current] { background: var(--matcha-ink); border-color: var(--matcha-ink); }
.nav-no, .nav-extra { display: none; }

.menu-btn {
  display: none;
  align-items: center;
  gap: 0.7rem;
  position: relative;
  z-index: 1;
  padding: 0.6rem 0 0.6rem 0.8rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.menu-btn-icon { position: relative; width: 26px; height: 12px; }
.menu-btn-icon i {
  position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform 0.25s ease, top 0.25s ease;
}
.menu-btn-icon i:first-child { top: 1px; }
.menu-btn-icon i:last-child { top: 9px; }
.menu-open .menu-btn-icon i:first-child { top: 5px; transform: rotate(45deg); }
.menu-open .menu-btn-icon i:last-child { top: 5px; transform: rotate(-45deg); }

/* Home: the cover masthead */
.masthead--cover .bar { border-bottom: 0; min-height: 64px; }
.bar-date {
  margin: 0;
  position: relative;
  z-index: 1;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.bar-date span { color: var(--ink); }
.nameplate-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--gap);
  border-top: 3px solid var(--ink);
  padding-top: clamp(0.4rem, 1vw, 0.9rem);
}
.nameplate {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(5.25rem, 1rem + 14vw, 15rem);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  line-height: 0.82;
  letter-spacing: -0.05em;
  text-align: center;
  padding: 0 0.04em 0.07em 0;
  hanging-punctuation: none;
}
.nameplate-row .ear {
  margin: 0;
  padding-bottom: clamp(0.6rem, 1.6vw, 1.5rem);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ear--r { text-align: right; }
.issue-line {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: var(--gap);
  padding: 0.65rem 0 0.7rem;
  border-top: 1px solid var(--ink);
  border-bottom: 3px double var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.issue-line p { margin: 0; }
.issue-title {
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-style: italic;
  font-weight: 350;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
}
.issue-title .amp { color: var(--matcha-ink); }
.issue-avail { text-align: right; color: var(--muted); }

/* --------------------------------------------------------------------------
   Plates: drawn placeholders with numbered captions
   -------------------------------------------------------------------------- */
.plate { --plate-bg: var(--paper-3); --plate-ink: var(--spruce); --tint: #EEF1E2; }
.plate-art {
  position: relative;
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--plate-bg);
  color: var(--plate-ink);
}
.plate-art::before {             /* engraving hatch */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(-45deg, currentColor 0 0.6px, transparent 0.6px 7px);
  opacity: 0.075;
}
.plate-art::after {              /* plate mark */
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid currentColor;
  opacity: 0.32;
  pointer-events: none;
}
.plate-art svg { position: absolute; top: 11%; left: 14%; width: 72%; height: 78%; overflow: visible; }
.plate-art .plate-fig { position: absolute; right: 16px; bottom: 13px; font-family: var(--serif); font-style: italic; font-size: 0.8125rem; opacity: 0.8; }
.plate figcaption {
  margin-top: 0.75rem;
  font-family: var(--serif);
  font-size: 0.9375rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink-2);
  text-wrap: pretty;
}
.plate-no {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-right: 0.45em;
  white-space: nowrap;
}
.plate--wide .plate-art { aspect-ratio: 4 / 3; }
.plate--wide .plate-art svg { top: 12%; height: 76%; }
.plate--square .plate-art { aspect-ratio: 1; }
.plate--landscape .plate-art { aspect-ratio: 3 / 2; }
.plate--landscape .plate-art svg { top: 12%; height: 76%; }
.plate--tall .plate-art { aspect-ratio: 2 / 3; }
.plate--paper { --plate-bg: #E9E5D7; --plate-ink: #3F5A1C; --tint: var(--paper); }
.plate--spruce { --plate-bg: var(--spruce); --plate-ink: var(--leaf); --tint: #264A3E; }
.plate--sage { --plate-bg: #D6DFBF; --plate-ink: var(--spruce); --tint: #E9EEDA; }
.plate--stipple .plate-art::before {
  background: radial-gradient(circle, currentColor 0.7px, transparent 1.1px) 0 0 / 7px 7px;
  opacity: 0.14;
}
.plate--lines .plate-art::before {
  background: repeating-linear-gradient(0deg, currentColor 0 0.6px, transparent 0.6px 6px);
  opacity: 0.08;
}

/* --------------------------------------------------------------------------
   Home: cover
   -------------------------------------------------------------------------- */
.cover { padding: clamp(2rem, 4vw, 3.5rem) 0 var(--section); }
.cover-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  grid-template-areas:
    "h h h h h h h h p p p p"
    "l l l l c c c c p p p p";
  grid-template-rows: auto 1fr;
}
.cover-h {
  grid-area: h;
  font-size: var(--fs-cover);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.035em;
  padding: 0.1em 0 0.45em;
  max-width: 11.5em;
}
.cover-h em { display: inline; }
.cover-lede { grid-area: l; padding-top: 1.4rem; border-top: 1px solid var(--ink); display: flex; flex-direction: column; gap: 1.4rem; }
.cover-lede .lede { margin: 0; }
.cover-note { font-family: var(--sans); font-size: var(--fs-sm); color: var(--muted); margin: 0; display: flex; gap: 0.55rem; align-items: baseline; }
.cover-note::before { content: ""; width: 18px; height: 1px; background: var(--matcha); flex: none; transform: translateY(-0.3em); }
.editors-note { margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.editors-note .kicker { margin-bottom: 0.5rem; }
.editors-note p:not(.kicker) { font-size: 1.0625rem; line-height: 1.5; font-style: italic; color: var(--ink-2); margin-bottom: 0.6rem; }
.editors-note p.sig-line { font-family: var(--sans); font-style: normal; font-size: 0.8125rem; color: var(--muted); margin: 0; }
.cover-guides { grid-row: 1; grid-column: 1 / -1; z-index: -1; }
.cover-guides::before { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.cover + .section { padding-top: 0; }
.bar-date .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--matcha); margin-right: 0.6rem; transform: translateY(-1px); }
.cover-plate { grid-area: p; align-self: start; position: relative; }
.cover-plate::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); width: 1px; background: var(--rule); }
.cover-plate .plate-art { aspect-ratio: auto; height: clamp(420px, 50vw, 660px); }

.contents { grid-area: c; padding-top: 1.4rem; border-top: 1px solid var(--ink); position: relative; }
.contents::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); width: 1px; background: var(--rule); }
.contents-h {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.contents ol { list-style: none; counter-reset: toc; }
.contents li { border-bottom: 1px solid var(--rule); counter-increment: toc; }
.contents li:last-child { border-bottom: 0; }
.contents a {
  display: grid;
  grid-template-columns: 1.9rem 1fr auto;
  column-gap: 0.4rem;
  align-items: baseline;
  padding: 0.62rem 0 0.66rem;
  text-decoration: none;
  color: var(--ink);
}
.contents a::before {
  content: counter(toc);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--matcha-ink);
}
.toc-t { font-size: 1.125rem; line-height: 1.25; font-weight: 400; font-variation-settings: "opsz" 24; }
.toc-d { grid-column: 2; font-family: var(--sans); font-size: 0.8125rem; line-height: 1.4; color: var(--muted); margin-top: 0.15rem; }
.toc-p { grid-row: 1; grid-column: 3; font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.contents a:hover .toc-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* --------------------------------------------------------------------------
   Home: does this sound like you + what's good now
   -------------------------------------------------------------------------- */
.sly-main { grid-column: 1 / span 8; }
.sly-main h2 { font-size: var(--fs-h2); max-width: 13em; margin-bottom: 0.5em; }
.sly-main .body-copy { font-size: var(--fs-lede); line-height: 1.45; font-weight: 340; max-width: 32em; }
.symptoms { list-style: none; counter-reset: s; margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule-2); }
.symptoms li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  align-items: baseline;
  padding: 0.95rem 0 1rem;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(1.25rem, 1.02rem + 0.85vw, 1.75rem);
  line-height: 1.28;
  font-weight: 330;
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.008em;
}
.symptoms li::before { content: counter(s, lower-roman) "."; font-style: italic; font-size: 0.72em; color: var(--matcha-ink); }
.nodding {
  margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  line-height: 1.12;
  font-weight: 320;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.02em;
}
.nodding em { font-style: italic; }

.produce { grid-column: 9 / span 4; padding-left: calc(var(--gap) * 1.2); }
.produce-h { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem); margin: 0.45rem 0 0.6rem; }
.produce-intro { font-size: 1rem; line-height: 1.5; color: var(--ink-2); font-style: italic; margin-bottom: 1.2rem; }
.produce-list { list-style: none; border-top: 1px solid var(--ink); }
.produce-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
.produce-list svg { width: 44px; height: 54px; color: var(--spruce); --tint: var(--paper-3); grid-row: span 2; }
.produce-name { font-size: 1.1875rem; font-weight: 420; line-height: 1.2; font-variation-settings: "opsz" 24; margin: 0; }
.produce-note { font-family: var(--sans); font-size: 0.875rem; line-height: 1.5; color: var(--muted); margin: 0.2rem 0 0; }
.produce-note a { color: var(--matcha-ink); }
.produce-foot { margin-top: 1.1rem; }

/* --------------------------------------------------------------------------
   Home: the shift (from → to)
   -------------------------------------------------------------------------- */
.col-head { grid-column: 1 / span 4; }
.col-head h2 { font-size: var(--fs-h2); margin-bottom: 0.5em; }
.col-head p { color: var(--ink-2); max-width: 30ch; }
.col-main { grid-column: 6 / -1; }
.shift-list { grid-column: 6 / -1; list-style: none; border-top: 1px solid var(--ink); counter-reset: sh; }
.shift-list li {
  counter-increment: sh;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  row-gap: 0.15rem;
  padding: 1.05rem 0 1.15rem;
  border-bottom: 1px solid var(--rule);
}
.shift-list li::before { content: counter(sh, lower-roman) "."; grid-row: span 2; font-style: italic; color: var(--matcha-ink); font-size: 1rem; padding-top: 0.2rem; }
.shift-from {
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--muted);
  text-decoration: none;
}
.shift-from s { text-decoration-thickness: 1px; text-decoration-color: var(--matcha); }
.shift-to {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
  line-height: 1.1;
  font-weight: 330;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.02em;
}
.shift-legend { display: flex; gap: 1.5rem; margin-bottom: 0.75rem; }
.shift-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.shift-legend s { color: var(--muted); text-decoration-color: var(--matcha); }

/* --------------------------------------------------------------------------
   Story teaser, pull quotes, drop caps, signatures
   -------------------------------------------------------------------------- */
.story-plate { grid-column: 1 / span 4; }
.story-body { grid-column: 6 / span 6; }
.story-body h2 { font-size: var(--fs-h2); margin-bottom: 0.6em; }
.story-body > p { color: var(--ink-2); max-width: var(--measure); }

.dropcap::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: 4.35em;
  line-height: 0.8;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  padding: 0.07em 0.09em 0 0;
  margin-left: -0.04em;
  color: var(--ink);
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .dropcap::first-letter {
    float: none;
    -webkit-initial-letter: 3;
    initial-letter: 3;
    font-size: inherit;
    line-height: inherit;
    padding: 0;
    margin: 0 0.1em 0 0;
  }
}

.pull {
  margin: clamp(2rem, 4vw, 3rem) 0;
  padding: 1.4rem 0 1.5rem;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.pull p {
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.625rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 96;
  text-indent: -0.42em;         /* hang the opening quote */
  max-width: 22em;
  text-wrap: balance;
}
.pull .q { color: var(--matcha); }
.pull cite, .sig {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.sig { margin: 0 0 1.6rem; }

/* --------------------------------------------------------------------------
   Home: what I help with (index)
   -------------------------------------------------------------------------- */
.head-split { align-items: end; margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem); }
.head-split h2 { grid-column: 1 / span 7; font-size: var(--fs-h2); }
.head-split > p, .head-split > div { grid-column: 9 / -1; color: var(--ink-2); max-width: 36ch; margin: 0; }

.help-index {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  border-top: 1px solid var(--ink);
}
.help-index > li { position: relative; border-bottom: 1px solid var(--rule); }
.help-index > li:not(:nth-child(4n+1))::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); width: 1px; background: var(--rule);
}
.help-index > li > a, .help-index .help-unsure {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 1.3rem 0 1.6rem;
  text-decoration: none;
  color: var(--ink);
}
.hi-n { font-style: italic; font-size: 1.75rem; line-height: 1; color: var(--matcha); font-weight: 300; }
.hi-t { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.15; font-weight: 380; font-variation-settings: "opsz" 48; letter-spacing: -0.01em; }
.hi-d { font-style: italic; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
.hi-p { margin-top: auto; padding-top: 0.6rem; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--muted); }
.hi-p b { font-weight: 500; color: var(--ink); }
.help-index a:hover .hi-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.help-unsure { background: var(--paper-2); padding-inline: 1.2rem !important; margin-inline: calc(var(--gap) / -2) 0; }
.help-unsure p { margin: 0; }

/* --------------------------------------------------------------------------
   Spruce feature band
   -------------------------------------------------------------------------- */
.band--spruce {
  background: var(--spruce);
  color: var(--on-spruce);
  padding-block: var(--section);
}
main > .band--spruce:last-child { margin-bottom: clamp(3rem, 6vw, 5rem); }   /* keep a paper margin above the spruce footer */
.band--spruce .folio { border-top-color: var(--rule-dark); color: var(--on-spruce); }
.band--spruce .folio-no { color: var(--leaf); }
.band--spruce .folio .dash { color: var(--on-spruce-2); }
.band--spruce .folio a { color: var(--on-spruce); }
.band--spruce :is(h1, h2, h3) em { color: var(--leaf); }
.band--spruce p { color: var(--on-spruce-2); }
.band--spruce .kicker { color: var(--leaf); }
.band--spruce .more { color: var(--on-spruce); }
.band--spruce .more:hover { color: var(--leaf); }

.road-head h2 { grid-column: 1 / span 7; font-size: var(--fs-h2); color: var(--on-spruce); }
.road-head p { grid-column: 9 / -1; align-self: end; max-width: 36ch; }
.road-stops {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--gap);
  margin-top: clamp(3rem, 6vw, 5rem);
  position: relative;
}
.road-stops::before {             /* the road */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 5px;
  height: 1px;
  background: var(--rule-dark);
}
.road-stops li { position: relative; padding-top: 2.1rem; }
.road-stops li::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--spruce);
  border: 1px solid var(--leaf);
}
.road-stops li:last-child::before { background: var(--yuzu); border-color: var(--yuzu); box-shadow: 0 0 0 5px rgba(239, 229, 154, 0.18); }
.road-stops li + li::after {
  content: ""; position: absolute; top: 2.1rem; bottom: 0; left: calc(var(--gap) / -2); width: 1px; background: var(--rule-dark);
}
.stop-n {
  display: block;
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 4.25rem);
  font-weight: 300;
  line-height: 0.9;
  font-variation-settings: "opsz" 144;
  color: var(--leaf);
  margin-bottom: 1rem;
  font-style: italic;
}
.stop-k { display: block; font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-spruce-2); margin-bottom: 0.45rem; }
.road-stops h3 { font-size: clamp(1.3rem, 1.15rem + 0.55vw, 1.65rem); color: var(--on-spruce); margin-bottom: 0.55rem; }
.road-stops p { font-size: 0.98rem; line-height: 1.55; }
.road-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem 2rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule-dark);
}
.road-foot p { margin: 0; font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem); font-style: italic; font-weight: 300; color: var(--on-spruce); line-height: 1.25; max-width: 30ch; }

/* --------------------------------------------------------------------------
   Home: programmes tariff (a price list, not cards)
   -------------------------------------------------------------------------- */
.tariff { list-style: none; border-top: 1px solid var(--ink); }
.tariff > li {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: baseline;
  padding: clamp(1.4rem, 2.6vw, 2.1rem) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.t-no { grid-column: 1 / span 1; font-style: italic; color: var(--matcha-ink); font-size: 1.0625rem; }
.t-main { grid-column: 2 / span 5; }
.t-main h3 { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.75rem); font-weight: 320; letter-spacing: -0.02em; font-variation-settings: "opsz" 144; }
.t-main h3 a { text-decoration: none; }
.t-main h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.t-main p { margin-top: 0.55rem; color: var(--ink-2); font-size: 1.0625rem; max-width: 42ch; }
.t-meta { grid-column: 7 / span 3; margin: 0; display: grid; gap: 0.5rem; font-family: var(--sans); font-size: var(--fs-sm); line-height: 1.4; }
.t-meta div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.6rem; }
.t-meta dt { color: var(--muted); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 0.15em; }
.t-meta dd { margin: 0; }
.t-price { grid-column: 10 / -1; text-align: right; margin: 0; }
.price {
  display: block;
  font-size: clamp(2rem, 1.5rem + 1.7vw, 3.25rem);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
.price-note { display: block; margin-top: 0.45rem; font-family: var(--sans); font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }
.tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.6rem;
  padding: 0.28rem 0.5rem 0.22rem;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--yuzu);
  color: var(--ink);
  transform: translateY(-0.35em);
}
.tariff-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.2rem; align-items: baseline; }

/* --------------------------------------------------------------------------
   Quotes
   -------------------------------------------------------------------------- */
.quote { margin: 0; }
.quote blockquote p {
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem);
  line-height: 1.32;
  font-weight: 330;
  font-variation-settings: "opsz" 36;
  text-indent: -0.4em;
}
.quote figcaption {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.quote figcaption b { color: var(--ink); font-weight: 600; }
.quote--lead { grid-column: 1 / span 7; }
.quote--lead blockquote p {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.5rem);
  line-height: 1.1;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
  text-indent: -0.38em;
}
.quote-side { grid-column: 9 / -1; display: grid; gap: 0; align-content: start; }
.quote-side .quote { padding: 1.3rem 0 1.5rem; border-top: 1px solid var(--rule); }
.quote-side .quote:first-child { border-top: 1px solid var(--ink); }
.q { color: var(--matcha); }

/* --------------------------------------------------------------------------
   Journal entries (shared by home, journal, article)
   -------------------------------------------------------------------------- */
.entry { position: relative; }
.entry a.entry-link { text-decoration: none; color: inherit; display: block; }
.entry .plate { margin-bottom: 1.1rem; }
.entry .plate figcaption { display: none; }
.entry-k { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; align-items: baseline; margin-bottom: 0.55rem; }
.entry-k .kicker { color: var(--matcha-ink); }
.entry-k .meta { font-size: 0.8125rem; }
.entry h3 { font-size: clamp(1.35rem, 1.2rem + 0.55vw, 1.7rem); line-height: 1.14; font-weight: 360; margin-bottom: 0.5rem; }
.entry a.entry-link:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; }
.entry p { color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
.entry .meta { margin-top: 0.7rem; }
.entry--lead h3 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.06; font-weight: 320; font-variation-settings: "opsz" 144; }
.entry--lead p { font-size: 1.125rem; }

.latest { row-gap: 2.5rem; }
.latest .entry--lead { grid-column: 1 / span 6; }
.latest .entry:nth-child(2) { grid-column: 7 / span 3; }
.latest .entry:nth-child(3) { grid-column: 10 / span 3; }
.latest .entry:not(.entry--lead)::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); width: 1px; background: var(--rule); }

/* --------------------------------------------------------------------------
   Free guide: a cut-out coupon
   -------------------------------------------------------------------------- */
.coupon {
  position: relative;
  border: 1.5px dashed var(--rule-2);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  background: var(--paper-2);
}
.coupon-scissors {
  position: absolute;
  top: -12px;
  left: clamp(1.5rem, 4vw, 3rem);
  width: 24px; height: 24px;
  padding: 0 4px;
  box-sizing: content-box;
  background: var(--paper);
  color: var(--muted);
}
.coupon-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2rem; align-items: start; }
.coupon-intro { grid-column: 1 / span 5; }
.coupon-intro h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.5rem); margin: 0.6rem 0 0.8rem; }
.coupon-intro p { color: var(--ink-2); }
.coupon-list { grid-column: 7 / -1; list-style: none; counter-reset: g; border-top: 1px solid var(--ink); }
.coupon-list li { counter-increment: g; display: grid; grid-template-columns: 2rem 1fr; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); font-size: 1.125rem; line-height: 1.35; }
.coupon-list li::before { content: counter(g) "."; font-style: italic; color: var(--matcha-ink); }
.coupon-form { grid-column: 7 / -1; }
.guide-row { display: flex; gap: 0; margin-top: 0.4rem; }
.guide-row input {
  flex: 1;
  min-width: 0;
  padding: 0.9rem 1rem;
  font-family: var(--sans);
  font-size: 1rem;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-right: 0;
  border-radius: 0;
}
.guide-row .btn { flex: none; }
.form-label { display: block; font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.guide-status { font-family: var(--sans); font-size: var(--fs-sm); margin-top: 0.7rem; min-height: 1.4em; color: var(--muted); }
.guide-status.is-error { color: var(--error); }
.guide-status.is-ok { color: var(--ink); }
.guide-status.is-ok::before { content: ""; display: inline-block; width: 14px; height: 8px; border-left: 1.5px solid var(--matcha-ink); border-bottom: 1.5px solid var(--matcha-ink); transform: rotate(-45deg) translateY(-3px); margin-right: 0.6rem; }

/* --------------------------------------------------------------------------
   FAQ (details/summary)
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 22px;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.15rem 0 1.2rem;
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  line-height: 1.3;
  font-weight: 380;
  font-variation-settings: "opsz" 36;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 13px; height: 13px;
  justify-self: end;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 13px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 13px no-repeat;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { background: linear-gradient(var(--ink), var(--ink)) center / 13px 1.5px no-repeat; }
.faq summary:hover { color: var(--matcha-ink); }
.faq-a { padding: 0 3rem 1.4rem 0; color: var(--ink-2); max-width: 62ch; }

/* --------------------------------------------------------------------------
   Closing call to action
   -------------------------------------------------------------------------- */
.closing { padding-bottom: var(--section); }
.closing-inner { border-top: 3px double var(--ink); padding-top: clamp(2rem, 4vw, 3rem); }
.closing-h {
  font-size: clamp(3.25rem, 1.6rem + 7vw, 9rem);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0.8rem 0 clamp(1.8rem, 3.5vw, 3rem);
}
.closing-grid { align-items: end; }
.closing-grid > p { grid-column: 1 / span 6; font-size: var(--fs-lede); line-height: 1.45; font-weight: 340; color: var(--ink-2); max-width: 34ch; margin: 0; }
.closing-grid .closing-act { grid-column: 8 / -1; display: grid; gap: 1rem; justify-items: start; }
.closing-act .meta a { color: var(--ink); }

/* --------------------------------------------------------------------------
   Inner pages: page head
   -------------------------------------------------------------------------- */
.page-head { padding: clamp(1.5rem, 3.5vw, 3rem) 0 clamp(3rem, 6vw, 5.5rem); }
.page-head .folio { margin-bottom: clamp(1.75rem, 4vw, 3.25rem); }
.page-title {
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 13em;
}
.page-head-grid { align-items: end; row-gap: 2rem; }
.page-head-grid .page-title { grid-column: 1 / span 8; }
.page-head-grid .standfirst, .page-head-grid .page-intro { grid-column: 9 / -1; margin: 0; }
.page-intro { color: var(--ink-2); }
.page-intro p { max-width: 36ch; }

/* in-page index (numbered anchors) */
.index-list { list-style: none; border-top: 1px solid var(--ink); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.index-list li { position: relative; border-bottom: 1px solid var(--rule); }
.index-list li:not(:first-child)::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); width: 1px; background: var(--rule); }
.index-list li:nth-child(4n+1)::before { display: none; }
.index-list a { display: grid; gap: 0.3rem; padding: 1rem 0 1.15rem; text-decoration: none; color: var(--ink); }
.index-list .i-n { font-style: italic; color: var(--matcha-ink); font-size: 1rem; }
.index-list .i-t { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); line-height: 1.2; font-weight: 380; }
.index-list .i-d { font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); }
.index-list a:hover .i-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

/* long-read prose */
.prose { max-width: var(--measure); color: var(--ink-2); }
.prose > p, .prose li { font-size: var(--fs-body); }
.prose h2 { font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem); color: var(--ink); margin: 2.2em 0 0.65em; letter-spacing: -0.02em; line-height: 1.08; }
.prose h3 { font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem); color: var(--ink); margin: 1.8em 0 0.5em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.prose li { margin-bottom: 0.45em; padding-left: 0.2em; }
.prose li::marker { color: var(--matcha-ink); font-style: italic; }
.prose strong, .prose b { color: var(--ink); font-weight: 560; }

/* marginal chapter nav */
.chapters { position: sticky; top: 2rem; align-self: start; }
.chapters ol { list-style: none; border-top: 1px solid var(--ink); }
.chapters li { border-bottom: 1px solid var(--rule); }
.chapters a { display: grid; grid-template-columns: 1.6rem 1fr; padding: 0.6rem 0; text-decoration: none; font-size: 1rem; line-height: 1.3; color: var(--ink-2); }
.chapters a span { font-style: italic; color: var(--matcha-ink); }
.chapters a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.about-lead { align-items: start; row-gap: 1.8rem; }
.about-lead .page-title { grid-column: 1 / span 8; grid-row: 1; }
.about-lead .standfirst { grid-column: 1 / span 6; grid-row: 2; }
.about-lead .about-facts { grid-column: 1 / span 6; grid-row: 3; margin: 0.6rem 0 0; }
.about-lead .plate { grid-column: 9 / -1; grid-row: 1 / span 3; }
.about-lead .plate-art { aspect-ratio: 4 / 5; }
.prose .sig { font-size: var(--fs-xs); margin-top: 1.4rem; }
.longread { row-gap: 3rem; }
.longread .chapters { grid-column: 1 / span 3; }
.longread .prose { grid-column: 4 / span 6; }
.longread .margin { grid-column: 10 / -1; }
.chapter-mark { display: block; font-family: var(--sans); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--matcha-ink); margin-bottom: 0.7rem; }
.toolbag {
  margin: 2.4rem 0;
  padding: 1.5rem 0 0.4rem;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.toolbag h3 { margin: 0 0 0.8rem !important; font-size: 1.35rem; }
.toolbag ul { list-style: none; padding: 0 !important; columns: 2; column-gap: 2.5rem; column-rule: 1px solid var(--rule); }
.toolbag li { break-inside: avoid; padding: 0 0 0.9rem 1.5rem !important; position: relative; font-size: 1rem !important; line-height: 1.45; }
.toolbag li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.8rem; height: 1px; background: var(--matcha); }

.timeline { list-style: none; border-top: 1px solid var(--ink); }
.timeline li { padding: 0.95rem 0 1.05rem; border-bottom: 1px solid var(--rule); display: grid; gap: 0.25rem; }
.timeline .t-when { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--matcha-ink); font-weight: 500; }
.timeline .t-what { font-size: 1.0625rem; line-height: 1.4; color: var(--ink); }

.values-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--rule-dark); }
.values-grid li { position: relative; padding: 1.6rem 0 0.5rem; }
.values-grid li + li::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); width: 1px; background: var(--rule-dark); }
.values-grid .v-n { display: block; font-style: italic; font-size: 2.75rem; line-height: 1; font-weight: 300; color: var(--leaf); margin-bottom: 1.2rem; }
.values-grid h3 { font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem); color: var(--on-spruce); margin-bottom: 0.6rem; }
.values-grid p { font-size: 1rem; line-height: 1.55; }

.creds { list-style: none; border-top: 1px solid var(--ink); }
.creds li { display: grid; grid-template-columns: 2rem 1fr auto; column-gap: 0.8rem; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.creds .c-n { font-style: italic; color: var(--matcha-ink); }
.creds b { font-weight: 420; font-size: 1.125rem; }
.creds .c-d { font-family: var(--sans); font-size: var(--fs-sm); color: var(--muted); text-align: right; }

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */
.stops-row { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--ink); counter-reset: st; }
.stops-row li { position: relative; padding: 1.2rem 0 0.4rem; counter-increment: st; }
.stops-row li + li::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); width: 1px; background: var(--rule); }
.stops-row .stop-n { color: var(--matcha); font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); margin-bottom: 0.7rem; }
.stops-row .stop-k { color: var(--muted); }
.stops-row h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); margin-bottom: 0.5rem; }
.stops-row p { font-size: 0.98rem; line-height: 1.55; color: var(--ink-2); }

.steps { list-style: none; border-top: 1px solid var(--ink); }
.steps > li {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.step-n { grid-column: 1 / span 2; font-size: clamp(3rem, 2rem + 3.4vw, 5.5rem); line-height: 0.82; font-weight: 300; font-style: italic; color: var(--matcha); font-variation-settings: "opsz" 144; }
.step-body { grid-column: 3 / span 6; }
.step-body h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); margin-bottom: 0.5rem; }
.step-body p { color: var(--ink-2); max-width: 44ch; }
.step-when { grid-column: 10 / -1; font-family: var(--sans); font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); padding-top: 0.5rem; position: relative; }
.step-when::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); width: 1px; background: var(--rule); }
.step-when b { display: block; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); font-weight: 600; margin-bottom: 0.2rem; }
.step-when p { margin: 0 0 0.8rem; }

.isnt { border-top: 1px solid var(--ink); }
.isnt-col { position: relative; padding-top: 1.4rem; }
.isnt-col:first-child { grid-column: 1 / span 6; }
.isnt-col:last-child { grid-column: 7 / -1; }
.isnt-col:last-child::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); width: 1px; background: var(--rule); }
.isnt-col h3 { font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.6rem); margin-bottom: 1rem; }
.isnt-col ul { list-style: none; }
.isnt-col li { padding: 0.8rem 0 0.85rem 2rem; border-top: 1px solid var(--rule); position: relative; font-size: 1.125rem; line-height: 1.4; color: var(--ink); }
.isnt-col li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 13px; height: 13px; background: center / contain no-repeat; }
.isnt-col--is li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' fill='none' stroke='%234A6A1F' stroke-width='1.6'/%3E%3C/svg%3E"); }
.isnt-col--not li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' fill='none' stroke='%235A665E' stroke-width='1.3'/%3E%3C/svg%3E"); width: 11px; height: 11px; top: 1.2rem; }
.isnt-col--not li { color: var(--ink-2); }

.gp-grid { row-gap: 2.5rem; }
.gp-grid .gp-main { grid-column: 1 / span 6; }
.gp-grid .gp-main h2 { font-size: var(--fs-h2); color: var(--on-spruce); margin-bottom: 0.6em; }
.gp-grid .gp-main p { font-size: 1.125rem; max-width: 40ch; }
.gp-grid .gp-side { grid-column: 8 / -1; }
.redflags { list-style: none; border-top: 1px solid var(--rule-dark); margin: 0.8rem 0 2rem; }
.redflags li { padding: 0.7rem 0 0.75rem 1.6rem; border-bottom: 1px solid var(--rule-dark); position: relative; color: var(--on-spruce); font-size: 1.0625rem; line-height: 1.4; }
.redflags li::before { content: ""; position: absolute; left: 0; top: 1.25rem; width: 0.8rem; height: 1px; background: var(--yuzu); }
.band--spruce .note-box { border: 1px solid var(--rule-dark); padding: 1.3rem 1.4rem; }
.band--spruce .note-box h3 { font-size: 1.375rem; color: var(--on-spruce); margin-bottom: 0.5rem; }
.band--spruce .note-box p { font-size: 1rem; margin: 0; }

/* --------------------------------------------------------------------------
   Programmes page
   -------------------------------------------------------------------------- */
.prog { padding-bottom: clamp(3.5rem, 7vw, 6rem); scroll-margin-top: 1rem; }
.prog > .wrap { border-top: 1px solid var(--ink); padding-top: clamp(2rem, 4vw, 3.5rem); }
.prog-grid { row-gap: 2rem; align-items: start; }
.prog-side { grid-column: 1 / span 4; position: sticky; top: 1.5rem; }
.prog-side .p-no { display: block; font-style: italic; font-size: clamp(3.5rem, 2rem + 5vw, 7rem); line-height: 0.8; font-weight: 300; color: var(--matcha); font-variation-settings: "opsz" 144; margin-bottom: 1.2rem; }
.prog-side h2 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.75rem); margin-bottom: 0.3em; }
.prog-side .best { font-style: italic; color: var(--ink-2); font-size: 1.125rem; margin-bottom: 1.5rem; }
.facts { margin: 0 0 1.75rem; border-top: 1px solid var(--ink); }
.facts div { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: var(--fs-sm); line-height: 1.45; }
.facts dt { color: var(--muted); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 0.2em; }
.facts dd { margin: 0; }
.facts .facts-price dd { font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; font-weight: 330; }
.facts .facts-price dd small { display: block; font-family: var(--sans); font-size: var(--fs-sm); color: var(--muted); margin-top: 0.25rem; }
.prog-body { grid-column: 6 / -1; }
.prog-body .prog-lead { font-size: var(--fs-lede); line-height: 1.42; font-weight: 330; color: var(--ink); max-width: 30em; margin-bottom: 2rem; font-variation-settings: "opsz" 36; }
.prog-cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2rem; }
.prog-cols > :first-child { grid-column: 1 / span 4; }
.prog-cols > :last-child { grid-column: 5 / -1; }
.sub-h { font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 0.7rem; }
.included { list-style: none; border-top: 1px solid var(--ink); }
.included li { display: grid; grid-template-columns: 1.5rem 1fr; padding: 0.62rem 0; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; line-height: 1.4; }
.included li svg { width: 14px; height: 14px; color: var(--matcha-ink); margin-top: 0.3em; }
.feel { border-top: 1px solid var(--ink); padding-top: 0.7rem; }
.feel p:last-child { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem); font-style: italic; font-weight: 300; line-height: 1.2; color: var(--ink); font-variation-settings: "opsz" 72; }
.feel .actions { margin-top: 1.6rem; }

.phases { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 2rem; border: 1px solid var(--rule-dark); }
.phase { padding: 1.1rem 1.2rem 1.2rem; }
.phase + .phase { border-left: 1px solid var(--rule-dark); }
.phase .ph-w { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--leaf); }
.phase h3 { font-size: 1.6rem; margin: 0.3rem 0 0.4rem; color: var(--on-spruce); }
.phase p { font-size: 0.98rem; line-height: 1.5; margin: 0; }
.phase-bar { grid-column: 1 / -1; height: 6px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; padding: 0 1.2rem 1.1rem; box-sizing: content-box; }
.phase-bar i { background: var(--leaf); opacity: 0.85; }
.phase-bar i:nth-child(n+7) { background: var(--yuzu); }

.prog--feature { background: var(--spruce); color: var(--on-spruce); padding-block: clamp(3.5rem, 7vw, 6rem); }
.prog--feature > .wrap { border-top: 0; padding-top: 0; }
.prog--feature .p-no { color: var(--leaf); }
.prog--feature h2 { color: var(--on-spruce); }
.prog--feature h2 em { color: var(--leaf); }
.prog--feature .best, .prog--feature p { color: var(--on-spruce-2); }
.prog--feature .prog-lead, .prog--feature .feel p:last-child { color: var(--on-spruce); }
.prog--feature .facts, .prog--feature .included, .prog--feature .feel { border-top-color: var(--rule-dark); }
.prog--feature .facts div, .prog--feature .included li { border-bottom-color: var(--rule-dark); }
.prog--feature .facts dt { color: var(--on-spruce-2); }
.prog--feature .facts dd small { color: var(--on-spruce-2); }
.prog--feature .included li svg { color: var(--leaf); }
.prog--feature .sub-h { color: var(--on-spruce); }
.prog--feature .tag { transform: none; margin: 0 0 1rem; color: var(--ink); }

.sessions { list-style: none; border-top: 1px solid var(--ink); }
.sessions li { display: grid; grid-template-columns: 4.2rem 1fr; column-gap: 1rem; align-items: baseline; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.sessions .s-date { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; color: var(--muted); }
.sessions .s-date b { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1; letter-spacing: -0.02em; text-transform: none; font-weight: 320; color: var(--ink); }
.sessions .s-t { font-size: 1.125rem; line-height: 1.3; }
.sessions .s-t small { display: block; font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); margin-top: 0.15rem; }

.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--ink); }
.compare-wrap:focus-visible { outline-offset: 4px; }
.compare { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 1rem; }
.compare caption { text-align: left; }
.compare th, .compare td { padding: 0.9rem 1rem 0.95rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); line-height: 1.4; }
.compare thead th { vertical-align: bottom; font-weight: 380; font-size: 1.25rem; line-height: 1.15; padding-top: 1.2rem; border-bottom: 1px solid var(--ink); font-variation-settings: "opsz" 36; }
.compare thead th small { display: block; font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--matcha-ink); font-weight: 500; margin-bottom: 0.3rem; }
.compare tbody th { font-family: var(--sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); width: 20%; padding-top: 1.1rem; }
.compare td { font-size: 1.0625rem; }
.compare .yes svg { width: 16px; height: 16px; color: var(--matcha-ink); display: inline-block; vertical-align: -2px; }
.compare .no { color: var(--muted); }
.compare .hl { background: rgba(239, 229, 154, 0.32); padding-left: 1rem; }
.compare tr.price-row td { font-size: 1.5rem; font-weight: 330; line-height: 1.1; }
.compare tr.price-row td small { display: block; font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); margin-top: 0.3rem; }
.compare-hint { display: none; font-family: var(--sans); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.6rem; }

/* --------------------------------------------------------------------------
   What I help with
   -------------------------------------------------------------------------- */
.area { padding-bottom: clamp(2.6rem, 5vw, 4.5rem); scroll-margin-top: 1rem; }
.area > .wrap { border-top: 1px solid var(--ink); padding-top: clamp(2rem, 4vw, 3.5rem); }
.area-grid { row-gap: 1.75rem; align-items: start; }
.area-n { grid-column: 1 / span 1; font-style: italic; font-weight: 300; color: var(--matcha); font-size: clamp(2.5rem, 1.8rem + 2.4vw, 4.25rem); line-height: 0.85; font-variation-settings: "opsz" 144; }
.area-head { grid-column: 2 / span 5; }
.area-head h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3.25rem); margin-bottom: 1.2rem; }
.area-head .kicker { margin-bottom: 0.55rem; }
.area-feels { font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.5rem); font-style: italic; font-weight: 320; line-height: 1.38; color: var(--ink-2); max-width: 30ch; font-variation-settings: "opsz" 36; }
.area-feels .q { font-style: normal; }
.area-how { grid-column: 8 / -1; position: relative; }
.area-how::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); width: 1px; background: var(--rule); }
.area-how ul { list-style: none; border-top: 1px solid var(--ink); margin-bottom: 1.3rem; }
.area-how li { padding: 0.6rem 0 0.65rem 1.5rem; border-bottom: 1px solid var(--rule); position: relative; font-size: 1.0625rem; line-height: 1.4; }
.area-how li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 0.75rem; height: 1px; background: var(--matcha); }
.paired { font-family: var(--sans); font-size: var(--fs-sm); color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: baseline; margin: 0; }
.paired a { color: var(--ink); font-weight: 500; text-decoration-color: var(--matcha); }
.paired .sep { color: var(--muted); }

.unsure {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 1.5rem;
  align-items: end;
}
.unsure h2 { grid-column: 1 / span 7; font-size: var(--fs-h2); color: var(--on-spruce); }
.unsure > div { grid-column: 9 / -1; }
.unsure p { margin-bottom: 1.4rem; font-size: 1.125rem; }

/* --------------------------------------------------------------------------
   Stories
   -------------------------------------------------------------------------- */
.case { padding-bottom: clamp(3rem, 6vw, 5rem); }
.case > .wrap { border-top: 1px solid var(--ink); padding-top: clamp(2rem, 4vw, 3.5rem); }
.case-head .meta { margin-top: 0.8rem; }
.case-grid { row-gap: 2rem; align-items: start; }
.case-mono {
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--paper-3);
  position: relative;
  font-size: clamp(5rem, 3rem + 7vw, 11rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: var(--spruce);
  font-variation-settings: "opsz" 144;
}
.case-mono::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--spruce); opacity: 0.3; }
.case-mono.alt { background: #E9E5D7; }
.case-head { grid-column: 5 / -1; }
.case-head h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.6rem); margin: 0.6rem 0 0.8rem; }
.case-head .case-quote { font-size: var(--fs-lede); font-style: italic; font-weight: 320; line-height: 1.35; color: var(--ink-2); max-width: 36ch; text-indent: -0.4em; }
.case-cols { grid-column: 5 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--ink); }
.case-cols > div { position: relative; padding-top: 1rem; }
.case-cols > div + div::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); width: 1px; background: var(--rule); }
.case-cols h3 { font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.6rem; }
.case-cols p { font-size: 1.0625rem; color: var(--ink-2); }

.quote-columns { columns: 2; column-gap: calc(var(--gap) * 2); column-rule: 1px solid var(--rule); }
.quote-columns .quote { break-inside: avoid; padding-bottom: 2rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--rule); }
.quote-columns .quote:nth-child(3n+1) blockquote p { font-size: clamp(1.45rem, 1.2rem + 0.9vw, 2rem); font-style: italic; font-weight: 300; line-height: 1.2; }

/* --------------------------------------------------------------------------
   Journal index
   -------------------------------------------------------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 0.9rem 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.filter { display: flex; flex-wrap: wrap; gap: 0.3rem 0.35rem; align-items: center; }
.filter-label { font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-right: 0.8rem; }
.filter button {
  appearance: none;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.42rem 0.85rem 0.4rem;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 380;
  line-height: 1.2;
  cursor: pointer;
  color: var(--ink);
}
.filter button:hover { border-color: var(--rule-2); }
.filter button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter button .count { font-family: var(--sans); font-size: 0.6875rem; margin-left: 0.3rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.filter button[aria-pressed="true"] .count { color: var(--on-spruce-2); }
.filter-status { font-family: var(--sans); font-size: var(--fs-sm); color: var(--muted); margin: 0; }
html:not(.js) .filter { display: none; }

.lead-story { row-gap: 2rem; align-items: center; margin-bottom: clamp(3rem, 6vw, 5rem); }
.lead-story .plate { grid-column: 1 / span 7; }
.lead-story .lead-text { grid-column: 8 / -1; padding-left: calc(var(--gap) * 0.5); }
.lead-story h2 { font-size: clamp(2.1rem, 1.5rem + 2.3vw, 3.75rem); line-height: 1.02; margin: 0.8rem 0 1rem; }
.lead-story h2 a { text-decoration: none; }
.lead-story h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.1em; }
.lead-story .standfirst { font-size: 1.25rem; margin-bottom: 1.4rem; }

.j-section { margin-bottom: clamp(3.5rem, 7vw, 6rem); scroll-margin-top: 1rem; }
.j-section-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 2rem; border-top: 1px solid var(--ink); padding-top: 0.9rem; margin-bottom: 2rem; }
.j-section-h h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem); }
.j-section-h p { margin: 0; font-style: italic; color: var(--ink-2); }
.entries { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(2.5rem, 4vw, 3.5rem); }
.entries > li { position: relative; }
.entries > li:not(:nth-child(3n+1))::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); width: 1px; background: var(--rule); }
.entries > li[hidden] { display: none; }
.entries.js-cols > li:not(.col-start)::before { display: block; }
.entries.js-cols > li.col-start::before { display: none; }
.entries .plate-art { aspect-ratio: 4 / 3; }
.entries .plate-art svg { top: 13%; height: 74%; }
.entries.entries--recipes .plate-art { aspect-ratio: 1; }
.j-empty { font-style: italic; color: var(--muted); }

/* --------------------------------------------------------------------------
   Article (sidenotes)
   -------------------------------------------------------------------------- */
.article-head { padding: clamp(2.25rem, 5vw, 4.5rem) 0 clamp(2rem, 4vw, 3.5rem); }
.article-head .grid { row-gap: 1.6rem; }
.article-head .kicker-row { grid-column: 3 / span 8; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; }
.article-head h1 { grid-column: 3 / span 8; font-size: clamp(2.5rem, 1.5rem + 4.2vw, 6rem); font-weight: 300; line-height: 1; letter-spacing: -0.035em; }
.article-head .standfirst { grid-column: 3 / span 6; max-width: none; }
.article-byline { grid-column: 3 / span 8; display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: var(--fs-sm); color: var(--muted); }
.article-byline b { color: var(--ink); font-weight: 500; }
.article-plate { grid-column: 3 / span 8; margin-top: 1rem; }

.article-body { row-gap: 2rem; padding-bottom: var(--section); }
.article-body .prose { grid-column: 3 / span 6; max-width: 36rem; --sn-w: clamp(200px, 20vw, 290px); --sn-gap: clamp(2rem, 7vw, 7.5rem); }
.article-aside { grid-column: 1 / span 2; }
.article-aside .sticky { position: sticky; top: 2rem; }
.article-aside ol { list-style: none; border-top: 1px solid var(--ink); }
.article-aside li { border-bottom: 1px solid var(--rule); }
.article-aside a { display: block; padding: 0.55rem 0; text-decoration: none; font-family: var(--sans); font-size: 0.8125rem; line-height: 1.35; color: var(--ink-2); }
.article-aside a:hover { color: var(--ink); text-decoration: underline; }
.prose .dropcap { margin-top: 0; }
.prose h2 { scroll-margin-top: 1.5rem; }
.sn-ref { font-family: var(--sans); font-size: 0.66em; font-weight: 600; color: var(--matcha-ink); vertical-align: 0.55em; line-height: 0; margin-left: 0.08em; }
.sn {
  float: right;
  clear: right;
  width: var(--sn-w);
  margin: 0.3rem calc(-1 * (var(--sn-w) + var(--sn-gap))) 1.2rem 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--matcha);
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
  text-indent: 0;
}
.sn .sn-n { font-weight: 600; color: var(--matcha-ink); margin-right: 0.35em; }
.gp-box .sn { margin-right: calc(-1 * (var(--sn-w) + var(--sn-gap) + 1.5rem)); }
.steps-mini .sn, .factors .sn { font-weight: 400; }
.sn em { font-family: var(--serif); font-size: 1.08em; color: var(--ink-2); }
.sn a { color: var(--matcha-ink); }
.prose .steps-mini { list-style: none; padding: 0; counter-reset: m; border-top: 1px solid var(--ink); margin: 1.2em 0 1.6em; }
.prose .steps-mini li { counter-increment: m; position: relative; padding: 0.85rem 0 0.9rem 2.4rem; border-bottom: 1px solid var(--rule); margin: 0; }
.prose .steps-mini li::before { content: counter(m); position: absolute; left: 0; top: 0.95rem; font-size: 1.75rem; line-height: 1; font-style: italic; font-weight: 300; color: var(--matcha); }
.prose .factors { list-style: none; padding: 0; margin: 1.2em 0 1.6em; border-top: 1px solid var(--rule-2); }
.prose .factors li { padding: 0.7rem 0 0.75rem; border-bottom: 1px solid var(--rule); margin: 0; }
.gp-box { margin: 2rem 0; padding: 1.4rem 1.5rem 1.5rem; background: var(--paper-2); border-left: 3px solid var(--ink); }
.gp-box h2 { margin-top: 0 !important; font-size: 1.6rem !important; }
.gp-box p { font-size: 1.0625rem; }
.end-mark { display: inline-block; width: 0.6em; height: 0.6em; background: var(--matcha); margin-left: 0.35em; vertical-align: baseline; transform: translateY(-0.02em); }
.article-note { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 0.8rem; margin-top: 2rem; }
.author-box { display: grid; grid-template-columns: 72px 1fr; gap: 1.1rem; align-items: start; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--ink); }
.author-box .mini { width: 72px; height: 88px; background: var(--paper-3); color: var(--spruce); --tint: #EEF1E2; display: grid; place-items: center; }
.author-box .mini svg { width: 80%; height: 90%; }
.author-box h2 { font-size: 1.35rem !important; margin: 0 0 0.3rem !important; }
.author-box p { font-size: 1rem; margin: 0 0 0.6rem; }

/* --------------------------------------------------------------------------
   Recipe (cookbook page)
   -------------------------------------------------------------------------- */
.recipe-head { padding: clamp(2.25rem, 5vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem); }
.recipe-top { row-gap: 2rem; align-items: start; }
.recipe-top .recipe-title { grid-column: 1 / span 7; }
.recipe-top .recipe-title h1 { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 6.25rem); font-weight: 300; line-height: 0.98; letter-spacing: -0.035em; margin: 0.9rem 0 1.4rem; }
.recipe-top .plate { grid-column: 8 / -1; grid-row: 1 / span 2; }
.recipe-stats { grid-column: 1 / span 7; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); margin: 0; }
.recipe-stats div { padding: 0.8rem 0.9rem 0.9rem 0; position: relative; }
.recipe-stats div + div { padding-left: 0.9rem; border-left: 1px solid var(--rule); }
.recipe-stats dt { font-family: var(--sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.recipe-stats dd { margin: 0.2rem 0 0; font-size: 1.5rem; line-height: 1.15; font-weight: 330; }
.recipe-stats dd small { font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); display: block; margin-top: 0.15rem; }
.why { margin-top: 1.6rem; max-width: 34em; }
.why p:not(.kicker) { font-size: 1.125rem; color: var(--ink-2); }
.why .kicker { margin-bottom: 0.5rem; }

.recipe-body { row-gap: 3rem; padding-bottom: calc(var(--section) * 0.8); align-items: start; }
.ingredients { grid-column: 1 / span 4; position: sticky; top: 1.5rem; }
.ingredients-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-top: 3px double var(--ink); padding-top: 0.9rem; margin-bottom: 0.4rem; }
.ingredients-h h2, .method h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem); }
.ingredients-h .meta { font-size: 0.8125rem; }
.checklist { list-style: none; }
.checklist-group { font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 1.2rem 0 0.4rem; }
.checklist li:not(.checklist-group) { border-bottom: 1px solid var(--rule); }
.checklist label { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.5rem; align-items: start; padding: 0.7rem 0; cursor: pointer; font-size: 1.0625rem; line-height: 1.4; }
.checklist input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  margin: 0.2em 0 0;
  border: 1px solid var(--ink);
  border-radius: 1px;
  background: var(--paper) center / 12px no-repeat;
  cursor: pointer;
}
.checklist input:checked { background-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23F5F3EC' stroke-width='2'/%3E%3C/svg%3E"); }
.checklist input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.checklist .qty { font-weight: 560; color: var(--ink); font-variation-settings: "opsz" 24; }
.checklist input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--matcha); text-decoration-thickness: 1px; }
.checklist .opt { font-family: var(--sans); font-size: 0.75rem; color: var(--muted); letter-spacing: 0.04em; }
.check-tools { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; margin-top: 1.2rem; align-items: center; }
.text-btn { appearance: none; background: none; border: 0; padding: 0.2rem 0; font-family: var(--sans); font-size: var(--fs-sm); font-weight: 500; color: var(--ink); cursor: pointer; border-bottom: 1px solid currentColor; display: inline-flex; gap: 0.45rem; align-items: center; }
.text-btn svg { width: 16px; height: 16px; }
.text-btn:hover { color: var(--matcha-ink); }
.check-status { font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); margin: 0.8rem 0 0; }
html:not(.js) [data-js-only] { display: none !important; }

.method { grid-column: 6 / -1; }
.method-h { border-top: 3px double var(--ink); padding-top: 0.9rem; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.method ol { list-style: none; counter-reset: step; }
.method-steps > li { counter-increment: step; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--gap); padding: 1.5rem 0 1.6rem; border-bottom: 1px solid var(--rule); }
.method-steps > li::before { content: counter(step); grid-column: 1; font-size: clamp(3rem, 2.2rem + 2.4vw, 4.75rem); line-height: 0.8; font-weight: 300; font-style: italic; color: var(--matcha); font-variation-settings: "opsz" 144; }
.method-steps p { grid-column: 2 / -1; font-size: 1.1875rem; line-height: 1.6; color: var(--ink-2); max-width: 34em; }
.method-steps .time { display: inline-block; font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--matcha-ink); font-weight: 600; margin-bottom: 0.3rem; }
.tips { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.tips-h { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin-bottom: 0.9rem; }
.tips ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--ink); }
.tips li { padding-top: 1rem; position: relative; }
.tips li + li::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); width: 1px; background: var(--rule); }
.tips h3 { font-size: 1.25rem; margin-bottom: 0.45rem; font-style: italic; font-weight: 340; }
.tips p { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }

.more-recipes .entries .plate-art { aspect-ratio: 4 / 3; }
.recipe-top .plate .plate-art { aspect-ratio: 1; }
.recipe-top .plate .plate-art svg { top: 14%; left: 12%; width: 76%; height: 72%; }

/* --------------------------------------------------------------------------
   FAQ page
   -------------------------------------------------------------------------- */
.faq-layout { row-gap: 3rem; align-items: start; }
.faq-layout .chapters { grid-column: 1 / span 3; }
.faq-groups { grid-column: 5 / -1; }
.faq-group { margin-bottom: clamp(3rem, 6vw, 4.5rem); scroll-margin-top: 1rem; }
.faq-group-h { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.faq-group-h span { font-style: italic; color: var(--matcha); font-size: 1.5rem; font-weight: 300; }
.faq-group-h h2 { font-size: clamp(1.9rem, 1.4rem + 1.7vw, 3rem); }
.faq-tools { display: flex; justify-content: flex-end; margin: -0.5rem 0 1rem; }

/* --------------------------------------------------------------------------
   Contact / form
   -------------------------------------------------------------------------- */
.contact-grid { row-gap: 3rem; align-items: start; padding-bottom: var(--section); }
.contact-side { grid-column: 1 / span 5; }
.contact-form-col { grid-column: 7 / -1; }
.call-card { border-top: 1px solid var(--ink); padding-top: 1.2rem; margin-bottom: 2.5rem; }
.call-card h2 { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem); margin-bottom: 0.6rem; }
.call-card p { color: var(--ink-2); }
.call-facts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; list-style: none; }
.call-facts li { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35rem 0.6rem; border: 1px solid var(--rule-2); }
.next-steps { list-style: none; counter-reset: n; border-top: 1px solid var(--ink); margin-bottom: 2.5rem; }
.next-steps li { counter-increment: n; display: grid; grid-template-columns: 2.6rem 1fr; padding: 0.9rem 0 1rem; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; line-height: 1.45; }
.next-steps li::before { content: counter(n); font-size: 1.9rem; line-height: 0.9; font-style: italic; font-weight: 300; color: var(--matcha); }
.details { margin: 0; border-top: 1px solid var(--ink); }
.details div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.details dt { font-family: var(--sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding-top: 0.3em; }
.details dd { margin: 0; font-size: 1.0625rem; line-height: 1.45; }

.form-sheet { background: var(--paper-2); border-top: 3px double var(--ink); padding: clamp(1.5rem, 3.5vw, 2.75rem); }
.form-sheet-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.form-sheet-h h2 { font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem); }
.form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; row-gap: 1.35rem; align-items: start; }
.field { display: grid; gap: 0.4rem; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend, .fieldset legend {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0;
}
.req { color: var(--matcha-ink); margin-left: 0.15em; }
.opt-label { font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--muted); font-size: 0.8125rem; margin-left: 0.3em; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.4;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-bottom-color: var(--ink);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.field select {
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%231A2620' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 14px;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: var(--error); border-bottom-width: 2px; }
.field-err { font-family: var(--sans); font-size: 0.8125rem; color: var(--error); margin: 0; }
.field-err:empty { display: none; }
.field-hint { font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); margin: 0; }
.fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fieldset legend { margin-bottom: 0.55rem; }
.choice-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-block;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--rule-2);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 0.9375rem;
  cursor: pointer;
}
.choice input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.consent label { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.5rem; align-items: start; font-family: var(--serif); font-size: 1rem; line-height: 1.45; letter-spacing: 0; text-transform: none; font-weight: 370; color: var(--ink-2); cursor: pointer; }
.consent input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0.2em 0 0; padding: 0; border: 1px solid var(--ink); background: var(--paper) center / 12px no-repeat; cursor: pointer; }
.consent input:checked { background-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23F5F3EC' stroke-width='2'/%3E%3C/svg%3E"); }
.consent input[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-top: 0.4rem; }
.form-foot .meta { margin: 0; }
.form-summary { grid-column: 1 / -1; border-left: 3px solid var(--error); background: var(--paper); padding: 0.9rem 1.1rem; font-family: var(--sans); font-size: var(--fs-sm); }
.form-summary:empty, .form-summary[hidden] { display: none; }
.form-summary p { margin: 0 0 0.3rem; font-weight: 600; color: var(--error); }
.form-summary ul { padding-left: 1.1rem; }
.form-summary a { color: var(--ink); }
.form-success { outline: none; }
.form-success h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3.25rem); margin: 0.6rem 0 1rem; }
.form-success p { color: var(--ink-2); max-width: 40ch; }
.preview-note { border: 1px dashed var(--rule-2); padding: 1rem 1.1rem; background: var(--paper); font-family: var(--sans); font-size: var(--fs-sm); line-height: 1.55; margin: 1.4rem 0; max-width: none !important; }
.preview-note b { display: block; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.25rem; }

/* --------------------------------------------------------------------------
   Privacy
   -------------------------------------------------------------------------- */
p.template-note { grid-column: 1 / span 8; border: 1px dashed var(--rule-2); background: var(--paper-2); padding: 1rem 1.2rem; font-family: var(--sans); font-size: var(--fs-sm); line-height: 1.55; margin-bottom: 3rem; }
.template-note b { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 0.2rem; }
.policy { row-gap: 0; padding-bottom: var(--section); }
.policy .chapters { grid-column: 1 / span 3; }
.policy .prose { grid-column: 5 / span 7; }
.policy .prose h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
.policy .prose h2 .p-n { font-style: italic; color: var(--matcha); font-weight: 300; margin-right: 0.3em; }

/* --------------------------------------------------------------------------
   Footer (spruce)
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--spruce);
  color: var(--on-spruce);
  padding: clamp(3.5rem, 7vw, 6rem) 0 5.5rem;
}
.foot-top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 2.5rem;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--rule-dark);
}
.foot-brand { grid-column: 1 / span 4; }
.foot-nameplate {
  font-size: clamp(4rem, 2.5rem + 5vw, 7.5rem);
  font-weight: 300;
  line-height: 0.8;
  letter-spacing: -0.05em;
  font-variation-settings: "opsz" 144;
  margin: 0 0 1.4rem;
  color: var(--on-spruce);
}
.foot-blurb { color: var(--on-spruce-2); max-width: 30ch; font-size: 1.0625rem; margin-bottom: 1.6rem; }
.foot-col { grid-column: span 2; position: relative; }
.foot-col:nth-child(2) { grid-column: 5 / span 2; }
.foot-col + .foot-col::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); width: 1px; background: var(--rule-dark); }
.foot-h { font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--leaf); margin: 0 0 1rem; }
.foot-col ul { list-style: none; display: grid; gap: 0.55rem; }
.foot-col a { color: var(--on-spruce); text-decoration: none; font-size: 1rem; line-height: 1.35; }
.foot-col a:hover { text-decoration: underline; text-decoration-color: var(--leaf); }
.foot-col a[aria-current] { color: var(--leaf); }
.foot-bottom { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 1.2rem; padding-top: 1.6rem; }
.foot-disclaimer { grid-column: 1 / span 7; font-family: var(--sans); font-size: var(--fs-sm); line-height: 1.6; color: var(--on-spruce-2); margin: 0; }
.foot-meta { grid-column: 9 / -1; display: grid; gap: 0.3rem; font-family: var(--sans); font-size: 0.8125rem; color: var(--on-spruce-2); margin: 0; text-align: right; }

/* --------------------------------------------------------------------------
   Version switcher (review aid)
   -------------------------------------------------------------------------- */
.switcher {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.42rem 0.5rem 0.42rem 0.9rem;
  border-radius: 999px;
  background: rgba(26, 30, 28, 0.92);
  color: #EDEAE2;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.switcher b { font-weight: 500; white-space: nowrap; }
.switcher a { color: #fff; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.4); }
.switcher a:hover { text-decoration-color: #fff; }
.switcher a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.switcher .sep { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.25); }
.switcher .dots { display: flex; gap: 5px; }
.switcher .dots a {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: conic-gradient(var(--a) 0 50%, var(--b) 0 75%, var(--c) 0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  transition: transform 0.2s ease;
}
.switcher .dots a:hover { transform: scale(1.12); }
.switcher .dots a[aria-current] { box-shadow: 0 0 0 2px #1A1E1C, 0 0 0 3.5px #fff; }

/* --------------------------------------------------------------------------
   Motion: almost none. A subtle fade as the page arrives.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  main { animation: arrive 0.6s ease-out both; }
  @keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .nav-list { gap: clamp(0.8rem, 1.4vw, 1.4rem); }
  .nav-list a:not(.btn) { font-size: 0.875rem; }
  .np-word { font-size: 1.875rem; }
  .help-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-index > li:not(:nth-child(4n+1))::before { display: none; }
  .help-index > li:nth-child(even)::before { display: block; }
  .t-main { grid-column: 2 / span 6; }
  .t-meta { grid-column: 8 / span 3; }
  .t-price { grid-column: 11 / -1; }
  .index-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index-list li:nth-child(odd)::before { display: none; }
  .foot-brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 2.5rem; align-items: end; }
  .foot-nameplate, .foot-blurb { margin: 0; }
  .foot-col:nth-child(2) { grid-column: 1 / span 3; }
  .foot-col { grid-column: span 3; }
  .foot-col:nth-child(2)::before { display: none; }
}

@media (max-width: 1080px) {
  .cover-grid {
    grid-template-areas:
      "h h h h h h h h h h h h"
      "l l l l l l p p p p p p"
      "c c c c c c p p p p p p";
    grid-template-rows: auto auto 1fr;
  }
  .cover-h { max-width: none; }
  .cover-plate .plate-art { height: auto; aspect-ratio: 3 / 4; }
  .contents { margin-top: 2.2rem; }
  .contents::before { display: none; }
  .byline { display: none; }
  .sly-main { grid-column: 1 / -1; }
  .produce { grid-column: 1 / -1; padding-left: 0; margin-top: clamp(3rem, 6vw, 4rem); }
  .produce::before { display: none; }
  .produce-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .col-head { grid-column: 1 / -1; margin-bottom: 2rem; }
  .col-main, .shift-list { grid-column: 1 / -1; }
  .story-plate { grid-column: 1 / span 5; }
  .story-body { grid-column: 7 / -1; }
  .head-split h2 { grid-column: 1 / -1; margin-bottom: 1.2rem; }
  .head-split > p, .head-split > div { grid-column: 1 / span 8; }
  .road-head h2, .road-head p { grid-column: 1 / -1; }
  .road-head p { margin-top: 1.2rem; }
  .road-stops { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.5rem; }
  .road-stops::before { display: none; }
  .road-stops li:nth-child(4)::after { display: none; }
  .tariff > li { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 1rem; }
  .t-no { grid-column: 1 / -1; }
  .t-main { grid-column: 1 / span 4; }
  .t-price { grid-column: 5 / -1; grid-row: 2; }
  .t-meta { grid-column: 1 / span 4; grid-row: 3; }
  .quote--lead { grid-column: 1 / -1; }
  .quote-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; column-gap: var(--gap); margin-top: 2rem; }
  .quote-side .quote { border-top: 1px solid var(--ink) !important; }
  .latest .entry--lead { grid-column: 1 / -1; }
  .latest .entry:nth-child(2) { grid-column: 1 / span 6; }
  .latest .entry:nth-child(3) { grid-column: 7 / span 6; }
  .latest .entry:nth-child(2)::before { display: none; }
  .coupon-intro, .coupon-list, .coupon-form { grid-column: 1 / -1; }
  .closing-grid > p, .closing-grid .closing-act { grid-column: 1 / -1; }
  .closing-grid .closing-act { margin-top: 1.8rem; }
  .page-head-grid .page-title { grid-column: 1 / -1; }
  .page-head-grid .standfirst, .page-head-grid .page-intro { grid-column: 1 / span 9; }
  .about-lead .page-title, .about-lead .standfirst { grid-column: 1 / span 7; }
  .about-lead .plate { grid-column: 8 / -1; }
  .longread .chapters { display: none; }
  .longread .prose { grid-column: 1 / span 8; }
  .longread .margin { grid-column: 9 / -1; }
  .values-grid { grid-template-columns: 1fr 1fr; row-gap: 1rem; }
  .values-grid li:nth-child(3)::before { display: none; }
  .stops-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.5rem; }
  .stops-row li:nth-child(4)::before { display: none; }
  .step-n { grid-column: 1 / span 2; }
  .step-body { grid-column: 3 / -1; }
  .step-when { grid-column: 3 / -1; padding-top: 1rem; }
  .step-when::before { display: none; }
  .gp-grid .gp-main, .gp-grid .gp-side { grid-column: 1 / -1; }
  .prog-side { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .prog-side > :not(.facts):not(.actions) { grid-column: 1; }
  .prog-side .facts { grid-column: 2; grid-row: 1 / span 4; align-self: start; }
  .prog-body { grid-column: 1 / -1; }
  .area-n { grid-column: 1 / -1; }
  .area-head { grid-column: 1 / -1; }
  .area-how { grid-column: 1 / -1; }
  .area-how::before { display: none; }
  .unsure h2, .unsure > div { grid-column: 1 / -1; }
  .case-mono { grid-column: 1 / span 3; grid-row: 1; }
  .case-head { grid-column: 4 / -1; }
  .case-cols { grid-column: 1 / -1; }
  .quote-columns { columns: 2; }
  .lead-story .plate, .lead-story .lead-text { grid-column: 1 / -1; padding: 0; }
  .entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entries > li:not(:nth-child(3n+1))::before { display: none; }
  .entries > li:nth-child(even)::before { display: block; }
  .article-aside { display: none; }
  .article-head .kicker-row, .article-head h1, .article-head .standfirst, .article-byline, .article-plate { grid-column: 1 / -1; }
  .article-body .prose { grid-column: 1 / span 7; --sn-w: clamp(180px, 24vw, 250px); --sn-gap: clamp(1.5rem, 5vw, 3rem); }
  .recipe-top .recipe-title, .recipe-stats { grid-column: 1 / -1; }
  .recipe-top .plate { grid-column: 1 / -1; grid-row: auto; }
  .recipe-top .plate .plate-art { aspect-ratio: 16 / 9; }
  .ingredients { grid-column: 1 / span 5; }
  .method { grid-column: 6 / -1; }
  .tips ul { grid-template-columns: 1fr; }
  .tips li + li::before { display: none; }
  .tips li { border-bottom: 1px solid var(--rule); padding-bottom: 1rem; }
  .faq-layout .chapters { display: none; }
  .faq-groups { grid-column: 1 / -1; }
  .contact-side, .contact-form-col { grid-column: 1 / -1; }
  .policy .chapters { display: none; }
  .policy .prose { grid-column: 1 / span 10; }
  .template-note { grid-column: 1 / -1; }
}

/* sidenotes go inline */
@media (max-width: 900px) {
  .sn, .gp-box .sn { float: none; display: block; width: auto; margin: 0.9rem 0 1rem; padding: 0.7rem 0 0; }
  .article-body .prose { grid-column: 1 / -1; }
}

/* the menu collapses here */
@media (max-width: 960px) {
  :root { --bar-h: 64px; }
  .ears p:last-child { display: none; }
  .js .menu-btn { display: inline-flex; }
  .js .nav { display: none; }
  html:not(.js) .bar { flex-wrap: wrap; padding: 0.8rem 0; }
  html:not(.js) .nav-list { flex-wrap: wrap; }
  .menu-open, .menu-open body { overflow: hidden; }
  .menu-open .nav {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow-y: auto;
    background: var(--paper);
    padding: calc(var(--bar-h) + 1.5rem) var(--gutter) 5rem;
  }
  .menu-open .masthead { z-index: 150; }
  .menu-open .masthead--cover .nav { padding-top: calc(64px + 1.5rem); }
  .menu-open .nav-list { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--ink); }
  .menu-open .nav-list li { border-bottom: 1px solid var(--rule); }
  .menu-open .nav-list a:not(.btn) {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    padding: 0.85rem 0 0.9rem;
    font-family: var(--serif);
    font-size: clamp(2rem, 7.4vw, 3rem);
    font-weight: 320;
    font-variation-settings: "opsz" 144;
    letter-spacing: -0.025em;
    line-height: 1.05;
    background: none;
  }
  .menu-open .nav-list a[aria-current]:not(.btn)::before { display: none; }
  .menu-open .nav-list a[aria-current]:not(.btn) { font-style: italic; color: var(--matcha-ink); }
  .menu-open .nav-no { display: inline-block; flex: none; width: 3.6rem; font-family: var(--sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; font-style: normal; color: var(--muted); }
  .menu-open .nav-cta-item { border-bottom: 0 !important; padding-top: 1.6rem; }
  .menu-open .nav-cta { width: 100%; padding: 1.05rem; font-size: 1rem; }
  .menu-open .nav-extra { display: block; margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: var(--fs-sm); color: var(--muted); }
  .menu-open .nav-extra p { margin: 0 0 0.5rem; }
  .menu-open .nav-extra a { color: var(--ink); }
  .menu-open .switcher { display: none; }
}

@media (max-width: 760px) {
  :root { --section: clamp(64px, 14vw, 96px); }
  .grid, .cover-grid, .tariff > li, .coupon-grid, .foot-top, .foot-bottom, .unsure, .steps > li, .prog-cols, .method-steps > li { grid-template-columns: minmax(0, 1fr); }
  .grid > *, .foot-bottom > * { grid-column: 1 / -1 !important; }
  .col-rule::before, .guides::before { display: none; }

  .ears { justify-content: flex-start; }
  .ears p:first-child { font-size: 0.625rem; }
  .ears i { font-size: 0.8125rem; }
  .nameplate-row { grid-template-columns: 1fr; padding-top: 0.2rem; }
  .ear { display: none; }
  .nameplate { font-size: clamp(5rem, 31vw, 10rem); }
  .issue-line { grid-template-columns: 1fr auto; row-gap: 0.3rem; }
  .issue-title { grid-column: 1 / -1; grid-row: 1; text-align: left; font-size: 1.0625rem; }
  .issue-avail { display: none; }

  .cover-grid { grid-template-areas: "h" "l" "p" "c"; grid-template-rows: auto; }
  .cover-plate { margin-top: 2.2rem; }
  .cover-plate::before { display: none; }
  .cover-plate .plate-art { aspect-ratio: 4 / 5; }

  .produce-list { grid-template-columns: 1fr; }
  .story-plate { max-width: 420px; margin-bottom: 1rem; }
  .help-index { grid-template-columns: 1fr; }
  .help-index > li::before { display: none !important; }
  .help-unsure { margin-inline: 0; }
  .road-stops { grid-template-columns: 1fr; row-gap: 0; }
  .road-stops li { padding: 1.4rem 0 1.5rem 2.2rem; border-top: 1px solid var(--rule-dark); }
  .road-stops li::before { top: 1.75rem; }
  .road-stops li::after { display: none; }
  .road-stops .stop-n { font-size: 2.25rem; margin-bottom: 0.5rem; }
  .tariff > li { row-gap: 0.7rem; }
  .t-main, .t-price, .t-meta, .t-no { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .t-price { text-align: left; }
  .t-meta div { grid-template-columns: 5.5rem 1fr; }
  .quote-side { grid-template-columns: 1fr; }
  .latest .entry::before { display: none !important; }
  .latest .entry--lead { padding-bottom: 2.5rem; border-bottom: 1px solid var(--rule); }
  .latest .entry:nth-child(2) { padding-bottom: 2.5rem; border-bottom: 1px solid var(--rule); }
  .guide-row { flex-direction: column; gap: 0.6rem; }
  .guide-row input { border-right: 1px solid var(--ink); }
  .faq-a { padding-right: 0; }
  .page-title { font-size: clamp(2.6rem, 11vw, 4rem); }
  .index-list { grid-template-columns: 1fr; }
  .index-list li::before { display: none !important; }
  .about-lead .plate { grid-row: auto; max-width: 420px; }
  .values-grid { grid-template-columns: 1fr; }
  .values-grid li::before { display: none !important; }
  .values-grid li { border-bottom: 1px solid var(--rule-dark); padding-bottom: 1.2rem; }
  .creds li { grid-template-columns: 2rem 1fr; }
  .creds .c-d { grid-column: 2; text-align: left; }
  .stops-row { grid-template-columns: 1fr; }
  .stops-row li::before { display: none !important; }
  .stops-row li { border-bottom: 1px solid var(--rule); padding-bottom: 1.2rem; display: grid; grid-template-columns: 3.2rem 1fr; align-content: start; }
  .stops-row li > * { grid-column: 2; }
  .stops-row .stop-n { grid-column: 1; grid-row: 1 / span 3; font-size: 2.25rem; }
  .steps > li { row-gap: 0.4rem; }
  .step-n, .step-body, .step-when { grid-column: 1 / -1; }
  .step-n { font-size: 3rem; }
  .step-when { padding-top: 0.5rem; }
  .isnt-col:last-child::before { display: none; }
  .isnt-col:last-child { margin-top: 2.5rem; }
  .prog-side { display: block; }
  .prog-cols > * { grid-column: 1 / -1 !important; }
  .phases { grid-template-columns: 1fr; }
  .phase + .phase { border-left: 0; border-top: 1px solid var(--rule-dark); }
  .compare-hint { display: block; }
  .case-mono { max-width: 180px; }
  .case-mono, .case-head, .case-cols { grid-row: auto; }
  .case-cols { grid-template-columns: 1fr; }
  .case-cols > div + div::before { display: none; }
  .case-cols > div { border-bottom: 1px solid var(--rule); padding-bottom: 0.8rem; }
  .quote-columns { columns: 1; }
  .filter-bar { align-items: flex-start; flex-direction: column; }
  .filter-label { width: 100%; margin-bottom: 0.2rem; }
  .entries { grid-template-columns: 1fr; }
  .entries > li::before { display: none !important; }
  .entries > li { padding-bottom: 2.2rem; border-bottom: 1px solid var(--rule); }
  .recipe-stats { grid-template-columns: 1fr 1fr; }
  .recipe-stats div:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .recipe-stats div:nth-child(4) { border-top: 1px solid var(--rule); }
  .ingredients { position: static; }
  .method-steps > li { row-gap: 0.4rem; }
  .method-steps > li::before, .method-steps p { grid-column: 1 / -1; }
  .method-steps > li::before { font-size: 2.6rem; }
  .form { grid-template-columns: 1fr; }
  .details div { grid-template-columns: 1fr; gap: 0.15rem; }
  .foot-brand { display: block; }
  .foot-nameplate { margin-bottom: 1.2rem; }
  .foot-blurb { margin-bottom: 1.4rem; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-col { grid-column: span 1 !important; }
  .foot-brand { grid-column: 1 / -1 !important; }
  .foot-col::before { display: none; }
  .foot-meta { text-align: left; }
  .switcher { left: 10px; bottom: 10px; font-size: 11px; gap: 0.55rem; padding: 0.38rem 0.42rem 0.38rem 0.75rem; }
  .switcher .v-name { display: none; }
  .switcher .dots { gap: 4px; }
  .switcher .dots a { width: 20px; height: 20px; }
}

@media (max-width: 420px) {
  .bar-date { font-size: 0.6875rem; }
  .cover-h { font-size: clamp(2.6rem, 12.4vw, 3.4rem); }
  .contents a { grid-template-columns: 1.6rem 1fr; }
  .toc-p { display: none; }
  .tag { display: block; width: max-content; margin: 0.6rem 0 0; transform: none; }
  .form-sheet { padding: 1.25rem; }
  .coupon { padding: 1.5rem 1.1rem; }
  .foot-col a { font-size: 0.9375rem; }
}

/* --------------------------------------------------------------------------
   Print: recipe and articles print cleanly
   -------------------------------------------------------------------------- */
@media print {
  .switcher, .masthead .nav, .menu-btn, .site-footer .foot-top, .check-tools, .filter-bar, .skip, .coupon, .closing, [data-js-only], .more-recipes, .ears, .folio a { display: none !important; }
  .masthead, .site-footer { background: #fff !important; }
  body { background: #fff; font-size: 11pt; }
  .band--spruce, .site-footer, .prog--feature { background: #fff !important; color: #000 !important; }
  .band--spruce *, .site-footer *, .prog--feature * { color: #000 !important; }
  .plate-art { max-height: 9cm; }
  .ingredients { position: static; }
  a { text-decoration: none; }
  main { animation: none !important; }
}