/* =========================================================================
   NZ1 AVIATION — site styles
   One stylesheet for every page. The look follows the airport information
   board: a status column, a hard rule under each row, and the state of
   things carried by colour rather than by decoration.
   Palette matches Stream Control and the OBS overlays so the site, the
   dashboard and the stream all read as one thing.
   ========================================================================= */

:root {
  /* ---- COLOUR -----------------------------------------------------------
     Red and blue only, the same two the OBS overlays use. #0062ff and
     #f3010d are MessageV2's --accent-blue and --accent-red, so the strip
     along the top of this site is the strip along the top of the message
     box on stream. --sky is the lighter blue Stream Control uses for its
     wind arrow: #0062ff is too dark to read as text on a dark panel, so
     anything written in blue uses --sky and anything filled uses --blue. */
  --void:    #080c11;   /* page */
  --board:   #101923;   /* panels */
  --rail:    #18222d;   /* inner strips */
  --rail-hi: #1e2b39;
  --rule:    rgba(255,255,255,.09);
  --rule-hi: rgba(255,255,255,.16);

  --ink:     #e9eff5;
  --muted:   #8696a6;
  --dim:     #7f8f9e;

  --blue:    #0062ff;   /* brand blue, as filled areas use it */
  --red:     #f3010d;   /* brand red */
  --sky:     #5ecbff;   /* brand blue as text: links, codes, focus */

  --live:    #ff3a44;   /* on air */
  --sched:   var(--sky);/* scheduled */
  --off:     #6b7b8b;   /* off air */

  /* ---- TYPE -------------------------------------------------------------
     Arial throughout, matching the overlays and the dashboard. Arial's
     digits are already fixed width, so readings and clocks line up in a
     column without a separate monospace face. */
  --disp: Arial, Helvetica, sans-serif;
  --body: Arial, Helvetica, sans-serif;
  --mono: Arial, Helvetica, sans-serif;

  /* ---- LAYOUT ----------------------------------------------------------- */
  /* HOW WIDE THE PAGE IS -------------------------------------------------
     --wide   the masthead, the footer, the board, the map and the stream
              list. The full width of the site.
     --read   the pages that are mostly words: About, Contact, Privacy,
              Terms, and the blurb on the home page. Set to var(--wide) so
              every page lines up with every other one — the heading on
              About starts exactly where the heading on Airports does.
              Give it a smaller value, say 52rem, and those pages become a
              narrower centred column instead. That reads well on its own
              but no longer matches the pages that need the full width for
              the map and the stream list.
     Everything still shrinks to fit a phone or an iPad on its own, because
     .wrap is width:100% with a max-width and its own side padding.

     To bring the whole site in, lower --wide. */
  --wide:  76rem;
  --read:  var(--wide); /* text pages share the full column, so every page's
                           content starts level with the wordmark above it */
  --text:  100%;        /* no extra cap inside the column */
  --gutter: clamp(1rem, 4vw, 2rem);
  --bar:   6px;         /* the brand strip, same height as the overlays' */
}

/* ---- RESET ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--void);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--sky); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding-inline: var(--gutter); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--sky); color: #000; padding: .6rem 1rem; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---- MASTHEAD -------------------------------------------------------------- */

.gradient-bar {
  height: var(--bar);
  /* the same gradient MessageV2 draws along its top edge */
  background: linear-gradient(90deg, var(--blue) 5%, var(--red) 95%);
}

.masthead { border-bottom: 1px solid var(--rule); background: var(--board); }
.masthead .wrap {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 72px; padding-block: .75rem;
}
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; margin-right: auto; }
.brand img { height: 38px; width: auto; }
.brand span {
  font: 700 1.5rem/1 var(--disp);
  letter-spacing: .04em;
}
.brand:hover span { color: var(--sky); }

.nav { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.nav a {
  color: var(--muted); text-decoration: none;
  font: 700 .875rem/1 var(--disp); letter-spacing: .07em; text-transform: uppercase;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--rule-hi); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--red); }

