/* ===========================================================================
   CommonGround — Homepage composition layer
   ---------------------------------------------------------------------------
   Loaded only by / (index.html). It extends the shared brand system in
   styles.css; it never redefines brand tokens. Everything here is either a
   new `home-*` / `cine-*` / `season-*` / `ledger-*` / `tl-*` component or a
   selector scoped under `.home-page`, so no other page can be affected.

   Written mobile-first: the base rules describe a phone, and the three
   min-width queries (640 / 900 / 1200) progressively add the editorial
   asymmetry. Every animation is opt-in behind `.js-enh` and every one of them
   is switched off in the `prefers-reduced-motion` block at the end of the
   file, so the page is complete and readable with no JavaScript and no
   motion at all.
   ======================================================================== */

.home-page {
  /* Consumed by the hero so the first viewport is exactly one screen tall.
     home.js sets this to 0px when it promotes the header to an overlay. */
  --cg-header-h: 66px;
  --home-rule: rgba(189, 175, 154, 0.62);
  --home-ink-soft: #45504a;
  --home-forest-deep: #112720;
  --home-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------------------
   1. Atmosphere, reveals and editorial primitives
   ------------------------------------------------------------------------ */

/* A single fixed grain plate over the whole document. Fixed and
   pointer-events:none so it is composited once and never repaints with
   scroll, and low enough in opacity that it reads as paper rather than
   noise. */
.home-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Reveal on scroll. The hidden state is applied only when home.js has marked
   the document, so a visitor without JavaScript sees ordinary static
   content. */
.js-enh [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.85s var(--home-ease),
    transform 0.85s var(--home-ease);
}

.js-enh [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

.js-enh [data-reveal][data-reveal-delay="1"] { transition-delay: 0.09s; }
.js-enh [data-reveal][data-reveal-delay="2"] { transition-delay: 0.18s; }
.js-enh [data-reveal][data-reveal-delay="3"] { transition-delay: 0.27s; }
.js-enh [data-reveal][data-reveal-delay="4"] { transition-delay: 0.36s; }

/* Chapter marker: a hairline rule, a set number and the section name. Used at
   the head of every major section so the page reads as a sequence rather than
   a stack of blocks. */
.home-chapter {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.home-chapter::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--home-rule);
}

.home-chapter-num {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-feature-settings: "tnum";
  color: var(--color-primary);
}

.section-dark .home-chapter,
.home-dark .home-chapter { color: #e6cf9e; }

.section-dark .home-chapter::after,
.home-dark .home-chapter::after { background: rgba(233, 226, 208, 0.28); }

.section-dark .home-chapter-num,
.home-dark .home-chapter-num { color: #fffdf7; }

/* Display typography. Playfair Display is a variable font here, so 500 is a
   real weight — at very large sizes it is far more elegant than the 700 the
   base stylesheet uses for headings, and it keeps the long editorial lines
   from turning into a slab. */
.home-display {
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.06;
  text-wrap: balance;
}

.home-display em {
  font-style: italic;
  font-weight: 500;
}

.home-kicker {
  max-width: 62ch;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.65;
  color: var(--color-text-main);
}

.home-note {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.home-dark {
  background: var(--home-forest-deep);
  color: rgba(247, 243, 233, 0.86);
}

.home-dark h2,
.home-dark h3,
.home-dark h4 { color: #fffdf7; }

.home-dark p { color: rgba(247, 243, 233, 0.82); }
.home-dark .home-kicker { color: rgba(247, 243, 233, 0.92); }
.home-dark .home-note { color: rgba(247, 243, 233, 0.66); }

.home-dark a:not(.button) {
  color: #eadcb8;
  text-decoration-color: rgba(234, 220, 184, 0.55);
}

.home-dark a:not(.button):hover { color: #fffdf7; }

/* A wider measure than the shared 1200px container for full-bleed editorial
   moments that still need side padding. */
.home-wide {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--spacing-lg);
}

.home-section {
  padding-top: clamp(3.5rem, 9vw, 7.5rem);
  padding-bottom: clamp(3.5rem, 9vw, 7.5rem);
}

.home-section-tight {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.home-cream { background: var(--cg-cream); }
.home-sand { background: var(--color-bg-sand); }

/* The shared stylesheet has one button size. The hero and the two closing
   invitations need a heavier one to carry a full-bleed composition, so the
   variant is defined here rather than added to the shared system where it
   would change buttons on pages nobody has reviewed. */
.home-page .button-large {
  padding: 1rem 2.1rem;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------------------
   2. Header as a cinematic overlay
   ------------------------------------------------------------------------ */

/* Progressive enhancement: without JavaScript the shared solid sticky header
   is used unchanged. With JavaScript the header floats over the hero image and
   only becomes opaque once the hero has been scrolled past, which is what
   makes the first viewport read as a single uninterrupted frame. */
.home-page.header-overlay {
  --cg-header-h: 0px;
}

.home-page.header-overlay .site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  background: linear-gradient(to bottom, rgba(13, 31, 25, 0.72), rgba(13, 31, 25, 0));
  border-bottom-color: transparent;
  box-shadow: none;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.home-page.header-overlay.header-solid .site-header {
  background: var(--cg-forest);
  border-bottom-color: var(--color-border-dark);
  box-shadow: var(--shadow-md);
}

/* ---------------------------------------------------------------------------
   3. Cinematic hero
   ------------------------------------------------------------------------ */

.cine-hero {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: calc(100svh - var(--cg-header-h));
  padding: 0;
  overflow: clip;
  isolation: isolate;
  background: var(--home-forest-deep);
}

.cine-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cine-hero-media picture,
.cine-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cine-hero-media img {
  object-fit: cover;
  object-position: 62% center;
  will-change: transform;
}

/* Slow drift across the frame. 28s and 1.06 scale: enough that the image is
   never quite static, small enough that it is not perceptible as movement on
   a phone. Only ever applied once home.js confirms motion is welcome. */
.js-enh .cine-hero-media img {
  animation: cine-drift 28s ease-in-out 0.4s infinite alternate both;
}

@keyframes cine-drift {
  from { transform: scale(1.005) translate3d(0, 0, 0); }
  to { transform: scale(1.06) translate3d(-1.1%, -0.9%, 0); }
}

/* Two stacked scrims. The vertical one anchors the type at the bottom of the
   frame; the radial one darkens the corners so the eye settles centre-left.
   Both are on ::after with pointer-events:none — nothing here can intercept a
   click meant for a button. */
.cine-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 70% 25%, rgba(13, 31, 25, 0) 35%, rgba(13, 31, 25, 0.55) 100%),
    linear-gradient(0deg, rgba(11, 27, 22, 0.94) 0%, rgba(12, 29, 23, 0.78) 26%, rgba(13, 31, 25, 0.34) 58%, rgba(13, 31, 25, 0.42) 100%);
}

.cine-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--cg-header-h) + 5.5rem);
  padding-bottom: 2.25rem;
}

.home-page.header-overlay .cine-hero-inner {
  padding-top: 7.5rem;
}

.cine-eyebrow {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e8d2a4;
}

.cine-eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: rgba(232, 210, 164, 0.7);
}

.cine-hero h1 {
  max-width: 20ch;
  margin-bottom: 1.1rem;
  color: #fffdf7;
  font-size: clamp(2.35rem, 8.4vw, 5.4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.03;
  text-shadow: 0 2px 28px rgba(8, 20, 16, 0.42);
}

.cine-hero h1 em {
  font-style: italic;
  color: #f0dcb4;
}

.cine-lead {
  max-width: 54ch;
  margin-bottom: 1.75rem;
  color: rgba(250, 246, 237, 0.92);
  font-size: clamp(1rem, 2.1vw, 1.2rem);
  line-height: 1.65;
}

.cine-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.cine-hero .button-ghost {
  border-color: rgba(255, 253, 247, 0.7);
  color: #fffdf7;
  background: rgba(255, 253, 247, 0.08);
  backdrop-filter: blur(2px);
}

.cine-hero-inner > .status-badge {
  align-self: flex-start;
}

.cine-hero .button-ghost:hover,
.cine-hero .button-ghost:focus-visible {
  background: #fffdf7;
  color: var(--color-primary);
}

/* Staggered entrance for the hero copy. Runs on load, not on scroll, because
   the hero is already in view — this is the one choreographed moment on the
   page. */
.js-enh .cine-hero-inner > * {
  animation: cine-rise 1.05s var(--home-ease) both;
}

.js-enh .cine-eyebrow { animation-delay: 0.12s; }
.js-enh .cine-hero h1 { animation-delay: 0.22s; }
.js-enh .cine-lead { animation-delay: 0.34s; }
.js-enh .cine-actions { animation-delay: 0.46s; }
.js-enh .cine-hero-inner > .status-badge { animation-delay: 0.56s; }

@keyframes cine-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* The fact rail across the base of the frame: what this is, where, and at what
   stage — the three things a first-time visitor needs before scrolling. */
.cine-rail {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(247, 243, 233, 0.2);
  background: rgba(10, 25, 20, 0.62);
  backdrop-filter: blur(6px);
}

.cine-rail-grid {
  display: grid;
  gap: 0;
}

.cine-rail-item {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(247, 243, 233, 0.14);
}

.cine-rail-item:last-child { border-bottom: 0; }

.cine-rail-item dt {
  margin-bottom: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 210, 164, 0.95);
}

.cine-rail-item dd {
  margin: 0;
  color: #fffdf7;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.35;
}

.cine-disclosure {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0.7rem 0 0.9rem;
  color: rgba(247, 243, 233, 0.74);
  font-size: 0.74rem;
  line-height: 1.55;
}

.cine-disclosure strong { color: #fffdf7; }

/* Scroll cue — hidden on small screens where the rail already implies more
   content below, and hidden from assistive technology because it duplicates
   the "Explore the vision" link. */
.cine-scroll-cue { display: none; }

@media (min-width: 900px) {
  .cine-scroll-cue {
    position: absolute;
    right: max(1.5rem, calc(50vw - 600px + 1.5rem));
    bottom: 10.5rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(250, 246, 237, 0.82);
    writing-mode: vertical-rl;
  }

  .cine-scroll-cue::after {
    content: "";
    width: 1px;
    height: 3.5rem;
    background: linear-gradient(to bottom, rgba(250, 246, 237, 0.85), rgba(250, 246, 237, 0));
  }

  .js-enh .cine-scroll-cue::after {
    animation: cue-pulse 2.6s ease-in-out infinite;
    transform-origin: top center;
  }
}

@keyframes cue-pulse {
  0%, 100% { transform: scaleY(0.45); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ---------------------------------------------------------------------------
   4. Why CommonGround exists
   ------------------------------------------------------------------------ */

.why-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.why-statement {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.6vw, 2.35rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1.32;
  text-wrap: pretty;
}

.why-statement footer {
  margin-top: 1rem;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Reason list: a numbered, ruled ledger rather than a card grid. Each row is
   a tension the region has and the response CommonGround proposes. */
.why-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--home-rule);
}

.why-item {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0 1rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--home-rule);
}

.why-item-num {
  grid-row: span 2;
  padding-top: 0.3rem;
  color: var(--color-accent-text);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  font-feature-settings: "tnum";
}

.why-item h3 {
  margin: 0 0 0.35rem;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.why-item p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
}

.why-principles {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.why-principles li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-main);
}

.why-principles li::before {
  content: "";
  flex: none;
  width: 0.42rem;
  height: 0.42rem;
  margin-top: 0.52rem;
  border-radius: 50%;
  background: var(--cg-sage);
}

.why-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.why-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

.why-figure figcaption {
  padding: 0.85rem 1rem 1rem;
  background: var(--color-primary);
  color: rgba(247, 243, 233, 0.86);
  font-size: 0.78rem;
  line-height: 1.55;
}

.why-figure figcaption strong { color: #fffdf7; }

/* ---------------------------------------------------------------------------
   5. The place — nature-first four-season explorer
   ------------------------------------------------------------------------ */

.season-explorer {
  display: grid;
  gap: 1.5rem;
}

.season-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  border-bottom: 1px solid rgba(247, 243, 233, 0.22);
}

.season-tab {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.95rem 0.85rem;
  border: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  color: rgba(247, 243, 233, 0.7);
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.season-tab small {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}

.season-tab::after {
  content: "";
  position: absolute;
  inset-inline: 0.35rem;
  bottom: -1px;
  height: 2px;
  background: var(--cg-terracotta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--home-ease);
}

.season-tab:hover { color: #fffdf7; background: rgba(255, 253, 247, 0.06); }

.season-tab[aria-selected="true"] {
  color: #fffdf7;
  background: rgba(255, 253, 247, 0.08);
}

.season-tab[aria-selected="true"]::after { transform: scaleX(1); }

.season-panel[hidden] { display: none; }

/* Without JavaScript the tabs cannot switch anything, so the control is hidden
   and all four seasons are read one after another as a continuous list. The
   rule between them is what keeps that legible. */
html:not(.js-enh) .season-tablist { display: none; }

html:not(.js-enh) .season-panel + .season-panel {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(233, 226, 208, 0.22);
}

.season-panel-grid {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

.season-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-primary-hover);
}

.season-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.js-enh .season-panel:not([hidden]) .season-figure img {
  animation: season-fade 0.85s var(--home-ease) both;
}

@keyframes season-fade {
  from { opacity: 0; transform: scale(1.03); }
  to { opacity: 1; transform: none; }
}

.season-figure figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.75rem 1rem 0.85rem;
  background: linear-gradient(to top, rgba(11, 27, 22, 0.92), rgba(11, 27, 22, 0));
  color: rgba(250, 246, 237, 0.9);
  font-size: 0.76rem;
  line-height: 1.5;
}

.season-body h3 {
  margin-bottom: 0.6rem;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.season-experiences {
  display: grid;
  gap: 0.7rem;
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.season-experiences li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.65rem;
  font-size: 0.94rem;
  line-height: 1.55;
  color: rgba(247, 243, 233, 0.86);
}

.season-experiences svg {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.18rem;
  color: var(--cg-stone);
}

.season-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(247, 243, 233, 0.18);
}

/* ---------------------------------------------------------------------------
   6. Community impact — regional need, then a ledger that starts at zero
   ------------------------------------------------------------------------ */

.impact-grid {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.impact-stat {
  padding: 1.4rem 1.35rem 1.25rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--cg-wood-text);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.impact-figure {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 5.5vw, 2.9rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.impact-stat h3 {
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.45;
  color: var(--color-text-main);
}

.impact-stat p {
  margin-bottom: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.6;
}

/* The zero-state ledger. The honest counterpart to the need figures above:
   nothing has been delivered yet, and the page says so in the same visual
   language it uses for everything else. */
.ledger {
  margin-top: 2.5rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(107, 124, 90, 0.35) 0%, rgba(17, 39, 32, 0) 60%),
    var(--home-forest-deep);
  color: rgba(247, 243, 233, 0.86);
}

.ledger h3 { color: #fffdf7; }
.ledger p { color: rgba(247, 243, 233, 0.82); }

.ledger-list {
  display: grid;
  gap: 0;
  margin: 1.5rem 0 1.25rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(247, 243, 233, 0.18);
}

.ledger-list > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(247, 243, 233, 0.14);
}

.ledger-list dt {
  font-size: 0.92rem;
  color: rgba(247, 243, 233, 0.86);
}

.ledger-list dd {
  margin: 0;
  color: #fffdf7;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------
   7. Food bank partnership
   ------------------------------------------------------------------------ */

.food-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.food-loop {
  margin: 0;
  padding: clamp(1rem, 3vw, 1.75rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-md);
}

.food-loop img {
  display: block;
  width: 100%;
  height: auto;
}

.food-loop figcaption {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--home-rule);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

.food-mechanisms {
  display: grid;
  gap: 0.9rem;
  margin: 1.75rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.food-mechanisms li {
  padding: 1rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--cg-cream);
}

.food-mechanisms strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
}

.food-mechanisms span {
  display: block;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.food-help {
  margin-top: 1.5rem;
  padding: 1.15rem 1.25rem;
  border-left: 3px solid var(--cg-terracotta-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-sand);
}

.food-help h3 {
  margin-bottom: 0.4rem;
  font-size: 1.05rem;
}

.food-help p {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   8. Validation market
   ------------------------------------------------------------------------ */

.validation-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.validation-media {
  position: relative;
  aspect-ratio: 16 / 9;
}

.validation-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.validation-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17, 39, 32, 0.9) 0%, rgba(17, 39, 32, 0.12) 65%);
}

.validation-body {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3rem);
  color: rgba(247, 243, 233, 0.86);
}

