/* Makings · legacy profile finder, served at https://agentfolio.bot/legacy
   One responsive page: it matches the approved boards T-Legacy-1440 and T-Legacy-390 at those widths
   and is fluid from 320 to 2560. Every asset URL is root-absolute under /legacy/assets/.
   Box model: content-box, as in the boards. border-box is set only on the elements that carry it there.

   Bands (see NOTES-legacy.md):
     < 1000    compact: lockup + Menu button (#site-menu opens inside the header card), stacked hero,
               stacked notes (capped at the card's 596px measure), stacked footer
               (the header takes the landing's 768 sizes from 600; footer links in one row from 440)
     ≥ 1000    desktop: full nav, hero in two columns, the three notes side by side, footer in one row
               (1000–1319 the header card has two rows, lockup + button then the nav, 24px from the
               edges as on the landing's 1024 board; ≥ 1320 one row at the page inset)
     ≥ 1440    content stays in a centred 1304px column; bands and backgrounds stay full-bleed */

/* ---------- Fonts: self-hosted variable WOFF2 (the builder supplies the files) ---------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/legacy/assets/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/legacy/assets/fonts/figtree.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Spline Sans Mono';
  src: url('/legacy/assets/fonts/spline-sans-mono.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens and fluid values ---------- */
:root {
  --ink: #202753;
  --ultramarine: #4436D9;
  --ultramarine-deep: #2B1FA6;
  --cream: #FFF4C7;
  --pink: #FF9FC8;
  --canvas: #FFF8E8;
  --panel: #FFFDF6;
  --muted: #525777;
  --rule-decorative: #C7C6BB;
  --font-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --font-text: 'Figtree', system-ui, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Page inset: the left and right padding of every full-width band. The % is the band's own width, so a
     classic scrollbar doesn't skew it. Anchors follow the landing: 16 @320, 24 @390, 48 @768 and @1024,
     68 @1440, then a centred 1304px column. Redefined per band below. */
  --inset: clamp(16px, calc(16px + (100% - 320px) * 0.1142858), 24px);

  /* Page content: the 390 board value at 390, the 1440 board value at 1440, linear in between, held
     outside. Each slope is (1440 value - 390 value) / 1050, rounded up so 1440 lands exactly on the board. */
  --find-pad-top: clamp(44px, calc(44px + (100vw - 390px) * 0.0495239), 96px);
  --find-pad-bottom: clamp(56px, calc(56px + (100vw - 390px) * 0.0571429), 116px);
  --title-size: clamp(38px, calc(38px + (100vw - 320px) * 0.0571429), 42px);
  --title-gap: clamp(18px, calc(18px + (100vw - 390px) * 0.0057143), 24px);
  --lead-size: clamp(18px, calc(18px + (100vw - 390px) * 0.0019048), 20px);
  --lead-gap: clamp(20px, calc(20px + (100vw - 390px) * 0.0076191), 28px);
  --card-pad-top: clamp(24px, calc(24px + (100vw - 390px) * 0.0095239), 34px);
  --card-pad-x: clamp(20px, calc(20px + (100vw - 390px) * 0.0133334), 34px);
  --card-pad-bottom: clamp(22px, calc(22px + (100vw - 390px) * 0.0076191), 30px);
  --card-label-size: clamp(18px, calc(18px + (100vw - 390px) * 0.0019048), 20px);
  --card-value-gap: clamp(10px, calc(10px + (100vw - 390px) * 0.0019048), 12px);
  --card-code-size: clamp(17px, calc(17px + (100vw - 390px) * 0.0047620), 22px);
  --flower-size: clamp(132px, calc(132px + (100vw - 390px) * 0.1409524), 280px);
  --flower-top: clamp(18px, calc(18px + (100vw - 390px) * 0.0076191), 26px);
  --flower-overhang: clamp(84px, calc(84px + (100vw - 390px) * 0.0190477), 104px);
  --about-pad-top: clamp(48px, calc(48px + (100vw - 390px) * 0.0457143), 96px);
  --about-pad-bottom: clamp(60px, calc(60px + (100vw - 390px) * 0.0571429), 120px);
  --item-gap: clamp(10px, calc(10px + (100vw - 390px) * 0.0019048), 12px);
  --item-pad-top: clamp(20px, calc(20px + (100vw - 390px) * 0.0057143), 26px);
  --icon-size: clamp(48px, calc(48px + (100vw - 390px) * 0.0038096), 52px);
  --item-title-gap: clamp(6px, calc(6px + (100vw - 390px) * 0.0019048), 8px);
  --item-title-size: clamp(22px, calc(22px + (100vw - 390px) * 0.0038096), 26px);
  --item-text-size: clamp(16px, calc(16px + (100vw - 390px) * 0.0019048), 18px);

  /* Site chrome. Header band: the 390 board below 600, the landing's 768 sizes from 600, the landing's 1024
     two-row card from 1000, the 1440 board from 1320. These are steps, the same as on the landing and the
     discovery page (top 12 / 20 / 24). Footer: the landing's anchors (390, 768, 1024, 1440), linear in between. */
  --masthead-pad-top: 12px;
  --header-h: 64px;
  --header-pad-l: 12px;
  --header-pad-r: 13px;
  --header-gap: 12px;
  --header-radius: 18px;
  --header-shadow: 4px;
  --logo-w: 135.75px;
  --footer-pad-top: 44px;
  --footer-pad-bottom: 28px;
  --footer-top-gap: 28px;
  --footer-top-end: 40px;
  --footer-meta-pad: 18px;
}
@media (min-width: 390px) {
  :root {
    --inset: clamp(24px, calc(24px + (100% - 390px) * 0.0634921), 48px);
    --title-size: clamp(42px, calc(42px + (100vw - 390px) * 0.0323810), 76px);
    --footer-pad-top: clamp(44px, calc(44px + (100vw - 390px) * 0.0317461), 56px);
    --footer-pad-bottom: clamp(28px, calc(28px + (100vw - 390px) * 0.0317461), 40px);
    --footer-top-end: clamp(40px, calc(40px + (100vw - 390px) * 0.0211641), 48px);
    --footer-meta-pad: clamp(18px, calc(18px + (100vw - 390px) * 0.0052911), 20px);
  }
}
/* From 600 the compact header takes the landing's 768 values (full-size lockup, 72px card). */
@media (min-width: 600px) {
  :root {
    --masthead-pad-top: 20px;
    --header-h: 72px;
    --header-pad-l: 20px;
    --header-pad-r: 14px;
    --header-gap: 16px;
    --header-radius: 20px;
    --header-shadow: 5px;
    --logo-w: 181px;
  }
}
@media (min-width: 1000px) {
  :root {
    --footer-pad-top: 72px;
    --footer-pad-bottom: 40px;
    --footer-top-gap: 40px;
    --footer-top-end: 64px;
    --footer-meta-pad: 22px;
  }
}
@media (min-width: 1024px) {
  :root {
    --inset: max(clamp(48px, calc(48px + (100% - 1024px) * 0.0480770), 68px), calc((100% - 1304px) / 2));
    --footer-pad-top: clamp(72px, calc(72px + (100vw - 1024px) * 0.0192308), 80px);
    --footer-pad-bottom: clamp(40px, calc(40px + (100vw - 1024px) * 0.0096154), 44px);
    --footer-top-end: clamp(64px, calc(64px + (100vw - 1024px) * 0.0192308), 72px);
  }
}
@media (min-width: 1320px) {
  :root { --masthead-pad-top: 24px; }
}

