@charset "UTF-8";
/* ==========================================================================
   TVC — Cherry Capital Airport
   "Charted water": the site is drawn as a working chart of Grand Traverse Bay.
   Contour banding sets the registers, bearing ticks are the rule furniture,
   soundings are the numeric voice, and every diagonal in the build is cut on
   100 degrees — runway 10's own magnetic bearing.

   Rooms: a chart-paper light room for traveler tasks, a deep-water dark room
   for the Authority and the night bands. One hue carries both.

   Status colour is reserved. On an airport site red can only mean irregular
   operations, so --alert owns every status use and no brand, link, heading or
   motif token is allowed to be red.
   ========================================================================== */

/* --- Faces ---------------------------------------------------------------- */
@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-var.subset.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anek Latin";
  src: url("fonts/anek-latin-var.subset.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Mono";
  src: url("fonts/fira-mono-400.subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Mono";
  src: url("fonts/fira-mono-500.subset.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Mono";
  src: url("fonts/fira-mono-700.subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Signature accent: the ink a chart prints its water in. Held five degrees
     off a screen-royal blue and a third less saturated, which is both the more
     accurate chart ink and the separation the fleet needs — #1f6feb sat 0.039
     OKLab from missouritechnology's shipped #3f6aff, inside the 0.06 the
     one-accent-per-build rule draws. This is 0.073 from it. */
  --sounding: #1874d6;

  /* OKLCH ramp from the #1874d6 seed hue, chroma auto-fit into sRGB. */
  --accent-50: #f1f6fd;
  --accent-100: #dfebfb;
  --accent-200: #bfd8f8;
  --accent-300: #94bef4;
  --accent-400: #62a1ef;
  --accent-500: #1874d6;
  --accent-600: #0065c3;
  --accent-700: #004f9b;
  --accent-800: #003973;
  --accent-900: #00234c;

  --paper: #f2f5f7;   /* chart paper — cool, never warm */
  --paper-2: #e7edf1; /* the next contour up */
  --card: #ffffff;
  --ink: #0c1a22;
  --ink-2: #3d525e;
  --rule: #c9d6de;
  --deep: #082b3d;    /* deep water room */
  --deep-2: #0d3a50;
  --dune: #d9a441;    /* dune grass, motif and seasonal fills */
  --dune-deep: #8a6216;
  --alert: #c42b1c;   /* irregular operations ONLY — never brand */
  --alert-bg: #fdeceb;

  --display: "Outfit", system-ui, -apple-system, sans-serif;
  --body: "Anek Latin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ops: "Fira Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid type: one continuous curve solved between ~360px and ~1280px.
     Tighter ratio at the small anchor, bolder at the large one. */
  --fs-100: clamp(0.8125rem, 0.7906rem + 0.0975vw, 0.875rem);
  --fs-200: clamp(0.875rem, 0.8531rem + 0.0975vw, 0.9375rem);
  --fs-300: clamp(0.9375rem, 0.9047rem + 0.1463vw, 1.03125rem);
  --fs-400: clamp(1rem, 0.9375rem + 0.2778vw, 1.1875rem);
  --fs-500: clamp(1.1875rem, 1.0781rem + 0.4861vw, 1.5rem);
  --field-size: max(16px, var(--fs-300)); /* iOS zooms any focused field under 16px */
  --fs-600: clamp(1.4375rem, 1.2266rem + 0.9375vw, 2.0625rem);
  --fs-700: clamp(1.75rem, 1.3672rem + 1.7014vw, 2.875rem);
  --fs-800: clamp(2.125rem, 1.4453rem + 3.0208vw, 4.125rem);
  --fs-900: clamp(2.5rem, 1.3672rem + 5.0347vw, 5.875rem);

  --leading-body: 1.62;
  --leading-display: 1.04;
  /* One body line, fluid — every vertical gap is authored against it, so the
     space-to-type proportion holds at every width. */
  --line: calc(var(--fs-400) * var(--leading-body));

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  --shell: 78rem;
  --shell-tight: 46rem;
  --bearing: 100deg;  /* runway 10's magnetic bearing; every diagonal uses it */
  --radius: 2px;      /* a chart has corners, not pills */
}

/* --- Reset and base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-400);
  font-variation-settings: "wdth" 100;
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
p, li, figcaption, dd { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
a { color: var(--accent-700); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-800); text-decoration-thickness: 2px; }
:where(a, button, summary, input, select, textarea, iframe, [tabindex]):focus-visible {
  outline: 3px solid var(--accent-600);
  outline-offset: 2px;
  border-radius: 1px;
}
.deep :where(a, button, summary, input, select, [tabindex]):focus-visible,
.room-deep :where(a, button, summary, input, select, [tabindex]):focus-visible {
  outline-color: var(--accent-300);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--sp-4); top: -100vh; z-index: 100;
  background: var(--accent-800); color: #fff; padding: var(--sp-3) var(--sp-5);
  font-family: var(--display); font-size: var(--fs-300); letter-spacing: 0.04em;
  text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { top: var(--sp-3); color: #fff; }

/* --- Display and ops registers -------------------------------------------- */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 600;
  line-height: var(--leading-display);
  letter-spacing: -0.018em;
  margin: 0 0 calc(var(--line) * 0.5);
  color: var(--ink);
}
h1 { font-size: var(--fs-800); font-weight: 700; }
/* Leading is a ramp, not a constant. Outfit at h1 sizes wants the tight 1.04 in
   --leading-display; the same 1.04 on an h2 that has fallen to 28px on a phone,
   or to the 33px of a doc-rail heading, sets two lines almost touching. The
   rendered-geometry probe measured 59 of them across the site. Sized headings
   get their own leading, closer as the type grows. */
h2 { font-size: var(--fs-700); line-height: 1.07; }
h3 { font-size: var(--fs-500); font-weight: 600; letter-spacing: -0.012em; line-height: 1.12; }
.lede {
  font-size: var(--fs-500);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 40ch;
  margin: 0 0 calc(var(--line) * 1.5);
}
.ops {
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
/* --- Soundings ------------------------------------------------------------
   A sounding is the small depth number a chart prints on the water. The two
   archive graphics on the long index routes are drawn the same way: the bar
   runs right from the margin, bearing ticks mark its quarter points, and the
   depth is set in the ops register at the end of the line. Type inside the SVG
   is sized in viewBox units — one unit is one pixel at the 480px measure the
   reading column collapses to on a phone — because an SVG's own text cannot
   re-flow the way HTML can. */
.sounding { margin: 0; }
.sounding__svg { display: block; width: 100%; max-width: 440px; height: auto; }
.sounding__label { font-family: var(--body); font-size: 16px; fill: var(--ink); }
.sounding__value {
  font-family: var(--ops);
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  fill: var(--accent-700);
}
.sounding__track { fill: var(--paper-2); }
.sounding__tick { fill: var(--rule); }
.sounding__bar { fill: var(--sounding); }
.sounding__part { fill: var(--dune); }
.sounding__key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  font-family: var(--ops);
  font-size: var(--fs-100);
  color: var(--ink-2);
  margin: var(--sp-3) 0 0;
}
.sounding__swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.6rem;
  margin-right: var(--sp-2);
  vertical-align: -0.05em;
}
.sounding__swatch--bar { background: var(--sounding); }
.sounding__swatch--part { background: var(--dune); }
/* Part-charted soundings: the part series is the charted reading (blue) and
   the visible remainder of the base bar is the gold irregular reading, so gold
   keeps one meaning — missing, seasonal, not yet on file — across the page. */
.sounding--part-charted .sounding__bar { fill: var(--dune); }
.sounding--part-charted .sounding__part { fill: var(--sounding); }
.sounding--part-charted .sounding__swatch--bar { background: var(--dune); }
.sounding--part-charted .sounding__swatch--part { background: var(--sounding); }
.sounding__caption {
  font-size: var(--fs-100);
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 46ch;
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--rule);
}

/* Latest packet on The Authority lander — the object, then the directory. */
.packet {
  background: var(--deep);
  color: #eaf2f7;
  padding: var(--sp-5);
  border-left: 4px solid var(--dune);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 calc(var(--line) * 1);
}
.packet__kicker {
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dune);
  margin: 0 0 var(--sp-2);
}
.packet__title { color: #fff; font-size: var(--fs-600); margin: 0 0 var(--sp-2); }
.packet__when { font-family: var(--ops); font-size: var(--fs-200); color: var(--accent-200); margin: 0; }
.packet__files { margin: var(--sp-2) 0 var(--sp-4); color: #cfe0ea; }
.packet .btn { color: #fff; }
.packet a.btn:hover { color: #fff; }

/* Schematic of where the lots sit — not a surveyed map. */
.lotplan { margin: 0 0 calc(var(--line) * 1); }
.lotplan__field {
  display: grid;
  gap: 6px;
  background: var(--deep);
  color: #eaf2f7;
  padding: var(--sp-4);
  border-radius: var(--radius);
}
.lotplan__bay {
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-200);
  text-align: center;
  padding: var(--sp-2);
  background: rgb(24 116 214 / 0.28);
}
.lotplan__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.2fr 1fr;
  gap: 6px;
}
@media (max-width: 40rem) {
  .lotplan__row { grid-template-columns: 1fr 1fr; }
}
.lotplan__cell {
  min-height: 4.5rem;
  padding: var(--sp-3);
  border: 1.5px solid rgb(190 215 255 / 0.35);
  font-size: var(--fs-200);
  font-weight: 650;
  font-family: var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lotplan__cell span {
  display: block;
  font-family: var(--ops);
  font-size: var(--fs-100);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--accent-200);
  margin-top: 0.25rem;
}
.lotplan__cell--term { background: var(--dune); color: #201603; border-color: var(--dune); }
.lotplan__cell--term span { color: #201603; }
.lotplan__cell--cell { border-color: var(--dune); }
.lotplan__economy {
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--sp-3);
  border: 1.5px dashed rgb(190 215 255 / 0.4);
  text-align: center;
}
.lotplan__caption {
  font-size: var(--fs-100);
  color: var(--ink-2);
  max-width: 46ch;
  margin: var(--sp-3) 0 0;
}

/* Ten-mile hazard area — a schematic, not a survey. */
.hazard { margin: var(--sp-5) 0 0; max-width: 28rem; }
.hazard__svg { display: block; width: 100%; height: auto; }
.hazard__water { fill: var(--accent-200); }
.hazard__land { fill: var(--paper-2); }
.hazard__ring { fill: rgb(217 164 65 / 0.18); stroke: var(--dune); stroke-width: 2; }
.hazard__dot { fill: var(--deep); }
.hazard__mark { fill: var(--dune); }
.hazard__grove { fill: var(--dune); }
.hazard__north { stroke: var(--dune); stroke-width: 2; }
.hazard__label {
  font-family: var(--ops);
  font-size: 12px;
  fill: var(--ink);
}
.hazard__label--grove { fill: var(--deep); font-weight: 700; }
.hazard__caption {
  font-size: var(--fs-100);
  color: var(--ink-2);
  max-width: 46ch;
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--rule);
}

/* At TVC: the lodge as a walk from the curb to the airfield. */
.lodge { margin: 0 0 calc(var(--line) * 1); }
.lodge__field {
  display: grid;
  gap: 6px;
  background: var(--deep);
  color: #eaf2f7;
  padding: var(--sp-4);
  border-radius: var(--radius);
}
.lodge__band {
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-200);
  text-align: center;
  padding: var(--sp-2);
  border: 1.5px dashed rgb(190 215 255 / 0.4);
}
.lodge__band--air {
  background: rgb(24 116 214 / 0.28);
  border-style: solid;
  border-color: transparent;
}
.lodge__band--tsa {
  background: var(--dune);
  color: #201603;
  border-color: var(--dune);
  letter-spacing: 0.08em;
}
.lodge__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.lodge__row--three { grid-template-columns: 1.1fr 1fr 1fr; }
@media (max-width: 40rem) {
  .lodge__row--three { grid-template-columns: 1fr; }
}
.lodge__cell {
  min-height: 4.5rem;
  padding: var(--sp-3);
  border: 1.5px solid rgb(190 215 255 / 0.35);
  font-size: var(--fs-200);
  font-weight: 650;
  font-family: var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lodge__cell span {
  display: block;
  font-family: var(--ops);
  font-size: var(--fs-100);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--accent-200);
  margin-top: 0.25rem;
}
.lodge__cell--hearth { border-color: var(--dune); }
.lodge__cell--gate { background: rgb(24 116 214 / 0.22); }
.lodge__cell--shop { border-color: var(--dune); }
.lodge__caption {
  font-size: var(--fs-100);
  color: var(--ink-2);
  max-width: 46ch;
  margin: var(--sp-3) 0 0;
}

/* TSA hours as a twenty-four-hour strip. Open is 4 a.m. to 6 p.m. */
.hours { margin: 0 0 calc(var(--line) * 1); }
.hours__day {
  background: var(--deep);
  color: #eaf2f7;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border-radius: var(--radius);
}
.hours__track {
  position: relative;
  height: 2.25rem;
  background: rgb(190 215 255 / 0.16);
  border-radius: 2px;
}
.hours__open {
  position: absolute;
  left: 16.67%;
  width: 58.33%;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dune);
  color: #201603;
  font-family: var(--ops);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 28rem) {
  .hours__open { letter-spacing: 0.02em; }
}
.hours__marks {
  position: relative;
  height: 1.5rem;
  margin: var(--sp-2) 0 0;
}
.hours__marks span {
  position: absolute;
  top: 0;
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-200);
  transform: translateX(-50%);
  white-space: nowrap;
}
.hours__marks span:first-child { transform: none; }
.hours__marks span:last-child { transform: translateX(-100%); }
.hours__caption {
  font-size: var(--fs-100);
  color: var(--ink-2);
  max-width: 46ch;
  margin: var(--sp-3) 0 0;
}

