/* ==========================================================================
   Nina & Himmat — Wedding Website
   --------------------------------------------------------------------------
   Design plan: a classic, formal invitation — photography first.
   Hero     : a full-bleed, edge-to-edge cover — the photographs fill the
              whole first screen (cover-fit, never stretched) behind a soft
              scrim, with the names and countdown set over them.
   Palette  : ivory paper, warm charcoal ink, champagne gold, with the
              couple's olive and rose woven in as delicate accent text.
   Type     : Cormorant Garamond (fine high-contrast serif, light cuts) ·
              Jost (geometric sans, wide-tracked caps for labels).
   Layout   : centred, generous whitespace; flanking hairlines on section
              labels; a full-bleed photo band; a calm aligned gallery.
   Theme    : single light theme BY DESIGN — this is an ivory invitation;
              a dark variant would break the letterpress feel. Every colour
              below is set explicitly so nothing inherits a default.
   ========================================================================== */

:root {
  color-scheme: light;

  /* palette — ivory with a golden undertone */
  --bg: #F6EDDA;            /* blush ivory — the whole site's paper */
  --bg-soft: #EFE3C6;       /* deeper golden sand for the bands */
  --paper: #FCF9F1;         /* card white */
  --ink: #26221B;           /* warm charcoal */
  --ink-soft: #6E6656;      /* warm grey for running text */
  --line: #DFD5BC;          /* hairline */
  --accent: #A1855A;        /* champagne gold */
  --accent-deep: #7E6439;   /* gold, darkened */
  --accent-light: #C6AB7B;  /* gold for dark/photo surfaces */
  --scrim: #15110C;         /* scrim tone over photographs */
  --olive: #6C7247;         /* muted olive — the couple's colour, accent text only */
  --rose: #9E5F58;          /* rose gold — accent text only */
  --rose-light: #E3A79C;    /* rose gold for dark/photo surfaces */

  /* The whole site's background: one continuous tinted sheet.
     A vertical drift carries blush rose at the top of the page,
     through champagne at its heart, into an olive whisper at the
     foot, while three soft pools of light (rose upper left,
     champagne upper right, olive at the base) stop it reading
     flat. Every alpha is low so the colour complements the ivory
     paper and never competes with the photography. */
  --wash:
    linear-gradient(180deg,
      rgba(227, 167, 156, .20) 0%,
      rgba(227, 167, 156, .07) 20%,
      rgba(198, 171, 123, .14) 45%,
      rgba(198, 171, 123, .22) 72%,
      rgba(108, 114, 71, .12) 100%),
    radial-gradient(1100px 700px at 12% 5%, rgba(227, 167, 156, .20), transparent 62%),
    radial-gradient(950px 650px at 90% 30%, rgba(198, 171, 123, .28), transparent 60%),
    radial-gradient(1050px 750px at 55% 100%, rgba(108, 114, 71, .14), transparent 65%);

  /* The alternating bands (traditions, day, soft subpage sections)
     wear the same tint a step deeper, so the page's rhythm reads:
     ivory, sand, ivory, sand. */
  --wash-band:
    linear-gradient(180deg,
      rgba(227, 167, 156, .16),
      rgba(198, 171, 123, .24) 50%,
      rgba(108, 114, 71, .12)),
    radial-gradient(900px 620px at 88% 10%, rgba(198, 171, 123, .32), transparent 62%),
    radial-gradient(900px 620px at 6% 90%, rgba(227, 167, 156, .24), transparent 60%);

  /* type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Segoe UI", sans-serif;

  --nav-h: 74px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------- base --- */

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 14px);
}

body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
  background-image: var(--wash);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

::selection { background: var(--accent); color: var(--paper); }

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

h1, h2, h3 { font-weight: 400; text-wrap: balance; }

p { max-width: 66ch; }

a { color: inherit; }

/* ------------------------------------------------------------ layout --- */

.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-left: max(clamp(20px, 4vw, 48px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(20px, 4vw, 48px), env(safe-area-inset-right, 0px));
}