/* ---------- Base ---------- */
html { height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-text);
}
a { color: var(--ultramarine); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--ultramarine); outline-offset: 3px; }
main:focus { outline: none; }
button { font: inherit; cursor: pointer; }
.mono {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}

/* Skip link: the first focusable element; visible only when focused. */
.skip-link {
  position: absolute;
  top: 6px;
  left: var(--inset);
  z-index: 30;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: visible;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
}
.skip-link:focus {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  min-height: 44px;
  margin: 0;
  padding: 0 18px;
  clip: auto;
  clip-path: none;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--ink);
  outline: 3px solid var(--cream);
  outline-offset: 3px;
}
.skip-link:hover { color: var(--ink); }

/* Shared small parts */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1;
}
.pill-dot { display: block; flex: none; }
.soon {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  box-sizing: border-box;
  border: 1.5px dashed currentColor;
  border-radius: 6px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  box-sizing: border-box;
  border: 2px solid var(--ink);
  border-radius: 14px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.button--primary { background: var(--ultramarine); color: var(--cream); box-shadow: 4px 4px 0 var(--ink); }
.button--primary:hover { color: var(--cream); }
@media (hover: hover) {
  .button--primary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
}
.button--primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Header band ---------- */
.masthead {
  padding: var(--masthead-pad-top) var(--inset) 0;
  background: var(--ultramarine);
}
.site-header {
  position: relative; /* containing block for the open menu; no z-index, so the hero still paints over its bottom shadow as on the boards */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--header-gap);
  min-height: var(--header-h);
  box-sizing: border-box;
  padding: 0 var(--header-pad-r) 0 var(--header-pad-l);
  background: var(--canvas);
  border: 2px solid var(--ink);
  border-radius: var(--header-radius);
  box-shadow: var(--header-shadow) var(--header-shadow) 0 var(--ultramarine-deep);
}
.brand { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; min-height: 44px; } /* the lockup may shrink below 320 */
.brand-mark { display: block; flex: none; width: var(--logo-w); max-width: 100%; height: auto; }
.menu-button { flex: none; }
.site-nav { display: flex; align-items: center; }

