@charset "UTF-8";
/* ==========================================================================
   Level Flight Aviation — The Field Report
   Every lesson opens with one question: can we fly today? The page answers it
   for the real field, live. The station block is the page's core component and
   its grammar (navy ground, orange top edge, monospaced readout, category chip)
   repeats down the page and across every route.
   ========================================================================== */

/* ---------- Type ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-var-latin.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jbmono-var-latin.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

/* ---------- Tokens ---------- */
:root {
  /* Sampled from the logo. The mark's aircraft is drawn white with navy
     outlines, so it can never be knocked out on dark — it always needs a
     light surface. That constraint drives the whole light-ground scheme. */
  --navy-900: #0E2440;
  --navy-800: #16375D;
  --navy-700: #284B71;
  --blue-600: #24528A;
  --blue-500: #2F66AC;
  --steel-400: #7E93AA;
  --steel-300: #A1B4C3;
  --steel-200: #C9D5DF;
  --steel-100: #E3E9EF;
  --paper:     #F2F5F8;
  --white:     #FFFFFF;

  /* Sampled from the hero photograph's horizon. Single primary action only. */
  --sunset-600: #C43A08;
  --sunset-500: #E0450C;
  --sunset-400: #EF6A2E;

  /* Real FAA flight-category colours. These are notation, not decoration —
     a pilot reads them as meaning, so they may not be restyled to taste. */
  --cat-vfr:  #12A150;
  --cat-mvfr: #2F66AC;
  --cat-ifr:  #C8322B;
  --cat-lifr: #A32BA3;
  --cat-none: #7E93AA;

  --ink:       var(--navy-900);
  --ink-soft:  #47576B;

  --font-ui:   'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-data: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --shell:  min(1240px, 100% - 3rem);
  --radius: 4px;

  /* Offset + blur. A zero-offset halo is decoration, not depth. */
  --lift-1: 0 1px 2px rgba(14, 36, 64, .08), 0 2px 8px rgba(14, 36, 64, .06);
  --lift-2: 0 4px 10px rgba(14, 36, 64, .10), 0 14px 34px rgba(14, 36, 64, .14);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--blue-600); text-underline-offset: .18em; }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; text-wrap: balance; letter-spacing: -.02em; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--sunset-500);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell { width: var(--shell); margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: .75rem; top: -4rem; z-index: 100;
  background: var(--navy-900); color: #fff; padding: .7rem 1.1rem;
  font-weight: 600; border-radius: var(--radius); transition: top .18s var(--ease);
}
.skip-link:focus { top: .75rem; }

/* ==========================================================================
   Masthead
   ========================================================================== */
.masthead {
  background: var(--navy-900);
  color: #fff;
  position: relative;
  z-index: 20;
}
.masthead__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 78px;
}
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
/* The logo sits on its own light plate because its aircraft is white-filled
   and would disappear against the navy masthead. */
.brand__plate {
  background: var(--white);
  padding: .38rem .6rem;
  border-radius: var(--radius);
  display: block;
}
.brand__plate img { width: auto; height: 34px; }

.nav__toggle {
  display: none; align-items: center; gap: .5rem;
  background: transparent; border: 1px solid rgba(255,255,255,.28);
  color: #fff; font: 600 .9rem/1 var(--font-ui); letter-spacing: .04em;
  text-transform: uppercase; padding: .65rem .85rem; border-radius: var(--radius);
  cursor: pointer;
}
.nav__toggle:hover { border-color: rgba(255,255,255,.55); }

