/* SecAppDev Academy: layout, header and footer (design system §5, §6).
   Only the tokens from tokens.css (D-8); no colour values of their own. */

*, *::before, *::after { box-sizing: border-box; }

/* Code in blog posts only (D-66): the design system has no monospace (§3); the design system
   file stays as it is, so the token is defined here. */
:root { --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

/* Page width 1040 px with 48 px side padding (20 px on phone), content 944 px (§5). */
.page {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ACADEMY under the wordmark in gold, in the header, the footer and on the cards (D-43). */
.wordmark__sub { color: var(--gold); }

/* Wordmark in the header (D-43): 28.8 px (26.4 px below 600 px), ACADEMY 13.2 px, gap 4.8 px. */
.site-header .wordmark__name { font-size: 1.8rem; }
.site-header .wordmark__sub { font-size: 13.2px; margin-top: 4.8px; }

/* Navigation links and Menu at 16 px (D-43); the Subscribe button keeps --text-ui. */
.site-nav { font-size: 1rem; }

/* The current section, also for pages below it (aria-current="true"). */
.site-nav a[aria-current] { color: var(--text); }

/* Header (§6): wordmark left, navigation right, 1 px line under it. */
.site-header { border-bottom: 1px solid var(--line); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-5);
  position: relative;
}
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav__links { display: flex; gap: 28px; align-items: center; }
.site-nav a { white-space: nowrap; }
.site-nav a:hover { color: var(--text); }
.site-nav .button,
.site-nav .button:hover { color: var(--on-brick); }

/* Menu: only below 821 px (#46, D-47, D-75), a disclosure without JavaScript. A chevron after "Menu"
   points up when open, as on the toggle "Filters" (D-37); the open list on --panel. */
.site-nav__menu { display: none; }
.site-nav__menu summary {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  cursor: pointer;
  color: var(--text);
  list-style: none;
}
.site-nav__chevron { flex: none; transition: transform 0.15s ease; }
.site-nav__menu[open] .site-nav__chevron { transform: rotate(180deg); }
.site-nav__menu summary::-webkit-details-marker { display: none; }
.site-nav__menu ul {
  position: absolute;
  top: 100%;
  right: var(--gutter);
  z-index: 1;
  display: grid;
  gap: var(--space-4);
  min-width: 200px;
  padding: var(--space-4) var(--space-5);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Navy opening of a light page (§7): label, opening title, one sentence. */
.opening__body {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-7) 56px;
}
.opening__body > * { margin: 0; }
.opening__intro { color: var(--text-muted); }

.content { padding-block: var(--space-7); }
.content > :first-child { margin-top: 0; }

/* Text pages (§7, "Text pages"; §6 "Article"): plain running text in the 640 px reading
   column on light, headings h2/h3, links blue. Also the 404 page. */
.prose { max-width: var(--reading); }
.prose > * { margin: 0; }
.prose > * + * { margin-top: var(--space-4); }
.prose > h2 { margin-top: var(--space-7); }
.prose > h3 { margin-top: var(--space-6); }
/* Headings of a blog post on its lecture page start at h4, under the post title, the h3 (D-75).
   The tokens style h1 to h3 only: these take the brand font at body size. */
.prose > h4, .prose > h5, .prose > h6 { margin-top: var(--space-6); font: 500 var(--text-base)/1.4 var(--font-brand); }
.prose ul, .prose ol { padding-left: var(--space-5); }
.prose li + li { margin-top: var(--space-2); }

/* Code and images in blog posts (D-66). A code block is a panel that scrolls on its own, never
   the page; it keeps the paragraph margin of .prose. Inline code without background. */
.prose pre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  overflow-x: auto;
  font-family: var(--font-code);
  font-size: 0.875em;
  line-height: 1.5;
}
.prose code { font-family: var(--font-code); font-size: 0.9em; }
.prose pre code { font-size: inherit; }
.prose img { max-width: 100%; height: auto; }

/* Footer (§6), identical on every page: a navy band (D-77). The class .navy sets its tokens;
   the background is --navy-deep on light and navy pages and in dark mode, so it also stands
   apart from a navy page. The 1 px line on top is the navy --line. */
