:root {
  --bg: #f5f1ea;
  --bg-soft: #ede7dc;
  --ink: #4a4438;
  --ink-soft: #6b6152;
  --muted: #9a8f7d;
  --gold: #b89968;
  --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__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);
}

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

.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 ---------- */
@media (max-width: 820px) {
  .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;
  }

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

  .schedule-day--reverse .schedule-day__figure,
  .schedule-day--reverse .schedule-day__body {
    order: 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;
  }
}