/* ==========================================================================
   Gathered Pages Collective
   The illustrated seed catalog, built for the web.

   Navy is the ground the way a lithographic plate is printed on a dark page;
   cream panels sit on it like mounted specimens. Poppy orange is the bloom
   and never wallpaper. Hairlines, dot leaders and ruled columns carry the
   catalog's grammar into navigation, lists and tables.
   ========================================================================== */

@import url("fonts.css");

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand palette — Gathered Pages Brand Guide */
  --navy: #16294d;
  --navy-deep: #0c2454;
  --navy-ink: #0a1a33;
  --navy-lift: #1e3560;

  --orange: #e15d2a;          /* brand poppy orange — display, rules, accents */
  --orange-action: #c65225;   /* darkened for white text at AA (4.5:1) */
  --orange-action-hover: #a8441d;
  --orange-ink: #b04419;      /* small orange text on cream at AA (5.0:1) */
  --orange-soft: #f2a37f;     /* orange on navy at AA (7.1:1) */

  --sage: #708058;            /* brand sage — accents, foliage, icons */
  --sage-deep: #63734e;       /* sage as a surface: white text at AA (5.1:1) */
  --sage-lift: #8b9a72;
  --sage-pale: #d9dfcd;

  --cream: #f5f1e8;
  --cream-warm: #efe8d9;
  --cream-deep: #e6dcc7;
  --kraft: #c6a56b;

  --ink: #23272e;
  --ink-soft: #3f4a5c;

  /* Surface roles */
  --bg: var(--cream);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --line: rgba(22, 41, 77, 0.16);
  --line-strong: rgba(22, 41, 77, 0.55); /* 3.4:1 on cream — WCAG 1.4.11 */

  /* Type */
  --serif: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --sans: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.9rem, 7.6vw, 6rem);
  --fs-h1: clamp(2.35rem, 5.2vw, 4rem);
  --fs-h2: clamp(1.9rem, 3.5vw, 2.9rem);
  --fs-h3: clamp(1.35rem, 1.9vw, 1.75rem);
  --fs-h4: clamp(1.1rem, 1.4vw, 1.3rem);
  --fs-lead: clamp(1.125rem, 1.35vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-fine: 0.8125rem;
  --fs-label: 0.75rem;

  --measure: 68ch;
  --measure-tight: 58ch;

  /* Spacing */
  --s1: 0.5rem;
  --s2: 0.75rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2rem;
  --s6: 3rem;
  --s7: 4rem;
  --s8: 6rem;
  --s9: 8rem;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --wrap: 1240px;
  --wrap-mid: 960px;
  --wrap-narrow: 720px;

  --section-y: clamp(4.5rem, 9vw, 8rem);
  --section-y-tight: clamp(3.25rem, 6vw, 5rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.6s;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
picture { display: block; max-width: 100%; }

img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.16; }
h4 { font-size: var(--fs-h4); line-height: 1.25; }

p, ul, ol, dl, figure, blockquote, table { margin: 0; }

p + p { margin-top: 1.05em; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--orange); color: #fff; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

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

.wrap--mid { max-width: var(--wrap-mid); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-top: 0; }

/* Two sections on the same ground read as one page, so they share a gap
   rather than stacking two full paddings of nothing between them. */
.section--navy + .section--navy,
.section--ink + .section--ink,
.section--warm + .section--warm,
.section--sage + .section--sage { padding-top: 0; }

.section--navy {
  background: var(--navy);
  color: var(--cream);
  --fg: var(--cream);
  --fg-soft: #c2c8d4;
  --line: rgba(245, 241, 232, 0.2);
  --line-strong: rgba(245, 241, 232, 0.4);
}

.section--ink {
  background: var(--navy-ink);
  color: var(--cream);
  --fg: var(--cream);
  --fg-soft: #b9c0cd;
  --line: rgba(245, 241, 232, 0.16);
  --line-strong: rgba(245, 241, 232, 0.45); /* 3.9:1 on press black-navy */
}

.section--warm { background: var(--cream-warm); }

.section--sage {
  background: var(--sage-deep);
  color: #fff;
  --fg: #fff;
  --fg-soft: #eff3e8;
  --line: rgba(255, 255, 255, 0.28);
  --line-strong: rgba(255, 255, 255, 0.5);
}

/* Clipped rather than parked off-canvas, so the link never sits thousands of
   pixels outside the viewport while still being invisible until focused. */
.skip {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 200;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  background: var(--navy);
  color: var(--cream);
  padding: 0.85rem 1.25rem;
  font: 700 var(--fs-small)/1 var(--sans);
}
.skip:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
}