.validation-body h2,
.validation-body h3 { color: #fffdf7; }
.validation-body p { color: rgba(247, 243, 233, 0.84); }

.validation-measures {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
  counter-reset: measure;
}

.validation-measures li {
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  gap: 0.7rem;
  align-items: baseline;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(247, 243, 233, 0.16);
  font-size: 0.94rem;
  line-height: 1.55;
  counter-increment: measure;
}

.validation-measures li::before {
  content: counter(measure, decimal-leading-zero);
  color: #e8d2a4;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  font-feature-settings: "tnum";
}

.validation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

/* ---------------------------------------------------------------------------
   9. Animated progress timeline
   ------------------------------------------------------------------------ */

.tl {
  position: relative;
  margin-top: 2.25rem;
}

.tl-status {
  margin-bottom: 1.5rem;
  padding: 0.7rem 0.95rem;
  border-left: 3px solid var(--cg-sage);
  border-radius: var(--radius-sm);
  background: rgba(255, 253, 247, 0.06);
  color: rgba(247, 243, 233, 0.8);
  font-size: 0.82rem;
  line-height: 1.6;
}

.tl-track {
  position: relative;
  display: grid;
  gap: 2rem;
  padding-left: 2.1rem;
}

/* The rail behind the markers, and the fill that draws down it when the
   section scrolls into view. transform: scaleY is used so the animation stays
   on the compositor. */
.tl-track::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  bottom: 0.55rem;
  left: 0.42rem;
  width: 2px;
  background: rgba(247, 243, 233, 0.2);
}