.nav__list { display: flex; align-items: center; gap: .35rem; list-style: none; }
.nav__link {
  display: block; padding: .55rem .75rem; border-radius: var(--radius);
  color: rgba(255,255,255,.86); text-decoration: none;
  font-weight: 500; font-size: .975rem; white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.nav__link:hover { background: rgba(255,255,255,.10); color: #fff; }
.nav__link[aria-current="page"] {
  color: #fff; background: rgba(255,255,255,.13);
  box-shadow: inset 0 -2px 0 var(--sunset-500);
}
.nav__call {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--sunset-500); color: #fff; text-decoration: none;
  font-weight: 600; padding: .62rem 1rem; border-radius: var(--radius);
  white-space: nowrap; transition: background .16s var(--ease);
}
.nav__call:hover { background: var(--sunset-400); }

@media (max-width: 940px) {
  .nav__toggle { display: inline-flex; }
  .masthead__nav {
    display: none; padding-bottom: 1.1rem;
  }
  .masthead__nav[data-open="true"] { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav__link { padding: .8rem .75rem; font-size: 1.05rem; }
  .nav__call { justify-content: center; margin-top: .6rem; padding: .85rem 1rem; }
}

/* ==========================================================================
   Hero — the thesis. Photograph full-bleed, report laid over it.
   ========================================================================== */
.hero { position: relative; background: var(--navy-900); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
/* Two ramps, not one flat scrim: the left keeps the panel legible, the lower
   one keeps the foot of the section readable without greying the whole sky. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(14,36,64,.94) 0%, rgba(14,36,64,.72) 38%, rgba(14,36,64,.18) 66%, rgba(14,36,64,.05) 100%),
    linear-gradient(to top, rgba(14,36,64,.78) 0%, rgba(14,36,64,0) 42%);
}
.hero__inner {
  position: relative; z-index: 1;
  padding-block: clamp(2.75rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}
@media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } }

.hero__eyebrow {
  font-family: var(--font-data); font-size: .8rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--steel-300);
  margin-bottom: 1rem;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.6rem, 6.2vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -.035em;
  max-width: 15ch;
}
.hero__lede {
  color: rgba(255,255,255,.88);
  font-size: clamp(1.075rem, 1.7vw, 1.28rem);
  max-width: 46ch;
  margin-top: 1.15rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }
.hero__tagline {
  margin-top: 2rem; color: rgba(255,255,255,.62);
  font-size: .95rem; font-style: italic;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font: 600 1.02rem/1 var(--font-ui);
  padding: .95rem 1.5rem; border-radius: var(--radius);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--sunset-500); color: #fff; box-shadow: var(--lift-1); }
.btn--primary:hover { background: var(--sunset-400); }
.btn--ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.34); }
.btn--ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.6); }
.btn--solid { background: var(--navy-800); color: #fff; }
.btn--solid:hover { background: var(--blue-600); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ==========================================================================
   Station block — the signature component. Reused on every route.
   ========================================================================== */
/* Square-cornered on purpose: this is an instrument readout, not a card. The
   sunset edge reads as the top rule of a panel, which a rounded corner would
   fight. */
.station {
  background: var(--navy-800);
  border-top: 4px solid var(--sunset-500);
  box-shadow: var(--lift-2);
  overflow: hidden;
}
.station--ghost { background: var(--navy-900); border-top-color: var(--steel-400); }

.station__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 1.15rem 1.35rem .75rem;
}
.station__ident {
  font-family: var(--font-data); font-size: .93rem; font-weight: 700;
  letter-spacing: .09em; color: #fff;
}
.station__ident span { color: var(--steel-300); font-weight: 400; }
.station__tag {
  font-family: var(--font-data); font-size: .66rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  padding: .3rem .5rem; border-radius: 2px; white-space: nowrap;
}
.station__tag--new { background: var(--sunset-500); color: #fff; }
.station__tag--now { background: rgba(255,255,255,.16); color: #fff; }

.station__body { padding: .25rem 1.35rem 1.35rem; }
.station__row { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }

/* The category chip carries FAA meaning; size it like a badge, not a button. */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-data); font-weight: 700; font-size: 1.02rem;
  letter-spacing: .06em; color: #fff;
  padding: .5rem .85rem; border-radius: 3px; min-width: 4.4rem;
}
.chip--vfr  { background: var(--cat-vfr); }
.chip--mvfr { background: var(--cat-mvfr); }
.chip--ifr  { background: var(--cat-ifr); }
.chip--lifr { background: var(--cat-lifr); }
.chip--none { background: var(--cat-none); }

.readout { font-family: var(--font-data); font-size: .9rem; line-height: 1.55; color: var(--steel-200); }
.readout b { color: #fff; font-weight: 500; }
.readout--raw {
  margin-top: .85rem; padding-top: .8rem;
  border-top: 1px solid rgba(255,255,255,.13);
  font-size: .76rem; color: var(--steel-400); word-break: break-word;
}
.station__stamp {
  margin-top: .9rem; font-family: var(--font-data);
  font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--steel-400);
}
/* Honest failure: when the feed is down the block says so rather than
   showing a stale or invented condition. */
.station__fail { color: var(--steel-300); font-size: .93rem; }

/* Two fields side by side during the relocation. Equal columns on purpose:
   neither field is a footnote while both are in use. */
.fieldpair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 720px) { .fieldpair { grid-template-columns: 1fr; } }

/* ==========================================================================
   Drive-time strip — the positioning argument, made countable
   ========================================================================== */
.drivestrip { background: var(--navy-900); color: #fff; border-top: 1px solid rgba(255,255,255,.1); }
.drivestrip__inner {
  display: flex; align-items: stretch; flex-wrap: wrap;
  padding-block: .3rem;
}
.drivestrip__label {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-data); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--steel-300);
  padding: 1rem 1.4rem 1rem 0;
}
.drivestrip__item {
  display: flex; flex-direction: column; gap: .12rem;
  padding: .95rem 1.5rem;
  border-left: 1px solid rgba(255,255,255,.13);
}
.drivestrip__time { font-family: var(--font-data); font-weight: 700; font-size: 1.02rem; color: #fff; }
.drivestrip__town { font-size: .82rem; color: var(--steel-300); }
@media (max-width: 720px) {
  .drivestrip__inner { display: grid; grid-template-columns: repeat(2, 1fr); padding-bottom: .8rem; }
  .drivestrip__label { grid-column: 1 / -1; padding-bottom: .3rem; }
  .drivestrip__item { border-left: 0; padding: .55rem 0; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--paper { background: var(--paper); }
.section--white { background: var(--white); }
.section--navy  { background: var(--navy-900); color: #fff; }
.section--navy .section__lede { color: rgba(255,255,255,.82); }

/* Two-column section layout. A class rather than an inline style because an
   inline grid-template-columns cannot be undone by a media query, which is how
   every one of these sections previously stayed side-by-side on a phone. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.split--even    { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split--lead    { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.split--reverse { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.split--center  { align-items: center; }
@media (max-width: 880px) {
  .split, .split--even, .split--lead, .split--reverse { grid-template-columns: 1fr; }
}

.section__head { max-width: 62ch; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.section h2 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); font-weight: 800; }
.section__lede { margin-top: .9rem; font-size: 1.1rem; color: var(--ink-soft); max-width: 60ch; }

/* Services read as a stack of full-width rows, not a row of equal cards.
   Each row is a dark photo panel: the photograph carries the subject, a navy
   scrim carries the text. The surrounding section stays light so the panels
   read as dark cards on a light ground and the page keeps its one light break
   instead of going navy end to end. */
.services { display: grid; gap: 1.1rem; }
.service {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: 1.5rem; align-items: start;
  background: var(--navy-900);
  padding: 2.15rem 2rem;
  box-shadow: var(--lift-1);
}

/* A real image element rather than a CSS background, so it can be lazy-loaded
   and decoded off the main thread. Decorative: the heading carries the meaning,
   so the element is aria-hidden with an empty alt. */
.service__media { position: absolute; inset: 0; z-index: -2; }
.service__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }

/* Denser at the text edge, opening toward the right where the image lives.
   These three stops are MEASURED, not guessed: tools/check-contrast.php
   composites this exact gradient over every panel and reports the WCAG ratio in
   the text band. At .76/.68/.42 the worst panel sits at 4.60:1 against a 4.5:1
   floor — the lightest scrim at which every panel still clears. Changing
   these numbers means re-running that script.
   --scrim-boost darkens a single too-bright image without flattening the rest. */
.service::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(14, 36, 64, calc(.76 + var(--scrim-boost, 0))) 0%,
    rgba(14, 36, 64, calc(.68 + var(--scrim-boost, 0))) 46%,
    rgba(14, 36, 64, calc(.42 + var(--scrim-boost, 0))) 100%);
  transition: opacity .2s var(--ease);
}
.service:hover::after { opacity: .88; }

.service__num {
  font-family: var(--font-data); font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; color: var(--steel-300); padding-top: .4rem;
}
.service h3 { font-size: 1.32rem; font-weight: 700; color: #fff; }
.service p { margin-top: .55rem; color: var(--steel-200); max-width: 56ch; }
.service__go {
  align-self: center; white-space: nowrap; font-weight: 600;
  color: #fff; text-decoration: none;
  border-bottom: 2px solid rgba(224, 69, 12, .9); padding-bottom: .15rem;
}
.service__go:hover { border-bottom-color: var(--sunset-400); }

@media (max-width: 760px) {
  .service { grid-template-columns: 1fr; gap: .6rem; padding: 1.6rem 1.35rem; }
  .service__num { padding-top: 0; }
  /* Narrow viewports leave no calm left band — text crosses the whole frame —
     so the scrim goes flat and denser than the desktop gradient. */
  .service::after {
    background: linear-gradient(
      180deg,
      rgba(14, 36, 64, calc(.80 + var(--scrim-boost, 0))) 0%,
      rgba(14, 36, 64, calc(.76 + var(--scrim-boost, 0))) 100%);
  }
}

/* ==========================================================================
   Field panel — real photography behind a section heading.
   Used only where the photograph genuinely shows the place being named.
   ========================================================================== */
.fieldpanel { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-900); }
.fieldpanel__media { position: absolute; inset: 0; z-index: -2; }
.fieldpanel__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.fieldpanel::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(14,36,64,.93) 0%, rgba(14,36,64,.84) 44%, rgba(14,36,64,.58) 100%),
    linear-gradient(to top, rgba(14,36,64,.55) 0%, rgba(14,36,64,0) 55%);
}
.fieldpanel .section__lede { color: rgba(255,255,255,.86); }
.fieldpanel h1, .fieldpanel h2, .fieldpanel h3 { color: #fff; }

/* Photo credit. Small, factual, and never overlapping the text column. */
.photocredit {
  margin-top: 1.1rem;
  font-family: var(--font-data); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--steel-400);
}

