/* Shared header + column layout. Linked by every page so the header sits at identical pixels everywhere.
   Pages must define: --bg --bgA --ink --inkA --mute --r --sans --mono */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable}
/* The header band below spans 100vw, which counts a classic scrollbar; clip the sideways overflow. On body, not html, so the scroll lock (body overflow:hidden) still reaches the viewport. */
body{overflow-x:clip}
@supports (font:-apple-system-body){html{font:-apple-system-body}}
.wrap{max-width:640px;margin:0 auto}
.hd{position:sticky;top:0;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:28px 0 20px;font:.812rem/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.hd::before{content:"";position:absolute;z-index:-1;left:calc(50% - 50vw);right:calc(50% - 50vw);top:0;bottom:-34px;background:rgba(var(--bgA),.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 20%,rgba(0,0,0,.85) 38%,rgba(0,0,0,.55) 58%,rgba(0,0,0,.22) 78%,rgba(0,0,0,.06) 92%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 20%,rgba(0,0,0,.85) 38%,rgba(0,0,0,.55) 58%,rgba(0,0,0,.22) 78%,rgba(0,0,0,.06) 92%,transparent 100%);pointer-events:none}
.hd a{color:inherit;text-decoration:none}
.hd .brand{display:flex;gap:10px;align-items:center;color:var(--ink);font-family:var(--sans);font-size:clamp(.9rem,4.2vw,1rem);font-weight:600;letter-spacing:-.01em;text-transform:none;white-space:nowrap}
.hd .side{display:flex;align-items:center;gap:4px;white-space:nowrap}
.hd .log{margin-left:8px;padding:9px 16px;border:0;border-radius:var(--r);background:var(--ink);color:var(--bg);font:inherit;font-size:.812rem;line-height:1.6;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.hd .log:hover{opacity:.88}
.hd .ico{display:grid;place-items:center;width:36px;height:36px;margin-right:-8px;border-radius:50%;color:var(--mute)}
.hd .ico:hover{color:var(--ink);background:rgba(var(--inkA),.05)}
.hd .ico:focus-visible{outline:2px solid rgba(var(--inkA),.55)}
.hd .mk{width:30px;height:26px;display:block;overflow:visible;cursor:pointer}
.mk .l,.mk .r{transition:transform .9s cubic-bezier(.2,.7,.1,1);transform-box:fill-box}
.mk .l{transform-origin:100% 50%}.mk .r{transform-origin:0 50%}
.mk.fold .l{transform:perspective(120px) rotateY(70deg)}.mk.fold .r{transform:perspective(120px) rotateY(-70deg)}
@media(prefers-color-scheme:dark){.mk .l{fill:#e8ecf1}}
@media(prefers-reduced-motion:reduce){.mk .l,.mk .r{transition:none}.mk.fold .l,.mk.fold .r{transform:none}}
@media(max-width:380px){.hd{font-size:.66rem;letter-spacing:.02em;padding:20px 0 16px}.hd .log{margin-left:2px;padding:8px 11px;font-size:.66rem}.hd .ico{margin-right:-6px}}
@media(min-width:900px){.wrap{max-width:680px}.hd{padding:36px 0 20px;margin:0 calc(50% - 50vw + clamp(32px,4vw,72px))}}
@media(min-width:1200px){.wrap{max-width:720px}}
@media(max-height:520px){.hd{padding:14px 0 12px}}