@import url('./tokens.css');
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text-primary); background: var(--bg-page); font: var(--text-base)/var(--leading-ui) var(--font-sans); overflow-wrap: anywhere; }
a { color: var(--text-link); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
img { display: block; max-width: 100%; height: auto; }
.skip-link { position: fixed; left: var(--space-4); top: -5rem; z-index: 100; padding: var(--space-3); background: var(--bg-page); }
.skip-link:focus { top: var(--space-3); }
.site-header { position: sticky; top: 0; z-index: var(--z-header); min-height: var(--header-height); background: color-mix(in srgb, var(--bg-page) 94%, transparent); border-bottom: 1px solid var(--border-default); backdrop-filter: blur(10px); }
.header-inner,.container { width: min(100%, var(--container-wide)); margin-inline: auto; padding-inline: var(--gutter); }
.header-inner { min-height: var(--header-height); display: flex; align-items: center; gap: var(--space-4); }
.brand { display: flex; align-items: center; color: var(--text-primary); text-decoration: none; margin-right: auto; }
.brand img { width: 132px; height: 33px; object-fit: contain; object-position: left; }
.nav-link,.button { min-height: var(--touch-target); display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2) var(--space-3); }
.nav { display: none; gap: var(--space-1); }
.section-strip { overflow-x: auto; white-space: nowrap; scrollbar-width: thin; border-bottom: 1px solid var(--border-default); }
.section-strip .container { display:flex; }
main { min-height: 65vh; }
.hero { padding-block: var(--space-12); background: var(--bg-subtle); border-bottom: 1px solid var(--border-default); }
.hero-grid { display:grid; gap: var(--space-8); }
.eyebrow { color: var(--text-link); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); }
h1,h2,h3 { line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h1 { font-size: var(--text-3xl); margin-block: var(--space-3); max-width: 20ch; }
h2 { font-size: var(--text-2xl); }
.dek { font-size: var(--text-xl); color: var(--text-secondary); max-width: 55ch; }
section { padding-block: var(--space-10); }
.grid { display: grid; gap: var(--space-6); }
.card { border-top: 3px solid var(--color-signal); padding-top: var(--space-4); }
.card h2,.card h3 { font-size: var(--text-xl); margin-block: var(--space-2); }
.meta { color: var(--text-secondary); font-size: var(--text-sm); }
.article { max-width: var(--content-measure); margin: auto; padding: var(--space-10) var(--gutter); font-size: var(--text-lg); line-height: var(--leading-body); }
.article-header { max-width: var(--content-measure); margin: auto; padding: var(--space-10) var(--gutter) 0; }
.article-header h1 { max-width: none; }
.disclosure,.summary,.callout,.corrections,.sources { padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); margin-block: var(--space-6); }
.callout { border-left: 4px solid var(--color-info); background: var(--bg-subtle); }
.callout.judgment { border-left-color: var(--color-signal); }
.callout.limitation { border-left-color: var(--color-warning); }
.hero-image { width:100%; aspect-ratio:4/1; object-fit:contain; background:var(--bg-subtle); }
.search-form { display:flex; flex-wrap:wrap; gap:var(--space-2); }
input[type=search] { min-height:var(--touch-target); flex:1; min-width:12rem; padding:var(--space-3); font:inherit; border:1px solid var(--border-default); border-radius:var(--radius-sm); }
button { min-height:var(--touch-target); padding:var(--space-2) var(--space-4); background:var(--color-ink-950); color:white; border:0; border-radius:var(--radius-sm); font:inherit; cursor:pointer; }
button.secondary { background:var(--bg-page); color:var(--text-primary); border:1px solid var(--border-default); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid var(--color-info); outline-offset:3px; }
.narrow { max-width:var(--content-measure); }
.feedback-form { display:grid; gap:var(--space-3); }
.feedback-form select,.feedback-form textarea { width:100%; padding:var(--space-3); font:inherit; color:inherit; background:var(--bg-page); border:1px solid var(--border-default); border-radius:var(--radius-sm); }
.search-results { display:grid; gap:var(--space-4); margin-top:var(--space-6); }
.consent { position:fixed; z-index:90; left:var(--space-3); right:var(--space-3); bottom:var(--space-3); max-width:42rem; margin:auto; padding:var(--space-4); background:var(--bg-page); border:1px solid var(--border-default); border-radius:var(--radius-md); box-shadow:var(--shadow-overlay); }
.consent[hidden] { display:none; }
.consent p { margin-top:0; }
.site-footer { background:var(--color-ink-950); color:white; padding-block:var(--space-10); }
.site-footer a { color:#ff8066; }
@media (min-width:48rem) { .nav { display:flex; } .hero-grid { grid-template-columns:2fr 1fr; } .grid { grid-template-columns:repeat(3,1fr); } }
@media print { .site-header,.section-strip,.site-footer { display:none; } a { color:inherit; } }
.mobile-menu { position:relative; }
.mobile-menu nav:not([hidden]) { position:absolute; right:0; top:100%; min-width:12rem; padding:var(--space-2); display:grid; background:var(--bg-page); border:1px solid var(--border-default); box-shadow:var(--shadow-overlay); }
body.menu-open { overflow:hidden; }
@media (min-width:48rem) { .mobile-menu { display:none; } body.menu-open { overflow:auto; } }