/* Lighthouse — "What we built": enrichment web section (scoped under .enrich) */
.enrich { position: relative; height: 118vh; padding: 0; } /* M8: bottom padding cut so the next band rises sooner; D151/D152: 160 -> 132 -> 118vh and padding to 0 - the shortest runway that still gives the scrub travel, so the reader passes the pinned frame quickly */
.enrich .enr-pin { position: sticky; top: 56px; height: auto; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: clamp(10px, 3.2vh, 54px); padding: 40px 0 30px; } /* D152: the gap breathes with viewport height so tall screens spend the slack inside the composition */
.enrich .enr-head { text-align: center; padding: 0 48px; }
.enrich .enr-head .seclabel { justify-content: center; margin-bottom: 14px; }
.enrich .enr-h { font-family: 'Rajdhani', sans-serif; font-weight: 600; text-transform: uppercase; line-height: 1.0; color: var(--text-primary); font-size: clamp(28px, 3vw, 40px); max-width: 24ch; margin: 0 auto; letter-spacing: 0; }
.enrich .enr-h .ac { color: var(--marigold); }
.enrich .enr-lane { width: 100vw; max-width: 1440px; align-self: center; margin: 0 auto; }
.enrich .enr-lane svg { display: block; width: 100%; height: auto; overflow: visible; }
.enrich .enr-foot { display: flex; justify-content: center; }

/* readline (V9: dead .readline .k rule deleted - no .k in the markup) */
.enrich .readline { display: flex; align-items: baseline; gap: 18px; padding-top: 14px; opacity: 0; }
.enrich .readline .c { font-family: 'Rajdhani', sans-serif; font-weight: 600; text-transform: uppercase; font-size: clamp(16px, 1.9vw, 24px); color: var(--text-primary); }
.enrich .readline .c .ac { color: var(--marigold); }

/* web line-art (scoped) */
.enrich .web-edge { stroke: rgba(202,169,11,0.32); stroke-width: 1.5; }
.enrich .web-edge.p { stroke: rgba(136,156,231,0.4); }
.enrich .web-edge.f { stroke: rgba(226,80,75,0.5); }
.enrich .web-node { fill: var(--surface-2); stroke: var(--marigold); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.enrich .web-node.p { stroke: var(--periwinkle); }
.enrich .web-node.f { stroke: var(--flag, #e2504b); fill: var(--canvas-2); }
.enrich .web-node.seed { fill: var(--marigold); }
/* V7 micro-type floor: web 14.5 / flags 16 / rec-box 13 / seeds 12 */
.enrich .web-lab { font-family: var(--font-mono); font-size: 14.5px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--text-tertiary); }
.enrich .web-lab.f { fill: var(--flag, #e2504b); font-size: 16px; }
.enrich .rec-box { fill: none; stroke: var(--text-dim); stroke-width: 1.2; stroke-dasharray: 4 4; }
.enrich .rec-box-lab { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--text-tertiary); }
/* V4: 'Clean' demoted from marigold to text-tertiary (token doctrine - marigold = resolved/lit);
   verdict labels up one size step */
.enrich .clean-ring { fill: none; stroke: var(--text-tertiary); stroke-width: 1.4; }
.enrich .clean-check { fill: none; stroke: var(--text-tertiary); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.enrich .clean-lab { font-family: var(--font-mono); font-size: 15.5px; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--text-tertiary); }
.enrich .risk-ring { fill: none; stroke: var(--flag, #e2504b); stroke-width: 1.4; }
.enrich .risk-x { font-family: var(--font-mono); font-size: 12.5px; fill: var(--flag, #e2504b); }
.enrich .risk-lab { font-family: var(--font-mono); font-size: 15.5px; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--flag, #e2504b); }

/* initial record text, quieter */
.enrich .web-lab.seed-lab { font-size: 12px; }

@media (max-width: 820px) {
  .enrich { height: auto; padding-bottom: 30px; }
  .enrich .enr-pin { position: static; height: auto; padding: 90px 0 36px; gap: 26px; }
  .enrich .enr-lane { width: 100%; }
  .enrich .readline { justify-content: center; padding-top: 10px; flex-wrap: wrap; row-gap: 6px; text-align: center; }
  /* D21 — miniaturized desktop structure: SVG text is sub-floor at this scale;
     the HTML overlay below carries the labels at the 11px floor */
  .enrich .enr-lane svg text { display: none; }
  .enrich .web-edge { stroke-width: 4; }
  .enrich .rec-box { stroke-width: 3.5; }
  .enrich .web-node { stroke-width: 4.5; }
  .enrich .enr-mlabels { position: absolute; inset: 0; pointer-events: none; }
  .enrich .eml {
    position: absolute; white-space: nowrap; opacity: 0;
    /* owner audit: hero-beacon label scale (the 11px floor is waived for diagram
       micro-labels here by owner decision, matching the hero precedent) */
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--text-tertiary);
    transform: translate(8px, -130%);
    /* web nodes pass under the label band - canvas-toned halo keeps glyphs legible */
    text-shadow: 0 0 2px var(--canvas), 0 0 2px var(--canvas), 0 0 3px var(--canvas), 0 0 4px var(--canvas);
  }
  .enrich .eml.f { color: var(--flag, #e2504b); }
  .enrich .eml.mid { transform: translate(-50%, 0); }
  .enrich .eml.end { transform: translate(calc(-100% - 8px), -50%); }
  .enrich .eml.verdict { color: var(--marigold); font-weight: 500; }
  .enrich .eml.verdict.risk { color: var(--flag, #e2504b); }
  .enrich .eml.rec { color: var(--text-tertiary); opacity: 1; }
}

/* desktop pin (D151, supersedes D146/V9): the pin now HUGS its content - forcing it to a
   full viewport height left ~256px of dead pin under the readline even after the auto
   margins went, which is the gap the owner still saw. Scrub timing is untouched:
   enrichment.js derives progress from section height, not pin height. */
/* desktop pin (D152, supersedes D151/D146/V9). The composition is ~800px tall; forcing
   the pin to the full viewport parks ~500px of slack SOMEWHERE - centred it sat under
   the readline, bottom-aligned it sat above the head (both rejected by the owner). The
   pin now takes its CONTENT height and starts at the top, so the head appears directly
   under the sticky header at every viewport height and the residual space falls after
   the readline, where the next section rises to meet it and it reads as section rhythm.
   Scrub timing untouched: enrichment.js derives progress from section height. */
@media (min-width: 821px) {
  .enrich .enr-pin { box-sizing: border-box; justify-content: flex-start; padding: 34px 0 64px; } /* D157: 64px bottom - the readline was landing flush against the section end */
  .enrich .enr-foot { padding-top: 38px; } /* D157: 18 -> 38, the line needs air above it too */
}

/* M9 - collapse the scrub runway when the scrub can't play (reduced-motion / ?snap
   layout parity; gated on the media query and the dedicated body.snap class only -
   NEVER body.frozen, which the mid-scroll failsafe can add for motion users) */
@media (prefers-reduced-motion: reduce) {
  .enrich { height: auto; padding-bottom: 40px; }
  .enrich .enr-pin { position: static; min-height: 0; }
}
body.snap .enrich { height: auto; padding-bottom: 40px; }
body.snap .enrich .enr-pin { position: static; min-height: 0; }