/* ============================================================
   Silent Harbor - thesis Home (index.html) page layer.
   OWNER RULINGS ROUND 1 (2026-07-21, wiki/33 banner): Site C sections
   ported to the ruled page. Loads AFTER base.css + site-iie.css,
   BEFORE print.css.
   Contents:
     · HERO - Site C constellation hero (copy stack, SVG visual,
       5-cell question rail) under OUR dim beam atmosphere (the
       .iie-* layer contracts carry over; H1 keeps the dictated
       line + per-word/line-beat entrance)
     · 01 sh-decision (Site C §01, five cards, marigold hover rule)
     · 02 sh-engine (Site C §02, identity-anchor node map)
     · 03 sh-operating (Site C §03, three cards + model line)
     · 04 sh-standard (Site C §05 renumbered, triad + provenance list)
     · CLOSE (built overhead-glow bookend, kept)
   Site C sources merged: its home.css + the legacy-system.css
   overrides that won its cascade (instrument trace/pulse, marigold
   anchor, scanline cards). Re-tokened to OUR base.css :root only;
   near-black instrument scrims re-based on canvas rgb(20,20,22).
   Every entrance: reduced-motion + body.frozen + ?snap covered.
   The filing-stack set piece (folders/scrub) left this page - its
   markup, CSS and IIFE are fully removed (restores on LightHouse).
   ============================================================ */

main { display: block; }

/* ============================================================
   HERO - Site C constellation hero + our dim beam atmosphere
   ============================================================ */
.sh-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 150px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 58% 80% at 79% 48%, rgba(202,169,11,0.09), transparent 62%),
    var(--canvas);
  color: var(--text-primary);
}

/* ---- ambient layers (M7 dust recession contract preserved; the .iie-*
       layer names are kept so print.css keeps suppressing them).
       Round-3: the beam stack (beamfb wash, canvas, beam-v line, glow) and
       the field's gold meridian REMOVED by owner ruling - no marigold
       vertical lines in the hero. Dust + survey field stay. ---- */
.iie-dots, .iie-dots2, .iie-beam, .iie-beamfb { position: absolute; inset: 0; pointer-events: none; }
.iie-dots  { z-index: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.055) 0.5px, transparent 0.5px); background-size: 6px 6px; transform: translateY(calc(var(--lag, 0px) * 0.4)); transition: transform 240ms ease-out; }
.iie-dots2 { z-index: 0; opacity: 0.35; background-image: radial-gradient(circle, rgba(202,169,11,0.10) 1px, transparent 1px); background-size: 40px 40px; background-position: center; transform: translateY(var(--lag, 0px)); transition: transform 240ms ease-out; }

/* ROUND-4 RESTORE: the low-alpha wash, haze canvas and soft glow return
   (owner: only the hard vertical line + the field's gold meridian stay gone) */
.iie-beamfb { z-index: 0; background:
   radial-gradient(60% 80% at 76% 50%, rgba(202,169,11,0.09), transparent 60%),
   linear-gradient(90deg, transparent 60%, rgba(202,169,11,0.035) 78%, transparent 92%); }
.iie-beam { z-index: 1; width: 100%; height: 100%; display: block; }
.iie-beam-glow { position: absolute; top: 0; bottom: 0; left: 76%; width: 320px; z-index: 0; pointer-events: none; transform: translateX(-50%);
  background: radial-gradient(46% 54% at 50% 50%, rgba(202,169,11,0.05), transparent 68%); }

/* Site C coordinate field: faint survey grid, fades in from the left */
.sh-field {
  position: absolute;
  inset: 0; /* round-8: flush to the section top - no visible start line */
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(255,255,255,0.025) 120px),
    repeating-linear-gradient(0deg, transparent 0 89px, rgba(255,255,255,0.022) 90px);
  mask-image: linear-gradient(90deg, transparent, #000 36%, #000);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 36%, #000);
}

