/* ============================================================
   The Farmer's Table — editorial pages (About, Get Involved)

   Art direction: the brand already owns a set of engraved,
   seed-catalog illustrations, and the display face is a Clarendon
   slab. Together those point at one specific object — a 19th-century
   agricultural society's annual report. Cream stock, green ink,
   goldenrod for emphasis, rules instead of boxes, rosters set like a
   subscriber list. That lane is the brand's own rather than the
   default "nonprofit about page", and it's why these pages use
   hairlines and plates where the homepage uses cards.

   Depends on colors_and_type.css (tokens) and homepage-v2.css
   (shared chrome: ribbon, nav, footer, container).

   Contrast note: --fg-subtle (#9A8C7E) lands at 2.7:1 on cream and is
   never used for text here. Secondary copy uses --fg-muted (5.4:1).
   Autumn orange on cream is 3.2:1, so it is reserved for large text
   only, never body or small labels.
   ============================================================ */

/* ---- z-index scale (page-local, below the nav's 50) --------- */
:root {
  --z-plate-caption: 2;
  --z-scrim: 3;
  --z-overlay-text: 4;
}

/* ------------------------------------------------------------
   Shared page furniture
   ------------------------------------------------------------ */
.pg {
  background: var(--c-cream);
}

.pg-wrap {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}
.pg-narrow {
  width: min(720px, calc(100% - 48px));
  margin-inline: auto;
}
@media (max-width: 640px) {
  .pg-wrap, .pg-narrow { width: calc(100% - 36px); }
}

.pg-section {
  padding: clamp(56px, 8vw, 104px) 0;
}
.pg-section--paper { background: var(--c-paper); }
.pg-section--cream { background: var(--c-cream); }
.pg-section--green {
  background: var(--c-tft-green);
  color: var(--fg-on-dark);
}

/* A single hairline used as the page's structural device, in place of
   card borders. */
.pg-rule {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}
.pg-section--green .pg-rule { background: rgba(250, 246, 234, 0.24); }

/* ------------------------------------------------------------
   Masthead — the page opener.

   Deliberately not the homepage's two-column hero: this is the
   report cover. Centred, ruled above and below, with the statement
   carrying the weight.
   ------------------------------------------------------------ */
.pg-masthead {
  background: var(--c-cream);
  padding: clamp(40px, 6vw, 72px) 0 clamp(30px, 4vw, 48px);
  text-align: center;
}
.pg-masthead-org {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: block;
  margin-bottom: clamp(20px, 3vw, 30px);
}
.pg-masthead h1 {
  font-family: var(--font-display);
  font-weight: 900;
  /* clamp max stays well under the 6rem ceiling; this is a statement,
     not a shout. */
  font-size: clamp(34px, 5.6vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--c-tft-green);
  margin: 0 auto;
  max-width: 17ch;
  text-wrap: balance;
}
.pg-masthead h1 em {
  font-style: italic;
  color: var(--c-autumn-orange);
}
.pg-masthead .lede {
  font-family: var(--font-text);
  font-size: clamp(16.5px, 1.5vw, 19px);
  line-height: 1.62;
  color: var(--fg);
  max-width: 62ch;
  margin: clamp(20px, 3vw, 28px) auto 0;
  text-wrap: pretty;
}
.pg-masthead-rules {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: clamp(26px, 4vw, 40px) auto 0;
  max-width: 240px;
}
.pg-masthead-rules span {
  display: block;
  height: 1px;
  background: var(--c-tft-green);
  opacity: 0.5;
}
.pg-masthead-rules span:last-child { opacity: 0.22; }

/* ------------------------------------------------------------
   Plate — a full-bleed photograph, treated like a tipped-in plate.
   Reuses the site's established photo handling (ragged edge filter
   + desaturation) so it reads as one library with the homepage.
   ------------------------------------------------------------ */
.pg-plate {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--c-tft-green);
}
.pg-plate img {
  display: block;
  width: 100%;
  height: clamp(240px, 42vw, 460px);
  object-fit: cover;
  filter: saturate(0.84) contrast(1.02);
}
.pg-plate figcaption {
  position: relative;
  z-index: var(--z-plate-caption);
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  background: var(--c-cream);
  padding: 12px 0 0;
  text-align: center;
}

