/* ============================================================
   CASE STUDIES — "Infrastructure Field Reports"
   Page-specific components. Uses the frozen system
   (tokens.css + main.css). No new colors / no new metaphors.
   ============================================================ */

/* --- shared imagery pattern (self-contained copy of the documented
       "photography as section punctuation" base; see DESIGN_SYSTEM.md §8.1) --- */
.ximg { overflow: hidden; }
.xphoto { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; will-change: transform; }
.xwash, .xscrim { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.xanno { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ximg > .container { position: relative; z-index: 2; }

/* ---------- 01 · HERO (blueprint, dossier framing + cyanotype depth) ---------- */
.cs-hero { min-height: 78svh; display: flex; align-items: center; padding-top: 120px; padding-bottom: var(--sec-pad); }
.cs-hero .container { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--s9); align-items: center; }
.cs-hero h1 { font-size: clamp(2.8rem, 6.4vw, 5.4rem); font-weight: 600; letter-spacing: -0.035em; line-height: 0.94; max-width: 15ch; }
.cs-hero h1 .accent { color: var(--bp-draft); }
.cs-hero .hero-sub { margin-top: var(--s6); max-width: 46ch; font-size: 1.14rem; color: color-mix(in srgb, var(--bp-ink) 82%, transparent); }
.cs-hero .hero-actions { margin-top: var(--s7); display: flex; gap: var(--s4); flex-wrap: wrap; }
/* dossier stamp */
.dossier { border: 1px solid var(--bp-line-soft); background: color-mix(in srgb, var(--bp-surface) 55%, transparent); }
.dossier .drow { display: grid; grid-template-columns: 42% 1fr; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--bp-line-soft); font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; }
.dossier .drow:last-child { border-bottom: 0; }
.dossier .drow .k { color: var(--bp-draft); text-transform: uppercase; }
.dossier .drow .v { color: var(--bp-ink); }
.dossier .drow .v.live { color: var(--cyan-live); }
.dossier .dcap { display: flex; justify-content: space-between; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--bp-line); font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bp-draft); }
.dossier .dcap .tick { color: var(--red); }

/* honest placeholder tag, reusable */
.ph-tag { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 55%, transparent); border-radius: 2px; padding: 2px 6px; }

/* ---------- 02 · ARCHIVE INDEX (vellum, records not cards) ---------- */
.archive { border-top: 1px solid var(--vl-line); }
.arch-row { position: relative; display: grid; grid-template-columns: 60px 1.5fr 1fr 1fr auto; gap: var(--s5); align-items: center; width: 100%; text-align: left; padding: var(--s6) var(--s2); border-bottom: 1px solid var(--vl-line); color: var(--vl-ink); transition: background var(--t-base) var(--e-out), padding-left var(--t-base); }
.arch-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); transform: scaleY(0); transform-origin: center; transition: transform var(--t-base) var(--e-out); }
.arch-row:hover { background: color-mix(in srgb, var(--vl-ink) 4%, transparent); padding-left: var(--s3); }
.arch-row:hover::before { transform: scaleY(1); }
.arch-row .fr { font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--red); }
.arch-row .ti { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.3rem, 2.2vw, 1.9rem); letter-spacing: -0.02em; }
.arch-row .meta { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.04em; color: var(--vl-ink-soft); text-transform: uppercase; }
.arch-row .st { justify-self: end; }
.arch-row .chev { display: none; }

/* ---------- FEATURED REPORT — shared header ---------- */
.report-rev { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; padding-block: var(--s4); }
.report-rev .b { color: var(--bp-ink); }
.report-rev .sep { flex: 1; height: 1px; background: currentColor; opacity: 0.3; }

/* opening meta grid */
.report-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--cb-line); margin-top: var(--s7); }
.report-meta .m { padding: var(--s5) var(--s5) var(--s5) 0; border-right: 1px solid var(--cb-line); }
.report-meta .m:last-child { border-right: 0; }
.report-meta .mk { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bp-draft); }
.report-meta .mv { margin-top: var(--s2); font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; color: var(--cb-bone); }