/* Field specification table — the Chart Supplement grammar */
.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); overflow: hidden; }
.spec__cell { background: var(--navy-900); padding: 1.1rem 1.2rem; }
.spec__k { font-family: var(--font-data); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--steel-400); }
.spec__v { font-family: var(--font-data); font-size: 1.02rem; font-weight: 500; color: #fff; margin-top: .3rem; word-break: break-word; }

/* Prose */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.15rem; }
.prose h3 { font-size: 1.35rem; margin-top: 2.25rem; }
.prose ul { padding-left: 1.15rem; }
.prose li { margin-top: .5rem; }
.prose li::marker { color: var(--sunset-500); }

/* Notice — used where a fact is genuinely pending, never as decoration.
   Takes the station block's grammar (square, top rule) rather than a coloured
   left tab, so it reads as part of this system instead of a generic callout. */
.notice {
  background: var(--white);
  border: 1px solid var(--steel-200);
  border-top: 3px solid var(--sunset-500);
  padding: 1.15rem 1.35rem;
  color: var(--ink-soft); font-size: .98rem;
}
.section--navy .notice { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.86); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form { display: grid; gap: 1.15rem; max-width: 40rem; }
.field { display: grid; gap: .42rem; }
.field label { font-weight: 600; font-size: .95rem; }
.field .hint { font-size: .86rem; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--white);
  border: 1px solid var(--steel-300); border-radius: var(--radius);
  padding: .8rem .9rem; width: 100%;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--steel-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(36,82,138,.18);
}
.field input::placeholder, .field textarea::placeholder { color: #6E7F92; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea { border-color: var(--cat-ifr); }
.field__error { font-size: .88rem; color: var(--cat-ifr); font-weight: 500; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }
/* Honeypot: off-screen, never display:none — some bots skip hidden fields. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { border-radius: var(--radius); padding: 1rem 1.2rem; font-size: .98rem; }
.alert--ok   { background: #E6F6ED; border: 1px solid #9FD9BA; color: #0B5B33; }
.alert--bad  { background: #FDECEA; border: 1px solid #F1B0AC; color: #8B211B; }

/* ==========================================================================
   Contact / footer
   ========================================================================== */
.contactcard { display: grid; gap: 1.1rem; }
.contactline { display: flex; align-items: flex-start; gap: .85rem; }
.contactline__k {
  font-family: var(--font-data); font-size: .7rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--steel-400); padding-top: .3rem; min-width: 5.5rem;
}
.contactline__v { font-size: 1.05rem; }
.contactline__v a { color: inherit; }

