/* ==========================================================================
   OREGON — css/build.css  (Phase P4c, revised P8)
   Owns: #build (static "how we build" spec-sheet grid, no longer pinned),
   #proof (proof-wall ledger), #contact (close). Loaded after site.css —
   may override it. Transforms & opacity only on animated properties.
   ========================================================================== */

/* ==========================================================================
   SLIDE 10 — HOW WE BUILD (static spec-sheet grid)
   P8: Tan, verbatim, with a screenshot of the pinned card stack: "this
   section doesn't have to scroll any more. It's too much. Just have 1
   normal section. subtle animation." The old per-section GSAP pin/scrub
   script and its absolute stacking CSS are gone — this is one static 100svh slide,
   all four spec sheets visible at once, laid out as a plain row/grid. The
   "subtle animation" is the standard deck rise+fade stagger (data-animate
   ="item", handled by js/deck.js) plus the normal dim/scale deck feel —
   nothing else scrubs here.

   No factory photograph exists (HANDOVER.md) and no AI imagery ships on
   this site, so all four steps stay deliberately typographic spec
   sheets — none carry photography. That uniformity is the design.
   ========================================================================== */
.build { overflow: visible; padding-bottom: var(--space-4); }
.build .slide__inner { overflow: visible; }

/* Intro sits as a full-width strip above the card row (site.css's base
   two-column 0.9fr/1.1fr split at ≥900px was for the old stack layout,
   where the intro sat beside a single pinned card box — with all four
   cards visible now, the row needs the full slide width). */
.build__layout {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--space-2);
}
@media (min-width: 900px) {
  .build__layout { grid-template-columns: 1fr; }
}
.build__intro { max-width: 52em; }
.build__intro .eyebrow { margin-bottom: var(--space-2); }
.build__intro p.build__lede {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--steel);
  max-width: 40em;
}

/* Card row: single column on mobile, 2×2 at 900–1279px, 4-across at
   ≥1280px (GOAL P8 item 1). */
.build__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 900px) {
  .build__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  .build__cards { grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
}

.build-card {
  border: 1px solid var(--steel-20);
  background: var(--ink);
  padding: var(--space-4) var(--space-3) var(--space-3);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: start;
  width: 100%;
  position: relative;
}
@media (min-width: 1280px) {
  /* Four across reads better as one column (index over title) than the
     index-beside-copy layout used at narrower widths.
     P9: top padding trimmed space-3→space-2 to reclaim vertical room for
     the bigger three-tier type below — verified via headcheck.mjs that
     the last row still clears 1920×1080 and 1440×900. */
  .build-card {
    grid-template-columns: 1fr;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
  }
}

/* "Spec sheet" framing device — corner tick reinforces the spec-sheet
   metaphor without needing a photograph.
   P9: the "SHEET NN/04" label (former ::before, markup's data-sheet attr
   removed too) is gone — Tan, verbatim: "remove the sheet number like 01
   of 04 or 02 of 04. It doesn't make any sense because you already have
   the numbering 01234." The .build-card__index below is the only
   numbering now. */
.build-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, transparent 50%, var(--steel-20) 50%);
}

/* P9: with SHEET NN/04 gone, 01…04 is the card's only numbering device —
   grown and brightened (offwhite, was --accent) so it reads as an
   intentional index rather than a quiet footnote. */
.build-card__index {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2.5rem);
  color: var(--offwhite);
  line-height: 1;
}

/* ==========================================================================
   P9 item E: "each card's font hierarchy is not great. The title or
   heading has about the same font as the body and as the points below
   it. So we need more contrast and better visual distinction between
   them." Three deliberately distinct steps, size AND colour both:
     title  — display face, offwhite,     ~1.5× body, clearly the loudest
     body   — body face,    offwhite-60,  var(--fs-body) (unchanged)
     mono   — mono face,    steel,        var(--fs-mono) via .spec-line
              (already the quietest by both size and colour — the P8
              no-image "carries more weight" bump is removed below so it
              stays uniformly quiet on every card, per Tan's complaint).
   Custom title clamp resolves ~41px/1920, ~35px/1440, ≥20px floor down to
   mobile (token-floor-safe) while still fitting four-across at 1920×1080
   and 1440×900 — verified via node headcheck.mjs (last text bottom stays
   inside the viewport at both widths).
   ========================================================================== */
