/* =====================================================================
   /lattice/ : Model 5, a million sites
   Series colours: NiH = amber, PdD = crimson-ink, first version = neutral ink.
   Field maps: amber = with the main pattern, orange = a quarter cycle off,
   crimson = against it, purple = empty site, brightness = amplitude.
   Every class is prefixed lattice-.
   ===================================================================== */
.page-lattice { --ni: var(--amber); --pd: var(--crimson-ink); --old: var(--ink-2); }

/* ---------- section heads ---------- */
.lattice-head { margin-bottom: clamp(36px, 5vw, 64px); }
.lattice-head .display-2 { text-wrap: balance; }
.lattice-head--split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px clamp(32px, 5vw, 96px); align-items: end; }
.lattice-head--split .lead { margin-top: 0; max-width: 52ch; }
@media (max-width: 900px) { .lattice-head--split { grid-template-columns: 1fr; align-items: start; } }
.lattice-chips { margin-top: 22px; }
.lattice-u { font: 400 11px/1.3 var(--font-mono); color: var(--ink-3); letter-spacing: 0.02em; text-transform: none; }
.lattice-m { text-transform: none; letter-spacing: 0; }
.lattice-h4 { font: 700 var(--fs-h4)/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--ink); }
.lattice-h4 .lattice-u { font-weight: 400; margin-left: 6px; }
.lattice-note { font: 400 12.5px/1.6 var(--font-mono); color: var(--ink-3); margin-top: 10px; max-width: 78ch; }
.lattice-note i { color: var(--ink-2); font-family: var(--font-text); }
.lattice-noscript { margin-top: 12px; color: var(--ink-3); }
.lattice-tag { display: inline-block; font: 500 10px/1 var(--font-mono); color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 50%, transparent); border-radius: 3px; padding: 3px 4px 2px; margin-left: 4px; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: 0.12em; white-space: nowrap; }
.lattice-tag--warn { color: var(--crimson-ink); border-color: color-mix(in srgb, var(--crimson-ink) 55%, transparent); }

/* ---------- hero ---------- */
.lattice-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--bg-deep); min-height: min(calc(100svh - var(--header-h)), 940px); display: flex; }
.lattice-hero--noimg { background: radial-gradient(60% 70% at 72% 55%, rgba(100, 13, 95, 0.55), transparent 70%), radial-gradient(30% 30% at 70% 50%, rgba(235, 91, 0, 0.35), transparent 70%), var(--bg-deep); }
.lattice-hero__media { position: absolute; inset: 0; z-index: -2; }
.lattice-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.lattice-hero__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(18, 18, 18, 0.7) 0%, rgba(18, 18, 18, 0.35) 34%, rgba(18, 18, 18, 0) 56%),
    linear-gradient(180deg, rgba(18, 18, 18, 0.25) 0%, rgba(18, 18, 18, 0) 35%, rgba(18, 18, 18, 0) 72%, var(--bg-deep) 100%); }
.lattice-hero__media .illus-tag { left: auto; right: var(--gutter); bottom: 20px; }
.lattice-hero__inner { position: relative; display: flex; flex-direction: column; padding-top: 28px; padding-bottom: clamp(36px, 4vw, 56px); }
.lattice-hero .crumbs { margin-bottom: 0; }
.lattice-hero__copy { margin-top: clamp(24px, 9vh, 128px); max-width: 1000px; }
.lattice-hero__title { font: 400 clamp(58px, 10.5vw, 180px)/0.86 var(--font-display); letter-spacing: var(--track-display); margin-left: -0.04em; max-width: 7ch; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45); }
.lattice-hero__lead { font: 400 var(--fs-lead)/1.38 var(--font-text); color: var(--ink-2); max-width: 32ch; margin-top: clamp(24px, 3vw, 40px); letter-spacing: -0.012em; text-wrap: pretty; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.6); }
.lattice-hero__lead strong { color: var(--ink); font-weight: 400; }
.lattice-onpage { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: auto; padding-top: clamp(40px, 8vh, 96px); max-width: 720px; }
.lattice-onpage a { font: 400 12.5px/1 var(--font-mono); color: var(--ink-2); text-decoration: none; padding: 9px 0; }
.lattice-onpage a:hover { color: var(--amber); }
@media (max-width: 760px) {
  .lattice-hero { flex-direction: column; min-height: 0; background: var(--bg); }
  .lattice-hero__media { position: relative; order: 2; inset: auto; z-index: 0; aspect-ratio: 16 / 10; margin-top: 8px; }
  .lattice-hero__media::after { background: linear-gradient(180deg, var(--bg) 0%, rgba(25, 25, 25, 0) 26%, rgba(25, 25, 25, 0) 76%, var(--bg) 100%); }
  .lattice-hero__media img { object-position: 72% 50%; }
  .lattice-hero__media .illus-tag { left: var(--gutter); right: auto; bottom: 14px; }
  .lattice-hero__inner { order: 1; padding-bottom: 0; }
  .lattice-hero__copy { margin-top: 28px; }
  .lattice-onpage { order: 3; padding-top: 28px; gap: 0 16px; }
  .lattice-onpage a { padding: 8px 0; }
}

