/* Responsive nav — shared across all public pages. Loaded LAST in so it can extend per-page nav rules. Behavior: ≥721px the existing inline layout shows; ≤720px the links collapse into a slow-falling drawer triggered by .nav__toggle. */ .nav__toggle { display: none; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0.5rem 0; align-items: center; gap: 0.65rem; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); opacity: 0.85; transition: opacity 0.3s var(--ease); } .nav__toggle:hover, .nav__toggle:focus-visible { opacity: 1; } .nav__toggle:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; } .nav__toggle-label { font-weight: 400; } /* Swap "Menu" → "Close" via pseudo, so the label width doesn't jump. */ .nav__toggle[aria-expanded='true'] .nav__toggle-label { font-size: 0; } .nav__toggle[aria-expanded='true'] .nav__toggle-label::before { content: 'Close'; font-size: 11px; } .nav__toggle-icon { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; } .nav__toggle-icon span { display: block; height: 1px; background: currentColor; transition: transform 0.4s var(--ease); transform-origin: center; } .nav__toggle[aria-expanded='true'] .nav__toggle-icon span:nth-child(1) { transform: translateY(2.5px) rotate(45deg); } .nav__toggle[aria-expanded='true'] .nav__toggle-icon span:nth-child(2) { transform: translateY(-2.5px) rotate(-45deg); } @media (max-width: 720px) { .nav__toggle { display: inline-flex; } /* Links collapse into a drawer below the nav bar. */ .nav__links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; background: var(--bg-deep); border-top: 1px solid var(--rule-soft); padding: 1.75rem var(--pad-x) 2.25rem; gap: 1.25rem; transform: translateY(-110%); opacity: 0; pointer-events: none; transition: transform 0.55s var(--ease), opacity 0.4s var(--ease); box-shadow: 0 24px 40px -16px rgba(0, 0, 0, 0.5); } .nav[data-open='true'] .nav__links { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav__links a { font-family: var(--display); font-size: 1.55rem; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); opacity: 0.9; padding: 0.35rem 0; } .nav__links a[aria-current='page'] { color: var(--accent); opacity: 1; } .nav__links a::after { display: none; } } /* Honor reduced-motion preferences. */ @media (prefers-reduced-motion: reduce) { .nav__toggle-icon span, .nav__links { transition-duration: 0.01s !important; } }