/* ==========================================================================
   Mutūn — Website "Zawiya Library" (v10, rebuilt onto the claude.ai "Mutūn
   Design System" 2026-09-27, MUT-185)
   Design system lifted from the brand seal: forest green + beige + gilt,
   Cormorant Garamond throughout, an ex-libris / bookplate reading-circle feel.
   FULLY self-contained: every font is bundled here, no external request of any
   kind. No JavaScript — the About dropdown is pure CSS.

   PROMOTED FROM mutun_website_versions/v10 BY MUT-110, which also made the
   fonts local. v10 pulled Cormorant Garamond and Amiri from fonts.googleapis
   .com, which meant the brochure site had a third-party dependency the drills
   had already been rid of (MUT-79).

   ── LINK ORDER IS A CONTRACT (MUT-112) ────────────────────────────────────
   Every page must link the brand token file FIRST:

       <link rel="stylesheet" href="mutun-theme.css?v=…">   <!-- 1st -->
       <link rel="stylesheet" href="styles.css?v=…">        <!-- 2nd -->

   (The ?v= is a content hash, stamped by tools/website-css-fingerprint.js —
   run it after editing this file, or the test suite goes red.)

   because everything below resolves against the brand's --mtn-* raw palette
   and --color-* semantic roles. Linking this file alone leaves every colour
   undefined — the page renders as unstyled black-on-white with no console
   error, a failure that looks like a missing file rather than a misordered
   one. This is the same contract qasas-core.css states for the app side
   (ADR 0021/0022); test/website-theme.test.js guards the copy, and the
   ordering is checked by test/theme-conformance.test.js.

   ── WHY THERE IS A COPY OF THE THEME IN THIS DIRECTORY ────────────────────
   mutun-theme.css here is a MECHANICAL COPY of brand/mutun-theme.css, not a
   second authored file. The website is a separate Cloudflare Pages project
   with its own root: it cannot @import up into the app's directory, and a
   shared path would couple two deploys that exist precisely to have
   independent cadences and Access policies. So the file is copied, and
   test/website-theme.test.js asserts the copy is byte-identical to the
   source. EDIT THE SOURCE, then re-copy. A token changed here is a token
   the apps never see, which is the exact divergence ADR 0021 was written to
   end and MUT-110 accidentally re-created.

   It sits at the website ROOT, not in a brand/ subdirectory, because its
   @font-face urls are relative to the stylesheet ("fonts/Amiri-…woff2") and
   fonts/ is here. The eight faces this file used to declare itself — four
   Cormorant cuts, three Amiri, one Bouazzi — were byte-for-byte the theme's
   own, against the same files, so they are gone: the theme declares them now.
   Licences still ship beside the files (OFL-Amiri.txt,
   OFL-CormorantGaramond.txt, both OFL 1.1; Bouazzi Maghribi is MIT,
   Dr. Ahmed Bouazzi's Maghrebi-script revival).
   ========================================================================== */