/* Airport Access Road, north to south, same grammar as the lot plan. */
.road { margin: 0 0 calc(var(--line) * 1); }
.road__field {
  display: grid;
  gap: 6px;
  background: var(--deep);
  color: #eaf2f7;
  padding: var(--sp-4);
  border-radius: var(--radius);
}
.road__end,
.road__spur {
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-200);
  text-align: center;
  padding: var(--sp-2);
  margin: 0;
  background: rgb(24 116 214 / 0.28);
}
.road__spine {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.road__stop {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-3);
  border: 1.5px solid rgb(190 215 255 / 0.35);
  font-family: var(--display);
  font-size: var(--fs-200);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.road__num {
  font-family: var(--ops);
  font-size: var(--fs-200);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--dune);
  min-width: 4.5ch;
}
.road__who { color: #eaf2f7; }
.road__stop--term {
  background: var(--dune);
  color: #201603;
  border-color: var(--dune);
}
.road__stop--term .road__num,
.road__stop--term .road__who { color: #201603; }
.road__caption {
  font-size: var(--fs-100);
  color: var(--ink-2);
  max-width: 46ch;
  margin: var(--sp-3) 0 0;
}

/* Gates to the Future as published, with no invented opening date. */
.phase { margin: 0 0 calc(var(--line) * 1); }
.phase__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .phase__track { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}
.phase__step {
  margin: 0;
  padding: var(--sp-4);
  background: var(--deep);
  color: #eaf2f7;
  border-radius: var(--radius);
  border-top: 4px solid rgb(190 215 255 / 0.35);
}
.phase__step--now { border-top-color: var(--dune); }
.phase__when {
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-200);
  margin: 0 0 var(--sp-2);
}
.phase__step--now .phase__when { color: var(--dune); }
.phase__what {
  font-family: var(--display);
  font-size: var(--fs-400);
  font-weight: 650;
  color: #fff;
  margin: 0 0 var(--sp-2);
}
.phase__note {
  margin: 0;
  font-size: var(--fs-200);
  color: #cfe0ea;
}
.phase__caption {
  font-size: var(--fs-100);
  color: var(--ink-2);
  max-width: 46ch;
  margin: var(--sp-3) 0 0;
}

/* The standing description of a long index: what the archive holds, riding
   every page of it because it describes the library and not the current page. */
/* The window a content route opens on, set at the full reading width. */
.lead-window { padding: var(--sp-6) 0 var(--sp-5); }
@media (min-width: 62rem) { .lead-window { padding: var(--sp-7) 0 var(--sp-6); } }

.library-note {
  margin-top: var(--sp-7);
  padding: var(--sp-5);
  border-top: 4px solid var(--accent-700);
  background: var(--card);
  box-shadow: 0 14px 32px -26px rgb(8 43 61 / 0.55);
}
.library-note h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-400); }
.library-note p { margin: 0; max-width: 68ch; color: var(--ink-2); }
.eyebrow {
  font-family: var(--ops);
  font-size: var(--fs-100);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
}
/* Bearing ticks — the graduated edge of a compass rose. */
.eyebrow::after {
  content: "";
  flex: 1;
  height: 7px;
  background:
    repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 9px) bottom left / 100% 5px no-repeat,
    linear-gradient(currentColor, currentColor) bottom left / 100% 1px no-repeat;
  opacity: 0.45;
}
.room-deep .eyebrow { color: var(--accent-200); }

/* --- Layout --------------------------------------------------------------- */
.shell { width: min(100% - var(--sp-5) * 2, var(--shell)); margin-inline: auto; }
.section { padding-block: calc(var(--line) * 3); }
.section--tight { padding-block: calc(var(--line) * 2); }
.section > * + .band-head { margin-top: calc(var(--line) * 2); }

/* Contour banding — the register separator, cut on runway 10's bearing. */
.contour {
  height: 10px;
  background: repeating-linear-gradient(
    var(--bearing),
    var(--rule) 0 1px,
    transparent 1px 7px
  );
  opacity: 0.85;
}
.room-deep .contour { background: repeating-linear-gradient(var(--bearing), var(--accent-800) 0 1px, transparent 1px 7px); opacity: 1; }

.room-deep {
  background: var(--deep);
  color: #eaf2f7;
}
.room-deep h1, .room-deep h2, .room-deep h3 { color: #fff; }
.room-deep .lede { color: var(--accent-200); }
.room-deep a { color: var(--accent-300); }
.room-deep a:hover { color: #fff; }
.room-paper2 { background: var(--paper-2); }

/* --- Chrome: banner ------------------------------------------------------- */
.proto-banner {
  background: var(--deep);
  color: var(--accent-200);
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.03em;
  text-align: center;
  padding: var(--sp-2) var(--sp-4);
}
.proto-banner a {
  color: inherit;
  text-decoration: underline;
}
.proto-banner a:hover,
.proto-banner a:focus-visible {
  color: #fff;
}
.proto-banner a:focus-visible {
  outline-color: var(--accent-300);
}

/* --- Chrome: masthead ----------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 50;
  background: var(--card);
  border-bottom: 1px solid var(--rule);
}
.site-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -6px;
  height: 6px;
  background: repeating-linear-gradient(var(--bearing), var(--accent-600) 0 1px, transparent 1px 6px);
  opacity: 0.5;
  pointer-events: none;
}
.masthead {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding-block: var(--sp-4);
}
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; flex: none; }
.brand__mark {
  width: 46px; height: 46px; flex: none;
  border-radius: var(--radius);
  overflow: hidden;
  transition: width 0.2s ease, height 0.2s ease;
}
.brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.brand__name {
  font-family: var(--display);
  font-size: var(--fs-600);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 0.9;
  display: block;
}
.brand__sub {
  font-family: var(--ops);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: block;
  margin-top: 3px;
}
/* The rail is a scroll-state container, so it can take on its stuck
   affordance in pure CSS with no scroll listener. Chromium-only today, and a
   pure enhancement: unsupported engines get the same rail without the shadow. */
@container scroll-state(stuck: top) {
  .taskrail { box-shadow: 0 10px 26px -14px rgb(8 43 61 / 0.85); }
}

/* --- Omnibox -------------------------------------------------------------- */
.omnibox { position: relative; flex: 1 1 22rem; min-width: 0; }
/* The field and SEARCH are one control. The focus ring belongs on the row,
   around both pieces, so a stroke never lands on the shared edge (the founding
   case of lint-focus-ring-collision, still visible as a four-sided box around
   the field after a three-sided inset). Overflow clips the children's corners
   to the row radius. */
.omnibox__row {
  display: flex;
  isolation: isolate;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
}
.omnibox__row:focus-within {
  border-color: var(--accent-600);
  outline: 3px solid var(--accent-600);
  outline-offset: 2px;
}
.omnibox__input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: var(--field-size);
  padding: 0.7rem 0.85rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}
.omnibox__input::placeholder { color: #6b8090; }
.omnibox__input:focus { background: #fff; }
.omnibox__input:focus-visible {
  outline: none;
  box-shadow: none;
}
.omnibox__go {
  position: relative;
  z-index: 1;
  flex: none;
  font-family: var(--display);
  font-size: var(--fs-300);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent-700);
  border: 0;
  border-radius: 0;
  padding: 0 1.15rem;
  min-height: 44px;
  cursor: pointer;
}
.omnibox__go:hover { background: var(--accent-800); color: #fff; }
.omnibox__go:focus-visible {
  outline-color: #fff;
  outline-offset: -6px;
}
.omnibox__list {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 4px);
  z-index: 60;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--card);
  border: 1.5px solid var(--accent-600);
  box-shadow: 0 18px 40px -18px rgb(8 43 61 / 0.55);
  max-height: 22rem;
  overflow-y: auto;
}
.omnibox__list[hidden] { display: none; }
.omnibox__opt {
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  border-bottom: 1px solid var(--paper-2);
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
}
.omnibox__opt:last-child { border-bottom: 0; }
.omnibox__opt[aria-selected="true"] { background: var(--accent-50); }
.omnibox__opt .kind {
  font-family: var(--ops);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  flex: none;
  min-width: 5.5rem;
}
.omnibox__opt--ask { background: var(--accent-50); }
.omnibox__opt--ask .kind { color: var(--accent-700); }

/* --- Language switcher --------------------------------------------------- */
.language-switcher {
  position: relative;
  flex: none;
}
.language-switcher__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 4.65rem;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;
}
.language-switcher__toggle::-webkit-details-marker { display: none; }
.language-switcher__toggle::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.16s ease;
}
.language-switcher[open] .language-switcher__toggle {
  color: var(--accent-800);
  border-color: var(--accent-600);
  background: var(--accent-50);
}
.language-switcher[open] .language-switcher__toggle::after {
  transform: rotate(180deg);
}
.language-switcher__toggle:hover { border-color: var(--accent-600); }
.language-switcher__toggle:focus-visible {
  outline: 3px solid var(--accent-600);
  outline-offset: 2px;
}
.language-switcher__globe {
  position: relative;
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  border: 1.6px solid currentColor;
  border-radius: 50%;
}
.language-switcher__globe::before,
.language-switcher__globe::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
}
.language-switcher__globe::before {
  width: 0.42rem;
  height: 100%;
  border-left: 1px solid currentColor;
  border-right: 1px solid currentColor;
  border-radius: 50%;
}
.language-switcher__globe::after {
  width: 100%;
  height: 1px;
  background: currentColor;
}
.language-switcher__code {
  font-family: var(--ops);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.language-switcher__panel {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 80;
  width: min(24rem, calc(100vw - 2rem));
  padding: var(--sp-3);
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--accent-600);
  border-radius: var(--radius);
  box-shadow: 0 22px 48px -20px rgb(8 43 61 / 0.58);
}
.language-switcher__heading {
  margin: 0 0 var(--sp-2);
  padding: 0 var(--sp-2);
  font-family: var(--ops);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.language-switcher__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.language-switcher__link {
  display: flex;
  min-width: 0;
  min-height: 56px;
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem 0.65rem;
  color: var(--ink);
  text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: calc(var(--radius) - 2px);
}
.language-switcher__link:hover {
  color: var(--accent-800);
  background: var(--accent-50);
  border-left-color: var(--dune);
}
.language-switcher__link[aria-current="page"] {
  color: var(--accent-800);
  background: var(--accent-50);
  border-left-color: var(--accent-700);
}
.language-switcher__native {
  overflow-wrap: anywhere;
  font-family: var(--display);
  font-size: var(--fs-300);
  font-weight: 600;
  line-height: 1.2;
}
.language-switcher__english {
  overflow-wrap: anywhere;
  margin-top: 0.12rem;
  font-family: var(--ops);
  font-size: 0.64rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

/* --- Nav ------------------------------------------------------------------ */
.site-nav {
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--paper-2);
}
.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  gap: 0.15rem 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__list > li { flex: none; }
.site-nav__link {
  display: block;
  font-family: var(--display);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: var(--ink);
  padding: 0.7rem 0.85rem;
  min-height: 44px;
  border-bottom: 3px solid transparent;
}
.site-nav__link:hover { color: var(--accent-800); border-bottom-color: var(--dune); background: var(--accent-50); }
.site-nav__link[aria-current="page"] { color: var(--accent-800); border-bottom-color: var(--accent-700); }
.menu-btn { display: none; }

@media (max-width: 60rem) {
  .proto-banner { padding: 0.28rem var(--sp-3); }
  .site-header::after { display: none; }
  .masthead {
    flex-wrap: nowrap;
    gap: var(--sp-2);
    padding-block: 0.4rem;
  }
  .brand__sub { display: none; }
  .brand__mark { width: 36px; height: 36px; }
  .brand__name { font-size: var(--fs-400); }
  .omnibox { order: 0; flex-basis: auto; }
  .omnibox__input { padding: 0.45rem 0.7rem; }
  .omnibox__go { padding: 0 0.8rem; }
  .language-switcher { position: static; }
  .language-switcher__toggle { min-width: 3.35rem; padding-inline: 0.55rem; }
  .language-switcher__toggle::after { display: none; }
  .language-switcher__panel {
    top: 100%;
    right: var(--sp-5);
    left: var(--sp-5);
    width: auto;
    max-height: calc(100vh - 6.5rem);
    overflow-y: auto;
  }
  .menu-btn {
    display: block;
    margin-left: auto;
    font-family: var(--display);
    font-size: var(--fs-300);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--card);
    color: var(--ink);
    border: 1.5px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.55rem 0.9rem;
    min-height: 44px;
    cursor: pointer;
  }
  .site-nav { display: none; }
  .site-nav.is-open { display: block; }
  .site-nav__list { flex-direction: column; }
  .site-nav__list > li { flex: none; }
  .site-nav__link { border-bottom: 1px solid var(--paper-2); border-left: 3px solid transparent; text-align: left; padding-inline: 0.95rem; }
  .site-nav__link[aria-current="page"] { border-left-color: var(--accent-700); border-bottom-color: var(--paper-2); }
}
@media (max-width: 30rem) {
  /* A text field cannot stay useful between the compact TVC brand and the
     menu at phone widths. Keep Search as a clear 44px route to the full
     search page instead of squeezing the field into an unreadable sliver. */
  .masthead { gap: 6px; }
  .omnibox { flex: 0 0 auto; }
  .omnibox__input { display: none; }
  .omnibox__go { padding-inline: 0.85rem; }
  .language-switcher__toggle { gap: 0.35rem; min-width: 3.2rem; padding-inline: 0.5rem; }
  .menu-btn { padding-inline: 0.78rem; }
}
@media (max-width: 22rem) {
  .brand > span:last-child { display: none; }
  .language-switcher__toggle { width: 44px; min-width: 44px; padding-inline: 0; }
  .language-switcher__code { display: none; }
}
/* Core tasks survive with JavaScript off: with no JS the toggle is hidden and
   the nav is simply always open. */
