/* ============ FONTS ============
   Self-hosted copies of the Google Fonts files the page was already loading,
   latin subset only (every character on the page is in it; the one arrow glyph
   fell back to a system font before and still does). Jost is one variable
   file covering every weight. Provenance, refresh steps, and licences:
   fonts/README.txt. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/jost.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;
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/fira-sans-300.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;
}
@font-face {
  font-family: "Fira Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fira-mono-400.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;
}
@font-face {
  font-family: "Fira Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fira-mono-500.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;
}

/* ============================================================
   RSM CAPITAL — CONSTELLATION SERIES base layout
   One layout, many colorways. Each colorway's style.css sets
   the custom properties; this file owns everything else.
   ============================================================ */
:root {
  --caps: "Jost", sans-serif;
  --sans: "Fira Sans", -apple-system, sans-serif;
  --mono: "Fira Mono", ui-monospace, monospace;
  --nav-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* paper grain (opacity per colorway; 0 disables) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--grain-o, 0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.2 0 0 0 0 0.18 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--sel-bg); color: var(--sel-fg); }
svg { display: block; }
/* The shapes the page reuses (the monogram) sit in one hidden sprite at the
   top of <body>. A class lifts it out of the flow instead of a style
   attribute, so the content-security policy can refuse all inline style. */
.svg-defs { position: absolute; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
/* The keyboard can jump the bar: the first link on the page waits above the
   window and drops in at the top left, in the Contact button's colours, while
   it has focus. Its target, <main>, takes focus without drawing a ring. */
.skip-link {
  position: fixed;
  top: .5rem; left: .5rem;
  z-index: 200;
  transform: translateY(calc(-100% - 1rem));
  padding: .8rem 1.2rem;
  font-family: var(--caps);
  font-weight: 400;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
}
.skip-link:focus { transform: none; }
main:focus { outline: none; }
.mono {
  font-family: var(--mono);
  font-size: .72em;
  letter-spacing: .12em;
}
main, .nav, .footer { position: relative; z-index: 2; }

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.nav.scrolled {
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--line);
}
.nav-brand { color: var(--brand); transition: opacity .3s; }
.nav-brand:hover { opacity: .8; }
.nav-brand svg { height: 19px; width: auto; }

.nav-links { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.4rem); }
.nav-links a {
  font-family: var(--caps);
  font-weight: 400;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  opacity: .82;
  transition: opacity .3s;
  padding: .35rem 0;
}
.nav-links a .mono { color: var(--muted); margin-right: .3rem; }
.nav-links a:hover { opacity: 1; }
.nav-links .nav-contact {
  border: 1px solid var(--line-strong);
  padding: .45rem 1.1rem;
  transition: background .3s, color .3s, border-color .3s, opacity .3s;
}
.nav-links .nav-contact:hover {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
  opacity: 1;
}

.nav-toggle {
  display: none;
  background: none; border: 0;
  width: 40px; height: 40px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center; align-items: center;
  gap: 7px;
}
.nav-toggle span {
  display: block; width: 24px; height: 1.5px;
  background: var(--ink);
  transition: transform .35s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-4.25px) rotate(-45deg); }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Keep the copy inside the frame on short windows. The pad on each side is
     the frame's top inset plus breathing room, so the copy is still centered
     where there is room (the pads cancel) and the hero grows past 100svh
     when the copy needs more, instead of sliding up behind the bar. Phones
     use a smaller bottom pad; see the mobile block. */
  box-sizing: border-box;
  padding: calc(clamp(5.2rem, 9vh, 6.5rem) + 1.5rem) 0;
}
.frame {
  position: absolute;
  inset: clamp(5.2rem, 9vh, 6.5rem) clamp(1.2rem, 3vw, 2.5rem) clamp(1.2rem, 4vh, 2.5rem);
  pointer-events: none;
}
.fc {
  position: absolute;
  width: 18px; height: 18px;
  border-color: var(--frame);
  border-style: solid;
  border-width: 0;
}
.fc-tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.fc-tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.fc-bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.fc-br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* The four labels: .72rem and the label tone, up from .6rem and muted, which
   read too small and faint on the red (William, 20 Oct). At the narrowest
   width that shows them (45em), the bottom pair still has about 4rem between
   them. */
.frame-meta {
  position: absolute;
  font-size: .72rem;
  color: var(--label, var(--muted));
}
.meta-tl { top: 8px; left: 32px; }
.meta-tr { top: 8px; right: 32px; }
.meta-bl { bottom: 8px; left: 32px; }
.meta-br { bottom: 8px; right: 32px; }

