/* ============================================================
   Michael & Kristin — kristinmichael.com
   Rustic mountain aesthetic · Warm neutrals · Deep green + terracotta
   ============================================================ */

/* ── Custom Properties ────────────────────────────────────── */
:root {
  --cream:       #FAF6EF;
  --parchment:   #F0E8D8;
  --tan:         #D4C4A8;
  --tan-mid:     #B8A88A;
  --brown-lt:    #8B7355;
  --brown:       #3D2B1F;
  --green:       #3A5C3A;
  --green-lt:    #5C7A5C;
  --green-dark:  #2C4A2C;
  --terra:       #C27347;
  --terra-lt:    #D4896A;
  --gold:        #B89B6F;
  --white:       #FFFFFF;

  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'Lato', system-ui, -apple-system, sans-serif;

  --max-w:  1100px;
  --px:     clamp(1.25rem, 5vw, 2.5rem);
  --radius: 4px;
  --ease:   0.25s ease;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--sans);
  background-color: var(--cream);
  color: var(--brown);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }

/* ── Layout helpers ───────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px);
}

/* ── Typography helpers ───────────────────────────────────── */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--terra-lt);
  text-align: center;
  margin-bottom: 0.75rem;
}
.eyebrow--dark { color: var(--terra); }

.section-title {
  font-family: var(--serif);
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  font-weight: 400;
  color: var(--brown);
  text-align: center;
  line-height: 1.2;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.875rem 2rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background-color var(--ease),
    color var(--ease),
    border-color var(--ease);
  white-space: nowrap;
}

.btn-lg { padding: 1.0625rem 2.5rem; font-size: 0.8125rem; }

/* Green on white */
.btn-primary {
  background-color: var(--green);
  color: var(--white);
  border-color: var(--green);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background-color: var(--green-lt);
  border-color: var(--green-lt);
}

/* Ghost white (hero) */
.btn-ghost {
  background-color: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.8);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background-color: var(--white);
  color: var(--green);
  border-color: var(--white);
}

/* Terracotta (CTA section) */
.btn-terracotta {
  background-color: var(--terra);
  color: var(--white);
  border-color: var(--terra);
}
.btn-terracotta:hover, .btn-terracotta:focus-visible {
  background-color: var(--terra-lt);
  border-color: var(--terra-lt);
}

/* Ghost white (on green CTA) */
.btn-ghost-white {
  background-color: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.7);
}
.btn-ghost-white:hover, .btn-ghost-white:focus-visible {
  background-color: var(--white);
  color: var(--green);
  border-color: var(--white);
}

.btn:focus-visible {
  outline: 3px solid var(--terra);
  outline-offset: 3px;
}

/* ── Header / Nav ─────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: background-color var(--ease), box-shadow var(--ease);
}

.site-header.scrolled {
  background-color: var(--cream);
  box-shadow: 0 2px 20px rgba(61, 43, 31, 0.1);
}

.nav-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.25rem var(--px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--white);
  transition: color var(--ease);
}
.site-header.scrolled .nav-logo { color: var(--brown); }

.nav-amp { color: var(--terra-lt); font-style: italic; }
.site-header.scrolled .nav-amp { color: var(--terra); }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--ease), border-color var(--ease);
}
.nav-link:hover { border-bottom-color: var(--terra-lt); }
.site-header.scrolled .nav-link { color: var(--brown); }
.site-header.scrolled .nav-link:hover { border-bottom-color: var(--terra); }

.nav-link--cta {
  background-color: var(--green);
  color: var(--white) !important;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius);
  border-bottom: none !important;
  transition: background-color var(--ease);
}
.nav-link--cta:hover,
.nav-link--cta:focus-visible { background-color: var(--green-lt); }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: var(--radius);
  z-index: 210;
}

.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--white);
  border-radius: 2px;
  transition: transform var(--ease), opacity var(--ease), background-color var(--ease);
}
.site-header.scrolled .hamburger-line { background-color: var(--brown); }
.nav-toggle[aria-expanded="true"] .hamburger-line { background-color: var(--white); }

.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-toggle:focus-visible {
  outline: 3px solid var(--terra);
  outline-offset: 2px;
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* ── PHOTO SWAP INSTRUCTIONS ──────────────────────────────
   Replace the gradient below with your real hero photo:
   background-image: url('images/hero-couple.jpg');
   Keep background-size: cover and background-position: center.
   ────────────────────────────────────────────────────────── */
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('images/hero-couple.jpg');
  background-size: cover;
  background-position: center top;
  /* Placeholder gradient — remove once a real photo is in /images/ */
  background-color: #1E2E1A;
  background-image:
    url('images/hero-couple.jpg'),
    linear-gradient(155deg, #1C2E18 0%, #2E4420 30%, #4A3824 60%, #1E1810 100%);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 12, 8, 0.25) 0%,
    rgba(15, 12, 8, 0.52) 45%,
    rgba(15, 12, 8, 0.72) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 7rem var(--px) 4rem;
  /* 900px (was 720px) so the full-name H1 fits on one line on desktop.
     Other hero elements are short centred text and are unaffected. */
  max-width: 900px;
  color: var(--white);
}

