/* Vipin & Abhirami — built around kasavu: handloom cream, woven gold, a little laterite red. */

:root {
  --paper: #f3ece0;
  --paper-2: #f7f2e8;
  --ink: #2a2420;
  --ink-soft: #6d6255;
  --gold: #bf953b;
  --gold-soft: rgba(191, 149, 59, .16);
  --laterite: #8f3a26;
  --turmeric: #eec25a;
  --night: #1b2032;
  --cream: #f6eedd;

  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --serif: "Newsreader", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --ml: "Chilanka", "Newsreader", cursive;

  --ease: cubic-bezier(.2, .7, .1, 1);
  --gutter: 16px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
}

img { display: block; height: auto; }

/* Paper grain over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.16 0 0 0 0 0.12 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Shared pieces ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--laterite);
}

.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.1rem, 14vw, 8rem);
  line-height: .95;
  letter-spacing: -.02em;
  margin-top: 1.2rem;
}

.display em { font-style: italic; color: var(--laterite); }

.ml {
  font-family: var(--ml);
  font-style: normal;
  color: var(--laterite);
}

.ml--lg { font-size: clamp(1.6rem, 6vw, 2.4rem); margin-top: 1rem; }

/* The woven gold border of a kasavu saree */
.kasavu {
  height: 28px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .3) 0 1px, transparent 1px 4px) 0 9px / 100% 11px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 4px / 100% 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 9px / 100% 11px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 23px / 100% 1px no-repeat;
}

.kasavu--bottom { transform: scaleY(-1); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin-top: 2rem;
  padding: 1rem 1.7rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: background .35s var(--ease), color .35s var(--ease);
}

.btn::after { content: "→"; font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0; transition: transform .35s var(--ease); }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:hover::after { transform: translateX(4px); }

.btn--light { color: var(--cream); }
.btn--light:hover { background: var(--cream); color: var(--night); }


/* Scroll progress, a single gold thread */
.thread { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.thread span { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); }

/* Entrance + reveal */
.rise { opacity: 0; transform: translateY(26px); transition: opacity 1.2s var(--ease) var(--d, 0s), transform 1.2s var(--ease) var(--d, 0s); }
.is-ready .rise { opacity: 1; transform: none; }