.section { padding-block: clamp(4.5rem, 9vw, 7.5rem); }

.section-head { text-align: center; margin-bottom: clamp(2.8rem, 6vw, 4.2rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.eyebrow .hairline { width: 44px; height: 1px; background: var(--accent); opacity: .65; }

.section-title {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4.2vw, 3rem);
  line-height: 1.15;
  margin-top: 1rem;
}

.section-sub {
  margin: 1.3rem auto 0;
  color: var(--ink-soft);
  text-align: center;
}

/* ----------------------------------------------------------- buttons --- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 1.1em 2.5em;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}

.btn:hover { background: var(--ink); color: var(--bg); }

.btn-solid { background: var(--ink); color: var(--bg); }
.btn-solid:hover { background: transparent; color: var(--ink); }

.btn-accent { border-color: var(--accent); color: var(--accent-deep); }
.btn-accent:hover { background: var(--accent); color: var(--paper); }

/* -------------------------------------------------------------- nav --- */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: rgba(246, 237, 218, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: max(clamp(20px, 4vw, 48px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(20px, 4vw, 48px), env(safe-area-inset-right, 0px));
  max-width: 1240px;
  margin-inline: auto;
}

.nav-brand {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--ink);
}

.nav-brand em { font-style: italic; color: var(--accent); }

.nav-links { display: flex; gap: 2.4rem; }

.nav-links a {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: .4rem;
  border-bottom: 1px solid transparent;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}

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

.nav-toggle {
  display: none;
  position: relative;
  z-index: 86;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav-toggle span {
  position: absolute;
  left: 9px;
  right: 9px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .35s var(--ease), top .35s var(--ease), background .35s var(--ease);
}

.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 26px; }

body.menu-open .nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}

.mobile-menu.is-open { opacity: 1; pointer-events: auto; }

.mobile-menu a {
  font-family: var(--serif);
  font-size: 2.1rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.mobile-menu a:hover { border-bottom-color: var(--accent); }

body.menu-open { overflow: hidden; }

/* -------------------------------------------------------------- hero --- */

/* A full-bleed, edge-to-edge header: the photographs cover the whole
   first screen — cover-fit so nothing distorts — gently crossfading
   behind a soft scrim that keeps the names, date and countdown legible. */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--nav-h);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
  text-align: center;
}

.hero-media {
  position: absolute;
  inset: 0;
  margin: 0;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(24, 20, 13, .38) 0%,
    rgba(24, 20, 13, .18) 34%,
    rgba(24, 20, 13, .28) 64%,
    rgba(24, 20, 13, .55) 100%
  );
}

.hero-slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(.2) saturate(1.08);
  opacity: 0;
  transition: opacity 1.4s var(--ease), transform 1.6s var(--ease);
}

.hero-slide.is-active { opacity: 1; }

.hero .container { position: relative; z-index: 1; }

.hero-content {
  width: min(900px, 100%);
  margin: 0 auto;
  display: grid;
  justify-items: center;
  background: rgba(21, 17, 12, .30);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(227, 167, 156, .45);
  box-shadow: 0 30px 70px -35px rgba(21, 17, 12, .6);
  padding: clamp(2.2rem, 5vw, 3.8rem) clamp(1.8rem, 6vw, 4.5rem);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(252, 249, 241, .9);
}

.hero-eyebrow .hairline { width: 44px; height: 1px; background: rgba(252, 249, 241, .75); }

.hero-names {
  font-family: "Alex Brush", var(--serif);
  font-weight: 400;
  font-size: clamp(3.8rem, 9.5vw, 7.2rem);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--paper);
  text-shadow: 0 2px 30px rgba(21, 17, 12, .55);
  margin-top: 1.4rem;
}

.hero-names .amp { font-style: italic; color: var(--rose-light); padding-inline: .1em; }

.hero-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: rgba(252, 249, 241, .88);
  margin-top: .9rem;
}

