:root {
  --bg: #f5f1ea;
  --bg-soft: #ede7dc;
  --ink: #4a4438;
  --ink-soft: #6b6152;
  --muted: #9a8f7d;
  --gold: #b89968;
  /* Deeper gold for small inline text (map links): --gold is only 2.5:1 against
     the card background, this passes WCAG AA at 4.9:1 while staying in family. */
  --gold-deep: #85683c;
  --rule: #d9cfbd;
  --card: #fbf8f2;

  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --max: 1200px;

  /* Sampled from the bottom edge of hero-mobile.jpg. The artwork's paper is
     warmer than --bg (#f5f1ea), which is why any sliver of page background
     below it reads as a distinctly different cream. */
  --paper: #faf1e7;

  /* The gold of the section headings ("Pre-Wedding"), softened so a full-width
     hairline reads as framing rather than a hard rule. Frames the header and
     the footer on every page. Derived from --gold rather than restating its
     RGB, so changing --gold above carries through here automatically. */
  --rule-gold: color-mix(in srgb, var(--gold) 55%, transparent);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(245, 241, 234, 0.92);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--rule-gold);
}

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

.monogram {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.35em;
  color: var(--ink);
}

.monogram .amp {
  color: var(--gold);
  font-style: italic;
  margin: 0 0.15em;
}

.nav-links {
  display: flex;
  gap: 42px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

/* Mobile nav */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ink);
  margin: 6px 0;
}

/* ---------- Hero (illustrated) ---------- */
/* The home page is a single full-bleed artwork. Letting the hero grow into any
   leftover viewport height means the page ends exactly where the artwork ends
   on every screen, without anyone having to know the header's height. When the
   artwork is taller than the viewport (the usual case) nothing grows and the
   page simply scrolls. */
/* iOS Safari paints the canvas background in places no element reaches: behind
   the bottom toolbar, in the safe-area inset, and in the overscroll/rubber-band
   region. Those slivers can't be closed by layout, so on the home page the
   canvas is set to the artwork's own paper colour and they stop being visible.
   :root is targeted because html carries an explicit background, which stops
   body's from propagating to the canvas. */
:root:has(.home) {
  background-color: var(--paper);
}

.home {
  background-color: var(--paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.home main,
.home .hero {
  flex: 1 0 auto;
}

.home main {
  display: flex;
  flex-direction: column;
}

.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1181 / 1618;
  margin: 0;
  background: url("images/hero.svg") center top / 101% auto no-repeat;
}

.hero__overlay {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 56%;
  text-align: center;
}

.hero__ganesha {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(90px, 8vw, 150px);
  aspect-ratio: 33 / 40;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__ganesha img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero .eyebrow {
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 28px;
}

.hero .names {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 140px);
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}

.hero .amp {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 56px);
  color: var(--muted);
  display: block;
  margin: 16px 0;
}

.hero .date {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 42px);
  color: var(--ink);
  margin: 64px 0 0;
}

.hero .place {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  margin: 18px 0 0;
  font-size: clamp(20px, 2.2vw, 34px);
}

/* ---------- Page section (non-hero) ---------- */
.page {
  padding: 96px 40px 120px;
  max-width: var(--max);
  margin: 0 auto;
}

.section-title {
  text-align: center;
  margin-bottom: 64px;
}

.section-title .eyebrow {
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}

.section-title h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 6vw, 72px);
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}

.section-title .rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  color: var(--gold);
}

.section-title .rule .line {
  width: 50px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}

.section-title .rule .dot {
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: 50%;
}

/* ---------- Cards (Details) ---------- */
.event-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.event-card {
  text-align: center;
}

.event-card img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  margin-bottom: 40px;
}

.event-card h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  margin: 0 0 28px;
  color: var(--ink);
}

.event-card .row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink-soft);
  margin: 10px 0;
  font-size: 15px;
}

.event-card .row svg {
  width: 16px;
  height: 16px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.4;
}

.event-card .address {
  margin-top: 20px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.9;
}

