: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: #faebdf;

  /* 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 {
  display: flex;
  align-items: center;
  line-height: 0;
}

.monogram img {
  height: 42px;
  width: auto;
  display: block;
}

.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);
  /* svh, not vh: vh is the viewport with the mobile browser's toolbars hidden,
     so on a phone it reserves more height than is actually on screen and the
     page starts out scrollable. */
  min-height: 100svh;
  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%;
  /* Starts the names a comfortable gap below the scattered petals at the
     couple's feet (which reach ~44% of the artwork's height in hero.svg). */
  top: 50%;
  text-align: center;
}

.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%;
}

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

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

.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;
}

/* 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__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;
  }
}

/* ---------- Schedule ---------- */
.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__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;
}

.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;
}

/* ---------- 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;
  /* Four names overflow one line on a phone, so let the browser even out the
     lines rather than leaving a one-word stub. */
  text-wrap: balance;
}

/* A line may break between names, never inside one. */
.site-footer .name {
  white-space: nowrap;
}

/* ---------- 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;
  }

  .monogram img {
    height: 34px;
  }

  .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;
  }

  .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 {
    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;
  }
}
/* ---------- 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) {
  /* Phone screens are taller than the artwork, and simply scaling it up
     (`cover`) crops the side garlands away. Instead the artwork is 9-sliced
     with border-image: rows 0-1072 (feet, garlands, bells) become the top
     border and stay pinned under the header, rows 1128-1788 (banana leaves)
     become the bottom border and stay pinned to the foot of the screen, and
     the plain crepe-paper strip between them stretches to absorb whatever
     height the phone has. Border widths are in vw so both bands keep the
     artwork's own scale (image width = 1440). */
  /* Real Safari's small viewport (bottom bar expanded) is 50-130px shorter
     than Chrome's, which starves the stretchy middle and shoves the leaf band
     into the date lines. Sizing the page to the large viewport instead gives
     Safari the same proportions Chrome shows; the sliver below the first fold
     disappears as soon as Safari collapses its bar on the first swipe, after
     which the page fits exactly. The .safari class comes from script.js
     because Chrome on iOS is WebKit too and CSS cannot tell them apart;
     Chrome never gets the class and is unaffected. */
  .safari .home {
    min-height: 100lvh;
  }

  .hero {
    aspect-ratio: auto;
    /* hero-paper.jpg is real crepe-paper grain assembled from the artwork
       (its own rows 1072-1128 on top, then tone-matched clean paper from the
       original taller render), so the padding box (the stretchy middle)
       carries texture at the same scale as the bands instead of a smeared
       stretch of 56 rows. It starts at row 1072, exactly where the top band
       ends, so the seam is continuous. */
    background: var(--paper) url("images/hero-paper.jpg") top center / 100% auto repeat-y;
    border: solid transparent;
    border-width: calc(100vw * 1072 / 1440) 0 calc(100vw * 660 / 1440);
    border-image: url("images/hero-mobile.jpg") 1072 0 660 stretch;
  }

  .hero__overlay {
    left: 8%;
    right: 8%;
    /* The overlay's containing block is the hero's padding box, which starts
       at the bells slice line (row 1072 of the artwork), so a negative offset
       lifts the text to just under the feet and scattered petals (which end
       around row 700 in the middle of the artwork). The bells hang at the
       edges only, so the centered text clears them. */
    top: calc(100vw * -342 / 1440);
  }

  .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: 9vw;
  }

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

  /* The footer keeps its site-wide look (gold rule, own strip) below the
     artwork, matching the schedule/venue/travel pages, but its fixed 36/40px
     paddings are swapped for vw values: the artwork above scales with the
     screen width, so a fixed-height strip reads oversized on small phones and
     skinny on large ones. Scoped to .home so the other pages keep the
     site-wide strip. */
  .home .site-footer {
    padding: clamp(18px, 6.5vw, 30px) 24px clamp(20px, 7.2vw, 33px);
    font-size: clamp(13px, 3.9vw, 16px);
  }
}