/* first light: dust + field fade up (play once) */
html.js .sh-hero:not(.loaded) .iie-dots,
html.js .sh-hero:not(.loaded) .iie-dots2,
html.js .sh-hero:not(.loaded) .iie-beamfb,
html.js .sh-hero:not(.loaded) .sh-field { opacity: 0; }
.sh-hero.loaded .iie-dots, .sh-hero.loaded .iie-dots2, .sh-hero.loaded .iie-beamfb, .sh-hero.loaded .sh-field { animation: iieFadeUp 400ms var(--ease-out-quint) both; }
@keyframes iieFadeUp { from { opacity: 0; } }
html.js .sh-hero:not(.loaded) .iie-beam-glow { clip-path: inset(0 0 100% 0); }
html.js .sh-hero:not(.loaded) .iie-beam { opacity: 0; }
.sh-hero.loaded .iie-beam-glow { animation: iieBeamDescend 600ms var(--ease-out-quint) 150ms both; }
.sh-hero.loaded .iie-beam { animation: iieBeamFade 800ms var(--ease-out-quint) both; }
@keyframes iieBeamDescend { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes iieBeamFade { from { opacity: 0; } }
body.frozen .iie-dots, body.frozen .iie-beamfb, body.frozen .sh-field { opacity: 1 !important; animation: none !important; transform: none !important; transition: none !important; }
body.frozen .iie-dots2 { opacity: 0.35 !important; animation: none !important; transform: none !important; transition: none !important; }
body.frozen .iie-beam-glow { clip-path: none !important; opacity: 1 !important; animation: none !important; }
body.frozen .iie-beam { opacity: 1 !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .iie-dots, .iie-beamfb, .sh-field { opacity: 1 !important; animation: none !important; transform: none !important; transition: none !important; }
  .iie-dots2 { opacity: 0.35 !important; animation: none !important; transform: none !important; transition: none !important; }
  .iie-beam-glow { clip-path: none !important; opacity: 1 !important; animation: none !important; }
  .iie-beam { opacity: 1 !important; animation: none !important; }
}

/* ---- hero layout (Site C grid) ---- */
.sh-hero-grid {
  flex: 1;
  width: 100%;
  max-width: var(--max);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1.1fr);
  gap: clamp(30px, 4vw, 68px);
  align-items: center;
  padding-bottom: 50px;
  z-index: 2;
}
.sh-hero-copy { max-width: 620px; min-width: 0; position: relative; z-index: 2; }

/* ---- shared mono labels (eyebrow + section index) ---- */
.sh-eyebrow,
.sh-index {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--periwinkle);
}
.sh-eyebrow { display: block; margin-bottom: var(--eyebrow-gap); }
/* (Round-3: the pulsing signal dot removed - a banned brand attribute.) */
@keyframes instrumentTrace { to { stroke-dashoffset: -120; } }

/* ---- headline: Site C display scale, dictated line (3 rendered lines);
       widened from Site C's 8.4ch so "for the field." holds one line ---- */
