/* ==========================================================================
   Aditya & Ankita — 22 October 2027 — Swan Lake Overlook, Dawsonville GA
   Two registers: DEEP (lake at dusk) for atmosphere, LIGHT (ivory) for
   anything a guest has to read or tap. The waterline is the seam between.
   ========================================================================== */

:root {
  /* lake */
  --deep:      #16241F;   /* deep lake green, the atmospheric ground */
  --deeper:    #0F1A16;
  --deep-soft: #1E3029;

  /* shore */
  --ivory:     #F6F4ED;   /* the functional ground */
  --paper:     #FFFFFF;
  --ink:       #1E2621;
  --muted:     #5A6259;   /* 5.7:1 on ivory */
  --hair:      #DFDBCF;

  /* royal accents */
  --gold:      #C6A664;   /* champagne — display + rules only */
  --gold-ink:  #7E6229;   /* 5.2:1 on ivory — for small gold text */
  --gold-lg:   #9A7B3A;   /* 3.5:1 — large text only */
  --scarlet:   #9E2B2B;   /* 6.3:1 on ivory */
  --scarlet-lt:#C24A42;   /* on deep */
  --amber:     #B4632A;   /* october foliage, used twice on the whole site */

  --display: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
  --sc:      'Marcellus SC', 'Marcellus', Georgia, serif;
  --body:    'Jost', 'Avenir Next', system-ui, sans-serif;

  --gut: clamp(20px, 5vw, 64px);
  --stack: clamp(56px, 9vw, 130px);
}

*, *::before, *::after { box-sizing: border-box; }

/* No global scroll-behavior. Smoothing is applied in JS only where it is
   wanted (the RSVP steps), so the wheel, Space and PageDown stay native. */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;          /* elders on phones: 18 floor, never 16 */
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- type ---------------------------------------------------------- */

.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .02em;
}

.eyebrow {
  font-family: var(--sc);
  font-size: 13px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0;
}
.deep .eyebrow { color: var(--gold); }

h1, h2, h3 { margin: 0; font-weight: 400; }

h2.section-title {
  font-family: var(--display);
  font-size: clamp(34px, 5.5vw, 62px);
  line-height: 1.05;
  letter-spacing: .01em;
  margin: 14px 0 0;
}

.lede { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.6; max-width: 34ch; }

/* ---------- the signature: a waterline, and what it reflects -------------- */
/* Swan Lake. Still water mirrors. Used in exactly three places: the hero's
   lower edge, each section title, and the swan mark. Nowhere else.          */

.mirror { position: relative; display: inline-block; }
.mirror::after {
  content: attr(data-mirror);
  position: absolute;
  left: 0; top: 100%;
  transform: scaleY(-1);
  transform-origin: top;
  color: inherit;
  opacity: .12;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
  white-space: nowrap;
}

.waterline {
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(420px, 78vw);
  margin-inline: auto;
}
.waterline::before, .waterline::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.waterline::after { background: linear-gradient(90deg, var(--gold), transparent); }

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

.hero { position: relative; height: 150vh; background: var(--deep); }
@media (max-width: 760px) { .hero { height: 135vh; } }

.hero__stage {
  position: sticky; top: 0;
  height: 100dvh;                 /* never 100vh — iOS toolbar */
  overflow: hidden;
  background: var(--deeper) url('img/hero-blur.jpg') center/cover no-repeat;
}

.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 74% 46%;
  will-change: transform;
}

.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,26,22,.46) 0%, rgba(15,26,22,0) 30%),
    linear-gradient(0deg,  rgba(11,20,17,.92) 0%, rgba(11,20,17,.55) 26%, rgba(11,20,17,0) 62%),
    linear-gradient(100deg, rgba(11,20,17,.62) 0%, rgba(11,20,17,.12) 46%, transparent 68%);
}
.hero__dim { position: absolute; inset: 0; background: var(--deeper); opacity: 0; }