.tl-fill {
  position: absolute;
  top: 0.55rem;
  bottom: 0.55rem;
  left: 0.42rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--cg-sage), var(--cg-stone));
  transform: scaleY(0);
  transform-origin: top center;
}

.js-enh .tl-fill {
  transition: transform 1.6s var(--home-ease);
}

.tl.is-drawn .tl-fill { transform: scaleY(1); }

.tl-group {
  position: relative;
}

.tl-group::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: -2.1rem;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--cg-stone);
  border-radius: 50%;
  background: var(--home-forest-deep);
}

.tl-group[data-tl-state="active"]::before {
  border-color: var(--cg-terracotta);
  background: var(--cg-terracotta);
  box-shadow: 0 0 0 5px rgba(196, 106, 74, 0.22);
}

.tl-group-label {
  display: block;
  margin-bottom: 0.9rem;
  color: #e8d2a4;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tl-items {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl-item {
  padding: 1.05rem 1.15rem;
  border: 1px solid rgba(247, 243, 233, 0.18);
  border-radius: var(--radius-md);
  background: rgba(255, 253, 247, 0.05);
}

.tl-item h3 {
  margin: 0.55rem 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tl-item p {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  line-height: 1.6;
}

.tl-item small {
  display: block;
  color: rgba(247, 243, 233, 0.66);
  font-size: 0.78rem;
  line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   10. Founding partners
   ------------------------------------------------------------------------ */

.founding-head {
  max-width: 62ch;
}

.founding-slots {
  display: grid;
  gap: 1rem;
  margin: 2rem 0 1.5rem;
}

/* Deliberately not logo placeholders. Each tile is an open founding role with
   a plain-language description of what the role contributes — an invitation,
   not an implication that anyone has signed. */
.founding-slot {
  position: relative;
  padding: 1.5rem 1.35rem 1.35rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  transition: border-color 0.3s ease, transform 0.3s var(--home-ease), box-shadow 0.3s ease;
}

.founding-slot:hover {
  border-color: var(--cg-sage);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.founding-slot-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--cg-cream);
  color: var(--cg-wood-text);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.founding-slot h3 {
  margin-bottom: 0.4rem;
  font-size: 1.08rem;
  font-weight: 600;
}

.founding-slot p {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.founding-open {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cg-wood-text);
}

.founding-open::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--cg-sage);
}