.hero .eyebrow {
  color: var(--tan);
  margin-bottom: 1.5rem;
}

.hero-names {
  font-family: var(--serif);
  /* "Michael Punal & Kristin Donohue" renders at ~14.9x the font size. Capped at
     3.25rem so it fits one line inside .hero-content (900px - 80px padding = 820px).
     Below ~550px viewport it wraps, and .name-unit forces that break at the
     ampersand rather than inside a name. */
  font-size: clamp(1.85rem, 5.4vw, 3.25rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}

/* Keep each full name atomic so a line break can only land at the ampersand,
   never inside a name. */
.name-unit { white-space: nowrap; }

.amp-italic {
  font-style: italic;
  color: var(--terra-lt);
}

/* Botanical ornament */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.ornament-line {
  display: block;
  width: 60px;
  height: 1px;
  background-color: rgba(212, 196, 168, 0.5);
}
.ornament-leaf {
  width: 20px;
  height: 20px;
  color: var(--terra-lt);
  opacity: 0.8;
}

.hero-date {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 3vw, 1.625rem);
  font-style: italic;
  color: rgba(255,255,255,0.92);
  margin-bottom: 0.5rem;
}

.hero-location {
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 1.75rem;
}

.hero-tagline {
  font-family: var(--serif);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-style: italic;
  color: rgba(255,255,255,0.82);
  margin-bottom: 2.75rem;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Countdown ────────────────────────────────────────────── */
.countdown-section {
  background-color: var(--parchment);
  padding: clamp(4rem, 8vw, 6rem) 0;
}

.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 90px;
}

.unit-number {
  font-family: var(--serif);
  font-size: clamp(3rem, 9vw, 5.5rem);
  font-weight: 400;
  color: var(--green);
  line-height: 1;
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  display: inline-block;
  text-align: center;
}

.unit-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brown-lt);
}

.unit-sep {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  color: var(--tan-mid);
  line-height: 1;
  margin-top: 0.125rem;
}

.countdown-complete {
  font-family: var(--serif);
  font-size: 2rem;
  font-style: italic;
  color: var(--green);
  text-align: center;
  padding: 2rem;
}

/* ── Details cards ────────────────────────────────────────── */
.details-section {
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  background-color: var(--cream);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.card {
  text-align: center;
  padding: 2.5rem 2rem;
  border: 1px solid var(--tan);
  border-radius: 8px;
  background-color: var(--white);
  transition: box-shadow var(--ease), transform var(--ease);
}
.card:hover {
  box-shadow: 0 8px 32px rgba(61, 43, 31, 0.09);
  transform: translateY(-2px);
}

.card-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 1.25rem;
  color: var(--terra);
}
.card-icon svg { width: 100%; height: 100%; }

.card-title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--brown);
  margin-bottom: 0.625rem;
}

.card-body {
  font-size: 0.9375rem;
  color: var(--brown-lt);
  line-height: 1.65;
}

.text-link {
  color: var(--green);
  font-weight: 700;
  border-bottom: 1px solid currentColor;
  transition: color var(--ease);
}
.text-link:hover, .text-link:focus-visible {
  color: var(--terra);
}
.text-link:focus-visible {
  outline: 3px solid var(--terra);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── CTA ──────────────────────────────────────────────────── */
.cta-section {
  background-color: var(--green);
  padding: clamp(4rem, 8vw, 6rem) 0;
  text-align: center;
}

.cta-title {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4vw, 2.875rem);
  font-weight: 400;
  color: var(--white);
  margin-bottom: 1rem;
}

.cta-body {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.82);
  max-width: 540px;
  margin: 0 auto 1rem;
  line-height: 1.75;
}