.hero__type {
  position: absolute;
  left: var(--gut); right: var(--gut); bottom: clamp(64px, 12vh, 132px);
  text-align: left;
  color: var(--ivory);
}

.hero__pre {
  font-family: var(--sc);
  font-size: clamp(11px, 1.5vw, 14px);
  letter-spacing: .38em;
  text-transform: uppercase;
  color: rgba(246,244,237,.86);
  margin: 0 0 clamp(18px, 3vh, 30px);
}

.hero__names {
  font-family: var(--display);
  font-size: clamp(46px, 8.4vw, 118px);
  line-height: .96;
  letter-spacing: .06em;
  color: var(--gold);
  text-shadow: 0 2px 26px rgba(9,16,13,.55);
  margin: 0;
}
.hero__amp {
  display: block;
  font-family: var(--display);
  font-size: clamp(15px, 2.4vw, 25px);
  letter-spacing: .44em;
  color: rgba(246,244,237,.88);
  margin: clamp(6px, 1.2vh, 14px) 0 clamp(6px, 1.2vh, 14px) .12em;
  text-transform: lowercase;
}
.hero__when {
  font-family: var(--sc);
  font-size: clamp(12px, 1.7vw, 16px);
  letter-spacing: .3em;
  text-transform: uppercase;
  margin: clamp(22px, 4vh, 40px) 0 0;
  color: rgba(246,244,237,.94);
}

.hero__cue {
  position: absolute; right: var(--gut); bottom: 26px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.hero__cue span {
  font-family: var(--sc); font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(246,244,237,.6);
}
.hero__cue i { width: 1px; height: 26px; background: linear-gradient(var(--gold), transparent); }

/* the reflection band — the hero photo, mirrored into the lake */
.reflect { position: relative; height: clamp(120px, 20vh, 220px); overflow: hidden; background: var(--deep); }
.reflect img {
  position: absolute; left: 0; top: -70%;
  width: 100%; height: 170%;
  object-fit: cover; object-position: 50% 42%;
  filter: blur(6px) saturate(.72) brightness(.5);
  transform: scaleY(-1) translateZ(0);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 78%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 78%);
}
.reflect::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, rgba(22,36,31,0) 0 9px, rgba(22,36,31,.16) 9px 11px);
}
.seam { height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold) 78%, transparent); opacity: .7; }

/* ---------- sections ------------------------------------------------------ */

.deep { background: var(--deep); color: var(--ivory); }
.deep .lede, .deep p { color: rgba(246,244,237,.82); }

.wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--stack); }

