/* Southern Cross Fertilisers — homepage, Option D ("wide open")
   Depends on assets/site.css for the palette tokens, base type and focus styles.

   Structure follows the PLS homepage anatomy: floating masthead over a
   full-bleed hero, then alternating solid bands — statement, assets with role
   labels, narrative, careers, announcements, contact. Their investor centre,
   language switcher and community sections are deliberately absent; see the
   notes in demo/hero-d.html and CLAUDE.md.

   In the hero, and only there, type sits on the photograph, so those scrims
   are load-bearing for WCAG 2.1 AA. Ratios were measured by compositing the
   real image against the gradients at 1440, 768 and 390. Every band below the
   hero is a solid ground with fixed, known ratios from site.css. */

:root {
  --bone-soft: #DDD8CA;
  --tint-a:    #C2D8C2;   /* 11.3 on #082108 */
  --tint-b:    #7FBF7F;   /* 7.9 on #082108 */
  --tint-flat: #A9CDA9;   /* fallback where background-clip:text is unsupported */
  --rust-light: #E39B76;  /* iron-oxide lightened for dark grounds: 6.3 on #0C310C */
  /* And darkened for the badge, whose own 12% rust wash lifts the bone ground
     enough that plain --rust lands at 4.19:1. This measures 5.8:1 on it. */
  --rust-deep:  #8F3722;
  /* Sampled from the supplied map artwork so the band it sits in is the
     same ground and the image has no visible edge. */
  --map-ground: #102810;

  --d-pad-x: clamp(22px, 4.4vw, 64px);
  --shell: 1280px;
  --band-y: clamp(64px, 8.5vw, 124px);
}

.home { background: var(--green-deep); color: var(--bone); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--d-pad-x);
}
.shell--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

/* --------------------------------------------------------------- masthead */

/* Floats over the hero photograph, then takes its own ground once the page
   scrolls onto the solid bands (see the IntersectionObserver in the markup). */
.masthead-d {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 2.4vw, 40px);
  padding: clamp(12px, 1.6vw, 22px) var(--d-pad-x);
  border-bottom: 1px solid transparent;
  transition: background-color 260ms ease, border-color 260ms ease;
}
.is-scrolled .masthead-d {
  background: rgba(8, 33, 8, 0.96);
  border-bottom-color: var(--rule-green);
}
@media (prefers-reduced-motion: reduce) {
  .masthead-d { transition: none; }
}

.masthead-d__logo { display: inline-flex; align-items: center; min-height: 44px; line-height: 0; }
.masthead-d__logo img { width: clamp(150px, 13vw, 196px); height: auto; display: block; }

/* A flex row rather than display:contents — that would drop the <nav>
   landmark from the accessibility tree in older engines. */
.primary-nav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 40px);
  margin-left: clamp(24px, 3vw, 56px);
  min-width: 0;
}

.primary-nav__main,
.primary-nav__aside {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.primary-nav__main { gap: clamp(16px, 2.1vw, 30px); }
.primary-nav__aside { gap: clamp(14px, 1.8vw, 26px); }

.primary-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--bone);
  text-decoration: none;
  white-space: nowrap;
}
.primary-nav a:hover { color: var(--tint-a); }

.search-pill {
  gap: 10px;
  padding: 0 22px;
  border: 2px solid rgba(245, 241, 232, 0.56);
  border-radius: 999px;
  /* Full bone, not --bone-soft: the pill sits at the far right where the top
     scrim is thinnest over bright sky, and the dimmer tone measured 4.45:1. */
  color: var(--bone);
  font-size: 14.5px;
}
.search-pill:hover { border-color: rgba(245, 241, 232, 0.75); color: var(--bone); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px;
  background: none;
  border: 0;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------------------------------------------------------------- buttons */

/* Pills throughout, matching the search control in the masthead. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.2vw, 16px);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

.btn--ghost { color: var(--bone); border-color: rgba(245, 241, 232, 0.5); }
.btn--ghost:hover { border-color: var(--bone); background: rgba(245, 241, 232, 0.1); color: var(--bone); }

.btn--solid { color: var(--bone); background: var(--green); }
.btn--solid:hover { background: var(--green-deep); color: var(--bone); }

/* ------------------------------------------------------------------- hero */

.hero-d {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 640px;
  height: 100svh;
  max-height: 1000px;
  overflow: hidden;
}

.hero-d__media { position: absolute; inset: 0; z-index: 0; display: block; }
.hero-d__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }

/* A compositor-friendly time-of-day loop. The sunrise remains the LCP
   image; three long crossfades make the cycle seamless at its boundary. */
.hero-timecycle__frame { will-change: opacity; }
.hero-timecycle__frame--morning { opacity: 1; animation: hero-time-morning 30s linear infinite both; }
.hero-timecycle__frame--day { opacity: 0; animation: hero-time-day 30s linear infinite both; }
.hero-timecycle__frame--night { opacity: 0; animation: hero-time-night 30s linear infinite both; }

/* Photo studies are selected with the hero query string. Keeping the sets in
   the homepage lets each comparison use the exact same layout, scrims and
   30-second timing without replacing the selected imagery. */
.hero-timecycle__frame--plant2,
.hero-timecycle__frame--plant3,
.hero-timecycle__frame--plant4,
.hero-timecycle__frame--plant5 { display: none; }
html.hero-plant2 .hero-timecycle__frame--current { display: none; }
html.hero-plant2 .hero-timecycle__frame--plant2 { display: block; }
html.hero-plant3 .hero-timecycle__frame--current { display: none; }
html.hero-plant3 .hero-timecycle__frame--plant3 { display: block; }
html.hero-plant4 .hero-timecycle__frame--current { display: none; }
html.hero-plant4 .hero-timecycle__frame--plant4 { display: block; }
html.hero-plant5 .hero-timecycle__frame--current { display: none; }
html.hero-plant5 .hero-timecycle__frame--plant5 { display: block; }

@keyframes hero-time-morning {
  0%, 23% { opacity: 1; }
  33%, 83% { opacity: 0; }
  93%, 100% { opacity: 1; }
}

@keyframes hero-time-day {
  0%, 23% { opacity: 0; }
  33%, 50% { opacity: 1; }
  60%, 100% { opacity: 0; }
}

@keyframes hero-time-night {
  0%, 50% { opacity: 0; }
  60%, 83% { opacity: 1; }
  93%, 100% { opacity: 0; }
}

@media (max-width: 640px), (prefers-reduced-motion: reduce) {
  .hero-timecycle__frame { animation: none; will-change: auto; }
  .hero-timecycle__frame--morning { opacity: 1; }
  .hero-timecycle__frame--day,
  .hero-timecycle__frame--night { display: none; }
}

.hero-d__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* Carries the masthead, which otherwise sits on open sunset sky. */
.hero-d__scrim--top {
  background: linear-gradient(180deg,
    rgba(8, 33, 8, 0.72) 0%,
    rgba(8, 33, 8, 0.34) 15%,
    rgba(8, 33, 8, 0) 32%);
}
/* Carries the headline. The pill button is taller than the text link it
   replaced, which lifts the headline into a brighter band — it measured
   3.23:1 against a 3:1 floor before these stops were deepened. */
.hero-d__scrim--base {
  background: linear-gradient(0deg,
    rgba(8, 33, 8, 0.94) 0%,
    rgba(8, 33, 8, 0.80) 24%,
    rgba(8, 33, 8, 0.30) 48%,
    rgba(8, 33, 8, 0) 64%);
}
/* Deepens the left column without flattening the plant on the right. The
   sunrise hero puts the sun low on the LEFT, directly behind the headline —
   the previous stops measured 3.27:1 against a 3:1 floor. Strengthening this
   layer rather than the base keeps the plant and the sky on the right intact:
   measured 3.99:1. */
.hero-d__scrim--left {
  background: linear-gradient(90deg,
    rgba(8, 33, 8, 0.84) 0%,
    rgba(8, 33, 8, 0.42) 40%,
    rgba(8, 33, 8, 0) 62%);
}

.hero-d__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding: 0 var(--d-pad-x);
}

.hero-d__copy { display: flex; align-items: flex-end; padding-bottom: clamp(64px, 8vh, 96px); }
.hero-d__claim { max-width: 900px; min-width: 0; }

.hero-d h1 {
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 5.1vw, 4.625rem);
  font-weight: 400;          /* lighter than Option A — the type gets out of the way */
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--bone);
  margin: 0 0 clamp(20px, 2.6vw, 34px);
  text-wrap: balance;
}