.cta-signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--tan);
  margin: 0 auto 2.5rem;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  background-color: var(--brown);
  color: var(--tan);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  text-align: center;
}

.footer-names {
  font-family: var(--serif);
  font-size: 1.875rem;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.footer-date {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.375rem;
}

.footer-venue {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--brown-lt);
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 768px) {

  .nav-toggle { display: flex; }

  .nav-menu {
    position: fixed;
    inset: 0;
    background-color: var(--green-dark);
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 199;
  }
  .nav-menu.is-open { transform: translateX(0); }

  .nav-link {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.9) !important;
    border-bottom-color: transparent !important;
    letter-spacing: 0.22em;
  }
  .nav-link:hover { border-bottom-color: var(--terra-lt) !important; }

  .nav-link--cta {
    background-color: var(--terra) !important;
    padding: 0.75rem 2rem !important;
    border-radius: var(--radius);
  }

  .unit-sep { display: none; }

  .countdown { gap: 2rem; }

  .hero-buttons { flex-direction: column; align-items: center; }
  .hero-buttons .btn { min-width: 200px; }

  .cta-buttons { flex-direction: column; align-items: center; }
  .cta-buttons .btn { min-width: 220px; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ── Travel board ─────────────────────────────────────────── */

/* Solid header variant for pages without a dark hero */
.site-header--solid {
  background-color: var(--cream);
  box-shadow: 0 2px 20px rgba(61, 43, 31, 0.1);
}
.site-header--solid .nav-logo { color: var(--brown); }
.site-header--solid .nav-amp { color: var(--terra); }
.site-header--solid .nav-link { color: var(--brown); }
.site-header--solid .nav-link:hover { border-bottom-color: var(--terra); }
.site-header--solid .hamburger-line { background-color: var(--brown); }
.site-header--solid .nav-toggle[aria-expanded="true"] .hamburger-line { background-color: var(--white); }

.travel-main {
  padding: clamp(7rem, 12vw, 9rem) 0 clamp(4rem, 8vw, 6rem);
  background-color: var(--cream);
  min-height: 70vh;
}

.travel-intro {
  max-width: 640px;
  margin: -1.5rem auto 2.5rem;
  text-align: center;
  color: var(--brown-lt);
}

/* Form inputs */
.field { margin-bottom: 1.125rem; }
.field--narrow { max-width: 260px; }

.field-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown-lt);
  margin-bottom: 0.375rem;
}
.req { color: var(--terra); }
.opt { text-transform: none; letter-spacing: 0; font-weight: 400; }

input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="date"], input[type="number"],
input:not([type]) {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--brown);
  background-color: var(--white);
  border: 1px solid var(--tan);
  border-radius: var(--radius);
  padding: 0.625rem 0.75rem;
  transition: border-color var(--ease);
}
input:focus-visible {
  outline: 3px solid var(--terra);
  outline-offset: 1px;
  border-color: var(--terra);
}

.field-hint {
  font-size: 0.8125rem;
  color: var(--brown-lt);
  margin-top: 0.25rem;
}

.form-error {
  color: var(--terra);
  font-weight: 700;
  font-size: 0.9375rem;
  margin: 0.75rem 0;
}

/* Gate */
.gate-box {
  max-width: 460px;
  margin: 0 auto;
}
.gate-box .card-body { margin-bottom: 1.25rem; }
.gate-box .field { text-align: left; }
.gate-box .btn { margin-top: 0.5rem; }

/* Post form card */
.form-card {
  text-align: left;
  margin-bottom: 3rem;
}
.form-card .card-title { text-align: center; margin-bottom: 1.5rem; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 1.25rem;
}

.ride-fieldset, .leg-fieldset {
  border: 1px solid var(--parchment);
  border-radius: var(--radius);
  padding: 1rem 1.25rem 0.5rem;
  margin-bottom: 1.25rem;
}
.ride-fieldset legend, .leg-fieldset legend { padding: 0 0.5rem; }

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-bottom: 1rem;
}
.radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  cursor: pointer;
}
.radio-label input { accent-color: var(--green); }

.leg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 1.25rem;
}

.form-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.btn-secondary {
  background-color: transparent;
  color: var(--green);
  border-color: var(--green);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  background-color: var(--green);
  color: var(--white);
}

