/* SBPI Nightly · Structural Reading · W19-2026
   Honors shuriq-design-system tokens (colors_and_type.css v0.1).
   No shadows, no gradients, no glows. Default radius 0. */

@font-face { font-family: 'PlayfairFallback'; src: local('Playfair Display'), local('Georgia'); font-display: swap; }
@font-face { font-family: 'SourceFallback'; src: local('Source Sans 3'), local('-apple-system'), local('BlinkMacSystemFont'); font-display: swap; }

:root {
  --bg:        #FAF8F5;
  --bg-soft:   #F4F0E8;
  --paper:     #FFFFFF;
  --fg-1:      #1A1A1A;
  --fg-2:      #4A4540;
  --fg-3:      #807870;
  --fg-ink:    #0A0A0A;
  --rule:      #1A1A1A;
  --hairline:  rgba(26,26,26,0.08);
  --hairline-soft: rgba(26,26,26,0.04);

  --accent:    #1E3A6E;
  --critical:  #A62114;
  --warm:      #A65F16;
  --ochre:     #A89917;
  --sage:      #3F6B4E;

  --c1: #A62114; --c2: #4CB014; --c3: #3094A7;
  --c4: #7E00B0; --c5: #A89917; --c6: #A7009C; --c7: #1E3A6E;

  --font-display: 'Playfair Display', PlayfairFallback, Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', SourceFallback, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display-xl: 86px;
  --fs-display:    48px;
  --fs-h2:         36px;
  --fs-h3:         26px;
  --fs-body:       17px;
  --fs-small:      15px;
  --fs-meta:       11px;
  --fs-tag:        10px;

  --measure:        760px;
  --measure-narrow: 660px;
  --measure-wide:  1240px;

  --lh-body:    1.65;
  --lh-display: 1.02;
  --ls-display: -0.025em;
  --ls-mono:     0.12em;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg-1); }
body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--fg-ink); }
code { font-family: var(--font-mono); font-size: 0.92em; background: var(--hairline); padding: 0.05em 0.3em; }
strong { font-weight: 600; color: var(--fg-1); }

/* Brand wordmark — sans-serif inside serif headings */
.brand { font-family: var(--font-body); font-weight: 500; letter-spacing: -0.005em; }
.brand-iq { color: var(--critical); }

.kicker {
  font-family: var(--font-mono); font-size: var(--fs-tag);
  letter-spacing: var(--ls-mono); text-transform: uppercase;
  color: var(--fg-3); display: inline-block; margin-bottom: 12px;
}
.display {
  font-family: var(--font-display); font-size: var(--fs-display-xl);
  line-height: var(--lh-display); letter-spacing: var(--ls-display);
  font-weight: 400; margin: 0 0 24px;
}
h2 {
  font-family: var(--font-display); font-size: var(--fs-display);
  line-height: var(--lh-display); letter-spacing: var(--ls-display);
  font-weight: 400; margin: 0 0 24px;
}
h3 {
  font-family: var(--font-display); font-size: var(--fs-h3);
  line-height: 1.15; letter-spacing: var(--ls-display);
  font-weight: 400; margin: 0 0 12px;
}

.lede { font-size: 21px; max-width: var(--measure); margin: 0 0 16px; color: var(--fg-2); line-height: 1.5; }

/* ─── Masthead ─── */
.masthead { border-bottom: 1px solid var(--rule); padding: 96px 0 64px; background: var(--bg); }
.masthead-inner { max-width: var(--measure-wide); margin: 0 auto; padding: 0 48px; }

.metabar { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 32px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.meta-pair { display: flex; flex-direction: column; gap: 4px; }
.meta-k { font-family: var(--font-mono); font-size: var(--fs-tag); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--fg-3); }
.meta-v { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--fg-1); }

/* ─── Sections ─── */
section.row { padding: 96px 0; border-bottom: 1px solid var(--rule); }
section.row:last-of-type { border-bottom: 0; }
.row-inner { max-width: var(--measure-wide); margin: 0 auto; padding: 0 48px; }
.row-inner.narrow { max-width: var(--measure); }
.row-head { max-width: var(--measure); margin-bottom: 56px; }
.row-head p { font-size: var(--fs-body); color: var(--fg-2); margin: 0; }