.sh-hero h1 {
  max-width: 11ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(58px, 6.2vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.sh-hero h1 .hline { display: block; }
.sh-hero h1 .word { display: inline-block; }
.sh-hero h1 .word > i { display: inline-block; font-style: normal; }
html.js .sh-hero:not(.loaded) h1 .word > i { opacity: 0; transform: translateY(22px); }
.sh-hero.loaded h1 .word > i { animation: iieWordUp 0.9s var(--ease-out-expo) both; }
@keyframes iieWordUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.sh-hero h1 .word.ac > i { color: var(--marigold); } /* round-8: owner ruled 'field' marigold */

/* ---- lead + body + CTAs (Site C copy stack, our entrance timing) ---- */
.sh-hero-lead {
  margin-top: 34px;
  max-width: 47ch;
  font-family: var(--font-ui);
  font-size: var(--fs-lead);
  line-height: 1.55; /* D154: was 1.45 - four of five hero leads already ship 1.55 */
  color: var(--text-secondary); /* D156 (owner): Home dims to match - one hero-lead colour site-wide */
}
.sh-hero-body { margin-top: 22px; max-width: 60ch; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.sh-actions { margin-top: 34px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

html.js .sh-hero:not(.loaded) .sh-eyebrow { opacity: 0; transform: translateY(10px); }
.sh-hero.loaded .sh-eyebrow { opacity: 1; transform: none; transition: opacity 760ms var(--ease-out-quint) 120ms, transform 760ms var(--ease-out-quint) 120ms; }
html.js .sh-hero:not(.loaded) .sh-hero-lead,
html.js .sh-hero:not(.loaded) .sh-hero-body { opacity: 0; }
.sh-hero.loaded .sh-hero-lead { animation: iieUp 1s var(--ease-out-quint) 0.7s both; }
.sh-hero.loaded .sh-hero-body { animation: iieUp 1s var(--ease-out-quint) 0.85s both; }
@keyframes iieUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
html.js .sh-hero:not(.loaded) .sh-hero-copy .sh-actions { opacity: 0; transform: translateY(10px); }
.sh-hero.loaded .sh-hero-copy .sh-actions { opacity: 1; transform: none; transition: opacity 760ms var(--ease-out-quint) 1050ms, transform 760ms var(--ease-out-quint) 1050ms; }

/* frozen + reduce contracts for the hero copy stack */
body.frozen .sh-hero h1 .word > i { animation: none !important; transform: none !important; opacity: 1 !important; }
body.frozen .sh-eyebrow, body.frozen .sh-hero-lead, body.frozen .sh-hero-body { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
body.frozen .sh-hero .sh-actions { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sh-hero h1 .word > i { transform: none !important; animation: none !important; opacity: 1 !important; }
  .sh-eyebrow, .sh-hero-lead, .sh-hero-body { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .sh-hero .sh-actions { opacity: 1 !important; transform: none !important; transition: none !important; } /* round-5: match the frozen leg's strength */
}

/* ---- constellation visual (Site C, legacy-instrument colorway) ---- */
.sh-hero-visual {
  position: relative;
  min-height: 620px;
  align-self: stretch;
  display: flex;
  align-items: center;
  border-left: 1px solid rgba(202,169,11,0.12);
  background: linear-gradient(90deg, transparent, rgba(202,169,11,0.035));
  /* round-8: the panel's layers begin and end with the SECTION - escape the
     hero paddings vertically and bleed to the viewport edge on wide screens
     (compensating paddings keep the visual itself exactly where it was) */
  margin-top: -150px;
  padding-top: 150px;
  margin-bottom: -50px;
  padding-bottom: 50px;
  margin-right: calc(-48px - max(0px, (100vw - var(--max)) / 2));
  padding-right: calc(48px + max(0px, (100vw - var(--max)) / 2));
}
.sh-hero-visual::before {
  content: '';
  position: absolute;
  inset: 0; /* round-8: scanlines flush with the panel, top to bottom */
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 5px);
}
html.js .sh-hero:not(.loaded) .sh-hero-visual { opacity: 0; transform: translateY(18px); }
.sh-hero.loaded .sh-hero-visual { animation: shVisualIn 900ms var(--ease-out-quint) 350ms both; }
@keyframes shVisualIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
body.frozen .sh-hero-visual { opacity: 1 !important; transform: none !important; animation: none !important; }

/* ---- the course visual (round-2): inputs converge in the engine, one
   course of action draws in marigold; paths not taken stay dim. Play-once
   draw only - no ambient loop to pause. ---- */
/* round-12: the panel escapes the hero paddings asymmetrically (150 top / 50 bottom),
   which parked the visual 100px below the panel's optical centre. The 100px bottom
   margin cancels that difference so the composition centres in the panel it sits in. */
.sh-course { width: 100%; height: auto; overflow: visible; margin-bottom: 100px; transform: translateX(15%); } /* round-13: nudged right - the panel bleeds to the viewport edge, so a box-centred composition reads left of the panel's optical centre */
/* (Round-3: label-free visual - all SVG text removed by owner ruling) */
/* round-4: data-point icons combine into the record (the decision product);
   a fan of candidate paths leaves it, one drawn gold */
.sh-icons g { fill: none; stroke: rgba(136,156,231,0.75); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sh-conv path { fill: none; stroke: rgba(136,156,231,0.30); stroke-width: 1; }
.sh-junction-glow { fill: rgba(202,169,11,0.10); }
/* round-12: the streams DRAW into the record before the course leaves it, so the
   composition reads as cause and effect instead of a finished diagram. Play-once,
   no ambient loop (D133), and every leg below lands the final state statically. */
.sh-icons g { opacity: 0; }
.sh-conv path { stroke-dasharray: 240; stroke-dashoffset: 240; }
.sh-junction-glow { transform-box: fill-box; transform-origin: center; transform: scale(0.4); opacity: 0; }
.sh-hero.loaded .sh-icons g { animation: shFadeIn 520ms var(--ease-out-quint) both; }
.sh-hero.loaded .sh-icons g:nth-child(1) { animation-delay: 430ms; }
.sh-hero.loaded .sh-icons g:nth-child(2) { animation-delay: 500ms; }
.sh-hero.loaded .sh-icons g:nth-child(3) { animation-delay: 570ms; }
.sh-hero.loaded .sh-icons g:nth-child(4) { animation-delay: 640ms; }
.sh-hero.loaded .sh-conv path { animation: shConvDraw 620ms var(--ease-out-quint) both; }
.sh-hero.loaded .sh-conv path:nth-child(1) { animation-delay: 560ms; }
.sh-hero.loaded .sh-conv path:nth-child(2) { animation-delay: 630ms; }
.sh-hero.loaded .sh-conv path:nth-child(3) { animation-delay: 700ms; }
.sh-hero.loaded .sh-conv path:nth-child(4) { animation-delay: 770ms; }
.sh-hero.loaded .sh-junction-glow { animation: shJunctionSettle 720ms var(--ease-out-quint) 1000ms both; }
@keyframes shFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes shConvDraw { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }
@keyframes shJunctionSettle { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
html:not(.js) .sh-icons g, html:not(.js) .sh-junction-glow { opacity: 1; transform: none; }
html:not(.js) .sh-conv path { stroke-dashoffset: 0; }
body.frozen .sh-icons g, body.frozen .sh-junction-glow { opacity: 1 !important; transform: none !important; animation: none !important; }
body.frozen .sh-conv path { stroke-dashoffset: 0 !important; animation: none !important; }
.sh-rec-card { fill: rgba(20,20,22,0.88); stroke: rgba(202,169,11,0.60); stroke-width: 1.5; }
.sh-rec-line { stroke: rgba(255,255,255,0.22); stroke-width: 5; }
.sh-rec-line.dim { stroke: rgba(255,255,255,0.11); }
.sh-rec-seal { fill: var(--marigold); }
.sh-alt path { fill: none; stroke: rgba(255,255,255,0.10); stroke-width: 1; }
.sh-alt circle { fill: none; stroke: rgba(255,255,255,0.16); stroke-width: 1.2; }
.sh-path { fill: none; stroke: var(--marigold); stroke-width: 1.8; stroke-dasharray: 192; stroke-dashoffset: 192; }
.sh-path-arrow { fill: none; stroke: var(--marigold); stroke-width: 1.6; opacity: 0; }
.sh-path-end { fill: var(--marigold); opacity: 0; }
.sh-hero.loaded .sh-path { animation: shPathDraw 800ms var(--ease-out-quint) 1150ms forwards; }
.sh-hero.loaded .sh-path-arrow, .sh-hero.loaded .sh-path-end { animation: shPathTip 300ms ease-out 1800ms forwards; }
@keyframes shPathDraw { to { stroke-dashoffset: 0; } }
@keyframes shPathTip { to { opacity: 1; } }
html:not(.js) .sh-path { stroke-dashoffset: 0; }
html:not(.js) .sh-path-arrow, html:not(.js) .sh-path-end { opacity: 1; }
body.frozen .sh-path { stroke-dashoffset: 0 !important; animation: none !important; }
body.frozen .sh-path-arrow, body.frozen .sh-path-end { opacity: 1 !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sh-hero-visual { opacity: 1 !important; transform: none !important; animation: none !important; }
  .sh-path { stroke-dashoffset: 0 !important; animation: none !important; }
  .sh-path-arrow, .sh-path-end { opacity: 1 !important; animation: none !important; }
  .sh-icons g, .sh-junction-glow { opacity: 1 !important; transform: none !important; animation: none !important; }
  .sh-conv path { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* ============================================================
   Shared section grammar (Site C)
   ============================================================ */
.sh-section {
  padding: var(--section-y) 0;
  position: relative;
  background:
    radial-gradient(ellipse 55% 42% at 12% 12%, rgba(136,156,231,0.045), transparent 70%),
    var(--canvas);
}
.sh-section-head { max-width: 790px; margin-bottom: var(--head-gap); } /* D154: 62px was the largest, single-use head gap on the site */
.sh-index { margin-bottom: 20px; }
.sh-section h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px); /* C12/D143: unified to the D104 ladder (was up to 72px) */
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.sh-section-head > p:last-child { margin-top: var(--dek-gap); max-width: 68ch; font-size: var(--fs-dek); line-height: 1.6; color: var(--text-secondary); } /* D154: was a flat 18px that never scaled - the only non-fluid dek on the site */
.sh-card-tag { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--periwinkle); }
.sh-operating-grid h3,
.sh-standard-list h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--text-primary);
}
/* gold arrow text link (Site C) */
.sh-text-link { display: inline-flex; gap: 12px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid rgba(202,169,11,0.5); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--marigold); }
.sh-text-link span { transition: transform 180ms var(--ease-out-quint); }
.sh-text-link:hover span { transform: translateX(4px); }

/* (ROUND-7, C8.9/D138: the decision section MOVED to LightHouse.html -
   its rules now live in lighthouse.css.) */

/* ============================================================
   02 - THE ENGINE TODAY (Site C §02)
   ============================================================ */
/* round-4 UNVEILING layout: centered stack - eyebrow, lockup under a soft
   glow, category H2, symmetric radial map, two text columns, gold arrow */
/* C9/D140: the agentic-age beat - a centered, quiet band; the accent carries
   the control half of the headline ("You still decide.") */
.sh-age { background: radial-gradient(ellipse 62% 48% at 16% 16%, rgba(136,156,231,0.045), transparent 68%), var(--canvas-2); }
.sh-age .sh-section-head { max-width: 940px; margin: 0 auto; text-align: center; }
.sh-age h2 { max-width: 22ch; margin: 0 auto; }
.sh-age .sh-ac { color: var(--marigold); }
.sh-age .sh-section-head > p:last-child { margin: 24px auto 0; max-width: 62ch; }
@media (max-width: 600px) { .sh-age .sh-section-head { text-align: left; } .sh-age h2, .sh-age .sh-section-head > p:last-child { margin-left: 0; } }
.sh-engine { background: radial-gradient(ellipse 60% 46% at 82% 14%, rgba(202,169,11,0.05), transparent 68%), var(--canvas); } /* round-7 tone re-balance; round-8: subtle marigold glow returns */
.sh-unveil { text-align: center; }
.sh-unveil-head { position: relative; }
.sh-unveil-head::before { content: ''; position: absolute; left: 50%; top: -30px; width: 560px; height: 240px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(50% 60% at 50% 40%, rgba(202,169,11,0.07), transparent 70%); }
.sh-unveil-head > * { position: relative; }
.sh-unveil-lockup { display: block; margin: 30px auto 26px; width: auto; height: 58px; } /* round-11: +25% per owner (46 -> 58) */
.sh-unveil-head h2 { max-width: none; }
.sh-unveil .sh-lead { margin: 22px auto 0; max-width: 56ch; font-size: var(--fs-lead); line-height: 1.55; color: var(--text-secondary); } /* D156: the site's other primary-coloured supporting line, converged with the hero lead */
.sh-engine-map { max-width: 620px; margin: var(--head-gap) auto 0; }
.sh-engine-map svg { width: 100%; height: auto; overflow: visible; }
.sh-orbit { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 1; stroke-dasharray: 2 6; }
.sh-unveil-cols { margin: 44px auto 0; max-width: 900px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; text-align: left; }
.sh-unveil-cols p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.sh-unveil-cta { margin-top: 34px; }
.sh-engine-links path { fill: none; stroke: rgba(255,255,255,0.2); stroke-width: 1.15; stroke-dasharray: 5 5; animation: instrumentTrace 20s linear infinite; }
.sh-engine-node circle { fill: var(--canvas); stroke: var(--periwinkle); stroke-width: 1.5; }
/* D158: sized against the diagram's own render scale so the RENDERED label holds
   the 11px floor at every viewport (it was landing at 5.2px on a phone). */
.sh-engine-node text,
.sh-engine-anchor text { fill: var(--text-tertiary); font-family: var(--font-mono); font-size: calc(11px / var(--dscale, 1)); letter-spacing: 0.08em; }
/* D162: no-JS floor guarantee. diagram-scale.js publishes the exact --dscale as an
   inline style (which wins), but with JS off it defaults to 1 and the 640-unit viewBox
   renders labels at ~5.8px on a phone. These banded approximations of renderedWidth/640
   hold the RENDERED label at or above the 11px floor without script. The container caps
   at 620px (>900px) then 560px, then tracks the viewport, so the scale steps down with it. */
html:not(.js) .sh-engine-map svg { --dscale: 0.96; }
@media (max-width: 900px) { html:not(.js) .sh-engine-map svg { --dscale: 0.86; } }
@media (max-width: 600px) { html:not(.js) .sh-engine-map svg { --dscale: 0.68; } }
@media (max-width: 480px) { html:not(.js) .sh-engine-map svg { --dscale: 0.49; } }
@media (max-width: 360px) { html:not(.js) .sh-engine-map svg { --dscale: 0.43; } }
.sh-engine-risk circle { stroke: var(--flag); }
.sh-engine-risk text { fill: var(--flag); }
.anchor-glow { fill: rgba(202,169,11,0.12); }
.anchor-ring { fill: var(--canvas); stroke: var(--marigold); stroke-width: 2; }
.anchor-core { fill: var(--marigold); }

/* ============================================================
   03 - THE OPERATING MODEL (Site C §03)
   ============================================================ */
.sh-operating { background: radial-gradient(ellipse 64% 50% at 18% 18%, rgba(136,156,231,0.045), transparent 68%), var(--canvas-2); } /* C9/D140: re-phased for the new agentic-age beat */
.sh-operating-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--hair-strong); } /* D162: colored grid border -> hairline (Hairline Rule, part of the A1 gold-scarcity ruling) */
.sh-operating-grid article { min-height: 360px; padding: 30px 32px 36px; border-right: 1px solid var(--hair); position: relative; overflow: hidden; }
.sh-operating-grid article:last-child { border-right: 0; }
.sh-operating-grid article::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 5px);
  opacity: 0.7;
}
.sh-operating-grid article > * { position: relative; z-index: 1; }
.sh-operating-grid article:hover { background: rgba(255,255,255,0.018); }
.sh-step { display: flex; align-items: center; gap: 14px; margin-bottom: 58px; }
.sh-step i { height: 1px; flex: 1; background: var(--hair); }
.sh-operating-grid h3 { margin-top: 18px; font-size: clamp(19px, 1.9vw, 25px); }
.sh-operating-grid article > p:last-child { margin-top: 20px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.sh-operating-statement { margin: 48px auto 0; max-width: 1020px; text-align: center; font-family: var(--font-display); font-size: clamp(27px, 3.2vw, 46px); line-height: 1.12; color: var(--text-primary); } /* A1/D162: demoted from marigold -> primary; the #standard creed is now the page's single full-gold statement (Sacred Beam Rule) */

/* ============================================================
   04 - THE STANDARD (Site C §05, renumbered)
   ============================================================ */
/* C9/D140: re-phased for the new agentic-age beat (age 2 / engine 1 / operating 2 / standard 1) */
.sh-standard { background: radial-gradient(ellipse 64% 50% at 18% 18%, rgba(136,156,231,0.045), transparent 68%), var(--canvas); }
.sh-standard-grid { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(56px, 9vw, 140px); align-items: start; }
.sh-standard-copy > p:not(.sh-index) { margin-top: var(--dek-gap); max-width: 48ch; font-size: var(--fs-dek); line-height: 1.6; color: var(--text-secondary); } /* D154: #standard builds its head inline, which is how it drifted off the dek step; colour was inherited-only */
.sh-standard-copy blockquote { margin-top: 58px; padding-top: 24px; border-top: 1px solid var(--hair-strong); font-family: var(--font-display); font-size: clamp(28px, 3vw, 43px); line-height: 1.13; text-transform: uppercase; color: var(--marigold); }
.sh-standard-list { list-style: none; border-top: 1px solid var(--hair-strong); }
.sh-standard-list li { display: grid; grid-template-columns: 42px 1fr; gap: 24px; padding: 27px 0; border-bottom: 1px solid var(--hair); }
.sh-standard-list li > span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--periwinkle); }
.sh-standard-list h3 { font-size: clamp(19px, 1.9vw, 25px); }
.sh-standard-list p { margin-top: 9px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

/* ============================================================
   CLOSE (built overhead-glow bookend, kept)
   ============================================================ */
.close { position: relative; min-height: 52vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: var(--close-y) 0; } /* round-8b: uniform close across Home/LightHouse/Company */
.close .veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 72% 70% at 50% 56%, transparent 0%, rgba(20,20,22,0.62) 68%, var(--canvas) 100%); }
.close .wrap { position: relative; z-index: 2; text-align: center; }
.close .sub { color: var(--text-secondary); margin: 28px auto 0; max-width: 46ch; font-size: 15px; line-height: 1.6; }
.close .actions { margin-top: 40px; display: flex; gap: 16px; justify-content: center; }