:root {
  /* ── The site's palette names, kept as ALIASES onto the brand tokens ────
   * (MUT-112, the pattern of ADR 0022 decision 5.) --green, --gilt and the
   * rest predate the theme. The names survive rather than being swept for two
   * reasons: 404.html carries an inline <style> that spells
   * var(--green) and var(--arabic), so the names are part of this file's
   * public surface; and keeping them makes the migration a delete-the-hex
   * refactor instead of a rename across seven pages, exactly as it did for
   * qasas-core.css.
   *
   * When MUT-112 made these aliases, every COLOUR below resolved to the identical
   * string it used to hold — all twelve verified in a browser, so that pass
   * changed no pixel. (MUT-185 then retuned the palette under them, which is
   * the point of aliasing: the names here did not move.) ONE value is not
   * identical and it is not a colour: --serif gains "Times New Roman" from the
   * theme's chain (see the note at --serif). Said here as well as there, because
   * "changes nothing" is the kind of blanket claim that stops being read.
   *
   * Prefer the SEMANTIC --color-* role over the raw --mtn-* tone wherever a role
   * fits, because a role is what a later retune can reach; a raw tone is named
   * after ink, not use. */

  /* Forest green, and TWO roles resolve to this one tone: --color-ink (text) and
   * --color-accent-strong (solid grounds). The site had one name, --green, doing
   * both jobs.
   *
   * --green is now the TEXT role only. The three places it was a ground — the
   * solid button, the brand disc, the footer band — spell --color-accent-strong
   * directly instead. The two roles held the same tone until MUT-185, which gave
   * text its own darker green (--mtn-green-ink #12291d) and left the grounds on
   * #1d4030 — exactly the retune this split was made for: without it, darkening
   * "primary text on light" would have silently retinted the footer. Flagged by both review rounds
   * independently, which is the signal to fix rather than weigh.
   *
   * The NAME stays because it is this file's public surface: 404.html's inline
   * <style> spells var(--green) — as a text colour, so it lands on the right role. */
  --green:       var(--color-ink);
  /* No role for the deeper green: the apps have no hover-dark or footer tone,
   * so the theme leaves it a raw tone and four app pages name it raw too. */
  --green-deep:  var(--mtn-green-deep);
  --cream-page:  var(--color-surface);
  --cream-card:  var(--color-surface-raised);
  --cream-inner: var(--color-surface-inset);
  --gilt:        var(--color-accent);
  --gilt-light:  var(--color-accent-on-dark);   /* gilt ON the green ground */
  --gilt-pale:   var(--color-muted-on-dark);    /* faint text ON green */
  --link:        var(--color-link);
  --link-hover:  var(--color-link-hover);
  --ink-muted:   var(--color-ink-muted);

  /* NAME COLLISION, deliberately resolved this way. The theme declares
   * `--hairline: 1px` — a LENGTH, its hairline width. The site has always used
   * --hairline as a COLOUR and always writes the width literally
   * (`1px solid var(--hairline)`), so this declaration shadows the theme's and
   * nothing here loses a value it was using. It is the mirror of ADR 0022
   * decision 4's --radius clash, settled the other way because there the
   * colliding names meant the same thing and here they do not. Do not "fix"
   * this by renaming to --hairline-color without checking 404.html and every
   * page's inline <style>. */
  --hairline:    var(--color-line);

  /* Type. --font-body and --font-display are the same stack in the theme; the
   * site names one family, so it takes the body role. The theme's chain adds
   * "Times New Roman" before the generic serif — a fallback improvement that
   * is invisible while the self-hosted Cormorant loads, which is always. */
  --serif: var(--font-body);
  /* --arabic STAYS LOCAL, and that is the decision, not an oversight. The
   * theme's --font-arabic is "Amiri" first and deliberately excludes Bouazzi
   * Maghribi: drill text must read in the naskh the learner sees elsewhere.
   * The site's Arabic is the متون wordmark and nothing else, so Maghribi leads
   * here. Two different chains for two different jobs — aliasing them would
   * silently set the wordmark in naskh. */
  --arabic: "Bouazzi Maghribi", "Amiri", serif;

  /* Measure. No brand token: the theme owns colour, type and shape, not the
   * site's column widths. */
  --measure: 42rem;
  --wide: 68rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream-page);
  color: var(--ink-muted);
  font-family: var(--serif);
  font-size: var(--text-body);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--green);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}

p { margin: 0 0 1.1rem; }

a { color: var(--link); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--link-hover); }

.ar { font-family: var(--arabic); }

/* --- shared building blocks ------------------------------------------------ */

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem; }
.measure { max-width: var(--measure); margin-left: auto; margin-right: auto; }

/* TEXT IN THE GILT FAMILY TAKES --color-accent-text, never --gilt. The light
   gilt is for rules, borders and fills; as the ink of a 16px label it fails
   contrast on cream. Every label below follows that split: the words go dark
   tan, the hairlines beside them stay gilt. (Design system, 2026-09-27.) */
/* --text-label, not the theme's --text-eyebrow: the design puts the eyebrow on
   the 16px label step, and the site takes it now while the drills keep .72rem
   (see the note at --text-eyebrow in mutun-theme.css). */
.eyebrow {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-text);
  font-weight: 600;
  margin: 0;
}

/* gilt rule flanked eyebrow, centered */
.eyebrow-rule {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  color: var(--color-accent-text);
}
.eyebrow-rule::before,
.eyebrow-rule::after {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: var(--gilt);
  opacity: .8;
}