.no-js .menu-btn { display: none; }
.no-js .site-nav { display: block; }

/* --- Hero: the charted window --------------------------------------------- */
.hero {
  position: relative;
  background: var(--deep);
  overflow: hidden;
  display: grid;
  align-content: end;
  /* 76vh parked the photo credit on the fold of a short laptop window —
     the bar read as half a line of type until you scrolled. A little extra
     height puts the whole credit below first paint. */
  min-height: min(82vh, 42rem);
}
.hero__media { position: absolute; inset: 0; }
/* Empire Bluffs is sky-heavy at the default cover centre. Bias the crop down
   so the dune wall and the sandbar stay in the frame, not a band of sky. */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
/* The photograph runs at full strength. Instead of washing the whole frame to
   make type legible, the copy sits on its own inset — the same chart-inset idea
   the photo system uses — so contrast is solved where the words actually are
   and the water keeps its colour. A light bottom wash only seats the inset. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(8 43 61 / 0.55) 0%, rgb(8 43 61 / 0.22) 26%, rgb(8 43 61 / 0) 58%);
}
.hero__inner {
  position: relative;
  padding-block: calc(var(--line) * 5) calc(var(--line) * 2.5);
}
.hero__panel {
  background: rgb(8 43 61 / 0.88);
  border-left: 4px solid var(--dune);
  padding: var(--sp-5) var(--sp-6) var(--sp-5) var(--sp-5);
  max-width: 46rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
@supports (backdrop-filter: blur(6px)) {
  .hero__panel { background: rgb(8 43 61 / 0.78); backdrop-filter: blur(9px) saturate(112%); }
}
.hero h1 { color: #fff; font-size: var(--fs-900); line-height: 1.04; margin-bottom: var(--sp-3); }
.hero__lede { color: #e8f1f7; font-size: var(--fs-500); max-width: 40ch; margin: 0; }
.hero .eyebrow { color: var(--dune); }
.hero .eyebrow::after { opacity: 0.7; }

/* Art-direct the crop rather than trusting cover. A phone's tall frame cuts a
   narrow vertical strip, and the middle of this photograph is forest — so the
   narrow frame is aimed at the bay and the dune wall instead, and the bottom
   wash lightens because the type already lands on dark water. */
@media (max-width: 46rem) {
  .hero { min-height: min(72vh, 32rem); }
  .hero__media img { object-position: 42% 78%; }
  .hero__scrim {
    background: linear-gradient(to top, rgb(8 43 61 / 0.62) 0%, rgb(8 43 61 / 0.26) 34%, rgb(8 43 61 / 0) 68%);
  }
  /* The credit can wrap to two lines at 375px. Reserve its full height so it
     never touches the copy panel above it. */
  .hero__inner { padding-block: calc(var(--line) * 1.25) calc(var(--line) * 3.25); }
  .hero__panel { padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-3); }
  .hero h1 { font-size: var(--fs-700); margin-bottom: var(--sp-2); }
  .hero__caption { padding: var(--sp-1) var(--sp-3); }
  .hero__lede { font-size: var(--fs-300); line-height: 1.55; }
}


/* The photo credit sits on its own field, not on a text shadow: at desktop the
   hero's lower right corner is bright sky and a shadow measured 2.68:1 there. */
.hero__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.05em;
  color: #dcecf5;
  background: rgb(8 43 61 / 0.82);
  padding: var(--sp-2) var(--sp-4);
  text-align: right;
  max-width: 30rem;
  border-radius: var(--radius) 0 0 0;
}

/* --- Flight state --------------------------------------------------------- */
.flightbar { background: var(--deep-2); color: #eaf2f7; }
.flightbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  padding-block: var(--sp-4);
}
.flightbar__status {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--ops);
  font-size: var(--fs-200);
  letter-spacing: 0.03em;
  margin-right: auto;
}
.flightbar__dot {
  width: 10px; height: 10px; flex: none;
  border-radius: 50%;
  background: #48d597;
  box-shadow: 0 0 0 4px rgb(72 213 151 / 0.22);
}
.flightbar__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.fbtn {
  font-family: var(--display);
  font-size: var(--fs-300);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--deep);
  background: var(--accent-200);
  border: 2px solid var(--accent-200);
  border-radius: var(--radius);
  padding: 0.62rem 1.1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.fbtn:hover { background: #fff; border-color: #fff; color: var(--deep); }
.fbtn--ghost { background: transparent; color: var(--accent-200); border-color: rgb(190 215 255 / 0.5); }
.fbtn--ghost:hover { background: var(--accent-200); color: var(--deep); border-color: var(--accent-200); }
/* A filled control keeps its own colour even where the room restyles links.
   Without this the room's link rule outranks .fbtn and the label goes
   light-on-light — legible at rest is not enough, it has to hold in every room
   and every state. */
.room-deep a.fbtn, .yearband a.fbtn, .hero a.fbtn { color: var(--deep); }
.room-deep a.fbtn:hover, .yearband a.fbtn:hover, .hero a.fbtn:hover { color: var(--deep); }
.room-deep a.fbtn--ghost, .yearband a.fbtn--ghost, .hero a.fbtn--ghost { color: var(--accent-200); }
.room-deep a.fbtn--ghost:hover, .yearband a.fbtn--ghost:hover, .hero a.fbtn--ghost:hover { color: var(--deep); }
.room-deep a.btn, .hero a.btn { color: #fff; }
.room-deep a.btn:hover, .hero a.btn:hover { color: #fff; }

/* --- The pinned task rail ------------------------------------------------- */
.taskrail {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--deep);
  color: #eaf2f7;
  container-type: scroll-state;
  border-bottom: 1px solid var(--accent-800);
}
.taskrail::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -5px;
  height: 5px;
  background: repeating-linear-gradient(var(--bearing), var(--accent-600) 0 1px, transparent 1px 6px);
  opacity: 0.55;
  pointer-events: none;
}
.taskrail__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  padding-block: var(--sp-2);
  min-height: 56px;
}
/* The masthead mark scrolls away; float it onto the sticky rail once the
   header has left, so the airport stays named. Hidden until then so it does
   not steal the hours line on first paint. */