.founding-terms {
  display: grid;
  gap: 0.6rem;
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.35rem;
  border-radius: var(--radius-md);
  background: var(--color-bg-sand);
  list-style: none;
}

.founding-terms li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-main);
}

.founding-terms svg {
  width: 1rem;
  height: 1rem;
  margin-top: 0.28rem;
  color: var(--cg-sage);
}

/* ---------------------------------------------------------------------------
   11. Sponsor the vision
   ------------------------------------------------------------------------ */

.sponsor-grid {
  display: grid;
  gap: 0.85rem;
  margin: 2rem 0 1.5rem;
}

.sponsor-card {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: 1.15rem 1.2rem;
  border: 1px solid rgba(247, 243, 233, 0.18);
  border-radius: var(--radius-md);
  background: rgba(255, 253, 247, 0.05);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--home-ease);
}

.sponsor-card:hover {
  border-color: rgba(232, 210, 164, 0.5);
  background: rgba(255, 253, 247, 0.09);
  transform: translateY(-2px);
}

.sponsor-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(232, 210, 164, 0.4);
  border-radius: 50%;
  color: #e8d2a4;
}

.sponsor-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.sponsor-card h3 {
  margin: 0.15rem 0 0.3rem;
  font-size: 1.02rem;
  font-weight: 600;
}

