/* --site-nav-h is 68 px at every width (contract v4 asked 77 / 68): site-kit.css sets the nav to 68 px, so
   the real nav bottom is 68 px; chapter scroll margins use this one variable. */
:root{--bg:var(--bg-base);--pad:clamp(20px,4.2vw,76px);--site-nav-h:68px}
*{box-sizing:border-box}
html{color-scheme:dark;background:var(--bg-base);scroll-behavior:smooth}
html[data-theme="light"]{color-scheme:light}
body{margin:0;background:var(--bg-base);color:var(--text-primary);font-family:var(--font-sans);min-width:320px;-webkit-font-smoothing:antialiased}
button,a{font:inherit}
a{color:inherit}
.skip{position:fixed;left:16px;top:12px;z-index:9999;transform:translateY(-160%);padding:10px 14px;background:var(--text);color:var(--bg)}
.skip:focus{transform:none}
.site-nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;min-height:var(--site-nav-h);padding:14px max(24px,calc((100vw - 1600px)/2));gap:32px;border-bottom:1px solid var(--border-soft);background:color-mix(in srgb,var(--bg-base) 96%,transparent)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;letter-spacing:.08em}
.desktop-nav{display:flex;align-items:center;margin-left:auto}
.desktop-nav a,.nav-login{text-decoration:none}
.nav-actions{display:flex;align-items:center;gap:16px}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:52px;padding:16px 22px;background:var(--cta);color:var(--cta-ink);border:1px solid transparent;border-radius:4px;font:600 15px/1.2 var(--font-sans);text-decoration:none;cursor:pointer}.button:hover{background:var(--cta-hover)}.button-small{min-height:44px;padding:12px 16px;font-size:14px;gap:16px}.brand>span{font:700 25px/1 "Saira Condensed",sans-serif;letter-spacing:.025em}.brand img{display:block}.desktop-nav{gap:28px}.nav-actions{flex-shrink:0}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.theme-toggle,.menu-toggle{border:0;background:transparent;color:inherit;cursor:pointer}
.theme-toggle{width:38px;height:38px;padding:8px}.theme-toggle svg{width:100%;height:100%}
.menu-toggle{display:none}.mobile-menu[hidden]{display:none}
.kit-footer button{border:0;padding:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
@media(max-width:1080px){.desktop-nav{gap:18px}.nav-login{display:none}.site-nav{gap:20px}}
@media(max-width:1050px){.site-nav{min-height:var(--site-nav-h);padding-inline:18px}.desktop-nav,.nav-login,.nav-actions>.button{display:none}.nav-actions{margin-left:auto}.menu-toggle{display:inline-flex;gap:8px;min-height:44px;align-items:center}.mobile-menu{position:absolute;inset:100% 0 auto;display:flex;flex-direction:column;gap:18px;padding:24px;background:var(--bg-base);border-bottom:1px solid var(--border-soft)}.mobile-menu a{text-decoration:none}}