/* Tablet: six navigation items plus the wordmark are a squeeze at iPad
   width, so both come in a little rather than wrapping to a second line. */
@media (min-width: 40.0625rem) and (max-width: 64rem) {
  .brand img { height: 32px; }
  .nav { gap: 1rem; }
  .nav a { font-size: .8125rem; letter-spacing: .05em; }
}
/* iPad portrait is the tightest case that still has to fit on one line. */
@media (min-width: 40.0625rem) and (max-width: 50rem) {
  .brand img { height: 28px; }
  .nav { gap: .8rem; }
  .nav a { font-size: .75rem; letter-spacing: .04em; }
}

/* Phone: the wordmark takes its own line and the navigation sits under it. */
@media (max-width: 40rem) {
  .masthead .wrap { flex-wrap: wrap; min-height: 0; }
  .brand { width: 100%; }
  .nav { width: 100%; gap: 1.1rem; padding-bottom: .4rem; }
}

/* ---- THE BOARD ------------------------------------------------------------- */
/* The live panel. Built as an information-board row: a status rail across the
   top, the "flight" beneath it, conditions along the bottom. */

.board {
  margin-block: clamp(1.5rem, 5vw, 2.5rem);
  background: var(--board);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--state, var(--off));
}

.board__rail {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: .7rem 1.1rem;
  background: var(--rail);
  border-bottom: 1px solid var(--rule);
}
.status {
  display: inline-flex; align-items: center; gap: .55rem;
  /* 19px bold is 14.25pt, WCAG's large-text threshold, so the muted OFF AIR
     grey clears contrast at 3:1 without having to be lightened. */
  font: 700 1.1875rem/1 var(--disp); letter-spacing: .09em; text-transform: uppercase;
  color: var(--state, var(--off));
}
.status__dot {
  width: .6rem; height: .6rem; border-radius: 50%;
  background: currentColor; flex: none;
}
.is-live .status__dot { animation: beacon 2s ease-in-out infinite; }
@keyframes beacon {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(255,58,68,.55); }
  50%      { opacity: .55; box-shadow: 0 0 0 .5rem rgba(255,58,68,0); }
}
@media (prefers-reduced-motion: reduce) {
  .is-live .status__dot { animation: none; }
}

/* Place and runway sit right, the way a board carries gate and stand. */
.rail__place {
  margin-left: auto;
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  font: 700 .9375rem/1.3 var(--disp); letter-spacing: .06em;
  color: var(--muted);
}
.rail__place b { color: var(--ink); font-weight: 700; }
.rail__place .rwy { color: var(--sky); }

.board__body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 1.75rem);
  padding: clamp(1rem, 3vw, 1.5rem);
  align-items: start;
}
@media (max-width: 48rem) { .board__body { grid-template-columns: 1fr; } }

/* ---- THUMBNAIL ------------------------------------------------------------- */

