/* ══════════════════════════════════════════════════════════════════════════
   Ava & Thomas — demo wedding site
   Palette is deliberately quiet: warm ivory and espresso, sage and muted gold.
   All the colour in this page comes from the footage, so the chrome stays out
   of its way. That contrast is what stops a cream page reading as bland.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --cream:      #F7F2E8;
  --cream-warm: #EFE6D6;
  --espresso:   #2F2820;
  --espresso-2: #3D342A;
  --ink:        #37302A;
  --ink-soft:   #6B6055;
  --sage:       #8B9179;
  --gold:       #B08D57;
  --line:       rgba(55, 48, 42, .16);
  --line-light: rgba(247, 242, 232, .22);

  --f-script: 'Parisienne', cursive;
  --f-serif:  'Cormorant Garamond', Georgia, serif;
  --f-sans:   'Jost', system-ui, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-serif);
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height: 1.75;
  font-weight: 300;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }

/* ── type ─────────────────────────────────────────────────────────────── */
.script {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: clamp(2.8rem, 1.6rem + 5vw, 5.5rem);
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}
.script--light { color: var(--cream); }

.eyebrow {
  font-family: var(--f-sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}
.eyebrow--light { color: rgba(247, 242, 232, .62); }

.lede { max-width: 44ch; margin: 1.6rem auto 0; color: var(--ink-soft); }
.lede--small { font-size: .95em; }
.lede--light { color: rgba(247, 242, 232, .72); }

h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: .01em;
  margin: 0 0 .4rem;
}