/* Fallback first: without background-clip support, transparent text would
   render the tinted phrases invisible. */
.tint { color: var(--tint-flat); }
.tint-ink { color: var(--green-light); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .tint, .tint-ink {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .tint { background-image: linear-gradient(96deg, var(--tint-a) 0%, var(--tint-b) 62%); }
  /* Both stops stay inside the accent range: starting at --green (#0C310C)
     made the first half of the phrase read as plain black rather than as a
     coloured run. The run now lands on the logo green itself: #165A16 is
     7.4:1 on bone and --brand #228C22 is 3.85:1 — both clear the 3:1
     large-text floor these phrases are always set at. */
  .tint-ink { background-image: linear-gradient(96deg, var(--green-light) 0%, var(--brand) 100%); }
}

.scroll-cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-muted);
}
.scroll-cue__bar {
  display: block;
  width: 42px;
  height: 3px;
  border-radius: 999px;
  background: rgba(245, 241, 232, 0.55);
}

/* ------------------------------------------------------------------ bands */

.band { padding: var(--band-y) 0; scroll-margin-top: 84px; }
.band--bone { background: var(--bone); color: var(--green); }
.band--green { background: var(--green); color: var(--bone); }
.band--deep  { background: var(--green-deep); color: var(--bone); }

.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(10.5px, 0.9vw, 11.5px);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 clamp(16px, 1.8vw, 24px);
}
.band--bone .eyebrow { color: var(--rust); }        /* 5.28 on bone */
.band--green .eyebrow,
.band--deep .eyebrow { color: var(--rust-light); }  /* 5.9 on green */

.band h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.875rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.024em;
  margin: 0;
  text-wrap: balance;
}
.band__claim {
  max-width: 20ch;
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  margin-bottom: clamp(28px, 3.4vw, 44px);
}

.band__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
  margin-bottom: clamp(36px, 4.4vw, 64px);
}
.band__head h2 { max-width: 22ch; }

.prose p {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.65;
  margin: 0 0 20px;
  max-width: 62ch;
}
.band--bone .prose p { color: var(--ink-muted); }    /* 6.27 on bone */
.band--green .prose p,
.band--deep .prose p { color: var(--bone-muted); }   /* 7.66 on green */
.prose .btn { margin-top: 12px; }

/* ------------------------------------------------------------------ sites */

/* Even columns: the previous rule dropped the outer padding on the first and
   last cards, which made the middle card 35px narrower than its neighbours
   and the three images visibly different sizes. Spacing lives in the grid gap
   now, and the card images carry the separation the dividers used to. */
.sites {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 2.6vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-green);
}
.site { padding: clamp(24px, 2.6vw, 34px) 0 0; }

.site__role {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);        /* 5.03 on green — smallest safe label colour */
  margin: 0 0 14px;
}
.site h3 {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin: 0 0 12px;
}
.site p {
  font-size: clamp(14.5px, 1.1vw, 15.5px);
  line-height: 1.6;
  color: var(--bone-muted);
  margin: 0;
}

/* ------------------------------------------------------------------- pair */

.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 88px);
}
.pair__item h2 { margin-bottom: 18px; }
.pair__item p {
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--bone-muted);
  margin: 0 0 26px;
  max-width: 46ch;
}

/* ------------------------------------------------------------------- slot */

/* A reserved, visibly empty band. Deliberately looks unfinished — it is. */
.slot {
  border: 1px solid rgba(168, 68, 42, 0.35);
  background: rgba(168, 68, 42, 0.05);
  border-radius: 4px;
  padding: clamp(24px, 3vw, 40px);
  max-width: 68ch;
}
.slot p { font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.65; color: var(--ink-muted); margin: 0 0 16px; }
.slot p:last-child { margin-bottom: 0; }
.slot__note { font-size: 14.5px; }

/* .pending is scoped per body class in site.css; this page needs its own. */
.home .pending {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  vertical-align: middle;
}
.band--bone .pending { background: rgba(168, 68, 42, 0.12); color: var(--rust-deep); }
.band--green .pending,
.band--deep .pending { background: rgba(245, 241, 232, 0.14); color: var(--bone); }