/* ---------- RSVP ---------- */
.rsvp {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.rsvp__ganesha {
  width: 60px;
  margin: 0 auto 36px;
  opacity: 0.9;
}

.rsvp__lede {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 48px;
}

.rsvp__lede strong {
  color: var(--ink);
  font-weight: 500;
  font-style: normal;
}

.rsvp__button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink);
  padding: 22px 48px;
  border: 1px solid var(--gold);
  background: transparent;
  letter-spacing: 0.08em;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.rsvp__button:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}

.rsvp__note {
  margin: 32px 0 0;
  color: var(--muted);
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
}

/* ---------- Venue ---------- */
.venue {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 96px;
}

.venue:last-child {
  margin-bottom: 0;
}

.venue--reverse .venue__figure {
  order: 2;
}

.venue--reverse .venue__body {
  order: 1;
}

.venue__figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-soft);
}

.venue__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.venue__figure--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--rule);
  background: var(--card);
  color: var(--muted);
  font-style: italic;
  font-family: var(--serif);
  font-size: 20px;
}

/* Carousel inside a venue figure */
.venue__figure--carousel {
  background: transparent;
}

.carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel__track {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease;
}

.carousel__slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
}

.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel__slide--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--rule);
  background: var(--card);
  color: var(--muted);
  font-style: italic;
  font-family: var(--serif);
  font-size: 18px;
  text-align: center;
  padding: 24px;
}

.carousel__slide--placeholder em {
  font-size: 14px;
  color: var(--muted);
}

.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: rgba(245, 241, 234, 0.85);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
  transition: background 0.2s ease;
  z-index: 2;
}

.carousel__btn:hover {
  background: #fff;
}

.carousel__btn--prev {
  left: 12px;
}

.carousel__btn--next {
  right: 12px;
}

.carousel__dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}

.carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(245, 241, 234, 0.6);
  cursor: pointer;
  transition: background 0.2s ease;
}

.carousel__dot.is-active {
  background: var(--gold);
}

/* On touch screens the 26px arrows and 8px dots are too small to hit
   comfortably, so give them tap-friendly sizes there. Pointer-based rather
   than width-based: an iPad in landscape is wide but still touch. */
@media (pointer: coarse) {
  .carousel__btn {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }

  .carousel__dots {
    gap: 12px;
    bottom: 10px;
  }

  .carousel__dot {
    width: 12px;
    height: 12px;
  }
}

.venue__tag {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
}

.venue__body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 48px);
  margin: 0 0 8px;
  color: var(--ink);
  line-height: 1.1;
}

.venue__desc {
  color: var(--ink-soft);
  font-size: 16px;
  margin: 18px 0 0;
}

.venue__map {
  margin: 20px 0 0;
}

.venue__map a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s ease;
}

.venue__map a:hover,
.venue__map a:focus-visible {
  color: var(--ink);
}

.venue__map-pin {
  width: 14px;
  height: 14px;
  flex: none;
  fill: currentColor;
}

.venue__dates {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 28px);
  color: var(--gold);
  margin: 0;
  letter-spacing: 0.02em;
}

@media (max-width: 820px) {
  .venue {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 64px;
  }

  .venue--reverse .venue__figure {
    order: 0;
  }

  .venue--reverse .venue__body {
    order: 0;
  }
}

/* ---------- Schedule ---------- */
/* ---------- Schedule tabs ---------- */
/* The selected state is driven off aria-selected rather than a separate class,
   so the accessible state and the visual state can never drift apart. */
.tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 64px;
}

.tab {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 26px);
  letter-spacing: 0.02em;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  padding: 12px 30px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.tab:hover {
  color: var(--ink-soft);
}

.tab[aria-selected="true"] {
  color: var(--gold);
  border-color: var(--rule-gold);
  background: color-mix(in srgb, var(--gold) 9%, transparent);
}

.tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Not strictly required today: the panel has no display declaration of its own,
   so the browser's built-in [hidden] rule already hides it. Kept as a guard in
   case a display value is ever added to .tab-panel, which would silently beat
   the attribute. */