/* The page must not scroll behind the open mobile menu. */
body.is-nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   4. Catalog grammar — labels, rules, plates
   -------------------------------------------------------------------------- */

.label {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin: 0;
}

.label--orange { color: var(--orange-ink); }
.section--navy .label--orange,
.section--ink .label--orange { color: var(--orange-soft); }

/* A ruled band: hairline above, label sitting on it — the catalog's
   column head. Used to open a table or a list, never above a heading. */
.ruled-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  border-top: 1px solid var(--line-strong);
  padding-top: var(--s2);
  margin-bottom: var(--s4);
}

.hairline { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* The mounted plate: a printed illustration held inside a double rule. */
.plate {
  position: relative;
  padding: clamp(0.5rem, 1vw, 0.75rem);
  border: 1px solid var(--line-strong);
  background: transparent;
}
.plate > * { border: 1px solid var(--line); }
.plate img { width: 100%; }

.plate--flush { padding: 0; border: 0; }
.plate--flush > * { border: 1px solid var(--line-strong); }

.plate-caption {
  border: 0 !important;
  margin-top: var(--s2);
  font-size: var(--fs-fine);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--fg-soft);
}

.figure { margin: 0; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 1.0625rem 1.75rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease), transform 0.22s var(--ease);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--donate {
  background: var(--orange-action);
  color: #fff;
  box-shadow: 0 2px 0 0 rgba(12, 36, 84, 0.28), 0 10px 22px -14px rgba(12, 36, 84, 0.7);
}
.btn--donate:hover { background: var(--orange-action-hover); color: #fff; }

.btn--navy { background: var(--navy); color: var(--cream); }
.btn--navy:hover { background: var(--navy-deep); }

.btn--outline {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-strong);
}
.btn--outline:hover { border-color: currentColor; background: rgba(22, 41, 77, 0.05); }
.section--navy .btn--outline:hover,
.section--ink .btn--outline:hover,
.hero .btn--outline:hover { background: rgba(245, 241, 232, 0.1); }

.btn--cream { background: var(--cream); color: var(--navy); }
.btn--cream:hover { background: #fff; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s5);
}

.btn-row--flush { margin-top: 0; }

@media (max-width: 520px) {
  .btn-row > .btn { flex: 1 1 100%; }
}

/* A link that reads as a catalog cross-reference. */
.xref {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--orange-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2rem;
  transition: gap 0.22s var(--ease), color 0.22s var(--ease);
}
.section--navy .xref,
.section--ink .xref,
.pagehead .xref { color: var(--orange-soft); }
.section--sage .xref { color: #fff; }
.xref:hover { gap: 0.85rem; }
.xref svg { width: 1em; height: 1em; flex: none; }

/* --------------------------------------------------------------------------
   6. Masthead
   -------------------------------------------------------------------------- */

.utility-strip {
  background: var(--navy-ink);
  color: #c2c8d4;
  border-bottom: 1px solid rgba(245, 241, 232, 0.12);
  font-size: var(--fs-fine);
}

.utility-strip__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s4);
  min-height: 2.6rem;
  padding-block: 0.4rem;
}

.utility-strip p {
  margin: 0;
  letter-spacing: 0.04em;
}

.utility-nav {
  display: flex;
  gap: var(--s4);
  flex: none;
}

.utility-nav a {
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.6875rem;
  color: #c2c8d4;
  transition: color 0.2s var(--ease);
}
.utility-nav a:hover,
.utility-nav a[aria-current="page"] { color: var(--orange-soft); }

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid rgba(245, 241, 232, 0.18);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 5rem;
  padding-block: 0.75rem;
}

.brand {
  flex: none;
  display: block;
  line-height: 0;
  margin-right: auto;
}
.brand img {
  width: 152px;
  height: auto;
}
.masthead.is-compact .brand img { width: 104px; }
.masthead.is-compact .masthead__inner { min-height: 4.25rem; }

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.7vw, 1.9rem);
}

/* Founder / Makers / Contact live in the utility strip on desktop and fold
   into the same panel as everything else on small screens. */
.nav-mobile-only { display: none; }

