/* Research page only (round 5, evidence). */

/* Lake Charles before/after: two north-up panels on the same grid, rings drawn in SVG over both. */
.lc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 22px); }
.lc-frame { position: relative; line-height: 0; }
.lc-frame img { width: 100%; height: auto; display: block; }
.lc-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.lc-frame .halo { fill: none; stroke: rgba(22, 36, 61, .55); stroke-width: 7; }
.lc-frame .ring { fill: none; stroke: var(--teal); stroke-width: 3.5; stroke-dasharray: 400; stroke-dashoffset: 0; }
.lc-frame .ring.held { stroke: #F9F3E9; }
.lc-frame .no { position: absolute; transform: translate(-50%, -100%); width: 24px; height: 24px; line-height: 24px; border-radius: 50%; text-align: center; font-family: var(--sans); font-weight: 600; font-size: 12px; background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 2px var(--teal-dk); }
.lc-frame .no.held { box-shadow: 0 0 0 2px #F9F3E9, 0 0 0 3px rgba(22, 36, 61, .5); }
.lc-frame .when { position: absolute; left: 8px; top: 8px; line-height: 1; font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; background: rgba(249, 243, 233, .94); color: var(--ink); padding: 5px 7px 4px; }
.lc-key { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 28px; max-width: 1100px; }
.lc-key li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: 16px; line-height: 1.45; }
.lc-key b { font-family: var(--sans); font-size: 12px; font-weight: 600; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%; background: var(--sheet); box-shadow: 0 0 0 2px var(--teal-dk); margin-top: 1px; }
.lc-key li.held b { box-shadow: 0 0 0 2px var(--rule-2); }
.lc-pair.pre .ring { stroke-dashoffset: 400; }
.lc-pair.pre .no, .lc-pair.pre .halo { opacity: 0; }
.lc-pair.on .ring { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.45, .05, .35, 1); }
.lc-pair.on .no, .lc-pair.on .halo { opacity: 1; transition: opacity .5s ease .5s; }
.lc-pair.on .r2 { transition-delay: .5s; } .lc-pair.on .r3 { transition-delay: 1s; }
@media (max-width: 720px) {
  .lc-grid { grid-template-columns: 1fr; }
  .lc-key { grid-template-columns: 1fr; }
}

/* Hazard and component vulnerability. */
.strands { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); margin-bottom: clamp(36px, 5vw, 64px); max-width: 1180px; }
.strands h3 { font-size: 23px; margin: 0 0 12px; }
.strands .k { display: block; font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--teal-ink); margin-bottom: 10px; }
.strands p { margin: 0 0 12px; }
.comp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 3.5vw, 56px); align-items: center; }
.comp-fig { margin: 0; }
.comp-art { position: relative; line-height: 0; }
.comp-art img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }
.comp-art svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.comp-art .lead { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 3 4; }
.comp-art .dot { fill: var(--ink); }
.comp-art .tag { fill: var(--sheet); stroke: var(--ink); stroke-width: 2.5; }
.comp-art .tag.w { stroke: var(--teal-dk); stroke-width: 3; }
.comp-art text { font-family: var(--sans); font-weight: 600; font-size: 26px; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.comp-fig.pre .mk { opacity: 0; }
.comp-fig.on .mk { opacity: 1; transition: opacity .5s ease; }
.comp-fig.on .mk:nth-of-type(2) { transition-delay: .25s; } .comp-fig.on .mk:nth-of-type(3) { transition-delay: .5s; }
.comp-fig.on .mk:nth-of-type(4) { transition-delay: .75s; } .comp-fig.on .mk:nth-of-type(5) { transition-delay: 1s; }
.comp-key { list-style: none; margin: 0; padding: 0; }
.comp-key li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 14px; padding: 14px 0; border-top: 1px solid var(--rule); }
.comp-key li:last-child { border-bottom: 1px solid var(--rule); }
.comp-key b { grid-row: 1 / span 2; font-family: var(--sans); font-weight: 600; font-size: 13px; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; border: 2px solid var(--ink); }
.comp-key li.w b { border-color: var(--teal-dk); }
.comp-key h4 { font-family: var(--serif); font-weight: 500; font-size: 19px; margin: 3px 0 2px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.comp-key p { margin: 0; font-size: 16px; line-height: 1.45; }
.wip { margin-top: clamp(28px, 4vw, 44px); max-width: 70ch; }
@media (prefers-reduced-motion: reduce) { .lc-pair.pre .ring { stroke-dashoffset: 0; } .lc-pair.pre .no, .lc-pair.pre .halo, .comp-fig.pre .mk { opacity: 1; } }
@media (max-width: 960px) { .strands, .comp { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .comp-art .tag { r: 46px; stroke-width: 4; } .comp-art .dot { r: 10px; } .comp-art .lead { stroke-width: 3.5; } .comp-art text { font-size: 48px; } }