/* ==========================================================================
   Gekko — scroll scenes pack (additive)
   Load AFTER css/site.css. Adds only new selectors: .stage--art and .sc-*.
   Light-theme native: white sheets, steel hairlines, ink labels, brand data colours.
   Colours are the existing tokens; SVG presentation attributes cannot read CSS
   variables, so every fill/stroke lives in a class here rather than inline.
   ========================================================================== */

/* wider canvas — site.css caps .stage-vis at 44rem, these scenes are wide plots */
.stage--art .stage-vis{max-width:76rem}
.stage--art .stage-copy{max-width:52rem}
@media (max-width:1080px){ .stage--art .stage-vis{max-width:100%} }

/* bigger type in these scenes — the copy sits under the artwork, so it can carry weight */
.stage--art .step-no{font-size:var(--fs-body);letter-spacing:.01em}
.stage--art .step h3{font-size:clamp(1.75rem,2.7vw,2.375rem);line-height:1.14;margin-bottom:var(--sp-4)}
.stage--art .step p{font-size:clamp(1.125rem,1.4vw,1.3125rem);line-height:1.5;max-width:60ch;
  color:var(--text-body)}
/* site.css styles .step p/small with on-dark tokens; on paper they fall below AA */
.stage--art .step .figs small,.stage--art .step blockquote cite{color:var(--text-muted)}
.stage--art .step blockquote{border-left-color:var(--azure-500);color:var(--text-strong)}
.stage--art .stage-pin{padding-top:calc(var(--nav-h) + var(--sp-4));padding-bottom:88px}
.stage--art .stage-vis{max-height:50vh}
.stage--art .stage-vis svg{max-height:50vh}
.stage--art .step blockquote{font-size:1.125rem;padding-left:var(--sp-5)}
.stage--art .step blockquote cite{font-size:var(--fs-sm)}
.stage--art .step .figs b{font-size:1.375rem}
.stage--art .step .figs small{font-size:var(--fs-sm)}
.stage--art .rail-label,.stage--art .rail-skip{font-size:var(--fs-sm)}
.stage--art .head h2,.section .head h2{}

/* surfaces */
.sc-sheet{fill:#ffffff;stroke:var(--steel-200);stroke-width:1}
.sc-fill{fill:var(--mist);stroke:var(--steel-200);stroke-width:1}
.sc-metal{fill:var(--mist);stroke:var(--steel-300);stroke-width:1}
.sc-pill{fill:var(--indigo-100);stroke:var(--indigo-300);stroke-width:1}
.sc-axis{stroke:rgba(14,19,36,.35);stroke-width:1;fill:none}
.sc-grid{stroke:rgba(14,19,36,.08);stroke-width:1}
.sc-band{fill:rgba(0,132,200,.10)}
.sc-band--warn{fill:rgba(214,69,48,.08)}
.sc-band--ok{fill:rgba(63,157,84,.10)}

/* type inside the drawings */
.sc-lbl{font-family:var(--font-body);font-size:17px;fill:var(--steel-500);letter-spacing:.01em}
.sc-lbl--s{font-size:15px}
.sc-lbl--ink{fill:var(--text-strong);font-weight:600}
.sc-lbl--n{font-family:var(--font-display);font-variant-numeric:tabular-nums;
  fill:var(--indigo-700);font-weight:600}
.sc-lbl--bad{fill:var(--alert-500)}
.sc-lbl--ok{fill:#2f7d42}

/* data series */
.sc-line{fill:none;stroke:var(--azure-600);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.sc-line--ghost{fill:none;stroke:var(--steel-300);stroke-width:1.8;stroke-linejoin:round}
.sc-line--a{fill:none;stroke:var(--indigo-600);stroke-width:2;stroke-linejoin:round}
.sc-line--b{fill:none;stroke:var(--azure-600);stroke-width:2;stroke-linejoin:round}
.sc-line--c{fill:none;stroke:#1f8f66;stroke-width:2;stroke-linejoin:round}
.sc-line--d{fill:none;stroke:#b07d1e;stroke-width:2;stroke-linejoin:round}
.sc-line--sum{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round}
.sc-line--bad{fill:none;stroke:var(--alert-500);stroke-width:2;stroke-linejoin:round}

/* marks */
.sc-dot-a{fill:var(--indigo-600)}
.sc-dot-b{fill:var(--azure-500)}
.sc-dot-c{fill:var(--azure-600)}
.sc-dot-d{fill:#b07d1e}
.sc-bad{fill:var(--alert-500);stroke:none}
.sc-ok{fill:var(--ok-500);stroke:none}
.sc-bar-a{fill:rgba(43,44,130,.75)} .sc-bar-b{fill:rgba(0,132,200,.75)}
.sc-bar-c{fill:rgba(31,143,102,.75)} .sc-bar-d{fill:rgba(176,125,30,.75)}
.sc-bar-track{fill:var(--mist)}

/* the drawings carry labels that are unreadable when the SVG is scaled to a phone.
   They are hidden there — every number in them is repeated in the copy below. */
@media (max-width:760px){ .sc-lbl{display:none} }

/* laptops with little vertical room: the artwork gives up height before the copy does */
@media (max-height:900px){
  .stage--art .stage-vis,.stage--art .stage-vis svg{max-height:44vh}
  .stage--art .step h3{font-size:1.75rem}
  .stage--art .step p{font-size:1.125rem}
}
@media (max-height:760px){
  .stage--art .stage-vis,.stage--art .stage-vis svg{max-height:38vh}
  .stage--art .step p{font-size:1.0625rem;line-height:1.45}
}