/* ---------- in short ---------- */
.lattice-short__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.lattice-short__p { font: 400 clamp(18px, 1.45vw, 21px)/1.5 var(--font-text); color: var(--ink-2); max-width: 48ch; letter-spacing: -0.008em; }
.lattice-short__p + .lattice-short__p { margin-top: 0.75em; }
.lattice-short__p strong { color: var(--ink); font-weight: 400; }
.lattice-short__p:last-of-type { color: var(--ink); }
.lattice-short .statbar__label { font-size: clamp(16px, 1.5vw, 23px); }
@media (max-width: 980px) { .lattice-short__grid { grid-template-columns: 1fr; } }

/* ---------- how it works ---------- */
.lattice-how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-bottom: clamp(40px, 5vw, 72px); }
.lattice-how__i { border-top: 3px solid var(--c); padding-top: 16px; }
.lattice-how__k { font: 500 12px/1.3 var(--font-mono); color: var(--ink-3); letter-spacing: 0.03em; }
.lattice-how__i p:last-child { font: 400 15.5px/1.6 var(--font-text); color: var(--ink-2); margin-top: 10px; }
@media (max-width: 1100px) { .lattice-how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .lattice-how { grid-template-columns: 1fr; } }

/* ---------- figure frame ---------- */
.lattice-fig { margin: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-deep); overflow: hidden; min-width: 0; }
.band--deep .lattice-fig { background: #0d0d0d; }
.lattice-fig__bar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); font: 500 11.5px/1.3 var(--font-mono); letter-spacing: 0.03em; color: var(--ink-2); text-transform: uppercase; }
.lattice-fig__tag { color: var(--amber); white-space: nowrap; }
.lattice-fig__cap { padding: 13px 16px 15px; border-top: 1px solid var(--line); font: 400 12.5px/1.65 var(--font-mono); color: var(--ink-3); }
.lattice-fig__cap b { color: var(--ink-2); font-weight: 500; }
.lattice-fig__cap .chip { margin: 2px 4px 0 0; }
.lattice-fig__cap i { font-family: var(--font-text); }
.lattice-fig__cap a:not(.chip) { color: var(--ink-2); text-decoration-color: var(--amber); }