/* buttons */
.btn {
  display: inline-block;
  font-family: var(--serif);
  font-size: var(--text-button);
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
  font-weight: 600;
  padding: .72rem 1.5rem;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-solid { background: var(--color-accent-strong); color: var(--cream-card); border-color: var(--color-accent-strong); }
.btn-solid:hover { background: var(--green-deep); color: var(--cream-card); border-color: var(--green-deep); }
.btn-ghost { background: transparent; color: var(--green); border-color: var(--gilt); }
.btn-ghost:hover { background: var(--color-accent-soft); color: var(--green); }
/* .btn-block is gone with MUT-114: its only three users were Enroll, Subscribe
   and the contact form's Send Message, and all three pages/sections went. */

/* ==========================================================================
   NAV
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream-card);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 4.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* brand lockup — green disc mark + wordmark */
.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand-mark {
  width: 42px; height: 42px; flex: none;
  background: var(--color-accent-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.brand-word {
  font-size: var(--text-title-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wordmark);
  color: var(--green);
  margin-right: calc(-1 * var(--tracking-wordmark)); /* optical trailing space from tracking */
  line-height: 1;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.55rem;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-nav); /* .14em — the brand's nav tracking */
  text-transform: uppercase;
  font-weight: 600;
}
.nav-links a { color: var(--ink-muted); }
.nav-links a:hover { color: var(--green); }
.nav-links a.active { color: var(--green); }
.nav-links a.active::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 3px;
  background: var(--gilt);
}

/* About dropdown — pure CSS.
 *
 * NO aria-expanded, AND NO aria-haspopup EITHER (MUT-115). The button used to
 * carry aria-haspopup="true", which announces "this opens a popup" — and there
 * was no aria-expanded to say whether it currently is open. That state cannot be
 * supplied here: aria-expanded is a STATE, it has to change when the menu opens,
 * and the site runs no JavaScript by design (zero <script> tags anywhere, pinned
 * by test/website-theme.test.js). A static aria-expanded="false" would be worse
 * than the omission — it would assert "collapsed" while the menu is visibly open.
 *
 * So the markup now claims nothing rather than claiming half. What it still does:
 * opens on :hover and on :focus-within, and once open both links are reachable by
 * Tab. The reachability comes from the :focus-within rule below flipping the menu
 * to visibility:visible — NOT from visibility:hidden, which is what keeps the links
 * out of the tab order and the accessibility tree while the menu is closed. Two
 * halves of one mechanism, and worth stating separately: the hidden half is why
 * there are no invisible-but-focusable links, the visible half is why a keyboard
 * user can reach them at all.
 *
 * WHAT IS ACCEPTED: a screen-reader user is not told the submenu exists until
 * they Tab into it. That is defensible for TWO nav links that are both reachable.
 * REOPEN THIS if the menu grows, or if it ever holds something a user could not
 * find another way — at which point <details>/<summary> is the answer, since it
 * gets a browser-managed expanded state with no script. The cost of <details> is
 * that it does not open on hover, which is why it was not chosen for two links.
 *
 * Do not "improve" this with role="menu"/role="menuitem": those imply arrow-key
 * navigation this markup does not implement, so they would make it worse. */
.dropdown { position: relative; }
.dropdown-toggle {
  color: var(--ink-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: none; border: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  padding: 0;
}
.dropdown:hover .dropdown-toggle,
.dropdown:focus-within .dropdown-toggle { color: var(--green); }
.dropdown-toggle.active { color: var(--green); }
.caret { font-size: .7em; }
.dropdown-menu {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  margin-top: .7rem;
  min-width: 12rem;
  background: var(--cream-card);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  box-shadow: var(--shadow-pop); /* 0 14px 34px -20px rgba(29,64,48,.5) */
  padding: .35rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown-menu::before { /* bridge the hover gap */
  content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: .8rem;
}
.dropdown-menu a {
  display: block;
  padding: .5rem .8rem;
  font-size: var(--text-label);
  letter-spacing: .12em;
  color: var(--ink-muted);
  border-radius: 2px;
}
.dropdown-menu a:hover { background: var(--cream-inner); color: var(--green); }

/* ==========================================================================
   HERO (index) — the seal, bookplate framed
   ========================================================================== */

.hero {
  text-align: center;
  padding: 4.5rem 1.5rem 4rem;
  /* A gilt wash at 10%. The theme's --color-accent-soft is the gilt wash the
     apps share, but it is fixed at 14% and this gradient is not — so the alpha
     is authored here, over the brand HUE, rather than rounded to a token that
     is close but not equal. color-mix with transparent is the same idiom
     qasas-core.css uses for --gilt-wash, and computes to exactly the
     rgba(179,145,105,.10) this rule used to spell. */
  background:
    radial-gradient(120% 90% at 50% 0%,
      color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 60%),
    var(--cream-page);
}
/* The ex-libris plate — raised cream, a gilt border, and a second gilt rule 5px
   outside it. The design's signature frame; the hero and the Courses page's
   Coming soon both wear it, and set only their own width and padding. */
.plate {
  margin: 0 auto;
  background: var(--cream-card);
  border: 1px solid var(--gilt);
  outline: 1px solid var(--gilt);
  outline-offset: 5px;
  border-radius: 2px;
}
.hero-plate {
  max-width: 44rem;
  padding: 3rem 2rem 3.2rem;
}
.hero .seal { margin: 0 auto .6rem; display: block; }
/* The MUTŪN wordmark. --tracking-wordmark is shared with the nav's .brand-word
   (the footer lockup is smaller and sets its own .2em). margin-right cancels the
   trailing letter-space the tracking adds after the final N, so it is derived
   from the same token: the two must always be equal and opposite. */
.hero-word {
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--tracking-wordmark);
  color: var(--green);
  margin: .6rem 0 .1rem;
  margin-right: calc(-1 * var(--tracking-wordmark));
}
/* The sub-line is the design's one off-scale size, 19px bold: the HeroPlate
   sets it a step above the 18px eyebrow under it, and rounding it onto the
   nine-level scale would collapse that step. */
.hero-sub {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1.4rem;
}
.hero-eyebrow { margin-bottom: 1.3rem; font-size: var(--text-small); font-weight: 700; }
.hero-tagline {
  font-style: italic;
  font-size: var(--text-title-sm);
  font-weight: 500;
  color: var(--green);
  margin: 0 0 1.9rem;
}
.hero-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   PAGE HEADER (inner pages)
   ========================================================================== */

.page-header {
  text-align: center;
  padding: 4rem 1.5rem 3.4rem;
  border-bottom: 1px solid var(--hairline);
  /* 9%, a hair fainter than the hero's 10% — local alphas over the brand hue,
     for the reason given at .hero above. */
  background:
    radial-gradient(120% 90% at 50% 0%,
      color-mix(in srgb, var(--color-accent) 9%, transparent), transparent 60%);
}
.page-header .eyebrow-rule { margin-bottom: 1.1rem; }
.page-title { font-size: var(--text-title-lg); letter-spacing: .02em; }
.page-lede {
  margin: .9rem auto 0;
  max-width: 38rem;
  font-style: italic;
  color: var(--ink-muted);
  font-size: var(--text-lede);
}

/* ==========================================================================
   SECTIONS / PROSE
   ========================================================================== */

.section { padding: 4.5rem 1.5rem; }
/* .section-tint went with MUT-114 — the homepage subscriptions section was its
   only user. If a tinted band is wanted again, it is a two-line rule over
   --cream-inner and --hairline, not a token that needs reviving. */

.prose h2 { font-size: var(--text-title-md); margin-bottom: 1rem; }
.prose p { color: var(--ink-muted); }
/* The colour is restated because `.prose p` (0,1,1) outranks `.eyebrow`
   (0,1,0): the Welcome eyebrow is a <p> inside .prose, and without this it
   rendered in body ink, not gilt — since v10, found by measuring it. */
.prose .eyebrow { margin-bottom: 1.1rem; color: var(--color-accent-text); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--text-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--link);
}
.arrow-link:hover { color: var(--link-hover); }

.blockquote {
  border-left: 2px solid var(--gilt);
  padding: .3rem 0 .3rem 1.6rem;
  margin: 2rem 0;
}
.blockquote p {
  font-style: italic;
  font-size: var(--text-quote);
  line-height: 1.4;
  color: var(--green);
  margin: 0;
}

.cta-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }

/* ==========================================================================
   COMING SOON (courses)
   ========================================================================== */

/* The course catalogue is gone: its six cards described courses that do not
   exist yet, and the page now says so plainly. The CARD GRID block — .grid,
   .grid-2, .card and its cap/body/kicker/title/text — went with it; .card was
   its only user, as blog.html (deleted in the same pass) was .grid-2's. The
   design system still has a Card, so a catalogue that returns takes it from
   there: raised cream, hairline, gilt on hover, the corner tick.

   What is left is a small .plate holding the one book icon and two words. */
.coming-soon {
  max-width: 28rem;
  padding: 2.6rem 1.5rem 2.4rem;
  text-align: center;
  color: var(--color-accent-text);
}
.coming-soon svg { display: block; margin: 0 auto 1rem; }
.coming-soon-word {
  font-style: italic;
  font-size: var(--text-title-md);
  font-weight: 500;
  line-height: 1.15;
  color: var(--green);
  margin: 0;
}

/* The TIERS block — .tiers, .tier, .tier-name/-price/-per, .tier-featured and
   its three descendant rules, .tier-badge — went with MUT-114, which removed the
   homepage subscriptions section that was their only user. It was also the only
   place --gilt-light and --gilt-pale were read on a light page; both names stay
   in :root because the footer still uses them on the green ground, which is the
   role they are aliased to (--color-accent-on-dark / --color-muted-on-dark). */