/* ── layout ───────────────────────────────────────────────────────────── */
.wrap { width: min(1120px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { width: min(720px, 100%); text-align: center; }

.section { padding: clamp(5rem, 10vw, 9rem) 0; position: relative; }
.section--tight { padding-top: 0; }
.section--cream { background: var(--cream); }
.section--deep  { background: var(--espresso); color: var(--cream); }
.section--deep h3 { color: var(--cream); }

.section__head { text-align: center; margin-bottom: clamp(3rem, 6vw, 5rem); }

.sprig { width: 58px; color: var(--sage); margin: 0 auto 1.5rem; display: block; }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  margin-top: 2.2rem;
  padding: .95rem 2.4rem;
  font-family: var(--f-sans);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--solid {
  background: var(--cream); color: var(--espresso); border-color: var(--cream);
  width: 100%; margin-top: 1rem;
}
.btn--solid:hover { background: var(--gold); border-color: var(--gold); color: var(--espresso); }

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 60;
  display: flex; align-items: center; gap: 2rem;
  padding: 1.1rem var(--gutter);
  font-family: var(--f-sans);
  /* starts invisible over the film and fades in once the hero is behind you */
  opacity: 0; pointer-events: none;
  background: rgba(247, 242, 232, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: opacity .6s var(--ease);
}
.nav.is-on { opacity: 1; pointer-events: auto; }
.nav__mark { font-family: var(--f-script); font-size: 1.6rem; color: var(--ink); text-decoration: none; }
.nav__links { display: flex; gap: 1.9rem; margin-left: auto; }
.nav__links a, .nav__cta {
  font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; transition: color .35s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__cta { color: var(--ink); border-bottom: 1px solid var(--gold); padding-bottom: 3px; }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }
.nav__toggle span { display: block; width: 22px; height: 1px; background: var(--ink); margin: 5px 0; }

.menu {
  position: fixed; inset: 0; z-index: 55;
  background: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
  font-family: var(--f-sans); font-size: .8rem; letter-spacing: .3em; text-transform: uppercase;
}
/* `display:flex` above outranks the hidden attribute's own display:none, so the
   overlay would otherwise sit over the whole page. Restore it explicitly. */
.menu[hidden] { display: none; }
.menu a { color: var(--ink); text-decoration: none; }

/* ── hero ─────────────────────────────────────────────────────────────── */
/* A tall spacer holds a sticky viewport; scroll distance inside the spacer is
   mapped to the film's currentTime, so the thumb drives the camera. */
/* Scroll distance mapped to the 10s clip. More height = slower, heavier scrub.
   600vh of travel over ten seconds is roughly a minute of unhurried scrolling,
   which is what you want when the page is being filmed. */
.hero { height: 700vh; position: relative; background: var(--espresso); }
.hero__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.hero__video, .hero__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.hero__poster { transition: opacity .6s var(--ease); }
.hero__poster.is-hidden { opacity: 0; }
.hero__copy {
  position: absolute; left: 0; right: 0; bottom: clamp(5.5rem, 14vh, 9rem);
  text-align: center; padding-inline: var(--gutter); color: var(--cream);
}
.hero__copy .eyebrow { color: rgba(247, 242, 232, .74); }
.hero__names { color: var(--cream); text-shadow: 0 2px 40px rgba(0,0,0,.34); }

/* Every hero line writes itself as you scroll. An ink edge sweeps left to right,
   which reads as handwriting because that is the direction and order the letters
   would actually be written in. --write (0..1) comes from the scroll handler, and
   the two stops give the edge a soft feather so it looks like ink arriving rather
   than a hard wipe.
   inline-block matters: on a block element the mask would span the full centred
   container and the text would simply fade up in the middle instead of sweeping. */
.writes {
  --write: 0;
  display: inline-block;
  padding-inline: .12em;          /* room for flourishes the mask would clip */
  -webkit-mask-image: linear-gradient(90deg,
    #000 calc(var(--write) * 118% - 9%),
    transparent calc(var(--write) * 118% + 1%));
  mask-image: linear-gradient(90deg,
    #000 calc(var(--write) * 118% - 9%),
    transparent calc(var(--write) * 118% + 1%));
}
/* the rule is a flex row, so it needs the inline variant to hug its content */
.hero__rule.writes { display: inline-flex; }
.hero__rule {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  color: rgba(247, 242, 232, .6); font-size: .7rem; margin: 1.2rem 0 1.4rem;
}
.hero__rule span { width: clamp(40px, 12vw, 110px); height: 1px; background: var(--line-light); }
.hero__meta {
  font-family: var(--f-sans); font-size: .74rem; letter-spacing: .3em;
  text-transform: uppercase; margin: 0; color: rgba(247, 242, 232, .88);
}
.hero__meta--soft { margin-top: .5rem; color: rgba(247, 242, 232, .55); }

/* staged entrance */
[data-fade] { opacity: 0; transform: translateY(14px); animation: rise 1.4s var(--ease) forwards; }
[data-fade="1"] { animation-delay: .25s; }
[data-fade="2"] { animation-delay: .5s; }
[data-fade="3"] { animation-delay: .8s; }
@keyframes rise { to { opacity: 1; transform: none; } }

.hero__hint {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 1.4rem;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  font-family: var(--f-sans); font-size: .6rem; letter-spacing: .34em;
  text-transform: uppercase; color: rgba(247, 242, 232, .6);
  transition: opacity .6s var(--ease);
}
.hero__hint i { width: 1px; height: 34px; background: var(--line-light); animation: drop 2.4s var(--ease) infinite; }
@keyframes drop { 0%,100% { transform: scaleY(.3); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }
.hero__hint.is-gone { opacity: 0; }

/* ── the bloom: a framed picture, pinned and scrubbed ─────────────────── */
/* Same pinned-scrub mechanic as the hero, but the opposite treatment: the hero
   is edge-to-edge film, this one is an object hanging on a wall. The contrast
   is the point — full-bleed, then a framed painting, then the page proper. */
.bloom { height: 460vh; position: relative; background: var(--cream-warm); }
.bloom__sticky {
  position: sticky; top: 0; height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(5rem, 11vh, 7rem) var(--gutter) clamp(2rem, 5vh, 3rem);
  /* a faint wash so the frame reads as sitting on a wall, not floating on flat paper */
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(255,255,255,.55), transparent 62%),
    var(--cream-warm);
}
/* picture on the left, copy on the right */
.bloom__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  width: 100%; max-width: 1240px;
}
.bloom__text { text-align: left; }
.bloom__text .script { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.2rem); }
.bloom__text .eyebrow { margin-bottom: .6rem; }
.bloom__text .lede { margin: 1.4rem 0 0; max-width: 34ch; }
.bloom__note {
  margin: 1.6rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-family: var(--f-sans); font-size: .62rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* The frame. Built from three nested layers so it reads as a real object:
   a gilt moulding with a bevel, a deep white mat, and the picture window. */
/* figure holds the moulding plus the caption; only .frame carries the gilt, or
   the caption ends up printed on the bottom edge of the frame itself */
.framed { margin: 0; width: 100%; }
.frame {
  padding: clamp(.7rem, 1.6vw, 1.1rem);
  background:
    linear-gradient(135deg, #E4C89A 0%, #B8935A 18%, #F0DCB4 38%,
                            #A9803F 58%, #DCC08F 78%, #B08D57 100%);
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(255,246,224,.55),          /* highlight along the moulding */
    inset 0 2px 3px rgba(255,255,255,.5),
    inset 0 -2px 4px rgba(90,64,26,.45),            /* shaded lower edge */
    0 2px 4px rgba(47,40,32,.2),
    0 26px 60px -12px rgba(47,40,32,.45),           /* the frame's shadow on the wall */
    0 60px 90px -40px rgba(47,40,32,.35);
}
.frame__mat {
  background: #FBF7EF;
  padding: clamp(.9rem, 2.6vw, 2.2rem);
  box-shadow:
    inset 0 0 0 1px rgba(47,40,32,.1),
    inset 0 3px 9px rgba(47,40,32,.16);             /* mat sits below the moulding */
}
.frame__window {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--espresso);
  box-shadow: 0 0 0 1px rgba(47,40,32,.22), inset 0 2px 12px rgba(47,40,32,.3);
}
.frame__video, .frame__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.frame__poster { transition: opacity .6s var(--ease); }
.frame__poster.is-hidden { opacity: 0; }
.framed figcaption {
  margin-top: clamp(1rem, 2.4vh, 1.6rem); text-align: center;
  font-family: var(--f-sans); font-size: .62rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* ── countdown ────────────────────────────────────────────────────────── */
.countdown { text-align: center; padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.clock { display: flex; justify-content: center; gap: clamp(1.5rem, 6vw, 5rem); flex-wrap: wrap; }
.clock__unit b {
  display: block; font-family: var(--f-serif); font-weight: 300;
  font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.2rem); line-height: 1;
  color: var(--cream); font-variant-numeric: tabular-nums;
}
.clock__unit span {
  display: block; margin-top: .7rem; font-family: var(--f-sans);
  font-size: .6rem; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(247, 242, 232, .5);
}

/* ── timeline ─────────────────────────────────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
/* the hairline the whole story hangs from */
.timeline::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--line);
}
.timeline__item {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(2rem, 6vw, 5rem); margin-bottom: clamp(3.5rem, 8vw, 6rem);
}
.timeline__item:nth-child(even) .polaroid { order: 2; }
.timeline__item:nth-child(even) .timeline__text { order: 1; text-align: right; }
.timeline__text .year {
  font-family: var(--f-sans); font-size: .68rem; letter-spacing: .34em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 .6rem;
}
.timeline__text p:not(.year) { color: var(--ink-soft); margin: 0; max-width: 38ch; }
.timeline__item:nth-child(even) .timeline__text p:not(.year) { margin-left: auto; }

