/* The header, copied from the locked prototype (docs/design/prototype/template.html, D10 T01 §8). */
/* The wordmark's charcoal follows the ink, so it reads on dark paper; its red stays. (The prototype's selector
   names the artwork's charcoal with its #; the substring without it matches the same paths.) */
.logo svg [style*="231f20"] { fill: var(--ink) !important; }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--glass); backdrop-filter: blur(8px); }
.top-in { max-width: 1440px; margin-inline: auto; display: flex; align-items: center; gap: 24px; padding: 14px 20px; }
.logo { display: block; width: 150px; flex: none; }
.logo svg { display: block; width: 100%; height: auto; }
.nav { display: flex; gap: 28px; margin-inline: auto; font-weight: 500; font-size: 15px; }
.nav a { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.nav a:hover { color: var(--signal-ink); }
.nav svg { width: 10px; height: 10px; opacity: 0.5; }
/* The header's dropdowns (D10 T02 §12): an item with children is its link and a chevron button (the WAI-ARIA disclosure
   navigation pattern) that opens a panel of the children under the header, in the design system. */
.drop { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.drop-btn { display: inline-grid; place-items: center; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
/* A 24px target (WCAG 2.2 target size, D16 T01 §3) that draws the 10px chevron where it was: the box starts at the
   gap's start with the icon padded back to its place, and negative margins keep the 10 by 10 footprint. */
.drop-btn { box-sizing: border-box; min-width: 24px; min-height: 24px; margin: -7px -8px -7px -6px; padding-left: 6px; place-items: center start; }
.drop-btn:hover { color: var(--signal); }
.drop-btn svg { transition: transform 0.2s; }
.drop-btn[aria-expanded="true"] svg { transform: rotate(180deg); opacity: 1; }
.drop-panel { position: absolute; top: calc(100% + 24px); left: -14px; z-index: 30; min-width: 240px; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.drop-panel[hidden] { display: none; }
.drop-panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 25px; }
.drop-panel ul { list-style: none; margin: 0; padding: 0; }
.drop-panel a { display: block; padding: 8px 12px; border-radius: 6px; white-space: nowrap; }
.drop-panel .drop-all { margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--line); border-radius: 0 0 6px 6px; color: var(--ink-2); }
.acts { display: flex; align-items: center; gap: 8px; }
/* The actions keep the width they had with the longer help label (version 10), so the shorter label does not move the nav. */
@media (min-width: 961px) { .acts { min-width: 260px; justify-content: flex-end; } }
/* The profile links (D10 T02 §13): GitHub and X beside the actions, in the footer's .socials style at the header
   buttons' 40px, quieter than the actions; in the phone menu they are a row under its Contact button. Under 1100px they
   would crowd the nav (the header wraps at 1000px), so the header shows them from 1100px up. */
@media (max-width: 1099px) { .acts .hsocials { display: none; } }
.hsocials { display: flex; gap: 8px; }
.hsocials a { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-2); }
.hsocials a:hover, .hsocials a:focus-visible { color: var(--signal); border-color: var(--signal); }
.hsocials svg { width: 16px; height: 16px; }
.mnav .hsocials { margin-top: 16px; }
.attack { display: inline-flex; align-items: center; gap: 6px; color: var(--attack); font-weight: 500; font-size: 15px; background: none; border: 0; cursor: pointer; padding: 8px 10px; border-radius: 999px; font-family: inherit; }
.attack:hover { background: var(--attack-tint); }
.attack svg { width: 16px; height: 16px; }
.menu { display: none; }
@media (max-width: 960px) {
	.nav { display: none; }
	.acts .btn-line.contact { display: none; }
	.menu { display: inline-flex; }
	.top-in { gap: 8px; }
	.logo { width: 128px; margin-right: auto; }
	.attack span { display: none; }
}

/* The phone menu, in the prototype since D11 T08 §3 (docs/design/direction.md). A full-width panel under the header
   with the same items, in the nav's type, divided by the frame's dashed lines, and the Contact button. */
.mnav { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 100%); overflow-y: auto; background: var(--paper); border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); padding: 4px 20px 24px; }
.mnav[hidden] { display: none; }
.mnav ul { list-style: none; margin: 0; padding: 0; }
.mnav > ul > li { border-bottom: 1px dashed var(--line); }
.mnav li a { display: block; padding: 14px 0; font-weight: 500; font-size: 17px; text-decoration: none; }
.mnav li a:hover { color: var(--signal-ink); }
.mnav li ul { padding: 0 0 10px 14px; }
.mnav li li a { padding: 7px 0; font-size: 15px; color: var(--ink-2); }
.mnav .btn { margin-top: 20px; }
@media (min-width: 961px) { .mnav { display: none !important; } }
/* The skip link (and any screen-reader text) is hidden until focused; Hello's reset, which held this rule, is off. */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed !important; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip-path: none; padding: 10px 16px; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 500; }
/* Logged in, the admin bar sits above the page, so the sticky header stops under it. */
.admin-bar .top { top: 32px; }
@media (max-width: 782px) { .admin-bar .top { top: 46px; } }
@media (max-width: 600px) { .admin-bar .top { top: 0; } }