/*
  The foundations we cook with — homepage section.

  Built from the site's own tokens in prototype.css: cream and paper grounds,
  forest green bands, burnt orange on light surfaces and citrus only on dark
  ones, where the rest of the site already uses it. Buttons, kicker, reveal
  transitions and shell are the site's existing classes, not new ones.

  Scoped to .sf-foundations / .sf-fd-*. Nothing is added to site.css or
  prototype.css, so this file can be reverted on its own.
*/

.sf-foundations {
  --fd-ink: var(--sf-ink);
  --fd-body: var(--sf-ink-soft);
  --fd-accent: var(--sf-orange);
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.75rem, 6vw, 5.75rem) 0;
  background: var(--sf-paper);
}

/* --- the opening, on the paper ground the section above ends on ------------ */

.sf-fd-intro {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(1.75rem, 6vw, 6rem);
  align-items: end;
}
.sf-site .sf-foundations h2 { margin: 0; }
.sf-site .sf-foundations h2 em { color: var(--sf-orange); }
.sf-fd-lede { max-width: 40rem; margin: 0; color: var(--sf-ink-soft); font-size: var(--sf-text-lede); }

/* --- a frame -------------------------------------------------------------- */

.sf-fd-frame { position: relative; margin: 0; }
.sf-fd-plate { position: relative; overflow: hidden; background: var(--sf-green-deep); }
.sf-fd-plate img { display: block; width: 100%; height: 100%; object-fit: cover; }

.sf-fd-place {
  margin: 0 0 .6rem;
  color: var(--fd-accent);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* A real heading, sized for this section on purpose. The homepage type scale
   is asserted by tests/site.test.mjs; that assertion now scopes this section
   out and bounds it separately rather than being quietly dodged. */
.sf-site .sf-foundations .sf-fd-name {
  margin: 0;
  color: var(--fd-ink);
  font-family: var(--sf-display);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.02em;
}
.sf-fd-line {
  max-width: 34ch;
  margin: .9rem 0 0;
  color: var(--fd-body);
  font-size: var(--sf-text-lede);
  line-height: 1.5;
}

/* --- full-bleed frames ---------------------------------------------------- */
/* The photograph runs edge to edge and carries the words. The scrim is the one
   place an overlay is used, and only as far across as the longest line runs. */

.sf-fd-bleed { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); }
/* The plate fills the frame and the words sit on top of it. The plate is the
   positioned layer, not the image, so the caption block can set the height. */
