/* ============================================================
   Blue Hybrid v4 layer: THE WORKING DRAWING.
   Rebuild of the v3 surface (founder gate, 2026-07-04 pm).
   Additive on top of styles.css (frozen system, DESIGN.md D1-D24).
   New decisions logged as DESIGN.md D29+.

   The narrative spine: the page enacts the tagline. It opens as a
   cyanotype blueprint (hero sheet + title block), works through
   paper working drawings, and ends built (solid ink plate).

   All GSAP-driven states are set by v3.js after load; nothing in
   this file hides content, so no-JS and no-GSAP render complete.
   ============================================================ */

:root {
  /* The blueprint field: brand-adjacent cyanotype, logged as D29 */
  --cyanotype: #04264f;
  /* Annotation face: the drafting utility layer. System mono, zero bytes */
  --font-ann: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Menlo, Consolas, 'Segoe UI Mono', monospace;
  /* Display register: Inter variable axis, used for H1/H2 only (D30) */
  --fw-display: 620;
  --tr-display: -0.032em;
}

/* ---------- Band registers ---------- */
.band-cyan { background: var(--cyanotype); }
/* Depth pages inherit the blueprint register on their dark bands */
.band-dark { background: var(--cyanotype); }
/* The built plate: Home final CTA and anywhere the build must read solid */
.band-ink { background: var(--bh-ink); }

/* ---------- Display register (D30) ---------- */
.v4-display {
  font-size: clamp(42px, 6vw, 82px);
  line-height: 1.03;
  letter-spacing: var(--tr-display);
  font-weight: var(--fw-display);
  text-wrap: balance;
}
.v4-display-2, .h2.v4-display-2, .h1.v4-display-2 {
  font-weight: var(--fw-display);
  letter-spacing: -0.028em;
}
/* Depth pages upgrade automatically (element-level, since page heroes
   style h1/h2 directly; footer h2 labels stay outside main) */
.display, .h1, .h2,
main h1, main h2 { font-weight: var(--fw-display); letter-spacing: -0.028em; }
h3 { font-weight: 460; }

/* ---------- The annotation layer (D31) ----------
   Eyebrows become drafting annotations sitewide. */
.v4-ann, .eyebrow {
  font-family: var(--font-ann);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bh-blue-deep);
}
.eyebrow::before { display: none; } /* drop the old dash prefix */
.on-dark .v4-ann, .on-dark .eyebrow { color: var(--bh-sky); }
.v4-ann--sky { color: var(--bh-sky); }
.v4-ann-pending, .pending.v4-ann-pending {
  font-family: var(--font-ann);
  font-size: 12px;
  letter-spacing: 0.1em;
  border: 1px dashed rgba(0, 53, 132, 0.45);
  border-radius: 0;
  padding: 5px 10px;
  color: var(--bh-blue-deep);
}

/* ---------- Header over the cyanotype hero ---------- */
.nav__logo { display: inline-flex; align-items: center; }
.nav__logo-white { display: none; align-items: center; gap: 12px; }
.nav__logo-white img:first-child { height: 30px; width: auto; }
.nav__logo-white img:last-child { height: 17px; width: auto; }
/* Stale v3-ink-hero header block removed 2026-07-12: no page carries the
   class and its two unscoped !important rules painted the open mobile menu
   ink-on-void. The unified header contract lives in living-blueprint.css. */

/* ---------- C1. Hero: the cyanotype sheet ---------- */
.v4-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + var(--space-12));
  padding-bottom: 150px;
}
/* the sheet border */
.v4-sheet {
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(252, 252, 252, 0.16);
  pointer-events: none;
}
.v4-sheet__tick {
  position: absolute;
  width: 15px; height: 15px;
}
.v4-sheet__tick::before, .v4-sheet__tick::after {
  content: '';
  position: absolute;
  background: var(--bh-sky);
}
.v4-sheet__tick::before { width: 15px; height: 1px; top: 7px; }
.v4-sheet__tick::after { width: 1px; height: 15px; left: 7px; }
.v4-sheet__tick--tl { top: -8px; left: -8px; }
.v4-sheet__tick--tr { top: -8px; right: -8px; }
.v4-sheet__tick--bl { bottom: -8px; left: -8px; }
.v4-sheet__tick--br { bottom: -8px; right: -8px; }

.v4-hero__inner { width: 100%; }
.v4-hero__title {
  color: var(--bh-white);
  margin-top: var(--space-4);
}
.v4-hero__title-b { color: var(--bh-sky); }
.v4-hero__row {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: var(--space-16);
  align-items: start;
  margin-top: var(--space-12);
}
.v4-hero__copy { display: grid; gap: var(--space-6); align-content: start; }
.v4-hero__lead { max-width: 520px; }
.v3-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.v3-benefits li {
  position: relative; padding-left: 26px;
  font-size: var(--text-body-lg); font-weight: var(--fw-body); color: var(--bh-white);
}
.v3-benefits li::before {
  content: ''; position: absolute; left: 0; top: 0.62em; width: 14px; height: 1.5px;
  background: var(--bh-sky);
}
.v4-hero__figure { margin: 0; justify-self: center; align-self: center; }
.v4-draft { width: min(450px, 100%); height: auto; display: block; }
.v4-d-t {
  font-family: var(--font-ann);
  font-size: 13px;
  letter-spacing: 0.18em;
  fill: var(--bh-sky);
}