.site-footer {
  background: var(--navy-deep);
  border-top: 1px solid var(--line);
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--text-muted);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(min(100%, 360px), 1fr) auto;
  gap: var(--space-5) var(--space-7);
  padding-block: var(--space-6) var(--space-8);
}
.site-footer p { margin: 0; }
.site-footer__main { display: grid; gap: var(--space-3); justify-items: start; }
.site-footer__main > p { max-width: 52ch; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2) 20px; }
.site-footer__column { display: grid; gap: var(--space-2); align-content: start; padding: 20px 24px; align-self: start; text-align: center; }
/* Partners (D-79, review of pull request 101): the column is one light panel (.panel.light,
   D-50), centered. Each logo is a 128 x 48 px link without a tile, two per row with the last one centered below
   (one per row at 600 px and below); multiply blends a white logo background into the panel. The
   focus ring is the one of the tokens, in the light --blue. */
.site-footer .partners { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; max-width: 280px; margin-inline: auto; }
.partner { display: block; width: 128px; height: 48px; }
.partner img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* Wordmark in the footer (D-43): 24 px, ACADEMY 13.2 px, gap 18 % of the wordmark. */
.site-footer .wordmark__name { font-size: 1.5rem; }
.site-footer .wordmark__sub { font-size: 13.2px; margin-top: calc(1.5rem * 0.18); }

/* Visible to screen readers only (labels of fields whose purpose is clear). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Video talk page (§7): opening with label, title, facts, topics and portraits (§6). */
.talk-opening {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-7);
  align-items: end;
}
.talk-opening__text { display: grid; gap: 14px; min-width: 0; }
.talk-opening__text > * { margin: 0; }
.ports { display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.port {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  width: 168px;
  font-size: var(--text-small);
  line-height: 1.4;
}
.port img, .card__ports img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.port__text { display: grid; }
.port__name { font-weight: 500; }
.port__role { color: var(--text-muted); }

/* Ignite player (§6, Video): full content width, 16:9, on --video-bg. */
.video { margin-top: var(--space-6); overflow: hidden; }
.video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Abstract | chapters: reading column of 640 px, the chapters take the rest (§5). */
.talk-body {
  display: grid;
  grid-template-columns: minmax(0, var(--reading)) minmax(240px, 1fr);
  gap: var(--space-8);
  margin-top: 40px;
}
.talk-body--single { grid-template-columns: minmax(0, var(--reading)); }
.talk-text { display: grid; gap: 40px; align-content: start; }
.talk-body section { display: grid; gap: var(--space-3); align-content: start; }
.talk-body section > * { margin: 0; }
/* Handouts block (§6 "File block", D-60, D-64): a panel (.panel: --panel, 1 px --line border,
   --radius, 24 px padding) with one row: the file icon, the text at h3 style, the brick
   Download button. Below 600 px the button goes under the text. */
.file { display: flex; align-items: center; gap: 16px; }
.file__icon { flex: none; color: var(--text-muted); }
.file__text { flex: 1; font: 500 var(--text-h3)/1.3 var(--font-brand); }
.file__button { flex: none; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }

.chapters { list-style: none; margin: 0; padding: 0; }
.chapters time { font-variant-numeric: tabular-nums; }

/* Archived lecture (D-70): the notice directly under the opening, a panel on both page types,
   and the quiet label ARCHIVED after the label of the relation in a row. */
.archived { margin-top: var(--space-6); }
.archived-label { margin-left: var(--space-3); }

/* Newsletter and course panels, side by side (§6). */
.panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: 56px;
}
.panel > * { margin: 0; }
/* The heading looks like an h3 (§6) at any level (review of #37). */
.panel h2 { font-size: var(--text-h3); line-height: 1.3; letter-spacing: -0.005em; }
.panel__text { color: var(--text-muted); font-size: var(--text-ui); }
.panel a, .panel .button { justify-self: start; }

/* Newsletter overlay (#49): a native <dialog> with the Flexmail form, always light (review of
   #50): the .light surface of the tokens (D-50) sets the colours, on a navy page and in dark mode
   too, so Flexmail's light result frame fits. --bg with a 1 px --line border. */