/* Desktop nav list (≥ 1000) */
.nav-list {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
}
a.nav-link:hover { color: var(--ultramarine); }
.nav-link--soon { color: var(--muted); }
.header-cta { display: none; flex: none; white-space: nowrap; }

/* Compact nav (< 1000): the Menu button and the one menu, #site-menu.
   site.js toggles [hidden] on #site-menu and aria-expanded on the button; this file styles both states. */
.menu-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  margin: 0;
  padding: 0 14px 0 12px;
  box-sizing: border-box;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
@media (hover: hover) {
  .menu-button:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
}
.menu-button[aria-expanded="true"] {
  background: var(--ink);
  color: var(--cream);
  box-shadow: none;
  transform: translate(2px, 2px);
}
.menu-icon { display: block; flex: none; }
.menu-icon-close { display: none; }
.menu-button[aria-expanded="true"] .menu-icon-open { display: none; }
.menu-button[aria-expanded="true"] .menu-icon-close { display: inline; }

/* Closed ([hidden]) and at every width from 1000px, the list isn't shown. */
.site-menu { display: none; margin: 0; padding: 0; list-style: none; }

/* Open (< 1000): the list is the lower part of the header card, as CMP-01 draws it (public, compact, open):
   the top row, a 1.5px #525777 rule, 50px rows on #C7C6BB separators, then the "Get your agent ready"
   button, inside one border and one shadow. The card grows over the hero as an overlay; nothing below moves.
   The list is positioned from the card's padding box: it covers the card's bottom border (top: 100%) and
   spans its border box (left/right: -2px), so its side borders continue the card's. Its padding repeats the
   card's, so the rule and the rows line up with the lockup and the Menu button. */