.primary-nav a {
  position: relative;
  text-decoration: none;
  color: var(--cream);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-block: 0.6rem;
  transition: color 0.2s var(--ease);
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after { transform: scaleX(1); }
.primary-nav a[aria-current="page"] { color: #fff; }

.masthead .btn--donate {
  flex: none;
  padding: 0.9rem 1.4rem;
  font-size: 0.8125rem;
}

.nav-toggle {
  display: none;
  flex: none;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: 1px solid rgba(245, 241, 232, 0.4);
  color: var(--cream);
  font: 700 0.75rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.85rem 1rem;
  cursor: pointer;
}

.nav-toggle__bars {
  display: grid;
  gap: 3px;
  width: 16px;
}
.nav-toggle__bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 1080px) {
  .brand img { width: 148px; }
  .primary-nav a { font-size: 0.6875rem; letter-spacing: 0.1em; }
}

@media (max-width: 900px) {
  .utility-strip { display: none; }

  .masthead__inner { min-height: 4.5rem; flex-wrap: wrap; }
  .masthead.is-compact .masthead__inner { min-height: 4.5rem; }
  .masthead.is-compact .brand img { width: 120px; }

  /* Without JavaScript the navigation is simply a list under the masthead.
     The collapsing panel and its toggle only exist once the script runs. */
  .primary-nav {
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid rgba(245, 241, 232, 0.16);
    padding-bottom: var(--s2);
  }

  .nav-toggle { display: none; }
  .js .nav-toggle { display: inline-flex; }

  .js .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    border-top: 0;
    background: var(--navy-ink);
    border-bottom: 1px solid rgba(245, 241, 232, 0.2);
    padding: var(--s2) var(--gutter) var(--s5);
    max-height: 72dvh;
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.26s var(--ease), transform 0.26s var(--ease), visibility 0.26s;
  }
  .js .primary-nav[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .primary-nav a {
    font-size: 0.8125rem;
    padding-block: 1.05rem;
    border-bottom: 1px solid rgba(245, 241, 232, 0.14);
  }
  .primary-nav a::after { display: none; }
  .primary-nav a[aria-current="page"] { color: var(--orange-soft); }
  .nav-mobile-only { display: block; }

  .masthead .btn--donate { padding: 0.85rem 1.05rem; font-size: 0.75rem; letter-spacing: 0.08em; }
}

@media (max-width: 420px) {
  .brand img { width: 120px; }
  .masthead__inner { gap: 0.6rem; }
  .masthead .btn--donate { padding: 0.8rem 0.85rem; letter-spacing: 0.06em; }
  .nav-toggle { padding: 0.8rem; }
  .nav-toggle__text { display: none; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--navy-ink);
  color: var(--cream);
  isolation: isolate;
  overflow: hidden;
  --fg: var(--cream);
  --fg-soft: #c8cedb;
  --line: rgba(245, 241, 232, 0.2);
  --line-strong: rgba(245, 241, 232, 0.44);
}

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

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(10, 26, 51, 0.94) 0%, rgba(10, 26, 51, 0.86) 34%, rgba(10, 26, 51, 0.42) 66%, rgba(10, 26, 51, 0.3) 100%),
    linear-gradient(to top, rgba(10, 26, 51, 0.86) 0%, rgba(10, 26, 51, 0) 45%);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(78vh, 44rem);
  padding-block: clamp(4rem, 10vw, 7.5rem) clamp(3rem, 6vw, 4.5rem);
}

.hero__body { max-width: 40rem; }

.hero__title {
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0;
}
.hero__title em {
  font-style: italic;
  color: var(--orange-soft);
}

.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: #dfe3ea;
  max-width: 34rem;
  margin-top: var(--s4);
}

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid rgba(245, 241, 232, 0.22);
}
.hero__foot p {
  margin: 0;
  font-size: var(--fs-small);
  color: #c8cedb;
  max-width: 26rem;
}

@media (max-width: 720px) {
  .hero__media img { object-position: 50% 78%; }
  .hero::after {
    background:
      linear-gradient(to bottom, rgba(10, 26, 51, 0.92) 0%, rgba(10, 26, 51, 0.72) 45%, rgba(10, 26, 51, 0.9) 100%);
  }
  .hero__inner { min-height: 0; padding-block: clamp(3rem, 12vw, 4.5rem) clamp(2.5rem, 8vw, 3.5rem); }
}

/* Interior page banner — the catalog's section divider page. */
.pagehead {
  position: relative;
  background: var(--navy);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
  --fg: var(--cream);
  --fg-soft: #c8cedb;
  --line: rgba(245, 241, 232, 0.2);
  --line-strong: rgba(245, 241, 232, 0.44);
}
.pagehead__media { position: absolute; inset: 0; z-index: -2; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, rgba(12, 36, 84, 0.95) 0%, rgba(12, 36, 84, 0.82) 45%, rgba(12, 36, 84, 0.5) 100%);
}
.pagehead__inner {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  max-width: 46rem;
}
.pagehead h1 { font-size: var(--fs-h1); font-weight: 500; letter-spacing: -0.025em; }
.pagehead__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: #d7dce6;
  margin-top: var(--s4);
  max-width: 36rem;
}
.pagehead .breadcrumb {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: var(--fs-fine);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--orange-soft);
  margin: 0 0 var(--s4);
}
.pagehead .breadcrumb a { text-decoration: none; color: inherit; }
.pagehead .breadcrumb a:hover { text-decoration: underline; }
.pagehead .breadcrumb span[aria-hidden] { opacity: 0.5; }