/* ─── Movers ladder (Benko stack-rank rig, live data inline) ─── */
.ladder {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.ladder-row {
  display: grid;
  grid-template-columns: 28px 1fr 64px 80px;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-body);
}
.ladder-row:last-child { border-bottom: 0; }
.ladder-row .rank { font-family: var(--font-mono); font-size: 13px; color: var(--fg-3); letter-spacing: var(--ls-mono); }
.ladder-row .who { font-family: var(--font-display); font-size: 20px; line-height: 1.1; color: var(--fg-1); }
.ladder-row .who small { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }
.ladder-row .score { font-family: var(--font-mono); font-size: 18px; color: var(--fg-1); text-align: right; }
.ladder-row .delta { font-family: var(--font-mono); font-size: 13px; text-align: right; letter-spacing: 0.04em; }
.delta.up    { color: var(--sage); }
.delta.down  { color: var(--critical); }
.delta.flat  { color: var(--fg-3); }

.ladder-row .bar {
  grid-column: 1 / -1;
  height: 2px;
  background: var(--fg-1);
  transform-origin: left center;
  transform: scaleX(0);
  margin-top: 10px;
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.in-view .ladder-row .bar { transform: scaleX(var(--w, 0.5)); }

/* Highlight ReelShort + leader */
.ladder-row.lead { background: var(--bg-soft); }
.ladder-row.lead .who { color: var(--critical); }

/* ─── Caption strip shared by all inline-SVG figures ─── */
figure.plate, figure.topo { margin: 0; }
figure.plate figcaption, figure.topo figcaption {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3);
  margin-top: 14px;
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
}

/* ─── Dimension cards (Benko scalex-bar rig, five-dim reading) ─── */
.dim-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  margin-top: 8px;
}
@media (max-width: 980px) { .dim-grid { grid-template-columns: 1fr; } }

.dim-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 36px 32px 28px;
  display: flex; flex-direction: column; gap: 24px;
}
.dim-head { display: flex; flex-direction: column; gap: 12px; }
.dim-label {
  font-family: var(--font-mono); font-size: var(--fs-tag);
  letter-spacing: var(--ls-mono); text-transform: uppercase;
  color: var(--critical);
}
.dim-who {
  font-family: var(--font-display); font-size: 26px; font-weight: 400;
  line-height: 1.15; letter-spacing: var(--ls-display); margin: 0;
}
.dim-body { margin: 0; color: var(--fg-2); font-size: 16px; }

.dim-svg { width: 100%; height: auto; display: block; }
.dim-svg .b {
  transform-origin: 160px 0;
  transform: scaleX(0);
  transition: transform 1000ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.in-view .dim-svg .b { transform: scaleX(var(--v, 0.5)); }
.dim-svg .bar-row text:nth-of-type(2) { opacity: 0; transition: opacity 400ms ease 600ms; }
.in-view .dim-svg .bar-row text:nth-of-type(2) { opacity: 1; }
.dim-svg .comp, .dim-svg .comp-l {
  opacity: 0; transition: opacity 400ms ease 1000ms;
}
.in-view .dim-svg .comp, .in-view .dim-svg .comp-l { opacity: 1; }

/* ─── Momentum grid (delta column + Amazon trajectory) ─── */
.momentum-grid {
  display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start;
  margin-top: 8px;
}
@media (max-width: 980px) { .momentum-grid { grid-template-columns: 1fr; } }

.deltas {
  background: var(--paper); border: 1px solid var(--rule);
  padding: 28px 24px;
}
.deltas .kicker { margin-bottom: 16px; }
.d-row {
  display: grid; grid-template-columns: 1fr 80px 60px;
  align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--hairline);
}
.d-row:last-child { border-bottom: 0; }
.d-row .d-name { font-family: var(--font-body); font-size: 14px; color: var(--fg-1); }
.d-row .d-val { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--fg-3); letter-spacing: 0.04em; }
.d-row.flat .d-val { color: var(--fg-3); }
.d-row.down .d-val, .d-row .d-val:where([data-down]) { color: var(--critical); }