/* ------------------------------------------------------------------- news */

.news {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-green);
}
.news__item {
  padding: clamp(24px, 2.6vw, 32px) clamp(24px, 2.6vw, 34px) 0;
  border-left: 1px solid var(--rule-green);
}
.news__item:first-child { padding-left: 0; border-left: 0; }
.news__item:last-child { padding-right: 0; }

.news__meta {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 14px;
}
.news h3 {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin: 0;
}
.news h3 a { color: var(--bone); text-decoration: none; }
.news h3 a:hover { color: var(--tint-a); text-decoration: underline; text-underline-offset: 4px; }

.news__item--empty h3 {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--bone-muted);
}

/* ---------------------------------------------------------------- contact */

.contact-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 38px);
}
.label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 10px;
}
.contact-cols p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--bone); }
.contact-cols a { color: var(--bone); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.contact-cols a:hover { color: var(--tint-a); }
.contact-cols address { font-style: normal; color: var(--bone-muted); font-size: 15.5px; line-height: 1.6; }

/* ----------------------------------------------------------------- footer */

.site-footer {
  background: var(--green-deep);
  color: var(--bone-muted);
  padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--rule-green);
}
.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 40px;
  padding-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--rule-green);
}
.site-footer__logo { width: 180px; height: auto; display: block; }
.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 2.2vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--bone);
  text-decoration: none;
}
.site-footer__nav a:hover { color: var(--tint-a); }
.site-footer__legal { padding-top: clamp(20px, 2.4vw, 28px); font-size: 0.82rem; line-height: 1.7; }
.site-footer__legal p { margin: 0 0 4px; max-width: 70ch; }

/* ------------------------------------------------------------ breakpoints */

/* The centre nav plus the aside cluster needs about 1240px before the labels
   start colliding with the lockup. Below that the whole lot collapses. */
@media (max-width: 1239px) {
  .has-js .nav-toggle { display: inline-flex; }

  .has-js .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0;
    padding: 4px var(--d-pad-x) 10px;
    background: rgba(8, 33, 8, 0.97);
    border-top: 1px solid var(--rule-green);
    border-bottom: 1px solid var(--rule-green);
    z-index: 3;
  }
  .has-js.nav-open .primary-nav { display: block; }

  .primary-nav__main,
  .primary-nav__aside { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav li + li,
  .primary-nav__aside { border-top: 1px solid var(--rule-green); }
  .primary-nav a { min-height: 52px; padding: 0 4px; font-size: 16px; justify-content: space-between; }

  /* The pill outline reads as a stray box once the nav is a stacked list. */
  .search-pill { border: 0; padding: 0 4px; border-radius: 0; font-size: 16px; justify-content: flex-start; gap: 12px; }

  /* No-JS fallback: nothing to collapse into, so the nav wraps below. */
  .masthead-d { flex-wrap: wrap; }
  .primary-nav {
    display: flex;
    flex: 0 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
  }
}

@media (max-width: 900px) {
  .hero-d { height: auto; max-height: none; min-height: 100svh; }
  .hero-d__claim { max-width: none; }

  /* The headline wraps to more lines as the frame narrows and climbs into the
     bright band above the plant — the tinted line measured 2.0:1 against a
     3:1 floor. The scrim's knee moves up with it. */
  .hero-d__scrim--base {
    background: linear-gradient(0deg,
      rgba(8, 33, 8, 0.95) 0%,
      rgba(8, 33, 8, 0.92) 56%,
      rgba(8, 33, 8, 0.55) 74%,
      rgba(8, 33, 8, 0) 88%);
  }

  .shell--split { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 36px); }
  .band__head { flex-direction: column; align-items: flex-start; gap: 24px; }

  .sites, .news { grid-template-columns: minmax(0, 1fr); }
  .site, .news__item {
    padding: clamp(20px, 3vw, 26px) 0;
    border-left: 0;
    border-bottom: 1px solid var(--rule-green);
  }

  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair__item + .pair__item { padding-top: clamp(32px, 5vw, 44px); border-top: 1px solid var(--rule-green); }
}

