/* ==========================================================================
   The Rum Runners — "The Logbook" (design direction 1A)
   Tokens + components per design/HANDOFF.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens (HANDOFF §3)
   -------------------------------------------------------------------------- */
:root {
  /* Colour */
  --paper:      #f4efe3;  /* page background */
  --panel:      #efe7d5;  /* alt section background (map feature, callouts) */
  --field:      #ece3d0;  /* input / chip fill */
  --ink:        #26211a;  /* headings, hard rules, footer bg */
  --body:       #4a4234;  /* body copy on paper */
  --prose:      #2f2a22;  /* article prose (slightly darker) */
  --muted:      #8a7f68;  /* meta, captions, mono labels */
  --oxblood:    #8f3a2d;  /* primary accent: links, active nav, map pins, drop cap */
  --gold:       #b6893f;  /* secondary accent: eyebrow ticks, badges (use sparingly) */
  --rule:       #e2d9c6;  /* hairline divider */
  --rule-2:     #ddd3bd;  /* hairline on --panel */
  --border:     #d8cdb6;  /* chip / input border */
  --chip-tx:    #6f6650;  /* chip text on --field */
  --footer-tx:  #e9e0cd;  /* text on --ink footer */
  --footer-mut: #9a8f78;
  --mark:       #f0d9a6;  /* search-hit highlight */

  /* Type families */
  --font-serif: 'Newsreader', Georgia, serif;              /* display + article prose */
  --font-sans:  'Hanken Grotesk', system-ui, sans-serif;   /* nav, labels, UI */
  --font-mono:  'Space Mono', ui-monospace, monospace;     /* dates, meta, coords */
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

p { margin: 0; }
ol, ul { margin: 0; padding: 0; }

a { color: inherit; text-decoration: none; }

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

::selection { background: var(--mark); color: var(--ink); }

mark {
  background: var(--mark);
  color: var(--ink);
  padding: 0 2px;
}

/* JS toggles visibility via the hidden attribute; keep it winning over any
   author display rule (e.g. .archive-row { display: flex }). */
[hidden] { display: none !important; }

.wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 40px;
}

/* Shared text styles */
.eyebrow {
  font: 600 12px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--accent { color: var(--oxblood); }
.eyebrow a { color: var(--oxblood); }

.mono-meta {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--muted);
}

.kicker {
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   3. Header (HANDOFF §4.1)
   -------------------------------------------------------------------------- */
.topline {
  border-bottom: 1px solid var(--rule);
}
.topline__inner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 9px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.masthead {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-block: 20px;
}

.masthead__logo {
  display: block;
  height: 58px;
  color: var(--ink);
  flex: 0 0 auto;
}
.masthead__logo svg { height: 100%; width: auto; }

.site-nav {
  display: flex;
  gap: 26px;
  margin-left: 8px;
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--body);
}
.site-nav a.is-active { color: var(--oxblood); }
.site-nav a:hover { color: var(--oxblood); }

.search-pill {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 16px;
  width: 260px;
  color: var(--muted);
}
.search-pill input {
  border: 0;
  background: transparent;
  font: 400 14px/1 var(--font-sans);
  color: var(--body);
  width: 100%;
  padding: 0;
  outline: none;
}
.search-pill input::placeholder { color: var(--muted); }
.search-pill input::-webkit-search-decoration { display: none; }

.nav-toggle { display: none; }
.nav-toggle__input { display: none; }

.header-rule { height: 1px; background: var(--ink); }

/* --------------------------------------------------------------------------
   4. Footer (HANDOFF §4.2)
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--footer-tx);
  margin-top: 40px;
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-block: 40px;
}
.site-footer__logo {
  display: block;
  height: 54px;
  color: var(--footer-tx);
}
.site-footer__logo svg { height: 100%; width: auto; }
.site-footer__right { text-align: right; }
.site-footer__nav {
  display: flex;
  gap: 22px;
  justify-content: flex-end;
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-footer__nav a:hover { color: #fff; }
.site-footer__copy {
  font: 500 12px/1 var(--font-mono);
  color: var(--footer-mut);
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   5. Shared components (HANDOFF §8)
   -------------------------------------------------------------------------- */