/* the title block, pinned to the sheet corner */
.v4-titleblock {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 340px;
  margin: 0;
  border-left: 1px solid rgba(252, 252, 252, 0.16);
  border-top: 1px solid rgba(252, 252, 252, 0.16);
  background: rgba(4, 38, 79, 0.72);
}
.v4-titleblock__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-3);
  padding: 7px 14px;
}
.v4-titleblock__row + .v4-titleblock__row { border-top: 1px solid rgba(252, 252, 252, 0.12); }
.v4-titleblock dt, .v4-titleblock dd {
  margin: 0;
  font-family: var(--font-ann);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.5;
}
.v4-titleblock dt { color: rgba(252, 252, 252, 0.48); }
.v4-titleblock dd { color: var(--bh-white); }

/* ---------- C2. Proof statement ---------- */
.v3-statement {
  font-size: clamp(30px, 3.8vw, 48px); line-height: 1.14; letter-spacing: -0.022em;
  font-weight: 480; color: var(--text); text-wrap: balance;
}
.v3-proof-foot { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }

/* ---------- C3. Villain ledger ---------- */
.v3-villains { border-top: 1px solid var(--border-on-dark); max-width: 880px; }
.v3-villain {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-8); padding-block: var(--space-6);
  border-bottom: 1px solid var(--border-on-dark); align-items: baseline;
}
.v3-villain h3 { font-size: 20px; letter-spacing: -0.005em; }
.v3-villain p { color: var(--text-muted-on-dark); font-size: var(--text-body-lg); font-weight: var(--fw-body); }

/* ---------- C4. The foundation plan (signature sequence) ----------
   Default: the complete stacked ledger plus the finished drawing
   (mobile, reduced motion, no JS). v3.js adds .v3-seq--pin on
   motion-permitted desktops: the stage pins and the plan accretes
   layer by layer under scrub. */
.v3-seq { position: relative; overflow: clip; padding-block: var(--space-20) var(--space-24); }
.v3-seq__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-8); margin-bottom: var(--space-8);
}
.v3-seq__counter { display: none; font-variant-numeric: tabular-nums; }
.v3-seq--pin .v3-seq__counter {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.v3-seq__chapters { list-style: none; margin: 0; padding: 0; }
.v3-seq__ch { padding-block: var(--space-8); border-top: 1px solid rgba(0, 53, 132, 0.16); }
.v3-seq__num { display: block; margin-bottom: var(--space-3); }
.v3-seq__ch h3 {
  font-size: clamp(30px, 3.6vw, 44px); line-height: 1.04;
  letter-spacing: -0.026em; font-weight: var(--fw-display);
  margin-bottom: var(--space-3); color: var(--text);
}
.v3-seq__ch .lead { max-width: 560px; }
.v3-seq__figure { margin: var(--space-12) 0 0; }
.v3-seq__figure .v4-plan { width: min(680px, 100%); height: auto; display: block; margin-inline: auto; }
.v4-p-t {
  font-family: var(--font-ann);
  font-size: 12px;
  letter-spacing: 0.14em;
  fill: var(--bh-blue-deep);
}

/* pinned mode */
.v3-seq--pin .v3-seq__stage {
  position: relative;
  height: calc(100vh - var(--nav-h) - 120px);
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-16);
  align-items: center;
}
.v3-seq--pin .v3-seq__chapters { position: relative; height: 60%; min-height: 320px; }
.v3-seq--pin .v3-seq__ch {
  position: absolute; inset: 0; border: none; padding: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.v3-seq--pin .v3-seq__ch h3 { font-size: clamp(40px, 4.4vw, 62px); }
.v3-seq--pin .v3-seq__figure { margin: 0; align-self: center; }
.v3-seq--pin .v3-seq__figure .v4-plan { width: 100%; max-height: calc(100vh - var(--nav-h) - 180px); }

/* ---------- C6. Recognition: survey rows, not cards ---------- */
.recognise {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-12);
  max-width: 960px;
  background: none;
  border: none;
}
.recognise__item {
  display: flex; align-items: baseline; gap: var(--space-4);
  padding: var(--space-5, 20px) 0;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 14, 17, 0.14);
  box-shadow: none;
  font-size: var(--text-body-lg); font-weight: var(--fw-body); color: var(--text);
}
.recognise__item .tickmark {
  width: 18px; height: 18px; flex: none;
  color: var(--bh-blue-deep);
  transform: translateY(2px);
}

/* ---------- C8. The agenda, set like a title block ---------- */
.v3-agenda {
  max-width: 560px; margin-inline: auto; text-align: left;
  border: 1px solid rgba(252, 252, 252, 0.2);
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.v3-agenda__label {
  padding: 10px 16px;
  margin: 0;
  border-bottom: 1px solid rgba(252, 252, 252, 0.2);
}
.v3-agenda ul { list-style: none; margin: 0; padding: 0; }
.v3-agenda li {
  position: relative; padding: var(--space-3) 16px var(--space-3) 40px;
  color: var(--bh-white); font-size: var(--text-body-lg); font-weight: var(--fw-body);
}
.v3-agenda li + li { border-top: 1px solid rgba(252, 252, 252, 0.12); }
.v3-agenda li::before {
  content: ''; position: absolute; left: 16px; top: 1.05em; width: 14px; height: 1.5px;
  background: var(--bh-sky);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .v4-hero { min-height: 0; padding-bottom: var(--space-20); }
  .v4-hero__row { grid-template-columns: 1fr; gap: var(--space-12); }
  .v4-hero__figure { justify-self: start; }
  .v4-draft { width: min(360px, 88vw); }
  .v4-titleblock { display: none; }
  .v3-villain { grid-template-columns: 1fr; gap: var(--space-2); }
  .recognise { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .v4-hero { padding-top: calc(var(--nav-h) + var(--space-12)); }
  .v4-display { font-size: clamp(38px, 10.4vw, 46px); }
  .v3-statement { font-size: clamp(26px, 6.8vw, 30px); }
  .v4-sheet { inset: 10px; }
  .v4-sheet__tick { display: none; }
}