.reveal { opacity: 0; transform: translateY(34px) rotate(var(--r, 0deg)); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.is-in { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }

/* ---------- Cover ---------- */

.cover {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 var(--gutter) 36svh;
  overflow: hidden;
  background: url("assets/cover/tall.webp") center / cover no-repeat, var(--paper);
}

@media (min-aspect-ratio: 1/1) {
  .cover { background-image: url("assets/cover/wide.webp"); }
}

.cover .kasavu--top { margin: 0 calc(var(--gutter) * -1); }

.cover__meta {
  display: flex;
  justify-content: space-between;
  padding: 1.1rem 0 0;
  font-family: var(--mono);
  font-size: clamp(.72rem, 2.6vw, .92rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cover__kicker {
  margin-top: 5svh;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.08rem, 3.8vw, 1.45rem);
  color: var(--ink-soft);
}

.names {
  font-family: var(--display);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.03em;
  margin-top: .6rem;
}

.names > span { display: block; }

.names__one, .names__two { font-size: min(20vw, 10.5svh, 11.5rem); }
.names__two { text-align: right; font-style: italic; }

.names__amp {
  font-style: italic;
  color: var(--gold);
  font-size: min(12vw, 6.5svh, 6.5rem);
  text-align: center;
  line-height: 1;
  margin: .05em 0 -.05em;
}

.names .ml {
  display: block;
  font-size: clamp(1.15rem, 5vw, 2.1rem);
  letter-spacing: 0;
  line-height: 1.4;
  margin-top: .3em;
}

.names__one .ml { padding-left: .35em; }
.names__two .ml { padding-right: .2em; }

.cover__sub {
  max-width: 19rem;
  margin-top: 1.6rem;
  font-size: clamp(1.12rem, 4vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink-soft);
}

.cover__fig {
  position: absolute;
  bottom: 0;
  height: min(34svh, 360px);
  width: auto;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.4s var(--ease) 1s, transform 1.4s var(--ease) 1s;
}

.cover__fig--him { left: -2%; }
.cover__fig--her { right: -1%; transition-delay: 1.15s; }

.is-ready .cover__fig { opacity: 1; transform: none; animation: breathe 5s ease-in-out 2.4s infinite; }
.is-ready .cover__fig--her { animation-delay: 3.2s; }

@keyframes breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.cue {
  position: absolute;
  left: 50%;
  bottom: 3svh;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cue i { width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); transform-origin: top; animation: drip 2.2s var(--ease) infinite; }

@keyframes drip {
  0% { transform: scaleY(0); opacity: 1; }
  70% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- Film ---------- */

.track { height: 300vh; position: relative; background: var(--night); } /* 520vh for all five paintings */

.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

#film { width: 100%; height: 100%; display: block; }

/* on the first, mostly blank painting: a quiet nudge to keep going */
.film-hint {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, calc((1 - var(--hint, 1)) * -14px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  opacity: var(--hint, 1);
  font-family: var(--mono);
  font-size: clamp(.85rem, 3.2vw, 1.05rem);
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink);
  pointer-events: none;
}

.film-hint i { width: 1.5px; height: 72px; background: linear-gradient(var(--gold), transparent); transform-origin: top; animation: drip 2.2s var(--ease) infinite; }

/* the next painting washes in on its own layer, so the two never have to be copied together */
#film-next { position: absolute; inset: 0; width: 100%; height: 100%; display: block; visibility: hidden; will-change: transform; }

/* the last moments of the film settle into the flat page paper, so it hands over to the
   story with no seam */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  opacity: var(--end, 0);
  pointer-events: none;
}

.caption {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(36rem, calc(100% - 2 * var(--gutter)));
  transform: translate(-50%, calc(-50% + (1 - var(--o, 0)) * 18px));
  opacity: var(--o, 0);
  text-align: center;
  color: var(--cream);
  text-shadow: 0 2px 24px rgba(15, 12, 8, .5);
  pointer-events: none;
}


/* a soft pool of shadow behind each caption so it reads over busy paintings */
.caption::before {
  content: "";
  position: absolute;
  inset: -60% -20%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(14, 16, 32, .55), transparent);
}

.caption__line {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(2.2rem, 9vw, 3.8rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}

/* ---------- Story reel ---------- */

.reel { position: relative; background: var(--paper); }

.reel__viewport { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

.reel__row {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  padding: 0;
  gap: 0;
  background: var(--paper);
  will-change: transform;
}

.panel {
  position: relative;
  flex: 0 0 auto;
  width: 100vw;
  height: 100%;
  padding: 4svh calc(var(--gutter) + 8px) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.panel--title .display { font-size: clamp(3.4rem, 16vw, 8.5rem); }
.panel__hint { margin-top: 2.4rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }

.panel__no {
  display: block;
  margin-bottom: .6rem;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(3.6rem, 15vw, 6.5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
}

.panel img {
  position: relative;
  max-width: 100%;
  max-height: 50svh;
  width: auto;
  margin: 0 auto;
  transform: translateX(var(--px, 0));
}

.panel figcaption { position: relative; margin-top: 1.4rem; max-width: 24rem; }

.panel__line {
  margin-top: .6rem;
  font-family: var(--display);
  font-size: clamp(1.45rem, 5.6vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.01em;
}

.panel__line em { color: var(--laterite); }

.reel__progress {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 4svh;
  height: 1px;
  background: rgba(42, 36, 32, .14);
}

.reel__progress span { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--reel, 0)); }

/* ---------- Events ---------- */

.intro-events { padding: 20svh var(--gutter) 12svh; text-align: center; background: var(--paper); }

.event { position: relative; overflow: hidden; padding: 12svh var(--gutter) 14svh; }

/* Haldi: turmeric all the way through, the couple framed in a cream temple arch
   under a marigold thoranam */
.event--haldi {
  padding-top: 15svh;
  background:
    radial-gradient(120% 70% at 30% 55%, #f3cf6f 0%, transparent 60%),
    linear-gradient(#e7b443, #eec25a 40%, #e9b84a);
}

.garland {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background:
    /* leaves */
    radial-gradient(ellipse 7px 11px at 15px 30px, #4d7a37 0 92%, transparent) 0 0 / 30px 64px repeat-x,
    /* marigold heads, two shades */
    radial-gradient(circle at 15px 15px, #f39a2a 0 8px, #d9681b 8.5px 11px, transparent 11.5px) 0 0 / 30px 30px repeat-x,
    /* hanging strands every few flowers */
    radial-gradient(circle at 15px 45px, #f3b13a 0 7px, #d97c1d 7.5px 9px, transparent 9.5px) 0 0 / 150px 64px repeat-x;
  filter: drop-shadow(0 4px 4px rgba(120, 70, 0, .25));
}

.event--haldi .event__word { color: rgba(150, 95, 10, .13); top: 12svh; }

.arch {
  position: relative;
  width: min(100%, 30rem);
  margin: 0 auto;
  padding: 22% 6% 0;
  border-radius: 999px 999px 0 0;
  background: #f6eedd;
  box-shadow: 0 40px 60px -40px rgba(110, 60, 0, .55);
}

.arch::before {
  content: "";
  position: absolute;
  inset: 12px 12px 0;
  border: 1px solid var(--gold);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  pointer-events: none;
}

.arch img { position: relative; width: 100%; height: auto; }

.event--haldi .event__card { color: #2a1d0c; }

.event--wedding { background: var(--paper-2); padding-top: 0; padding-bottom: 0; }
.event--wedding .event__grid { padding: 14svh 0; }

.event__word {
  position: absolute;
  top: 6svh;
  left: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(9rem, 44vw, 26rem);
  line-height: 1;
  letter-spacing: -.04em;
  white-space: nowrap;
  color: rgba(255, 255, 255, .34);
  transform: translateX(var(--shift, 0));
  pointer-events: none;
  user-select: none;
}

.event--wedding .event__word { color: var(--gold-soft); top: 10svh; }

.event__grid { position: relative; display: grid; gap: 2rem; max-width: 72rem; margin: 0 auto; }

.event__art {
  max-height: 64svh;
  max-width: 100%;
  width: auto;
  margin: 0 auto;
}

.event__card { max-width: 30rem; }

.event__title {
  margin-top: .8rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.8rem, 12vw, 5rem);
  line-height: 1;
  letter-spacing: -.02em;
}

.event__title .ml { font-size: .38em; letter-spacing: 0; margin-left: .3em; vertical-align: middle; }

.facts { margin-top: 1.8rem; }

.facts div {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: baseline;
  padding: .85rem 0;
  border-top: 1px solid rgba(42, 36, 32, .18);
}

.facts div:last-child { border-bottom: 1px solid rgba(42, 36, 32, .18); }

.facts dt { font-family: var(--mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.facts dd { font-size: 1.08rem; }

.event--haldi .facts dt, .event--haldi .eyebrow { color: #6b4a12; }
.event--haldi .facts div { border-color: rgba(42, 36, 32, .22); }

/* little turmeric-to-marigold dots after the haldi dress code */
.swatches { display: inline-flex; gap: 4px; margin-left: .5rem; vertical-align: middle; }
.swatches i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7); }
.swatches i:nth-child(1) { background: #f6d24a; }
.swatches i:nth-child(2) { background: #f2a52b; }
.swatches i:nth-child(3) { background: #e2711d; }

.countdown { display: flex; gap: 1.8rem; margin-top: 2rem; }
.countdown div { display: flex; flex-direction: column; }
.countdown b { font-family: var(--display); font-weight: 400; font-size: 2.6rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.countdown span { margin-top: .4rem; font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Venue ---------- */

.venue {
  position: relative;
  overflow: hidden;
  padding: 22svh var(--gutter) 20svh;
  background: var(--night);
  color: var(--cream);
  text-align: center;
}

/* painted night river behind the venue; added only when the section is close, so it never
   competes with the first screen. The tint keeps the lettering readable, lifting toward the
   bottom so the lamp reflections glow through. */
.venue.is-near {
  background:
    linear-gradient(rgba(27, 32, 50, .62), rgba(27, 32, 50, .5) 55%, rgba(27, 32, 50, .15)),
    url("assets/venue/tall.webp") center bottom / cover no-repeat,
    var(--night);
}

@media (min-aspect-ratio: 1/1) {
  .venue.is-near {
    background:
      linear-gradient(rgba(27, 32, 50, .62), rgba(27, 32, 50, .48) 55%, rgba(27, 32, 50, .12)),
      url("assets/venue/wide.webp") center bottom / cover no-repeat,
      var(--night);
  }
}

.venue .eyebrow { position: relative; color: var(--turmeric); font-size: clamp(.85rem, 3.4vw, 1.05rem); letter-spacing: .34em; }

.venue__stars {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff8, transparent),
    radial-gradient(1px 1px at 78% 12%, #fff9, transparent),
    radial-gradient(1.5px 1.5px at 64% 32%, #fffa, transparent),
    radial-gradient(1px 1px at 30% 70%, #fff7, transparent),
    radial-gradient(1px 1px at 88% 64%, #fff8, transparent),
    radial-gradient(1.5px 1.5px at 22% 42%, #fff9, transparent),
    radial-gradient(1px 1px at 50% 86%, #fff6, transparent),
    radial-gradient(1px 1px at 92% 88%, #fff7, transparent),
    radial-gradient(1px 1px at 6% 90%, #fff6, transparent);
  animation: twinkle 6s ease-in-out infinite alternate;
}

@keyframes twinkle { from { opacity: .5; } to { opacity: 1; } }

.venue__name {
  position: relative;
  margin-top: 1.4rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3.4rem, 17vw, 11rem);
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--cream);
}

.venue__addr { position: relative; margin-top: 1.8rem; font-family: var(--mono); font-size: clamp(.8rem, 3.2vw, .95rem); letter-spacing: .18em; text-transform: uppercase; line-height: 2; color: rgba(246, 238, 221, .75); }
.venue__note { position: relative; margin: 2.2rem auto 0; max-width: 20rem; font-style: italic; font-size: 1.1rem; }

/* ---------- RSVP ---------- */

.rsvp { padding: 20svh var(--gutter) 16svh; text-align: center; background: var(--paper); }

.faces { display: flex; justify-content: center; gap: 1rem; margin: 3.5rem auto 0; max-width: 34rem; }

.face { width: min(44vw, 15rem); }
.face--her { --r: -5deg; }
.face--him { --r: 4deg; margin-top: 2.6rem; }

.face img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 15%;
  border-radius: 50%;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px rgba(191, 149, 59, .45), 0 18px 40px -18px rgba(42, 36, 32, .45);
  background: #fff;
}

.face figcaption { margin-top: 1rem; font-style: italic; font-size: 1rem; line-height: 1.3; color: var(--ink-soft); }


/* ---------- RSVP form ---------- */

.rsvp-form, .rsvp-done {
  max-width: 26rem;
  margin: 4.5rem auto 0;
  text-align: left;
}

.rsvp-form .eyebrow { text-align: center; margin-bottom: 2rem; }

.field { display: block; }

.field__label {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field input {
  width: 100%;
  padding: .5rem 0 .6rem;
  border: 0;
  border-bottom: 1.5px solid rgba(42, 36, 32, .3);
  border-radius: 0;
  background: transparent;
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--ink);
  outline: none;
  transition: border-color .3s var(--ease);
}

/* keep browser autofill from painting the field blue */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 100px var(--paper) inset;
  transition: background-color 9999s;
}

.field input::placeholder { color: rgba(42, 36, 32, .28); font-style: italic; }
.field input:focus { border-bottom-color: var(--gold); }

.days { border: 0; margin-top: 2.2rem; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.days legend { grid-column: 1 / -1; padding: 0; }

.day input { position: absolute; opacity: 0; pointer-events: none; }

.day span {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 1rem 1.1rem;
  border: 1.5px solid rgba(191, 149, 59, .55);
  border-radius: 14px;
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.1;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.day small { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

.day input:checked + span { background: var(--gold); border-color: var(--gold); color: #fff; }
.day input:checked + span small { color: rgba(255, 255, 255, .85); }
.day input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.rsvp-form__error { min-height: 1.4em; margin-top: 1.2rem; font-size: .95rem; color: var(--laterite); }

.rsvp-form .btn { width: 100%; justify-content: center; margin-top: .6rem; }
.btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--solid:hover { background: var(--laterite); border-color: var(--laterite); }
.btn[disabled] { opacity: .55; pointer-events: none; }

.rsvp-done { text-align: center; }
.rsvp-done__line { font-family: var(--display); font-style: italic; font-size: clamp(2rem, 8vw, 2.8rem); line-height: 1.1; color: var(--laterite); }
.rsvp-done__sub { margin-top: .8rem; font-size: 1.1rem; color: var(--ink-soft); }

.link-btn {
  margin-top: 1rem;
  padding: .8rem 1rem; /* a comfortable thumb-sized target */
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ---------- End ---------- */

.end { padding: 10svh var(--gutter) 0; text-align: center; background: var(--paper); }
.end__art { max-height: 52svh; max-width: 100%; width: auto; margin: 0 auto; }
.end__line { margin-top: .4rem; font-style: italic; font-size: 1.15rem; }
.end__mono { margin: 3rem 0 1.4rem; font-family: var(--mono); font-size: .62rem; letter-spacing: .3em; color: var(--ink-soft); }
.end .kasavu { margin: 0 calc(var(--gutter) * -1); }

/* short phones: tighten the cover so everything still fits on the first screen */
@media (max-width: 899px) and (max-height: 700px) {
  .cover__kicker { margin-top: 2.5svh; }
  .cover__sub { margin-top: 1rem; }
  .cover { padding-bottom: 33svh; }
  .cover__fig { height: min(31svh, 360px); }
}

/* phones held sideways: give the cover room and use the side-by-side story layout */
@media (orientation: landscape) and (max-height: 500px) {
  .cover { padding-bottom: 6svh; }
  .cover__kicker { margin-top: 4svh; text-align: center; }
  .names { width: min(36rem, 60vw); margin: .5rem auto 0; }
  .names__one, .names__two { font-size: 9vw; }
  .names__amp { font-size: 6vw; }
  .names .ml { font-size: 2.6vw; }
  .cover__sub { margin: 1.2rem auto 0; text-align: center; max-width: 30rem; }
  .cover__fig { height: 78svh; }
  .cover__fig--him { left: 1vw; }
  .cover__fig--her { right: 1vw; }

  .panel { flex-direction: row; align-items: center; gap: 5vw; padding-top: 0; }
  .panel img { max-height: 70svh; max-width: 42vw; margin: 0; }
  .panel figcaption { margin-top: 0; }
  .panel__no { font-size: 3.4rem; }
}

/* ---------- Wider screens ---------- */

@media (min-width: 900px) {
  :root { --gutter: 4vw; }

  .cover { padding-bottom: 8svh; display: flex; flex-direction: column; }
  .cover__kicker { margin-top: 9svh; text-align: center; }
  .names { width: min(52rem, 52vw); margin: 1rem auto 0; }
  .names__one, .names__two { font-size: clamp(5rem, 8.6vw, 10rem); }
  .cover__sub { margin: 2rem auto 0; text-align: center; max-width: 32rem; }
  .cover__fig { height: min(64svh, 600px); }
  .cover__fig--him { left: 2vw; }
  .cover__fig--her { right: 2vw; }

  .reel__row { padding: 0 6vw; gap: 9vw; }
  .panel { width: auto; padding: 0; flex-direction: row; align-items: center; gap: 3vw; }
  .panel--title { width: 34vw; flex-direction: column; align-items: flex-start; }
  .panel img { max-height: 62svh; max-width: 34vw; margin: 0; }
  .panel figcaption { margin-top: 0; flex: 0 0 19rem; }

  .event__grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 5vw; }
  .event--wedding .event__art { order: 2; }
  .event__art { max-height: 78svh; }
  .event__word { font-size: 22vw; }

  .faces { gap: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .track { display: none; } /* the scroll film is all motion; skip straight to the story */
  .rise, .reveal, .cover__fig { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .cue i, .venue__stars { animation: none; }
}