.polaroid {
  margin: 0; padding: .75rem .75rem 3.2rem; background: #fff;
  box-shadow: 0 18px 46px rgba(47, 40, 32, .16);
  position: relative; max-width: 380px;
}
.polaroid--tilt-l { transform: rotate(-2.2deg); }
.polaroid--tilt-r { transform: rotate(2deg); margin-left: auto; }
.polaroid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.polaroid figcaption {
  position: absolute; left: 0; right: 0; bottom: 1rem; text-align: center;
  font-family: var(--f-script); font-size: 1.5rem; color: var(--ink-soft);
}
/* a strip of tape, because the reference leans scrapbook */
.polaroid::before {
  content: ""; position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-1.5deg);
  width: 92px; height: 26px; background: rgba(176, 141, 87, .18);
  border-left: 1px solid rgba(176,141,87,.2); border-right: 1px solid rgba(176,141,87,.2);
}

/* ── schedule ─────────────────────────────────────────────────────────── */
.schedule { list-style: none; margin: 0 auto; padding: 0; max-width: 660px; }
.schedule li {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: clamp(1.2rem, 3vw, 2.5rem);
  padding: 1.9rem 0; border-top: 1px solid var(--line-light); align-items: baseline;
}
.schedule li:last-child { border-bottom: 1px solid var(--line-light); }
.schedule b {
  font-family: var(--f-sans); font-weight: 300; font-size: .82rem;
  letter-spacing: .18em; color: var(--gold); font-variant-numeric: tabular-nums;
}
.schedule p { margin: 0; color: rgba(247, 242, 232, .62); font-size: .96rem; }