/* ============================================================
   M14 threshold hairlines - ONLY the bands this page has
   (round-7: .sh-decision left with its section to LightHouse)
   ============================================================ */
.sh-age::before, .sh-engine::before, .sh-operating::before, .sh-standard::before, .close::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--hair); transform-origin: left; z-index: 3; pointer-events: none;
  transition: transform 900ms var(--ease-out-quint);
}
html.js .sh-age:not(.sealed)::before,
html.js .sh-engine:not(.sealed)::before,
html.js .sh-operating:not(.sealed)::before, html.js .sh-standard:not(.sealed)::before,
html.js .close:not(.sealed)::before { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
  .sh-age::before, .sh-engine::before, .sh-operating::before, .sh-standard::before, .close::before { transform: none !important; transition: none !important; }
}
body.frozen .sh-age::before,
body.frozen .sh-engine::before,
body.frozen .sh-operating::before, body.frozen .sh-standard::before,
body.frozen .close::before { transform: none !important; transition: none !important; }

/* ============================================================
   Ambient-loop contracts (ported Site C instrument animations)
   ============================================================ */
/* offstage sections park their infinite loops (entrances unaffected) */
.offstage .sh-engine-links path { animation-play-state: paused !important; }
/* frozen/?snap: settled frame, no marching dashes or pulse */
body.frozen .sh-engine-links path { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sh-engine-links path { animation: none !important; }
  .sh-text-link span { transition: none !important; }
}