.sponsor-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
}

.sponsor-count {
  display: block;
  margin-top: 0.45rem;
  color: #e8d2a4;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* The count is written only when the inventory endpoint answers. Until then
   the element must take up no room at all. */
.sponsor-count:empty { display: none; }

.sponsor-boundary {
  padding: 1.15rem 1.3rem;
  border-left: 3px solid var(--cg-stone);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(247, 243, 233, 0.8);
  font-size: 0.86rem;
  line-height: 1.65;
}

/* ---------------------------------------------------------------------------
   12. Participation pathways, survey call, updates, closing
   ------------------------------------------------------------------------ */

.path-grid {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.4rem 1.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
  transition: transform 0.3s var(--home-ease), box-shadow 0.3s ease, border-color 0.3s ease;
}

.path-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--cg-sage);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--home-ease);
}

.path-card:hover,
.path-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--cg-sage);
  box-shadow: var(--shadow-lg);
}

.path-card:hover::before,
.path-card:focus-within::before { transform: scaleX(1); }

.path-card-num {
  margin-bottom: 0.65rem;
  color: var(--color-accent-text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.path-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.path-card p {
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
  line-height: 1.6;
}

.path-card .button { margin-top: auto; align-self: flex-start; }

.home-cta-band {
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(100% 140% at 0% 0%, rgba(107, 124, 90, 0.4) 0%, rgba(31, 59, 46, 0) 55%),
    var(--color-primary);
  color: rgba(247, 243, 233, 0.88);
  box-shadow: var(--shadow-lg);
}

.home-cta-band h2 { color: #fffdf7; }
.home-cta-band p { color: rgba(247, 243, 233, 0.85); }

.home-closing {
  text-align: center;
}

.home-closing blockquote {
  max-width: 34ch;
  margin: 0 auto 2rem;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.28;
  text-wrap: balance;
}

.home-closing blockquote em { font-style: italic; }

.home-closing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   13. Breakpoints
   ------------------------------------------------------------------------ */

@media (min-width: 640px) {
  .cine-rail-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }

  .cine-rail-item {
    padding: 1.1rem 0;
    border-bottom: 0;
  }

  .impact-grid { grid-template-columns: repeat(2, 1fr); }
  .founding-slots { grid-template-columns: repeat(2, 1fr); }
  .sponsor-grid { grid-template-columns: repeat(2, 1fr); }
  .path-grid { grid-template-columns: repeat(2, 1fr); }
  .food-mechanisms { grid-template-columns: repeat(2, 1fr); }
  .ledger-list { grid-template-columns: repeat(2, 1fr) ; column-gap: 2.5rem; }
}

@media (min-width: 900px) {
  .cine-hero-inner { padding-bottom: 3rem; }

  .why-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    align-items: start;
  }

  .why-figure { position: sticky; top: calc(var(--cg-header-h) + 2rem); }

  .season-panel-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.25rem; }
  .season-tab { padding-inline: 1.15rem; }

  .food-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }

  .validation-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .validation-media { aspect-ratio: auto; height: 100%; min-height: 30rem; }
  .validation-media::after {
    background: linear-gradient(to right, rgba(17, 39, 32, 0.25) 0%, rgba(17, 39, 32, 0.85) 92%);
  }

  .tl-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.25rem;
    padding-left: 0;
    padding-top: 3.1rem;
  }

  .tl-track::before {
    top: 0.42rem;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 2px;
  }

  .tl-fill {
    top: 0.42rem;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 2px;
    background: linear-gradient(to right, var(--cg-sage), var(--cg-stone));
    transform: scaleX(0);
    transform-origin: left center;
  }

  .tl.is-drawn .tl-fill { transform: scaleX(1); }

  .tl-group::before { top: -3.1rem; left: 0; }

  .impact-grid { grid-template-columns: repeat(4, 1fr); }
  .founding-slots { grid-template-columns: repeat(3, 1fr); }
  .sponsor-grid { grid-template-columns: repeat(3, 1fr); }
  .path-grid { grid-template-columns: repeat(4, 1fr); }
  .food-mechanisms { grid-template-columns: 1fr; }
}