.d-bar {
  height: 8px; display: block; background: transparent;
  position: relative;
}
.d-bar.up::after, .d-bar.down::after {
  content: ''; position: absolute; top: 0; height: 8px;
  background: var(--fg-1);
  transform-origin: left center; transform: scaleX(0);
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i, 0) * 60ms);
}
.d-bar.up::after  { left: 0;    width: 100%; transform-origin: left  center; }
.d-bar.down::after { right: 0;  width: 100%; background: var(--critical); transform-origin: right center; left: auto; }
.in-view .d-bar.up::after, .in-view .d-bar.down::after { transform: scaleX(var(--d, 0.5)); }

/* Trajectory SVG */
.traj-svg { width: 100%; height: auto; display: block; border: 1px solid var(--rule); }
.traj-svg .line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1800ms ease-out;
}
.in-view .traj-svg .line { stroke-dashoffset: 0; }
.traj-svg .line.ref { transition-duration: 1200ms; transition-delay: 200ms; }
.traj-svg .line.amazon { transition-delay: 400ms; }
.traj-svg .points circle {
  opacity: 0; transition: opacity 400ms ease;
}
.in-view .traj-svg .points circle:nth-child(1) { opacity: 1; transition-delay: 600ms; }
.in-view .traj-svg .points circle:nth-child(2) { opacity: 1; transition-delay: 800ms; }
.in-view .traj-svg .points circle:nth-child(3) { opacity: 1; transition-delay: 1000ms; }
.in-view .traj-svg .points circle:nth-child(4) { opacity: 1; transition-delay: 1200ms; }
.in-view .traj-svg .points circle:nth-child(5) { opacity: 1; transition-delay: 1400ms; }
.in-view .traj-svg .points circle:nth-child(6) { opacity: 1; transition-delay: 1700ms; }

.momentum-narrative { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
@media (max-width: 980px) { .momentum-narrative { grid-template-columns: 1fr; gap: 24px; } }
.momentum-narrative p { color: var(--fg-2); margin: 0; font-size: 16px; }

/* ─── Field scatter (composite × content) ─── */
figure.scatter { margin: 0; }
.scatter svg { width: 100%; height: auto; display: block; border: 1px solid var(--rule); background: var(--paper); }
.scatter figcaption {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3);
  margin-top: 14px;
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
}

/* Diagonal + quadrant lines fade in first */
.scatter .diag, .scatter .drop {
  opacity: 0; transition: opacity 600ms ease;
}
.scatter.in-view .diag { opacity: 0.45; transition-delay: 200ms; }
.scatter.in-view .drop { opacity: 0.6; transition-delay: 1500ms; }

/* Dots: pop in with stagger */
.scatter .pt {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 500ms ease;
}
.scatter.in-view .pt { opacity: 1; }

/* Stagger order: smallest tier first (T4), then T3, T2, T1, then named on top */
.scatter g.pt.t4:nth-of-type(1)  { transition-delay: 400ms; }
.scatter g.pt.t4:nth-of-type(2)  { transition-delay: 450ms; }
.scatter g.pt.t4:nth-of-type(3)  { transition-delay: 500ms; }
.scatter g.pt.t4:nth-of-type(4)  { transition-delay: 550ms; }
.scatter g.pt.t4:nth-of-type(5)  { transition-delay: 600ms; }
.scatter g.pt.t3:nth-of-type(1)  { transition-delay: 650ms; }
.scatter g.pt.t3:nth-of-type(2)  { transition-delay: 700ms; }
.scatter g.pt.t2:nth-of-type(1)  { transition-delay: 750ms; }
.scatter g.pt.t2:nth-of-type(2)  { transition-delay: 800ms; }
.scatter g.pt.t2:nth-of-type(3)  { transition-delay: 850ms; }
.scatter g.pt.t2:nth-of-type(4)  { transition-delay: 900ms; }
.scatter g.pt.t2:nth-of-type(5)  { transition-delay: 950ms; }
.scatter g.pt.t2:nth-of-type(6)  { transition-delay: 1000ms; }
.scatter g.pt.named { transition-delay: 1100ms; }
.scatter g.pt.named.amazon-pt { transition-delay: 1200ms; }
.scatter g.pt.named.netflix-pt { transition-delay: 1300ms; }
.scatter g.pt.t1.named:nth-last-of-type(1) { transition-delay: 1450ms; }
.scatter g.pt.t1.named:nth-last-of-type(2) { transition-delay: 1500ms; }
.scatter g.pt.t1.named:nth-last-of-type(3) { transition-delay: 1550ms; }