/* ============================================================
   Responsive (Site C breakpoints, adapted for 5 cards / 5 rail cells)
   ============================================================ */
@media (max-width: 1180px) {
  .sh-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(390px, 0.82fr); gap: 40px; }
  .sh-hero h1 { font-size: clamp(56px, 6.4vw, 78px); }
  .sh-unveil-cols { max-width: 760px; gap: 36px; }
}

@media (max-width: 900px) {
  .sh-hero { padding-top: 124px; min-height: auto; }
  .sh-hero-grid { grid-template-columns: minmax(0, 1fr); padding-bottom: 40px; }
  .sh-hero-copy { max-width: 760px; }
  .sh-hero h1 { max-width: 11ch; font-size: clamp(56px, 10.5vw, 84px); }
  /* round-13: the visual joins the BACKGROUND on phones, the way the LightHouse
     and Company heroes do (hero-iie.css:143 idiom) - it sits behind the copy with
     a directional scrim instead of stacking underneath it as a separate block. */
  .sh-hero-copy { position: relative; z-index: 2; }
  .sh-hero-visual {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    margin: 0; padding: 0; max-width: none; min-height: 0; width: 100%;
    border-left: 0; background: none; opacity: 1;
    display: flex; align-items: center; justify-content: flex-end;
  }
  .sh-hero-visual::before { display: none; } /* panel scanlines do not belong behind live text */
  .sh-hero-visual::after {
    /* copy-protection scrim - same recipe as the LightHouse hero: the box extends
       past the copy block and the vertical mask dissolves the top/bottom edges */
    content: ''; position: absolute; inset: -72px 0;
    background: linear-gradient(90deg, var(--canvas) 40%, rgba(20,20,22,0.4) 62%, transparent 84%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
  }
  .sh-course { margin-bottom: 0; transform: scale(0.78) translateX(16%); transform-origin: 100% 50%; }
  body.frozen .sh-hero-visual { opacity: 1 !important; }
  .sh-standard-grid { grid-template-columns: minmax(0, 1fr); }
  .sh-engine-map { max-width: 560px; width: 100%; margin: 30px auto 0; }
  .sh-unveil-cols { grid-template-columns: 1fr; gap: 20px; max-width: 640px; }
  .sh-unveil-lockup { height: 48px; } /* round-11: +25% (38 -> 48) */
  .sh-operating-grid { grid-template-columns: 1fr; }
  .sh-operating-grid article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--hair); }
  .sh-operating-grid article:last-child { border-bottom: 0; }
  .sh-step { margin-bottom: 36px; }
}