@media (width < 1000px) {
  .site-menu:not([hidden]) {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: -2px;
    right: -2px;
    display: flex;
    flex-direction: column;
    padding: 2px var(--header-pad-r) 16px var(--header-pad-l);
    background: var(--canvas);
    border: 2px solid var(--ink);
    border-top: 0;
    border-radius: 0 0 var(--header-radius) var(--header-radius);
    /* the card's shadow, plus a copy offset only sideways so the right edge runs on unbroken past the join */
    box-shadow: var(--header-shadow) var(--header-shadow) 0 var(--ultramarine-deep), var(--header-shadow) 0 0 var(--ultramarine-deep);
    animation: menu-grow 200ms var(--ease);
  }
  /* the rule under the top row: 2px below the row, full content width (CMP-01 .p3-menu border-top) */
  .site-menu:not([hidden])::before {
    content: "";
    flex: none;
    border-top: 1.5px solid var(--muted);
    margin-bottom: 6px;
  }
  /* while open, the card's bottom corners are square, so the card and the list read as one card */
  .site-header:has(#site-menu:not([hidden])) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
.site-menu > li { border-bottom: 1.5px solid var(--rule-decorative); }
.site-menu > .site-menu-cta { border-bottom: 0; padding-top: 16px; }
.site-menu-cta .button { display: flex; }
.menu-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 50px;
  padding: 0 6px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
}
a.menu-link:hover { color: var(--ultramarine); }
.menu-link--soon { color: var(--muted); }
/* The card grows: the list is revealed downward from the top row. */
@keyframes menu-grow {
  from { clip-path: inset(0 -12px 100% -12px); }
  to { clip-path: inset(0 -12px -12px -12px); }
}

/* ---------- Hero: the finder ---------- */
.find {
  position: relative;
  padding: var(--find-pad-top) var(--inset) var(--find-pad-bottom);
  background: var(--ultramarine);
  border-bottom: 2px solid var(--ink);
}
/* Decorative shapes: clipped by their own layer, anchored to the content column's right edge. */
.find-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.find-flower {
  position: absolute;
  top: var(--flower-top);
  right: calc(var(--inset) - var(--flower-overhang));
  display: block;
  width: var(--flower-size);
  height: var(--flower-size);
  overflow: visible;
}
.find-dot {
  position: absolute;
  top: 326px;
  right: calc(var(--inset) - 20px);
  display: none;
  width: 96px;
  height: 96px;
  overflow: visible;
}
.find-body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 32px;
}
.find-intro { display: flex; flex-direction: column; align-items: flex-start; }
.tape {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 2px dashed var(--ink);
  background-color: var(--cream);
  background-image: repeating-linear-gradient(135deg, rgba(32, 39, 83, .10) 0 2px, transparent 2px 7px);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
}
.find-title {
  margin: var(--title-gap) 0 0;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96, 'wdth' 88;
  font-weight: 800;
  letter-spacing: -0.035em;
  font-size: var(--title-size);
  line-height: 0.98;
  color: var(--cream);
}
.find-title > span { display: block; }
.find-title-accent { color: var(--pink); }
.find-lead {
  margin: var(--lead-gap) 0 0;
  max-width: 600px;
  font-size: var(--lead-size);
  line-height: 1.5;
  color: var(--cream);
  text-wrap: balance;
}
.find-card {
  position: relative;
  z-index: 3;
  max-width: 596px;
  box-sizing: border-box;
  padding: var(--card-pad-top) var(--card-pad-x) var(--card-pad-bottom);
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--ultramarine-deep);
}
.find-card-label {
  margin: 0;
  font-weight: 700;
  font-size: var(--card-label-size);
  line-height: 1.3;
  color: var(--ink);
}
.find-card-value { margin: var(--card-value-gap) 0 0; }
.find-card-value code {
  font-size: var(--card-code-size);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ---------- What happens to a profile ---------- */
.about {
  padding: var(--about-pad-top) var(--inset) var(--about-pad-bottom);
  background: var(--canvas);
}
/* Stacked below 1000, the notes keep the finder card's measure (596px, the 1440 card column), so the rules
   and the text never run wider than the hero above them. */
.about-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px 28px;
  max-width: 596px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.about-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--item-gap);
  padding-top: var(--item-pad-top);
  border-top: 2px solid var(--ink);
}
.about-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  box-sizing: border-box;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--cream);
  box-shadow: 3px 3px 0 var(--ink);
}
.about-glyph { display: block; flex: none; }
.about-title {
  margin: var(--item-title-gap) 0 0;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96, 'wdth' 88;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: var(--item-title-size);
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}
.about-text {
  margin: 0;
  font-size: var(--item-text-size);
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}
.about-text code { font-size: 0.94em; font-weight: 600; color: var(--ink); }