.swan { display: block; margin-inline: auto; }
.swan path { fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.swan .refl { opacity: .28; }

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

.story { display: grid; gap: clamp(32px, 6vw, 72px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .story { grid-template-columns: 1fr 0.82fr; } }

.plate {
  position: relative;
  border: 1px solid rgba(198,166,100,.42);
  padding: 10px;
}
.plate::after {
  content: ''; position: absolute; inset: 4px;
  border: 1px solid rgba(198,166,100,.22);
  pointer-events: none;
}
.plate img { width: 100%; height: auto; }

/* ---------- cards --------------------------------------------------------- */

.card {
  background: var(--paper);
  border: 1px solid var(--hair);
  padding: clamp(20px, 3vw, 30px);
}
.deep .card { background: var(--deep-soft); border-color: rgba(198,166,100,.26); }

.qa { border-top: 1px solid var(--hair); }
.qa summary {
  list-style: none; cursor: pointer;
  padding: 22px 42px 22px 0;
  position: relative;
  font-family: var(--display); font-size: clamp(20px, 2.4vw, 25px);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ''; position: absolute; right: 6px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 1px solid var(--gold-lg); border-bottom: 1px solid var(--gold-lg);
  transform: rotate(45deg); transition: transform .28s ease;
}
.qa[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.qa p { margin: 0 0 22px; color: var(--muted); max-width: 62ch; }

/* ---------- buttons & fields ---------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 32px;
  font-family: var(--sc); font-size: 14px; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--gold  { background: var(--gold); color: #241C08; }
.btn--gold:hover  { background: #D4B678; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--ivory); }
.deep .btn--ghost { color: var(--ivory); border-color: rgba(246,244,237,.55); }
.deep .btn--ghost:hover { background: var(--ivory); color: var(--deep); }
.btn--wide { width: 100%; }

.field { display: block; margin-bottom: 20px; }
.field > span {
  display: block; font-family: var(--sc); font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
}
.input {
  width: 100%; min-height: 58px; padding: 0 16px;
  font-family: var(--body); font-size: 18px; font-weight: 300;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--hair); border-radius: 0;
}
.input:focus { border-color: var(--gold-lg); }
textarea.input { padding: 14px 16px; min-height: 96px; resize: vertical; }

.choice { display: flex; gap: 12px; flex-wrap: wrap; }
.choice button {
  flex: 1 1 0; min-width: 118px; min-height: 58px;
  font-family: var(--sc); font-size: 14px; letter-spacing: .16em; text-transform: uppercase;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--hair); cursor: pointer;
  transition: all .18s ease;
}
.choice button[aria-pressed="true"] { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.choice button:hover { border-color: var(--gold-lg); }

.pill {
  display: inline-block; padding: 5px 13px;
  font-family: var(--sc); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-ink); border: 1px solid rgba(198,166,100,.55);
}
.deep .pill { color: var(--gold); }

/* ---------- topbar & footer ------------------------------------------------ */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gut);
  background: var(--ivory);
  border-bottom: 1px solid var(--hair);
}
.topbar__mark { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.topbar__mark b { font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: .18em; }
.topbar nav { display: none; gap: 30px; }
@media (min-width: 860px) { .topbar nav { display: flex; } }
.topbar nav a {
  font-family: var(--sc); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; color: var(--muted);
}
.topbar nav a:hover { color: var(--gold-ink); }

.foot { background: var(--deeper); color: rgba(246,244,237,.6); text-align: center; padding: var(--stack) var(--gut); }
.foot .display { color: var(--gold); font-size: clamp(26px, 4vw, 40px); letter-spacing: .14em; }

/* ---------- utility -------------------------------------------------------- */

.center { text-align: center; }
.stack-sm > * + * { margin-top: 14px; }
.stack-md > * + * { margin-top: 26px; }
.note { font-size: 15px; color: var(--muted); }
.deep .note { color: rgba(246,244,237,.6); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- scroll-driven hero (progressive enhancement) ------------------- */

@keyframes heroZoom  { to { transform: scale(1.065) translateY(-3%); } }
@keyframes typeRise  { 0%,15% { transform: none; opacity: 1; } 100% { transform: translateY(-76px); opacity: 0; } }
@keyframes cueFade   { 0% { opacity: 1; } 12%,100% { opacity: 0; } }
@keyframes dimIn     { 0%,45% { opacity: 0; } 100% { opacity: .55; } }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__img   { animation: heroZoom linear both; animation-timeline: scroll(root block); animation-range: 0 50vh; }
    .hero__type  { animation: typeRise linear both; animation-timeline: scroll(root block); animation-range: 0 42vh; }
    .hero__cue   { animation: cueFade  linear both; animation-timeline: scroll(root block); animation-range: 0 42vh; }
    .hero__dim   { animation: dimIn    linear both; animation-timeline: scroll(root block); animation-range: 0 50vh; }
    @media (max-width: 760px) {
      .hero__img { animation-range: 0 35vh; }
      .hero__type, .hero__cue { animation-range: 0 30vh; }
      .hero__dim { animation-range: 0 35vh; }
    }
  }
}

/* JS fallback (Firefox today) writes --p, 0 → 1 */
.js-parallax .hero__img  { transform: scale(calc(1 + .065 * var(--p, 0))) translateY(calc(-3% * var(--p, 0))); }
.js-parallax .hero__type { transform: translateY(calc(-76px * var(--t, 0))); opacity: calc(1 - var(--t, 0)); }
.js-parallax .hero__dim  { opacity: calc(.55 * var(--d, 0)); }

.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s cubic-bezier(.22,.7,.3,1); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .js-parallax .hero__img, .js-parallax .hero__type { transform: none; opacity: 1; }
  .hero { height: auto; }
  .hero__stage { position: static; height: 86vh; }
}