/* Overlaid variant — used where the photograph should carry the
   headline rather than sit under it. */
.pg-plate--hero img { height: clamp(320px, 54vw, 540px); }
.pg-plate--hero .scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-scrim);
  background: linear-gradient(
    180deg,
    rgba(11, 67, 36, 0.30) 0%,
    rgba(11, 67, 36, 0.62) 62%,
    rgba(11, 67, 36, 0.82) 100%
  );
}
.pg-plate--hero .overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: var(--z-overlay-text);
  padding: 0 0 clamp(28px, 5vw, 56px);
  text-align: center;
}
.pg-plate--hero .overlay h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 5.4vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  /* Light type on a dark ground reads lighter; the extra leading and
     the paper (not pure white) tone keep it from glaring. */
  color: var(--c-paper);
  margin: 0 auto;
  max-width: 16ch;
  text-wrap: balance;
}
.pg-plate--hero .overlay p {
  font-family: var(--font-text);
  font-size: clamp(15.5px, 1.4vw, 18px);
  line-height: 1.66;
  color: rgba(250, 246, 234, 0.93);
  max-width: 58ch;
  margin: 18px auto 0;
  text-wrap: pretty;
}

/* ------------------------------------------------------------
   Reading column — the narrative body.
   ------------------------------------------------------------ */
.pg-read p {
  font-family: var(--font-text);
  font-size: clamp(16.5px, 1.45vw, 18.5px);
  line-height: 1.72;
  color: var(--fg);
  margin: 0 0 1.15em;
  max-width: 68ch;
  text-wrap: pretty;
}
.pg-read p:last-child { margin-bottom: 0; }
.pg-read p.first {
  font-size: clamp(18px, 1.7vw, 21.5px);
  line-height: 1.62;
  color: var(--c-oxblood);
}
.pg-read a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
/* Autumn orange is only 3.2:1 on cream, which fails for body-sized
   text. Prose links darken on hover instead of warming. */
.pg-read a:hover { color: var(--c-oxblood); }

/* ------------------------------------------------------------
   Creed — mission and vision.

   Two statements on the green ground, divided by a rule rather than
   boxed into matching cards. Mission is the larger of the two because
   it is the operative one; vision is the horizon behind it.
   ------------------------------------------------------------ */
.pg-creed {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 860px) {
  .pg-creed { grid-template-columns: 1fr; gap: 40px; }
}
.pg-creed-item > .kind {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
}
.pg-creed-item.is-mission > .kind { color: var(--c-goldenrod); }
.pg-creed-item.is-vision  > .kind { color: var(--c-robins-egg); }

.pg-creed-item h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(23px, 2.5vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-paper);
  margin: 0 0 18px;
  max-width: 22ch;
  text-wrap: balance;
}
.pg-creed-item.is-vision h2 { font-size: clamp(21px, 2.2vw, 28px); }

.pg-creed-item p {
  font-family: var(--font-text);
  font-size: clamp(15.5px, 1.35vw, 17px);
  /* +0.08 over the light-ground body leading, per light-on-dark. */
  line-height: 1.78;
  color: rgba(250, 246, 234, 0.90);
  margin: 0 0 1em;
  max-width: 54ch;
  text-wrap: pretty;
}
.pg-creed-item p:last-child { margin-bottom: 0; }

@media (min-width: 861px) {
  .pg-creed-item.is-vision {
    border-left: 1px solid rgba(250, 246, 234, 0.22);
    padding-left: clamp(32px, 5vw, 72px);
  }
}

/* ------------------------------------------------------------
   Work — the four initiatives.

   A catalog spread, not a card grid: no boxes, no shadows. The
   engravings do the differentiating, and hairlines set the columns.
   ------------------------------------------------------------ */
