/* Mellow components, flattened from the JSX in design-system/components/.
   Same tokens, same values — hover/press states move from React state to CSS. */

/* ---- layout ---- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) 0}

/* ---- MonoLabel ---- */
.label{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-label)}
.label--quiet{color:var(--text-quiet)}

/* ---- NavBar ---- */
.nav{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-5);padding:clamp(20px,5vw,34px) 0 0}
.nav__brand{font:var(--type-label);letter-spacing:.14em;text-transform:uppercase;color:var(--text-body);margin-right:auto;display:inline-flex;align-items:center;min-height:var(--tap-min)}
.nav__brand:hover{color:var(--text-body)}
.nav__link{font:var(--type-nav);color:var(--text-label);display:inline-flex;align-items:center;min-height:var(--tap-min);padding:0 var(--nav-link-px);transition:color var(--micro) var(--ease)}
.nav__link:hover,.nav__link:active{color:var(--accent-text)}

/* ---- ThemeToggle ---- */
.toggle{appearance:none;background:none;cursor:pointer;display:inline-flex;align-items:center;height:var(--control-h-sm);padding:0 var(--tap-px);border-radius:var(--radius);border:var(--border-w) solid var(--border-hairline);color:var(--text-label);font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;transition:color var(--micro) var(--ease),border-color var(--micro) var(--ease),opacity var(--micro) var(--ease)}
.toggle:hover{color:var(--accent-text);border-color:var(--accent-text)}
.toggle:active{opacity:.72}

/* ---- SectionHead ---- */
.sectionhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-4);padding-bottom:var(--space-1)}
.sectionhead h2{font:var(--type-h2)}

/* ---- SiteRow: whole row is the tap target ---- */
.row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:10px var(--space-4);padding:var(--row-y) 0 46px;border-bottom:var(--hairline)}
.row--first{border-top:var(--hairline)}
.row h3{font:var(--type-h3);color:var(--text-body)}
.row h3 a{color:var(--text-body);transition:color var(--micro) var(--ease)}
.row:hover h3 a{color:var(--accent-text)}
.row h3 a::after{content:"";position:absolute;inset:0}
.row .label{grid-column:2;grid-row:1}
.row p{grid-column:1;margin:var(--space-1) 0 0;color:var(--text-muted);max-width:var(--measure-narrow);font:var(--type-body-sm)}

/* ---- Prose: label column stacks under 26ch ---- */
.prose{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6)}
.prose__label{flex:0 0 170px}
.prose__body{flex:1 1 min(100%,32ch);min-width:min(100%,26ch);max-width:var(--measure)}

/* ---- SiteFooter ---- */
.footer{border-top:var(--hairline);padding:48px 0 72px}
.footer__inner{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);align-items:baseline}
.footer__inner .label{margin-right:auto}
.footer__inner a{font:var(--type-nav)}

/* ---- article body ---- */
.article__body p{font:var(--type-body);max-width:var(--measure);margin:0 0 26px}
.article__body h2{font:var(--type-h2);margin:48px 0 18px}
.article__body h3{font:var(--type-h3);margin:40px 0 14px}
.article__body ul,.article__body ol{font:var(--type-body);max-width:var(--measure);margin:0 0 26px;padding-left:1.2em}
.article__body li{margin:0 0 10px}
.article__body blockquote{margin:36px 0;padding-left:24px;border-left:var(--hairline);font:var(--type-lede);font-style:italic;color:var(--text-muted);max-width:var(--measure-narrow)}

/* Data tables — the whole point of this site. Scroll on narrow screens
   rather than letting a wide comparison push the document sideways. */
.table-scroll{overflow-x:auto;margin:0 0 26px;max-width:var(--measure)}
.article__body table{border-collapse:collapse;width:100%;font:var(--type-body-sm)}
.article__body th,.article__body td{text-align:left;padding:12px 18px 12px 0;border-bottom:var(--hairline);vertical-align:baseline}
.article__body th{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-label);white-space:nowrap}
.article__body td:first-child{color:var(--text-body)}
.article__body tbody td{color:var(--text-muted)}

/* Methodology / caveat block — conditions the numbers were taken under. */
.note{border-left:var(--hairline);padding:4px 0 4px 24px;margin:0 0 26px;max-width:var(--measure-narrow);font:var(--type-body-sm);color:var(--text-muted)}

/* Dateline: research goes stale, so every page states its age up front. */
.dateline{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);align-items:baseline}