.build-card__title {
  padding-top: 0.1em;
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--wdth-label);
  text-transform: uppercase;
  color: var(--offwhite);
  font-size: clamp(1.3rem, 1.4vw + 0.9rem, 2.6rem);
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin-bottom: 0.3rem;
}
/* P8: card text ≥ 20px at 1920 — var(--fs-small) resolves to ~21px there.
   P9: bumped to var(--fs-body) (~27px/1920) so it sits clearly above the
   mono spec line and clearly below the (now bigger) title. Line-height
   tightened from the inherited body 1.5 to 1.3 — reclaims the vertical
   room the larger size costs so all four cards still fit the row inside
   1920×1080 and 1440×900 (verified via headcheck.mjs). */
.build-card__text {
  max-width: 34em;
  font-size: var(--fs-body);
  line-height: 1.3;
  color: var(--offwhite-60);
}
/* P9: .spec-line's sitewide line-height (1.6) is generous for a single
   short line elsewhere, but costly across the 2-3 lines these mono
   points wrap to inside a quarter-width card — tightened locally, and
   margin/padding trimmed space-2→space-1, to help the card fit its row
   at 1920×1080/1440×900 without touching the shared .spec-line class. */
.build-card__spec {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  line-height: 1.35;
  border-top: 1px solid var(--steel-20);
}

/* P9: short laptops (≤880px tall — see site.css's
   `@media (min-width: 900px) and (max-height: 880px)` block, which already
   steps `.build .display--h1` down to --fs-h2 there) still ran the card
   row past the viewport at 1366×768 with the bigger P9 type — trim the
   card row's own rhythm here too, same pattern the proof section below
   uses in its own short-laptop block. */
@media (min-width: 900px) and (max-height: 880px) {
  .build-card { padding-top: var(--space-1); }
  .build-card__title { font-size: clamp(1.15rem, 1vw + 0.8rem, 1.9rem); margin-bottom: 0.2rem; }
  .build-card__text { font-size: var(--fs-small); line-height: 1.25; }
  .build-card__spec { margin-top: 0.4rem; padding-top: 0.4rem; }
}

/* ==========================================================================
   SLIDE 11 — PROOF WALL (P8 rebuild)
   Tan, verbatim, with a screenshot: "improve this section. Not good
   enough. Doesn't mean anything here." It was a grey headline, a plain
   text list of six names and a tiny sectors line in the top-left of an
   empty canvas.

   Rebuilt as: a full-bleed real photograph backdrop (.proof__media, the
   same media/scrim technique the project slides use) under a heavy ink
   scrim (.proof__scrim, ~0.8 flat — overrides site.css's lighter
   gradient .scrim so type keeps ≥4.5:1 contrast over the photo); the six
   collaborators as a structured, full-width mono-indexed ledger with
   hairline rules between rows (.proof__ledger/.proof__row); and the
   sectors line given real display-type presence instead of a
   `.spec-line--lg` afterthought. Text-set only — no logos, no quotes, no
   counts, no names beyond the confirmed six.
   ========================================================================== */
/* P9 item F rebuild (Tan, verbatim: "I can't read anything on this one.
   The names of the people who check is weirdly placed. The numbering are
   all too small and the 'trusted by the people who check' heading is
   all… it's just too big. And the rest of the other things are not
   actually visible at all."). The ledger — numeral, name, role — is now
   the main event: names sit between --fs-h2 and --fs-h1, numerals scale
   with them (bright --steel, not a flat 18px), and the role sits inline
   immediately after the name on the same baseline instead of floated to
   the far right. Heading dropped from --fs-h1 to --fs-h2 (still 2 lines
   at 1920) so the ledger gets the room. Tighter than the standard
   --space-6 slide padding: with a full display headline *and* a six-row
   ledger *and* the sectors line all required to be visible in one 100svh
   view (GOAL P8/P9 item), the section needs every spare pixel it can
   get — tighten padding/rhythm, not type. */