.newsletter-dialog {
  width: min(480px, 100vw - 32px);
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}
.newsletter-dialog::backdrop { background: color-mix(in srgb, var(--navy) 60%, transparent); }
.newsletter-dialog__body { position: relative; display: grid; gap: var(--space-3); padding: 28px; }
.newsletter-dialog__body > * { margin: 0; }
.newsletter-dialog h2 { font-size: var(--text-h3); line-height: 1.3; letter-spacing: -0.005em; padding-right: var(--space-6); }
.newsletter-dialog__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text-muted);
  font: 400 24px/1 var(--font-text);
  cursor: pointer;
}
.newsletter-dialog__close:hover { color: var(--text); }
/* The form at a fixed height: three fields, the button and Flexmail's 70 px result frame, without
   scrolling. Its body keeps 4 px around the form for the focus ring; the negative margin lines the
   fields up with the text. */
.newsletter-dialog__form { position: relative; margin-top: var(--space-2); }
/* While the form loads (#49 review): one muted line over the empty frame, which keeps its height. */
.newsletter-dialog__loading {
  position: absolute;
  inset: 0 0 auto;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-ui);
}
.newsletter-dialog__form iframe {
  display: block;
  width: calc(100% + 8px);
  height: 348px;
  margin: -4px;
  border: 0;
}

/* Related talks (§6): three tiles in a row, the share card as thumbnail. */
.related { display: grid; gap: 20px; margin-top: 56px; }
.related > h2 { margin: 0; }
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.tile { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.tile > * { margin: 0; }

/* Front page (D-76): Latest lectures as tiles in a 2 × 2 grid (one column at 600 px and below),
   the share card at the full width of the tile, as the rows on a phone (D-46); then the course
   panel, 56 px below, across the content width with its text in the reading column. */
.latest { display: grid; gap: 20px; }
.latest > * { margin: 0; }
.latest .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.latest .thumb { width: 100%; container-type: inline-size; }
.latest .card { transform: scale(tan(atan2(100cqw, 600px))); }
.front-course { margin-top: 56px; }
.front-course > * { max-width: var(--reading); }

/* Share card in HTML (§8, D-14), drawn at half size (600 × 315) and scaled to 296 × 155.
   The play icon half outside the top-right corner (#46). */
.thumb {
  width: 296px;
  max-width: 100%;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  border-radius: var(--radius);
}
.card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  width: 600px;
  height: 315px;
  padding: var(--space-6);
  overflow: hidden;
  border: 1px solid var(--line);
  transform: scale(0.4933);
  transform-origin: top left;
}
.card__glyph {
  position: absolute;
  right: -56px;
  top: -64px;
  width: 320px;
  height: 320px;
  color: var(--share-icon);
}
.card__text, .card__ports { position: relative; }
.card__text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card__wordmark .wordmark__name { font-size: 18px; }
.card__wordmark .wordmark__sub { font-size: 11px; margin-top: calc(18px * 0.18); }
.card__label { margin-top: auto; font-size: 11px; }
.card__title {
  font: 500 32px/1.08 var(--font-brand);
  letter-spacing: -0.025em;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.card__format { font-size: var(--text-small); font-weight: 500; }
.card__meta { font-size: 13px; }
.card__ports { display: flex; gap: 10px; align-self: end; }
.card__ports picture { width: 104px; }

/* Speaker page (§7): navy opening with the large portrait (220 px, §6) to the right of the name. */
.speaker-opening {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-7);
  align-items: end;
}
.speaker-portrait { width: 220px; padding-block: var(--space-7) 56px; }
.speaker-portrait img, .speaker-row img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.speaker-bio { max-width: var(--reading); }
.speaker-bio > * { margin: 0; }
.speaker-bio > * + * { margin-top: var(--space-4); }
.speaker-talks { display: grid; gap: var(--space-4); margin-top: 56px; }
.speaker-talks > h2 { margin: 0; }

/* Blog posts on the lecture page (D-75), above the panels, the whole section in the reading column
   (640 px): the heading, then one article per post with the quiet label, the title (h3), the facts
   line and the text (.prose); between the articles the 1 px --line of the catalog rows. No grid or flex here: a long line in a
   code block scrolls in its block, never the page (D-66). */
.lecture-posts { max-width: var(--reading); margin-top: 56px; }
.lecture-posts > h2 { margin: 0; }
.lecture-post { padding-block: var(--space-6); }
.lecture-post:last-child { padding-bottom: 0; }
.lecture-post + .lecture-post { border-top: 1px solid var(--line); }
.lecture-post > * { margin: 0; }
.lecture-post > * + * { margin-top: var(--space-2); }
.lecture-post > .prose { margin-top: var(--space-5); }

/* Catalog rows (§6): thumbnail (300 × 157.5, #46), then label, title, facts and topics; 1 px line between rows.
   The overview of the speakers uses the same row with the portrait in place of the thumbnail. */
.rows, .speaker-rows { list-style: none; margin: 0; padding: 0; }
.row, .speaker-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  max-width: none;
  padding-block: 20px;
}
.row + .row, .speaker-row + .speaker-row { border-top: 1px solid var(--line); }
.row:first-child, .speaker-row:first-child { padding-top: 0; }
.row__text { display: grid; gap: var(--space-2); min-width: 0; }
.row__text > * { margin: 0; }
.row .thumb { width: 300px; }
.row .card { transform: scale(0.5); }
.speaker-row picture { width: 96px; }
.speaker-row h2 { font-size: var(--text-h3); line-height: 1.3; letter-spacing: -0.005em; }
/* The count line (D-74, D-77): muted as .facts, in italic (the fonts have no italic files, so the
   browser slants them; the SVG icons stay upright). Each count is its 12 px icon and its text. The
   gap also follows the · of .facts, a flex item inside the span, so its right margin gives the
   gap back: the · stays centred between the counts. */
.speaker-counts { font-style: italic; }
.speaker-counts > span { display: inline-flex; align-items: center; gap: 6px; }
.speaker-counts > span > svg { flex: none; }
.speaker-counts > * + *::before { margin-right: calc(0.55em - 6px); }

/* Clickable tiles and rows (D-78): the title link stays the only link to the lecture or speaker;
   its ::after covers the whole tile or row, so a click anywhere opens it, the cursor is a pointer
   and the title shows its hover state (a:hover), with no other effect. Other links inside (the
   topic links) sit above it. Keyboard focus stays on the title; its ring surrounds the whole tile
   or row instead of the title alone. Only where :has() works: elsewhere the title keeps its own
   ring (review of #98). */
.tile, .row, .speaker-row { position: relative; }
.tile h3 a::after, .row h3 a::after, .speaker-row h2 a::after { content: ""; position: absolute; inset: 0; }
.row .topics a { position: relative; z-index: 1; }
@supports selector(:has(a)) {
  .tile h3 a:focus-visible, .row h3 a:focus-visible, .speaker-row h2 a:focus-visible { outline: none; }
  .tile:has(> h3 a:focus-visible), .row:has(> .row__text > h3 a:focus-visible), .speaker-row:has(> .row__text > h2 a:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
}

/* Catalog (§7): under the navy opening, on light, the toggle "Filters" and its panel (D-36).
   The toggle is a subtle button with a sliders icon, the number of active filters and a
   chevron that points up when open (#38). Every group starts with All.
   Each option is a pill with a small round switch: the native checkbox or radio, drawn with
   appearance: none. The only pills on the site (D-36): buttons keep 2 px corners.
   js/catalog.js shows the toggle. */
.filters-toggle {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-5);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tile);
  color: var(--text);
  font: 500 var(--text-ui)/1.2 var(--font-text);
  cursor: pointer;
}
.filters-toggle:hover { border-color: var(--text-muted); }
.filters-toggle svg { flex: none; }
.filters-chevron { transition: transform 0.15s ease; }
.filters-toggle[aria-expanded="true"] .filters-chevron { transform: rotate(180deg); }
.filters-count__number { color: var(--text); font-variant-numeric: tabular-nums; }
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) 48px;
  align-items: start;
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-small);
}
.filter { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0; }
.filter__name { float: left; width: 100%; padding: 0; margin-bottom: var(--space-1); color: var(--text-muted); }
.filter label {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--tile);
  color: var(--text);
  cursor: pointer;
}
.filter label:hover { border-color: var(--text-muted); }
.filter label:has(input:checked) { border-color: var(--text); }
.filter label:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.filter input {
  appearance: none;
  position: relative;
  flex: none;
  width: 24px;
  height: 14px;
  margin: 0;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
}
.filter input:focus-visible { outline: none; }
.filter input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--text-muted);
  transition: left 0.15s ease;
}
.filter input:checked { background: var(--blue); }
.filter input:checked::before { left: 12px; box-shadow: none; }
/* Dark mode (D-36): --tile stays white, so pill, knob and toggle take --panel; light mode keeps --tile. */
@media (prefers-color-scheme: dark) {
  .filter label, .filter input::before { background: var(--panel); }
  .filters-toggle { background: var(--panel); }
}
.catalog-empty { margin: 0; color: var(--text-muted); }
.filters-toggle[hidden], .filters[hidden], .catalog-empty[hidden], .row[hidden] { display: none; }
/* Rows hidden by a filter: the line goes between the rows that show, none above the first. */
.catalog > .row { border-top: 0; padding-top: 20px; }
.catalog > .row:not([hidden]) ~ .row { border-top: 1px solid var(--line); }
.catalog > .row:not(.row:not([hidden]) ~ .row) { padding-top: 0; }