.pg-work {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (max-width: 780px) {
  .pg-work { grid-template-columns: 1fr; }
}

.pg-work-item {
  padding: clamp(28px, 3.6vw, 46px) clamp(22px, 3vw, 44px);
  position: relative;
}
/* Interior rules only, so the block reads as a spread rather than a
   set of framed tiles. */
@media (min-width: 781px) {
  .pg-work-item:nth-child(odd)  { border-right: 1px solid var(--border); }
  .pg-work-item:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 780px) {
  .pg-work-item { border-bottom: 1px solid var(--border); }
  .pg-work-item:last-child { border-bottom: 0; }
}

.pg-work-item .plate {
  width: clamp(74px, 9vw, 104px);
  height: clamp(74px, 9vw, 104px);
  margin-bottom: 20px;
  display: block;
}
.pg-work-item .plate img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.pg-work-item h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.24;
  color: var(--c-tft-green);
  margin: 0 0 12px;
  max-width: 24ch;
  text-wrap: balance;
}
.pg-work-item p {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.68;
  color: var(--fg);
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
}

/* ------------------------------------------------------------
   Section heading used across both pages.
   ------------------------------------------------------------ */
.pg-head {
  margin-bottom: clamp(28px, 4vw, 46px);
}
.pg-head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--c-tft-green);
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}
.pg-section--green .pg-head h2 { color: var(--c-paper); }
.pg-head p {
  font-family: var(--font-text);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--fg);
  margin: 16px 0 0;
  max-width: 62ch;
  text-wrap: pretty;
}
.pg-section--green .pg-head p { color: rgba(250, 246, 234, 0.90); line-height: 1.78; }
.pg-head--center { text-align: center; }
.pg-head--center h2, .pg-head--center p { margin-inline: auto; }

/* ------------------------------------------------------------
   Roster — volunteers and board.

   Set like a subscriber list: names in the slab, towns in small
   muted body. No avatar circles, because there are no photographs;
   inventing placeholder portraits would be worse than the list.
   ------------------------------------------------------------ */
.pg-roster {
  columns: 3;
  column-gap: clamp(24px, 4vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 860px) { .pg-roster { columns: 2; } }
@media (max-width: 520px) { .pg-roster { columns: 1; } }

.pg-roster li {
  break-inside: avoid;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.pg-roster .name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.3;
  color: var(--fg);
}
.pg-roster .town {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  margin-top: 3px;
}

.pg-board {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.62;
  color: var(--fg);
  margin: 0;
  max-width: 44ch;
  text-wrap: pretty;
}
/* Goldenrod middots measured 1.58:1. These are punctuation between names,
   not decoration, so they get a colour that is actually legible. */
.pg-board .sep { color: var(--fg-muted); padding: 0 2px; }

/* ------------------------------------------------------------
   Ways in — Get Involved.

   Weighted, not uniform: the lead action gets the green plate, the
   rest are ruled entries at two widths. Explicitly avoids a grid of
   six matching cards, which is what the source page does and what
   makes it read as a list of chores.
   ------------------------------------------------------------ */
.pg-lead {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 820px) { .pg-lead { grid-template-columns: 1fr; gap: 28px; } }

.pg-lead h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(27px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.014em;
  color: var(--c-paper);
  margin: 0 0 18px;
  max-width: 16ch;
  text-wrap: balance;
}
.pg-lead p {
  font-family: var(--font-text);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.76;
  color: rgba(250, 246, 234, 0.92);
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}
.pg-lead-aside { justify-self: start; }
@media (min-width: 821px) { .pg-lead-aside { justify-self: end; text-align: right; } }

.pg-ways {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
}
@media (max-width: 780px) { .pg-ways { grid-template-columns: 1fr; } }

.pg-way {
  padding: clamp(26px, 3.4vw, 40px) 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (min-width: 781px) {
  .pg-way { padding-right: clamp(26px, 3.4vw, 52px); }
  .pg-way:nth-child(even) {
    padding-right: 0;
    padding-left: clamp(26px, 3.4vw, 52px);
    border-left: 1px solid var(--border);
  }
  /* A way that has no partner on its row should not leave a dangling
     half-width rule. */
  .pg-way--full {
    grid-column: 1 / -1;
    padding-right: 0;
    padding-left: 0;
    border-left: 0;
  }
}

.pg-way h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.22;
  color: var(--c-tft-green);
  margin: 0 0 11px;
  max-width: 22ch;
  text-wrap: balance;
}
.pg-way p {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg);
  margin: 0 0 20px;
  max-width: 52ch;
  text-wrap: pretty;
}
.pg-way .note {
  font-size: 14px;
  color: var(--fg-muted);
  margin-top: -10px;
  margin-bottom: 18px;
}
.pg-way-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

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

   Square-ish, ink-on-paper. One device only per button: a solid fill
   or a single hairline border, never a border plus a soft shadow.
   ------------------------------------------------------------ */
