/* Shared header for madeby pages: desktop pill nav with hover dropdowns, mobile menu with tap dropdowns. */
:root { --black:#0a0a0a; --white:#fff; }
header.site-header { display:block; flex-wrap:nowrap; margin:0; padding-inline:0; border:0; }
.site-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 50; padding-top: .75rem; pointer-events: none; }
.site-header .wrap { width:100%; box-sizing:border-box; display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:space-between; margin-top:0; margin-bottom:0; align-items:center; justify-content:space-between; gap:1rem; position:relative; pointer-events:auto; max-width:82rem; margin-inline:auto; padding:.35rem clamp(1.25rem,4vw,2.5rem); border:1px solid transparent; border-radius:999px; }
.site-header .wordmark { font-family: var(--font-mono, "JetBrains Mono", monospace); font-weight:700; font-size:.95rem; letter-spacing:-.04em; text-decoration:none; color:inherit; white-space:nowrap; padding:.1rem .9rem .1rem .1rem; }
.site-header .button { display:inline-flex; align-items:center; background:var(--black); color:var(--white); border:1.5px solid var(--black); border-radius:999px; padding:.6rem 1.3rem; font-family: var(--font-mono, "JetBrains Mono", monospace); font-weight:700; font-size:.82rem; text-decoration:none; white-space:nowrap; }
.site-header .button:hover { background:var(--g-ink, #0a7a3d); border-color:var(--g-ink, #0a7a3d); }
.nav { position:absolute; white-space:nowrap; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:.1rem; }
.nav > a, .nav-dd-btn { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size:.82rem; font-weight:500; letter-spacing:-.01em; color:inherit; text-decoration:none; background:none; border:0; padding:.55rem 1rem; border-radius:999px; line-height:1.2; display:inline-flex; align-items:center; cursor:pointer; }
.nav > a:hover, .nav-dd-btn:hover { background: rgba(10,10,10,.07); }
.nav > a[aria-current="page"], .nav-dd-btn[aria-current="page"] { background:var(--black); color:var(--white); }
.nav-dd { position:relative; }
.nav-dd-btn::after { content:""; display:inline-block; width:.4em; height:.4em; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-.2em) rotate(45deg); margin-left:.55em; }
/* The .dd box starts at the trigger's bottom edge (padding bridges the gap), so the pointer can move into it. */
.nav-dd .dd { display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); padding-top:.5rem; z-index:40; min-width:14rem; }
.nav-dd:hover .dd, .nav-dd:has(:focus-visible) .dd { display:block; }
.dd-panel { display:flex; flex-direction:column; gap:.1rem; padding:.6rem; background:#0a0a0a; color:#fff; border-radius:1rem; box-shadow:0 18px 40px rgba(0,0,0,.25); }
.nav .dd-panel a { color:#fff; text-decoration:none; font-family: var(--font-mono, "JetBrains Mono", monospace); font-size:.82rem; font-weight:500; padding:.5rem .8rem; border-radius:.6rem; white-space:nowrap; }
.nav .dd-panel a:hover, .nav .dd-panel a:focus-visible { background:rgba(255,255,255,.14); outline:none; }
.dd-h { margin:.5rem .8rem .2rem; font-family: var(--font-mono, "JetBrains Mono", monospace); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; opacity:.6; color:#fff; }
.menu { display:none; position:relative; }
.menu summary { list-style:none; cursor:pointer; font-family: var(--font-mono, "JetBrains Mono", monospace); font-weight:600; font-size:.95rem; padding:.6rem 1.1rem; background:var(--black); color:var(--white); border-radius:999px; }
.menu summary::-webkit-details-marker { display:none; }
.menu nav { position:absolute; right:0; top:calc(100% + .75rem); background:var(--black); color:#fff; border-radius:1rem; padding:1.25rem 1.75rem; display:flex; flex-direction:column; gap:.6rem; font-family: var(--font-mono, "JetBrains Mono", monospace); font-weight:700; font-size:1.5rem; letter-spacing:-.03em; min-width:15rem; max-height:calc(100vh - 6rem); overflow:auto; }
.menu nav > a { color:#fff; text-decoration:none; }
.nav-dd-m > summary { list-style:none; cursor:pointer; font-size:1.5rem; }
.nav-dd-m > summary::-webkit-details-marker { display:none; }
.nav-dd-m > summary::after { content:"+"; margin-left:.4em; font-weight:400; opacity:.6; }
.nav-dd-m[open] > summary::after { content:"−"; }
.dd-panel-m { display:flex; flex-direction:column; gap:.2rem; padding:.3rem 0 .3rem .7rem; }
.dd-panel-m a { color:#fff; text-decoration:none; font-size:1.05rem; font-weight:500; padding:.25rem 0; white-space:nowrap; }
.dd-panel-m .dd-h { margin:.4rem 0 0; padding:0; }
@media (max-width: 62rem) { .nav { display:none; } .menu { display:block; } }

/* Clear hover states: the trigger turns black, rows turn white, the "All" row is a labelled category. */
.nav-dd-btn { transition: background .2s, color .2s; }
.nav-dd-btn::after { transition: transform .2s; }
.nav-dd:hover > .nav-dd-btn, .nav-dd:has(:focus-visible) > .nav-dd-btn { background: var(--black); color: var(--white); }
.nav-dd:hover > .nav-dd-btn::after, .nav-dd:has(:focus-visible) > .nav-dd-btn::after { transform: translateY(.1em) rotate(-135deg); }
.nav .dd-panel a { transition: background .15s, color .15s; }
.nav .dd-panel a:hover, .nav .dd-panel a:focus-visible { background: #fff; color: #0a0a0a; }
.nav .dd-panel a.dd-all { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; opacity: .65; padding: .3rem .8rem .55rem; margin-bottom: .3rem; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.2); background: none; color: #fff; }
.nav .dd-panel a.dd-all:hover, .nav .dd-panel a.dd-all:focus-visible { background: none; color: #fff; opacity: 1; }
.nav .dd-panel a.dd-all::after { content: " \2192"; }
.dd-panel-m a.dd-all { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }