/* modularWEIGHTS design system
 *
 * Two zones, one house:
 *   .zone-spec   reference material - catalogue, datasheets, the probe.
 *                Cool ground, IBM Plex Sans display. Sober where sobriety
 *                is the point: these pages are cited, not read for pleasure.
 *   .zone-guide  how-tos, numbered modules. Warm paper, Bricolage Grotesque.
 *                Loud where enthusiasm helps someone finish a tutorial.
 *
 * ONE accent across both. The direction board showed these zones in blue and
 * red respectively, but two accents read as two brands. Ground and display
 * face carry the difference instead; #0047FF is the family counterpart to
 * modularCISO's #FF3B00.
 *
 * --warn is semantic, never decorative: it marks a measurement that escapes
 * its noise band. Two of forty-seven do.
 */

/* ---- shared tokens: light ---- */
:root {
  --accent:      #0047FF;
  --accent-soft: #0047FF14;
  --warn:        #B23A00;

  --page:   #FFFFFF;
  --sunk:   #F7F7F4;
  --ink:    #121212;
  --muted:  #6E6E68;
  --line:   #DEDED8;
  --track:  #EAEAE4;

  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: var(--sans);
  --loud:    'Bricolage Grotesque', var(--sans);

  --s1: 6px;  --s2: 12px; --s3: 18px; --s4: 28px; --s5: 44px; --s6: 72px;
  --measure: 66ch;
}

/* ---- shared tokens: dark ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #5B8CFF; --accent-soft: #5B8CFF1F; --warn: #FF8A4D;
    --page: #0C0C0B; --sunk: #151513; --ink: #EDEDE7;
    --muted: #8E8E86; --line: #2A2A26; --track: #201F1D;
  }
}
:root[data-theme="dark"] {
  --accent: #5B8CFF; --accent-soft: #5B8CFF1F; --warn: #FF8A4D;
  --page: #0C0C0B; --sunk: #151513; --ink: #EDEDE7;
  --muted: #8E8E86; --line: #2A2A26; --track: #201F1D;
}

/* ---- zones ---- */
.zone-guide {
  --page: #FFFDF7;
  --sunk: #FFF6E0;
  --ink:  #17150F;
  --muted:#6F6A5C;
  --line: #E8DFC8;
  --track:#F1E8D0;
  --display: var(--loud);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .zone-guide {
    --page: #100F0C; --sunk: #191710; --ink: #F0EADA;
    --muted:#918B78; --line: #2E2A1F; --track: #241F16;
  }
}
:root[data-theme="dark"] .zone-guide {
  --page: #100F0C; --sunk: #191710; --ink: #F0EADA;
  --muted:#918B78; --line: #2E2A1F; --track: #241F16;
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: var(--mono); font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; padding-block: var(--s5) var(--s6); }
.prose { max-width: var(--measure); }
a { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; letter-spacing: -.02em; }
h1 { font-size: clamp(30px, 5.4vw, 48px); line-height: 1.05; font-weight: 600; }
h2 { font-size: 22px; line-height: 1.2;  font-weight: 600; }
h3 { font-size: 16px; line-height: 1.3;  font-weight: 600; }
.zone-guide h1, .zone-guide h2 { font-weight: 800; letter-spacing: -.03em; }
p { margin: 0; }

.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
}
.lede { color: var(--muted); margin-top: var(--s2); }

/* ---- masthead ---- */
.mast { border-bottom: 3px solid var(--ink); padding-bottom: var(--s3);
        display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
        align-items: flex-end; justify-content: space-between; }
.counts { display: flex; gap: var(--s4); flex-wrap: wrap; }
.counts div { display: flex; flex-direction: column; gap: 2px; }
.counts b { font-family: var(--display); font-size: 26px; font-weight: 600;
            line-height: 1; font-variant-numeric: tabular-nums; }
.counts span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---- the meter: the site's core device ----
 * A track, a noise band around the base score, a tick for the original and a
 * dot for the abliterated model. Dot inside the band => nothing measurable
 * happened. That is the argument the whole site makes, so it gets the care.
 */
.meter { display: grid; grid-template-columns: 74px 1fr 78px; gap: var(--s2);
         align-items: center; font-size: 10.5px; color: var(--muted); }
.meter .lbl { letter-spacing: .09em; text-transform: uppercase; }
.track { position: relative; height: 10px; background: var(--track); }
.band  { position: absolute; top: 0; bottom: 0; background: var(--accent-soft);
         border-inline: 1px solid var(--accent-soft); }
.base  { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--muted); }
.abl   { position: absolute; top: 50%; width: 8px; height: 8px;
         margin: -4px 0 0 -4px; border-radius: 50%; background: var(--accent); }
.abl.out { background: var(--warn); }
.meter .val { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.meter .val .d { color: var(--muted); }
.meter .val .d.out { color: var(--warn); font-weight: 600; }

/* ---- datasheet rows ---- */
.rows { border-top: 1px solid var(--line); margin-top: var(--s4); }
.row { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(300px, 1.5fr);
       gap: var(--s2) var(--s5); padding-block: var(--s3);
       border-bottom: 1px solid var(--line); align-items: start; }
.row .id h3 { font-family: var(--display); }
.row .specs { font-size: 11px; color: var(--muted); margin-top: var(--s1);
              font-variant-numeric: tabular-nums; }
.row .role { font-size: 12.5px; color: var(--muted); margin-top: var(--s2); max-width: 46ch; }
.meters { display: flex; flex-direction: column; gap: var(--s1); }

.pill { font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
        text-transform: uppercase; border: 1px solid var(--line);
        padding: 2px 7px; color: var(--muted); white-space: nowrap; }
.pill.out { border-color: var(--warn); color: var(--warn); }

/* ---- unreachable: quieter, but not hidden ---- */
.dim { background: var(--sunk); border: 1px solid var(--line);
       margin-top: var(--s4); padding: var(--s3) var(--s4); }
.dim .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
             gap: var(--s2) var(--s4); margin-top: var(--s2); }
.dim .m { font-size: 12.5px; }
.dim .m b { font-family: var(--display); font-weight: 600; display: block; }
.dim .m span { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ---- module cards (guides zone) ---- */
.modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
           gap: var(--s3); margin-top: var(--s4); }
.module { border: 1px solid var(--line); background: var(--sunk);
          padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.module .n { font-family: var(--loud); font-size: 34px; font-weight: 800;
             line-height: 1; color: var(--accent); letter-spacing: -.04em; }
.module p { font-size: 12.5px; color: var(--muted); }

footer { border-top: 1px solid var(--line); margin-top: var(--s6); padding-top: var(--s3);
         font-size: 11px; letter-spacing: .07em; color: var(--muted);
         display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); justify-content: space-between; }

@media (max-width: 720px) {
  .row { grid-template-columns: 1fr; }
  .meter { grid-template-columns: 62px 1fr 70px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}