/* Riverina AI — design-fidelity layer.
   Brings the static build's *look* closer to Candidate D (the framework build):
   monumental hero type, editorial instrumentation (index counter, coordinates,
   hairline rules), and mono technical labels.

   Always-on (this is design, not motion). No new font downloads — technical
   labels use the system monospace stack to get Candidate D's "instrument" feel
   at zero added bytes. Reversible: remove this file + the hero markup additions. */

:root {
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code",
          Menlo, Consolas, monospace;
  --rule-ink: color-mix(in srgb, var(--ink) 15%, transparent);
  --label-ink: color-mix(in srgb, var(--ink) 48%, transparent);
}

/* ---- 1. Monumental hero display type (Candidate D scale) ------------------ */
.hero-openfield .h-display {
  font-size: clamp(3.5rem, 13vw, 11rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1;
}
.hero-openfield h1 .accent {
  display: block;                 /* stack "AI." under "Homegrown" like Candidate D */
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 40, 'WONK' 1;
}
.hero-openfield .hero-copy { max-width: none; }   /* let the headline run wide */

/* The monumental headline outgrows site.css's horizontal wash above 1140px:
   its ink now reaches ~92% of the viewport width and ~48% of the hero-field
   height, past the 44/56/72% horizontal stops, so glyphs land on bare line
   work and rust large-text contrast falls under the 3:1 AA floor on dark
   loop frames. site.css is left byte-identical: this layer re-declares
   .hero-field::after above 1140px only, adding a full-width top band of the
   same ground wash (plateau to 58% of hero height, clear by 76%) on top of
   the unchanged horizontal wash. Headline box bottom sits at <=45% and the
   lede bottom at <=54% of hero height at 1440 and 1920, so both stay on the
   85% plateau, whose measured worst-case backdrop is 3.81:1 against the rust
   and >=9:1 against the ink. The 861-1140 vertical-wash band in site.css is
   not touched, so the 1023/1024 seam keeps site.css's own geometry.
   Measured at --wash-a 85%, worst frame of 24+ sampled across the 9.292s
   loop, glyphs transparent, darkest pixel in the element box:
     1440px  headline 3.81:1  lede 10.27:1
     1920px  headline 3.81:1  lede 10.27:1 */
@media (min-width: 1141px) {
  .hero-field::after {
    background:
      linear-gradient(180deg,
          color-mix(in srgb, var(--ground) var(--wash-a), transparent) 0%,
          color-mix(in srgb, var(--ground) var(--wash-a), transparent) 58%,
          transparent 76%),
      linear-gradient(100deg,
          color-mix(in srgb, var(--ground) var(--wash-a), transparent) 0%,
          color-mix(in srgb, var(--ground) var(--wash-a), transparent) 44%,
          color-mix(in srgb, var(--ground) calc(var(--wash-a) * 0.88), transparent) 56%,
          transparent 72%);
  }
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  /* No color-mix, so no transparency. Match site.css's opaque fallback. */
  @media (min-width: 1141px) {
    .hero-field::after {
      background:
        linear-gradient(180deg, var(--ground) 0%, var(--ground) 58%, transparent 76%),
        linear-gradient(100deg, var(--ground) 0%, var(--ground) 48%, transparent 74%);
    }
  }
}

/* ---- 2. Mono technical labels (the "editorial instrument" voice) ---------- */
.kicker {
  font-family: var(--mono);
  letter-spacing: 0.18em;
}

/* ---- 3. Hero instrumentation: index counter, coordinates, baseline rule --- */
.hero-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding-bottom: calc(var(--u) * 2);
  border-bottom: 1px solid var(--rule-ink);
  margin-bottom: calc(var(--u) * 4);
}
.hero-index, .hero-coords, .hero-baseline span {
  font-family: var(--mono);
  font-size: var(--s-13);
  letter-spacing: 0.12em;
  color: var(--label-ink);
}
.hero-coords { display: block; margin-top: calc(var(--u) * 5); }
.hero-baseline {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: calc(var(--u) * 3);
  padding-top: calc(var(--u) * 2);
  border-top: 1px solid var(--rule-ink);
  text-transform: uppercase;
}

/* ---- 4. Section hairline rules (Candidate D's editorial rhythm) -----------
   The hairline is absolutely positioned, never in flow. An in-flow block
   ::before with content becomes a grid item inside .split / .split-pin wraps
   (they are CSS grids), takes cell one, and shifts every real child one cell
   along, swapping both columns of every split layout. Absolute positioning is
   chosen over grid-column: 1 / -1 (which still adds a grid row plus the 64px
   grid gap and does nothing for plain block wraps) and over a border on the
   section (the rule must span the wrap's content width, not the full bleed).
   Out of flow, the rule can never participate in grid or flex layout and adds
   no layout box, so the enhance layer leaves baseline flow byte-identical.
   It sits 40px above the wrap's content, inside the section's own padding
   (>= 64px on every affected section at every breakpoint), the same 40px
   separation the old margin-bottom gave. Inset matches .wrap padding-inline. */
.statement > .wrap, .section > .wrap, .field > .wrap { position: relative; }
.statement > .wrap::before,
.section  > .wrap::before,
.field    > .wrap::before {
  content: "";
  position: absolute;
  top: calc(var(--u) * -5);
  left: calc(var(--u) * 4); right: calc(var(--u) * 4);
  height: 1px;
  background: var(--rule-ink);
  pointer-events: none;
}
@media (max-width: 860px) {
  .statement > .wrap::before,
  .section  > .wrap::before,
  .field    > .wrap::before {
    left: calc(var(--u) * 3); right: calc(var(--u) * 3);  /* mobile .wrap padding */
  }
}

@media (max-width: 860px) {
  .hero-openfield .h-display { line-height: 0.94; }
}

/* ---- 5. Closing rhythm on the single-section page -------------------------
   privacy.html is the only page whose <main> holds one section, and that
   section is a plain .section (96px padding-block) rather than the
   .section.tight (64px) that closes method.html, book.html and
   insights/index.html. With .site-footer's 96px margin-top on top, its closing
   label sits 192px above the footer at 1440 against 160px everywhere else.

   Only the bottom edge is brought onto the existing rhythm, and only with the
   value .section.tight already uses, so no new spacing is introduced and the
   section's top spacing is left alone. main > section:only-child matches
   privacy.html and nothing else: insights/the-manifest.html is also a
   single-child main but its child is an <article>, and the other seven pages
   hold two or more children. At <= 860px site.css already resolves .section to
   the same 64px, so this is a no-op at mobile widths.

   Gated on .js, the root class the inline head script in every page sets, so
   the rule cannot apply when scripting is off. Without that gate this is a
   plain stylesheet rule and it fired regardless, which made the
   JavaScript-off rendering of privacy.html 32px shorter than the base build
   and broke the progressive-enhancement contract. .js is site.css's own
   existing hook for the same purpose, so no new mechanism is introduced. */
.js main > section:only-child { padding-bottom: calc(var(--u) * 8); }