.taskrail__brand {
  display: none;
  flex: none;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 44px;
  min-height: 44px;
}
.taskrail__brand img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}
@container scroll-state(stuck: top) {
  .taskrail__brand { display: flex; }
}
.taskrail.is-stuck .taskrail__brand { display: flex; }
.taskrail__status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: auto;
  flex: none;
  min-height: 44px;
}
.taskrail__state {
  font-family: var(--display);
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dune);
}
.taskrail__sep {
  color: var(--accent-200);
  font-weight: 500;
  letter-spacing: 0;
}
.taskrail__line {
  font-family: var(--display);
  font-size: var(--fs-300);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.taskrail__status[data-open="false"] .taskrail__dot {
  background: #ff665b;
  box-shadow:
    0 0 0 3px rgb(255 102 91 / 0.3),
    0 0 10px 3px rgb(255 82 70 / 0.7),
    0 0 22px 6px rgb(196 43 28 / 0.38);
  animation: none;
}
.taskrail__status[data-open="false"] .taskrail__state {
  color: #ff8a82;
}
.taskrail__dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: #7ff0b4;
  box-shadow:
    0 0 0 3px rgb(94 224 160 / 0.35),
    0 0 10px 3px rgb(94 224 160 / 0.7),
    0 0 22px 6px rgb(94 224 160 / 0.35);
}
@media (prefers-reduced-motion: no-preference) {
  .taskrail__dot {
    animation: tvc-live 2.4s ease-in-out infinite;
  }
}
@keyframes tvc-live {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgb(94 224 160 / 0.35),
      0 0 10px 3px rgb(94 224 160 / 0.65),
      0 0 18px 5px rgb(94 224 160 / 0.28);
  }
  50% {
    box-shadow:
      0 0 0 6px rgb(94 224 160 / 0.18),
      0 0 16px 6px rgb(94 224 160 / 0.85),
      0 0 28px 10px rgb(94 224 160 / 0.4);
  }
}
.taskrail__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  margin-left: auto;
}
/* One chip grammar sitewide: fill means "you are here," never "important."
   The flight pair leads by order and weight; every chip shares the outline,
   and the filled state is reserved for the page the visitor is on, matching
   what fill means in the arrivals toggle and the board's airline filter. */
.taskrail__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--display);
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-200);
  background: transparent;
  border: 2px solid rgb(190 215 255 / 0.42);
  border-radius: var(--radius);
  padding: 0.42rem 0.85rem;
  min-height: 44px;
}
.taskrail__link--quiet { font-weight: 600; }
.taskrail__link:hover { background: var(--accent-200); border-color: var(--accent-200); color: var(--deep); }
.taskrail__link[aria-current="page"] {
  background: var(--accent-200);
  border-color: var(--accent-200);
  color: var(--deep);
}
.room-deep a.taskrail__link, .taskrail a.taskrail__link { color: var(--accent-200); }
.taskrail a.taskrail__link:hover, .taskrail a.taskrail__link[aria-current="page"] { color: var(--deep); }
@media (max-width: 60rem) {
  /* The rail drops to its four curbside actions on purpose below 60rem:
     Airlines is one tap inside Flights, and a fifth chip either overflows
     390px or wraps the rail to a second row on a pre-content stack that is
     already tall. Hours stay: they are why this rail is an airport rail. */
  .taskrail__item--wide { display: none; }
  .taskrail__brand,
  .taskrail.is-stuck .taskrail__brand { display: none; }
  .taskrail__inner {
    flex-wrap: wrap;
    padding-block: 0.35rem;
    gap: var(--sp-2);
  }
  .taskrail__line {
    white-space: normal;
    letter-spacing: 0.04em;
  }
  .taskrail__status {
    display: flex;
    width: 100%;
    margin-right: 0;
    justify-content: flex-start;
    align-items: center;
    gap: 0.55rem;
    min-height: 0;
  }
  /* 6px, not --sp-1's 4px: the focus ring is 3px drawn 2px outside the chip,
     so it reaches 5px and a 4px gap let the next chip's fill shave its edge.
     The gap is the ring's clearance, not decoration. */
  .taskrail__list { margin-left: 0; width: 100%; justify-content: space-between; gap: 6px; }
  .taskrail__link { font-size: 0.8rem; letter-spacing: 0.035em; padding: 0.42rem 0.6rem; flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 30rem) {
  /* Four traveler tasks still fit one accessible 44px row on an ordinary
     phone when the labels, rather than their padding, own the width. This
     removes an entire pre-content row at 375–430px without hiding a task. */
  .taskrail__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .taskrail__link {
    width: 100%;
    padding-inline: 0.18rem;
    font-size: 0.68rem;
    letter-spacing: 0.01em;
  }
}

@media (max-width: 22rem) {
  /* On genuinely narrow screens, keep all four targets and give them two
     rows rather than shrinking below the 44px touch-target floor. */
  .taskrail__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--display);
  font-size: var(--fs-300);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--accent-700);
  border: 2px solid var(--accent-700);
  border-radius: var(--radius);
  padding: 0.62rem 1.15rem;
  min-height: 44px;
  cursor: pointer;
}
.btn:hover { background: var(--accent-800); border-color: var(--accent-800); color: #fff; }
.btn--quiet { background: transparent; color: var(--accent-700); }
.btn--quiet:hover { background: var(--accent-50); color: var(--accent-800); }

/* --- The year band -------------------------------------------------------- */
.yearband { background: var(--deep); color: #eaf2f7; position: relative; overflow: hidden; }
.yearband::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(var(--bearing), rgb(190 215 255 / 0.07) 0 1px, transparent 1px 14px);
  pointer-events: none;
}
.yearband__inner { position: relative; padding-block: calc(var(--line) * 1.5) calc(var(--line) * 1.25); }
.yearband__intro { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; }
@media (max-width: 52rem) {
  .yearband__inner { display: flex; flex-direction: column; }
  .dial { order: 1; margin-top: 0; }
  .yearband__intro { order: 2; grid-template-columns: 1fr; margin-top: var(--sp-4); }
  .yearband__read { order: 3; }
  .yearband__board { order: 4; }
  .yearband__count { font-size: clamp(2.4rem, 1.4rem + 5vw, 4rem); }
}
.yearband h2 { color: #fff; font-size: var(--fs-700); margin-bottom: var(--sp-3); }
.yearband .eyebrow { color: var(--accent-200); }
.yearband__read {
  font-family: var(--display);
  font-size: var(--fs-400);
  font-weight: 600;
  color: #fff;
  line-height: 1.5;
  word-spacing: 0.08em;
  margin: var(--sp-5) 0 0;
  max-width: 52ch;
}
.yearband__count {
  font-family: var(--display);
  font-size: clamp(3.5rem, 2rem + 6.6vw, 7rem);
  font-weight: 700;
  line-height: 0.82;
  color: var(--dune);
  display: block;
}
.yearband__countlabel { font-family: var(--ops); font-size: var(--fs-200); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-200); display: block; margin-top: var(--sp-2); }
.yearband__board {
  position: relative;
  margin-top: var(--sp-5);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.yearband__board a { color: var(--accent-700); }
.yearband__board a:hover,
.yearband__board a:focus-visible { color: var(--accent-800); }

/* The dial: twelve months as a graduated scale of how many cities fly. */
.dial { margin-top: calc(var(--line) * 1); }
.dial__scale {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
  align-items: end;
}
.dial__month {
  appearance: none;
  border: 0;
  background: rgb(190 215 255 / 0.16);
  color: #eaf2f7;
  font-family: var(--ops);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.4rem 0.05rem 0.4rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  min-height: 44px;
  min-width: 0;
  border-bottom: 3px solid transparent;
  --cities: 1;
}
@media (min-width: 40rem) {
  .dial__month { font-size: 0.72rem; letter-spacing: 0.04em; padding: 0.4rem 0.1rem; }
}
.dial__month:hover { background: rgb(190 215 255 / 0.3); color: #fff; }
.dial__month[aria-pressed="true"] { background: var(--dune); color: #201603; border-bottom-color: #fff; }
.yearband :where(.dial__month):focus-visible {
  outline: 3px solid var(--accent-300);
  outline-offset: -3px;
}
.dial__bar {
  display: block;
  width: 100%;
  height: calc(8px + 2.4rem * var(--cities) / var(--peak, 1));
  background: currentColor;
  opacity: 0.75;
  border-radius: 1px 1px 0 0;
}
.dial__mark { line-height: 1; }
@media (max-width: 28rem) { .dial__scale { gap: 3px; } }
.dial__legend { font-family: var(--ops); font-size: var(--fs-100); color: var(--accent-200); margin: var(--sp-3) 0 0; }
.dial__ops {
  font-family: var(--ops);
  font-size: var(--fs-200);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dune);
  margin: var(--sp-3) 0 0;
}

.leaveby { margin: var(--sp-5) 0 0; }
.leaveby__ask {
  font-family: var(--display);
  font-size: var(--fs-400);
  font-weight: 650;
  margin: 0 0 var(--sp-3);
}
.leaveby__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.leaveby__read {
  font-family: var(--display);
  font-size: var(--fs-400);
  font-weight: 650;
  color: var(--accent-800);
  margin: 0 0 var(--sp-4);
}
.leaveby__table { width: 100%; border-collapse: collapse; font-size: var(--fs-300); }
.leaveby__table th, .leaveby__table td {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.leaveby__table th {
  font-family: var(--ops);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.leaveby__caption {
  font-size: var(--fs-100);
  color: var(--ink-2);
  max-width: 46ch;
  margin: var(--sp-3) 0 0;
}

.pickup {
  margin: var(--sp-5) 0 0;
  background: var(--deep);
  color: #eaf2f7;
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.pickup__grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
@media (max-width: 40rem) { .pickup__grid { grid-template-columns: 1fr; } }
.pickup__kicker {
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dune);
  margin: 0 0 var(--sp-2);
}
.pickup__title { color: #fff; font-size: var(--fs-500); margin: 0 0 var(--sp-2); }
.pickup__body, .pickup__line { margin: 0; color: var(--accent-200); }
.pickup__next {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  border-top: 1px solid rgb(190 215 255 / 0.22);
}
.pickup__next li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto auto;
  gap: var(--sp-3);
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgb(190 215 255 / 0.14);
  font-family: var(--ops);
  font-size: var(--fs-200);
}
.pickup__flight { color: var(--dune); font-weight: 700; }
.pickup__city { color: #fff; }
.pickup__time, .pickup__status { color: var(--accent-200); }
.pickup__empty, .pickup__more { margin: var(--sp-4) 0 0; }
.pickup a { color: var(--accent-300); }
.pickup a:hover, .pickup a:focus-visible { color: #fff; }
.pickup__caption {
  font-size: var(--fs-100);
  color: var(--accent-200);
  max-width: 46ch;
  margin: var(--sp-3) 0 0;
}

.hazard__probe { margin: var(--sp-4) 0 0; }
.hazard__ask {
  display: block;
  font-family: var(--display);
  font-size: var(--fs-400);
  font-weight: 650;
  margin-bottom: var(--sp-3);
}
.hazard__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.hazard__select {
  font: inherit;
  font-size: var(--field-size);
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
}
.hazard__answer {
  margin: var(--sp-3) 0 0;
  font-family: var(--display);
  font-size: var(--fs-400);
  font-weight: 650;
  color: var(--accent-800);
}
.hazard__grove.is-on, .hazard__dot.is-on {
  stroke: var(--deep);
  stroke-width: 3;
}

/* --- The nonstop board ---------------------------------------------------- */
.board__filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: calc(var(--line) * 1); }
.chip {
  appearance: none;
  font-family: var(--ops);
  font-size: var(--fs-100);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.5rem 0.8rem;
  min-height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.chip__logo { width: auto; height: 1.35rem; max-width: 4.75rem; object-fit: contain; }
.chip--airline[aria-pressed="true"] .chip__logo { background: #fff; border-radius: 2px; padding: 2px 4px; }
.chip:hover { border-color: var(--accent-600); color: var(--accent-800); }
.chip[aria-pressed="true"] { background: var(--accent-700); border-color: var(--accent-700); color: #fff; }

.board__table { width: 100%; border-collapse: collapse; font-size: var(--fs-300); }
.board__table caption { text-align: left; font-family: var(--ops); font-size: var(--fs-100); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); padding-bottom: var(--sp-3); }
.board__table th, .board__table td { text-align: left; padding: 0.62rem 0.7rem; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.board__table thead th {
  font-family: var(--ops);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 2px solid var(--ink-2);
}
.board__table tbody tr:hover { background: var(--accent-50); }
.board__code { font-family: var(--ops); font-weight: 700; color: var(--accent-700); letter-spacing: 0.06em; }
.board__city { font-weight: 600; }
.board__window { font-family: var(--ops); font-size: var(--fs-100); color: var(--ink-2); white-space: nowrap; }
.board__window--year { color: var(--dune-deep); font-weight: 500; }
/* Routes out of season are off the board entirely (rows carry the hidden
   attribute); the only row state left to draw is a named destination that is
   not flying today, whose window text answers the question on its own. */
.board__table tr[data-state="off"] .board__window { color: var(--dune-deep); font-weight: 500; }
.board__row--off {
  background-image: repeating-linear-gradient(var(--bearing), rgb(12 26 34 / 0.06) 0 1px, transparent 1px 6px);
}
.board__row--off .board__window { text-decoration: line-through; color: var(--ink-2); }
.board__off {
  display: none;
  font-family: var(--ops);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dune-deep);
  margin-left: var(--sp-3);
  white-space: nowrap;
}
.board__row--off .board__off { display: inline; }
/* A season that has not started yet is not a season that is over. The hatch
   says "not today"; the strikethrough is reserved for a window that has closed,
   and an upcoming route says when it opens instead. */
.board__row--soon {
  background-image: repeating-linear-gradient(var(--bearing), rgb(12 26 34 / 0.03) 0 1px, transparent 1px 6px);
}
.board__row--soon .board__window { text-decoration: none; }
.board__soon {
  display: none;
  font-family: var(--ops);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dune-deep);
  margin-inline-start: var(--sp-2);
  white-space: nowrap;
}
.board__row--soon .board__soon { display: inline; }
.board__note { font-size: var(--fs-200); color: var(--ink-2); margin: var(--sp-4) 0 0; max-width: 62ch; }

/* The destination answer. A sounding: the question in the ops register, the
   answer in the reading measure, on the deep-water plate the Authority's own
   rooms use. It is the first thing on the board when the URL carries ?to=. */
.board__answer {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--deep);
  color: #fff;
  border-left: 3px solid var(--accent-400);
  border-radius: var(--radius);
  display: grid;
  gap: var(--sp-2);
}
.board__answer-q {
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-300);
}
.board__answer-a { font-size: var(--fs-500); line-height: 1.3; font-family: var(--display); }
.board__answer-clear { color: var(--accent-300); font-size: var(--fs-200); justify-self: start; }
.board__answer-clear:hover { color: #fff; }
.omnibox__opt--answer .kind { background: var(--accent-600); color: #fff; }
@media (max-width: 44rem) {
  .board__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .board__table tr { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule); }
  /* Same trap as .omnibox__list and .answer above: display:grid on a class
     outranks the user-agent [hidden] rule, so every filtered row stayed on
     screen at phone widths while the caption above it said how many had been
     removed. The one screen where the site contradicted itself out loud, on
     the signature surface, on the device this build designs for first. */
  .board__table tr[hidden] { display: none; }
  .board__table td { border: 0; padding: 0.1rem 0; }
  .board__table td[data-col="code"] { grid-row: span 3; align-self: center; font-size: var(--fs-500); }
}

/* --- Task rail ------------------------------------------------------------ */
.rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--sp-5); }
.rail__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: var(--sp-2);
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--accent-700);
  border-radius: var(--radius);
  padding: var(--sp-5);
  text-decoration: none;
  color: inherit;
}
.rail__item:hover { border-color: var(--accent-600); border-top-color: var(--dune); box-shadow: 0 12px 28px -20px rgb(8 43 61 / 0.7); }
.rail__title { font-family: var(--display); font-size: var(--fs-500); font-weight: 600; margin: 0 0 var(--sp-2); }
.rail__body { margin: 0; font-size: var(--fs-300); color: var(--ink-2); }
.rail__meta { font-family: var(--ops); font-size: var(--fs-100); letter-spacing: 0.05em; color: var(--accent-700); align-self: end; }
.rail__item:hover .rail__meta { color: var(--accent-800); }

/* --- Charted window (photo system) ---------------------------------------- */
.window { margin: 0; }
.window__frame { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
.window__frame::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 9px;
  z-index: 2;
  background: repeating-linear-gradient(var(--bearing), rgb(255 255 255 / 0.85) 0 1px, transparent 1px 7px);
}
.window__frame img { width: 100%; height: 100%; object-fit: cover; }
.window--wide .window__frame { aspect-ratio: 16 / 7; }
.window--tall .window__frame { aspect-ratio: 4 / 5; }
/* The chart inset. A wide window is the main sheet: full bleed to its own
   keyline. A tall window is an inset panel, and a chart cuts the corner of an
   inset so the sheet underneath reads as continuous — so these get the cut,
   sized to the same 9px the bearing hatch is graduated on. Two treatments,
   because the photo system is a system: one crop repeated six times down a
   homepage is the uniform cover grid under another name. */
.window--tall .window__frame,
.window--tall .window__frame img {
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.window--square .window__frame { aspect-ratio: 1 / 1; }
.window--band .window__frame { aspect-ratio: 4 / 1; }
.region-card { display: block; }
.region-card__place {
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.02em;
  color: var(--ink-2);
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
}
.region-card__credit { opacity: 0.8; }
.window__caption {
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.02em;
  color: var(--ink-2);
  padding-top: var(--sp-2);
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  border-top: 1px solid var(--rule);
  margin-top: var(--sp-2);
}
.room-deep .window__caption { color: var(--accent-200); border-top-color: var(--accent-800); }
.window__place { font-weight: 500; color: var(--ink); }
.room-deep .window__place { color: #fff; }
.window__credit { margin-left: auto; opacity: 0.8; text-align: right; flex: 0 1 auto; min-width: 0; }
.window__caption { flex-wrap: wrap; }


/* --- Editorial region spread ---------------------------------------------- */
.lead-spread {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  margin-top: calc(var(--line) * 1.25);
}
@media (max-width: 62rem) { .lead-spread { grid-template-columns: 1fr; } }
.lead-spread__copy h3 { font-size: var(--fs-600); margin-bottom: calc(var(--line) * 0.5); }
.lead-spread__copy p { margin: 0 0 var(--line); max-width: 44ch; }
.lead-spread__copy p:last-child { margin-bottom: 0; }

.places {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--sp-5);
  margin-top: calc(var(--line) * 2);
}
.place {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  row-gap: 0;
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--dune);
  border-radius: var(--radius);
  overflow: hidden;
}
.place__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.place__title { font-family: var(--display); font-size: var(--fs-500); font-weight: 600; letter-spacing: -0.012em; margin: 0 0 var(--sp-2); }
.place__text { margin: 0; font-size: var(--fs-300); color: var(--ink-2); }
.place__place {
  font-family: var(--ops);
  font-size: var(--fs-100);
  color: var(--ink-2);
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
}
.place__credit { opacity: 0.8; }

/* A full-bleed frame between sections: the region at the scale it deserves. */
.fullbleed { position: relative; background: var(--deep); }
.fullbleed > img { width: 100%; height: min(52vh, 30rem); object-fit: cover; display: block; }
.fullbleed__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding-block: var(--sp-5) var(--sp-4);
  background: linear-gradient(to top, rgb(8 43 61 / 0.96) 0%, rgb(8 43 61 / 0.9) 42%, rgb(8 43 61 / 0.62) 72%, rgb(8 43 61 / 0) 100%);
  color: #fff;
}
.fullbleed__line {
  font-family: var(--display);
  font-size: var(--fs-600);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
  max-width: 26ch;
}
.fullbleed__meta {
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.03em;
  color: #d8e8f2;
  margin: var(--sp-3) 0 0;
}
.fullbleed__credit { opacity: 0.78; }
@media (max-width: 46rem) {
  .fullbleed > img { height: min(44vh, 20rem); }
  .fullbleed__line { font-size: var(--fs-500); }
}

/* --- Notice / alert ------------------------------------------------------- */
.notice {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--alert-bg);
  border-left: 5px solid var(--alert);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
}
.notice__label {
  font-family: var(--ops);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--alert);
  flex: none;
  padding-top: 0.15rem;
}
.notice p { margin: 0; font-size: var(--fs-300); }
.notice--info { background: var(--accent-50); border-left-color: var(--accent-700); }
.notice--info .notice__label { color: var(--accent-800); }
/* The label sits beside the body only while there is room for both. On a phone
   the row kept its two columns and the body wrapped at one to three words a
   line — the parking notice ran about forty single-word lines. This build
   designs for the phone first, so the label goes above the text there. */
