/* ============================================================================
   base.css — reset, type, focus, layout primitives, the numeric rule (rule 4),
   the spectrum divider, reduced motion. Foundations only; reusable components
   live in components.css, the app shell in app.css.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--gray-700);
    line-height: 1.65;
    background: var(--paper);
}

img { max-width: 100%; height: auto; }

a { color: var(--violet); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Type — Archivo tightens via its width axis as it grows (design system §Type) */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: 1.06;
    font-weight: 700;
    font-variation-settings: 'wdth' 112;
    margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.1rem;  font-variation-settings: 'wdth' 105; letter-spacing: -0.005em; }
h4 { font-size: 0.8rem;  font-variation-settings: 'wdth' 100; }
.lede { font-size: 1.1rem; color: var(--gray-600); max-width: 60ch; }

/* Layout primitives */
/* Phase F: Bootstrap CSS is unlinked, so `.container` lands. The shell itself
   uses `.content` (app.css); this is the documented centring primitive for any
   standalone / non-shell page. */
.container {
    max-width: var(--max-width);
    margin-inline: auto;
    padding: 0 1.5rem;
}

.section-head {
    display: grid;
    grid-template-columns: var(--label-col) 1fr;   /* 190px 1fr */
    gap: 2.5rem;
    margin-bottom: 3.5rem;
}

/* Mono utility register — the surface eyebrow (rule 5 swatch before the label) */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--violet);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.eyebrow::before {
    content: '';
    width: 9px; height: 9px; flex: none;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.3),
                0 0 12px rgba(var(--accent-rgb), 0.55);
}

/* The 400–700nm range the device reads — a boundary marker, not a separator. */
.spectral-rule { height: 3px; background: var(--spectrum); border: 0; margin: 0; }

/* Spec rows — label/value pairs. .spec-row-list is the <dl> wrapper used for the
   colour-values cell (§10.4 step 3, D-18): the rows carry the hairlines, so the
   list only kills the default <dl> margin and the last separator. */
.spec-row-list { margin: 0; }
.spec-row-list .spec-row { padding: 0.3rem 0; }
.spec-row-list .spec-row:last-child { border-bottom: 0; }
.spec-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--rule);
}
.spec-row dt { font-size: 0.88rem; color: var(--gray-600); margin: 0; }
.spec-row dd { font-size: 0.88rem; font-weight: 500; color: var(--ink);
               text-align: right; margin: 0; }

/* Rule 4 — the one place every figure becomes mono + tabular. */
.num, .readout, .spec-row dd, .stat strong, .step-index,
.delta-value, .lab-figure, .density-chip, .cell-num,
td.cell-num, th.cell-num, .money, .serial, .timestamp {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* Focus — violet on light, cyan on dark ground (design system §Focus) */
:focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}
.section-dark:focus-visible,
.booth:focus-visible { outline-color: var(--cyan); }

/* Accessibility + responsive helpers */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Skip link (D-27) — the first tabbable element; off-canvas until focused. */
.skip-link {
    /* Parked off-screen with `top`, not `transform`: the §16.13 reduced-motion
       probe counts any non-`none` transform, and a purely positional one would
       read as motion that never resolved. Same slide, same duration. */
    position: absolute; left: 0.5rem; top: -4rem; z-index: 80;
    padding: 0.6rem 1rem;
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff; background: var(--ink);
    border-radius: var(--radius-sm); text-decoration: none;
    transition: top var(--t-fast);
}
.skip-link:focus-visible { top: 0.5rem; text-decoration: none; }

/* D-13: `is-hidden-sm` is DELETED, not extended. It removed 11 columns below
   640px — the tables still overflowed by 424px, so it cost data without buying a
   layout. §9.3's card layout (components.css) is what makes a table fit a phone;
   nothing is hidden on mobile. The class survives in a few unmigrated admin
   templates and is now inert. */

/* Reduced motion — finished states declared outright (design system §Motion) */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .reveal, .reveal .stagger-items { opacity: 1; transform: none; }
}