/* Deliberately minimal. Structure and legibility only. the real design pass
   comes after the MBWW theme lands. Tokens below are MBWW's, pulled from its
   live CSS custom properties, so the eventual re-skin is this file alone. */

:root {
  --menu-bg: #03648f;
  --menu-bg-dark: #024e70;
  --primary: #b83229;
  --primary-dark: #8e261f;
  --secondary: #049f83;
  --ink: #1a1a1a;
  --ink-soft: #555;
  --rule: #ddd;
  --bg: #fff;
  --bg-soft: #f4f6f7;
  --font-headline: "Playfair Display", Georgia, serif;
  --font-body: "Montserrat", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
}

h1, h2, h3 { font-family: var(--font-headline); line-height: 1.2; }

a { color: var(--menu-bg); }

/* --- header --------------------------------------------------------------- */
/* Chrome matched to montereybaywhalewatch.com: the same teal bar, the same
   Playfair/Montserrat pairing, the same red outlined call to action. Matched
   on TOKENS, not on their markup. the-anchor is FareHarbor's licensed theme
   and is itself scheduled for replacement, so a re-skin has to stay a
   three-file change. */

.skip {
  position: absolute;
  left: -9999px;
  background: #fff;
  color: var(--menu-bg);
  padding: 10px 16px;
  z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

.site-header {
  background: var(--menu-bg);
  color: #fff;
  position: relative;
  z-index: 10;
}

.header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand img { display: block; width: 68px; height: 68px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}
.brand-sub {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}

.mainnav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
}
.mainnav a {
  color: #fff;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 3px;
  white-space: nowrap;
}
.mainnav a:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.mainnav a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 -2px 0 var(--primary);
}

/* Solid red booking button in the header, matching MBWW's BOOK NOW. */
.cta-outline {
  flex: 0 0 auto;
  display: inline-block;
  padding: 12px 22px;
  border: 2px solid var(--primary);
  border-radius: 3px;
  background: var(--primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.cta-outline:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}

@media (max-width: 900px) {
  .header-inner { flex-wrap: wrap; gap: 10px 14px; }
  /* On narrow screens the nav drops to its own line. Given the same teal as
     the bar above it, the two read as one block, so the nav row takes a
     darker shade and bleeds to the header edges to separate them. */
  .mainnav {
    order: 3;
    /* Full-bleed: 100% of the row plus the header's 20px side padding on
       each side, so the darker band reaches both edges. */
    /* flex-basis wins over width on a flex item, so size it here. */
    flex: 0 0 calc(100% + 40px);
    margin: 0 -20px -10px;
    padding: 6px 12px;
    background: var(--menu-bg-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    justify-content: flex-start;
  }
  .mainnav a { padding: 8px 10px; font-size: 0.86rem; }
  .mainnav a:hover { background: rgba(255, 255, 255, 0.12); }
  .cta-outline { margin-left: auto; }
}

/* Phone widths: the brand block and the booking button together overflowed
   400px, cutting the button off at the right edge. Shrink both, and match the
   nav's full-bleed offset to the reduced header padding. */
@media (max-width: 560px) {
  .header-inner { padding: 10px 14px; }
  .brand { gap: 9px; }
  .brand img { width: 54px; height: 54px; }
  .brand-name { font-size: 0.98rem; }
  .brand-sub { font-size: 0.56rem; letter-spacing: 0.1em; }
  .cta-outline { padding: 9px 12px; font-size: 0.7rem; letter-spacing: 0.06em; }
  .mainnav {
    flex: 0 0 calc(100% + 28px);
    margin: 0 -14px -10px;
    padding: 4px 8px;
  }
  .mainnav a { padding: 7px 8px; font-size: 0.82rem; }
}

/* --- hero ----------------------------------------------------------------- */

.hero { position: relative; isolation: isolate; background: var(--primary); }

.hero-media,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus, center 45%);
  z-index: -2;
}