/* --------------------------------------------------------------------------
   8. Prose
   -------------------------------------------------------------------------- */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose p { font-size: var(--fs-body); }
.prose h2 { margin-top: 2.2em; margin-bottom: 0.55em; }
.prose h3 { margin-top: 1.9em; margin-bottom: 0.5em; }
.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }
.prose a { color: var(--navy); text-decoration-color: var(--orange); }
.prose a:hover { color: var(--orange-action); }
.prose strong { font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.5em; }

.lead {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--fg);
  max-width: var(--measure-tight);
}

.section-intro { max-width: var(--measure-tight); }
.section-intro h2 + p { margin-top: var(--s3); }
.section-intro > p { color: var(--fg-soft); }

/* --------------------------------------------------------------------------
   9. The statement — mission set as a printed page
   -------------------------------------------------------------------------- */

.statement {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4vw, 3.15rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.022em;
  max-width: 33rem;
  margin: 0;
  text-wrap: balance;
}
.statement em { font-style: italic; color: var(--orange-soft); }
.section--warm .statement em,
.bg-cream .statement em { color: var(--orange-action); }

/* Centred over the full column, for a statement that opens a section rather
   than sitting beside its own body copy. */
.statement--center {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.statement-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 860px) {
  .statement-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   10. Doors — the three ways in (asymmetric ruled entries, not equal cards)
   -------------------------------------------------------------------------- */

.doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}

.door {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5) clamp(1.25rem, 2.4vw, 2.25rem) var(--s6);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  background: transparent;
  transition: background-color 0.3s var(--ease);
}
.door:first-child { border-left: 1px solid var(--line); }
.door:hover { background: rgba(22, 41, 77, 0.045); }
.section--navy .door:hover,
.section--ink .door:hover { background: rgba(245, 241, 232, 0.06); }

.door__figure { overflow: hidden; }
.door__figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.door:hover .door__figure img { transform: scale(1.035); }

.door h3 { font-size: var(--fs-h3); }
.door p { color: var(--fg-soft); font-size: var(--fs-small); margin: 0; }
.door__more {
  margin-top: auto;
  padding-top: var(--s2);
  font-size: var(--fs-fine);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: gap 0.24s var(--ease);
}
.section--navy .door__more,
.section--ink .door__more { color: var(--orange-soft); }
.door:hover .door__more { gap: 0.8rem; }
.door__more svg { width: 0.85em; height: 0.85em; }

/* Two doors instead of three, for the pair of ways in. */
.doors--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .doors--two { grid-template-columns: minmax(0, 1fr); }
}

/* A book jacket is a small original; framing it full-column would upscale it
   into mush, so the plate holds it at its own size. */
.plate--book { max-width: 22rem; margin-inline: auto; }

/* A plate set into running text: the prose flows around it, so a long
   essay and its photograph occupy one column instead of two. */
.prose--wrap { display: flow-root; max-width: none; }

.figure--float {
  float: right;
  width: min(20rem, 45%);
  margin: 0.4rem 0 var(--s4) var(--s5);
}

/* Too narrow to wrap around: the picture takes the full measure instead. */
@media (max-width: 640px) {
  .figure--float {
    float: none;
    width: 100%;
    margin: var(--s5) 0 0;
  }
}

/* Board portraits — mounted specimens, same double rule as the plates. */
.people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

.person figure { margin: 0 0 var(--s3); }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.person h3 { font-size: var(--fs-h4); }
.person p { margin: 0.35rem 0 0; color: var(--fg-soft); font-size: var(--fs-small); }

@media (max-width: 860px) {
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .people { grid-template-columns: minmax(0, 1fr); }
}

.doors__aside {
  max-width: 62ch;
  margin: var(--s5) 0 0;
  padding-left: var(--s4);
  border-left: 1px solid var(--line-strong);
  color: var(--fg-soft);
  font-size: var(--fs-small);
}
.doors__aside a { color: var(--orange-ink); }
/* Orange ink on the sage ground is 1.1:1 — the aside link takes the section
   foreground there instead. */