.hero-date {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1.2rem;
  row-gap: .4rem;
  margin-top: 2.2rem;
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(252, 249, 241, .82);
}

.hero-date .sep { color: var(--accent-light); }

.countdown { display: flex; margin-top: 2.6rem; }

.cd-item {
  text-align: center;
  padding-inline: clamp(1.2rem, 3vw, 2rem);
}

.cd-item + .cd-item { border-left: 1px solid rgba(252, 249, 241, .32); }

.cd-num {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1;
  color: var(--paper);
  text-shadow: 0 1px 18px rgba(21, 17, 12, .5);
  font-variant-numeric: tabular-nums;
}

.cd-label {
  display: block;
  margin-top: .55rem;
  font-size: 9.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(252, 249, 241, .72);
}

.countdown-note {
  margin-top: 1.4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--rose-light);
}

.hero-actions { margin-top: 2.6rem; }

.hero-actions .btn-solid {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.hero-actions .btn-solid:hover { background: transparent; color: var(--paper); }

/* entrance + slow drift — orchestrated load moment (off for reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .hero-media { animation: hero-media-in 1.8s ease both; }

  @keyframes hero-media-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Ken Burns drift: every slide slowly zooms while it is showing,
     alternating in and out so the header feels alive. */
  .hero-slide.is-active { animation: hero-drift 6.2s var(--ease) forwards; }
  .hero-slide.is-active:nth-of-type(even) { animation-name: hero-drift-rev; }

  @keyframes hero-drift {
    from { transform: scale(1); }
    to   { transform: scale(1.1); }
  }

  @keyframes hero-drift-rev {
    from { transform: scale(1.1); }
    to   { transform: scale(1); }
  }

  .rise { opacity: 0; animation: rise 1.1s var(--ease) forwards; }
  .rise-1 { animation-delay: .1s; }
  .rise-2 { animation-delay: .25s; }
  .rise-3 { animation-delay: .4s; }
  .rise-4 { animation-delay: .55s; }
  .rise-5 { animation-delay: .7s; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
  }

}

/* -------------------------------------------------------------- story --- */

/* a blush pool of light behind the couple's story */
.story {
  background-image: radial-gradient(780px 560px at 78% 42%, rgba(227, 167, 156, .20), transparent 62%);
}

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}

.story-media { position: relative; padding-bottom: 3.4rem; }

.story-media::before {
  content: "";
  position: absolute;
  left: -8px;
  top: -8px;
  width: 56%;
  height: 56%;
  border: 1px solid var(--accent);
  opacity: .45;
}

.story-media figure { position: relative; }

.story-media .ph-a { width: 66%; aspect-ratio: 3 / 4; }

.story-media .ph-b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  aspect-ratio: 3 / 4;
  border: 12px solid var(--bg);
}

.story-media img { width: 100%; height: 100%; object-fit: cover; }

.story-copy .lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--olive);
  max-width: 52ch;
}

.story-copy p { color: var(--ink-soft); margin-top: 1.4rem; }

.signature {
  margin-top: 2.2rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--rose);
}

/* --------------------------------------------------------------- band --- */

.band {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.band-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(.22) saturate(1.1);
}

.band-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    165deg,
    rgba(214, 174, 106, .34) 0%,
    rgba(158, 95, 88, .20) 48%,
    rgba(108, 114, 71, .14) 100%
  );
  pointer-events: none;
}

.band-scrim {
  position: absolute;
  inset: 0;
  background: rgba(21, 17, 12, .38);
  pointer-events: none;
}

.band-inner {
  position: relative;
  z-index: 1;
  padding: 4rem max(24px, env(safe-area-inset-left, 0px)) 4rem max(24px, env(safe-area-inset-right, 0px));
}

.band-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  line-height: 1.3;
  color: var(--bg);
  max-width: 26ch;
  margin-inline: auto;
}

.band-sub {
  margin-top: 1.4rem;
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--rose-light);
}

