/* ── nav.css ──────────────────────────────────────────────────────────────── Desktop is one row of evenly divided cells, content upper-left. Mobile has three treatments, switched by [data-nav] on : accordion wordmark row that expands into stacked cells drawer wordmark row plus a full-screen editorial index ticker wordmark row over a single scrolling rail, always visible All three share one behaviour in nav.js; only the presentation differs. ───────────────────────────────────────────────────────────────────────── */ @keyframes nav-link-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @keyframes nav-panel-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes nav-panel-fade-out { from { opacity: 1; } to { opacity: 0; } } /* Borders per cell rather than 1px grid gaps. The gap technique needs a complete final row; the nav's item count changes with breakpoint and with the mobile treatment, so a partial row would expose the container's rule colour as a slab. */ .nav { display: grid; background: var(--ground); } /* No full-width bottom rule: each cell draws its own, which lets the switch sit without one. The section that follows drops its top rule so the two do not stack into a double-weight line. */ .nav + * { border-top: 0 !important; } /* Standalone, not boxed: no fill, no dedicated border, no housing/edge inversion — the knob's own base tokens already read correctly against the bare page (--switch-housing is always the opposite tone of --ground within a theme). Higher specificity than .nav > * below (which every other cell still gets its hairline right/bottom rule from), so the knob is the one cell with no border at all, on both mobile and desktop. */ .theme-knob { justify-content: center; } .nav-brand-group > .theme-knob { border: 0; } /* Structurally wraps the wordmark + knob together so mobile can size them as one shared grid column (see MOBILE below) — display:contents makes it invisible to layout everywhere else, so desktop's "brand, 5 links, CTA, knob = 8 independent cells" grid is completely unaffected; the wordmark and knob resume being direct grid participants of .nav there, exactly as before this wrapper existed. Needs the higher-specificity .nav > prefix: the wrapper is now itself a direct .nav child, so it also matches .nav > * below (display:flex, same specificity, later in file) — without this, that rule wins and the wrapper never actually goes contents. */ .nav > .nav-brand-group { display: contents; } .nav > * { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; align-items: flex-start; justify-content: flex-start; text-align: left; padding: var(--s4); min-height: 0; } .nav-link, .nav-menu { font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--fg-muted); } .nav-link.is-cta { color: var(--accent); } .nav-menu { color: var(--fg); justify-content: space-between; } .nav-num { display: none; } .nav-wordmark { height: 2.6rem; width: auto; } .nav-wordmark--dark { display: block; } .nav-wordmark--light { display: none; } [data-theme="light"] .nav-wordmark--dark { display: none; } [data-theme="light"] .nav-wordmark--light { display: block; } /* Temporary manual wordmark swap-in, for rebrand review — text set in the display face rather than the raster PNG lockup. */ .nav-wordmark-text { font-family: var(--font-display); letter-spacing: var(--track-display); font-size: 4.4rem; line-height: 1; color: var(--fg); text-transform: lowercase; } /* ══ MOBILE ══════════════════════════════════════════════════════════════ */ @media (max-width: 39.99em) { /* Two columns, exact thirds: the wordmark+knob group owns the left 2/3, the menu button owns the right 1/3, centered within it (not pinned to the far edge). The group is a real flex box only here — everywhere else (see .nav-brand-group above) it's display:contents and invisible to layout. One clean bottom line spans the whole bar (lives on .nav itself, not per-cell, so it isn't broken by the fractional split) — the one exception is a single vertical divider exactly at the 2/3 mark, between the group and the menu button, on .nav-brand-group's own right edge. */ .nav { grid-template-columns: 2fr 1fr; border-bottom: 1px solid var(--rule); } /* .nav > prefix again — matches the desktop-safe display:contents rule's specificity (0,2,0), so this can actually override it within the media query instead of silently losing to a same-file, higher-order but lower-specificity conflict. */ .nav > .nav-brand-group { display: flex; align-items: center; grid-column: 1; grid-row: 1; border-right: 1px solid var(--rule); border-bottom: 0; } /* .nav > prefix so this beats the general .nav-menu rule (justify- content: space-between, for desktop) unambiguously instead of relying on same-specificity source-order alone — that exact kind of tie has already gone the wrong way once in this file (.nav-brand-group's display:contents vs. .nav > * above). Top-left, same as every other cell — no justify-content override needed, .nav > * already gives flex-start on both axes. */ .nav > .nav-menu { grid-column: 2; grid-row: 1; border-right: 0; border-bottom: 0; } .nav-brand-group > .theme-knob { align-self: center; margin-left: var(--s4); padding: var(--s2); border-right: 0; border-bottom: 0; } /* Links are hidden until opened, in every treatment. */ .nav-link { display: none; } .nav.is-open .nav-link { display: flex; } /* ── accordion: opens into a full-screen index, one option per row ── Same expand/collapse trigger as a plain accordion, but the panel itself takes the whole viewport (like the drawer treatment) rather than pushing the page content down — options are the only thing on screen while it's open. Flex column, not the grid the closed top-bar uses: a grid's leftover space (align-content:start) just sits empty at the bottom, which is why the switch used to strand itself partway down the screen with a dead gap under it. A flex column lets the switch take margin-top:auto and land flush at the true bottom instead, so the panel actually uses the full screen height it's given. .is-closing keeps every rule below active during the close fade (see nav.js) — without it the panel would snap back to the closed top-bar layout instantly while nav-panel-fade-out is still trying to fade its now-wrong-shaped remains. height:100dvh, not just inset:0's implicit sizing — Safari's address bar collapsing/expanding while this panel is open can leave a fixed element sized to a stale viewport height, so the page behind shows through a strip at the top or bottom. dvh tracks the *current* visual viewport live (same reason .sheet uses it, sheet.css); overscroll- behavior stops a scroll gesture at the panel's own top/bottom edge from chaining into the page behind it and nudging that address bar in the first place. */ [data-nav="accordion"] .nav.is-open, [data-nav="accordion"] .nav.is-closing { position: fixed; inset: 0; height: 100dvh; width: 100vw; z-index: 90; display: flex; flex-direction: column; background: var(--ground); overflow-y: auto; overscroll-behavior: contain; } [data-nav="accordion"] .nav.is-open > *, [data-nav="accordion"] .nav.is-closing > * { border-right: 0; } [data-nav="accordion"] .nav.is-open .nav-link, [data-nav="accordion"] .nav.is-closing .nav-link { display: flex; justify-content: flex-start; align-items: center; padding: var(--s5) var(--gutter); } [data-nav="accordion"] .nav.is-open .nav-link { /* display:none → flex can't transition, so this is an animation (which plays the moment the element starts rendering) rather than a transition (which needs to already be rendered to have something to animate from). Staggered per cell via --i, same device as the FAQ list and the plugin grid — delayed to start after the panel itself has begun fading in, not at the same instant. */ animation: nav-link-fade var(--dur-whisper) var(--ease-reveal) both; animation-delay: calc(80ms + var(--i, 0) * 40ms); } /* The knob already has a permanent, always-visible home under the closed top bar (.nav > .theme-knob above) — showing it again here, pinned to the bottom of the open panel, was just a distracting duplicate of the same control. .is-closing too, or it pops back visible mid-close while nav-panel-fade-out is still playing. */ [data-nav="accordion"] .nav.is-open .theme-knob, [data-nav="accordion"] .nav.is-closing .theme-knob { display: none; } [data-nav="accordion"] .nav.is-open { animation: nav-panel-fade-in var(--dur-whisper) var(--ease-reveal) both; } [data-nav="accordion"] .nav.is-closing { animation: nav-panel-fade-out var(--dur-whisper) var(--ease-reveal) both; } @media (prefers-reduced-motion: reduce) { [data-nav="accordion"] .nav.is-open .nav-link { animation: none; } [data-nav="accordion"] .nav.is-open, [data-nav="accordion"] .nav.is-closing { animation: none; } } /* The Margiela-tag device (sheet.css's #plugins .section-num), reused here as each option's index rather than a section's. */ [data-nav="accordion"] .nav-num { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; flex-shrink: 0; margin-right: var(--s4); border: 1px solid var(--rule); border-radius: 50%; font-family: var(--font-display); letter-spacing: var(--track-display); font-style: italic; font-size: 1.4rem; line-height: 1; color: var(--fg-faint); } /* ── drawer: a full-screen index set in the display face ──────────── */ [data-nav="drawer"] .nav.is-open { position: fixed; inset: 0; z-index: 90; grid-template-columns: 1fr auto; grid-auto-rows: min-content; align-content: start; /* Ground, not rule: with align-content:start the leftover space would otherwise show the grid's rule colour as a slab. */ background: var(--ground); overflow-y: auto; } [data-nav="drawer"] .nav.is-open > * { border-right: 0; } [data-nav="drawer"] .nav.is-open .nav-link { grid-column: 1 / -1; align-items: baseline; gap: var(--s4); padding: var(--s5) var(--s4); font-family: var(--font-display); font-size: var(--fs-h1); letter-spacing: var(--track-tight); text-transform: none; color: var(--fg); } [data-nav="drawer"] .nav.is-open .nav-link.is-cta { color: var(--accent); } [data-nav="drawer"] .nav-num { display: block; font-family: var(--font-data); font-size: var(--fs-data); font-style: normal; letter-spacing: var(--track-data); color: var(--fg-faint); } /* ── ticker: one scrolling rail, always visible, no expanding ─────── */ [data-nav="ticker"] .nav { display: flex; flex-wrap: nowrap; overflow-x: auto; align-items: stretch; gap: 0; scrollbar-width: none; } [data-nav="ticker"] .nav::-webkit-scrollbar { display: none; } [data-nav="ticker"] .nav > * { flex: 0 0 auto; align-items: center; white-space: nowrap; } [data-nav="ticker"] .nav-menu { display: none; } [data-nav="ticker"] .nav-link { display: flex; } } /* ══ DESKTOP ═════════════════════════════════════════════════════════════ */ @media (min-width: 40em) { .nav { grid-template-columns: repeat(4, 1fr); } .nav-menu { display: none; } .nav > * { padding: var(--s5); min-height: 10rem; } /* .nav-brand-group is display:contents here (see the rule above), so the wordmark and knob resume being independent grid items of .nav directly — but the knob now sits right after the wordmark in DOM order (for mobile's grouping, see MOBILE below), which would otherwise auto-place it as the *second* of the 8 desktop cells instead of the last. order:1 pushes it back to the end, matching every earlier desktop screenshot. */ .theme-knob { order: 1; } /* display:contents strips ALL box-model properties from the wrapper itself (padding, border — contents elements generate no box at all), and since nav-brand is no longer a *direct* child of .nav, it stopped matching .nav > * above too — meaning it silently lost the padding/ border/alignment every other cell gets. Restored explicitly here, identical to .nav > * (padding, border-right/bottom, top-left flex alignment), so the wordmark's cell looks exactly like every sibling cell again. */ .nav-brand { display: flex; align-items: flex-start; justify-content: flex-start; text-align: left; padding: var(--s5); min-height: 10rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } /* Reverted back to a normal, fully-boxed cell — same treatment as .nav-brand above (border-right + border-bottom, grid-cell padding/ min-height/alignment), since .nav-brand-group's display:contents means .nav > * still doesn't reach the knob any more than it reaches the wordmark. No masking, no special-casing: it's just another cell now, like every sibling in the row. */ .nav-brand-group > .theme-knob { /* No display/align-items/justify-content overrides here, unlike .nav-brand above — switch.css's own .theme-knob rule already centers the ring within the button (display:flex, center/center), and that needs to stay untouched; only the cell-level box properties (padding/border/min-height) are restored here. */ padding: var(--s5); min-height: 10rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } } /* 48em, not 64em: with the hamburger hidden from 40em on (line 159), the 4-column grid above holds all 8 cells (brand, 5 links, the CTA, the switch) — exactly two full rows. That split held all the way through tablet (834px), which never got its own row-of-8 until true desktop width. 48em matches the breakpoint the rest of the site already treats as "not mobile" (tokens.css's --gutter, --frame width steps, etc). */ @media (min-width: 48em) { .nav { grid-template-columns: repeat(8, 1fr); } .nav > * { min-height: 11rem; } .nav-brand { min-height: 11rem; } /* .nav > * doesn't reach it — see above */ .nav-wordmark { height: 3.2rem; } }