/* Posts list */
.posts-heading {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 400;
  text-align: center;
  margin-bottom: 1.75rem;
}

.posts-empty {
  text-align: center;
  color: var(--brown-lt);
  font-style: italic;
}

.posts-section + .posts-section {
  margin-top: 2.5rem;
}

.posts-subheading {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  font-weight: 400;
  color: var(--brown);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--parchment);
}

.posts-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}

.post-card {
  text-align: left;
  padding: 1.5rem 1.5rem 1.25rem;
}

.post-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.post-name {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--brown);
  /* A long unbroken name (or a pasted token) must wrap, not push the card
     wider than the viewport. Matches .post-contact below. */
  overflow-wrap: anywhere;
  min-width: 0;
}

.post-badge {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  white-space: nowrap;
}
.post-badge--need  { background-color: var(--terra); }
.post-badge--offer { background-color: var(--green); }

.post-leg {
  font-size: 0.9375rem;
  color: var(--brown-lt);
  /* Guest-entered airport values can be long unbroken strings; wrap them so a
     post card never forces the whole page to scroll horizontally on mobile. */
  overflow-wrap: anywhere;
}
.post-leg strong { color: var(--brown); font-weight: 700; }

.post-contact {
  font-size: 0.9375rem;
  color: var(--brown-lt);
  margin-top: 0.625rem;
  overflow-wrap: anywhere;
}

.post-actions {
  display: flex;
  gap: 1.25rem;
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--parchment);
}

.post-action {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  padding: 0;
  border-bottom: 1px solid transparent;
  transition: color var(--ease), border-color var(--ease);
}
.post-action:hover, .post-action:focus-visible { color: var(--terra); border-bottom-color: var(--terra); }
.post-action:focus-visible { outline: 3px solid var(--terra); outline-offset: 2px; }

/* Author display rules (e.g. .btn) would otherwise override the UA [hidden] rule */
[hidden] { display: none !important; }

/* ── Venue map ─────────────────────────────────────────────── */

/* The only colours the site palette has no equivalent for. */
:root {
  --map-ground:    #DBE2CF;
  --map-tree:      #C2CFB0;
  --map-pond:      #BCD0CF;
  --map-road:      #D8C29A;
  --map-road-edge: #8C7B63;
  /* Warm amber rather than a true yellow — pure yellow reads as a warning
     against this cream, and white numerals on it fail contrast at 1.9:1.
     Brown numerals on this gold are 8.4:1. */
  --map-star:      #E9B23C;
}

.map-main {
  padding: clamp(7rem, 12vw, 9rem) 0 clamp(3rem, 6vw, 4.5rem);
  background-color: var(--cream);
}
/* Tighter than the site default — this page is condensed on purpose. */
.map-main .section-title { margin-bottom: 1.125rem; }

.map-actions { text-align: center; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.map-actions .btn { display: inline-flex; align-items: center; gap: 0.625rem; }
.map-actions .btn svg { width: 17px; height: 17px; }
.map-note {
  font-size: 0.875rem; color: var(--brown-lt);
  margin: 0.75rem auto 0; max-width: 34rem;
}
.map-note b { color: var(--terra); font-weight: 700; }
.map-actions .form-error { margin-bottom: 0; }

.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.75rem;
  align-items: start;
}

.map-figure { margin: 0; }
.map-caption {
  font-size: 0.8125rem; line-height: 1.5; color: var(--brown-lt);
  padding: 0.875rem 0.25rem 0; max-width: 32rem;
}

.map-card {
  position: relative;
  background-color: var(--map-ground);
  border: 1px solid var(--tan);
  border-radius: 8px;
  overflow: hidden;
}
.map-card svg { display: block; width: 100%; height: auto; }
/* Bottom-left: the top-left corner is where markers 11 and 12 sit, and the
   badge was covering marker 12 entirely. */
.map-card-label {
  position: absolute; bottom: 0.75rem; left: 0.75rem;
  background-color: rgba(250, 246, 239, 0.92);
  border: 1px solid var(--tan); border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--green);
}

.map-legend {
  border: 1px solid var(--tan); border-radius: 8px;
  background-color: var(--white); overflow: hidden;
}
.map-legend h2 {
  font-family: var(--serif); font-size: 1.125rem; font-weight: 400;
  color: var(--brown); padding: 0.875rem 1rem 0.75rem;
  border-bottom: 1px solid var(--tan);
}
.map-legend ol { list-style: none; }
.map-legend li {
  display: flex; gap: 0.75rem; padding: 0.5rem 1rem;
  border-top: 1px solid rgba(212, 196, 168, 0.45);
}
.map-legend li:first-child { border-top: none; }