.section--sage .doors__aside a { color: #fff; }

@media (max-width: 900px) {
  .doors { grid-template-columns: minmax(0, 1fr); }
  .door { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* --------------------------------------------------------------------------
   11. Steps — the sowing instructions
   -------------------------------------------------------------------------- */

.steps { counter-reset: step; display: grid; gap: 0; }

.steps--narrow { max-width: 46rem; }

.steps--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 4.5rem);
}

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: var(--s4) clamp(1.25rem, 2.4vw, 2rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
  align-items: start;
}
.steps > .step:last-child { border-bottom: 1px solid var(--line); }
.steps--two > .step:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line); }

.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--serif);
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-weight: 500;
  line-height: 0.9;
  color: var(--orange-ink);
  letter-spacing: -0.03em;
}
.section--navy .step::before,
.section--ink .step::before { color: var(--orange-soft); }
.section--warm .step::before { color: var(--orange-action); }

.step__body { max-width: 58ch; }
.step__body h3 { margin-bottom: var(--s2); }
.step__body p { color: var(--fg-soft); margin: 0; }

@media (max-width: 900px) {
  .steps--two { grid-template-columns: minmax(0, 1fr); }
  .steps--two > .step:nth-last-child(2) { border-bottom: 0; }
}

@media (max-width: 620px) {
  .step { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .step::before { font-size: 2rem; }
}

/* --------------------------------------------------------------------------
   12. Catalog lists — dot leaders, ruled entries
   -------------------------------------------------------------------------- */

.catalog { list-style: none; margin: 0; padding: 0; }

.catalog > li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.catalog > li:first-child { border-top: 1px solid var(--line); }

.catalog .entry-title {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.5vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  flex: none;
  max-width: 78%;
}
.catalog .entry-leader {
  flex: 1 1 auto;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--line-strong);
  transform: translateY(-0.28em);
}
.catalog .entry-note {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--fs-fine);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-soft);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .catalog > li { flex-wrap: wrap; gap: 0.25rem 0.75rem; }
  .catalog .entry-title { max-width: 100%; }
  .catalog .entry-leader { display: none; }
  .catalog .entry-note {
    width: 100%;
    white-space: normal;
    letter-spacing: 0.08em;
  }
}

.list-columns {
  columns: 2;
  column-gap: clamp(2rem, 5vw, 4.5rem);
}
@media (max-width: 760px) { .list-columns { columns: 1; } }

/* Plain ruled definition rows (what we provide / what you provide). */
.ledger { margin: 0; }
.ledger > div {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: var(--s2) clamp(1.5rem, 3vw, 2.5rem);
  padding-block: var(--s3);
  border-top: 1px solid var(--line);
}
.ledger > div:last-child { border-bottom: 1px solid var(--line); }
.ledger dt {
  font-family: var(--sans);
  font-size: var(--fs-fine);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-ink);
  padding-top: 0.28rem;
}
.section--navy .ledger dt,
.section--ink .ledger dt { color: var(--orange-soft); }
.section--sage .ledger dt { color: #fff; }
.ledger dd { margin: 0; color: var(--fg-soft); max-width: 58ch; }
.ledger dd strong { color: var(--fg); font-weight: 700; }

/* Inside a two-up split the label column has to give the prose room. */
.split .ledger > div { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); }

/* Question-and-answer rows read better stacked, in sentence case. */
.ledger--qa > div { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.ledger--qa dt {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--fg);
  padding-top: 0;
}
.ledger--qa dd { max-width: 68ch; }