/* ---------- BEFORE / AFTER ARCHITECTURE (blueprint, signature) ---------- */
.ba-toggle { display: inline-flex; border: 1px solid var(--bp-line); border-radius: 3px; overflow: hidden; margin-bottom: var(--s7); }
.ba-toggle button { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bp-draft); padding: var(--s3) var(--s5); border-right: 1px solid var(--bp-line); transition: color var(--t-micro), background var(--t-micro); }
.ba-toggle button:last-child { border-right: 0; }
.ba-toggle button.active { color: #fff; background: var(--red); }
.ba { display: grid; grid-template-columns: 1fr 320px; gap: var(--s8); align-items: start; }
.ba-stage { position: relative; border: 1px solid var(--bp-line-soft); background: color-mix(in srgb, var(--bp-surface) 45%, transparent); min-height: 420px; }
.ba-stage .stagecap { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: var(--s3) var(--s4); font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bp-draft); border-bottom: 1px solid var(--bp-line-soft); z-index: 2; }
.ba-stage .stagecap .st { color: var(--red); }
.ba-stage.is-after .stagecap .st { color: var(--cyan-live); }
.ba-diagram { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--s7) var(--s5) var(--s5); opacity: 0; visibility: hidden; transition: opacity var(--t-slow) var(--e-out), visibility var(--t-slow); }
.ba-diagram.on { opacity: 1; visibility: visible; }
.ba-diagram svg { width: 100%; height: auto; max-height: 360px; }
.ba-notes { align-self: stretch; }
.ba-notes h4 { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin-bottom: var(--s5); }
.ba-notes .note { display: grid; grid-template-columns: 18px 1fr; gap: var(--s3); padding: var(--s4) 0; border-top: 1px solid var(--bp-line-soft); font-size: 0.96rem; color: color-mix(in srgb, var(--bp-ink) 82%, transparent); }
.ba-notes .note .d { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; }
.ba-notes .note.bad .d { background: var(--red); }
.ba-notes .note.good .d { background: var(--cyan-live); box-shadow: 0 0 8px var(--cyan-live); }
.ba-notes .set { display: none; }
.ba-notes .set.on { display: block; }

/* after-node accents on the shared node grammar */
.ba-diagram .node-added .node-dot { fill: var(--cyan-live); stroke: var(--cyan-live); }
.ba-diagram .node-added .node-ring { stroke: var(--cyan-live); }
.ba-diagram .trace-new { stroke: var(--cyan-live); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--cyan-live) 55%, transparent)); }

/* ---------- INVESTIGATION → INTERVENTION (vellum editorial report body) ---------- */
.report-body { display: grid; grid-template-columns: 200px 1fr; gap: var(--s8); align-items: start; }
.report-body .stage-list { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 0; }
.report-body .stage-list .sl { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--vl-ink-soft); padding: var(--s4) 0; border-top: 1px solid var(--vl-line); }
.report-body .stage-list .sl b { color: var(--red); margin-right: var(--s2); }
.report-body .stage-list .sl-note { margin-top: var(--s6); font-size: 0.9rem; line-height: 1.5; color: color-mix(in srgb, var(--vl-ink) 66%, transparent); max-width: 22ch; }
.report-body .stage-list .sl-note::before { content: ""; display: block; width: 24px; height: 2px; background: var(--red); margin-bottom: var(--s4); }
.report-part { padding-bottom: var(--s8); }
.report-part:last-child { padding-bottom: 0; }
.report-part .pk { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.report-part h3 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -0.02em; color: var(--vl-ink); margin-top: var(--s3); }
.report-part .l1 { margin-top: var(--s4); font-size: 1.1rem; color: var(--vl-ink); max-width: 60ch; }
.report-part .l2 { margin-top: var(--s4); color: color-mix(in srgb, var(--vl-ink) 74%, transparent); max-width: 62ch; }
.report-part .l3 { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2); }
.report-part .l3 .chip { color: var(--vl-ink-soft); border-color: var(--vl-line); }