/* ---------- field maps ---------- */
.lattice-panel { min-width: 0; }
.lattice-panel__k { font: 400 12.5px/1.4 var(--font-mono); color: var(--ink-3); margin-bottom: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.lattice-panel__k b { color: var(--ink); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.lattice-mat { font: 600 12.5px/1 var(--font-mono); letter-spacing: 0.04em; padding: 4px 6px 3px; border-radius: 3px; color: var(--bg-deep); }
.lattice-mat--ni { background: var(--ni); }
.lattice-mat--pd { background: var(--pd); }
.lattice-map { position: relative; aspect-ratio: var(--ar, 1 / 1); background: #0b0b0b; border-radius: 4px; overflow: hidden; }
.lattice-map canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.lattice-map canvas[hidden] { display: none; }
.no-js .lattice-map canvas { display: none; }
.lattice-map:focus-within { outline: 2px solid var(--amber); outline-offset: 3px; }
.lattice-scale { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 400 11px/1 var(--font-mono); color: var(--ink-3); }
.lattice-scale span { display: block; height: 6px; border: 1px solid var(--ink-2); border-top: 0; flex: none; }
.lattice-panel__nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.lattice-panel__nums div { display: flex; flex-direction: column-reverse; gap: 4px; }
.lattice-panel__nums dt { font: 400 11px/1.35 var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.03em; }
.lattice-panel__nums dd { margin: 0; font: 400 clamp(26px, 2.6vw, 40px)/1 var(--font-display); letter-spacing: -0.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.lattice-panel__nums dd .lattice-tag { font-size: 10px; vertical-align: 0.5em; letter-spacing: 0.04em; }

/* FIG 1: two maps at the same physical scale, key at the side */
.lattice-pair__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 270px); }
.lattice-pair__maps { display: flex; gap: clamp(20px, 3vw, 44px); padding: 18px 16px 20px; align-items: flex-start; min-width: 0; }
.lattice-key-side { padding: 18px 18px 20px; border-left: 1px solid var(--line); display: grid; gap: 16px; align-content: start; font: 400 12px/1.5 var(--font-mono); color: var(--ink-3); }
.lattice-key-side__k { font-weight: 500; color: var(--amber); letter-spacing: 0.03em; }
.lattice-key-side__p { font: 400 14px/1.55 var(--font-text); color: var(--ink-2); }
.lattice-key-side__ramp { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px; }
.lattice-key-side__bar { width: 12px; height: 108px; border-radius: 2px; background: linear-gradient(180deg, var(--amber), var(--orange) 50%, var(--crimson)); }
.lattice-key-side__labels { display: flex; flex-direction: column; justify-content: space-between; }
.lattice-key-side__labels span:nth-child(1) { color: var(--amber-ink); }
.lattice-key-side__labels span:nth-child(2) { color: var(--orange-ink); }
.lattice-key-side__labels span:nth-child(3) { color: var(--crimson-ink); }
.lattice-key-side__row { display: flex; align-items: center; gap: 10px; }
.lattice-key-side__row b { color: var(--ink-2); font-weight: 500; }
.lattice-key-side__hint { color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 1080px) {
  .lattice-pair__body { grid-template-columns: 1fr; }
  .lattice-key-side { border-left: 0; border-top: 1px solid var(--line); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; }
  .lattice-key-side__k, .lattice-key-side__p { grid-column: 1 / -1; }
  .lattice-key-side__bar { height: 72px; }
}
.lattice-pair__maps > .lattice-panel { flex: var(--wa) 1 0; }
.lattice-pair__maps > .lattice-panel--b { flex: var(--wb) 1 0; }
@media (max-width: 760px) {
  .lattice-pair__maps { flex-direction: column; align-items: stretch; }
  .lattice-pair__maps > .lattice-panel, .lattice-pair__maps > .lattice-panel--b { flex: none; }
  .lattice-panel--b .lattice-map, .lattice-panel--b .lattice-scale { width: calc(var(--wb) / var(--wa) * 100%); }
}

/* legend */
.lattice-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 12px 16px; border-top: 1px solid var(--line); font: 400 12px/1.4 var(--font-mono); color: var(--ink-3); }
.lattice-legend__i { display: inline-flex; align-items: center; gap: 10px; }
.lattice-legend__ramp { width: 120px; height: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--amber), var(--orange) 50%, var(--crimson)); flex: none; }
.lattice-legend__two { width: 40px; height: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--amber) 0 50%, var(--crimson) 50% 100%); flex: none; }
.lattice-legend__ends { display: grid; grid-template-columns: repeat(3, auto); gap: 14px; }
.lattice-legend__ends span:nth-child(1) { color: var(--amber-ink); }
.lattice-legend__ends span:nth-child(2) { color: var(--orange-ink); }
.lattice-legend__ends span:nth-child(3) { color: var(--crimson-ink); }
.lattice-legend__bright { width: 56px; height: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--bg-raise-2), var(--amber)); flex: none; }
.lattice-legend__empty { width: 9px; height: 9px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 1px color-mix(in srgb, var(--purple-ink) 60%, transparent); flex: none; }
.lattice-legend b { color: var(--ink-2); font-weight: 500; }
@media (max-width: 600px) { .lattice-legend__ends { grid-template-columns: 1fr; gap: 2px; } }

/* map tooltip */
.lattice-tip { position: fixed; z-index: 300; max-width: 260px; padding: 9px 11px; background: var(--paper-2); color: var(--paper-ink); font: 400 12.5px/1.45 var(--font-mono); border-radius: 4px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.12s, transform 0.12s; }
.lattice-tip.is-on { opacity: 1; transform: none; }
.lattice-tip b { font-weight: 600; }

