/* Instrument Serif ships weight 400 only. Every rule below that uses it pins
   font-weight:400 explicitly, because h1 and h2 default to 700 and the browser
   then SYNTHESISES bold: the glyphs smear into a heavy slab that does not match
   the rest of the site. signals.html always set this in its own CSS; hub.css did
   not, so every page styled by hub.css rendered faux-bold headings. */
/* HR&P Intel Hub — shared design system (v1)
   The single source of visual truth. New pages link this instead of copying inline CSS.
   Migration target for the existing hand-coded pages (Phase 2). */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* design tokens live in /styles/tokens.css — the single source, linked before this file on every page */
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:clamp(15px,1.1vw,17px);line-height:1.7;overflow-x:hidden}
::selection{background:var(--sage);color:var(--text)}
a{color:var(--sage-dim);text-decoration:none;border-bottom:1px solid var(--sage-faint);transition:all 0.2s}
a:hover{color:var(--sage);border-bottom-color:var(--sage)}

/* nav */
nav{position:sticky;top:0;z-index:100;background:oklch(0.982 0.004 90 / 0.90);backdrop-filter:blur(20px) saturate(1.2);border-bottom:1px solid var(--border);padding:0 clamp(24px,4vw,64px)}
.nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:56px}
.nav-brand{font-family:'Instrument Serif',serif;font-weight:400;font-size:18px;color:var(--text);letter-spacing:-0.02em;border:none!important}
.nav-brand span{color:var(--sage)}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{font-size:13px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-secondary);border:none!important;transition:color 0.2s}
.nav-links a:hover,.nav-links a.active{color:var(--sage)}
@media(max-width:768px){.nav-links{display:none}}

/* hero */
.hero{padding:clamp(60px,10vh,120px) clamp(24px,4vw,64px) clamp(28px,4vh,56px);max-width:var(--maxw);margin:0 auto}
.hero-eyebrow{font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--sage-muted);margin-bottom:24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero-meta-inline{display:flex;gap:20px;font-size:12px;color:var(--text-dim);letter-spacing:0.04em}
.hero h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(38px,5vw,72px);line-height:1.05;letter-spacing:-0.03em;max-width:900px}
.hero h1 em{font-style:italic;color:var(--sage)}
.hero-rule{width:80px;height:2px;background:var(--sage);margin-top:32px;border:none}

/* so-what */
.so-what{max-width:var(--maxw);margin:0 auto;padding:0 clamp(24px,4vw,64px)}
.so-what-inner{background:linear-gradient(135deg,var(--sage-faint),var(--bg-raised));border:1px solid var(--sage-faint);border-radius:6px;padding:clamp(28px,3vw,44px);position:relative;overflow:hidden}
.so-what-inner::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--sage);border-radius:4px 0 0 4px}
.so-what-label{font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--sage);margin-bottom:12px}
.so-what p{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(19px,2.1vw,26px);line-height:1.45;letter-spacing:-0.01em}

/* sections */
section{padding:clamp(52px,7vh,88px) clamp(24px,4vw,64px);max-width:var(--maxw);margin:0 auto}
section+section{border-top:1px solid var(--border)}
/* When the first section sits directly under the hero, collapse the double gap:
   the hero already drew its rule, so the section's own top padding + border is dead
   space (up to ~140px of it). Matches the hypotheses-page fix of 2026-08-07,
   promoted here so every page gets it. Conditional via :has so hero-then-box pages
   (index, talent) keep their spacing. */
header.hero:has(+section){padding-bottom:0}
header.hero+section{padding-top:24px;border-top:none}
.section-label{font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--sage-muted);margin-bottom:12px}
.section-title{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(26px,3vw,40px);letter-spacing:-0.02em;line-height:1.15;margin-bottom:14px}
.section-intro{color:var(--text-secondary);margin-bottom:28px;max-width:760px}

/* stat tiles / scoreboard */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin:8px 0 0}
.stat-tile{padding:22px;background:var(--bg-raised);border:1px solid var(--border);border-radius:4px;display:block;text-decoration:none;color:inherit;transition:all .2s}
.stat-tile:hover{border-color:var(--sage-muted);transform:translateY(-2px)}
.stat-value{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(30px,3vw,44px);letter-spacing:-0.02em;color:var(--sage);line-height:1}
.stat-label{font-size:13px;color:var(--text-dim);margin-top:8px;line-height:1.4}

/* insight */
.insight{background:var(--bg-raised);border:1px solid var(--border);border-radius:4px;padding:clamp(22px,3vw,36px);margin:24px 0}
.insight-label{font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--sage);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.insight-label::before{content:'';width:6px;height:6px;background:var(--sage);border-radius:50%}
.insight p{color:var(--text-secondary);line-height:1.8}.insight strong{color:var(--text)}

/* tables */
.table-wrap{overflow-x:auto;margin:8px 0 0}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;padding:12px 16px;font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--sage-muted);border-bottom:2px solid var(--border);white-space:nowrap}
td{padding:16px;border-bottom:1px solid var(--border);color:var(--text-secondary);vertical-align:top;line-height:1.6}
td strong{color:var(--text)}
tbody tr:hover td{background:var(--bg)}

/* status pills (reserved status palette + neutral) */
.pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:4px 11px;border-radius:12px;white-space:nowrap}
.pill.good,.pill.confirmed,.pill.holds,.pill.expand{background:var(--sage-faint);color:var(--sage)}
.pill.warn,.pill.softening,.pill.hold{background:color-mix(in oklch,var(--important) 18%,transparent);color:var(--important)}
.pill.bad,.pill.refuted,.pill.trim{background:color-mix(in oklch,var(--critical) 18%,transparent);color:var(--critical)}
.pill.info,.pill.pending,.pill.mixed{background:color-mix(in oklch,var(--info) 16%,transparent);color:var(--info)}
.pill.neutral{background:var(--bg-raised-2);color:var(--text-secondary)}

/* filter pills */
.pillbar{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 24px}
.fpill{font-size:12px;font-weight:600;letter-spacing:0.02em;padding:6px 14px;border-radius:16px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);cursor:pointer;transition:all .18s}
.fpill:hover{border-color:var(--sage-muted);color:var(--text)}
.fpill.on{background:var(--sage-faint);border-color:var(--sage-muted);color:var(--sage)}

/* footer + utilities */
footer{padding:60px clamp(24px,4vw,64px) 40px;max-width:var(--maxw);margin:0 auto;border-top:1px solid var(--border)}
.footer-text{font-size:13px;color:var(--text-dim)}
.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease-out,transform 0.6s ease-out}
.reveal.visible{opacity:1;transform:translateY(0)}
.progress{position:fixed;top:0;left:0;height:2px;background:var(--sage);z-index:200;width:0%}
.note{font-size:13px;color:var(--text-dim);line-height:1.7;background:var(--bg-raised);border:1px solid var(--border);border-radius:4px;padding:20px 24px;margin-top:24px}