.band-box {
  background: rgba(21, 17, 12, .42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(227, 167, 156, .45);
  box-shadow: 0 24px 60px -30px rgba(21, 17, 12, .55);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.8rem, 5vw, 3.6rem);
  max-width: 640px;
  margin-inline: auto;
}

/* ---------------------------------------------------------------- day --- */

.day { background: var(--bg-soft); background-image: var(--wash-band); }

.day-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
  align-items: stretch;
}

.timeline { list-style: none; border-left: 1px solid var(--line); }

.tl-item { position: relative; padding-left: 2.6rem; padding-bottom: 2.4rem; }
.tl-item:last-child { padding-bottom: 0; }

.tl-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.tl-time {
  display: block;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.tl-item h3 {
  font-family: var(--serif);
  font-size: 1.6rem;
  margin-top: .45rem;
}

.tl-item p { margin-top: .5rem; color: var(--ink-soft); }

.day-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(1.8rem, 3.4vw, 2.8rem);
  box-shadow: 0 24px 50px -40px rgba(21, 17, 12, .3);
}

.day-card-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.5rem;
  margin-bottom: 1.9rem;
}

.day-label {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--olive);
}

.day-card h3 {
  font-family: var(--serif);
  font-size: 1.9rem;
  margin-top: .5rem;
}

/* hand-drawn line icons beside the day card titles, inked in the
   same rose as the background paisley fields */
.day-icon {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.2em;
  margin-right: .55rem;
  fill: none;
  stroke: var(--rose);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.day-venue {
  margin-top: .55rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--olive);
}

.day-venue-info {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--line);
}

.dvi-addr {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--ink);
}

.dvi-note { margin-top: .4rem; color: var(--ink-soft); font-size: .95rem; }

.dvi-link { margin-top: .9rem; }

/* ------------------------------------------------------------- gallery --- */

/* A scrapbook collage: polaroid cards, gently tilted and staggered,
   drifting into place as they scroll into view. With JavaScript off
   they simply sit as a tilted collage. */

/* a champagne pool of light behind the collage */
.gallery {
  background-image: radial-gradient(920px 660px at 86% 40%, rgba(198, 171, 123, .22), transparent 62%);
}

.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(18px, 2.6vw, 30px);
}

.g-item {
  --tilt: 0deg;
  flex: 0 0 calc(33.333% - 21px);
  position: relative;
  padding: clamp(7px, 1vw, 10px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 24px 50px -40px rgba(21, 17, 12, .35);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  transform: rotate(var(--tilt));
  transition: transform .7s var(--ease), opacity .7s var(--ease);
}

.g-item:nth-child(4n+1) { --tilt: -2deg; }
.g-item:nth-child(4n+2) { --tilt: 1.6deg; }
.g-item:nth-child(4n+3) { --tilt: -0.9deg; }
.g-item:nth-child(4n)   { --tilt: 2deg; }

.g-item:nth-child(even) { margin-top: clamp(1rem, 2.4vw, 2.2rem); }

/* The last row has a single photo — centre it like a closing shot
   rather than leaving it looking stranded. (3-up layout only.) */
@media (min-width: 901px) {
  .g-item:last-child { margin-inline: auto; }
}

.g-item:hover { transform: translateY(-5px) rotate(0deg); }

.g-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}

.g-item:hover img { transform: scale(1.045); }

/* Entrance: only when JS is running (it adds .g-anim), items start
   low and faded, then settle into their tilt as they enter view. */
.gallery-grid.g-anim .g-item {
  opacity: 0;
  transform: translateY(22px) rotate(var(--tilt));
}

.gallery-grid.g-anim .g-item.is-in {
  opacity: 1;
  transform: translateY(0) rotate(var(--tilt));
}

.gallery-grid.g-anim .g-item.is-in:hover { transform: translateY(-5px) rotate(0deg); }