/* Keeps the Playfair title legible over a busy photograph without washing
   the image out. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3, 32, 46, 0.78) 0%, rgba(3, 32, 46, 0.45) 45%, rgba(3, 32, 46, 0.1) 75%),
    linear-gradient(180deg, rgba(3, 32, 46, 0.35) 0%, rgba(3, 32, 46, 0) 40%);
}

.hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(48px, 9vw, 120px) 20px clamp(40px, 7vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  min-height: 460px;
}
.hero-short .hero-inner { min-height: 360px; padding-block: clamp(40px, 6vw, 76px); }

.hero-copy { max-width: 44ch; }

.hero-kicker {
  color: #fff;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 12px;
  opacity: 0.9;
}

.hero-title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 4.1rem);
  line-height: 1.03;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
  text-wrap: balance;
}

.hero-lede {
  color: #fff;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.55;
  margin: 18px 0 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.btn-solid {
  display: inline-block;
  padding: 14px 26px;
  background: var(--primary);
  color: #fff;
  border-radius: 3px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
}
.btn-solid:hover { background: var(--primary-dark); color: #fff; }

.btn-ghost {
  display: inline-block;
  padding: 14px 26px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 3px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* --- booking card --------------------------------------------------------- */

.bookcard {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.bookcard-head { padding: 18px 18px 0; }
.bookcard-body { padding: 0 18px 18px; }
.bookcard h2 {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  margin: 0 0 4px;
}
.bookcard-sub {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
/* The embed brings its own chrome; keep it from colliding with the card. */
.bookcard-body .fareharbor-calendar-wrap { margin-top: 10px; }
.bookcard .btn-solid { display: block; text-align: center; }
.bookcard .fh-note {
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin: 12px 0 0;
  line-height: 1.45;
}

@media (min-width: 1000px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) 350px; }
}

/* --- layout --------------------------------------------------------------- */

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px) 20px 56px;
}
/* Pages built from full-bleed bands manage their own containers, so main must
   not impose a column on them. */
main.main-full { max-width: none; padding: 0; }
/* Same outer measure as the hero so left edges line up, but prose is held to
   a comfortable reading width rather than the full 1180. */
main > p,
main > ul,
main > ol,
main > h2,
main > h3,
main > .note,
main > .intro { max-width: 72ch; }

/* ...but a grid is not prose. Without this the roster, which happens to be a
   direct child of main, gets held to the reading measure while the species
   grid. nested in a <section>. spans the full width. */
main > .grid { max-width: none; }

/* Figures share the prose measure and align to its left edge, so a centred
   photograph is centred on the text column rather than on the full page. */
main > figure { max-width: 72ch; margin-left: 0; margin-right: auto; }

/* Text inside figures and quotes follows the same measure as body prose. */
figcaption, blockquote p { max-width: 72ch; }

.intro { color: var(--ink-soft); max-width: 65ch; }

.lede-secondary {
  font-size: 1.05rem;
  color: var(--ink);
  max-width: 68ch;
  margin-top: 0;
}



.dead { color: var(--ink-soft); text-decoration: line-through; }

/* --- grids ---------------------------------------------------------------- */