/* Below 900 px (D-30): the talk page stacks before the phone layout. Opening: label, title,
   facts, topics, then the portraits at 168 px in a row that wraps; abstract, then the chapters
   at full width (72 px timecodes); newsletter, then course. */
@media (max-width: 900px) {
  .talk-opening { grid-template-columns: 1fr; row-gap: var(--space-5); }
  .ports { flex-wrap: wrap; }
  .talk-body { grid-template-columns: 1fr; gap: 40px; }
  .panels { grid-template-columns: 1fr; }
}

/* Menu up to 820 px (#46, D-47, again since D-75): from 821 px wordmark, the four links and
   Subscribe fit in one row (about 702 px measured, in 725 px). Below, the row holds wordmark and
   Menu; Subscribe is the last item of the menu (D-43). */
@media (max-width: 820px) {
  .site-nav { gap: var(--space-4); }
  .site-nav__links { display: none; }
  .site-nav > .button { display: none; }
  .site-nav__menu { display: block; }
}

/* Phone (§5, §6): everything stacks. */
@media (max-width: 600px) {
  .site-header__inner { padding-block: 18px; }
  .site-header .wordmark__name { font-size: 1.65rem; }
  .opening__body { padding-block: var(--space-6) 40px; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer .partners { max-width: 128px; }
  /* Talk page: portraits as 48 px headshots next to each name, under the title (§6). */
  .talk-opening { grid-template-columns: 1fr; row-gap: var(--space-5); }
  .ports { flex-direction: column; gap: 10px; }
  .port { grid-template-columns: 48px 1fr; gap: var(--space-3); align-items: center; width: auto; }
  .video { margin-top: var(--space-5); }
  .talk-body { grid-template-columns: 1fr; gap: 40px; margin-top: var(--space-6); }
  .panels, .tiles { grid-template-columns: 1fr; }
  .latest .tiles { grid-template-columns: 1fr; }
  /* Speaker page: the portrait at 120 px (§6), under the facts; catalog rows stack (§6). */
  /* Handouts block: icon and text on the first line, the button under the text (D-64). */
  .file { flex-wrap: wrap; }
  .file__text { flex-basis: calc(100% - 56px); }
  .file__button { margin-left: 56px; }
  .speaker-opening { grid-template-columns: 1fr; }
  .speaker-opening .opening__body { padding-bottom: var(--space-5); }
  .speaker-portrait { width: 120px; padding-block: 0 40px; }
  .row { grid-template-columns: 1fr; gap: var(--space-3); }
  /* The thumbnail at the full width of the column, the card scaled to it (#46):
     tan(atan2()) turns 100cqw / 600px into a number for scale(). */
  .row .thumb { width: 100%; container-type: inline-size; }
  .row .card { transform: scale(tan(atan2(100cqw, 600px))); }
  .filters { flex-direction: column; gap: var(--space-5); }
}

/* Below 400 px the header wordmark keeps the phone size of the tokens: 22 px, ACADEMY 11 px,
   gap 4 px (D-43), so wordmark and Menu fit on one line at 320 px. */
@media (width < 400px) {
  .site-header .wordmark__name { font-size: 1.375rem; }
  .site-header .wordmark__sub { font-size: 11px; margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}