/* ---------------------------------------------------------- lightbox --- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(24, 21, 17, .95);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}

.lightbox.is-open { opacity: 1; pointer-events: auto; }

.lb-figure { max-width: min(1060px, 92vw); }

.lb-figure img {
  max-height: 78vh;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}

.lb-cap {
  margin-top: 1.1rem;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--bg);
}

.lb-btn {
  position: fixed;
  z-index: 91;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(246, 243, 236, .4);
  border-radius: 50%;
  background: none;
  color: var(--bg);
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .3s, background .3s;
}

.lb-btn:hover { border-color: var(--bg); background: rgba(246, 243, 236, .1); }

.lb-close { top: max(24px, env(safe-area-inset-top, 0px)); right: max(24px, env(safe-area-inset-right, 0px)); }

.lb-prev { left: max(20px, env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); }
.lb-next { right: max(20px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); }

body.lb-open { overflow: hidden; }

/* ------------------------------------------------------------- travel --- */

/* an olive whisper of light behind the travel notes */
.travel {
  background-image: radial-gradient(920px 660px at 10% 55%, rgba(108, 114, 71, .15), transparent 62%);
}

.travel-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
}

.t-card { border-top: 1px solid var(--accent); padding-top: 1.6rem; }

.t-card h3 { font-family: var(--serif); font-size: 1.55rem; }

.t-card p { margin-top: .8rem; color: var(--ink-soft); }

/* --------------------------------------------------------- henna field --- */

/* Every content section (not the hero, the photo band or the footer)
   wears a hand-drawn paisley field: rose-gold kairi outlines that
   draw themselves in a slow 7s loop, staggered per motif so a fresh
   paisley is always forming while others rest, like henna being
   drawn. main.js injects the SVG into each section and marks it
   .has-henna; the animation only runs while the section is near the
   viewport (.pf-anim), so offscreen fields cost nothing, and
   reduced-motion users see the field fully drawn and still. With
   JavaScript off the site simply keeps its plain tinted backgrounds. */

.traditions {
  position: relative;
  background-color: var(--bg-soft);
  background-image: var(--wash-band);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.has-henna { position: relative; }

/* the content lifts above the absolutely positioned field */
.has-henna .container { position: relative; z-index: 1; }

.paisley-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.pf-m { opacity: .9; }

.pf-out,
.pf-curl {
  fill: none;
  stroke: var(--rose);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.pf-out  { stroke-width: 2.4; stroke-opacity: .42; }
.pf-curl { stroke-width: 1.8; stroke-opacity: .36; }

.pf-dot {
  fill: var(--rose);
  fill-opacity: .5;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .pf-anim .pf-out,
  .pf-anim .pf-curl {
    animation: pf-draw 7s linear infinite;
    animation-delay: var(--pf-delay, 0s);
  }

  .pf-anim .pf-dot {
    animation: pf-dot 7s linear infinite;
    animation-delay: var(--pf-delay, 0s);
  }

  /* pathLength="100" normalises every path, so 100→0 draws it whole */
  @keyframes pf-draw {
    0%   { stroke-dashoffset: 100; }
    38%  { stroke-dashoffset: 0; }
    74%  { stroke-dashoffset: 0; }
    90%  { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 100; }
  }

  /* the buta dot blooms just as its paisley finishes drawing */
  @keyframes pf-dot {
    0%, 68% { opacity: 0; }
    76%     { opacity: 1; }
    82%     { opacity: 0; }
    100%    { opacity: 0; }
  }
}

.traditions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
  align-items: stretch;
}

.tr-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--rose);
  margin: .45rem 0 1.3rem;
}

.traditions-grid .day-card > p + p { margin-top: 1.2rem; }

/* ---------------------------------------------------------------- faq --- */

/* a blush hint before the ink footer closes the page */
.faq {
  background-image: radial-gradient(820px 600px at 88% 60%, rgba(227, 167, 156, .18), transparent 62%);
}

.faq-list {
  max-width: 780px;
  margin-inline: auto;
  border-top: 1px solid var(--line);
}