@media (max-width: 680px) {
  .ledger > div,
  .split .ledger > div { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   13. Seed packets — the kit contents, front and back
   -------------------------------------------------------------------------- */

.packets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.packet-cell {
  display: flex;
  flex-direction: column;
  background: var(--cream);
}
.section--navy .packet-cell,
.section--ink .packet-cell { background: var(--navy); }

@media (max-width: 900px) { .packets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .packets { grid-template-columns: minmax(0, 1fr); } }

.packet {
  position: relative;
  background: transparent;
  padding: var(--s5) var(--s4) var(--s4);
  text-align: left;
  font: inherit;
  color: inherit;
  border: 0;
  cursor: pointer;
  flex: 1 1 auto;
  min-height: 16rem;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  transition: background-color 0.3s var(--ease);
}
.packet:hover { background: rgba(22, 41, 77, 0.05); }
.section--navy .packet:hover,
.section--ink .packet:hover { background: rgba(245, 241, 232, 0.07); }

@media (max-width: 620px) { .packet { min-height: 0; } }

.packet__icon { width: 2.5rem; height: 2.5rem; color: var(--sage); flex: none; }
.section--navy .packet__icon,
.section--ink .packet__icon { color: var(--sage-lift); }

.packet h3 { font-size: var(--fs-h4); }
.packet p { margin: 0; font-size: var(--fs-small); color: var(--fg-soft); }

.packet__flip {
  margin-top: auto;
  padding-top: var(--s3);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.section--navy .packet__flip,
.section--ink .packet__flip { color: var(--orange-soft); }
.packet__flip svg { width: 0.9em; height: 0.9em; transition: transform 0.4s var(--ease); }
.packet[aria-expanded="true"] .packet__flip svg { transform: rotate(180deg); }

.packet__back {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease);
}
.packet[aria-expanded="true"] + .packet__back,
.packet__back[data-open="true"] { grid-template-rows: 1fr; }
.packet__back > div { overflow: hidden; }
.packet__back p {
  margin: 0 var(--s4) var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--fg-soft);
}

/* --------------------------------------------------------------------------
   14. Quote — the pulled book line
   -------------------------------------------------------------------------- */

.quote { margin: 0; max-width: 32rem; }
.quote--wide { max-width: 44rem; }
.quote p {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.24;
  letter-spacing: -0.02em;
  margin: 0;
}
.quote figcaption {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  color: var(--fg-soft);
}
.quote figcaption cite { font-style: normal; font-weight: 700; color: var(--fg); }

.quote-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 860px) {
  .quote-band { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   15. Split — image beside text
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5.5vw, 5rem);
  align-items: center;
}
.split--wide-text { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.split--wide-figure { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.split__figure-first { order: -1; }

@media (max-width: 900px) {
  .split,
  .split--wide-text,
  .split--wide-figure { grid-template-columns: minmax(0, 1fr); }
  .split__figure-first { order: 0; }
}

/* --------------------------------------------------------------------------
   16. Makers
   -------------------------------------------------------------------------- */

.makers { display: grid; gap: 0; }

.maker {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  gap: var(--s2) clamp(1.5rem, 3vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.4rem, 2.4vw, 1.9rem);
  border-top: 1px solid var(--line);
}
.maker:last-child { border-bottom: 1px solid var(--line); }
.maker h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); }
.maker .label { margin-top: 0.55rem; }
.maker p { margin: 0; color: var(--fg-soft); max-width: 58ch; }
.maker .maker__link { flex: none; white-space: nowrap; }

@media (max-width: 860px) {
  .maker { grid-template-columns: minmax(0, 1fr); }
}

/* A long shop URL ("nextchapterbooksandgifts.com") must not push the page
   wider than the phone. Below this width the link wraps instead. */
@media (max-width: 620px) {
  .maker .maker__link {
    white-space: normal;
    overflow-wrap: anywhere;
    letter-spacing: 0.04em;
  }
}

/* --------------------------------------------------------------------------
   17. Forms
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--s4); max-width: 40rem; }

.field { display: grid; gap: 0.45rem; }

.field label {
  font-size: var(--fs-fine);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

.field input,
.field textarea,
.field select {
  font: inherit;
  font-size: var(--fs-body);
  color: var(--fg);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 0.9rem 1rem;
  width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:hover,
.field textarea:hover,
.field select:hover { border-color: var(--navy); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--orange);
  box-shadow: inset 0 0 0 1px var(--orange);
}
.field input::placeholder,
.field textarea::placeholder { color: #59637a; opacity: 1; }

.field-hint { font-size: var(--fs-fine); color: var(--fg-soft); margin: 0; }

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}
@media (max-width: 620px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   18. Notices
   -------------------------------------------------------------------------- */

.notice {
  border: 1px solid var(--line-strong);
  background: rgba(198, 165, 107, 0.14);
  padding: var(--s4);
  font-size: var(--fs-small);
  color: var(--fg);
  max-width: 46rem;
}
.notice p { margin: 0; }
.notice p + p { margin-top: 0.7em; }
.notice strong { font-weight: 700; }
.section--navy .notice,
.section--ink .notice { background: rgba(245, 241, 232, 0.07); }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */

/* The footer is the book's back endpaper: the scattered poppy pattern,
   printed faintly on the same navy stock. */
.footer {
  position: relative;
  isolation: isolate;
  background: var(--navy-ink);
  color: #c8cedb;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) var(--s5);
  font-size: var(--fs-small);
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/endpaper.jpg");
  background-size: 460px;
  background-position: center top;
  opacity: 0.16;
  mix-blend-mode: luminosity;
  pointer-events: none;
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: var(--s6);
  border-bottom: 1px solid rgba(245, 241, 232, 0.16);
}