/* ---------- VALIDATION & OUTCOME (carbon) ---------- */
.vo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s9); align-items: start; }
.validation h4, .outcome h4 { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bp-draft); margin-bottom: var(--s5); }
.validation .vitem { display: grid; grid-template-columns: 22px 1fr; gap: var(--s3); padding: var(--s4) 0; border-top: 1px solid var(--cb-line); color: color-mix(in srgb, var(--cb-bone) 88%, transparent); }
.validation .vitem .chk { color: var(--cyan-live); font-family: var(--f-mono); }
.outcome-fields { display: grid; gap: 0; border-top: 1px solid var(--cb-line); }
.outcome-fields .of { display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: center; padding: var(--s5) 0; border-bottom: 1px solid var(--cb-line); }
.outcome-fields .of .ok { font-family: var(--f-display); font-weight: 500; font-size: 1.1rem; color: var(--cb-bone); }
.outcome-fields .of .ov { font-family: var(--f-mono); font-size: 0.82rem; color: var(--cb-bone-soft); }
.outcome-fields .of .ov.pending { color: var(--red); }

/* ---------- LESSON (vellum, principle) ---------- */
.lesson { max-width: 24ch; }
.lesson .pk { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.lesson blockquote { margin: var(--s5) 0 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 4.2vw, 3.4rem); letter-spacing: -0.03em; line-height: 1.02; color: var(--vl-ink); }

/* ---------- section imagery treatments (locked pattern values) ---------- */
.hero-x { opacity: 0.28; filter: grayscale(0.42) brightness(0.62) contrast(1.08) saturate(1.1);
  -webkit-mask-image: radial-gradient(ellipse 66% 100% at 84% 52%, #000, transparent 66%);
          mask-image: radial-gradient(ellipse 66% 100% at 84% 52%, #000, transparent 66%); }
.hero-xwash { background: linear-gradient(90deg, var(--bp-void) 42%, color-mix(in srgb, var(--bp-void) 30%, transparent) 80%, transparent 100%), linear-gradient(0deg, var(--bp-void) 6%, transparent 55%); }
.open-x { opacity: 0.3; filter: grayscale(0.3) brightness(0.7) contrast(1.06) saturate(1.05);
  -webkit-mask-image: linear-gradient(90deg, transparent 44%, #000 82%); mask-image: linear-gradient(90deg, transparent 44%, #000 82%); }
.open-scrim { background: linear-gradient(90deg, var(--cb-black) 48%, color-mix(in srgb, var(--cb-black) 40%, transparent) 84%, transparent 100%), linear-gradient(0deg, var(--cb-black) 8%, transparent 72%); }
.open-anno { opacity: 0.92; }
#cs-contact.cta .cta-photo { opacity: 0.5; -webkit-mask-image: radial-gradient(ellipse 96% 105% at 50% 45%, #000, transparent 88%); mask-image: radial-gradient(ellipse 96% 105% at 50% 45%, #000, transparent 88%); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .ba { grid-template-columns: 1fr; gap: var(--s7); }
  .report-body { grid-template-columns: 1fr; gap: var(--s6); }
  .report-body .stage-list { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--s4); }
  .report-body .stage-list .sl { border-top: 0; }
  .vo { grid-template-columns: 1fr; gap: var(--s7); }
}
@media (max-width: 900px) {
  .cs-hero .container { grid-template-columns: 1fr; gap: var(--s8); }
  .cs-hero { min-height: auto; padding-top: 112px; }
  .hero-x { opacity: 0.2; -webkit-mask-image: radial-gradient(ellipse 120% 70% at 70% 38%, #000, transparent 88%); mask-image: radial-gradient(ellipse 120% 70% at 70% 38%, #000, transparent 88%); }
  .open-x { opacity: 0.15; }
  .report-meta { grid-template-columns: repeat(2, 1fr); }
  .report-meta .m:nth-child(2) { border-right: 0; }
}
@media (max-width: 760px) {
  .arch-row { grid-template-columns: 44px 1fr auto; gap: var(--s3) var(--s4); padding: var(--s5) var(--s2); }
  .arch-row .meta { grid-column: 2; }
  .arch-row .st { grid-column: 3; grid-row: 1; }
  .open-anno { display: none; }
  .report-meta { grid-template-columns: 1fr 1fr; }
  .ba-stage { min-height: 340px; }
  .rev-seam .mono { display: none; }
  #cs-contact.cta .cta-photo { opacity: 0.38; }
}