.faq-item { border-bottom: 1px solid var(--line); }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.5rem 0;
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.3;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item .plus {
  flex: none;
  font-family: var(--sans);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--accent);
  transition: transform .35s var(--ease);
}

.faq-item[open] .plus { transform: rotate(45deg); }

.faq-a { padding: 0 0 1.6rem; color: var(--ink-soft); max-width: 60ch; }

/* -------------------------------------------------------------- footer --- */

.site-footer { background: var(--ink); color: var(--bg); }

.footer-inner {
  padding: 4.6rem 0 4rem;
  display: grid;
  gap: .9rem;
  justify-items: center;
  text-align: center;
}

.footer-mono { font-family: var(--serif); font-size: 2.1rem; }

.footer-line { font-family: var(--serif); font-style: italic; font-size: 1.25rem; opacity: .85; }

.footer-hash {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-top: .6rem;
}

.footer-fine { font-size: 12px; opacity: .5; margin-top: .6rem; }

.footer-music { font-size: 10.5px; letter-spacing: .04em; opacity: .4; margin-top: .4rem; }

/* ================================================================ RSVP === */

.rsvp-page { min-height: 100vh; display: flex; flex-direction: column; }

.rsvp-main {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 5rem 0;
}

.rsvp-card { width: min(660px, 100%); }

.back-link {
  display: inline-block;
  margin-bottom: 3.2rem;
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}

.back-link:hover { color: var(--ink); border-bottom-color: var(--accent); }

.rsvp-mono {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--accent);
}

.rsvp-card h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  line-height: 1.1;
  margin-top: 1rem;
}

.rsvp-sub {
  margin-top: 1.2rem;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
}

.rsvp-deadline {
  display: inline-block;
  margin-top: 1.6rem;
  padding: .55em 1.4em;
  border: 1px solid var(--accent);
  color: var(--accent-deep);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.rsvp-form { margin-top: 3rem; }

.field { margin-bottom: 2rem; }

.field > label {
  display: block;
  margin-bottom: .6rem;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field .hint { display: block; margin-top: .55rem; font-size: 12.5px; color: var(--ink-soft); opacity: .8; }

.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--ink);
  padding: .5rem 0;
  transition: border-color .3s var(--ease);
}

.field select { -webkit-appearance: none; appearance: none; cursor: pointer; }

.field textarea { resize: vertical; min-height: 88px; }

.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--accent); }

.pills { display: flex; flex-wrap: wrap; gap: .9rem; }

.pill { position: relative; cursor: pointer; }

.pill input { position: absolute; opacity: 0; }

.pill span {
  display: block;
  border: 1px solid var(--line);
  padding: .95em 1.8em;
  font-size: 13.5px;
  letter-spacing: .06em;
  color: var(--ink-soft);
  background: transparent;
  transition: all .3s var(--ease);
}

.pill input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* honeypot — hidden from people, tempting to bots */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rsvp-actions { margin-top: 2.6rem; display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }

.form-error {
  display: none;
  margin-top: 1.6rem;
  padding: 1em 1.4em;
  border-left: 2px solid #A2543C;
  background: rgba(162, 84, 60, .08);
  color: #7C3E2C;
  font-size: 14px;
}

.form-error.is-visible { display: block; }

.form-success { display: none; text-align: center; padding: 3.5rem 1rem; }

.form-success.is-visible { display: block; }

.form-success h2 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
}

.form-success .success-line {
  margin: 1.2rem auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink-soft);
}

.form-success .btn { margin-top: 2.4rem; }

.form-note {
  margin-top: 2.4rem;
  font-size: 12.5px;
  color: var(--ink-soft);
  opacity: .8;
}

/* ------------------------------------------------------ music player --- */

.music-player {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: .7rem;
}

.music-player[hidden] { display: none; }

.mp-note {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--paper);
  color: var(--accent-deep);
  font-size: 1.15rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 14px 30px -14px rgba(21, 17, 12, .45);
  transition: background .35s ease, color .35s ease, transform .35s ease;
}