.footer__brand img { width: 172px; }
.footer__tagline {
  font-family: var(--serif);
  font-size: 1.4375rem;
  line-height: 1.36;
  color: var(--cream);
  margin-top: var(--s4);
  max-width: 24rem;
  text-wrap: balance;
}

.footer__head {
  font-family: var(--sans);
  font-size: var(--fs-fine);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-soft);
  margin-bottom: var(--s3);
}

.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer a { color: #c8cedb; text-decoration: none; transition: color 0.2s var(--ease); }
.footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--orange); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
  padding-top: var(--s5);
  font-size: var(--fs-fine);
  color: #9aa4b6;
}
.footer__bottom p { margin: 0; max-width: 58ch; }

@media (max-width: 900px) {
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   20. Motion — one authored moment, from an already-visible default
   -------------------------------------------------------------------------- */

[data-rise] {
  opacity: 1;
  transform: none;
}

.js [data-rise] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--rise-delay, 0s);
}
.js [data-rise].is-in {
  opacity: 1;
  transform: none;
}

/* The first viewport slides up but never fades from nothing — the headline and
   the two actions have to be readable from the first painted frame. */
.js .hero__body > * {
  transform: translateY(22px);
  animation: rise 1s var(--ease) forwards;
}
.js .hero__body > *:nth-child(1) { animation-delay: 0.06s; }
.js .hero__body > *:nth-child(2) { animation-delay: 0.16s; }
.js .hero__body > *:nth-child(3) { animation-delay: 0.26s; }
.js .hero__body > *:nth-child(4) { animation-delay: 0.36s; }

.js .hero__media img {
  animation: bloom 1.8s var(--ease) forwards;
}

@keyframes rise {
  to { transform: none; }
}
@keyframes bloom {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-rise] { opacity: 1; transform: none; }
  .js .hero__body > * { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   21. Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.stack-1 > * + * { margin-top: var(--s1); }
.stack-2 > * + * { margin-top: var(--s2); }
.stack-3 > * + * { margin-top: var(--s3); }
.stack-4 > * + * { margin-top: var(--s4); }
.stack-5 > * + * { margin-top: var(--s5); }
.stack-6 > * + * { margin-top: var(--s6); }

.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }
.mb-4 { margin-bottom: var(--s4); }
.mb-5 { margin-bottom: var(--s5); }
.mb-6 { margin-bottom: var(--s6); }

.text-soft { color: var(--fg-soft); }
.fine { font-size: var(--fs-fine); }
.measure { max-width: var(--measure); }
.measure-tight { max-width: var(--measure-tight); }

/* Newsletter signup feedback — one line under the button, coloured only once
   there is something to say. */
/* The bot-trap field carries [hidden]; .field's own display would win. */
.field[hidden] { display: none; }

.form__status:empty { display: none; }
.form__status { margin: 0; font-size: 0.95rem; }
.form__status.is-done { color: var(--sage-deep); }
.form__status.is-error { color: var(--orange-ink); }

/* Five doors: a row of three over a row of two, on a six-column grid so both
   rows stay flush with the section rules. */
.doors--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.doors--five > * { grid-column: span 2; }
.doors--five > *:nth-child(4),
.doors--five > *:nth-child(5) { grid-column: span 3; }

/* A door that is not a link yet. */
.door--soon { cursor: default; }
.door--soon:hover { background: none; }
.door--soon .door__figure img { filter: saturate(0.55) brightness(0.92); }
.door__figure { position: relative; }
.door__badge {
  position: absolute;
  top: var(--s3);
  left: var(--s3);
  z-index: 1;
  background: var(--orange-action);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.45rem 0.7rem;
}

/* The Instagram sign-off band. */
.follow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: var(--s4) var(--s5);
  align-items: center;
}

@media (max-width: 900px) {
  .doors--five { grid-template-columns: minmax(0, 1fr); }
  .doors--five > *,
  .doors--five > *:nth-child(4),
  .doors--five > *:nth-child(5) { grid-column: auto; }
  .follow { grid-template-columns: minmax(0, 1fr); }
}

/* A two-column reference table, ruled like the ledger rows it replaces.
   Wrapped in .table-scroll so a narrow phone scrolls the table, not the page. */