.shot {
  position: relative; display: block;
  aspect-ratio: 16 / 9;
  background: var(--rail);
  border: 1px solid var(--rule);
  overflow: hidden;
  text-decoration: none;
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--link:hover img { opacity: .82; }
.shot--link:hover .play { transform: scale(1.06); background: var(--red); }

.play {
  position: absolute; inset: auto auto 50% 50%;
  translate: -50% 50%;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(8,12,17,.62);
  border: 2px solid rgba(255,255,255,.85);
  backdrop-filter: blur(2px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.play svg { width: 1.45rem; height: 1.45rem; fill: #fff; margin-left: .15rem; }
.shot--link:hover .play { border-color: #fff; }
.streams .play { width: 2.75rem; height: 2.75rem; border-width: 2px; }
.streams .play svg { width: 1.1rem; height: 1.1rem; }
@media (prefers-reduced-motion: reduce) { .play { transition: none; } }

/* The off-air panel: no photo needed, the runway tells the story. Drop an
   img/offline.jpg into place and it is used instead. */
.shot--offline {
  display: grid; place-items: center;
  background:
    /* the runway centreline, sitting low in the frame the way it would in
       a real shot, with the mark above it */
    repeating-linear-gradient(90deg,
      transparent 0 4%, rgba(233,239,245,.17) 4% 8.5%, transparent 8.5% 12.5%)
      left top 78% / 100% 5px no-repeat,
    linear-gradient(176deg, #1a2634 0%, #0d141d 62%, #090d13 100%);
}
.shot--offline img {
  /* NZ1LogoW.svg — the white-text version. It is held back a little so it
     reads as a mark on an empty frame rather than a banner, but not so far
     that the white turns grey. */
  width: clamp(72px, 17%, 104px); height: auto; object-fit: contain;
  opacity: .78; translate: 0 -16%;
}

/* ---- THE FLIGHT DETAIL ----------------------------------------------------- */

.detail { min-width: 0; }
.detail h1, .detail h2 {
  margin: 0 0 .6rem;
  font: 700 clamp(1.35rem, 3vw, 1.75rem)/1.2 var(--disp);
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.detail p { margin: 0 0 1rem; color: var(--muted); }

.meta {
  display: flex; flex-wrap: wrap; gap: .45rem 1.1rem;
  margin: 0 0 1.25rem; padding: 0; list-style: none;
  font: 500 .9375rem/1.3 var(--body); color: var(--muted);
}
.meta b { color: var(--ink); font-weight: 600; }

/* 19px bold is 14.25pt, which clears WCAG's large-text threshold — so white
   on the brand red passes at 3:1 and #f3010d can stay exactly as the overlays
   use it. Drop this below 19px and the red would have to be darkened. */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .72rem 1.3rem;
  background: var(--red); color: #fff; text-decoration: none;
  font: 700 1.1875rem/1.1 var(--disp); letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid transparent;
}
.btn:hover { background: #d10009; }
.btn svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--rule-hi); }
.btn--quiet:hover { background: var(--rail-hi); border-color: var(--sky); }

/* A quieter size for a secondary action — the Subscribe button on the
   off-air panel, where a full-size block of red dominates a panel that has
   nothing else going on. At 15px the text is below WCAG's large-text
   threshold, so it needs 4.5:1 rather than 3:1 and the fill drops a shade to
   #ea000d. That is a hair darker than the brand #f3010d and reads the same;
   the full-size button when live keeps the brand red exactly. */
.btn--sm {
  padding: .5rem .95rem;
  background: #ea000d;
  font-size: .9375rem; letter-spacing: .05em;
}
.btn--sm:hover { background: #c80009; }

/* ---- CONDITIONS ------------------------------------------------------------ */
/* Instrument data, so it is set as instrument data: aligned, monospaced
   figures with their units quiet beside them. */

.wx { border-top: 1px solid var(--rule); background: var(--rail); }
.wx__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.1rem;
  padding: .75rem 1.1rem;
}
.wx__list {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.6rem;
}
/* The weather symbol, drawn by site_wx.php on OverlayV8's 24x24 grid. Each
   part is coloured here rather than in the path data, so it follows the page
   the way the overlay's follows the stream's day and night themes. The only
   departure from the overlay is the sun: #ffc83d there, white here. */
.wx-icon { width: 2rem; height: 2rem; flex: none; overflow: visible; }
.wx-icon .wx-sun   { fill: var(--ink); stroke: var(--ink); }
.wx-icon .wx-moon  { fill: var(--ink); }
.wx-icon .wx-cloud { fill: var(--ink); stroke: var(--rail); }  /* the strip's own
                      colour, so a cloud in front of the sun reads as separate */
.wx-icon .wx-rain  { stroke: var(--sky); }   /* the overlay's rain is #5ecbff too */
.wx-icon .wx-snow  { fill: var(--ink); }
.wx-icon .wx-fog   { stroke: var(--ink); }
/* The overlay draws the bolt in its sun colour. That one is yellow there and
   white here, and a white bolt would disappear into a white cloud, so this is
   the one part that takes the blue instead. */
.wx-icon .wx-bolt  { fill: var(--sky); }
.wx__cell { display: flex; flex-direction: column; gap: .1rem; }
.wx__cell dt {
  font: 600 .6875rem/1 var(--disp); letter-spacing: .09em; text-transform: uppercase;
  color: var(--dim);
}
.wx__cell dd {
  margin: 0; font: 600 1.0625rem/1.1 var(--mono); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.wx__metar {
  margin: 0; padding: .55rem 1.1rem .8rem;
  font: 400 .8125rem/1.5 var(--mono); color: var(--dim);
  overflow-wrap: anywhere;
}

/* ---- SECTIONS -------------------------------------------------------------- */

main { flex: 1; }

.section { padding-block: clamp(1.75rem, 4.5vw, 2.75rem); }
.section + .section { border-top: 1px solid var(--rule); }
.section h2 {
  margin: 0 0 1.5rem;
  font: 700 clamp(1.35rem, 2.8vw, 1.65rem)/1.2 var(--disp);
  letter-spacing: -.01em;
}
.section p { margin: 0 0 1.1rem; max-width: var(--text); }
.lede { font-size: 1.1875rem; color: var(--ink); }
.section p:not(.lede) { color: var(--muted); }

/* ---- RECENT STREAMS -------------------------------------------------------- */
/* Listings, not cards: a thumbnail, a rule, then the line of detail. */

.streams {
  display: grid; gap: clamp(1.25rem, 3vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.stream a { text-decoration: none; color: inherit; display: block; }
.stream a:hover h3 { color: var(--sky); }
.stream a:hover .shot img { opacity: .82; }
.stream h3 {
  margin: .85rem 0 .4rem;
  padding-top: .85rem;
  border-top: 1px solid var(--rule);
  font: 600 1.0625rem/1.35 var(--body);
  overflow-wrap: anywhere;
}
.stream .line {
  margin: 0; font: 500 .875rem/1.4 var(--body); color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* ---- PROSE PAGES ----------------------------------------------------------- */

.page { padding-block: clamp(2rem, 6vw, 3.5rem); }

/* Pages that are mostly words, and the blurb on the home page: a narrower
   column, centred. Headings and paragraphs share it, so they stay aligned
   with each other rather than one hugging a wider edge. */
.page--read > .wrap,
.section--read > .wrap { max-width: var(--read); }
.page h1 {
  margin: 0 0 .5rem;
  font: 700 clamp(1.9rem, 5vw, 2.6rem)/1.08 var(--disp);
  letter-spacing: -.015em;
}
.page .standfirst {
  margin: 0 0 2.25rem; max-width: var(--text);
  font-size: 1.1875rem; color: var(--muted);
}
.prose { max-width: var(--text); }
.prose h2 {
  margin: 2.5rem 0 .75rem;
  padding-top: 1.1rem; border-top: 1px solid var(--rule);
  font: 700 1.25rem/1.25 var(--disp); letter-spacing: -.005em;
}
.prose h3 {
  margin: 1.75rem 0 .5rem;
  font: 600 1.0625rem/1.3 var(--body); color: var(--ink);
}
.prose p, .prose li { color: var(--muted); }
.prose p { margin: 0 0 1.1rem; }
.prose ul { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.prose li { margin-bottom: .45rem; }
.prose li::marker { color: var(--dim); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose dt { color: var(--ink); font-weight: 600; margin-top: 1rem; }
.prose dd { margin: .2rem 0 0; color: var(--muted); }

/* A pulled-aside note — used for the dated revision line and short asides. */
.note {
  margin: 0 0 2rem; padding: .85rem 1.1rem; max-width: var(--text);
  background: var(--board); border-left: 3px solid var(--sky);
  font-size: .9375rem; color: var(--muted);
}
.note p { margin: 0; }
.note p + p { margin-top: .6rem; }

/* Contact rows: label left, value right, ruled like a board. */
.rows { margin: 0 0 2rem; border-top: 1px solid var(--rule); }
.rows > div {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem;
  padding: .95rem 0; border-bottom: 1px solid var(--rule);
}
.rows dt {
  flex: 0 0 10.5rem;
  display: flex; align-items: center; gap: .55rem;
  font: 600 .8125rem/1.5 var(--disp); letter-spacing: .09em; text-transform: uppercase;
  color: var(--dim);
}
/* The glyph takes the page's blue while the label stays muted, so the icon
   reads as the marker and the word stays quiet beside it. */
.rows__icon { flex: none; width: 18px; height: 18px; color: var(--sky); }
.rows dd { margin: 0; flex: 1 1 14rem; color: var(--ink); overflow-wrap: anywhere; }
/* What follows the dash describes the link rather than competing with it. */
.rows__note { color: var(--muted); }
/* Marks a link that opens in a new tab. The words are in the markup too, in
   the screen-reader-only span, so it is not left to the picture alone. */
.rows__ext {
  width: .7em; height: .7em; margin-left: .32em;
  vertical-align: baseline; opacity: .8;
}

@media (max-width: 30rem) {
  .rows > div { align-items: flex-start; }
  .rows dt { flex-basis: 100%; }
}

/* ---- FOOTER ---------------------------------------------------------------- */

.foot { border-top: 1px solid var(--rule); background: var(--board); }
.foot .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem;
  padding-block: 1.35rem;
  font-size: .9375rem;
}
.foot nav { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot small { margin-left: auto; color: var(--dim); font-size: inherit; }
@media (max-width: 36rem) { .foot small { margin-left: 0; width: 100%; } }

/* ---- UTILITIES ------------------------------------------------------------- */

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* ---- THE MAP --------------------------------------------------------------- */
/* A flat world drawn once into img/world.svg, with the fields pinned on top as
   real links — so they are focusable and readable, which SVG circles are not. */

.map { margin: 0 0 2.5rem; }
.map__frame {
  position: relative;
  overflow: hidden;              /* the crop */
  border: 1px solid var(--rule);
  background: #0b1119;
}
/* The whole world, sized and offset so the part with pins on it fills the
   frame. airports.php works the numbers out; the pins ride along inside. */
.map__layer { position: absolute; }
.map__base { width: 100%; height: 100%; }
.map__pins { position: absolute; inset: 0; }
.map figcaption {
  margin-top: .7rem; font-size: .9375rem; color: var(--dim);
  /* Centred, so it reads as a caption to the map rather than the first line
     of the centred column underneath it. */
  text-align: center;
}

.pin {
  position: absolute; translate: -50% -50%;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
}
.pin__dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--sky); box-shadow: 0 0 0 2px rgba(8,12,17,.85);
  transition: scale .15s ease;
}
.pin--live .pin__dot { background: var(--live); }
.pin--live { z-index: 3; }
.pin--live .pin__dot { animation: beacon 2s ease-in-out infinite; }

.pin__tag {
  position: absolute; bottom: 100%; left: 50%; translate: -50% -2px;
  padding: .18em .5em;
  background: var(--ink); color: #0b1119;
  font: 700 .75rem/1.35 var(--disp); letter-spacing: .06em; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
.pin--live .pin__tag { background: var(--live); color: #fff; }
/* Markers are plain spans, not links — there is nowhere for them to go, and
   the list below is the version that works without a mouse. */
.pin:hover { z-index: 4; }
.pin:hover .pin__dot { scale: 1.6; }
.pin:hover .pin__tag { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pin__dot, .pin__tag { transition: none; }
  .pin--live .pin__dot { animation: none; }
}
@media (max-width: 36rem) {
  /* Too small to aim at with a thumb — the list below does the job there. */
  .map { display: none; }
}

/* ---- AIRPORT LIST ---------------------------------------------------------- */

/* Everything below the map on the airports page: the country lists, the
   notes, and the closing paragraph. The map fills the page width because a
   map benefits from it; a column of three-letter codes and airport names
   does not, and stretched to match it the text sat hard against the left
   edge with the rest of the width empty. One narrower column, centred under
   the map, keeps the whole block together.
   Widen or narrow the page itself with --wide at the top of this file; this
   is the one block that deliberately does not follow it. */
.under-map {
  max-width: 46rem;
  margin-inline: auto;
}

.country { margin-bottom: 2.25rem; }
.country h2 {
  display: flex; align-items: center; gap: .65rem;
  margin: 0 0 .25rem;
  font: 700 1.2rem/1.25 var(--disp); letter-spacing: -.005em;
}
.flag { width: 24px; height: 16px; flex: none; border: 1px solid var(--rule-hi); }

.fields { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.fields li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem;
  padding: .62rem 0; border-bottom: 1px solid var(--rule);
}
.fields__pair {
  flex: 1 1 22rem; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem;
}
.fields__code {
  flex: 0 0 9.5rem;
  font: 600 .9375rem/1.5 var(--mono); color: var(--sky);
  font-variant-numeric: tabular-nums;
}
.fields__name { color: var(--ink); }
.fields__live {
  margin-left: auto;
  font: 700 .75rem/1.5 var(--disp); letter-spacing: .09em; text-transform: uppercase;
  color: var(--live);
}
.fields .is-live .fields__name { color: var(--ink); font-weight: 600; }
@media (max-width: 30rem) {
  .fields__code { flex-basis: 100%; }
}

/* ---- "see everything" link ------------------------------------------------- */

.more { margin: 1.75rem 0 0; }
.more a {
  font: 700 .875rem/1 var(--disp); letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; border-bottom: 2px solid var(--rule-hi); padding-bottom: .3rem;
}
.more a:hover { border-bottom-color: var(--sky); }

/* ---- ARCHIVE --------------------------------------------------------------- */
/* A long list rather than a grid of cards: the date and the airport are what
   people scan for, and rows keep them in a column. */

.archive { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.archive li {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--rule);
}
.archive li > a {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 1rem;
  text-decoration: none; color: inherit;
}
.archive .shot { flex: 0 0 11rem; aspect-ratio: 16 / 9; }
.archive .play { width: 2.25rem; height: 2.25rem; border-width: 2px; }
.archive .play svg { width: .9rem; height: .9rem; }
.archive__text { min-width: 0; }
.archive__title {
  display: block; color: var(--ink);
  font: 600 1.0625rem/1.35 var(--body); overflow-wrap: anywhere;
}
.archive li > a:hover .archive__title { color: var(--sky); }
.archive li > a:hover .shot img { opacity: .82; }
.archive .line { display: block; margin-top: .25rem; }

@media (max-width: 34rem) {
  .archive li > a { gap: .85rem; }
  .archive .shot { flex-basis: 7.5rem; }
  .archive .play { display: none; }
}

/* ---- MODERATOR TILES -------------------------------------------------------
   Seven equal items, so a grid rather than a bulleted column. Flex with
   justify-content:center means a short last row centres itself — four then
   three on a wide screen, and still centred at every other width without
   any of those counts being written down. */

.mods {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .75rem;
  list-style: none; margin: 0 0 1.5rem; padding: 0;
}
.mods li { flex: 0 1 15.5rem; min-width: 0; }
.mods a {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  height: 100%;
  padding: .85rem .9rem;
  background: var(--board);
  border: 1px solid var(--rule);
  text-decoration: none;
  text-align: center;
}
.mods a:hover { background: var(--rail); border-color: var(--sky); }
.mods__name {
  font: 600 1.0625rem/1.3 var(--body); color: var(--ink);
}
.mods a:hover .mods__name { color: var(--sky); }
.mods__at {
  font: 400 .8125rem/1.35 var(--body); color: var(--muted);
  overflow-wrap: anywhere;
}

@media (max-width: 30rem) {
  .mods li { flex-basis: 100%; }
}