/* Chip */
.chip {
  display: inline-block;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--field);
  border: 1px solid var(--border);
  color: var(--chip-tx);
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
a.chip:hover { border-color: var(--oxblood); color: var(--oxblood); }
.chip.is-active {
  background: var(--oxblood);
  border-color: var(--oxblood);
  color: #fff;
}
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Stat block */
.stat-row {
  display: flex;
  gap: 40px;
  border-top: 1px solid var(--rule);
}
.stat__value { font-family: var(--font-serif); font-size: 26px; color: var(--ink); }
.stat__suffix { font-size: 15px; }
.stat__label {
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* Pill button (outline) */
.pill-btn {
  display: inline-block;
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxblood);
  border: 1px solid var(--oxblood);
  border-radius: 999px;
  padding: 12px 24px;
}
.pill-btn:hover { background: var(--oxblood); color: #fff; }

/* Pager */
.pager {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 24px 0 6px;
}
.pager__num {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 13px/1 var(--font-sans);
}
.pager__num.is-active {
  background: var(--oxblood);
  border-color: var(--oxblood);
  color: #fff;
}
a.pager__num:hover { border-color: var(--oxblood); color: var(--oxblood); }
.pager__step {
  font: 600 13px/1 var(--font-sans);
  color: var(--muted);
  padding: 0 8px;
}
.pager__step:hover { color: var(--oxblood); }

/* Post list row (Tour page, HANDOFF §8) */
.post-row {
  display: flex;
  gap: 22px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  position: relative;
}
.post-row--first { border-top-color: var(--ink); }
.post-row__thumb {
  flex: 0 0 128px;
  height: 84px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--field);
}
.post-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-row__body { flex: 1; min-width: 0; }
.post-row__meta {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.post-row__title {
  font-size: 22px;
  margin: 6px 0 4px;
}
.post-row__title a:hover { color: var(--oxblood); }
.post-row__snippet {
  font-size: 14px;
  color: var(--body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-row__arrow {
  flex: 0 0 auto;
  font: 500 20px/1 var(--font-serif);
  color: var(--oxblood);
}

/* Section-level building blocks */
.section { padding: 44px 0 20px; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.section-head h2 { font-size: 34px; }
.section-link {
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oxblood);
}

/* Panel band (map feature etc.) */
.panel-band {
  background: var(--panel);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   6. Post / article (design screen 3)
   -------------------------------------------------------------------------- */
.post__head {
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 40px 8px;
  text-align: center;
}
.post__title {
  font-size: 44px;
  line-height: 1.08;
  margin: 18px 0 0;
}
.post__meta {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  flex-wrap: wrap;
}
.post__date {
  font: 500 12px/1 var(--font-mono);
  color: var(--muted);
}
.post__meta-dot { color: var(--border); }
.post__meta .chip { padding: 6px 10px; font-size: 10px; }

.post__lead {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 40px 0;
}
.post__lead img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: 6px;
}
.post__lead-caption {
  font: 500 10px/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: center;
  margin-top: 10px;
}

/* Article prose */
.prose {
  font-family: var(--font-serif);
  color: var(--prose);
}
.prose--article {
  max-width: 680px;
  margin: 0 auto;
  padding: 8px 40px 0;
}
.prose p {
  font-size: 20px;
  line-height: 1.62;
  margin: 20px 0 0;
}
.prose a {
  color: var(--oxblood);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.prose h2, .prose h3, .prose h4 {
  margin: 34px 0 0;
  line-height: 1.2;
}
.prose h2 { font-size: 30px; }
.prose h3 { font-size: 24px; }
.prose h4 { font-size: 20px; font-style: italic; }
.prose ul, .prose ol {
  margin: 20px 0 0;
  padding-left: 24px;
  font-size: 20px;
  line-height: 1.62;
}
.prose li { margin-top: 6px; }
.prose blockquote {
  margin: 26px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--oxblood);
  font-style: italic;
  color: var(--body);
}
.prose hr {
  border: 0;
  height: 1px;
  background: var(--rule-2);
  margin: 34px 0 0;
}

/* Drop cap on the opening paragraph (HANDOFF §8) */
.prose--article > p:first-of-type::first-letter {
  float: left;
  font-size: 62px;
  line-height: 0.8;
  padding: 6px 10px 0 0;
  font-weight: 500;
  color: var(--oxblood);
}

/* Figures & galleries break out of the 680px measure */
.prose--article .figure,
.prose--article .gallery {
  width: min(100vw - 80px, 1120px);
  margin-left: 50%;
  transform: translateX(-50%);
}
.figure { margin: 26px 0 0; }
.figure img { width: 100%; border-radius: 4px; }
.figure figcaption,
.gallery figcaption {
  font: 500 10px/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: center;
  margin-top: 10px;
}

.gallery { margin: 26px 0 0; }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.gallery--duo .gallery__grid { grid-template-columns: 1fr 1fr; }
.gallery__item { border-radius: 4px; overflow: hidden; }
.gallery__item img {
  width: 100%;
  height: 210px;
  object-fit: cover;
}
.gallery--duo .gallery__item img { height: 280px; }
.gallery--single img { width: 100%; border-radius: 4px; }

/* Day divider (HANDOFF §8) */
.day-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 34px 0 4px;
}
.day-divider__date {
  font: 700 12px/1 var(--font-mono);
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--oxblood);
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
}
.day-divider__label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--body);
}
.day-divider__rule {
  flex: 1;
  height: 1px;
  background: var(--rule-2);
}