/* ---------- Footer (cream on ink) ---------- */
.site-footer {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: var(--footer-pad-top) var(--inset) var(--footer-pad-bottom);
  background: var(--ink);
  color: var(--cream);
}
.site-footer a { color: var(--cream); }
.site-footer a:hover { color: #FFFFFF; }
.site-footer :focus-visible { outline-color: var(--cream); }
.footer-top {
  display: flex;
  flex-direction: column;
  gap: var(--footer-top-gap);
  margin-bottom: var(--footer-top-end);
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer-mark { display: block; flex: none; width: 241.33px; height: 56px; }
.footer-tagline {
  margin: 0;
  padding-left: 50.4px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: var(--cream);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-links > li { flex: 0 0 calc(50% - 12px); }
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
}
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: auto 0 0;
  padding-top: var(--footer-meta-pad);
  border-top: 1.5px solid var(--muted);
  font-size: 14px;
  line-height: 1.4;
  color: var(--cream);
}

/* ---------- ≥ 440: the footer links sit in one row ---------- */
@media (min-width: 440px) {
  .footer-links { gap: 4px 32px; }
  .footer-links > li { flex: none; }
}

/* ---------- ≥ 1000: desktop ---------- */
@media (min-width: 1000px) {
  /* Header: two rows up to 1319px (lockup and button, then the nav under a rule), as the landing draws it at 1024 */
  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(68px, auto) minmax(48px, auto);
    gap: 0;
    min-height: 0;
    padding: 0;
    box-shadow: 5px 5px 0 var(--ultramarine-deep);
  }
  .brand { grid-area: 1 / 1; place-self: center start; margin-left: 22px; }
  .header-cta { display: inline-flex; grid-area: 1 / 2; align-self: center; margin-right: 22px; }
  .site-nav {
    grid-area: 2 / 1 / 3 / 3;
    box-sizing: border-box;
    padding: 0 22px;
    border-top: 1.5px solid var(--muted);
  }
  .nav-list { display: flex; justify-content: flex-start; }
  .menu-button,
  .site-menu { display: none; }

  .find-body {
    grid-template-columns: minmax(0, 680fr) minmax(0, 596fr);
    column-gap: 28px;
    align-items: center;
  }
  .find-card { box-shadow: 8px 8px 0 var(--ultramarine-deep); }
  .find-dot { display: block; }

  /* the three notes side by side: from here every title fits on one line */
  .about-list { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }

  .footer-top { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .footer-brand { flex: none; }
  .footer-links { justify-content: flex-end; gap: 4px 36px; }
}

/* ---------- 1000–1319: the two-row header card sits 24px from the edges, as the landing draws it at 1024 ---------- */
@media (1000px <= width < 1320px) {
  .masthead { padding-left: 24px; padding-right: 24px; }
}

/* ---------- ≥ 1320: the header fits on one row ---------- */
@media (min-width: 1320px) {
  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 80px;
    padding: 0 16px 0 22px;
  }
  .brand { flex: none; margin-left: 0; }
  .header-cta { margin-right: 0; }
  .site-nav { display: block; padding: 0; border-top: 0; }
  .nav-list { justify-content: center; }
}

/* ---------- ≥ 1440: the lead's 600px measure gives the board's two lines ---------- */
/* Below 1440 the lead stays balanced (base rule), so the two-column hero never ends on a stub line. */
@media (min-width: 1440px) {
  .find-lead { text-wrap: pretty; }
}

/* ---------- Reduced motion: no lift, no slide ---------- */
@media (prefers-reduced-motion: reduce) {
  .button,
  .menu-button { transition: none; }
  .button--primary:hover,
  .button--primary:active,
  .menu-button:not([aria-expanded="true"]):hover { transform: none; }
  .site-menu:not([hidden]) { animation: none; }
}