.tab-panel[hidden] {
  display: none;
}

.schedule-section+.schedule-day {
  margin-top: 0;
}

.schedule-day {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 96px;
}

.schedule-day:last-child {
  margin-bottom: 0;
}

.schedule-day--reverse .schedule-day__figure {
  order: 2;
}

.schedule-day--reverse .schedule-day__body {
  order: 1;
}

.schedule-day__figure {
  margin: 0;
}

.schedule-day__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--bg-soft);
}

.schedule-day__caption {
  margin: 10px 2px 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.schedule-day__figure--placeholder {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--rule);
  background: var(--card);
  color: var(--muted);
  font-style: italic;
  font-family: var(--serif);
  font-size: 20px;
}

.schedule-day__tag {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
}

.schedule-day h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  margin: 0 0 8px;
  color: var(--ink);
  line-height: 1.1;
}

.schedule-day .day-sub {
  color: var(--muted);
  font-style: italic;
  margin: 0 0 8px;
}

.schedule-tbd {
  color: var(--muted);
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  margin: 16px 0 0;
}

.timeline {
  margin: 8px 0 0;
}

.timeline-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}

.timeline-row:last-child {
  border-bottom: 0;
}

.timeline-time {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--gold);
  text-align: right;
  padding-top: 3px;
}

.timeline-title {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 6px;
}

.timeline-desc {
  color: var(--ink-soft);
  font-size: 15px;
  margin: 0;
}

/* ---------- Travel ---------- */
.travel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.travel-card {
  background: var(--card);
  padding: 40px;
  border: 1px solid var(--rule);
}

.travel-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  margin: 0 0 12px;
  color: var(--ink);
}

.travel-card .tag {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.travel-card p {
  color: var(--ink-soft);
  margin: 0 0 10px;
  font-size: 15px;
}

.travel-card ul {
  padding-left: 20px;
  color: var(--ink-soft);
  margin: 8px 0;
  font-size: 15px;
}

/* A card with long content (Things to do) spans the full grid width, so its
   neighbour in the same row doesn't get stretched with empty space. */
.travel-card--wide {
  grid-column: 1 / -1;
}

/* A card left alone in its row (Transport) sits centered rather than hugging
   the left column. */
.travel-card--center {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 560px;
  justify-self: center;
}

.travel-card__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}

.travel-card__subhead {
  margin-top: 12px;
}

@media (max-width: 820px) {
  .travel-card__cols {
    grid-template-columns: 1fr;
  }

  /* Single-column grid: the centered card matches the others again. */
  .travel-card--center {
    max-width: none;
  }
}

.travel-card .link {
  display: inline-block;
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
}

/* ---------- Footer ---------- */
.site-footer {
  text-align: center;
  padding: 36px 24px 40px;
  color: var(--muted);
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  border-top: 1px solid var(--rule-gold);
}

.site-footer p {
  margin: 0;
}

/* ---------- Responsive ---------- */
/* The full nav fits down to phone widths once its spacing tightens, so tablets
   (iPad portrait is 768px) keep the real links; the hamburger menu only takes
   over at 700px, where the row genuinely runs out of room. */
@media (max-width: 900px) {
  .nav {
    padding: 20px 28px;
  }

  .nav-links {
    gap: 26px;
  }
}

@media (max-width: 700px) {
  .nav {
    padding: 18px 22px;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    flex-direction: column;
    gap: 0;
    padding: 4px 22px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: none;
  }

  .nav-links.open {
    display: flex;
  }

  /* display:block is the important bit. As inline elements these links ignored
     their vertical padding for layout (so the list stayed cramped) while still
     painting it for the tap highlight — which is why the highlight box looked
     far taller than the text it covered. */
  .nav-links a {
    display: block;
    padding: 20px 2px;
    font-size: 13px;
    letter-spacing: 0.34em;
    border-bottom: 1px solid var(--rule);
    -webkit-tap-highlight-color: transparent;
  }

  /* Each <a> is the only child of its <li>, so a:last-child matched every link
     and removed every separator. Scope it to the last list item instead. */
  .nav-links li:last-child a {
    border-bottom: 0;
  }

  .nav-links a:active {
    color: var(--gold);
  }

  .nav-toggle {
    display: block;
  }
}