.proof { text-align: left; padding-top: max(var(--space-3), var(--chrome-top)); padding-bottom: var(--space-2); }
/* Override site.css's shared 90rem .slide__inner cap for this section
   only: at the ledger's big name size, the longer names + inline role
   (e.g. "MEINHARDT (THAILAND) · Façade consultant") need close to the
   full padded viewport width to stay on one line — inside 90rem the
   role wrapped onto its own line, doubling that row's height and
   blowing the one-viewport budget. Same technique as .why__content. */
.proof .slide__inner { max-width: none; }
.proof__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* P9: was 0.8 — Tan couldn't read the ledger over the gridshell photo.
   0.92 keeps the photo only as a faint band while guaranteeing the
   ledger reads as unmistakably white-on-dark. */
.proof .scrim.proof__scrim {
  background: rgba(14, 15, 17, 0.92);
}
.proof__heading {
  margin-top: 0.2rem;
  max-width: 20em;
}
.proof__hr { margin-top: 0.5rem; }

.proof__ledger {
  margin-top: 0.4rem;
  width: 100%;
  border-top: 1px solid var(--steel-20);
}
/* Index + name(+role) on one flex row: role is nested text inside
   .proof__row-name so it always shares the name's own first line box —
   guaranteed same baseline, immediately after the name, wraps together
   on narrow screens — rather than a separate grid column floated right. */
.proof__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: clamp(0.15rem, 0.35vw, 0.45rem) 0;
  border-bottom: 1px solid var(--steel-20);
}
/* Bright steel, sized as ~0.6em of the name (not a flat 18-20px mono
   line) so the numbering reads as a ledger, not a footnote. */
.proof__row-index {
  flex: 0 0 auto;
  min-width: 1.6em;
  font-family: var(--font-mono);
  color: var(--steel);
  font-size: clamp(1.4rem, 1.9vw + 0.85rem, 3.1rem);
  line-height: 1;
}
/* The name is the main event: between --fs-h2 (~72px/1920) and --fs-h1
   (~122px/1920). */
.proof__row-name {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--wdth-display);
  text-transform: uppercase;
  color: var(--offwhite);
  font-size: clamp(2rem, 3.1vw + 1.3rem, 5.2rem);
  line-height: 1.05;
}
/* Nested inside .proof__row-name — resets weight/case/family back to a
   quiet mono voice. `·` separator only appears when a role is present,
   so unlabelled rows (Thai Takenaka, Christiani & Nielsen — no source
   for a role) show nothing, never a dash. */
.proof__row-role {
  display: inline-block;
  margin-left: 0.35em;
  font-family: var(--font-mono);
  font-variation-settings: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: var(--fs-mono);
  color: var(--offwhite-60);
  vertical-align: baseline;
}
.proof__row-role::before {
  content: "· ";
}

.proof__sectors {
  margin-top: 0.6rem;
}
/* P8/P9: sectors line ≥ 28px at 1920, clearly legible offwhite. */
.proof__sectors-line {
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 0.65vw + 1.05rem, 1.9rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--offwhite-60);
}

/* P9: short laptops (≤880px tall — see site.css's
   `@media (min-width: 900px) and (max-height: 880px)` block) can't fit
   the bigger ledger at its 1920-tuned scale; that block now also trims
   the row rhythm and the name/index sizes there instead of only
   stepping the (already --fs-h2) heading. */
@media (min-width: 900px) and (max-height: 880px) {
  .proof__ledger { margin-top: 0.2rem; }
  .proof__row { padding: 0.1rem 0; gap: var(--space-2); }
  .proof__row-name { font-size: clamp(1.8rem, 2.3vw + 1rem, 3.6rem); }
  .proof__row-index { font-size: clamp(1.2rem, 1.4vw + 0.6rem, 2.2rem); }
  .proof__sectors { margin-top: 0.35rem; }
}

@media (max-width: 640px) {
  .proof__row { flex-wrap: wrap; }
}

/* ==========================================================================
   SLIDE 12 — CLOSE / CONTACT
   P8: the OREGON knockout moved to its own slide (built by another agent);
   the close section's `.close__word--knockout` background-clip:text
   treatment and its drift keyframes are dead code and have been removed.
   Layout/type for the new composition (logo, company line, money lines,
   address, capability link) lives in css/site.css.
   ========================================================================== */
.close__cap-link {
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.close__cap-link:hover,
.close__cap-link:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}