.pg-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 13px 22px;
  border-radius: 1px;
  border: 1px solid var(--c-tft-green);
  background: var(--c-tft-green);
  color: var(--c-paper);
  text-decoration: none;
  cursor: pointer;
  transition: background 190ms cubic-bezier(0.22, 1, 0.36, 1),
              color 190ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 190ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pg-btn:hover { background: var(--c-oxblood); border-color: var(--c-oxblood); color: var(--c-paper); }
.pg-btn .arrow { transition: transform 190ms cubic-bezier(0.22, 1, 0.36, 1); }
.pg-btn:hover .arrow { transform: translateX(3px); }

.pg-btn--ghost {
  background: transparent;
  color: var(--c-tft-green);
}
.pg-btn--ghost:hover { background: var(--c-tft-green); color: var(--c-paper); }

/* On the green ground the fill inverts: goldenrod carries the primary
   action (6.6:1 on green), paper carries the secondary. */
.pg-btn--gold {
  background: var(--c-goldenrod);
  border-color: var(--c-goldenrod);
  color: var(--c-warm-black);
}
.pg-btn--gold:hover {
  background: var(--c-paper);
  border-color: var(--c-paper);
  color: var(--c-warm-black);
}
.pg-btn--on-dark {
  background: transparent;
  border-color: rgba(250, 246, 234, 0.55);
  color: var(--c-paper);
}
.pg-btn--on-dark:hover {
  background: var(--c-paper);
  border-color: var(--c-paper);
  color: var(--c-tft-green);
}

.pg-btn:focus-visible,
.pg-link:focus-visible {
  outline: 2px solid var(--c-autumn-orange);
  outline-offset: 3px;
}

.pg-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-tft-green);
  text-decoration: none;
  border-bottom: 1px solid var(--c-goldenrod);
  padding-bottom: 3px;
  transition: border-color 190ms, color 190ms;
}
.pg-link:hover { color: var(--c-oxblood); border-bottom-color: var(--c-oxblood); }

/* ------------------------------------------------------------
   Dinner — the signature event gets its own moment.
   ------------------------------------------------------------ */
.pg-dinner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 50px);
  align-items: center;
}
@media (max-width: 720px) { .pg-dinner { grid-template-columns: 1fr; gap: 22px; } }

.pg-dinner .plate {
  width: clamp(88px, 11vw, 128px);
  height: clamp(88px, 11vw, 128px);
}
.pg-dinner .plate img { width: 100%; height: 100%; object-fit: contain; display: block; }

.pg-dinner h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--c-tft-green);
  margin: 0 0 12px;
  max-width: 24ch;
  text-wrap: balance;
}
.pg-dinner .when {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-autumn-orange-text);
  display: block;
  margin-bottom: 14px;
}
.pg-dinner p {
  font-family: var(--font-text);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--fg);
  margin: 0 0 20px;
  max-width: 56ch;
  text-wrap: pretty;
}

/* ------------------------------------------------------------
   Motion.

   Opt-in, and only on load. Nothing here gates visibility behind a
   scroll-triggered class: if the animation never runs (reduced
   motion, a hidden tab, a headless renderer) the content is already
   in its final state. `backwards` supplies the offset only while the
   animation is actually playing.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pg-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes pg-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .pg-masthead-org { animation: pg-fade 520ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
  .pg-masthead h1  { animation: pg-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) 60ms backwards; }
  .pg-masthead .lede { animation: pg-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) 150ms backwards; }
  .pg-masthead-rules { animation: pg-fade 700ms cubic-bezier(0.22, 1, 0.36, 1) 300ms backwards; }

  .pg-plate--hero .overlay h1 { animation: pg-rise 760ms cubic-bezier(0.22, 1, 0.36, 1) 80ms backwards; }
  .pg-plate--hero .overlay p  { animation: pg-rise 760ms cubic-bezier(0.22, 1, 0.36, 1) 190ms backwards; }
}