.mp-note:hover { transform: translateY(-2px); }

.mp-symbol { display: block; }

.mp-bars {
  display: none;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
}

.music-player.is-playing .mp-note { background: var(--accent-deep); color: var(--paper); }
.music-player.is-playing .mp-symbol { display: none; }
.music-player.is-playing .mp-bars { display: flex; }

.mp-bars i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  animation: mp-eq 1.1s ease-in-out infinite;
}

.mp-bars i:nth-child(2) { animation-delay: .25s; }
.mp-bars i:nth-child(3) { animation-delay: .5s; }

@keyframes mp-eq {
  0%, 100% { height: 30%; }
  50% { height: 100%; }
}

.mp-track {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .85rem;
  background: var(--paper);
  border: 1px solid var(--accent-light);
  border-radius: 999px;
  box-shadow: 0 14px 30px -16px rgba(21, 17, 12, .45);
  max-width: min(48vw, 340px);
}

.mp-ctrl {
  border: 0;
  background: none;
  color: var(--accent-deep);
  font-size: 1.05rem;
  line-height: 1;
  padding: .15rem .35rem;
  cursor: pointer;
}

.mp-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -------------------------------------------------- subpages & prose --- */

.section-soft { background: var(--bg-soft); background-image: var(--wash-band); }

.page-head {
  padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 5.5rem));
  text-align: center;
}

.page-title {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 3.8rem);
  font-weight: 400;
  color: var(--ink);
  margin-top: 1.2rem;
}

.page-sub {
  margin: 1rem auto 0;
  max-width: 560px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink-soft);
}

.page-meta {
  margin-top: .9rem;
  font-size: .8rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.prose { max-width: 720px; margin-inline: auto; }

.prose h2 { font-family: var(--serif); font-size: 2rem; margin-bottom: 1.4rem; }

.prose p { color: var(--ink-soft); margin-bottom: 1.2rem; }

.prose .cta { text-align: center; margin-top: 2.2rem; }

.laavan-list { list-style: none; max-width: 720px; margin-inline: auto; }

.laavan-list li {
  display: flex;
  gap: 1.4rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--line);
}

.laavan-list li:first-child { border-top: 1px solid var(--line); }

.laavan-no {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--accent-deep);
  line-height: 1.2;
}

.laavan-list h3 { font-family: var(--serif); font-size: 1.35rem; }

.laavan-list p { margin-top: .4rem; color: var(--ink-soft); }

.personal-note {
  max-width: 720px;
  margin-inline: auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 2.5rem 0 2.8rem;
  text-align: center;
}

.personal-note h2 { font-family: var(--serif); font-size: 2rem; }

.personal-note p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
  margin-top: 1.2rem;
}

.personal-note .signature {
  font-style: normal;
  font-size: 1.3rem;
  margin-top: 2rem;
}

.more-link {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-light);
  transition: color .3s ease, border-color .3s ease;
}

.more-link:hover { color: var(--ink); border-color: var(--accent); }

/* --------------------------------------------------------- responsive --- */

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }

  .story-grid { grid-template-columns: 1fr; }
  .story-copy { margin-top: 2.4rem; }

  .day-grid { grid-template-columns: 1fr; }
  .traditions-grid { grid-template-columns: 1fr; }

  .gallery-grid { gap: 20px; }
  .g-item { flex-basis: calc(50% - 12px); }
  .g-item:nth-child(even) { margin-top: 0; }

  .travel-cards { grid-template-columns: 1fr; gap: 2rem; }

  .countdown { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
  .hero-eyebrow .hairline { width: 26px; }
  .gallery-grid { gap: 14px; }
  .g-item { flex-basis: calc(50% - 8px); }
  .story-media .ph-b { border-width: 8px; }
  .cd-item { padding-inline: .9rem; }
  .mp-title { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .pf-out, .pf-curl { stroke-dashoffset: 0; animation: none; }
  .pf-dot { opacity: 1; animation: none; }
}