/* callouts */
.lattice-callouts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(32px, 4vw, 56px); }
.lattice-call { padding: clamp(20px, 2.4vw, 32px); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 0 10px 10px 0; background: var(--bg-raise); }
.lattice-call--box { border-left-color: var(--crimson); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 28px; align-items: start; }
.lattice-call--box .lattice-call__k, .lattice-call--box > p:not(.lattice-call__k) { grid-column: 1; }
.lattice-call__k { font: 500 12px/1.3 var(--font-mono); color: var(--amber); letter-spacing: 0.03em; margin-bottom: 12px; }
.lattice-call--box .lattice-call__k { color: var(--crimson-ink); }
.lattice-call > p:not(.lattice-call__k) { font: 400 16px/1.65 var(--font-text); color: var(--ink-2); }
.lattice-call__pair { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 16px; align-content: start; min-width: 9.5em; }
.lattice-call__pair div { display: flex; flex-direction: column-reverse; gap: 6px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.lattice-call__pair dt { font: 400 11px/1.35 var(--font-mono); color: var(--ink-3); }
.lattice-call__pair dd { margin: 0; font: 400 clamp(36px, 3.6vw, 54px)/0.9 var(--font-display); letter-spacing: var(--track-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.lattice-call__pair div:first-child dd { color: var(--amber); }
@media (max-width: 1000px) { .lattice-callouts { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .lattice-call--box { grid-template-columns: 1fr; }
  .lattice-call__pair { grid-column: 1; grid-row: auto; grid-template-columns: 1fr 1fr; }
}

/* ---------- 06.2 first version ---------- */
.lattice-changed__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.lattice-old__map { padding: 16px 16px 14px; }
.lattice-changed__main, .lattice-changed__side { display: grid; gap: clamp(32px, 4vw, 52px); min-width: 0; }
.lattice-facts { display: grid; gap: 18px; }
.lattice-facts li { border-top: 1px solid var(--line-2); padding-top: 12px; }
.lattice-facts__k { font: 500 12px/1.3 var(--font-mono); color: var(--ink-2); letter-spacing: 0.03em; }
.lattice-facts li:last-child .lattice-facts__k { color: var(--amber); }
.lattice-facts li p:last-child { font: 400 16px/1.6 var(--font-text); color: var(--ink-2); margin-top: 6px; max-width: 60ch; }
.lattice-delta .table-wrap { margin: 14px 0 0; }
.lattice-delta .lattice-note { max-width: none; }
@media (max-width: 980px) { .lattice-changed__grid { grid-template-columns: 1fr; } }

/* ---------- plots (drawn by lattice.js) ---------- */
.lattice-plot { position: relative; min-height: 280px; touch-action: pan-y; }
.lattice-plot--sm { min-height: 260px; }
.lattice-plot--corr { min-height: 220px; }
.no-js .lattice-plot, .no-js .lattice-ctl, .no-js .lattice-ex, .no-js .lattice-legend, .no-js .lattice-scale, .no-js .lattice-map, .no-js .lattice-key-side, .no-js .lattice-readout { display: none; }
.lattice-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.lattice-grid { stroke: var(--line); stroke-width: 1; }
.lattice-axis { stroke: var(--line-2); stroke-width: 1; }
.lattice-tick { font: 400 11px var(--font-mono); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.lattice-axl { font: 500 11px var(--font-mono); fill: var(--ink-2); letter-spacing: 0.03em; }
.lattice-lab { font: 500 11.5px var(--font-mono); fill: var(--ink); pointer-events: none; }
.lattice-lab--sub { font-weight: 400; fill: var(--ink-3); }
.lattice-lab--ni { fill: var(--ni); }
.lattice-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lattice-line--ceil { stroke: var(--ink-3); stroke-width: 1.4; stroke-dasharray: 5 5; }
.lattice-line--old { stroke: var(--old); stroke-width: 1.4; opacity: 0.6; }
.lattice-line--pd { stroke: var(--pd); stroke-width: 1.3; opacity: 0.8; }
.lattice-line--ni { stroke: var(--ni); stroke-width: 2; stroke-dasharray: 6 4; }
.lattice-pt { stroke: var(--bg-deep); stroke-width: 2; pointer-events: none; }
.lattice-pt--old { fill: var(--old); }
.lattice-pt--oldhollow { fill: var(--bg-deep); stroke: var(--old); stroke-width: 2; }
.lattice-pt--new { fill: var(--ni); }
.lattice-pt--ring { fill: none; stroke: var(--ni); stroke-width: 1.5; opacity: 0.6; }
.lattice-pt--pd { fill: var(--pd); }
.lattice-pt--pdhollow { fill: var(--bg-deep); stroke: var(--pd); stroke-width: 2; }
.lattice-hit { fill: transparent; }
.lattice-hit:focus { outline: none; }
.lattice-hit:focus-visible { stroke: var(--amber); stroke-width: 2; }

/* readouts and keys */
.lattice-readout { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 12px 16px; border-top: 1px solid var(--line); }
.lattice-readout__legend { font: 400 12px/1.4 var(--font-mono); color: var(--ink-3); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; }
.lattice-li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.lattice-key { display: inline-block; flex: none; width: 18px; height: 3px; vertical-align: middle; background: var(--ink-2); border-radius: 1px; }
.lattice-key--old { width: 9px; height: 9px; border-radius: 50%; background: var(--old); }
.lattice-key--oldhollow { width: 9px; height: 9px; border-radius: 50%; background: transparent; border: 2px solid var(--old); }
.lattice-key--new { width: 11px; height: 11px; border-radius: 50%; background: var(--ni); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ni) 30%, transparent); }
.lattice-key--dash { height: 2px; background: repeating-linear-gradient(90deg, var(--ink-3) 0 4px, transparent 4px 7px); }
.lattice-key--dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pd); }
.lattice-key--hollow { width: 9px; height: 9px; border-radius: 50%; background: transparent; border: 2px solid var(--pd); }
.lattice-key--pd { background: var(--pd); }
.lattice-key--ni { background: repeating-linear-gradient(90deg, var(--ni) 0 6px, transparent 6px 9px); }

/* ---------- controls ---------- */
.lattice-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.lattice-ctl__g { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lattice-ctl__k { font: 500 11px/1 var(--font-mono); color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; margin-right: 6px; }
.lattice-seg { font: 400 12.5px/1 var(--font-mono); color: var(--ink-2); padding: 9px 11px; min-height: 36px; border: 1px solid var(--line-2); border-radius: 3px; transition: color 0.2s, background 0.2s, border-color 0.2s; }
.lattice-seg:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-3); }
.lattice-seg[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.lattice-seg:disabled { opacity: 0.35; cursor: not-allowed; }
.lattice-seg--sm { min-height: 32px; padding: 7px 9px; font-size: 12px; }
.lattice-ctl__slider { flex: 1 1 320px; gap: 14px; flex-wrap: nowrap; }
.lattice-ctl__out { font: 500 16px/1 var(--font-mono); color: var(--ink); min-width: 3.6em; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- FIG 4 arrangements ---------- */
.lattice-arr__maps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); padding: 18px 16px 20px; }
.lattice-arr [data-show], .lattice-ex [data-show] { display: none; }
.lattice-arr[data-view="on"] [data-show="on"], .lattice-arr[data-view="off"] [data-show="off"] { display: flex; }
.lattice-arr[data-view="on"] .lattice-legend__i[data-show="on"], .lattice-arr[data-view="off"] .lattice-legend__i[data-show="off"] { display: inline-flex; }
.no-js .lattice-arr [data-show] { display: flex; }
.lattice-arr .lattice-panel__nums { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) {
  .lattice-arr__maps { grid-template-columns: 1fr; gap: 28px; }
}