@media (max-width: 640px) {
  .hero-d__media img { object-position: 55% 50%; }

  /* Paired with the portrait <source>: at phone aspect the landscape frame
     puts open sky behind the headline. Same fix as Option A. */
  .hero-d__scrim--base {
    background: linear-gradient(0deg,
      rgba(8, 33, 8, 0.96) 0%,
      rgba(8, 33, 8, 0.94) 74%,
      rgba(8, 33, 8, 0.55) 88%,
      rgba(8, 33, 8, 0.14) 100%);
  }
  .hero-d__scrim--left { background: none; }

  .hero-d__copy { padding-bottom: 40px; }
  .hero-d__claim .btn { width: 100%; min-height: 52px; }

  /* At phone height the cue crowds the call to action. */
  .scroll-cue { display: none; }

  .contact-cols { grid-template-columns: minmax(0, 1fr); }
  .band__claim { max-width: none; }
}

@media (max-height: 700px) {
  .scroll-cue { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-d__claim > * { animation: hero-d-rise 640ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .hero-d__claim .btn { animation-delay: 110ms; }
}

@keyframes hero-d-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ================================================================ patterns
   Section shapes taken from the PLS homepage anatomy, rendered in the SCF
   palette: a statement block beside a featured list, image cards for the
   sites, a full-bleed pull-quote, and image/text duos. Gradient phrases use
   .tint on dark grounds and .tint-ink on bone — both are measured below. */

/* Larger display setting for the statement band's three-line claim. */
.display {
  font-size: clamp(2.25rem, 5vw, 4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
}

.statement {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.statement__claim p {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.65;
  color: var(--ink-muted);
  margin: clamp(24px, 3vw, 36px) 0 0;
  max-width: 42ch;
}

/* ---------------------------------------------------------------- featured */

/* The hairline above the label is the one place the accent gradient appears
   as a rule rather than as type. */
.featured__label {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 500;
  color: var(--green);
  margin: 0 0 clamp(22px, 2.6vw, 32px);
  padding-top: 18px;
  border-top: 2px solid transparent;
  background-image: linear-gradient(96deg, var(--green-light) 0%, var(--brand) 100%);
  background-size: 100% 2px;
  background-position: 0 0;
  background-repeat: no-repeat;
}

.featured__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.featured__list a { display: block; text-decoration: none; color: inherit; }
.featured__list picture { display: block; overflow: hidden; border-radius: 3px; }
.featured__list img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.featured__list a:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .featured__list img { transition: none; }
  .featured__list a:hover img { transform: none; }
}

.featured__meta {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 18px 0 8px;
}
.featured__list h3 {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.35vw, 18.5px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--green);
  margin: 0;
}
.featured__list a:hover h3 { color: var(--green-light); text-decoration: underline; text-underline-offset: 4px; }

.featured__note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: clamp(20px, 2.4vw, 28px) 0 0;
}
.featured__note .pending { margin-right: 8px; }

/* ------------------------------------------------------------ site cards */

.site picture { display: block; overflow: hidden; border-radius: 3px; margin-bottom: 22px; }
.site img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------------------- pull-quote */

.quote {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 62svh, 640px);
  overflow: hidden;
  background: var(--green-deep);
}
.quote__media { position: absolute; inset: 0; z-index: 0; display: block; }
/* Favours the lower frame: the water and the vessel are far darker than the
   sun, so the copy sits on them and the sunrise stays in shot above. */
.quote__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 86%; }
.quote__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Tuned by measurement against this photograph, not by eye. The sunrise is
     far brighter than the dusk image this band used to carry, and the first
     pass flooded it: the quote measured 9.8:1 against a 3:1 floor with a mean
     scrim alpha of 0.80. These stops hold 5.1:1 on the quote and 5.0:1 on the
     small attribution line at a mean alpha of 0.55, so the sun and the water
     still read. Do not lighten further — 0.74 at the left edge measured 4.1:1
     on the attribution and fails. */
  background:
    linear-gradient(90deg, rgba(8, 33, 8, 0.80) 0%, rgba(8, 33, 8, 0.66) 40%, rgba(8, 33, 8, 0.22) 66%, rgba(8, 33, 8, 0) 100%),
    linear-gradient(0deg, rgba(8, 33, 8, 0.35) 0%, rgba(8, 33, 8, 0.1) 60%, rgba(8, 33, 8, 0.15) 100%);
}
.quote__inner { position: relative; z-index: 2; }
.quote__mark { color: var(--tint-b); display: block; margin-bottom: clamp(20px, 2.6vw, 32px); }
.quote__text {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.1vw, 2.75rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--bone);
  margin: 0;
  max-width: 30ch;
  text-wrap: balance;
}
.quote__attrib {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bone-muted);
  margin: clamp(24px, 3vw, 36px) 0 0;
}
.quote__attrib .pending { margin-right: 8px; }