.map-key {
  flex: none; width: 24px; height: 24px; margin-top: 0.15rem;
  border-radius: 50%; background-color: var(--terra); color: var(--white);
  font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.map-key--entry { background-color: var(--green); border-radius: 6px; }
/* Star, chapel and binocular keys are drawn shapes, not filled chips, so the
   chip's own background and rounding have to be cleared or a coloured disc
   shows behind them. Each is 4px wider than the 24px chip and pulls that back
   out of the 12px gutter, and each viewBox is centred on the point the numeral
   occupies — so every row's numeral and every row's text still land on the
   same two x positions whatever shape is drawn. Only the heights differ, by
   how tall the shape is: a wider box here would step three rows right. */
.map-key--glyph { background-color: transparent; border-radius: 0; overflow: visible; }
.map-key--event     { width: 28px; height: 28px; margin-left: -2px; margin-right: -2px; }
.map-key--chapel    { width: 28px; height: 32px; margin-left: -2px; margin-right: -2px; }
.map-key--viewpoint { width: 28px; height: 27px; margin-left: -2px; margin-right: -2px; }
.map-key-star   { fill: var(--map-star); }
.map-key-chapel,
.map-key-viewpoint { fill: var(--terra); }
.map-key-num {
  fill: var(--white); font-family: var(--sans); font-weight: 700;
  font-size: 13px; text-anchor: middle;
}
/* Only the gold star needs dark ink — white on that gold is 1.9:1, brown 8.4:1. */
.map-key-num--dark { fill: var(--brown); }

.map-text { display: flex; flex-direction: column; }
.map-place {
  font-family: var(--serif); font-size: 0.9375rem; font-weight: 500;
  color: var(--brown); line-height: 1.35;
}
.map-desc { font-size: 0.75rem; line-height: 1.45; color: var(--brown-lt); }

/* ── On-page map graphic ──────────────────────────────────── */
.map-edge-base { fill: none; stroke: var(--map-road-edge); stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; }
.map-edge-top  { fill: none; stroke: var(--map-road);      stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.map-edge-dash { fill: none; stroke: var(--cream);         stroke-width: 2;  stroke-linecap: round; stroke-dasharray: 1.5 11; opacity: 0.85; }
.map-dot  { fill: var(--terra); stroke: var(--cream); stroke-width: 3; }
.map-star { fill: var(--map-star); stroke: var(--cream); stroke-width: 3; stroke-linejoin: round; }
/* The chapel is one path made of two overlapping subpaths — a cross dropped
   onto a roof. paint-order puts the cream halo under the fill, so it traces
   the outer silhouette and the seam where the two meet stays invisible. The
   binoculars are a single outline and do not need it, but share the rule so
   both new markers carry an identical halo. */
.map-chapel, .map-viewpoint {
  fill: var(--terra); stroke: var(--cream); stroke-width: 3;
  stroke-linejoin: round; paint-order: stroke;
}
.map-gate { fill: var(--green); stroke: var(--cream); stroke-width: 2.6; stroke-linejoin: round; }
.map-gate-arrow { fill: none; stroke: var(--white); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.map-num {
  fill: var(--white); font-family: var(--sans); font-weight: 700;
  font-size: 15px; text-anchor: middle; dominant-baseline: central;
}
.map-num--onstar { fill: var(--brown); }

/* ── Save-to-phone panel (revealed after the PNG is built) ── */
.map-save {
  max-width: 24rem; margin: clamp(2rem, 5vw, 3rem) auto 0;
  text-align: center; padding: 1.5rem;
  border: 1px solid var(--tan); border-radius: 8px;
  background-color: var(--white);
}
.map-save h2 {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 400;
  color: var(--brown); margin-bottom: 0.5rem;
}
.map-save p { font-size: 0.8125rem; color: var(--brown-lt); margin-bottom: 1rem; }
.map-save img { border: 1px solid var(--tan); border-radius: var(--radius); margin-bottom: 1rem; }
.map-save .btn { width: 100%; }

@media (max-width: 768px) {
  .map-layout { grid-template-columns: 1fr; }
  /* Two columns of six on a tablet, one column on a phone. */
  .map-legend ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
}