.sitefoot { background: var(--navy-900); color: rgba(255,255,255,.74); padding-block: 3.25rem 2rem; font-size: .95rem; }
.sitefoot a { color: rgba(255,255,255,.9); }
.sitefoot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 800px) { .sitefoot__grid { grid-template-columns: 1fr; gap: 2rem; } }
.sitefoot h4 {
  font-family: var(--font-data); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--steel-400); margin-bottom: .9rem;
}
.sitefoot ul { list-style: none; }
.sitefoot li + li { margin-top: .5rem; }
.sitefoot__base {
  margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-size: .86rem; color: var(--steel-400);
}

/* ==========================================================================
   Motion — one authored moment, from an already-visible default
   ========================================================================== */
/* The hidden start state is gated on BOTH JS being present (.js, set inline in
   the head) and motion being welcome. Without that gate a failed script, a
   blocked file or an observer that never fires leaves the content permanently
   invisible — which is exactly what happened before the gate existed.
   Content is visible by default; the entrance is the enhancement. */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(14px); }
  .js .rise.is-in {
    opacity: 1; transform: none;
    transition: opacity .6s var(--ease), transform .7s var(--ease);
  }
  .js .rise:nth-child(2).is-in { transition-delay: .07s; }
  .js .rise:nth-child(3).is-in { transition-delay: .14s; }
  .js .rise:nth-child(4).is-in { transition-delay: .21s; }
}