/* Hero composition: the photo crops vertically on wide screens and
   horizontally on narrow ones, so the type claims the left column at every
   size and the couple is pushed right of it. */
@media (min-width: 900px) {
  .hero__type { max-width: min(58%, 30ch); bottom: clamp(96px, 16vh, 190px); }
  .hero__img  { object-position: 62% 48%; }
}
@media (max-width: 899px) {
  .hero__img  { object-position: 63% 40%; }
  .hero__type { max-width: 80%; }
}

.deep .mirror::after { opacity: .2; }

/* the swan mark, at a size where it actually reads as a swan */
.swan { width: clamp(112px, 11vw, 152px); height: auto; }

/* ==========================================================================
   Ornament — small, deliberate nods, not wallpaper.
   Alpona (Bengali, rice paste at the threshold) welcomes you in, once.
   Pattachitra (Odia, palm-leaf painting) petal-arcade rules divide sections.
   Pasapalli (Sambalpuri ikat chessboard) is the divider mark and the finial.
   ========================================================================== */

.orn-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the threshold band — drawn where a guest crosses into the site */
.alpona { display: block; width: 100%; height: clamp(38px, 5vw, 56px); }
.alpona--dark { background: var(--deep); }

/* pattachitra petal-arcade rule */
.rule-patta { display: block; width: 100%; height: 22px; opacity: .85; }
.rule-patta--flip { transform: scaleY(-1); }

/* pasapalli mark */
.pasa { width: 22px; height: 22px; flex: none; }

.waterline--orn { width: min(520px, 86vw); gap: 14px; }

/* torana — the cusped arch over the one place we ask for something */
.torana { position: relative; padding-top: clamp(132px, 17vw, 210px); }
.torana__arch {
  position: absolute; top: clamp(22px, 3.4vw, 46px); left: 50%; transform: translateX(-50%);
  width: min(560px, 92%); height: auto; pointer-events: none;
}

/* ornate plate: double rule plus corner ticks, for photographs */
.plate--orn { padding: 13px; border-color: rgba(198,166,100,.5); }
.plate--orn::before {
  content: ''; position: absolute; inset: -7px;
  border: 1px solid rgba(158,43,43,.22); pointer-events: none;
}
.plate__tick { position: absolute; width: 17px; height: 17px; pointer-events: none; }
.plate__tick--tl { top: -3px;    left: -3px;  border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.plate__tick--tr { top: -3px;    right: -3px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); }
.plate__tick--bl { bottom: -3px; left: -3px;  border-bottom: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.plate__tick--br { bottom: -3px; right: -3px; border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); }

/* cards get a quiet gold top edge and a scarlet seed */
.card--orn { position: relative; border-top: 2px solid var(--gold); }
.card--orn::after {
  content: ''; position: absolute; top: -5px; left: 50%; width: 8px; height: 8px;
  margin-left: -4px; background: var(--scarlet); transform: rotate(45deg);
}

/* the story beats */
.beat { max-width: 62ch; }
.beat + .beat { margin-top: clamp(30px, 4vw, 48px); }
.beat__label {
  font-family: var(--sc); font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--scarlet); margin: 0 0 12px;
}
.beat p { margin: 0 0 16px; }
.beat p:last-child { margin-bottom: 0; }

.drop::first-letter {
  float: left; font-family: var(--display); font-size: 3.4em; line-height: .84;
  padding: 6px 12px 0 0; color: var(--gold-lg);
}