@media (max-width: 700px) {
}

@media (max-width: 600px) {
  .sh-hero { padding-top: 108px; }
  .sh-hero-grid { gap: 28px; }
  .sh-hero h1 { font-size: clamp(44px, 13vw, 56px); }
  .sh-hero-lead { margin-top: 28px; } /* D154: the 19px hard override dropped - the clamp floor governs on phones, same as every other page */
  .sh-hero-body { font-size: 15px; }
  .sh-actions { align-items: stretch; }
  .sh-actions .btn { justify-content: center; width: 100%; }
  /* round-13: the 600px min-height/margin override retired - the visual is a background layer now */
  /* D154: head-gap override retired - --head-gap is one value at every width */
  .sh-engine-map { margin-top: 0; }
  /* D158: the 10px mobile override retired - the scale-aware size above governs */
  .sh-operating-grid article { padding: 26px 22px 32px; }
  .sh-standard-list li { grid-template-columns: 30px 1fr; gap: 15px; }
  .sh-standard-copy blockquote { margin-top: 42px; }
}
@media (max-width: 760px) {
}

/* ============================================================
   Print (page-layer; print.css covers the shared/legacy classes,
   these are the classes new to this page)
   ============================================================ */
@media print {
  /* final-state contract (print runs no JS; loaded/sealed never land) */
  .sh-hero h1 .word > i,
  .sh-eyebrow, .sh-hero-lead, .sh-hero-body, .sh-hero .sh-actions { opacity: 1 !important; transform: none !important; }
  .sh-age::before, .sh-engine::before, .sh-operating::before, .sh-standard::before, .close::before { transform: none !important; }
  /* hero flattens to a typed header; decorative instruments are suppressed */
  .sh-hero { min-height: 0 !important; display: block !important; padding: 34px 0 10px !important; }
  .sh-field, .sh-hero-visual, .sh-engine-map { display: none !important; }
  .sh-standard-grid { grid-template-columns: 1fr !important; }
  .sh-unveil { text-align: left; }
  .sh-unveil-cols { grid-template-columns: 1fr !important; }
  .sh-unveil-head::before { display: none; }
  .sh-unveil-lockup { margin-left: 0; }
  .sh-standard-list li, .sh-standard-copy blockquote { break-inside: avoid; }
}

/* ============================================================
   POST-TRANSPLANT ADDITIONS (dev-scope — not part of the verbatim
   sheet above; keep appended, never interleave).
   D177 (owner, 2026-07-24): the D173 text gutter applied to the
   Home hero — at phone widths the lead and body ran to the full
   wrap (right edge 355 at 375px), through the haze field's dense
   center band (0.82 × width ≈ 308) and across the background
   record-card visual. Running text only: the dictated H1's
   three-line wrap is LOCKED (the M1 entrance buckets by rendered
   line) and already clears the band; eyebrow and CTAs untouched.
   ============================================================ */
@media (max-width: 760px) {
  .sh-hero-lead, .sh-hero-body { max-width: 66vw; }
}