/* -------------------------------------------------------------------- duo */

.duo {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.duo--reverse .duo__body { order: 1; }
.duo--reverse .duo__media { order: 2; }

.duo__media { display: block; overflow: hidden; border-radius: 3px; }
.duo__media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

.duo__body h2 { margin-bottom: clamp(20px, 2.4vw, 30px); }
.duo__body p {
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0 0 18px;
  max-width: 52ch;
}
/* The bold lead paragraph before the lighter body copy. */
.prose__lead {
  font-family: var(--font-display) !important;
  font-size: clamp(18px, 1.6vw, 22px) !important;
  font-weight: 500 !important;
  line-height: 1.42 !important;
  color: var(--green) !important;
  margin-bottom: 22px !important;
}
.duo__body .btn { margin-top: 14px; }

/* The reserved image slot in the sustainability band. */
.slot__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  border: 1px dashed rgba(168, 68, 42, 0.4);
  background: rgba(168, 68, 42, 0.04);
}
.slot__media span {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust-deep);
}

/* ---------------------------------------------------- pattern breakpoints */

@media (max-width: 1079px) {
  .statement { grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 56px); }
}

@media (max-width: 900px) {
  /* The horizontal scrim spans a much shorter box once the copy goes
     full-width, so it thins out under the attribution line. Near-uniform
     below this breakpoint — but only as heavy as it needs to be: measured at
     5.6:1 on the attribution, where the near-opaque first pass hit 8.1:1 and
     flattened the sunrise entirely. */
  .quote__scrim {
    background:
      linear-gradient(90deg, rgba(8, 33, 8, 0.82) 0%, rgba(8, 33, 8, 0.74) 55%, rgba(8, 33, 8, 0.62) 100%),
      linear-gradient(0deg, rgba(8, 33, 8, 0.30) 0%, rgba(8, 33, 8, 0.10) 60%, rgba(8, 33, 8, 0.16) 100%);
  }

  .duo, .duo--reverse { grid-template-columns: minmax(0, 1fr); }
  .duo--reverse .duo__body,
  .duo--reverse .duo__media { order: 0; }
  .duo__media img, .slot__media { aspect-ratio: 3 / 2; }
  .duo__body p { max-width: none; }
  .quote__text { max-width: none; }
  .site picture { margin-bottom: 18px; }
}

@media (max-width: 640px) {
  .featured__list { grid-template-columns: minmax(0, 1fr); }
  .statement__claim p { max-width: none; }
}

/* ------------------------------------------------------------- locations */

.band--map { background: var(--map-ground); color: var(--bone); }
.band--map .lead-dark,
.band--map h2 { color: var(--bone); }

.locations__head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.lead-dark {
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.5;
  color: var(--bone);
  margin: 0 0 22px;
  max-width: 46ch;
}
.locations__head p:not(.lead-dark) {
  font-size: clamp(14.5px, 1.1vw, 15.5px);
  line-height: 1.65;
  color: var(--bone-muted);
  margin: 0;
  max-width: 52ch;
}

/* Full-bleed: the artwork carries its own margins, so it wants the whole width. */
.locations__map { margin-top: clamp(36px, 5vw, 72px); }
.locations__map img { width: 100%; height: auto; display: block; }

.locations__legend {
  display: none;
  margin: 26px 0 0;
  padding: 0 var(--d-pad-x);
  list-style: none;
}
.locations__legend li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 11px 0;
  border-top: 1px solid var(--rule-green);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}
.locations__legend li:last-child { border-bottom: 1px solid var(--rule-green); }
.locations__legend span {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bone);
}

@media (max-width: 900px) {
  .locations__head { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 4vw, 32px); }
  .lead-dark, .locations__head p:not(.lead-dark) { max-width: none; }
}

@media (max-width: 640px) {
  .locations__legend { display: block; }
}