/* With the reader's text enlarged (200% and more), rem minimums grow past a
   phone's width. min() caps each by the width, at a value no phone from 320px
   up reaches at default sizes, so nothing moves there; min-width lets the copy
   box shrink to the frame, and a word that still cannot fit breaks rather
   than running off the screen (14 Oct, launch review L6). */
.hero-inner {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 0 clamp(min(2.5rem, 12.5vw), 8vw, 7rem);
  max-width: 1100px;
}
.hero-monogram {
  display: var(--mono-display, none);
  color: var(--brand);
  margin-bottom: 2.4rem;
}
.hero-monogram svg { height: clamp(72px, 11vh, 104px); width: auto; }
.hero-title {
  font-family: var(--caps);
  font-weight: 500;
  font-size: clamp(min(2.6rem, 13vw), 7vw, 5.2rem);
  line-height: 1.06;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
  overflow-wrap: break-word;
}
.hero-line {
  margin-top: 2rem;
  max-width: 34em;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--body-c);
}
/* ============ SECTIONS ============ */
.section { padding: clamp(5rem, 12vh, 8.5rem) 0; }
.section-line { border-top: 1px solid var(--line); }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}

.index {
  font-size: .68rem;
  color: var(--accent);
  margin-bottom: 2.6rem;
}
/* Philosophy and Portfolio have no headline of their own, so their index label
   is the section's h2. Pin the paragraph metrics so it renders exactly as the
   label always has; the outline is for screen readers and search engines. */
h2.index {
  font-weight: inherit;
  line-height: inherit;
  text-transform: none;
  margin: 0 0 2.6rem;
}

/* Headings set in large caps: a word wider than the screen at enlarged text
   sizes breaks instead of pushing the page sideways. No effect otherwise. */
h1, h2, h3 { overflow-wrap: break-word; }
h2 {
  font-family: var(--caps);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.8vw, 2.7rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.split-copy p { margin-bottom: 1.4rem; color: var(--body-c); }

/* ============ PORTFOLIO ============ */
/* A sector filter above the grid. Buttons carry aria-pressed; counts are filled
   in by portfolio.js from the tiles. The bar stays hidden until portfolio.js
   has wired it and marked the section .pf-ready, so a script that never
   arrives leaves no dead buttons; without JavaScript every tile shows. */
.pf-filters {
  display: none;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 0 0 2rem;
}
.pf-ready .pf-filters { display: flex; }
.pf-filter {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--label, var(--muted));
  background: none;
  border: 1px solid var(--line-strong);
  padding: .6rem .95rem;
  cursor: pointer;
  transition: color .3s, border-color .3s, background .3s;
}
/* At very large text a label wider than the screen breaks inside its button. */
.pf-filter { max-width: 100%; overflow-wrap: anywhere; }
.pf-filter:hover { color: var(--ink); border-color: var(--accent-soft); }
.pf-filter[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.pf-count { margin-left: .7em; opacity: .85; }
/* Read to screen readers only. */
.pf-status {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Outranks .tile's display: flex, which comes later in this file. */
.tile.pf-hide { display: none; }
/* The tiles that remain settle in after a filter changes. */
.pf-changed .tiles > :not(.pf-hide) { animation: pf-in .5s var(--ease) both; }
@keyframes pf-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* One tile per position, in the card language: hairline border, corner marks
   on hover. Mark and description are always visible. */
.tiles {
  display: grid;
  /* 14.75rem is 236px at default size; with enlarged text the columns widen
     with it, so there are fewer and the type still fits. min() keeps one
     column from outgrowing a narrow screen. */
  grid-template-columns: repeat(auto-fill, minmax(min(14.75rem, 100%), 1fr));
  gap: 1rem;
}
.tile {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  padding: 1.5rem 1.4rem 1.6rem;
  text-decoration: none;
  color: inherit;
  outline: none;
  transition: border-color .4s, background .4s;
}
.tile:hover, .tile:focus-visible {
  border-color: var(--line-strong);
  background: var(--hover-bg);
}
.tile:focus-visible { box-shadow: inset 0 0 0 1px var(--accent-soft); }
.tile .cc { opacity: 0; transition: opacity .4s; }
.tile:hover .cc, .tile:focus-visible .cc { opacity: .75; }
.tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 24px;
  margin-bottom: 1.1rem;
}
.tnum {
  font-size: .72rem;
  color: var(--label, var(--muted));
  white-space: nowrap;
}
.tname, .tdesc { overflow-wrap: break-word; }
.tname {
  font-family: var(--caps);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: .08em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--ink);
}
.ttags {
  display: block;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: .5rem;
}
.ttags .sep { opacity: .5; margin: 0 .3em; }
.tdesc {
  margin-top: .8rem;
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.6;
}
/* An Undisclosed tile's reference, set at the foot like a file number. */
.tref {
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: .64rem;
  letter-spacing: .18em;
  color: var(--label, var(--muted));
}