@media (max-width: 34rem) {
  .notice { flex-direction: column; gap: var(--sp-2); }
  .notice__label { padding-top: 0; }
}

/* --- Records list --------------------------------------------------------- */
.records { list-style: none; margin: 0; padding: 0; }
.records__item {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--accent-800);
}
.records__date { font-family: var(--ops); font-size: var(--fs-100); letter-spacing: 0.04em; color: var(--accent-200); }
.records__title { font-weight: 600; }
.records__title a { text-decoration: none; }
.records__title a:hover { text-decoration: underline; }
.records__kind { font-family: var(--ops); font-size: var(--fs-100); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dune); }
@media (max-width: 44rem) {
  .records__item { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--deep); color: #cfe0ea; padding-block: calc(var(--line) * 2.5) calc(var(--line) * 1.5); }
.site-footer a { color: var(--accent-200); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--sp-6); }
.footer__head { font-family: var(--ops); font-size: var(--fs-100); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dune); margin: 0 0 var(--sp-3); }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-300); }
.footer__base a { color: #fff; text-decoration: underline; }
.footer__base {
  margin-top: calc(var(--line) * 1.5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--accent-800);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.03em;
  color: #9fbccd;
}
.footer__signup { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.footer__signup input {
  flex: 1 1 10rem;
  min-width: 0;
  font: inherit;
  font-size: var(--field-size);
  padding: 0.55rem 0.7rem;
  border: 1.5px solid var(--accent-800);
  border-radius: var(--radius);
  background: var(--deep-2);
  color: #fff;
}
.footer__signup input::placeholder { color: #7f9dae; }

/* --- Embeds --------------------------------------------------------------- */
.embed { position: relative; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); }
.embed iframe { display: block; width: 100%; border: 0; position: relative; z-index: 1; }
.embed__note { font-family: var(--ops); font-size: var(--fs-100); color: var(--ink-2); padding: var(--sp-3); border-top: 1px solid var(--rule); }

/* The vendor document takes seconds to arrive, and an empty reserved frame
   reads broken, not loading. The mount says so until the board paints over
   it, and points at the way out when the wait runs long. */
.embed::after {
  content: "Loading the live feed\2026";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-content: center;
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: repeating-linear-gradient(var(--bearing), rgb(12 26 34 / 0.03) 0 1px, transparent 1px 9px);
}
.embed[data-embed-state="slow"]::after { content: "Still loading. The link below opens the board directly."; color: var(--ink); }
.embed[data-embed-state="loaded"]::after { content: none; }
.embed__label, .embed__note { position: relative; z-index: 1; }
.embed__stage { position: relative; }
.embed__shield {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  color: transparent;
  font-family: var(--display);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: 44px;
}
.embed__shield:hover,
.embed__shield:focus-visible {
  background: rgb(8 43 61 / 0.42);
  color: #fff;
}
.embed--live.is-interactive .embed__shield { display: none; }


/* --- Interior page head ---------------------------------------------------- */
.page-head { background: var(--paper-2); padding-block: calc(var(--line) * 0.85) calc(var(--line) * 0.65); }
.page-head--compact { padding-block: calc(var(--line) * 0.55) calc(var(--line) * 0.4); }
.page-head--flight { padding-block: calc(var(--line) * 0.9) calc(var(--line) * 0.72); }
@media (max-width: 46rem) {
  .page-head--instrument { display: none; }
}
.page-head h1 { font-size: var(--fs-800); margin-bottom: calc(var(--line) * 0.35); }
#nonstop-head { scroll-margin-top: 5rem; }
.page-head .lede { margin-bottom: 0; max-width: 58ch; }

/* --- Flight boards --------------------------------------------------------- */
.fids__switch {
  display: flex;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-3) var(--sp-4) 0;
  background: var(--deep);
  border-radius: var(--radius) var(--radius) 0 0;
}
.fids__panel .flaps { border-radius: 0 0 var(--radius) var(--radius); }
.fids__panel .flaps::before { display: none; }
.fids__panel[hidden] { display: none; }
.fids__tab {
  font-family: var(--display);
  font-size: var(--fs-300);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #eaf2f7;
  background: rgb(190 215 255 / 0.08);
  border: 2px solid rgb(190 215 255 / 0.28);
  border-radius: var(--radius);
  padding: 0.55rem 1.1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.fids__tab:hover { border-color: var(--accent-300); background: rgb(190 215 255 / 0.16); color: #fff; }
.fids__tab[aria-selected="true"] { background: var(--dune); border-color: var(--dune); color: #201603; }
.fids__tab:focus-visible {
  outline: 3px solid var(--accent-300);
  outline-offset: -3px;
}
@media (min-width: 64rem) {
  .section--doc.section--flight-board > .shell { grid-template-columns: minmax(0, 1fr); }
  .section--flight-board .doc-rail { display: contents; }
  .section--flight-board .doc-body { grid-column: 1; }
}

/* Native terminal board. FlightView stays as the licensed live feed; this is
   the face a traveler reads — flaps in the deep-water room, Fira Mono for the
   ops, Outfit for the city. Red is irregular operations only. */
.flaps {
  background: var(--deep);
  color: #eaf2f7;
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0 var(--sp-4) var(--sp-4);
  position: relative;
}
.flaps::before {
  content: "";
  display: block;
  height: 9px;
  margin: 0 calc(var(--sp-4) * -1);
  background: repeating-linear-gradient(var(--bearing), rgb(24 116 214 / 0.45) 0 1px, transparent 1px 7px);
}
.flaps__mast {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) 0 var(--sp-3);
}
.flaps__name {
  margin: 0;
  font-family: var(--display);
  font-size: var(--fs-600);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.15;
}
.flaps__kicker {
  margin: 0;
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dune);
}
.flaps__table { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 6px 8px; }
.flaps__col--airline { width: 12%; }
.flaps__col--flight { width: 11%; }
.flaps__col--city { width: 24%; }
.flaps__col--status { width: 14%; }
.flaps__col--time { width: 14%; }
.flaps__col--gate { width: 8%; }
.flaps__table caption { text-align: left; }
.flaps__table thead th {
  font-family: var(--ops);
  font-size: var(--fs-100);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-200);
  text-align: left;
  padding: 0.15rem 0.45rem 0.35rem;
  border: 0;
}
.flaps__table th,
.flaps__table td { min-width: 0; }
.flaps__table td { padding: 0; border: 0; vertical-align: stretch; }
.flaps__cell {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 3.25rem;
  padding: 0.65rem 0.75rem;
  background:
    linear-gradient(to bottom,
      #124056 0 calc(50% - 1px),
      rgb(0 0 0 / 0.45) calc(50% - 1px) calc(50% + 1px),
      #0a2836 calc(50% + 1px) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}
.flaps__airline {
  font-family: var(--ops);
  font-size: var(--fs-100);
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-200);
}
.flaps__flight {
  font-family: var(--ops);
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: normal;
}
.flaps__city {
  font-family: var(--display);
  font-size: var(--fs-400);
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
  overflow-wrap: normal;
  word-break: normal;
}
.flaps__status {
  font-family: var(--ops);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-200);
  justify-content: flex-start;
  overflow-wrap: normal;
}
.flaps__time {
  font-family: var(--ops);
  font-size: var(--fs-300);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--dune);
  white-space: nowrap;
}
.flaps__gate {
  font-family: var(--ops);
  font-size: var(--fs-300);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  white-space: nowrap;
}
.flaps__row[data-status="air"] .flaps__status { color: var(--dune); }
.flaps__row[data-status="arrived"] .flaps__status { color: var(--accent-200); font-weight: 500; }
.flaps__row[data-status="delayed"] .flaps__status,
.flaps__row[data-status="cancelled"] .flaps__status {
  color: #fff;
  background: var(--alert);
  box-shadow: none;
}
.flaps__note, .flaps__empty {
  font-size: var(--fs-200);
  color: var(--accent-200);
  margin: var(--sp-3) 0 0;
  max-width: 62ch;
}
.flaps__note a { color: var(--accent-200); }
.flaps__note a:hover, .flaps__note a:focus-visible { color: #fff; }
.flaps__licence { margin-top: var(--sp-4); }
.flaps__licence summary {
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-200);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.flaps__licence summary:hover,
.flaps__licence summary:focus-visible { color: #fff; }
.flaps .embed--fids { margin-top: var(--sp-3); }
@media (max-width: 72rem) {
  .flaps { padding-inline: var(--sp-3); }
  .flaps::before { margin-inline: calc(var(--sp-3) * -1); }
  .flaps__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .flaps__table { border-spacing: 0 8px; }
  .flaps__table colgroup { display: none; }
  .flaps__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .flaps__row[hidden] { display: none; }
  .flaps__row td[data-col="city"] { grid-column: 1; grid-row: 1; }
  .flaps__row td[data-col="status"] { grid-column: 2; grid-row: 1; }
  .flaps__row td[data-col="airline"] { grid-column: 1; grid-row: 2; }
  .flaps__row td[data-col="flight"] { grid-column: 2; grid-row: 2; }
  .flaps__row td[data-col="sched"] { grid-column: 1; grid-row: 3; }
  .flaps__row td[data-col="actual"] { grid-column: 2; grid-row: 3; }
  .flaps__row td[data-col="gate"] { grid-column: 1 / -1; grid-row: 4; }
}
@media (max-width: 46rem) {
  .fids-switcher { margin-inline: calc(var(--sp-5) * -1); }
  .fids__switch,
  .fids__panel .flaps { border-radius: 0; }
}
@media (max-width: 28rem) {
  .fids__switch { padding-inline: var(--sp-3); }
  .flaps { padding-inline: var(--sp-2); }
  .flaps::before { margin-inline: calc(var(--sp-2) * -1); }
  .flaps__row { gap: 4px; }
  .flaps__cell { min-height: 3rem; padding: 0.55rem; }
  .flaps__city { font-size: var(--fs-300); letter-spacing: 0.02em; }
  .flaps__flight,
  .flaps__time,
  .flaps__gate { font-size: var(--fs-200); }
  .flaps__airline,
  .flaps__status { font-size: 0.75rem; letter-spacing: 0.04em; }
}
/* FlightView paints its own "Arrivals · TVCLive" title dark-on-dark. A
   negative margin on the iframe itself pulled that title up over our
   nameplate. Clip it inside a viewport that sits under .embed__strip. */
.embed--fids .embed__viewport {
  overflow: hidden;
  height: 46rem;
  border-radius: 2px;
  background: var(--deep-2);
}
.embed--fids .embed__viewport iframe {
  min-height: 0;
  height: calc(46rem + 5rem + 7rem);
  margin-top: -5rem;
  background: #fff;
  border-radius: 0;
}
/* The licensed board, mounted as a terminal instrument. Its interior is
   another company's document and cannot be restyled — disclosed on the
   accessibility page and scoped in a11y-scope.json — so what Stoa owns is the
   mount: a deep-water panel with the bearing hatch cut in dune gold and a
   mono nameplate strip, the way a departures board hangs in the terminal. */
.embed--fids,
.embed--live { overflow: hidden; background: var(--deep); border-color: var(--deep-2); padding: 0 var(--sp-3) var(--sp-3); }
.embed--fids::before,
.embed--live::before {
  content: "";
  display: block;
  height: 9px;
  background: repeating-linear-gradient(var(--bearing), rgb(24 116 214 / 0.45) 0 1px, transparent 1px 7px);
}
.embed--fids .embed__strip,
.embed--live .embed__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-2) 0;
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.embed--fids .embed__live,
.embed--live .embed__live {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: #eaf2f7;
}
.embed--fids .embed__live-dot,
.embed--live .embed__live-dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #3ecf6a;
  flex: 0 0 auto;
}
.embed--fids p.embed__note,
.embed--live p.embed__note { color: #eaf2f7; }
.embed--fids .embed__note a,
.embed--live .embed__note a {
  color: var(--accent-200);
  text-decoration: underline;
}
.embed--fids .embed__note a:hover,
.embed--fids .embed__note a:focus-visible,
.embed--live .embed__note a:hover,
.embed--live .embed__note a:focus-visible { color: #fff; }
.embed--fids::after,
.embed--live::after { color: #9fbccd; }
.embed--fids[data-embed-state="slow"]::after,
.embed--live[data-embed-state="slow"]::after { color: #fff; }
.embed__label {
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--rule);
}


/* Self-hosted films keep the same window register as photographs: a charted
   frame, then a mono caption. The player is the browser's; we only size it. */
.film { margin: var(--sp-5) 0 0; }
.film__player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  background: var(--deep);
  border-radius: var(--radius);
}
.film__caption {
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.02em;
  color: var(--ink-2);
  padding-top: var(--sp-2);
  margin-top: var(--sp-2);
  border-top: 1px solid var(--rule);
}
.film__place { display: block; font-weight: 500; color: var(--ink); margin-bottom: var(--sp-2); }
.film__desc summary {
  cursor: pointer;
  min-height: 24px;
  color: var(--accent-800);
}
.film__desc p { margin: var(--sp-2) 0 0; max-width: 62ch; color: var(--ink-2); }

/* --- Airline directory ----------------------------------------------------- */
.airlines {
  list-style: none;
  margin: calc(var(--line) * 1.25) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--sp-5);
}
.airline {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: var(--sp-2);
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent-700);
  border-radius: var(--radius);
  padding: var(--sp-5);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.airline:hover,
.airline:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -18px rgb(8 43 61 / 0.5);
  border-color: var(--accent-300);
  border-left-color: var(--dune);
}
.airline__logo {
  margin: 0 0 var(--sp-1);
  min-height: 3.75rem;
  display: flex;
  align-items: center;
}
.airline__logo img {
  height: 3.5rem;
  width: auto;
  max-width: 100%;
  max-height: 3.5rem;
  object-fit: contain;
  object-position: left center;
  transition: transform 0.18s ease;
}
.airline:hover .airline__logo img,
.airline:focus-within .airline__logo img { transform: scale(1.06); }
.airline__name { font-family: var(--display); font-size: var(--fs-500); font-weight: 600; letter-spacing: -0.012em; margin: 0; }
.airline__cities { margin: 0; font-size: var(--fs-200); color: var(--ink-2); }
.airline__contact { margin: var(--sp-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); align-self: end; font-size: var(--fs-300); }
@media (prefers-reduced-motion: reduce) {
  .airline,
  .airline__logo img { transition: none; }
  .airline:hover,
  .airline:focus-within { transform: none; }
  .airline:hover .airline__logo img,
  .airline:focus-within .airline__logo img { transform: none; }
}