/* findings */
.lattice-find { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin: clamp(36px, 4vw, 56px) 0 clamp(48px, 6vw, 88px); }
.lattice-find__i { border-top: 3px solid var(--c); padding-top: 16px; }
.lattice-find__k { font: 500 12px/1.35 var(--font-mono); color: var(--ink-3); letter-spacing: 0.03em; }
.lattice-find__i p:last-child { font: 400 15.5px/1.6 var(--font-text); color: var(--ink-2); margin-top: 10px; }
@media (max-width: 1100px) { .lattice-find { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .lattice-find { grid-template-columns: 1fr; } }

/* ---------- FIG 5 explorer ---------- */
.lattice-ex__range { position: relative; flex: 1 1 200px; min-width: 160px; display: grid; gap: 4px; }
.lattice-ex__range input { width: 100%; accent-color: var(--amber); height: 28px; cursor: pointer; margin: 0; }
.lattice-ex__ticks { display: flex; justify-content: space-between; font: 400 11px/1 var(--font-mono); color: var(--ink-3); padding: 0 2px; }
.lattice-ex__status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 500 13px/1.4 var(--font-mono); color: var(--ink); }
.lattice-ex__status [hidden] { display: none; }
.lattice-ex__hint { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.lattice-ex__body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 44px); padding: 18px 16px 20px; align-items: start; }
.lattice-ex__view { margin-bottom: 10px; }
.lattice-ex__empty { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; padding: 24px; text-align: center; font: 400 13px/1.55 var(--font-mono); color: var(--ink-3); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 8px, transparent 8px 16px); border: 1px dashed var(--line-2); border-radius: 4px; }
.lattice-ex__empty[hidden] { display: none; }
.lattice-ex__empty p:first-child { color: var(--ink-2); }
.lattice-ex__nums { display: grid; gap: 14px; min-width: 0; }
.lattice-stat { border-top: 1px solid var(--line-2); padding-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4px 20px; align-items: end; }
.lattice-stat__k { grid-column: 1 / -1; font: 400 11.5px/1.3 var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.03em; }
.lattice-stat__v { font: 400 clamp(32px, 3vw, 46px)/1 var(--font-display); letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lattice-stat__v b { font-weight: 400; }
.lattice-stat__v span { font: 400 14px/1 var(--font-mono); color: var(--ink-3); letter-spacing: 0; }
.lattice-strip { position: relative; height: 26px; margin-bottom: 6px; }
.lattice-strip::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-2); }
.lattice-strip__d { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; border: 1.5px solid var(--ink-3); background: var(--bg-deep); transition: left 0.3s var(--ease); }
.lattice-strip__d.is-on { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border: 2px solid var(--bg-deep); background: var(--amber); z-index: 1; box-shadow: 0 0 0 1px var(--amber); }
.lattice-strip__end { position: absolute; top: calc(50% + 9px); font: 400 10px/1 var(--font-mono); color: var(--ink-3); }
.lattice-strip__end--r { right: 0; }
.lattice-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink-3); }
.lattice-dot.is-on { background: var(--amber); border-color: var(--amber); width: 12px; height: 12px; }
.lattice-ex__key { font: 400 12px/1.4 var(--font-mono); color: var(--ink-3); display: flex; gap: 18px; flex-wrap: wrap; }
.lattice-ex__corr { margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--line-2); }
.lattice-ex__corrk { font: 400 11.5px/1.4 var(--font-mono); color: var(--ink-3); letter-spacing: 0.03em; text-transform: uppercase; padding: 10px 0 2px; }
.lattice-ex__corrlegend { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .lattice-strip__d { transition: none; } }
@media (max-width: 880px) { .lattice-ex__body { grid-template-columns: 1fr; } .lattice-ex__mapcol { max-width: 440px; } }
@media (max-width: 520px) {
  .lattice-stat { grid-template-columns: 1fr; }
  .lattice-ctl__slider { flex-wrap: wrap; }
}

