/* BMI design system: tokens, reset, layout, components, motion.
Source of truth: /DESIGN.md. Colours derive from the logo: steel #658697, slate #8B9298.
Fonts are self-hosted (OFL, see /assets/fonts/LICENSES/); cyrillic subsets load only when used. */
/* ==========================================================================
0. Fonts
========================================================================== */
/* IBM Plex Serif 500 latin (15 KB) */
@font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-serif-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* IBM Plex Serif 500 latin-ext (10 KB) */
@font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-serif-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* IBM Plex Serif 500 cyrillic (8 KB) */
@font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-serif-500-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* IBM Plex Serif 500 cyrillic-ext (5 KB) */
@font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-serif-500-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* IBM Plex Sans 400 600 latin (39 KB) */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* IBM Plex Sans 400 600 latin-ext (25 KB) */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* IBM Plex Sans 400 600 cyrillic (24 KB) */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* IBM Plex Sans 400 600 cyrillic-ext (19 KB) */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* IBM Plex Sans Italic 400 latin (18 KB) */
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-italic-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* IBM Plex Sans Italic 400 latin-ext (11 KB) */
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-italic-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* IBM Plex Mono 400 latin (9 KB) */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* IBM Plex Mono 400 latin-ext (8 KB) */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* IBM Plex Mono 400 cyrillic (5 KB) */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-400-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* IBM Plex Mono 400 cyrillic-ext (4 KB) */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-400-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* IBM Plex Mono 500 latin (9 KB) */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* IBM Plex Mono 500 latin-ext (8 KB) */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* IBM Plex Mono 500 cyrillic (5 KB) */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-500-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* IBM Plex Mono 500 cyrillic-ext (4 KB) */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-500-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* Symbols outside the Google subsets: → ↗ ≈ (under 3 KB each, fetched only when used). None of the
three families has U+207B (superscript minus): write units as cm−1. */
@font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-serif-500-symbols.woff2") format("woff2"); unicode-range: U+2192, U+2197, U+2248; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-symbols.woff2") format("woff2"); unicode-range: U+2192, U+2197, U+2248; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-italic-400-symbols.woff2") format("woff2"); unicode-range: U+2192, U+2197, U+2248; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-400-symbols.woff2") format("woff2"); unicode-range: U+2192, U+2197, U+2248; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-500-symbols.woff2") format("woff2"); unicode-range: U+2192, U+2197, U+2248; }
/* ==========================================================================
1. Tokens
========================================================================== */
:root {
color-scheme: light;
/* Steel ramp: OKLCH hue 230.8 (the logo's steel); 500 is the logo colour */
--steel-25: #f6fbfd;
--steel-50: #eef6fa;
--steel-100: #dfecf2;
--steel-200: #c7d9e3;
--steel-300: #a7bfcc;
--steel-400: #84a0af;
--steel-500: #658697;
--steel-600: #4e6e7e;
--steel-700: #3b5968;
--steel-800: #2a4450;
--steel-900: #1b2e38;
--steel-950: #101d23;
/* Slate ramp: OKLCH hue 243.7 (the logo's letterforms); 400 is the logo colour */
--slate-50: #f5f7f9;
--slate-100: #e8ecee;
--slate-200: #d3d8dc;
--slate-300: #b2b8bd;
--slate-400: #8b9298;
--slate-500: #6e757c;
--slate-600: #575f65;
--slate-700: #41494f;
--slate-800: #2d3439;
--slate-900: #1b2025;
/* Cool neutrals, chroma <= .016 on the steel hue */
--n-0: #ffffff;
--n-25: #f6fafb;
--n-50: #f1f5f8;
--n-100: #e5ecf0;
--n-200: #d4dde2;
--n-300: #bac6cd;
/* Roles (contrast on #fff) */
--color-bg: var(--n-0);
--color-surface: var(--n-0);
--color-surface-sunken: var(--n-50);
--color-surface-hover: var(--n-25);
--color-surface-raised: var(--n-0);
--color-surface-tint: var(--steel-50);
--color-text: #152229; /* 16.2:1 */
--color-text-muted: #55636a; /* 6.2:1; 5.7:1 on --n-50 */
--color-text-subtle: #647178; /* 5.0:1; >= 4.5:1 on --n-50 and --steel-50 */
--color-border: var(--n-200);
--color-border-strong: var(--n-300);
--color-accent: var(--steel-700); /* 7.5:1: links, accent text */
--color-accent-hover: var(--steel-800); /* 10.3:1 */
--color-accent-brand: var(--steel-500); /* 3.9:1: indicators, rules, display >= 24px only */
--color-on-accent: #ffffff; /* 7.5:1 on --steel-700 */
--color-focus: #247293; /* 5.4:1 */
/* Inverse (ink) band */
--color-inverse-bg: #122027;
--color-inverse-raised: #1d2e37;
--color-inverse-text: #f1f5f8; /* 15.2:1 on ink */
--color-inverse-muted: #b1c0c8; /* 8.9:1 on ink */
--color-inverse-border: #324650;
--color-inverse-border-strong: #455c67;
--color-inverse-hover: #243741; /* row/button hover on ink */
--color-inverse-sunken: #0d181e;
--color-inverse-accent: var(--steel-300);
--color-inverse-accent-hover: #ffffff;
--color-inverse-focus: #95cde9; /* 9.7:1 on ink */
/* Type families */
--font-display: "IBM Plex Serif", Georgia, "Times New Roman", serif;
--font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
/* Proportion: the golden ratio. The emblem's C60 molecule is built on φ; sizes, spaces, splits and
durations are drawn from it (DESIGN.md §2.6). */
--phi: 1.618;
/* Fluid type scale on √φ, 360px -> 1440px viewport. At 1440 step n is 17px × √φ^n, so every two steps
differ by φ; at 360 the steps sit on 16px × ⁴√φ^k, nearest to a phone's tighter hierarchy. */
--step--2: clamp(0.75rem, 0.73rem + 0.08vw, 0.8125rem); /* 12 -> 13 labels, captions, data (UI floor) */
--step--1: clamp(0.8125rem, 0.8049rem + 0.0338vw, 0.8353rem); /* 13 -> 13.4 secondary text, tables */
--step-0: clamp(1rem, 0.96rem + 0.19vw, 1.0625rem); /* 16 -> 17 body */
--step-1: clamp(1.1278rem, 1.0533rem + 0.3314vw, 1.3515rem); /* 18 -> 21.6 lede, h3 */
--step-2: clamp(1.4346rem, 1.3398rem + 0.4215vw, 1.7192rem); /* 23 -> 27.5 large h3, facts */
--step-3: clamp(1.618rem, 1.4284rem + 0.8426vw, 2.1868rem); /* 25.9 -> 35 h2 */
--step-4: clamp(2.0582rem, 1.817rem + 1.0718vw, 2.7817rem); /* 32.9 -> 44.5 page h1 */
--step-5: clamp(2.3213rem, 1.9156rem + 1.803vw, 3.5383rem); /* 37.1 -> 56.6 home h1 */
--lh-tight: 1.04;
--lh-heading: 1.14;
--lh-snug: 1.3;
--lh-body: var(--phi);
--lh-ui: 1.25;
--track-display: -0.018em;
--track-heading: -0.01em;
--track-label: 0.08em;
--track-mono: 0.01em;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
/* Spacing on the Fibonacci numbers (px): neighbours differ by about φ */
--space-1: 0.1875rem; /* 3 */
--space-2: 0.3125rem; /* 5 */
--space-3: 0.5rem; /* 8 */
--space-4: 0.8125rem; /* 13 */
--space-5: 1.3125rem; /* 21 */
--space-6: 2.125rem; /* 34 */
--space-7: 3.4375rem; /* 55 */
--space-8: 5.5625rem; /* 89 */
--space-9: 9rem; /* 144 */
--space-section: clamp(3.4375rem, 1.9205rem + 6.7424vw, 9rem); /* 55 -> 144: 55 at 360, 128 at 1440, 144 at 1680 */
--space-block: clamp(2.125rem, 1.6875rem + 1.9444vw, 3.4375rem); /* 34 -> 55 */
/* Radii (Fibonacci) */
--radius-xs: 2px;
--radius-sm: 3px;
--radius-md: 5px;
--radius-lg: 8px;
--radius-pill: 999px;
/* Elevation, shadow colour = steel-950 */
--shadow-1: 0 1px 2px rgb(16 29 35 / 0.06);
--shadow-2: 0 1px 2px rgb(16 29 35 / 0.05), 0 6px 16px -6px rgb(16 29 35 / 0.12);
--shadow-3: 0 2px 6px rgb(16 29 35 / 0.06), 0 18px 40px -12px rgb(16 29 35 / 0.22);
/* Stacking */
--z-raised: 10;
--z-sticky: 100;
--z-header: 200;
--z-dropdown: 300;
--z-skip: 1000;
/* Layout */
--page-max: 80rem;
--gutter: clamp(1rem, 0.5rem + 2.2vw, 2.5rem);
--grid-gap: clamp(1rem, 0.55rem + 1.5vw, 2rem);
--measure: 56ch;
--header-h: 4rem;
--header-h-condensed: 3.5rem; /* the scrolled header's visible bar; its in-flow height stays --header-h */
/* Golden splits: minor | major (38.2 | 61.8) and the reverse, with a gap of 34 / 55 / 89px at 768 / 1024 / 1440 */
--golden: minmax(0, 1fr) minmax(0, 1.618fr);
--golden-flip: minmax(0, 1.618fr) minmax(0, 1fr);
--golden-gap: clamp(2.125rem, 8.1845vw - 1.8036rem, 5.5625rem);
/* Motion: each duration is √φ × the one below it (dur-1 -> dur-2 is φ) */
--dur-1: 135ms; /* colour, background, underline */
--dur-2: 218ms; /* dropdown, arrows, chevrons */
--dur-3: 277ms; /* page-in, thumbs, dialog */
--dur-4: 352ms; /* drawer, bottom sheet */
--dur-5: 449ms; /* scroll reveal, axis draw */
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
--stagger: 60ms;
--shadow-edge: 0 8px 24px -10px rgb(16 29 35 / 0.3); /* scrolled header hairline */
/* Frosted glass: the condensed header */
--glass: rgb(255 255 255 / 0.88); /* keeps --color-text-muted >= 4.5:1 even over ink */
--glass-filter: blur(14px) saturate(1.5); /* backdrop-filter */
/* Steel-950 at fixed alpha: rings, inner shades, scroll shadows */
--ink-a10: rgb(16 29 35 / 0.1);
--ink-a16: rgb(16 29 35 / 0.16);
--ink-a28: rgb(16 29 35 / 0.28);
/* Backdrop tint for modal surfaces */
--backdrop: rgb(16 29 35 / 0.42);
}
@media (min-width: 64rem) {
:root { --header-h: 4.5rem; }
}
/* ==========================================================================
2. Reset and base. The window is the scroll container: html and body never become one
(no height, no overflow auto/scroll/hidden at rest). body's overflow-x: clip and the modal
scroll lock on html below do not create a scroll container.
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-h) + var(--space-5));
interpolate-size: allow-keywords;
background: var(--color-bg);
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
margin: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-text);
font-size: var(--step-0);
line-height: var(--lh-body);
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
html.is-locked, html:has(dialog[open]) { overflow: hidden; }
img, svg, video, iframe, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-medium); line-height: var(--lh-heading); text-wrap: balance; overflow-wrap: break-word; color: var(--color-text); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; letter-spacing: var(--track-mono); overflow-wrap: break-word; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
p, li, dd, figcaption { text-wrap: pretty; }
b, strong { font-weight: var(--weight-semibold); }
sub, sup { position: relative; font-size: 0.72em; line-height: 0; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
small { font-size: var(--step--1); }
abbr[title] { text-decoration: none; cursor: help; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--color-accent); text-underline-offset: 0.2em; }
address { font-style: normal; }
table { border-collapse: collapse; }
hr { height: 1px; margin: var(--space-block) 0; border: 0; background: var(--color-border); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-xs); }
::selection { background: var(--steel-200); color: var(--color-text); }
[hidden] { display: none !important; }
/* Cyrillic emphasis is upright medium: Plex Sans Italic has no Serbian locl, so its italic д/п
would take the Russian cursive forms. Cyrillic headings stay in the display serif. */
[lang="sr-Cyrl"] :is(i, em, .italic, cite) { font-style: normal; font-weight: var(--weight-medium); }
.sr-only {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* The icon sprite stamped with the header: present in the DOM, never rendered. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link {
position: fixed; left: var(--space-4); top: var(--space-4); z-index: var(--z-skip);
padding: var(--space-4) var(--space-5); background: var(--steel-800); color: var(--color-on-accent);
font: var(--weight-medium) var(--step--1)/1 var(--font-text); border-radius: var(--radius-sm);
text-decoration: none; transform: translateY(-160%); transition: transform var(--dur-2) var(--ease-out-quint);
}
.skip-link:focus { transform: none; }
/* Inline SVG icons from the sprite in the header partial */
.i-arrow, .i-ext, .i-chev { flex: none; width: 1em; height: 1em; }
.i-ext { width: 0.75em; height: 0.75em; }
/* ==========================================================================
3. Layout: container, grid, sections, page head, rail, pager
========================================================================== */
.wrap { width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), 48rem); margin-inline: auto; }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
.grid-12 > * { grid-column: 1 / -1; }
.section { padding-block: var(--space-section); }
.section + .section:not(.band) { padding-top: 0; }
.section--tight { padding-block: var(--space-block); }
/* Section detail pages: the content section right after the page-head wrap starts one --space-block
under the head (the head's own bottom padding), as on pages whose content shares the head's wrap. */
main > .wrap:first-child + .section--tight { padding-top: 0; }
.band { padding-block: var(--space-section); }
.band--sunken { background: var(--color-surface-sunken); }
.band--ink {
--color-text: var(--color-inverse-text); --color-text-muted: var(--color-inverse-muted); --color-text-subtle: var(--color-inverse-muted);
--color-border: var(--color-inverse-border); --color-border-strong: var(--color-inverse-border-strong);
--color-accent: var(--color-inverse-accent); --color-accent-hover: var(--color-inverse-accent-hover); --color-accent-brand: var(--steel-300);
--color-focus: var(--color-inverse-focus);
--color-surface: var(--color-inverse-raised); --color-surface-hover: var(--color-inverse-hover); --color-surface-sunken: var(--color-inverse-sunken);
background: var(--color-inverse-bg); color: var(--color-text);
}
.band--ink ::selection { background: var(--steel-700); color: var(--color-on-accent); }
main > :last-child:not(.band) { padding-bottom: var(--space-section); }
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-block); }
/* Section heading */
.section-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-block); max-width: 44rem; }
.section-head .lede, .section-head > p { color: var(--color-text-muted); font-size: var(--step-0); max-width: var(--measure); }
.section-head--split { max-width: none; }
@media (min-width: 64rem) {
.section-head--split { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--grid-gap); }
.section-head--split > .eyebrow { grid-column: 1 / -1; }
}
/* Split: a lead-in or h2 (`.split-head`) beside its content. Stacked below 64rem, spaced like `.stack`
(`--space-block` with `.split--section`); from 64rem a golden split: the head takes the minor column,
sticky under the header, and the content the major one, top-aligned. */
.split > * + * { margin-top: var(--space-4); }
.split--section > * + * { margin-top: var(--space-block); }
@media (min-width: 64rem) {
.split { display: grid; grid-template-columns: var(--golden); column-gap: var(--golden-gap); align-items: start; }
.split > .split-head { grid-column: 1; position: sticky; top: calc(var(--header-h) + var(--space-6)); }
.split > * + * { grid-column: 2; margin-top: 0; }
}
/* Page head: breadcrumb, sub-nav (section detail pages), eyebrow, h1, lede, optional facts */
.page-head { padding-block: var(--space-6) var(--space-block); }
.page-head .eyebrow { margin-top: var(--space-6); }
.page-head .breadcrumb + .h-page, .page-head .breadcrumb + h1 { margin-top: var(--space-6); }
/* The sub-nav sits right under the one-line breadcrumb, above the title, so it keeps the same y on
every sibling page whatever the title, lede or facts below it. */
.page-head .breadcrumb + .subnav { margin-top: var(--space-4); }
.page-head .subnav + :is(.eyebrow, .h-page, h1) { margin-top: var(--space-7); }
.page-head .eyebrow + .h-page, .page-head .eyebrow + h1 { margin-top: var(--space-4); }
.page-head .h-page { max-width: 25.5ch; }
.page-head .lede { margin-top: var(--space-5); color: var(--color-text-muted); max-width: 60ch; }
.page-head > .facts { margin-top: var(--space-7); }
.page-head > .note { margin-top: var(--space-6); }
.page-head--flush { padding-bottom: var(--space-5); }
/* Long intro beside the h1: stacked below 64rem; from 64rem a golden split, the h1 in the minor column
and the intro in the major one, top-aligned. The page's first section follows directly (no page-head
bottom padding). */
.page-head--split { padding-bottom: 0; }
.page-head--split > * + * { margin-top: var(--space-block); }
@media (min-width: 64rem) {
.page-head--split { display: grid; grid-template-columns: var(--golden); column-gap: var(--golden-gap); align-items: start; }
.page-head--split > .h-page { grid-column: 1; }
.page-head--split > * + * { grid-column: 2; margin-top: 0; }
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0; list-style: none; margin: 0; padding: 0; font: var(--weight-regular) var(--step--1)/1.5 var(--font-text); color: var(--color-text-muted); }
.breadcrumb li { display: inline-flex; align-items: center; }
/* The separator trails its item, so a wrapped trail never starts a line with a chevron. */
.breadcrumb li:not(:last-child)::after { content: ""; width: 0.375rem; height: 0.375rem; margin: 0 0.7rem 0 0.55rem; border-top: 1.5px solid var(--slate-300); border-right: 1.5px solid var(--slate-300); transform: rotate(45deg); }
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; border-radius: var(--radius-xs); transition: color var(--dur-1) var(--ease-out); }
.breadcrumb a:hover { color: var(--color-accent); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--color-text); }
/* Above a sub-nav the trail stays on one line (the current item ends in an ellipsis when it does not
fit; the same name is the current tab right below), so the tabs never move down a line. */
.breadcrumb:has(+ .subnav) ol { flex-wrap: nowrap; }
.breadcrumb:has(+ .subnav) li:last-child { min-width: 0; }
.breadcrumb:has(+ .subnav) li:last-child > [aria-current] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Rail layout: "Na ovoj stranici" anchor list beside long content, >= 80rem only; content : rail = φ³ : 1 */
.with-rail { display: block; }
.rail { display: none; }
@media (min-width: 80rem) {
.with-rail { display: grid; grid-template-columns: minmax(0, 4.236fr) minmax(0, 1fr); column-gap: var(--space-7); align-items: start; }
.with-rail > .rail-main { grid-column: 1; grid-row: 1; min-width: 0; }
.with-rail > .rail { display: block; grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}
.rail-title { display: block; padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.rail ol, .rail ul { list-style: none; display: grid; margin: var(--space-4) 0 0; padding: 0; border-left: 1px solid var(--color-border); }
.rail a {
display: block; padding: 0.4rem 0 0.4rem var(--space-4); margin-left: -1px; border-left: 2px solid transparent;
font: var(--weight-regular) var(--step--1)/1.4 var(--font-text); color: var(--color-text-muted); text-decoration: none;
transition: color var(--dur-1) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.rail a:hover { color: var(--color-text); border-left-color: var(--steel-300); }
.rail a[aria-current] { color: var(--color-text); font-weight: var(--weight-medium); border-left-color: var(--color-accent-brand); }
/* Pager: previous / next page within the section */
.pager { display: grid; gap: var(--space-4); margin-top: var(--space-section); }
@media (min-width: 48rem) { .pager { grid-template-columns: 1fr 1fr; gap: var(--grid-gap); } }
.pager a {
display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md);
color: var(--color-text); text-decoration: none; background: var(--color-surface);
transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out-quint);
}
.pager a:hover { border-color: var(--steel-300); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.pager .pager-label { font: var(--weight-medium) var(--step--2)/1.3 var(--font-text); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-text-muted); }
.pager .pager-title { display: flex; align-items: center; gap: var(--space-4); font: var(--weight-medium) var(--step-1)/1.25 var(--font-display); letter-spacing: -0.01em; }
.pager .pager-next { text-align: right; }
.pager .pager-next .pager-title { justify-content: flex-end; }
.pager .i-arrow { width: 0.8em; height: 0.8em; color: var(--color-accent-brand); transition: transform var(--dur-2) var(--ease-out-quint); }
.pager .pager-prev .i-arrow { transform: scaleX(-1); }
.pager .pager-prev:hover .i-arrow { transform: scaleX(-1) translateX(4px); }
.pager .pager-next:hover .i-arrow { transform: translateX(4px); }
@media (min-width: 48rem) { .pager .pager-next:only-child { grid-column: 2; } }
/* ==========================================================================
4. Type roles
========================================================================== */
.eyebrow {
display: block; font: var(--weight-medium) var(--step--2)/1.3 var(--font-text);
letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-accent);
}
.eyebrow--muted { color: var(--color-text-muted); }
.h-display { font-size: var(--step-5); line-height: var(--lh-tight); letter-spacing: var(--track-display); overflow-wrap: break-word; }
.h-page { font-size: var(--step-4); line-height: 1.06; letter-spacing: var(--track-display); overflow-wrap: break-word; }
.h-section { font-size: var(--step-3); line-height: var(--lh-heading); letter-spacing: var(--track-heading); overflow-wrap: break-word; }
.h-sub { font-size: var(--step-1); line-height: var(--lh-snug); letter-spacing: -0.008em; }
.h-minor { font: var(--weight-semibold) var(--step-0)/1.35 var(--font-text); letter-spacing: 0; }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--color-text); max-width: 46ch; }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--step--1); }
.data { font-family: var(--font-mono); letter-spacing: var(--track-mono); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.caption { font: var(--weight-regular) var(--step--1)/1.5 var(--font-text); color: var(--color-text-muted); }
.caption b, .caption strong { font-weight: var(--weight-medium); color: var(--color-text); }
.nowrap { white-space: nowrap; }
/* Prose: bios, lab text, articles. Never justified. */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose > :is(h2, h3) { margin-top: 2em; }
.prose > :is(h2, h3) + * { margin-top: 0.75em; }
.prose h2 { font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.012em; }
.prose h3 { font-size: var(--step-1); line-height: var(--lh-snug); }
.prose h4 { font: var(--weight-semibold) var(--step-0)/1.35 var(--font-text); }
.prose ul:not([class]), .prose ol:not([class]) { padding-left: 1.4em; }
.prose ul:not([class]) > li::marker { color: var(--color-accent-brand); }
.prose ol:not([class]) > li::marker { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.9em; }
.prose li + li { margin-top: 0.5em; }
.prose li > ul, .prose li > ol { margin-top: 0.5em; }
.prose a, .link {
color: var(--color-accent); text-decoration-line: underline; text-decoration-thickness: 1px;
text-underline-offset: 0.2em; text-decoration-color: var(--steel-300);
transition: text-decoration-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
overflow-wrap: anywhere;
}
.prose a:hover, .link:hover { color: var(--color-accent-hover); text-decoration-color: currentColor; }
/* External link in running text: the #i-ext glyph is painted in the link's end padding (the svg in the
markup is hidden), so it always stays on the line of the last character; an inline svg would give the
line breaker a break point before it and could wrap onto a line of its own. Colour = --color-text-muted. */
:is(.prose a, .link):has(> .i-ext) {
padding-right: 1em; overflow-wrap: break-word;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2.5h5.5V8M9.25 2.75 2.5 9.5' fill='none' stroke='%2355636a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 55% / 0.75em 0.75em no-repeat;
}
:is(.prose a, .link) > .i-ext { display: none; }
.prose blockquote { padding-left: var(--space-5); border-left: 2px solid var(--color-accent-brand); font-size: var(--step-1); line-height: 1.5; }
.prose > .lede, .prose--lead > p:first-child { font-size: var(--step-1); line-height: 1.5; color: var(--color-text); max-width: none; }
.prose .figure { margin-block: var(--space-6); }
/* Statement list with rounded-square steel markers */
.points { list-style: none; padding: 0; border-bottom: 1px solid var(--color-border); max-width: var(--measure); }
.points li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); padding-block: var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-text); }
.points li::before { content: ""; width: 7px; height: 7px; margin-top: 0.62em; border-radius: 1.5px; background: var(--color-accent-brand); }
/* Checklist */
.checks { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.checks > li { display: grid; grid-template-columns: 1.625rem minmax(0, 1fr); }
.checks > li::before {
content: ""; width: 0.875rem; height: 0.875rem; margin-top: 0.36em; background: var(--color-accent-brand);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5 5.5 10.5 11.5 3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5 5.5 10.5 11.5 3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Structured lists: numbered and alphabetic outlines (research areas) */
.outline { list-style: none; padding: 0; display: grid; gap: var(--space-4); counter-reset: outline; max-width: var(--measure); }
.outline > li { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); counter-increment: outline; }
.outline > li::before { content: counter(outline) "."; font: var(--weight-medium) var(--step--1)/1.9 var(--font-mono); color: var(--color-accent); }
.outline--alpha > li::before { content: counter(outline, upper-alpha) "."; }
.outline > li > * { grid-column: 2; }
.outline > li > :first-child { grid-row: 1; }
.outline .outline-title { font-weight: var(--weight-medium); }
.outline .checks { margin-top: var(--space-4); }
.outline--rule > li { padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
/* ==========================================================================
5. Buttons and links
========================================================================== */
.btn {
--btn-bg: var(--steel-700); --btn-fg: var(--color-on-accent); --btn-bd: transparent;
display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 2.875rem; padding: 0 1.25rem;
font: var(--weight-medium) 0.9375rem/1.2 var(--font-text); color: var(--btn-fg); background: var(--btn-bg);
border: 1px solid var(--btn-bd); border-radius: var(--radius-sm); text-decoration: none; cursor: pointer;
transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.btn:hover { --btn-bg: var(--steel-800); }
.btn:active { --btn-bg: var(--steel-900); }
.btn--secondary { --btn-bg: var(--color-surface); --btn-fg: var(--color-text); --btn-bd: var(--color-border-strong); }
.btn--secondary:hover { --btn-bg: var(--color-surface-hover); --btn-bd: var(--steel-400); }
.btn--secondary:active { --btn-bg: var(--n-50); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--color-accent); --btn-bd: transparent; padding-inline: var(--space-4); }
.btn--ghost:hover { --btn-bg: var(--color-surface-tint); }
.btn--sm { min-height: 2.25rem; padding: 0 0.875rem; font-size: 0.875rem; }
.band--ink .btn { --btn-bg: var(--steel-200); --btn-fg: var(--steel-950); }
.band--ink .btn:hover { --btn-bg: var(--color-inverse-accent-hover); }
.band--ink .btn--secondary { --btn-bg: transparent; --btn-fg: var(--color-text); --btn-bd: var(--color-border-strong); }
.band--ink .btn--secondary:hover { --btn-bg: var(--color-surface); --btn-bd: var(--steel-300); }
.btn .i-arrow, .btn .i-ext { transition: transform var(--dur-2) var(--ease-out-quint); }
.btn:hover .i-arrow, .link-arrow:hover .i-arrow { transform: translateX(3px); }
.btn:hover .i-ext, .link-arrow:hover .i-ext { transform: translate(2px, -2px); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
/* Inline, so a label that wraps keeps the arrow right beside its last (or, for --back, first) word.
A word joiner between label and svg removes the break opportunity an inline-block svg would add. */
.link-arrow {
font: var(--weight-medium) 0.9375rem/1.3 var(--font-text);
color: var(--color-accent); text-decoration: none; border-radius: var(--radius-xs);
}
.link-arrow > svg { display: inline-block; vertical-align: -0.125em; }
.link-arrow > span + svg { margin-inline-start: 0.5rem; }
.link-arrow > svg:first-child { margin-inline-end: 0.5rem; }
.link-arrow > span:not(:last-child)::after, .link-arrow > svg + span::before { content: "\2060"; }
.link-arrow > span { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; transition: text-decoration-color var(--dur-1) var(--ease-out); }
.link-arrow:hover > span { text-decoration-color: currentColor; }
.link-arrow .i-arrow, .link-arrow .i-ext { transition: transform var(--dur-2) var(--ease-out-quint); }
.link-arrow--back .i-arrow { transform: scaleX(-1); }
.link-arrow--back:hover .i-arrow { transform: scaleX(-1) translateX(3px); }
.tag {
display: inline-flex; align-items: center; gap: 0.35rem; min-height: 1.5rem; padding: 0 0.5rem;
font: var(--weight-medium) var(--step--2)/1 var(--font-text); letter-spacing: 0.02em; color: var(--color-accent);
background: var(--color-surface-tint); border: 1px solid var(--steel-200); border-radius: var(--radius-sm);
}
/* ==========================================================================
6. Header, primary navigation, dropdowns, language switch
========================================================================== */
.site-header {
position: sticky; top: 0; z-index: var(--z-header); background: var(--color-bg);
view-transition-name: site-header;
}
.site-header::after {
content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--color-border);
box-shadow: var(--shadow-edge); opacity: 0.001;
transition: opacity var(--dur-3) var(--ease-out); pointer-events: none;
}
.site-header[data-scrolled]::after, html:not(.js) .site-header::after { opacity: 1; }
.header-bar { display: flex; align-items: center; gap: var(--space-4); height: var(--header-h); }
/* Condensed header: once the page has scrolled (site.js sets [data-scrolled]), the bar slims to
--header-h-condensed, turns to frosted glass and shows its hairline. Nothing below it moves: the
header's box shrinks while margin-bottom takes up the difference (in-flow height stays --header-h),
.header-bar keeps its height, and the plate, hairline, brand, nav and tools move by transform only.
The strip under the condensed bar lets pointer events through to the page. Without JS the header
keeps its full height and the hairline is always on. */
.js .site-header { --shrink: calc(var(--header-h) - var(--header-h-condensed)); height: var(--header-h); }
.js .site-header::before {
content: ""; position: absolute; inset: 0 0 auto; height: var(--header-h); z-index: -1; background: var(--color-bg); pointer-events: none;
transition: transform var(--dur-4) var(--ease-out-quint), opacity var(--dur-3) var(--ease-out);
}
.js .site-header::after {
inset: calc(var(--header-h-condensed) - 1px) 0 auto; transform: translateY(var(--shrink));
transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-4) var(--ease-out-quint);
}
/* The brand multiplies as a group, so the emblem's white ground drops out over the glass too. */
.js .brand { mix-blend-mode: multiply; }
.js :is(.brand, .brand-emblem, .brand-text, .primary-nav, .header-tools) { transition: transform var(--dur-4) var(--ease-out-quint); }
/* The emblem's white ground can only multiply away inside the header's own layer; over the glass it
shows, so it is cut to the gear's circle (the gear's tips touch it): a white coin on frosted glass. */
.js .brand-emblem { transform-origin: 0 50%; border-radius: 50%; }
.js .brand-sub { transition: opacity var(--dur-3) var(--ease-out); }
.js .nav-indicator { transition: translate var(--dur-4) var(--ease-out-quint); }
.js .site-header[data-scrolled] { height: var(--header-h-condensed); margin-bottom: var(--shrink); }
.js .site-header[data-scrolled]::before { transform: translateY(calc(-1 * var(--shrink))); opacity: 0; }
.js .site-header[data-scrolled]::after { transform: none; }
.js .site-header[data-scrolled] .header-bar { pointer-events: none; }
.js .site-header[data-scrolled] :is(.brand, .nav-item, .header-tools > *) { pointer-events: auto; }
.js .site-header[data-scrolled] :is(.brand, .primary-nav, .header-tools) { transform: translateY(calc(var(--shrink) / -2)); }
.js .site-header[data-scrolled] .brand-emblem { transform: scale(0.8); }
.js .site-header[data-scrolled] .brand-text { transform: translate(calc(var(--emblem) * -0.2), var(--brand-lift)); }
.js .site-header[data-scrolled] .brand-sub { opacity: 0; }
/* The current-section indicator stays on the bar's bottom edge, the dropdowns just under it. */
.js .site-header[data-scrolled] :is(.nav-indicator, .dropdown) { translate: 0 calc(var(--shrink) / -2); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.js .site-header[data-scrolled] { background: var(--glass); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); }
}
@media (prefers-reduced-transparency: reduce) {
.js .site-header[data-scrolled] { background: var(--color-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Arriving at the top of a page from a condensed header (a view transition; the head script sets
html.header-arrival for 500ms): the new header opens out from the condensed state. The indicator is
held in place, because its own view-transition group carries it there. */
@keyframes header-lift { from { transform: translateY(calc(var(--shrink) / -2)); } }
@keyframes header-hold { from { translate: 0 calc(var(--shrink) / 2); } }
@keyframes header-emblem { from { transform: scale(0.8); } }
@keyframes header-name { from { transform: translate(calc(var(--emblem) * -0.2), var(--brand-lift)); } }
@keyframes header-sub { from { opacity: 0; } }
@keyframes header-plate { from { transform: translateY(calc(-1 * var(--shrink))); } }
@keyframes header-bare { from, to { background-color: transparent; } }
@keyframes header-rule { from { opacity: 1; transform: none; } }
.header-arrival .site-header { animation: header-bare var(--dur-4) linear; }
.header-arrival .site-header::before { animation: header-plate var(--dur-4) var(--ease-out-quint) backwards; }
.header-arrival .site-header::after { animation: header-rule var(--dur-4) var(--ease-out-quint) backwards; }
.header-arrival .site-header :is(.brand, .primary-nav, .header-tools) { animation: header-lift var(--dur-4) var(--ease-out-quint) backwards; }
.header-arrival .site-header .nav-indicator { animation: header-hold var(--dur-4) var(--ease-out-quint) backwards; }
.header-arrival .site-header .brand-emblem { animation: header-emblem var(--dur-4) var(--ease-out-quint) backwards; }
.header-arrival .site-header .brand-text { animation: header-name var(--dur-4) var(--ease-out-quint) backwards; }
.header-arrival .site-header .brand-sub { animation: header-sub var(--dur-3) var(--ease-out) backwards; }
.brand { --emblem: 2.5rem; --brand-lift: 0rem; display: flex; align-items: center; gap: 0.75rem; margin-right: auto; min-width: 0; color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.brand-emblem { flex: none; width: var(--emblem); height: var(--emblem); mix-blend-mode: multiply; }
.brand-text { display: grid; gap: 0.15rem; min-width: 0; line-height: 1.15; }
.brand-name { font: var(--weight-medium) 0.875rem/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--color-text); max-width: 12.5rem; }
.brand-sub { display: none; font: var(--weight-regular) 0.75rem/1.2 var(--font-text); color: var(--color-text-muted); }
/* --brand-lift: half the subtitle line and gap, so the name centres once the subtitle fades (condensed). */
@media (min-width: 30rem) {
.brand { --brand-lift: 0.525rem; }
.brand-name { max-width: none; font-size: 0.9375rem; }
.brand-sub { display: block; }
}
@media (min-width: 64rem) {
.brand { --emblem: 2.75rem; --brand-lift: 0rem; }
.brand-name { max-width: 11.5rem; font-size: 0.875rem; }
.brand-sub { display: none; }
}
@media (min-width: 82rem) {
.brand { --brand-lift: 0.525rem; }
.brand-name { max-width: none; font-size: 0.9375rem; }
.brand-sub { display: block; }
}
.primary-nav { display: none; align-self: stretch; }
@media (min-width: 64rem) { .primary-nav { display: flex; align-items: center; } }
.nav-list { display: flex; align-items: center; gap: 0.125rem; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; display: flex; align-items: center; border-radius: var(--radius-md); transition: background-color var(--dur-1) var(--ease-out); }
.nav-item:hover, .nav-item[data-open] { background: var(--n-50); }
.nav-link {
position: relative; display: block; padding: 0.5rem 0.625rem; border-radius: var(--radius-md);
font: var(--weight-medium) 0.9375rem/1.25 var(--font-text); color: var(--color-text-muted); text-decoration: none; white-space: nowrap;
transition: color var(--dur-1) var(--ease-out);
}
.has-menu > .nav-link { padding-right: 0.125rem; }
.nav-item:hover .nav-link, .nav-item[data-open] .nav-link, .nav-link[aria-current] { color: var(--color-text); }
.nav-indicator {
position: absolute; left: 0.625rem; right: 0.625rem; bottom: calc((var(--header-h) - 2.25rem) / -2); height: 2px;
background: var(--color-accent-brand); border-radius: 1px; view-transition-name: nav-indicator; pointer-events: none;
}
.has-menu .nav-indicator { right: 0.125rem; }
.nav-toggle {
display: grid; place-items: center; width: 1.625rem; height: 2.25rem; margin-right: 0.125rem; padding: 0;
border: 0; background: none; border-radius: var(--radius-sm); color: var(--color-text-muted);
}
.nav-toggle .i-chev { width: 0.625rem; height: 0.625rem; transition: transform var(--dur-2) var(--ease-out-quint); }
.nav-item[data-open] .nav-toggle .i-chev { transform: rotate(180deg); }
/* Without JS the chevron buttons would do nothing: hide them; :hover/:focus-within on the item opens the menu. */
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .has-menu > .nav-link { padding-right: 0.625rem; }
html:not(.js) .has-menu .nav-indicator { right: 0.625rem; }
.dropdown {
position: absolute; top: calc(100% + (var(--header-h) - 2.25rem) / 2); left: -0.25rem; z-index: var(--z-dropdown);
min-width: 19rem; max-width: 24rem; padding: 0.375rem; background: var(--color-surface-raised);
border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out-quint), translate var(--dur-4) var(--ease-out-quint), visibility 0s linear var(--dur-2);
}
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc((var(--header-h) - 2.25rem) / 2 + 2px); }
.nav-item[data-open] > .dropdown,
html:not(.js) .nav-item:is(:hover, :focus-within) > .dropdown {
opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
/* Right-aligned only when a left-aligned panel would cross the viewport edge: site.js measures on
open and sets .align-end. Without JS the menus nearest the end of the nav align right below 80rem. */
.nav-item.align-end > .dropdown { left: auto; right: -0.25rem; }
@media (max-width: 79.99rem) {
html:not(.js) .nav-list > .has-menu:nth-last-child(-n+3) > .dropdown { left: auto; right: -0.25rem; }
}
.dd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.nav-item[data-open] .dd-list > li { animation: dd-item var(--dur-3) var(--ease-out-quint) both; animation-delay: calc(var(--i, 0) * 25ms); }
@keyframes dd-item { from { opacity: 0; transform: translateY(-3px); } }
.dd-link {
display: grid; gap: 0.125rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-md);
color: var(--color-text); text-decoration: none; transition: background-color var(--dur-1) var(--ease-out);
}
.dd-link:hover, .dd-link:focus-visible { background: var(--n-50); }
.dd-link:focus-visible { outline-offset: -2px; }
.dd-title { display: flex; align-items: center; gap: 0.5rem; font: var(--weight-medium) 0.9375rem/1.3 var(--font-text); }
.dd-title .i-ext { color: var(--color-text-muted); }
.dd-meta { font: var(--weight-regular) var(--step--1)/1.35 var(--font-text); color: var(--color-text-muted); }
.dd-link[aria-current="page"] { background: var(--color-surface-tint); }
.dd-link[aria-current="page"] .dd-title { color: var(--color-accent); }
.dd-link[aria-current="page"] .dd-title::after { content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--color-accent-brand); }
.header-tools { flex: none; display: flex; align-items: center; gap: var(--space-4); }
.lang { display: flex; padding: 2px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font: var(--weight-medium) 0.75rem/1 var(--font-text); letter-spacing: 0.06em; }
.lang-opt { display: grid; place-items: center; min-width: 2.25rem; min-height: 2.125rem; padding: 0 0.5rem; border-radius: var(--radius-sm); color: var(--color-text-muted); text-decoration: none; transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
/* Current language: steel-50 fill with a --steel-500 inset edge (3.9:1 against the other option). */
.lang-opt[aria-current] { background: var(--steel-50); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--steel-500); }
a.lang-opt:hover { color: var(--color-text); background: var(--n-50); }
a.lang-opt:focus-visible { outline-offset: 1px; }
/* Below 30rem the header keeps only the link to the other language, as a 44px target. */
@media (max-width: 29.99rem) {
.header-tools { gap: var(--space-3); }
.header-tools > .lang { padding: 0; border: 0; }
.header-tools > .lang > .lang-opt[aria-current] { display: none; }
.header-tools > .lang > a.lang-opt { min-width: 2.75rem; min-height: 2.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); }
}
.menu-button {
display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.875rem 0 0.75rem;
border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface);
color: var(--color-text); font: var(--weight-medium) 0.875rem/1 var(--font-text); text-decoration: none; cursor: pointer;
transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.menu-button:hover { border-color: var(--steel-400); background: var(--color-surface-hover); }
.menu-button svg { flex: none; width: 1.125rem; height: 1.125rem; }
/* Below 22.5rem (320px phones) the header has no room for the language link; the drawer and the
footer carry it. */
@media (max-width: 22.49rem) { .header-tools > .lang { display: none; } }
@media (min-width: 64rem) { .menu-button { display: none; } }
/* ==========================================================================
7. Mobile drawer (