.grid {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.grid li { margin: 0; }

.grid a { text-decoration: none; color: inherit; display: block; }

/* Fixed display box so a 290px legacy file and a recovered hi-res original
   read identically in the grid. Never upscales past the source. */
.thumb {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.thumb.empty { color: var(--ink-soft); font-size: 0.75rem; }

/* --- roster: trip leader portraits ---------------------------------------- */
/* Same framed treatment as the species grid: a soft-grey box with a hairline
   border, the photograph contained inside rather than cropped. Because the
   image is contained and never scaled up, portraits of different shapes and
   sizes sit in identical frames without anything being cut or stretched.
   Three per row at full width, with a wider gutter than the species grid
   since these frames are much larger. */

.roster {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 34px 32px;
}
.roster li { text-align: center; }
.roster .name { font-size: 1.02rem; margin-top: 12px; }

/* On phones the roster drops to one column, so a 4:3 frame stretched to the
   full width became very tall with the portrait adrift in the middle. Cap it
   at 360x270: still large enough to hold the tallest portrait (145x258) and
   the widest (230x153) at native size, so nothing is scaled down. */
@media (max-width: 700px) {
  .roster .thumb {
    aspect-ratio: auto;
    height: 270px;
    max-width: 360px;
    margin-inline: auto;
  }
}

/* the group photograph, centred under its own heading */
.team { text-align: center; margin-top: 8px; }
.team h2 { text-align: center; }
.team figure { margin-inline: auto; display: inline-block; }
.team figure img { margin-inline: auto; }
.team figcaption { max-width: 68ch; margin-inline: auto; text-align: center; }

.grid .name { display: block; margin-top: 6px; font-weight: 500; }
.grid .meta { display: block; color: var(--ink-soft); font-size: 0.75rem; }

/* --- trip report archive -------------------------------------------------- */

/* Year tabs. Filled in the site's teal so the row reads as one control
   rather than a scatter of small boxes; the report count sits in a lighter
   chip inside each tab, and hover picks up the booking red. */
/* A grid, not a flex row. Each tab is sized by its own content (2023 with a
   count of 1 is far narrower than 2009 with 13), so a wrapping flex row leaves
   the second line out of step with the first. Equal grid tracks make the two
   rows line up by construction. */
.yearbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
  margin: 4px 0 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}
.yeartab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--menu-bg);
  color: #fff;
  border-radius: 4px;
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  line-height: 1;
  transition: background-color 0.15s ease;
}
.yeartab:hover,
.yeartab:focus-visible { background: var(--primary); color: #fff; }
.yeartab-count {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}
/* The two late outliers, 2020 and 2023, sit apart from the 2002-2013 run. */
.yeartab[href="#y2020"],
.yeartab[href="#y2023"] { background: var(--secondary); }
.yeartab[href="#y2020"]:hover,
.yeartab[href="#y2023"]:hover { background: var(--primary); }

@media (prefers-reduced-motion: reduce) { .yeartab { transition: none; } }

/* Two columns at desktop width. A single full-width row left a large empty
   band between the date and its thumbnails; halving the row closes that gap
   and roughly halves the length of a 110-entry archive. Card layouts were
   ruled out because a 3-up card grid would upscale 72% of these photographs,
   most of which are under 300px wide. */
.reportlist {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 14px 20px;
}
/* Each entry is its own panel rather than a rule-separated row. A year with a
   single report then reads as one card in a two-column grid, instead of a
   lone line of text with an empty band beside it. */
.reportlist li {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--menu-bg);
  border-radius: 3px;
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  justify-content: space-between;
  /* Tall enough for a 56px thumbnail plus padding, so entries with and
     without photographs are the same height throughout the archive. */
  min-height: 82px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Two-column layout only: blue accent on the left column, the tab green on
   the right, so the eye can tell the columns apart down a long page. */
@media (min-width: 900px) {
  .reportlist:not(.reportlist-single) li:nth-child(even) {
    border-left-color: var(--secondary);
  }
}
.reportlist-single { grid-template-columns: 1fr; }

.reportlist li:hover {
  background: #fff;
  border-left-color: var(--primary);
}
@media (prefers-reduced-motion: reduce) { .reportlist li { transition: none; } }
/* Text left, thumbnails right, so the dates stay in one scannable column
   even though 18 of the 110 reports have no photographs at all. */
.rl-text { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; min-width: 0; flex: 1 1 auto; }
.reportlist a { font-weight: 500; }
.reportlist .meta { display: inline; }

.rl-thumbs {
  display: flex;
  gap: 5px;
  flex: 0 0 auto;
  align-items: center;
  text-decoration: none;
}
.rl-thumbs img {
  /* 56px rather than 64: in the two-column layout three thumbnails plus the
     date and meta have to fit one line. Still well under the smallest source
     (87x69), so nothing is upscaled. */
  width: 56px;
  height: 56px;
  object-fit: cover;
  /* Several legacy images have a caption strip and the old site's cyan page
     background baked into the bottom of the JPEG. Biasing the square crop
     upward keeps the bird and drops the strip. */
  object-position: center 38%;
  border: 1px solid var(--rule);
  border-radius: 2px;
  display: block;
  background: #fff;
}
@media (max-width: 560px) {
  .rl-thumbs img { width: 52px; height: 52px; }
}

.tablewrap { overflow-x: auto; margin-bottom: 24px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Reports run long. keep prose to a comfortable measure. */
.report-body p { max-width: 68ch; }

.video {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
}

/* --- detail --------------------------------------------------------------- */

/* Archive photographs vary from 150px to 615px wide, so left-aligning them
   leaves a ragged column. Centred, a run of mixed sizes reads as a deliberate
   sequence. */
figure { margin: 0 auto 26px; text-align: center; }
/* Intrinsic size honoured: a small legacy image stays small rather than being
   stretched, a recovered original uses its full width up to the column. */
figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  display: block;
  margin-inline: auto;
}
figcaption {
  color: var(--ink-soft);
  font-size: 0.8rem;
  margin: 6px auto 0;
  text-align: center;
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--bg-soft);
  color: var(--ink-soft);
}
.tag-rare { background: var(--primary); color: #fff; }
.tag-breakwater { background: var(--secondary); color: #fff; }

.portrait { float: left; margin: 0 20px 12px 0; border: 1px solid var(--rule); }

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; font-size: 0.9rem; }
dl.facts dt { color: var(--ink-soft); }
dl.facts dd { margin: 0; }

.pager { display: flex; gap: 12px; justify-content: space-between; margin-top: 32px; border-top: 1px solid var(--rule); padding-top: 16px; }

.note {
  background: var(--bg-soft);
  border-left: 3px solid var(--secondary);
  padding: 12px 16px;
  font-size: 0.9rem;
}

table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--rule); }

