.hero { z-index:2;isolation:isolate;overflow:visible;padding:68px var(--edge-right) 90px var(--edge-left); }
.hero-effects { position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:multiply;opacity:.85; }
.hero-title,.hero-narrative,.mark-field > * { position:relative;z-index:2; }
#flow-canvas,#flow-static { position:absolute;inset:0;width:100%;height:100%;transition:none !important; }
#flow-static { opacity:0; }
.hero-grid { width:min(100%,var(--scene-width));margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);grid-template-rows:auto 1fr;column-gap:clamp(50px,6vw,110px); }
.hero-title { grid-column:1;grid-row:1; }
.byline { margin:0 0 48px;color:var(--muted);font:400 .7rem/1.5 var(--mono); }
.crux-wordmark { display:flex;position:relative;width:max-content;max-width:100%;transform-origin:left center;margin-left:-.045em;color:var(--ink);font:400 clamp(7.8rem,13.6vw,14.5rem)/.76 var(--serif);font-optical-sizing:auto;letter-spacing:-.105em; }
#crux-x { color:var(--pigment);position:relative; }
.hero-narrative { grid-column:1;grid-row:2;align-self:center;padding-top:70px; }
h1 { margin:0 0 28px;font:400 clamp(2.6rem,3.75vw,4.25rem)/1.035 var(--sans);letter-spacing:-.065em; }
.hero-definition { max-width:37ch;margin-bottom:36px;color:var(--ink-soft);font:400 clamp(1.06rem,1.25vw,1.3rem)/1.6 var(--sans); }
.hero-actions { display:flex;flex-wrap:wrap;align-items:center;gap:24px; }
.edition { max-width:22ch;font:400 .65rem/1.5 var(--mono);color:var(--muted); }
.mark-field { grid-column:2;grid-row:1/3;position:relative;min-width:0;padding:30px 32px 20px;background:rgba(249,248,241,.63);border:1px solid rgba(60,64,51,.22);border-radius:3px;box-shadow:0 2px 3px rgba(29,35,25,.035),0 15px 35px -25px rgba(29,35,25,.24),inset 0 1px rgba(255,255,255,.8); }
.mark-field::before { content:"";position:absolute;z-index:-1;inset:4px -5px -6px 5px;background:#e1e2d5;border:1px solid var(--line);border-radius:2px;transform:rotate(.5deg); }
.mark-header { display:flex;justify-content:space-between;gap:18px;align-items:flex-start; }
.mark-header .instrument-label { margin:0 0 10px; }
.mark-header h2 { display:flex;align-items:center;gap:8px;margin:0;font:400 .68rem/1.4 var(--mono);color:var(--muted); }
.state-light { width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--muted); }
.mark-field[data-state="LIVE"] .state-light { background:var(--pigment); }
.mark-field[data-state="LAST_COMPLETE"] .state-light { background:var(--copper); }
.mark-field[data-state="UNAVAILABLE"] .state-light,.mark-field[data-state="WITHHELD"] .state-light { background:var(--danger); }
.sheet-number { color:var(--muted);font:400 .6rem/1.4 var(--mono);padding-top:3px;white-space:nowrap; }
.mark-value { display:block;margin:26px 0 9px;white-space:normal;overflow-wrap:anywhere;color:var(--ink);font:300 clamp(3.4rem,5.75vw,6.4rem)/1.06 var(--sans);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.073em; }
.mark-deltas { font:400 .73rem/1.5 var(--mono);color:var(--pigment-text);font-variant-numeric:tabular-nums; }
.mark-deltas p { display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0; }
.delta-context { color:var(--muted);font-family:var(--sans);font-size:.72rem; }
.mark-freshness { display:flex;gap:8px;flex-wrap:wrap;margin:13px 0 24px;font:400 .7rem/1.5 var(--mono);color:var(--muted); }
.mark-freshness time { color:var(--ink-soft); }
.chart-toolbar { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:14px 0 8px;border-top:1px solid var(--line); }
.chart-caption { font-size:.73rem; }
.unit { color:var(--muted);font:.58rem var(--mono);margin-left:6px; }
.chart-ranges { display:flex;gap:2px; }
.chart-ranges button { min-width:36px;min-height:30px;border:1px solid transparent;border-radius:2px;background:none;font:400 .64rem var(--mono); }
.chart-ranges button[aria-pressed="true"] { border-color:rgba(67,75,46,.18);background:#e1e5d1;color:#414d29; }
.mark-chart { position:relative;height:clamp(250px,21vw,340px);margin:0; }
.truth-canvas { display:block;width:100%;height:100%; }
.chart-inspector { position:absolute;inset:0;cursor:crosshair;touch-action:pan-y pinch-zoom; }
.chart-inspector:focus-visible { outline-offset:-2px; }
.mark-chart figcaption { position:absolute;inset:auto 0 2px;display:flex;justify-content:space-between;gap:14px;pointer-events:none;font:400 .66rem/1.4 var(--mono);color:var(--muted); }
/* This is measured geometry, not an animated element. Reduced-motion's generic
   duration rule must not interpolate its coordinates for even one frame. */
.data-seam { position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;transition:none !important; }
.chart-readout { display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;align-items:center;margin:12px 0 0;min-height:38px;font:400 .66rem/1.5 var(--mono);color:var(--muted); }
.observation-meta { display:grid;gap:5px;min-width:0; }
.observation-meta time { color:var(--ink-soft);overflow-wrap:anywhere; }
.chart-readout strong { color:var(--ink);font:400 clamp(1.1rem,1.4vw,1.4rem)/1.25 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.025em;text-align:right; }
.chart-navigation { display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0;font:400 .65rem/1.4 var(--mono); }
.chart-navigation button { min-height:44px;min-width:44px;padding:6px 0;border:0;background:none;font:inherit; }
.chart-navigation button:not(:disabled):hover { text-decoration:underline;text-underline-offset:4px; }
.chart-navigation button:disabled { opacity:1;color:var(--muted);cursor:default; }
#observation-position { color:var(--muted);font-variant-numeric:tabular-nums; }
#latest-observation { margin-left:auto; }
.mark-footer { display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 14px;border-top:1px solid var(--line);padding-top:13px; }
.mark-footer p { margin:0;font:400 .68rem/1.5 var(--mono);color:var(--muted); }
.refresh-button { border:0;background:transparent;padding:6px 0;flex:0 0 auto;font-size:.7rem;text-decoration:underline;text-underline-offset:3px; }
.chart-footnote { margin:12px 0 0;color:var(--muted);font-size:.7rem;line-height:1.5; }
.section-index { position:absolute;z-index:6;inset:auto 0 0;width:max-content;margin:auto;padding:14px 24px;transform:translateY(50%);display:flex;gap:14px;align-items:center;border:1px solid var(--line);background:var(--void);box-shadow:0 2px 3px rgba(29,35,25,.03);color:var(--ink-soft);font:400 .66rem/1.2 var(--mono);text-decoration:none; }
.section-index span:first-child { color:var(--pigment-text); }