.site-header { color:var(--color-heading); }
.site-footer { background:var(--color-background); color:var(--color-heading); }
.site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--color-background) 86%, transparent); backdrop-filter: saturate(140%) blur(var(--size-10)); border-bottom: var(--size-1) var(--border-style) var(--color-border); }
@supports not (backdrop-filter: blur(1px)) {
.site-header { background: var(--color-background); }
}
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--space-rem-1-5); min-height: var(--size-68); }
.brand { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: var(--space-rem-0-55); font-family: var(--font-family-display); font-weight: var(--font-weight-medium); font-size: var(--font-size-1-05rem); color: var(--color-heading); letter-spacing: var(--letter-spacing-negative-0-01em); white-space: nowrap; }
.brand:hover { color: var(--color-heading); }
.brand .glyph { width: var(--size-22); height: var(--size-22); flex: none; }
.brand .sub { font-family: var(--font-family-mono); font-size: var(--font-size-62rem); letter-spacing: var(--letter-spacing-16em); text-transform: uppercase; color: var(--color-text-muted); border-left: var(--size-1) var(--border-style) var(--color-border); padding-left: var(--space-rem-0-55); margin-left: var(--space-rem-0-15); }
.nav-links { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: var(--space-rem-1-6); margin: 0; list-style: none; padding: 0; }
.nav-links > li { position: static; margin: 0; }
.nav-item { position: static; }
.nav-link { display: inline-flex; align-items: center; gap: var(--space-rem-0-32); color: var(--color-text-muted); font-size: var(--font-size-92rem); font-weight: var(--font-weight-medium); padding: var(--space-rem-0-4) 0; position: relative; }
.nav-link .caret { width: var(--size-12); height: var(--size-12); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .65; transition: transform .25s ease, opacity .2s ease; }
/* Accent underline: shown on hover, on the active page, and while the mega is open. */
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--length-px-negative-2); height: var(--size-1-5); background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.nav-link:hover, .nav-link[aria-current] { color: var(--color-heading); }
.nav-link:hover::after, .nav-link[aria-current]::after, .has-mega[data-open="true"] .nav-link::after { transform: scaleX(1); }
.has-mega[data-open="true"] .nav-link { color: var(--color-heading); }
.has-mega[data-open="true"] .caret { transform: rotate(180deg); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.nav-link::after { transition: none; }
}
.nav-tools { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--space-rem-0-65); }
.lang-toggle { display: inline-flex; border: var(--size-1) var(--border-style) var(--color-border); border-radius: var(--size-999); overflow: hidden; font-family: var(--font-family-mono); font-size: var(--font-size-68rem); letter-spacing: var(--letter-spacing-06em); }
.lang-toggle a, .lang-toggle button { appearance: none; background: none; border: 0; cursor: pointer; padding: var(--space-rem-0-35) var(--space-rem-0-6); color: var(--color-text-muted); font: inherit; line-height: var(--line-height-art-1); }
.lang-toggle [aria-current="true"] { background: var(--color-heading); color: var(--color-background); }
.icon-btn { appearance: none; cursor: pointer; width: var(--size-38); height: var(--size-38); display: inline-grid; place-items: center; border: var(--size-1) var(--border-style) var(--color-border); border-radius: var(--size-999); background: var(--color-surface); color: var(--color-heading); transition: border-color .2s ease, background-color .2s ease; }
.icon-btn:hover { border-color: var(--color-text-muted); }
.icon-btn svg { width: var(--size-17); height: var(--size-17); }
.theme-toggle .moon { display: none; }
:root[data-theme='dark'] .theme-toggle .sun { display: none; }
:root[data-theme='dark'] .theme-toggle .moon { display: block; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .theme-toggle .sun { display: none; }
:root:not([data-theme]) .theme-toggle .moon { display: block; }
}
.nav-cta { display: inline-flex; }
.menu-btn { display: none; }
/* ---- Mega menu (desktop) — full-width panel dropping from the header edge ----
   Kept as a descendant of its <li> so hover/focus chaining works; open/close is
   JS-driven via [data-open] for a hover-close delay, single-open behaviour,
   Escape, and outside-click (site-chrome.js). --------------------------------- */