/* Post footer: tags + prev/next */
.post__foot {
  max-width: 900px;
  margin: 40px auto 0;
  padding: 0 40px;
}
.post__tags {
  justify-content: center;
  margin-bottom: 28px;
}
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border-top: 1px solid var(--ink);
  padding-top: 22px;
}
.post-nav__item--next { text-align: right; }
.post-nav__label {
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-nav__title {
  display: block;
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--ink);
  margin-top: 8px;
}
.post-nav__title:hover { color: var(--oxblood); }

/* Static page extras */
.page__standfirst {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.55;
  color: var(--body);
  margin-top: 18px;
}

/* "At a glance" year bars (About) */
.glance { padding: 40px; }
.glance__kicker { margin-bottom: 18px; }
.glance__bars {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.glance__col { flex: 1; text-align: center; }
.glance__bar {
  background: var(--oxblood);
  border-radius: 3px 3px 0 0;
}
.glance__label {
  font: 500 10px/1.4 var(--font-mono);
  color: var(--muted);
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   7. Maps: pins, route index, tour page (HANDOFF §6, design screen 2)
   -------------------------------------------------------------------------- */
.pin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--oxblood);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 13px/1 var(--font-sans);
  border: 2px solid var(--paper);
}
.pin--ink { background: var(--ink); }
.pin--map {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.pin--map.is-hot {
  transform: scale(1.25);
  background: var(--gold);
  z-index: 5;
}
.pin--dot {
  width: 16px;
  height: 16px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.pin--index {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  font-size: 11px;
  border: 0;
}

.map-frame {
  position: relative;
  height: 500px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--field);
}
/* Mapbox GL adds .mapboxgl-map (position: relative) to this element and its
   stylesheet loads after ours, so pin the geometry with higher specificity
   and explicit dimensions or the container collapses to 0 height. */
.map-frame .map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map-frame noscript img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Route index list */
.route-index {
  list-style: none;
  max-height: 460px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.route-index__row {
  display: flex;
  gap: 13px;
  padding: 10px 0;
  border-top: 1px solid var(--rule-2);
  scroll-margin: 8px;
}
.route-index__row.is-hot { background: var(--field); }
.route-index__name {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink);
}
.route-index__name a:hover { color: var(--oxblood); }
.route-index__meta {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 3px;
}

/* Tour hero */
.tour-hero { padding: 40px 40px 32px; }
.tour-hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-top: 16px;
}
.tour-hero__title {
  font-size: 56px;
  line-height: 1;
}
.tour-hero__standfirst {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--body);
  margin: 16px 0 0;
  max-width: 60ch;
}
.tour-hero__chips { flex: 0 0 auto; }
.tour-hero__stats {
  margin-top: 26px;
  padding-top: 22px;
}
.tour-hero .stat__value { font-size: 24px; }

/* Map + index band */
.route-band { padding: 36px 0; }
.route-band__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 30px;
  align-items: start;
}
.route-band__kicker { margin-bottom: 6px; }

/* Posts in this tour */
.tour-posts { padding-bottom: 24px; }
.tour-posts__title { font-size: 30px; }

/* --------------------------------------------------------------------------
   8. Home: hero, featured map, tour rows (design screen 1)
   -------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 44px;
  padding-top: 48px;
  padding-bottom: 40px;
}
.hero__title {
  font-size: 58px;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin-top: 20px;
}
.hero__title em {
  font-style: italic;
  color: var(--oxblood);
}
.hero__standfirst {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.55;
  color: var(--body);
  margin-top: 22px;
  max-width: 46ch;
}
.hero__stats {
  margin-top: 30px;
  padding-top: 26px;
  gap: 34px;
}
.hero__stats .stat__value { font-size: 30px; }
.hero__photos {
  display: grid;
  grid-template-rows: 1.4fr 1fr;
  gap: 12px;
  min-height: 420px;
}
.hero__photo {
  border-radius: 4px;
  overflow: hidden;
  background: var(--field);
}
.hero__photo picture, .hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Featured tour map */
.featured-map__inner { padding-block: 44px; }
.featured-map__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 30px;
  align-items: start;
}
.featured-map .map-frame--static { height: 420px; }
.map-frame--static img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.route-index--featured { max-height: none; overflow: visible; }
.route-index--featured .route-index__row { padding: 11px 0; }
.route-index--featured .pin--index {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  font-size: 12px;
}
.route-index--featured .route-index__name { font-size: 17px; }