/* The fold: from four rows up, two rows and a slice of the third, fading
   out, then "Show all". portfolio.js finds where the third row starts and
   sets it as --pf-cut; the slice and the fade are set here. Nothing below
   applies without the script, so every tile shows. The grid is positioned
   because the rows are measured from its top (offsetTop). Its 6px pad,
   taken back by the margin, keeps a focused tile's ring (2px, drawn 4px
   out) inside the clip at the top and the sides; the bottom edge only ever
   cuts the faded row, which is inert. */
.pf-ready .tiles {
  position: relative;
  padding: 6px 6px 0;
  margin: -6px -6px 0;
}
/* The slice is a fixed depth, about a third of a tile, so it shows the same
   amount of the next row (label, mark, the start of the name) whichever
   filter is on. The fade starts 1.5rem above the slice, so the second row's
   foot softens with it rather than ending on a hard line. */
.tiles.pf-folded {
  --pf-peek: 7rem;
  max-height: calc(var(--pf-cut) + var(--pf-peek));
  overflow: hidden;
  overflow: clip;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--pf-peek) - 1.5rem), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - var(--pf-peek) - 1.5rem), transparent);
}
/* Only while it opens. The grid's .reveal owns its transition the rest of
   the time; a transition here for good would replace the reveal's fade. */
.tiles.pf-opening {
  overflow: hidden;
  overflow: clip;
  transition: max-height .6s var(--ease);
}
.pf-more-bar { margin-top: 1.4rem; text-align: center; }

/* ============ APPROACH CARDS ============ */
.cards {
  display: grid;
  /* minmax(0, …): a card cannot be pushed wider than its column by a long
     word at enlarged text sizes; the word breaks instead (.card below). */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.card {
  position: relative;
  overflow-wrap: break-word;
  border: 1px solid var(--line);
  padding: 2.2rem 1.8rem 2rem;
  transition: border-color .4s, background .4s;
}
.card:hover {
  border-color: var(--line-strong);
  background: var(--hover-bg);
}
.cc {
  position: absolute;
  width: 10px; height: 10px;
  border-color: var(--brand);
  border-style: solid;
  border-width: 0;
  opacity: .75;
}
.cc-tl { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.cc-br { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.card-num {
  display: block;
  font-size: .68rem;
  color: var(--accent);
  margin-bottom: 1.2rem;
}
.card h3 {
  font-family: var(--caps);
  font-weight: 500;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .8rem;
  color: var(--ink);
}
.card p { font-size: .95rem; color: var(--body-c); }

/* Leadership heading sits above intro copy, same rhythm as contact. */
#leadership h2 { margin-bottom: 1.6rem; }

/* ============ CONTACT ============ */
.contact-wrap h2 { margin-bottom: 1.6rem; }
.contact-copy {
  max-width: 36em;
  color: var(--body-c);
  margin-bottom: 2.8rem;
}
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  text-decoration: none;
  color: var(--accent);
  font-size: clamp(1.1rem, 2.6vw, 1.7rem);
  border-bottom: 1px solid var(--accent-soft);
  padding-bottom: .5rem;
  transition: color .35s, border-color .35s;
}
.contact-link { max-width: 100%; flex-wrap: wrap; }
/* main.js offers breaks after "@" and before "com"; a size that still cannot
   fit breaks anywhere rather than running off the screen. */
.contact-link .mono { letter-spacing: .06em; min-width: 0; overflow-wrap: anywhere; }
.link-arrow { transition: transform .35s var(--ease); }
.contact-link:hover { border-color: var(--accent); }
.contact-link:hover .link-arrow { transform: translateX(8px); }

/* ============ FOOTER ============ */
.footer {
  border-top: 1px solid var(--line);
  padding: 4rem 0 3rem;
  color: var(--muted);
}
.footer-inner { text-align: center; }
.footer-legal { font-size: .8rem; max-width: 46em; margin: 0 auto 1rem; line-height: 1.8; }
.footer-copy { font-size: .62rem; }

/* ============ REVEAL ============ */
/* Hidden until main.js's observer adds .visible. Should main.js never run
   (a dropped request, an error before the observer), the fallback animation
   uncovers everything 3s after first paint; main.js cancels it by marking the
   root .js once the observer is in place. Without scripting at all the
   content shows at once (the media query below). */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  animation: reveal-anyway 0s linear 3s forwards;
}
.js .reveal { animation: none; }
@keyframes reveal-anyway { to { opacity: 1; transform: none; } }
.reveal.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .12s; }
.delay-2 { transition-delay: .24s; }
.delay-3 { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; animation: none; }
  .pf-changed .tiles > * { animation: none; }
  .tiles.pf-opening { transition: none; }
}