/* ---------- FIG 6 + case table ---------- */
.lattice-loading__lower { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 3vw, 48px); margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.lattice-cases .table-wrap { margin: 14px 0 0; }
@media (max-width: 1060px) { .lattice-loading__lower { grid-template-columns: 1fr; } }

/* ---------- tables ---------- */
.lattice-table td { font-variant-numeric: tabular-nums; min-width: 0; }
.lattice-table td:first-child { min-width: 0; }
.lattice-table th { white-space: normal; }
.lattice-table th .lattice-u { color: var(--ink-3); }
.lattice-table th .lattice-m { font-family: var(--font-text); font-size: 13px; font-weight: 400; }
.lattice-table tr.is-key td { color: var(--ink); }
.lattice-table tr.is-key td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.lattice-table tr.is-old td { color: var(--ink-3); }
.lattice-table tr.is-same td { color: var(--ink-3); font-size: 12.5px; }
.lattice-table tr.is-extra td { color: var(--ink-2); }
.lattice-table tr.is-group td { font: 500 11px/1.3 var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-raise); padding-top: 9px; padding-bottom: 9px; }
.lattice-table td .lattice-u { margin-left: 4px; }

/* ---------- 06.4 temperature ---------- */
.lattice-temp__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.lattice-temp__prose { margin-top: 0; }
.lattice-temp__h { max-width: 20ch; }
.lattice-hbars { padding: 8px 16px 18px; }
.lattice-hbars__g { font: 500 12px/1 var(--font-mono); color: var(--ink); letter-spacing: 0.04em; margin: 16px 0 8px; }
.lattice-hbars__row { display: grid; grid-template-columns: minmax(0, 7em) minmax(0, 1fr); align-items: center; gap: 12px; padding: 5px 0; }
.lattice-hbars__l { font: 400 12.5px/1.3 var(--font-mono); color: var(--ink-2); }
.lattice-hbars__track { position: relative; height: 20px; margin-right: 64px; }
.lattice-hbars__bar { position: absolute; left: 0; top: 1px; height: 18px; min-width: 2px; border-radius: 0 4px 4px 0; }
.lattice-hbars__bar--off { background: color-mix(in srgb, var(--pd) 45%, var(--bg-deep)); }
.lattice-hbars__bar--on { background: var(--pd); }
.lattice-hbars__bar--c2 { background: color-mix(in srgb, var(--pd) 55%, var(--bg-deep)); }
.lattice-hbars__bar--c2.is-base { background: var(--pd); }
.lattice-hbars__v { position: absolute; top: 50%; transform: translate(8px, -50%); font: 500 13px/1 var(--font-mono); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lattice-hbars__axis { position: relative; height: 22px; margin: 10px 64px 0 calc(7em + 12px); border-top: 1px solid var(--line-2); }
.lattice-hbars__axis span { position: absolute; top: 6px; transform: translateX(-50%); font: 400 11px/1 var(--font-mono); color: var(--ink-3); white-space: nowrap; }
.lattice-hbars__axis span:last-child { transform: translateX(-70%); }
.lattice-hbars--c2 { padding: 4px 0 6px; margin-top: 18px; }
.lattice-hbars--c2 .lattice-hbars__g { margin-top: 0; text-transform: uppercase; color: var(--ink-3); font-weight: 400; font-size: 11px; line-height: 1.4; }
.lattice-hbars--c2 .lattice-hbars__row { grid-template-columns: minmax(0, 11em) minmax(0, 1fr); }
.lattice-hbars--c2 .lattice-hbars__axis { margin-left: calc(11em + 12px); }
@media (max-width: 980px) { .lattice-temp__grid { grid-template-columns: 1fr; } .lattice-tbars { max-width: 720px; } }
@media (max-width: 520px) {
  .lattice-hbars--c2 .lattice-hbars__row { grid-template-columns: 1fr; gap: 4px; }
  .lattice-hbars--c2 .lattice-hbars__axis { margin-left: 0; }
}

/* ---------- 06.5 assumptions ---------- */
.lattice-assume { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.lattice-assume__i { border-top: 1px solid var(--line-2); padding-top: 18px; min-width: 0; }
.lattice-assume__n { font: 400 clamp(48px, 5vw, 76px)/0.85 var(--font-display); letter-spacing: var(--track-display); color: var(--crimson-ink); }
.lattice-assume__i:nth-child(1) .lattice-assume__n { color: var(--amber); }
.lattice-assume__i:nth-child(2) .lattice-assume__n { color: var(--orange-ink); }
.lattice-assume__h { margin-top: 14px; text-wrap: balance; }
.lattice-assume__i > p:not(.lattice-assume__n) { font: 400 15.5px/1.65 var(--font-text); color: var(--ink-2); margin-top: 14px; }
.lattice-assume__i a { color: var(--ink); text-decoration-color: var(--amber); }
@media (max-width: 1180px) { .lattice-assume { grid-template-columns: 1fr 1fr; } .lattice-assume__i:first-child { grid-column: 1 / -1; } }
@media (max-width: 720px) { .lattice-assume { grid-template-columns: 1fr; } }

/* threshold ruler */
.lattice-ruler { margin: 26px 0 0; padding: 18px 0 0; }
.lattice-ruler__track { position: relative; height: 92px; margin: 0 8px; }
.lattice-ruler__track::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line-2); }
.lattice-ruler__band { position: absolute; bottom: -5px; height: 12px; min-width: 4px; background: var(--amber); border-radius: 2px; }
.lattice-ruler__mk { position: absolute; bottom: 0; display: grid; gap: 3px; font: 400 11px/1.3 var(--font-mono); color: var(--ink-3); padding: 0 0 12px 10px; border-left: 1px solid var(--ink-3); width: max-content; max-width: 15ch; }
.lattice-ruler__mk b { font: 400 22px/1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.lattice-ruler__mk--low { height: 92px; align-content: start; border-left-color: var(--amber); }
.lattice-ruler__mk--low b { color: var(--amber); }
.lattice-ruler__mk--pump { height: 62px; align-content: start; border-left: 2px solid var(--ink); }
.lattice-ruler__mk--high { height: 92px; align-content: start; transform: translateX(-100%); padding: 0 10px 12px 0; border-left: 0; border-right: 1px solid var(--crimson-ink); text-align: right; justify-items: end; }
.lattice-ruler__mk--high b { color: var(--crimson-ink); }
.lattice-ruler__axis { position: relative; height: 22px; margin: 6px 8px 0; }
.lattice-ruler__axis span { position: absolute; top: 4px; transform: translateX(-50%); font: 400 11px/1 var(--font-mono); color: var(--ink-3); }
.lattice-ruler__axis span:first-child { transform: none; }
.lattice-ruler__axis span:last-child { transform: translateX(-100%); }
.lattice-ruler__cap { font: 400 12px/1.6 var(--font-mono); color: var(--ink-3); margin-top: 10px; }

/* ---------- 06.6 detail ---------- */
.lattice-detail__cols { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.lattice-detail__eqs .lattice-h4 { margin-top: 34px; }
.lattice-detail__eqs .lattice-h4:first-child { margin-top: 0; }
.lattice-eq { display: flex; align-items: baseline; gap: 18px; margin-top: 14px; padding: 16px 18px; background: var(--bg-raise); border-left: 2px solid var(--crimson); border-radius: 0 6px 6px 0; overflow-x: auto; }
.lattice-eq__n { font: 500 12px/1 var(--font-mono); color: var(--crimson-ink); flex: none; }
.lattice-eq__f { font: 400 clamp(17px, 1.55vw, 23px)/1.55 var(--font-text); color: var(--ink); letter-spacing: 0.005em; }
.lattice-eq__f sub, .lattice-eq__f sup { font-size: 0.62em; }
.lattice-def { font: 400 15.5px/1.65 var(--font-text); color: var(--ink-2); margin-top: 12px; max-width: 76ch; }
.lattice-def i, .lattice-def b { color: var(--ink); }
.lattice-def b { font-weight: 700; }
.lattice-spec { display: grid; margin-top: 14px; border-top: 1px solid var(--line); }
.lattice-spec div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.lattice-spec dt { font: 500 11.5px/1.5 var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.03em; }
.lattice-spec dd { margin: 0; font: 400 13.5px/1.55 var(--font-mono); color: var(--ink-2); }
.lattice-spec dd i { font-family: var(--font-text); color: var(--ink); }
.lattice-tables { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3vw, 48px) clamp(24px, 3vw, 48px); margin-top: clamp(56px, 6vw, 96px); padding-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); }
.lattice-tables__i { min-width: 0; }
.lattice-tables__i--wide { grid-column: 1 / -1; }
.lattice-tables__i .table-wrap { margin: 14px 0 0; }
@media (max-width: 980px) { .lattice-detail__cols, .lattice-tables { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .lattice-spec div { grid-template-columns: 1fr; gap: 4px; }
  .lattice-eq { padding: 14px 12px; gap: 10px; }
}

/* ---------- next ---------- */
.lattice-next__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.lattice-next__lead { margin-top: 24px; }
@media (max-width: 900px) { .lattice-next__grid { grid-template-columns: 1fr; } }

@media (max-width: 600px) {
  .lattice-li { white-space: normal; }
  .lattice-ruler__track { height: 156px; }
  .lattice-ruler__mk { max-width: 13ch; }
  .lattice-ruler__mk--low, .lattice-ruler__mk--high { height: 156px; }
  .lattice-ruler__mk--pump { height: 86px; }
  .lattice-table th, .lattice-table td { padding: 10px 10px; }
}

/* grid children may shrink below their content */
:is(.lattice-short__grid, .lattice-changed__grid, .lattice-ex__body, .lattice-loading__lower, .lattice-temp__grid, .lattice-detail__cols, .lattice-next__grid, .lattice-head--split, .lattice-callouts) > * { min-width: 0; }