@media (min-width: 1200px) {
  .why-grid { gap: 4.5rem; }
  .cine-hero h1 { max-width: 22ch; }
  .why-item { grid-template-columns: 3rem 1fr; }
}

/* ---------------------------------------------------------------------------
   14. Reduced motion and print
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .js-enh [data-reveal],
  .js-enh [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js-enh .cine-hero-media img,
  .js-enh .cine-hero-inner > *,
  .js-enh .season-panel:not([hidden]) .season-figure img,
  .js-enh .cine-scroll-cue::after {
    animation: none !important;
  }

  .js-enh .tl-fill,
  .tl-fill {
    transform: none;
    transition: none;
  }

  .path-card,
  .path-card::before,
  .founding-slot,
  .sponsor-card,
  .season-tab::after {
    transition: none;
  }

  .path-card:hover,
  .founding-slot:hover,
  .sponsor-card:hover { transform: none; }

  .path-card::before,
  .season-tab[aria-selected="true"]::after { transform: scaleX(1); }
}

@media print {
  .home-page::before,
  .cine-scroll-cue { display: none; }

  .cine-hero { min-height: 0; }
  .season-panel[hidden] { display: block; }
}

/* Arrival and stewardship — the emotional and operational heart of the story. */
.home-arrival {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 4%, rgba(173, 145, 89, 0.16), transparent 30rem),
    linear-gradient(180deg, #f7f1e5 0%, #fffdf8 100%);
}