/* ==========================================================================
   TEACHER BIO
   ========================================================================== */

.bio { display: flex; gap: 2.5rem; align-items: flex-start; flex-wrap: wrap; }
.bio-figure { flex: none; }
.bio-name { font-size: var(--text-title-md); margin-bottom: .2rem; }
.bio-role {
  font-size: var(--text-label); letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-accent-text); font-weight: 600; margin-bottom: 1.4rem;
}
.bio-body { flex: 1 1 20rem; }
.bio-body p { color: var(--ink-muted); }

/* The CONTACT FORM block — .form, .field and the label/input/textarea rules
   under it — went with MUT-114, which deleted contact.html outright. There is no
   form, input or textarea left anywhere on the site, and no <script> either: the
   form's `onsubmit="return false"` was the last line of JavaScript in the
   project, so the whole site is now zero-JS rather than merely script-light.

   Two brand tokens lost their only reader with it, and that is worth recording
   because both are about to look like omissions. --color-placeholder styled the
   ::placeholder here; nothing on the site has a placeholder now. And the focus
   wash — `0 0 0 3px` of 15% gilt — was the one element in either the site or the
   apps that fit the --focus-ring token MUT-113 removed for want of a user. It
   was the last candidate, and it is gone too; a future field wanting that halo
   should declare it in mutun-theme.css beside the element it serves, as the note
   at the end of that file's :root asks.

   ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  flex-shrink: 0;
  background: var(--color-accent-strong);
  color: var(--gilt-pale);
  text-align: center;
  padding: 3rem 1.5rem;
  border-top: 3px solid var(--gilt);
}
.footer-lockup {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1rem;
}
.footer-word {
  font-size: var(--text-lede); letter-spacing: .2em; color: var(--cream-card); font-weight: 600;
  margin-right: -.2em;
}
.footer-ar { font-size: var(--text-lede); color: var(--gilt-light); }
.footer-note { font-size: var(--text-caption); letter-spacing: .1em; color: var(--gilt-pale); margin: 0; }
.footer-divider {
  width: 4rem; height: 1px; background: var(--gilt); opacity: .5;
  margin: 0 auto 1.1rem;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* The phone steps DOWN the scale, never off it: 15px is the floor, so the nav
   drops to the caption step rather than to the 11px it used to take. */
@media (max-width: 640px) {
  body { font-size: var(--text-small); }
  .nav-inner { height: 4rem; }
  .nav-links { gap: 1rem; font-size: var(--text-caption); letter-spacing: .1em; }
  .brand-word { font-size: var(--text-lede); }
  .hero-word { font-size: var(--text-title-md); }
  .page-title { font-size: var(--text-title-md); }
  .hero-plate { padding: 2.2rem 1.2rem 2.4rem; }
  .bio { gap: 1.5rem; }
}

/* Below 440px the nav WRAPS: brand above, links centred beneath. Measured on
   the design-system pass (2026-09-27), with the nav at the scale's 15px floor
   and three destinations (Home, About ▾, Courses — Blog went with blog.html):
   one line fits at 430px and runs 4px past the viewport at 414px. The old
   ≤420px tightening block, which won its pixels by dropping tracking to .08em,
   is gone — the type cannot shrink further, so wrapping is the only relief.

   The height has to be released with it. `.nav-inner` is a fixed 4rem at ≤640px,
   which would have clipped the second line rather than shown it — a wrap that
   silently cuts the nav in half is worse than the sideways scroll it replaces.

   Wrapping rather than a hamburger because the site runs NO JAVASCRIPT AT ALL
   (zero <script> tags, pinned by test/website-theme.test.js; ADR 0002), and a
   drawer would reintroduce the first script on the site to hide a list that
   fits in two lines. */
@media (max-width: 440px) {
  .nav-inner {
    flex-wrap: wrap;
    justify-content: center;
    height: auto;
    padding: .7rem 1rem;
    row-gap: .5rem;
  }
  .nav-links { flex-wrap: wrap; justify-content: center; }
}