@media (scripting: none) {
  .reveal { opacity: 1; transform: none; animation: none; }
}

/* On paper the portfolio prints whole and the button does not print. */
@media print {
  .tiles.pf-folded {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .pf-more-bar { display: none; }
}

/* Breakpoints are in em, which media queries read from the browser's default
   text size: 45em and 56.25em are 720px and 900px at the usual 16px, and they
   move out with a reader who sets larger text, so the one-column layout and
   the menu button take over before the desktop layout runs out of room.

   Five nav items need more room than four did. Between the mobile menu and
   full width, drop the numerals and tighten the gap. No effect above 56.25em. */
@media (min-width: 45.0625em) and (max-width: 56.25em) {
  .nav-links { gap: clamp(1rem, 2.4vw, 1.6rem); }
  .nav-links a { letter-spacing: .12em; }
  .nav-links a .mono { display: none; }
}

/* ============ MOBILE ============ */
@media (max-width: 45em) {
  .nav-toggle { display: flex; }
  /* The bar is clear over the hero, as on desktop. It goes solid once the page
     scrolls (.scrolled, set by main.js) or while the menu is open (.menu-open). */
  .nav.menu-open { background: var(--nav-bg); box-shadow: 0 1px 0 var(--line); }
  /* Phones keep the top pad from the base rule and take a smaller bottom pad,
     just clearing the frame's bottom labels, so the copy sits as high as the
     frame allows. */
  .hero { padding-bottom: calc(clamp(1.2rem, 4vh, 2.5rem) + 2.5rem); }
  /* Closed, the menu leaves the tab order and the accessibility tree
     (visibility), not just the visible page (a zero max-height clips, but its
     links could still take focus). The visibility change waits for the
     collapse on the way out and is immediate on the way in. */
  .nav-links {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--nav-bg);
    overflow: hidden;
    max-height: 0;
    visibility: hidden;
    transition: max-height .5s var(--ease), visibility 0s .5s;
  }
  .nav-links.open {
    /* Never taller than the window below the bar (a phone on its side is
       320px tall; five links need 256), scrolling inside if it must. The
       vh line is the fallback for browsers without dvh. */
    max-height: min(340px, calc(100vh - var(--nav-h)));
    max-height: min(340px, calc(100dvh - var(--nav-h)));
    overflow-y: auto;
    visibility: visible;
    transition: max-height .5s var(--ease), visibility 0s;
    box-shadow: 0 12px 24px rgba(0,0,0,.2);
  }
  .nav-links a { padding: 1.1rem 0; width: 100%; text-align: center; }
  .nav-links .nav-contact { border: 0; }

  .split { grid-template-columns: minmax(0, 1fr); }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .tile-top { flex-wrap: wrap; row-gap: .6rem; }
  .tnum { white-space: normal; }
  .tdesc { font-size: 1rem; }
  .frame-meta { display: none; }
  .footer { padding-bottom: 6rem; }
}

/* Without JavaScript the menu button opens nothing, so on phones the bar
   drops it and carries the five links itself: the logotype on one row, the
   links wrapping beneath, the bar solid and in the page's flow (it scrolls
   away instead of covering the copy). Visitors with JavaScript never see
   this. Last in the file, so it outranks the phone rules at equal weight. */
@media (scripting: none) and (max-width: 45em) {
  .nav {
    position: relative;
    height: auto;
    flex-wrap: wrap;
    row-gap: .5rem;
    padding-top: 1.1rem;
    padding-bottom: .9rem;
    background: var(--nav-bg);
  }
  .nav-toggle { display: none; }
  .nav-links {
    position: static;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .2rem 1.3rem;
    max-height: none;
    overflow: visible;
    visibility: visible;
    background: none;
    box-shadow: none;
    transition: none;
  }
  .nav-links a { padding: .45rem 0; width: auto; text-align: left; }
}