/* ── cards ────────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.card { padding: 2.4rem 2rem; background: var(--cream-warm); border: 1px solid var(--line); }
.card__label {
  font-family: var(--f-sans); font-size: .62rem; letter-spacing: .32em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 1rem;
}
.card p:not(.card__label) { color: var(--ink-soft); margin: 0; font-size: .98rem; }

/* ── faq ──────────────────────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(2rem, 5vw, 4rem); }
.qa { padding-bottom: 1.8rem; margin-bottom: 1.8rem; border-bottom: 1px solid var(--line); }
.qa:last-child { border-bottom: 0; }
.qa p { margin: 0; color: var(--ink-soft); font-size: .98rem; }

/* ── form ─────────────────────────────────────────────────────────────── */
.form { display: grid; gap: 1.5rem; text-align: left; margin-top: 2.5rem; }
.form label {
  display: block; font-family: var(--f-sans); font-size: .64rem;
  letter-spacing: .3em; text-transform: uppercase; color: rgba(247, 242, 232, .58);
}
.form input[type=text], .form input[type=email], .form textarea {
  width: 100%; margin-top: .7rem; padding: .95rem 1rem;
  background: rgba(247, 242, 232, .06); color: var(--cream);
  border: 1px solid var(--line-light); border-radius: 0;
  font-family: var(--f-serif); font-size: 1rem; letter-spacing: 0; text-transform: none;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.form input:focus, .form textarea:focus {
  outline: none; border-color: var(--gold); background: rgba(247, 242, 232, .1);
}
.form fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 2rem; flex-wrap: wrap; }
.form legend {
  font-family: var(--f-sans); font-size: .64rem; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(247, 242, 232, .58); margin-bottom: .9rem;
}
.radio { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.radio span { font-family: var(--f-serif); font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--cream); }
.radio input { accent-color: var(--gold); }
.form__done { font-family: var(--f-script); font-size: 1.7rem; color: var(--gold); text-align: center; margin: .5rem 0 0; }

/* ── footer ───────────────────────────────────────────────────────────── */
.footer { background: var(--espresso-2); color: var(--cream); text-align: center; padding: 4rem var(--gutter); }
.footer__mark { font-size: 2.6rem; margin: 0; }
.footer__meta {
  font-family: var(--f-sans); font-size: .64rem; letter-spacing: .32em;
  text-transform: uppercase; color: rgba(247, 242, 232, .45); margin: 1rem 0 0;
}

/* ── scroll reveals ───────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; margin-left: auto; }
  .hero { height: 520vh; }
  .timeline::before { left: 18px; }
  .timeline__item { grid-template-columns: 1fr; gap: 1.6rem; padding-left: 44px; }
  .timeline__item:nth-child(even) .polaroid,
  .timeline__item:nth-child(even) .timeline__text { order: unset; text-align: left; }
  .timeline__item:nth-child(even) .timeline__text p:not(.year) { margin-left: 0; }
  .polaroid, .polaroid--tilt-r { margin-left: 0; transform: rotate(-1.2deg); }
  .bloom { height: 380vh; }
  .bloom__inner { grid-template-columns: 1fr; gap: 1.6rem; }
  .bloom__text { text-align: center; }
  .bloom__text .lede { margin-inline: auto; }
  .schedule li { grid-template-columns: 4.5rem 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, [data-fade] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero { height: 100svh; }
  .hero__hint i { animation: none; }
}

/* film download indicator: sits above the scroll hint until the first frame paints */
.hero__load { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; color: rgba(255,255,255,.88); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; transition: opacity .6s var(--ease); pointer-events: none; z-index: 3; }
.hero__load b { font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.hero__load i { display: block; width: 160px; height: 1px; background: rgba(255,255,255,.28); overflow: hidden; }
.hero__load i em { display: block; height: 100%; width: 100%; background: rgba(255,255,255,.9); transform: scaleX(0); transform-origin: left; transition: transform .2s linear; }
.hero__load.is-gone { opacity: 0; }