.home-arrival::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0 48%, rgba(31, 59, 46, 0.045) 48% 48.2%, transparent 48.2%);
}

.arrival-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  column-gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
}

.arrival-heading .home-chapter { grid-column: 1 / -1; }
.arrival-heading h2 { max-width: 17ch; margin-bottom: 0; }
.arrival-heading .home-kicker { margin: 0 0 0.35rem; }

.arrival-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: clamp(3rem, 7vw, 6rem) 0 1.5rem;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.arrival-path li {
  position: relative;
  min-height: 15rem;
  padding: 2rem clamp(1rem, 2.5vw, 2rem);
  border-top: 1px solid rgba(31, 59, 46, 0.24);
  border-right: 1px solid rgba(31, 59, 46, 0.13);
}

.arrival-path li:last-child { border-right: 0; }
.arrival-path li::before {
  content: "";
  position: absolute;
  top: -0.38rem;
  left: clamp(1rem, 2.5vw, 2rem);
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: var(--cg-forest);
  box-shadow: 0 0 0 0.35rem #f7f1e5;
}

.arrival-path span {
  display: block;
  margin-bottom: 2.5rem;
  color: #937848;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.arrival-path strong {
  display: block;
  margin-bottom: 0.65rem;
  color: var(--cg-forest);
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.arrival-path p { margin: 0; font-size: 0.95rem; line-height: 1.7; }
.arrival-disclosure { max-width: 62rem; margin: 0; color: var(--color-text-muted); font-size: 0.82rem; }

.home-stewardship {
  background:
    linear-gradient(rgba(255, 253, 248, 0.92), rgba(255, 253, 248, 0.92)),
    url('/assets/illustrations/agriculture-orchard-scene.svg') center / cover;
}

.stewardship-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}