/* Tour rows */
.tours-list__title { font-size: 34px; margin-bottom: 8px; }
h1.tours-list__title { font-size: 46px; }
.tours-list__sub {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--body);
  margin-bottom: 24px;
}
.tour-row {
  display: flex;
  gap: 22px;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}
.tour-row--first { border-top-color: var(--ink); }
.tour-row__lead { flex: 0 0 168px; }
.tour-row__season {
  font-size: 26px;
  line-height: 1;
  font-weight: 400;
}
.tour-row__season a:hover { color: var(--oxblood); }
.tour-row__meta {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 8px;
}
.tour-row__blurb {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--body);
}
.tour-row__thumbs {
  flex: 0 0 120px;
  display: flex;
  gap: 6px;
}
.tour-row__thumb {
  flex: 1;
  height: 64px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--field);
}
.tour-row__thumb picture, .tour-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tours-list__more {
  text-align: center;
  padding: 22px 0 8px;
}

/* --------------------------------------------------------------------------
   9. Country pages (design screen 4)
   -------------------------------------------------------------------------- */
.country-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding-top: 44px;
  padding-bottom: 32px;
  align-items: center;
}
.country-hero__title {
  font-size: 60px;
  line-height: 1;
  margin-top: 14px;
}
.country-hero__stats {
  margin-top: 26px;
  padding-top: 22px;
  gap: 36px;
}
.map-frame--country { height: 340px; border-radius: 6px; }

.country-tours { padding-bottom: 24px; }
.country-tours__kicker {
  padding: 20px 0 4px;
  border-top: 1px solid var(--rule);
}
.country-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 14px;
}
.country-card {
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper);
}
.country-card:hover { border-color: var(--border); }
.country-card__img {
  height: 120px;
  background: var(--field);
}
.country-card__img picture, .country-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.country-card__body { padding: 14px; }
.country-card__meta {
  font: 500 10px/1.4 var(--font-mono);
  color: var(--muted);
}
.country-card__title {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink);
  margin-top: 6px;
}
.country-card:hover .country-card__title { color: var(--oxblood); }