/* --- Record library -------------------------------------------------------- */
.recfilter {
  position: sticky;
  top: 56px;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.recfilter__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.recfilter__row + .recfilter__row { margin-top: var(--sp-3); }
.recfilter__label {
  font-family: var(--ops);
  font-size: var(--fs-100);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  flex: none;
  min-width: 13rem;
}
.recfilter__field {
  display: flex;
  isolation: isolate;
  flex: 1 1 22rem;
  min-width: 0;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}
.recfilter__field:focus-within {
  border-color: var(--accent-600);
  outline: 3px solid var(--accent-600);
  outline-offset: 2px;
}
.recfilter__input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: var(--field-size);
  padding: 0.6rem 0.8rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}
.recfilter__input:focus { background: #fff; }
/* Focus-scroll must land the field clear of the pinned rail above and the
   viewport edge below; the browser's minimal scroll leaves it flush otherwise. */
.recfilter__input, .recfilter__select { scroll-margin-block: calc(var(--sp-7) * 2.5) var(--sp-6); }
.recfilter__field .btn {
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 0;
}
.recfilter__input:focus-visible {
  outline: none;
  box-shadow: none;
}
.recfilter__field .btn:focus-visible {
  outline-color: #fff;
  outline-offset: -6px;
}
.recfilter__select {
  font: inherit;
  font-size: var(--field-size);
  padding: 0.6rem 0.8rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  min-height: 44px;
  flex: 1 1 18rem;
  max-width: 30rem;
}
.recfilter__clear { margin: var(--sp-3) 0 0; font-size: var(--fs-200); }
.recfilter__count { font-size: var(--fs-300); color: var(--ink-2); margin: 0 0 var(--sp-4); }

.reclist { list-style: none; margin: 0; padding: 0; }
.rec { padding: var(--sp-5) 0; border-bottom: 1px solid var(--rule); }
.rec:first-child { border-top: 1px solid var(--rule); }
.rec__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0 0 var(--sp-2); }
.rec__kind {
  font-family: var(--ops);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-800);
  background: var(--accent-50);
  border: 1px solid var(--accent-200);
  border-radius: var(--radius);
  padding: 0.15rem 0.5rem;
}
.rec__date { font-family: var(--ops); font-size: var(--fs-100); color: var(--ink-2); align-self: center; }
.rec__title { font-family: var(--display); font-size: var(--fs-500); font-weight: 600; letter-spacing: -0.012em; line-height: 1.18; margin: 0 0 var(--sp-2); }
.rec__title a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.rec__title a:hover { color: var(--accent-700); }
/* Record text is the Authority's own OCRed document text, not ours, so it
   arrives however the scanner produced it — including unbroken all-caps title
   runs that no default wrapping rule will break. One of them overflowed a
   375px viewport and failed WCAG 1.4.10 reflow on a single record page out of
   fifty-five. The snippet wraps anywhere rather than the corpus being edited. */