.stewardship-intro { position: sticky; top: 7rem; }
.stewardship-intro h2 { max-width: 15ch; }
.stewardship-intro blockquote {
  margin: 2rem 0;
  padding: 1.25rem 0 1.25rem 1.5rem;
  border-left: 3px solid #ad9159;
  color: var(--cg-forest);
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
  line-height: 1.35;
}

.stewardship-principles { margin: 0; padding: 0; list-style: none; }
.stewardship-principles li {
  display: grid;
  grid-template-columns: minmax(10rem, 0.72fr) minmax(0, 1.28fr);
  gap: 1.5rem;
  padding: 1.55rem 0;
  border-top: 1px solid rgba(31, 59, 46, 0.18);
}
.stewardship-principles li:last-child { border-bottom: 1px solid rgba(31, 59, 46, 0.18); }
.stewardship-principles strong { color: var(--cg-forest); font-family: var(--font-heading); font-size: 1.1rem; }
.stewardship-principles span { color: var(--color-text-muted); line-height: 1.65; }

@media (max-width: 850px) {
  .arrival-heading, .stewardship-layout { grid-template-columns: 1fr; }
  .arrival-heading .home-kicker { margin-top: 1.25rem; }
  .arrival-path { grid-template-columns: 1fr 1fr; }
  .arrival-path li:nth-child(2) { border-right: 0; }
  .stewardship-intro { position: static; }
}

@media (max-width: 560px) {
  .arrival-path { grid-template-columns: 1fr; }
  .arrival-path li { min-height: 0; padding-block: 1.6rem; border-right: 0; }
  .arrival-path span { margin-bottom: 1.25rem; }
  .stewardship-principles li { grid-template-columns: 1fr; gap: 0.45rem; }
}