@charset "utf-8";
/* SELECTIVE STUDIO — shared design system.
   Spec and rationale live in DESIGN.md at the repo root.
   Every page links this. Never redefine these values locally. */

:root{
  /* ---- Selective Studio design system ---- */
  --font-sans:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Space Mono",ui-monospace,Menlo,monospace;
  /* neueHaas stays first so the real face takes over on your own domain.
     Geist is the stand-in: same neo-grotesque lineage as Neue Haas Grotesk
     Display, and it reaches 900 so the headlines can actually run black. */
  --font-display:"neueHaas","Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-script:"biro","Caveat","Bradley Hand",cursive;

  --color-paper:#fbfbf8;
  --color-card:#fff;
  --color-wash:#f3f2ec;
  --color-ink:#141412;
  --color-muted:#5d5c54;
  --color-soft:#93917f;
  --color-line:#e7e5dc;
  --color-line-strong:#d3d0c4;

  --color-amber:#ffa201;
  --color-green:#08a269;
  --color-indigo:#0d00ed;
  --color-yellow:#f6d201;
  --color-infra:#c12703;
  --color-aqua:#43dee0;
  --color-violet:#883794;
  --color-bronze:#8a5a00;
  --color-teal:#0b7e80;
  --color-green-deep:#056b46;

  --grad-spectrum:linear-gradient(90deg,#883794 0%,#0d00ed 18%,#43dee0 36%,#08a269 54%,#f6d201 72%,#ffa201 86%,#c12703 100%);
  --shadow-card:0 1px 2px #1414120a,0 10px 30px -14px #1414121f;
  --radius-md:.375rem;
  --radius-lg:.5rem;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:.12s;
  --dur-base:.22s;
  --dur-slow:.42s;

  /* ---- roles used by this page ---- */
  --ground:var(--color-paper);
  --surface:var(--color-card);
  --sunk:var(--color-wash);
  --ink:var(--color-ink);
  --ink-2:var(--color-muted);
  --ink-3:var(--color-soft);
  --rule:var(--color-line-strong);
  --rule-2:var(--color-line);
  --accent:var(--color-bronze);        /* accent for TEXT, contrast-safe on paper */
  --accent-bright:var(--color-amber);  /* accent for FILLS and graphics */
  --accent-soft:#fff4de;
  --good:var(--color-green-deep);
  --alert:var(--color-infra);
  --alert-soft:#fbe8e3;
  --focus:var(--color-indigo);

  --f-display:var(--font-display);
  --f-body:var(--font-sans);
  --f-mono:var(--font-mono);

  --measure:56rem;
  --pad:clamp(1.25rem,4vw,2.75rem);
  --pill:999px;
  color-scheme:light;
}
/* Single light theme by design. The source system declares color-scheme:light
   and ships no dark tokens, so the page commits to paper in every context. */

*{box-sizing:border-box}
/* Author styles outrank the UA stylesheet, so a bare `form{display:flex}`
   would otherwise un-hide [hidden] elements. Keep this above everything. */
[hidden]{display:none!important}
body{
  margin:0;
  background-color:var(--ground);
  background-image:radial-gradient(circle,#14141217 1px,transparent 1px);
  background-size:22px 22px;
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--f-display);font-weight:800;letter-spacing:-0.035em;text-wrap:balance;margin:0;line-height:1.02}

/* The signature move: black text on an amber block, never amber text on paper.
   Painted as a sized background band rather than an inline background, so its
   height is controlled in em rather than inherited from the font's content
   area. That is what lets the headline keep a sub-1 line-height without the
   block bleeding into the line above. */
.hl{
  color:var(--color-ink);
  padding:0 .14em;
  background-image:linear-gradient(var(--color-amber),var(--color-amber));
  background-repeat:no-repeat;
  background-size:100% .96em;
  background-position:0 .15em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:var(--f-mono);font-size:.68rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}

/* ---------- shell ---------- */
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--pad)}
.screen{display:none}
.screen.is-on{display:block}

/* ---------- section header (shared by /score/ and /brief/) ----------
   Mono, bronze, wide-tracked, hairline rule, with a § counter on the right.
   The host element must declare counter-reset:sec. */
section.block{margin-top:3.25rem}
section.block > h2{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-size:.7rem;font-family:var(--f-mono);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  padding-bottom:.55rem;border-bottom:1px solid var(--rule);margin-bottom:1.4rem;
  counter-increment:sec;
}
section.block > h2::after{
  content:"\0000A7 " counter(sec,decimal-leading-zero);
  color:var(--ink-3);font-weight:400;letter-spacing:.1em;
}