.table-scroll { overflow-x: auto; }
.ledger-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.ledger-table th,
.ledger-table td {
  vertical-align: top;
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-top: 1px solid var(--line);
}
.ledger-table thead th {
  border-top: 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-ink);
  padding-bottom: var(--s2);
}
.ledger-table tbody th {
  width: 12rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.ledger-table td {
  color: var(--fg-soft-ink);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.section--navy .ledger-table td,
.section--ink .ledger-table td { color: var(--fg-soft-navy); }

@media (max-width: 720px) {
  .ledger-table thead { display: none; }
  .ledger-table tbody th,
  .ledger-table tbody td { display: block; width: auto; padding-right: 0; }
  .ledger-table tbody td { border-top: 0; padding-top: 0.35rem; }
}

/* Giving options — one ruled row each, with its action on the right. */
.give-options { list-style: none; margin: 0; padding: 0; }
.give-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: var(--s3) var(--s5);
  align-items: center;
  padding: var(--s4) 0;
  border-top: 1px solid var(--line);
}
.give-option:last-child { border-bottom: 1px solid var(--line); }
.give-option h3 { font-size: var(--fs-h3); }
.give-option p { margin: 0.35rem 0 0; color: var(--fg-soft-ink); font-size: var(--fs-small); }

/* An action that is not live yet: it looks like the button it will become. */
.btn.is-disabled {
  background: none;
  color: var(--orange-ink);
  border: 1px dashed var(--orange-action);
  cursor: default;
  pointer-events: none;
}

@media (max-width: 700px) {
  .give-option { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   GIVING PANEL
   One navy plate carrying frequency, amount and a single action, so the donor
   decides in one place instead of reading down five ruled rows. Orange marks
   what she has chosen; everything unchosen stays quiet.
   -------------------------------------------------------------------------- */

.give-panel {
  background: var(--navy);
  color: var(--cream);
  --fg: var(--cream);
  --fg-soft: rgba(245, 241, 232, 0.72);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  border: 1px solid var(--navy-lift);
}

.give-panel__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--s3);
  border-bottom: 1px solid rgba(245, 241, 232, 0.18);
}
.give-panel__head .label { color: var(--orange-soft); }
.give-panel__head p { margin: 0; font-size: var(--fs-fine); color: rgba(245, 241, 232, 0.72); }

.give-field { margin-top: var(--s5); }
.give-field > .label {
  display: block;
  margin-bottom: var(--s2);
  color: rgba(245, 241, 232, 0.72);
}

/* Frequency: three equal tabs reading as one control. */
.give-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); }

/* Amounts: six tiles, three across, each carrying what the money becomes. */
.give-amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); }

.give-tab,
.give-amount {
  font: inherit;
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(245, 241, 232, 0.28);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.give-tab:hover,
.give-amount:hover { border-color: var(--orange-soft); }

.give-tab {
  text-align: center;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.95rem 0.5rem;
}

.give-amount { padding: 0.85rem 1rem 0.95rem; }
.give-amount strong {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  line-height: 1.1;
}
.give-amount span {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-fine);
  color: rgba(245, 241, 232, 0.66);
}

.give-tab[aria-pressed="true"],
.give-amount[aria-pressed="true"] {
  background: var(--orange-action);
  border-color: var(--orange-action);
  color: #fff;
}
.give-amount[aria-pressed="true"] span { color: rgba(255, 255, 255, 0.86); }

/* The custom amount only appears once "Other" is the choice. */
.give-other { margin-top: var(--s3); max-width: 18rem; }
.give-other label { color: rgba(245, 241, 232, 0.72); }
/* The field sits on white inside a plate that has redefined --fg as cream,
   which .field input would otherwise inherit and type invisibly. */
.give-other input { color: var(--ink); }

.give-submit { width: 100%; margin-top: var(--s5); justify-content: center; }
.give-panel .form__status { margin-top: var(--s3); }
.give-panel .form__status.is-error { color: var(--orange-soft); }
.give-panel .form__status.is-done { color: var(--sage-pale); }

.give-note {
  margin: var(--s3) 0 0;
  font-size: var(--fs-fine);
  color: rgba(245, 241, 232, 0.66);
}
.give-note a { color: var(--orange-soft); }

@media (max-width: 640px) {
  .give-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .give-tabs { grid-template-columns: minmax(0, 1fr); }
}

/* A letter from the newsletter, rendered on the blog. Kit sends body-only
   HTML — paragraphs, links, the odd bolded line — so the archive only has to
   give it the page's measure and rhythm and let the stylesheet do the rest. */
.letter { max-width: var(--measure); }
.letter > * + * { margin-top: 1.15em; }
.letter p { font-size: var(--fs-body); margin: 0; }
.letter a { color: var(--navy); text-decoration-color: var(--orange); }
.letter a:hover { color: var(--orange-action); }
.letter strong { font-weight: 700; }
.letter img { max-width: 100%; height: auto; }