/* Base, header and empty state. Values from docs/design_handoff_numancia 3/docs/design.md. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-display);font-weight:400;line-height:1.4;min-height:100dvh}
p{text-wrap:pretty}
a{color:inherit;text-underline-offset:6px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Header: fixed, top 28, edges 40 (phone: top 26, edges 22) */
.site-header{position:fixed;top:28px;left:var(--edge);right:var(--edge);display:flex;justify-content:space-between;align-items:baseline;gap:24px;z-index:10}
.logo{font-weight:700;font-size:24px;letter-spacing:-.02em;text-decoration:none}
.site-nav{display:flex;gap:30px;font-size:15px}
.site-nav a{text-decoration:none}
.site-nav a[aria-current="page"]{text-decoration:underline}
.site-nav a.is-off{color:var(--off)}

/* The stream frame: content area top 88, bottom 156, edges 40 */
.frame{position:relative;min-height:100dvh}

/* Empty state: one quiet column, vertically centred (design.md → Empty states) */
.empty{position:absolute;inset:88px var(--edge) 156px;display:flex;flex-direction:column;justify-content:center;gap:18px;max-width:680px;margin:0 auto}
.accent-bar{display:block;width:44px;height:4px;background:var(--accent)}
.empty-title{margin:0;font-weight:500;font-size:40px;line-height:1.1;letter-spacing:-.02em}
.empty-body{margin:0;font-weight:300;font-size:20px;line-height:1.5;color:var(--ink-2)}

@media (max-width:767px){
	.site-header{top:26px;left:var(--edge-phone);right:var(--edge-phone)}
	.logo{font-size:20px}
	.site-nav{display:none} /* the phone menu overlay arrives in step 4 */
	.empty{inset:76px var(--edge-phone) 200px}
	.empty-title{font-size:30px}
	.empty-body{font-size:17px}
	.accent-bar{width:36px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Menu on phones: "menu +" in the header opens a full-screen paper overlay. Works without JavaScript through :target. */
.menu-btn,.menu-overlay{display:none}
@media (max-width:767px){
	.site-header .logo.has-page-title .logo-site{display:none}
	.site-header .logo:not(.has-page-title) .logo-page{display:none}
	.menu-btn{display:block;font:400 12px var(--font-mono);text-decoration:none}
	.menu-overlay{display:block;position:fixed;inset:0;z-index:40;background:var(--paper);opacity:0;visibility:hidden;transition:opacity 200ms ease,visibility 0s linear 200ms}
	.menu-overlay:target,.menu-overlay.is-open{opacity:1;visibility:visible;transition:opacity 200ms ease}
	.menu-head{position:absolute;top:26px;left:var(--edge-phone);right:var(--edge-phone);display:flex;justify-content:space-between;align-items:baseline}
	.menu-close{font:400 12px var(--font-mono);text-decoration:none}
	.menu-items{position:absolute;top:130px;left:var(--edge-phone);right:var(--edge-phone);display:flex;flex-direction:column;gap:18px}
	.menu-items a{font-weight:500;font-size:38px;line-height:1.05;letter-spacing:-.02em;text-decoration:none}
	.menu-items a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}
	.menu-items a.is-off{color:var(--off)}
	.menu-note{position:absolute;left:var(--edge-phone);right:var(--edge-phone);bottom:36px;margin:0;font:400 11px var(--font-mono);color:var(--muted)}
	body.menu-open{overflow:hidden}
}
@media (min-width:768px){.logo-page{display:none}}