@media (max-width: 520px) {
  .wordmark { font-size: 1.05rem; }
  .btn { padding: 7px 11px; font-size: 0.82rem; }
  .portrait { float: none; margin: 0 0 12px; }
}


/* --- page bands ----------------------------------------------------------- */
/* Long-form pages read as a stack of bands with a consistent vertical rhythm,
   alternating grounds so each section is visually separable. */

.band { padding: clamp(48px, 7vw, 90px) 20px; }
.band-plain { background: var(--bg); }
.band-soft  { background: var(--bg-soft); }
.band-deep  { background: var(--menu-bg); color: #fff; }
.band-deep a { color: #fff; }
.band-deep .band-kicker { color: rgba(255,255,255,.72); }

.band-inner { max-width: 1180px; margin: 0 auto; }
/* One left edge for every band, wide or narrow; the reading measure is
   applied to the text inside rather than to the container, so headings and
   body copy always start in the same place. */
.band p, .band .ticks li { max-width: 68ch; }
.band-title { max-width: 22ch; }

.band-kicker {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--secondary);
  margin: 0 0 10px;
}
.band-title {
  font-family: var(--font-headline);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.15;
  margin: 0 0 20px;
  text-wrap: balance;
}
.band p { max-width: 68ch; }
.band > .band-inner > p:first-of-type { margin-top: 0; }

/* image + text, alternating side */
.split {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.split-flip .split-media { order: 2; }
}
.split-media img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  display: block;
}
.split-body p:last-child { margin-bottom: 0; }

/* full-bleed image band */
.bleed { position: relative; }
.bleed img { width: 100%; height: clamp(200px, 26vw, 340px); object-fit: cover; display: block; }