.rec__snippet {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-300);
  color: var(--ink-2);
  max-width: 76ch;
  overflow-wrap: anywhere;
}
.rec__footer { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); }
.rec__file { margin: 0; color: var(--ink-2); opacity: 0.85; word-break: break-word; }
.rec__open {
  margin-left: auto;
  font-family: var(--display);
  font-size: var(--fs-300);
  font-weight: 600;
  white-space: nowrap;
}

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: calc(var(--line) * 1.25); }
.pager__step {
  font-family: var(--display);
  font-size: var(--fs-300);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-800);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.pager__step:hover { border-color: var(--accent-600); background: var(--accent-50); color: var(--accent-800); }
.pager__at { color: var(--ink-2); }

@media (max-width: 52rem) {
  .recfilter__label { min-width: 100%; }
  .recfilter { top: 52px; }
}

/* --- Content blocks -------------------------------------------------------
   The vocabulary the standard pages are built from. A chart is the reference
   throughout: soundings run as leader rules to a mono figure, list markers are
   bearing ticks, and a superseded notice is hatched rather than dimmed, because
   dimming carries state by contrast alone and puts the text under AA. */

.prose { max-width: var(--shell-tight); margin: 0 0 var(--line); }
.prose:last-child { margin-bottom: 0; }

/* A content page is set like a chart's margin annotation: the section's name
   sits in a left rail and its substance runs in the reading measure beside it.
   Below the breakpoint the rail becomes a heading and the two stack. */
@media (min-width: 64rem) {
  .section--doc > .shell {
    display: grid;
    grid-template-columns: minmax(0, 16rem) minmax(0, 50rem);
    gap: var(--sp-6) var(--sp-7);
    align-items: start;
  }
  .section--doc .doc-rail { grid-column: 1; position: sticky; top: calc(var(--sp-7) + var(--sp-5)); }
  .section--doc .doc-body { grid-column: 2; }
  .section--doc .doc-rail .eyebrow::after { display: none; }
  .section--doc .doc-rail h2 { font-size: var(--fs-600); margin-bottom: var(--sp-3); }
  .section--doc .doc-rail .lede { font-size: var(--fs-300); color: var(--ink-2); }
  /* The measure is already the column; blocks fill it. */
  .section--doc .prose,
  .section--doc .facts,
  .section--doc .rates,
  .section--doc .docs,
  .section--doc .faq,
  .section--doc .published-map,
  .section--doc .facts__note { max-width: none; }
  .section--doc .prose { max-width: 64ch; }
}
.section--doc .doc-body > *:first-child { margin-top: 0; }

/* Parking rates. A rate is one complete thought: amount, unit, cap, note.
   The component originally shipped with markup but no styles, which exposed
   browser bullets and let the unit collapse into the dollar figure. */
.rates {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--shell-tight);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--sp-4);
}
.rate {
  min-width: 0;
  padding: var(--sp-5);
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent-500);
  border-radius: var(--radius);
}
.rate__lot {
  margin: 0 0 var(--sp-3);
  font-family: var(--display);
  font-size: var(--fs-400);
  line-height: 1.2;
}
.rate__price {
  margin: 0 0 var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
}
.rate__figure {
  flex: 0 0 auto;
  font-family: var(--display);
  font-size: var(--fs-600);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
}
.rate__per { color: var(--ink-2); font-size: var(--fs-300); }
.rate__cap { margin: 0 0 var(--sp-2); font-weight: 600; }
.rate__note { margin: 0; color: var(--ink-2); font-size: var(--fs-300); }

/* Authority-published maps stay uncropped and can be opened at source size.
   They are information graphics, so they do not inherit the photo window's
   fixed aspect ratio or object-fit treatment. */
.published-map { margin: 0; max-width: var(--shell-tight); }
.published-map__image {
  display: block;
  padding: var(--sp-2);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.published-map__image img { display: block; width: 100%; height: auto; }
.published-map__image:focus-visible { outline-offset: 4px; }
.published-map__caption {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  color: var(--ink-2);
  font-family: var(--ops);
  font-size: var(--fs-100);
}
.published-map__caption a { font-family: var(--display); font-weight: 600; }

/* Soundings. Label, leader, figure — the way a chart prints a depth. */
.facts { margin: var(--line) 0 0; max-width: var(--shell-tight); }
.facts__row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
}
.facts__row:first-child { border-top: 1px solid var(--rule); }
.facts__label { margin: 0; font-weight: 600; flex: 0 1 auto; }
/* The leader: a dotted rule that carries the eye from name to figure. */
.facts__row::after {
  content: "";
  flex: 1 1 auto;
  min-width: var(--sp-5);
  align-self: center;
  border-bottom: 1px dotted var(--rule);
  order: 1;
}
.facts__value {
  margin: 0;
  order: 2;
  /* `0 0 auto` never shrinks, so a long value — "Passenger facility charges,
     airline and rental car leases, parking, landing fees" — pushed the row
     past the viewport and failed WCAG 1.4.10 reflow at 768px on two pages.
     The leader still holds the row together; the value is now allowed to wrap
     inside it. */
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--ops);
  font-size: var(--fs-200);
  color: var(--ink);
  text-align: right;
}
.facts__note {
  margin: var(--sp-4) 0 0;
  max-width: var(--shell-tight);
  font-size: var(--fs-300);
  color: var(--ink-2);
}
/* A leader rule needs room on both sides of it. Under about 34rem the figures
   are longer than the space left over, so the row stacks and the leader goes
   away rather than pushing the value off the screen. */
@media (max-width: 34rem) {
  .facts__row { display: block; }
  .facts__row::after { display: none; }
  .facts__label { margin-bottom: var(--sp-1); }
  .facts__value { text-align: left; }
}

/* A dated chronology. The date runs as a sounding in the left rail with the
   contour rule beside it, so a long response reads as a sequence. */
.timeline { list-style: none; margin: var(--line) 0 0; padding: 0; }
.timeline__item {
  display: grid;
  gap: var(--sp-1) var(--sp-5);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rule);
}
.timeline__item:first-child { border-top: 1px solid var(--rule); }
.timeline__when {
  margin: 0;
  font-family: var(--ops);
  font-size: var(--fs-200);
  color: var(--accent-700);
  font-weight: 500;
}
.timeline__body p { margin: 0; max-width: 66ch; }
@media (min-width: 46rem) {
  .timeline__item { grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr); align-items: baseline; }
}

/* Retained announcements and legacy archive addresses read as records, not as
   current news or decoration. The large marker is the date/count; the ruled
   body carries only source-safe status metadata. */
.archive-plate {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.34fr) minmax(0, 1fr);
  margin: 0 0 calc(var(--line) * 1.25);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--accent-700);
  background: var(--card);
  box-shadow: 0 12px 30px -28px rgb(8 43 61 / 0.7);
}
.archive-plate__marker {
  display: grid;
  place-items: center;
  min-height: 8.5rem;
  padding: var(--sp-4);
  color: var(--paper);
  background: var(--deep);
  font-size: clamp(1.35rem, 4vw, 2.35rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
}
.archive-plate__body { padding: var(--sp-5); align-self: center; }
.archive-plate__kicker {
  margin: 0 0 var(--sp-2);
  color: var(--accent-700);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.archive-plate__title {
  margin: 0;
  max-width: 30ch;
  font-family: var(--display);
  font-size: var(--fs-500);
  font-weight: 700;
  line-height: 1.1;
}
.archive-plate__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}
.archive-plate__tags li {
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.03em;
}
.archive-plate__caption {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--fs-100);
}

/* Install steps are diagrams, not screenshots of the retired TVC app. */
.device-guide { margin: 0 0 calc(var(--line) * 1.25); max-width: 31rem; }
.device-guide__phone {
  position: relative;
  padding: 2.5rem var(--sp-4) 2.75rem;
  border: 3px solid var(--deep);
  border-radius: 1.65rem;
  background: var(--card);
  box-shadow: 0 18px 38px -30px rgb(8 43 61 / 0.75);
}
.device-guide__speaker {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  width: 4.5rem;
  height: 0.32rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--deep);
}
.device-guide__platform {
  margin: 0 0 var(--sp-4);
  color: var(--accent-700);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.device-guide__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: device-step;
}
.device-guide__steps li {
  counter-increment: device-step;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--rule);
}
.device-guide__steps li::before {
  content: counter(device-step);
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--accent-700);
  color: #fff;
  font-family: var(--ops);
  font-weight: 700;
}
.device-guide__steps li span { line-height: 1.35; }
.device-guide__home {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  width: 4.25rem;
  height: 0.28rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--deep);
}
.device-guide__caption {
  margin: var(--sp-3) 0 0;
  color: var(--ink-2);
  font-size: var(--fs-100);
  max-width: 46ch;
}
@media (max-width: 34rem) {
  .archive-plate { grid-template-columns: 1fr; }
  .archive-plate__marker { min-height: 5.25rem; }
  .archive-plate__caption { grid-column: 1; }
}