@media (max-width: 820px) {
  /* (hero artwork is handled in its own breakpoint below) */

  .page {
    padding: 64px 22px 80px;
  }

  .event-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .event-card img {
    height: 340px;
  }

  .travel-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .timeline-row {
    grid-template-columns: 90px 1fr;
    gap: 20px;
  }

  .timeline-time {
    font-size: 17px;
  }

  .timeline-title {
    font-size: 19px;
  }

  .schedule-day {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 64px;
  }

  /* Stacked layout: lift the location/date/subheader above the photo so each
     image sits directly under the event it belongs to. `display: contents`
     dissolves the body wrapper, letting its children take part in the section
     grid and be ordered around the figure. */
  .schedule-day__body {
    display: contents;
  }

  .schedule-day__head {
    order: 1;
  }

  .schedule-day .schedule-day__figure,
  .schedule-day--reverse .schedule-day__figure {
    order: 2;
  }

  .schedule-day .timeline,
  .schedule-day .schedule-tbd {
    order: 3;
  }

  /* The grid gap already spaces the head from the photo, and the photo from the
     timeline — drop the stacked margin and first-row padding underneath it. */
  .schedule-day__head .day-sub {
    margin-bottom: 0;
  }

  .schedule-day .timeline {
    margin-top: 0;
  }

  .schedule-day .timeline-row:first-child {
    padding-top: 4px;
  }

  .schedule-tbd {
    margin-top: 0;
  }
}
/* ---------- Phone hero (portrait artwork) ----------
   Scoped to phone widths rather than the 820px nav breakpoint: this artwork is
   ~1:2, so on a 768px tablet it would render 1500px tall. Tablets keep the
   desktop artwork, whose proportions suit them.

   Every size here is expressed in vw so the composition scales with the screen
   instead of being pinned to one phone. The clamp bounds are only guard rails
   for extremes — at 320px-460px, the widths real phones actually have, the vw
   value always wins, so the layout stays truly proportional. (Bounds that fire
   on ordinary phones are exactly what broke the previous version: a 40px floor
   made the names 10% of the artwork's width instead of 7%.) */
@media (max-width: 600px) {
  .hero {
    aspect-ratio: 1440 / 2912;
    background-color: var(--paper);
    background-image: url("images/hero-mobile.jpg");
    background-size: cover;
    background-position: center bottom;
  }

  /* 20vw is the real size; the clamp bounds are only guard rails for absurd
     viewports, set wide enough that no phone (320-430px) ever hits them, so the
     Ganesha always stays 20% of the screen width. */
  .hero__ganesha {
    width: clamp(48px, 20vw, 120px);
    top: 41%;
  }

  .hero__overlay {
    left: 8%;
    right: 8%;
    top: 49%;
  }

  .hero .names {
    font-size: clamp(34px, 11.3vw, 52px);
  }

  .hero .amp {
    font-size: clamp(17px, 5.6vw, 26px);
    margin: 1.5vw 0;
  }

  .hero .date {
    font-size: clamp(18px, 6.2vw, 28px);
    margin-top: 6.2vw;
  }

  .hero .place {
    font-size: clamp(14px, 4.6vw, 21px);
    margin-top: 3.1vw;
  }
}

/* Inline links to maps for hotels, sights, and airports */
.map-link {
  color: var(--gold-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Small arrow signalling the link opens a map in a new tab. inline-block keeps
   the underline from running beneath the arrow. */
.map-link::after {
  content: "\2197";
  display: inline-block;
  font-size: 0.72em;
  margin-left: 2px;
  vertical-align: 0.18em;
}

.map-link:hover {
  opacity: 0.75;
}