.mega { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-surface-elevated); border-top: var(--size-1) var(--border-style) var(--color-border); border-bottom: var(--size-1) var(--border-style) var(--color-border); box-shadow: var(--shadow-elevated); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(var(--length-px-negative-8)); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 90; }
.has-mega[data-open="true"] .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.mega { transition: opacity .2s ease, visibility .2s; transform: none; }
}
.mega-inner { max-width: var(--maxw); margin-inline: auto; padding: var(--space-rem-1-75) var(--gutter) var(--space-rem-2); }
.mega-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-rem-2); padding-bottom: var(--space-rem-1-25); margin-bottom: var(--space-rem-1-25); border-bottom: var(--size-1) var(--border-style) var(--color-border); }
.mega-title { font-family: var(--font-family-display); font-weight: var(--font-weight-medium); font-size: var(--font-size-1-5rem); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-negative-0-01em); color: var(--color-heading); margin: 0; }
.mega-intro { margin: var(--space-rem-0-5) 0 0; color: var(--color-text-muted); font-size: var(--font-size-95rem); line-height: var(--line-height-label); max-width: 54ch; }
.mega-hub { flex: none; display: inline-flex; align-items: center; gap: var(--space-rem-0-45); font-family: var(--font-family-mono); font-size: var(--font-size-7rem); letter-spacing: var(--letter-spacing-08em); text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; }
.mega-hub .arr { transition: transform .2s ease; }
.mega-hub:hover { color: var(--color-accent); }
.mega-hub:hover .arr { transform: translateX(var(--size-3)); }
.mega-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-rem-0-4); }
.mega-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
.mega-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
.mega-grid > li { margin: 0; }
.mega-grid a { display: grid; grid-template-columns: auto 1fr; gap: var(--space-rem-0-85); align-items: start; padding: var(--space-rem-0-85); border-radius: var(--radius); transition: background-color .18s ease; }
.mega-grid a:hover { background: var(--color-surface); }
.mega-ic { width: var(--size-40); height: var(--size-40); flex: none; display: grid; place-items: center; border: var(--size-1) var(--border-style) var(--color-border); border-radius: calc(var(--radius) * 1.5); color: var(--color-text-muted); transition: color .18s ease, border-color .18s ease; }
.mega-ic svg { width: var(--size-19); height: var(--size-19); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mega-grid a:hover .mega-ic { color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); }
.mega-t { display: block; font-family: var(--font-family-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-92rem); line-height: var(--line-height-art-1-3); color: var(--color-heading); }
.mega-d { display: block; margin-top: var(--space-rem-0-28); font-size: var(--font-size-81rem); line-height: var(--line-height-1-45); color: var(--color-text-muted); }
/* ---- Mobile menu + accordions ----------------------------------------------
   NOTE: .m-sub sets display:grid, which overrides the UA [hidden]{display:none}
   rule (author specificity wins) — so the collapsed state MUST be re-asserted
   with .m-sub[hidden]{display:none}, otherwise the accordion never closes. ---- */
.mobile-menu { display: none; border-top: var(--size-1) var(--border-style) var(--color-border); background: var(--color-background); }
.mobile-menu.open { display: block; }
.m-nav { list-style: none; margin: 0; padding: var(--space-rem-0-35) 0; display: grid; gap: 0; }
.m-item { border-bottom: var(--size-1) var(--border-style) var(--color-border); }
.m-item:last-child { border-bottom: 0; }
.m-row { display: flex; align-items: stretch; justify-content: space-between; }
.m-row > a { flex: 1 1 auto; display: block; padding: var(--space-rem-0-9) var(--gutter); color: var(--color-heading); font-weight: var(--font-weight-medium); }
.m-expand { flex: none; appearance: none; background: none; border: 0; border-left: var(--size-1) var(--border-style) var(--color-border); cursor: pointer; padding: 0 calc(var(--gutter) - var(--space-rem-0-35)); color: var(--color-text-muted); display: grid; place-items: center; }
.m-expand .chev { width: var(--size-16); height: var(--size-16); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.m-expand[aria-expanded="true"] .chev { transform: rotate(180deg); }
.m-sub { list-style: none; margin: 0; padding: var(--space-rem-0-1) 0 var(--space-rem-0-6); background: var(--color-surface); display: grid; gap: 0; }
.m-sub[hidden] { display: none; }
.m-sub a { display: block; padding: var(--space-rem-0-6) var(--gutter) var(--space-rem-0-6) calc(var(--gutter) + var(--space-rem-1)); color: var(--color-text-muted); font-size: var(--font-size-92rem); }
.m-sub a:hover { color: var(--color-heading); }
.mobile-menu .lang-toggle { display: inline-flex; margin: var(--space-rem-0-75) var(--gutter) var(--space-rem-0-25); }
.mobile-menu .m-cta { padding: var(--space-rem-1) var(--gutter) var(--space-rem-1-25); }
@media (max-width: 960px) {
.nav-links, .nav-cta, .nav-tools .lang-toggle { display: none; }
.menu-btn { display: inline-grid; }
}
/* =============================================================================
   FOOTER
============================================================================= */
.site-footer { border-top: var(--size-1) var(--border-style) var(--color-border); padding-block: clamp(var(--space-rem-3), 6vw, var(--space-rem-4-5)) var(--space-rem-2); }
.footer-top { display: grid; gap: clamp(var(--space-rem-2), 5vw, var(--space-rem-3)); }
.footer-brand { display: grid; gap: var(--space-rem-1); max-width: 34ch; }
.footer-brand .brand { font-size: var(--font-size-1-15rem); }
.footer-brand p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-9rem); }
.footer-cols { display: grid; gap: var(--space-rem-2); }
.footer-col h4 { font-family: var(--font-family-mono); font-size: var(--font-size-68rem); letter-spacing: var(--letter-spacing-14em); text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 var(--space-rem-1); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-rem-0-6); }
.footer-col a { color: var(--color-text-muted); font-size: var(--font-size-92rem); }
.footer-col a:hover { color: var(--color-heading); }
.footer-bottom { margin-top: clamp(var(--space-rem-2-5), 5vw, var(--space-rem-3-5)); padding-top: var(--space-rem-1-5); border-top: var(--size-1) var(--border-style) var(--color-border); display: flex; flex-wrap: wrap; gap: var(--space-rem-1); align-items: center; justify-content: space-between; }
.footer-bottom .endorse { font-family: var(--font-family-mono); font-size: var(--font-size-68rem); letter-spacing: var(--letter-spacing-08em); color: var(--color-text-muted); }
.footer-bottom .endorse b { color: var(--color-heading); font-weight: var(--font-weight-medium); }
.footer-tools { display: flex; align-items: center; gap: var(--space-rem-0-65); }
/* ---- Responsive ---- */
@media (min-width: 720px) {
.footer-top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr); }
.footer-cols { grid-template-columns: repeat(3, 1fr); }
}