/* Hover state: lift label visibility on unlabeled dots */
.scatter .pt circle { transition: r 200ms ease, stroke-width 200ms ease; }
.scatter .pt:hover circle { r: 9; stroke: #1A1A1A; stroke-width: 1.5; cursor: help; }
.scatter .pt.named:hover circle { r: 11; }

/* Scatter readings (two-column post-chart explainer) */
.scatter-reads {
  margin-top: 56px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  padding-top: 32px; border-top: 1px solid var(--hairline);
}
@media (max-width: 980px) { .scatter-reads { grid-template-columns: 1fr; gap: 24px; } }
.scatter-reads p { color: var(--fg-2); margin: 0 0 12px; font-size: 16px; }
.scatter-reads strong { color: var(--fg-1); }

/* ─── Forecast strip ─── */
.forecast {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-top: 32px;
  background: var(--paper);
}
@media (max-width: 720px) { .forecast { grid-template-columns: 1fr; } }
.forecast .cell {
  padding: 32px 28px;
  border-right: 1px solid var(--hairline);
}
.forecast .cell:last-child { border-right: 0; }
@media (max-width: 720px) {
  .forecast .cell { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .forecast .cell:last-child { border-bottom: 0; }
}
.forecast .cell .tag {
  font-family: var(--font-mono); font-size: var(--fs-tag); letter-spacing: var(--ls-mono);
  text-transform: uppercase; color: var(--fg-3); display: block; margin-bottom: 12px;
}
.forecast .cell h4 {
  font-family: var(--font-display); font-size: 24px; font-weight: 400;
  letter-spacing: var(--ls-display); margin: 0 0 8px;
}
.forecast .cell h4.up   { color: var(--sage); }
.forecast .cell h4.down { color: var(--critical); }
.forecast .cell h4.hold { color: var(--accent); }
.forecast .cell p { color: var(--fg-2); margin: 0; font-size: 15px; }

/* ─── Provenance / footer ─── */
.prov { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 32px; }
@media (max-width: 720px) { .prov { grid-template-columns: 1fr; } }
.prov ul { padding-left: 0; list-style: none; margin: 0; }
.prov li { padding: 6px 0; font-size: 15px; border-bottom: 1px solid var(--hairline); color: var(--fg-2); }
.prov li:last-child { border-bottom: 0; }

.foot { padding: 48px 0 96px; color: var(--fg-3); font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-mono); border-top: 1px solid var(--rule); }
.foot p { margin: 0; }
.foot .row-inner { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

/* ─── Benko-style opacity-stagger reveal on scroll ─── */
.stagger > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.stagger.in-view > * {
  opacity: 1;
  transform: translateY(0);
}
.stagger.in-view > *:nth-child(1) { transition-delay:   0ms; }
.stagger.in-view > *:nth-child(2) { transition-delay:  80ms; }
.stagger.in-view > *:nth-child(3) { transition-delay: 160ms; }
.stagger.in-view > *:nth-child(4) { transition-delay: 240ms; }
.stagger.in-view > *:nth-child(5) { transition-delay: 320ms; }
.stagger.in-view > *:nth-child(6) { transition-delay: 400ms; }
.stagger.in-view > *:nth-child(7) { transition-delay: 480ms; }
.stagger.in-view > *:nth-child(8) { transition-delay: 560ms; }

/* Mobile */
@media (max-width: 720px) {
  .masthead { padding: 64px 0 40px; }
  .masthead-inner, .row-inner { padding: 0 24px; }
  .display { font-size: 52px; }
  h2 { font-size: 32px; }
  section.row { padding: 64px 0; }
  .ladder-row { grid-template-columns: 24px 1fr 56px 56px; gap: 10px; padding: 12px 14px; }
  .ladder-row .who { font-size: 17px; }
  .ladder-row .score { font-size: 16px; }
}