/* Contacts. */
.contacts {
  list-style: none;
  margin: var(--line) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.contact {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent-500);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.contact__name { margin: 0 0 var(--sp-2); font-family: var(--display); font-size: var(--fs-500); line-height: 1.15; }
.contact__detail { margin: 0 0 var(--sp-3); font-size: var(--fs-300); color: var(--ink-2); }
.contact__address { margin: 0 0 var(--sp-3); font-size: var(--fs-300); }
.contact__reach { margin: 0; display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-300); }
.contact__reach .ops { font-family: var(--ops); font-size: var(--fs-200); }

/* A notice whose date has passed. Hatched on the chart's own diagonal and
   labelled in words, so the state never rests on colour or contrast. */
.notice__title { margin: 0 0 var(--sp-2); font-family: var(--display); font-size: var(--fs-500); line-height: 1.15; }
.notice__body { min-width: 0; }
.notice__body .notice__text + .notice__text { margin-top: var(--sp-3); }
.notice--past {
  background:
    repeating-linear-gradient(var(--bearing), transparent 0 7px, rgba(12, 26, 34, 0.05) 7px 8px),
    var(--paper-2);
  border-left-color: var(--ink-2);
}
.notice--past .notice__label { color: var(--ink-2); }

/* Documents. Bearing ticks for markers. */
.docs { list-style: none; margin: var(--line) 0 0; padding: 0; max-width: var(--shell-tight); }
.doc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.doc::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--sp-3) + 0.55em);
  width: 10px;
  height: 0;
  border-top: 2px solid var(--accent-500);
  transform: rotate(calc(var(--bearing) - 90deg));
}
.doc__link { font-weight: 600; }
.doc__meta { font-family: var(--ops); font-size: var(--fs-100); color: var(--ink-2); margin-left: auto; }

/* Questions and answers. */
.faq { margin: var(--line) 0 0; max-width: var(--shell-tight); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item:first-child { border-top: 1px solid var(--rule); }
.faq__q {
  cursor: pointer;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) 0;
  font-weight: 600;
  list-style: none;
  position: relative;
  min-height: 24px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  position: absolute;
  right: var(--sp-2);
  top: calc(var(--sp-4) + 0.45em);
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--accent-600);
  border-bottom: 2px solid var(--accent-600);
  transform: rotate(45deg);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }
.faq__a { margin: 0 0 var(--sp-4); max-width: 62ch; color: var(--ink-2); }

/* Onward routes. */
.linkset {
  list-style: none;
  margin: var(--line) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.linkset__item {
  border-top: 2px solid var(--accent-500);
  padding-top: var(--sp-3);
}
.linkset__item a { font-family: var(--display); font-size: var(--fs-500); text-decoration: none; line-height: 1.15; }
.linkset__item a:hover { text-decoration: underline; }
.linkset__note { display: block; margin-top: var(--sp-2); font-size: var(--fs-300); color: var(--ink-2); }

/* In the deep-water room the same blocks invert. */
.room-deep .facts__row, .room-deep .doc, .room-deep .faq__item { border-color: var(--accent-800); }
.room-deep .facts__value, .room-deep .facts__label { color: var(--paper); }
.room-deep .facts__note, .room-deep .faq__a, .room-deep .linkset__note { color: var(--accent-200); }

/* --- The meeting record ---------------------------------------------------
   Derived from the Authority's own packets, agendas and minutes, so a meeting
   with nothing filed says so. That open-obligation line is set in dune gold,
   never in --alert: on an airport site red means irregular operations, and a
   board that has not posted its minutes yet is not an emergency. */

.meetings { list-style: none; margin: var(--line) 0 0; padding: 0; }
.meeting {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: var(--sp-2) var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
}
.meeting:first-child { border-top: 1px solid var(--rule); }
.meeting__when { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); }
.meeting__date {
  font-family: var(--ops);
  font-size: var(--fs-200);
  color: var(--ink-2);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.meeting__body { font-family: var(--display); font-size: var(--fs-500); line-height: 1.15; }
.meeting__docs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.meeting__doc a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  text-decoration: none;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-5);
  position: relative;
  min-height: 24px;
}
/* Bearing tick, cut on runway 10. */
.meeting__doc a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 10px;
  border-top: 2px solid var(--accent-500);
  transform: rotate(calc(var(--bearing) - 90deg));
}
.meeting__kind { font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; }
.meeting__file { font-family: var(--ops); font-size: var(--fs-100); color: var(--ink-2); word-break: break-word; }
.meeting__doc a:hover .meeting__kind { text-decoration-thickness: 2px; }
.meeting__doc a:hover .meeting__file { color: var(--ink); }
.meeting__open {
  margin: 0;
  font-family: var(--ops);
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dune-deep);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.meeting__open::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  background: var(--dune);
  transform: rotate(45deg);
}
@media (min-width: 52rem) {
  .meeting { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; }
  .meeting__when { grid-column: 1; flex-direction: column; gap: var(--sp-1); }
  .meeting__docs { grid-column: 2; grid-row: 1; }
  .meeting__open { grid-column: 2; }
}

/* --- Search destination ---------------------------------------------------
   One surface for results and answers. The answer sits in the deep-water room
   so it reads as the Authority speaking, and the results stay on chart paper. */

/* display:grid on a class outranks the user-agent [hidden] rule, so the panel
   has to opt back out explicitly or it shows up empty. */
.answer[hidden] { display: none; }
.answer {
  margin: var(--line) 0 0;
  background: var(--deep);
  color: var(--paper);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6);
  display: grid;
  gap: var(--sp-3);
  border-left: 5px solid var(--dune);
}
.answer__label {
  margin: 0;
  font-family: var(--ops);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dune);
}
.answer__text { margin: 0; font-size: var(--fs-500); line-height: 1.45; max-width: 62ch; }
.answer__sources { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.answer__sources a { color: var(--accent-300); }
.answer__sources a:hover { color: var(--paper); }

.search-count { margin: var(--line) 0 0; color: var(--ink-2); font-size: var(--fs-300); }
.result-group {
  margin: calc(var(--line) * 1.35) 0 var(--sp-3);
  font-family: var(--ops);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--accent-500);
}
.hits { list-style: none; margin: 0; padding: 0; }
.hit { padding: var(--sp-4) 0; border-bottom: 1px solid var(--rule); }
.hit__title { margin: 0 0 var(--sp-1); font-family: var(--display); font-size: var(--fs-500); line-height: 1.15; }
.hit__title a { text-decoration: none; }
.hit__title a:hover { text-decoration: underline; }
.hit__snippet { margin: 0 0 var(--sp-2); color: var(--ink-2); font-size: var(--fs-300); max-width: 74ch; }
.hit__meta { margin: 0; font-family: var(--ops); font-size: var(--fs-100); color: var(--ink-2); }

/* --- The zero sounding ----------------------------------------------------
   This site's one empty state, shared by the 404 and a search that matched
   nothing. A chart prints a depth where it has one and prints nothing where it
   does not, so the reading is a literal 0 in the ops register with the bearing
   hatch running out beside it, and the way forward is the real search plus the
   destinations most arrivals want. The reading is aria-hidden: it is the motif
   speaking, and the sentence beside it already says the same thing in words. */
.sounding-empty {
  margin: var(--line) 0 0;
  padding-top: var(--sp-5);
  border-top: 2px solid var(--rule);
}
@media (min-width: 52rem) {
  .sounding-empty {
    display: grid;
    grid-template-columns: minmax(0, 8rem) minmax(0, 46rem);
    gap: var(--sp-5) var(--sp-7);
    align-items: start;
  }
  /* Three children now flow into a two-column grid: the reading and its unit
     label stack in the narrow column, the body owns the wide one. Left to
     auto-placement, the unit label took the body's cell and pushed the whole
     page — copy, search, recovery links — into the 8rem reading column. */
  .sounding-empty__reading { grid-column: 1; }
  .sounding-empty__unit { grid-column: 1; grid-row: 2; }
  .sounding-empty__body { grid-column: 2; grid-row: 1 / span 2; }
  .sounding-empty--absorb {
  }
}
.sounding-empty__reading {
  margin: 0 0 var(--sp-3);
  font-family: var(--ops);
  /* The zero is the page's one reading; at --fs-800 it read as a stray
     character rather than the motif's empty state. Display scale — but only
     where there is room for it. At 375px a 96px numeral is most of the gap
     between the page head and the first line anyone can read, which is the
     runaway-section-gap contract, so the small screen keeps the text scale. */
  font-size: var(--fs-800);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--accent-700);
}
.sounding-empty__unit {
  margin: 0 0 var(--sp-4);
  font-family: var(--ops);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-600);
}
/* The track a sounding would have run along, graduated and then simply
   stopping. Decorative: the reading it labels is aria-hidden too. */
.sounding-empty__reading::after {
  content: "";
  display: block;
  height: 7px;
  /* Below the grid breakpoint the reading has the whole measure to itself, and
     a track running the full width of it reads as a stray rule rather than as
     the graduated edge of a sounding. Hold it to the width of the figure. */
  width: 6rem;
  margin-top: var(--sp-3);
  background:
    repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 9px) bottom left / 100% 5px no-repeat,
    linear-gradient(var(--rule), var(--rule)) bottom left / 100% 1px no-repeat;
}
@media (min-width: 40rem) { .sounding-empty__reading { font-size: clamp(6rem, 16vw, 10rem); } }
@media (min-width: 52rem) { .sounding-empty__reading::after { width: auto; } }
.sounding-empty__lede {
  margin: 0 0 var(--sp-3);
  font-family: var(--display);
  font-size: var(--fs-600);
  line-height: 1.15;
}
.sounding-empty__note { margin: 0; max-width: 62ch; color: var(--ink-2); }
.sounding-empty__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
  max-width: 40rem;
}
.sounding-empty__input {
  flex: 1 1 16rem;
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink-2);
  border-radius: var(--radius);
}
.sounding-empty__links {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.sounding-empty__item { border-top: 2px solid var(--accent-500); padding-top: var(--sp-3); }
.sounding-empty__link {
  font-family: var(--display);
  font-size: var(--fs-500);
  line-height: 1.15;
  text-decoration: none;
}
/* Hover and keyboard focus take the same treatment, and it is the motif again:
   the leader rule under the destination fills in to sounding blue, the way a
   depth is inked once it has been taken. Colour darkens rather than lightens,
   so the label is never less legible than at rest. */
.sounding-empty__link:hover,
.sounding-empty__link:focus-visible {
  color: var(--accent-800);
  text-decoration: underline;
  text-decoration-color: var(--sounding);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.sounding-empty__item:hover { border-top-color: var(--sounding); }
.sounding-empty__hint {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-300);
  color: var(--ink-2);
}

/* --- Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header, .brand__mark, .fbtn, .btn, .chip, .rail__item, .dial__month {
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.22s ease;
  }
  .board__table tbody tr { transition: background-color 0.15s ease; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation: none; }
  .taskrail__dot { animation: none; }
}
::view-transition-old(masthead), ::view-transition-new(masthead) { animation-duration: 0.18s; }
.site-header { view-transition-name: masthead; }

/* --- Print ---------------------------------------------------------------- */
@media print {
  .proto-banner, .site-header, .site-nav, .site-footer, .omnibox, .flightbar__actions, .board__filters, .dial { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .room-deep, .yearband, .hero, .flaps { background: #fff !important; color: #000 !important; }
  .room-deep h1, .room-deep h2, .room-deep h3, .hero h1 { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
  .board__table { font-size: 9.5pt; }
  .flaps__cell { background: #fff !important; box-shadow: none !important; color: #000 !important; }
}