/* three-up feature cards */
.cards {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 8px;
}
.card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--secondary);
  border-radius: 3px;
  padding: 22px;
}
.band-soft .card { background: #fff; }
.card h3 {
  font-family: var(--font-headline);
  font-size: 1.12rem;
  margin: 0 0 8px;
}
.card p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); max-width: none; }

/* quick facts */
.facts-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 22px;
  margin: 0 0 8px;
  font-size: 0.97rem;
}
.facts-grid dt { font-weight: 600; }
.facts-grid dd { margin: 0; color: var(--ink-soft); }
.band-deep .facts-grid dd { color: rgba(255,255,255,.82); }

/* plain marker list */
.ticks { list-style: none; padding: 0; margin: 0 0 8px; }
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  max-width: 68ch;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--secondary);
}

/* prep notes */
.notes { display: grid; gap: 18px; }
@media (min-width: 760px) { .notes { grid-template-columns: 1fr 1fr; } }
.notes div { border-left: 2px solid var(--rule); padding-left: 16px; }
.notes h3 { font-family: var(--font-body); font-size: 0.97rem; margin: 0 0 4px; }
.notes p { margin: 0; font-size: 0.93rem; color: var(--ink-soft); max-width: none; }

.band-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }


/* --- footer --------------------------------------------------------------- */
/* Modelled on montereybaywhalewatch.com: teal ground, logo column, quick
   links, contact details with icons. */

.site-footer { background: var(--menu-bg); color: #fff; margin-top: 0; }

.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 64px) 20px clamp(32px, 4vw, 48px);
  display: grid;
  gap: 36px 48px;
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .footer-inner { grid-template-columns: minmax(180px, 240px) 1fr 1fr; }
}

.footer-brand { text-align: center; }
.footer-brand img {
  width: 140px;
  height: 140px;
  display: block;
  margin: 0 auto 18px;
  background: #fff;
  border-radius: 50%;
}
.footer-book { display: inline-block; }

.footer-col h2 {
  font-family: var(--font-headline);
  font-size: 1.22rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: #fff;
  text-align: center;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: #fff; text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }

/* Quick links run in two columns, filling down the first before the second
   so the list still reads in order. */
.footer-links {
  columns: 2;
  column-gap: 28px;
}
.footer-links li { break-inside: avoid; }

/* Contact block is centred under its heading, icon and text together. */
.footer-contact { display: grid; justify-items: center; }
.footer-contact li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 14px;
  line-height: 1.5;
  text-align: center;
}
.footer-contact svg { width: 20px; height: 20px; margin-top: 3px; opacity: 0.9; flex: 0 0 auto; }

.footer-parent {
  margin: 22px auto 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  /* Wide enough that the company name stays on its own single line rather
     than breaking mid-name. */
  max-width: 40ch;
  text-align: center;
  text-wrap: balance;
}
.footer-parent a { white-space: nowrap; }
.footer-parent a { color: #fff; white-space: nowrap; }

/* the darker strip along the bottom, as on MBWW */
.footer-base { background: rgba(0, 0, 0, 0.22); }
.footer-base-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 20px 28px;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.82);
}
.footer-base-inner p { margin: 6px auto; max-width: 90ch; }
.footer-credits { color: rgba(255, 255, 255, 0.68); }
.footer-counter { margin-top: 16px; }
.footer-counter img { display: inline-block; border: 1px solid rgba(255,255,255,.25); }

.archive-more { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--rule); }
.archive-more h2 { font-family: var(--font-headline); font-size: 1.2rem; margin: 0 0 12px; }
.archive-more ul { margin: 0; padding-left: 1.1em; }
.archive-more li { margin-bottom: 8px; max-width: 72ch; }

/* Year blocks in the archive */
main section[id^="y"] { margin-bottom: 30px; }
main section[id^="y"] > h2 {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--menu-bg);
  display: inline-block;
}