.sf-fd-bleed .sf-fd-plate { position: absolute; inset: 0; }
.sf-fd-bleed .sf-fd-over {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(20rem, 44vw, 32rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  /* Held at .72 across the caption and cleared by 84%. Measured against the
     brightest pixel behind the words in all three photographs: .66 is the
     floor for 4.5:1 on cream, so this is the lightest scrim that stays
     readable and leaves the rest of the picture alone. */
  background: linear-gradient(90deg, rgba(20, 40, 26, .74) 0%, rgba(20, 40, 26, .72) 40%, rgba(20, 40, 26, .28) 66%, rgba(20, 40, 26, 0) 84%);
}
.sf-fd-bleed .sf-fd-place { color: var(--sf-citrus); }
.sf-site .sf-foundations .sf-fd-bleed .sf-fd-name { color: var(--sf-paper); }
.sf-fd-bleed .sf-fd-line { color: #eff6eb; }

/* --- paired frames on a band ---------------------------------------------- */

.sf-fd-band { margin-top: clamp(2.5rem, 5vw, 4rem); padding-block: clamp(2.75rem, 5vw, 4.25rem); }
.sf-fd-band-light { background: var(--sf-paper); }
.sf-fd-band-cream { background: var(--sf-cream); }
.sf-fd-band-green {
  color: var(--sf-paper);
  background: var(--sf-green-deep);
  --fd-ink: var(--sf-paper);
  --fd-body: #eff6eb;
  --fd-accent: var(--sf-citrus);
}

.sf-fd-pair { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); }

.sf-fd-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.sf-fd-split .sf-fd-plate { aspect-ratio: 3 / 2; border-radius: var(--sf-radius-sm); }
.sf-fd-split .sf-fd-plate img { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.sf-fd-split:hover .sf-fd-plate img { transform: scale(1.025); }
.sf-fd-flip .sf-fd-plate { order: 2; }

/* --- the closing ---------------------------------------------------------- */

.sf-fd-closing {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(3.25rem, 6vw, 5rem);
  color: var(--sf-paper);
  background: var(--sf-green-deep);
}
.sf-fd-closing-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.75rem, 5vw, 5rem);
  align-items: start;
}
.sf-fd-count {
  max-width: 26ch;
  margin: 0;
  color: rgba(255, 253, 249, .82);
  font-family: var(--sf-display);
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-style: italic;
  line-height: 1.25;
}
.sf-fd-bridge {
  margin: 0;
  color: var(--sf-paper);
  font-family: var(--sf-display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 600;
  line-height: 1.1;
}
.sf-fd-bridge em { color: var(--sf-citrus); }
.sf-fd-handoff { max-width: 46ch; margin: 1rem 0 0; color: #eff6eb; font-size: var(--sf-text-lede); }
.sf-fd-closing .sf-action-row { margin-top: clamp(1.5rem, 3vw, 2rem); }
.sf-fd-closing .sf-text-link { color: var(--sf-citrus); }
.sf-fd-closing .sf-text-link span { color: var(--sf-citrus); }

/* --- sources -------------------------------------------------------------- */

.sf-fd-sources { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(255, 253, 249, .22); }
.sf-fd-sources > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  color: rgba(255, 253, 249, .82);
  font-size: .84rem;
  cursor: pointer;
  list-style: none;
}
.sf-fd-sources > summary::-webkit-details-marker { display: none; }
.sf-fd-sources > summary::after { content: "+"; font-size: 1.05rem; line-height: 1; }
.sf-fd-sources[open] > summary::after { content: "–"; }
.sf-fd-sources ul { display: grid; gap: .5rem; margin: .25rem 0 0; padding: 0 0 .5rem; list-style: none; }
.sf-fd-sources li { display: flex; flex-wrap: wrap; gap: .25rem .6rem; color: rgba(255, 253, 249, .68); font-size: .82rem; }
.sf-fd-sources li span { min-width: 11rem; color: var(--sf-citrus); }
.sf-fd-sources a { color: var(--sf-paper); text-decoration: underline; text-underline-offset: .18em; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 58rem) {
  .sf-fd-intro { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
  .sf-fd-closing-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 40rem) {
  .sf-foundations { padding-block: 3.25rem 0; }
  .sf-fd-bleed { margin-top: 2rem; }
  /* No overlay on a phone: the photograph is shown whole and the words sit
     under it, which is both legible and closer to how the rest of the site
     stacks on mobile. */
  .sf-fd-bleed .sf-fd-plate { position: static; }
  .sf-fd-bleed .sf-fd-over { min-height: 0; }
  .sf-fd-bleed .sf-fd-plate img { aspect-ratio: 3 / 2; height: auto; }
  .sf-fd-bleed .sf-fd-over {
    padding: 1.5rem 0 0;
    background: none;
  }
  .sf-fd-bleed .sf-fd-place { color: var(--sf-orange); }
  .sf-site .sf-foundations .sf-fd-bleed .sf-fd-name { color: var(--sf-ink); }
  .sf-fd-bleed .sf-fd-line { color: var(--sf-ink-soft); }
  .sf-fd-band, .sf-fd-closing { margin-top: 2rem; padding-block: 2.25rem; }
  .sf-fd-split { grid-template-columns: 1fr; gap: 1.1rem; }
  .sf-fd-flip .sf-fd-plate { order: 0; }
  .sf-fd-sources li span { min-width: 0; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-fd-split .sf-fd-plate img,
  .sf-fd-split:hover .sf-fd-plate img { transition: none; transform: none; }
}