/* Countries index rows */
.country-row {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.country-row--first { border-top-color: var(--ink); }
.country-row__code { flex: 0 0 auto; }
.country-row__name { font-size: 26px; font-weight: 400; flex: 1; }
.country-row__name a:hover { color: var(--oxblood); }
.country-row__count {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   10. Archive (design screen 5)
   -------------------------------------------------------------------------- */
.archive-head { padding-top: 40px; }
.archive-head__title { font-size: 46px; margin-bottom: 10px; }
.archive-filters {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.archive-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 14px;
  font: 600 12px/1 var(--font-sans);
  color: var(--body);
}
.archive-filter__label { color: var(--body); }
.archive-filter select {
  appearance: none;
  border: 0;
  background: transparent;
  font: 600 12px/1 var(--font-sans);
  color: var(--body);
  padding-right: 16px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a7f68' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  cursor: pointer;
}

.archive-groups { padding-bottom: 24px; }
.archive-group__head {
  font: 700 12px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxblood);
  padding: 26px 0 4px;
  border-bottom: 2px solid var(--ink);
}
.archive-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.archive-row__date {
  font: 500 11px/1 var(--font-mono);
  color: var(--muted);
  width: 68px;
  flex: 0 0 68px;
}
.archive-row__title {
  font-size: 18px;
  font-weight: 400;
  flex: 1;
}
.archive-row__title a:hover { color: var(--oxblood); }
.archive-row__cc {
  font: 500 10px/1 var(--font-mono);
  color: var(--muted);
}
.archive-empty {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--muted);
  padding: 30px 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   11. Search (design screen 6)
   -------------------------------------------------------------------------- */
.search-page { padding-top: 44px; min-height: 40vh; }
.search-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 14px 24px;
  box-shadow: 0 3px 0 var(--ink);
  color: var(--ink);
}
.search-hero input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--ink);
  caret-color: var(--oxblood);
  outline: none;
  min-width: 0;
}
.search-hero input::placeholder { color: var(--muted); }
.search-hero input::-webkit-search-cancel-button,
.search-hero input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-hero__count {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
}
.search-filters {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
  align-items: center;
}
.search-filters__label {
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.chip--filter {
  font: 600 11px/1 var(--font-sans);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}

.search-results { padding: 8px 0 28px; margin-top: 20px; }
.search-result {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}
.search-result:first-child { border-top-color: var(--ink); }
.search-result__thumb {
  flex: 0 0 110px;
  height: 76px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--field);
}
.search-result__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.search-result__body { flex: 1; min-width: 0; }
.search-result__meta {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.search-result__title {
  font-size: 21px;
  margin: 6px 0;
}
.search-result__title a:hover { color: var(--oxblood); }
.search-result__excerpt {
  font-size: 14px;
  line-height: 1.5;
  color: var(--body);
}

/* --------------------------------------------------------------------------
   12. Responsive (HANDOFF §9: ~1024 / 720 / 480)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .wrap { padding-inline: 32px; }
  .hero { gap: 32px; }
  .hero__title { font-size: 48px; }
  .tour-hero__title { font-size: 48px; }
  .country-hero__title { font-size: 52px; }
  .route-band__grid { grid-template-columns: 1.2fr 1fr; }
  .featured-map__grid { grid-template-columns: 1.1fr 1fr; }
  .search-pill { width: 210px; }
}

@media (max-width: 720px) {
  .wrap { padding-inline: 24px; }

  /* Header: topline hidden, nav behind a menu button, search full-width */
  .topline { display: none; }
  .masthead { flex-wrap: wrap; gap: 16px; padding-block: 14px; }
  .masthead__logo { height: 44px; }
  .site-nav {
    display: none;
    order: 10;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    border-top: 1px solid var(--rule);
  }
  .site-nav a { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .site-nav a:last-child { border-bottom: 0; }
  .nav-toggle__input:checked ~ .site-nav { display: flex; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 8px;
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
  }
  .nav-toggle__bar {
    display: block;
    height: 2px;
    background: var(--ink);
    border-radius: 1px;
  }
  .search-pill { order: 9; flex-basis: 100%; width: auto; margin-left: 0; }

  /* Stacked layouts: index moves below the map */
  .hero { grid-template-columns: 1fr; padding-top: 32px; }
  .hero__title { font-size: 40px; }
  .hero__photos { min-height: 0; grid-template-rows: 200px 140px; }
  .featured-map__grid, .route-band__grid, .country-hero { grid-template-columns: 1fr; }
  .featured-map .map-frame--static { height: 320px; }
  .map-frame { height: 380px; }
  .map-frame--country { height: 300px; }
  .route-index { max-height: 320px; }

  .tour-hero__row { flex-direction: column; align-items: flex-start; }
  .tour-hero__title { font-size: 40px; }
  .country-hero__title { font-size: 44px; }
  .stat-row { flex-wrap: wrap; gap: 24px; }

  .tour-row { flex-wrap: wrap; }
  .tour-row__lead { flex: 1 1 100%; }
  .tour-row__blurb { flex: 1 1 60%; }

  .post__head { padding: 32px 24px 8px; }
  .post__title { font-size: 34px; }
  .post__lead { padding: 20px 24px 0; }
  .prose--article { padding: 8px 24px 0; }
  .prose--article .figure,
  .prose--article .gallery { width: calc(100vw - 48px); }
  .gallery__grid { grid-template-columns: 1fr 1fr; }
  .gallery__item img { height: 180px; }
  .post__foot { padding: 0 24px; }

  .country-cards { grid-template-columns: 1fr 1fr; }
  .archive-head__title { font-size: 38px; }
  .archive-row__date { flex-basis: 56px; width: 56px; }
  .archive-row__title { font-size: 16px; }

  .search-hero { padding: 12px 18px; }
  .search-hero input { font-size: 19px; }
  .search-result__thumb { flex-basis: 84px; height: 60px; }

  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .site-footer__right { text-align: left; }
  .site-footer__nav { justify-content: flex-start; }
}

@media (max-width: 480px) {
  body { font-size: 15px; }
  .prose p, .prose ul, .prose ol { font-size: 18px; }
  .hero__title { font-size: 34px; }
  .post__title { font-size: 30px; }
  .gallery__grid, .gallery--duo .gallery__grid { grid-template-columns: 1fr; }
  .gallery__item img, .gallery--duo .gallery__item img { height: auto; max-height: 320px; }
  .post-nav { grid-template-columns: 1fr; gap: 20px; }
  .post-nav__item--next { text-align: left; }
  .tour-row__thumbs { display: none; }
  .country-cards { grid-template-columns: 1fr; }
  .glance__bars { gap: 4px; }
  .pager__num { width: 28px; height: 28px; }
}

/* --------------------------------------------------------------------------
   13. Accessibility & misc (HANDOFF §10)
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  z-index: 100;
  font: 600 13px/1 var(--font-sans);
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}