/* ═══════════════════════════════════════════════════════════════
   Angela · Lato Trzydziestki
   Art Nouveau Editorial · Summer Botanical
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* —— palette ————————————————————————————————— */
  --cream:        #f7efdd;
  --cream-deep:   #f1e6cc;
  --ivory:        #fdf8ec;
  --ivory-warm:   #faf3e3;
  --blush:        #f1d4c7;
  --blush-deep:   #e8c5b6;
  --rose-dust:    #d99a8c;
  --terracotta:   #c47356;
  --peach:        #f5b78f;
  --butter:       #f0d68c;
  --sage:         #9aae8e;
  --olive:        #5e6e4a;
  --moss:         #4a5638;
  --wisteria:     #a89bc4;
  --coral:        #e89a83;
  --honey:        #d4a574;
  --powder:       #b8d0d8;
  --charcoal:     #4a4438;
  --ink:          #2c2622;
  --ink-soft:     #4a3f33;
  --shadow:       #1a1612;
  --gold:         #b08850;
  --gold-deep:    #8c6b3d;

  /* —— type ————————————————————————————————————— */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'EB Garamond', Georgia, serif;
  --font-script:  'Italianno', cursive;

  /* —— motion ——————————————————————————————————— */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bloom: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--ink);
  background: var(--ivory);
  background-image:
    radial-gradient(ellipse at top left, rgba(232, 197, 182, 0.20), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(154, 174, 142, 0.15), transparent 55%),
    linear-gradient(180deg, var(--ivory) 0%, var(--cream) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  max-width: 100vw;
  position: relative;
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

section { overflow-x: clip; }

img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; text-decoration: none; }

/* skip helper */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ─── containers ──────────────────────────────────────────── */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); }
.container--narrow { max-width: 760px; }

/* ─── grain overlay ───────────────────────────────────────── */
.grain {
  position: fixed; inset: 0; z-index: 1000; pointer-events: none;
  opacity: 0.45; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.15  0 0 0 0 0.1  0 0 0 0.18 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* ─── falling petals ──────────────────────────────────────── */
.petals { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.petal {
  position: absolute;
  width: 22px; height: 22px;
  opacity: 0.7;
  will-change: transform;
  animation: petal-fall var(--dur, 18s) linear infinite;
  animation-delay: var(--delay, 0s);
  filter: drop-shadow(0 2px 4px rgba(74, 56, 32, 0.12));
}
.petal svg { width: 100%; height: 100%; display: block; }

@keyframes petal-fall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg) scale(0.85); opacity: 0; }
  10%  { opacity: 0.75; }
  50%  { transform: translate3d(calc(var(--drift, 80px) * 0.5), 50vh, 0) rotate(180deg) scale(1); }
  90%  { opacity: 0.65; }
  100% { transform: translate3d(var(--drift, 80px), 110vh, 0) rotate(540deg) scale(0.85); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════ */
/*  TYPOGRAPHY HELPERS                                          */
/* ════════════════════════════════════════════════════════════ */

.eyebrow {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(12px, 1.05vw, 14px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: clamp(28px, 5vw, 48px);
}
.eyebrow--light { color: var(--peach); }
.eyebrow .rule { flex: 0 0 38px; height: 1px; background: currentColor; opacity: 0.7; }
.eyebrow .rule--short { flex-basis: 28px; }

.rule { display: inline-block; }


/* ════════════════════════════════════════════════════════════ */
/*  HERO                                                        */
/* ════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(20px, 5vh, 50px) 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse at 25% 30%, rgba(245, 183, 143, 0.25), transparent 60%),
    radial-gradient(ellipse at 75% 80%, rgba(168, 200, 216, 0.18), transparent 55%),
    linear-gradient(135deg, var(--ivory-warm) 0%, var(--cream-deep) 100%);
}

.hero__wisteria {
  position: absolute;
  width: clamp(140px, 18vw, 280px);
  height: auto;
  pointer-events: none;
  opacity: 0.85;
  transform-origin: top center;
  animation: wisteria-sway 9s ease-in-out infinite;
}
.hero__wisteria--left { top: -30px; left: -30px; }
.hero__wisteria--right {
  top: -30px; right: -30px;
  transform: scaleX(-1);
  animation-delay: -3s;
}

@keyframes wisteria-sway {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
.hero__wisteria--right { animation-name: wisteria-sway-r; }
@keyframes wisteria-sway-r {
  0%, 100% { transform: scaleX(-1) rotate(-2deg); }
  50%      { transform: scaleX(-1) rotate(2deg); }
}

.hero__layout {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
  z-index: 2;
}

/* portrait */
.hero__portrait {
  position: relative;
  animation: fade-rise 1.4s var(--ease-out) both;
}
.hero__portrait-frame {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 30px 60px -20px rgba(74, 56, 32, 0.35),
    0 12px 30px -10px rgba(74, 56, 32, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  transform: rotate(-1deg);
  transition: transform 1.2s var(--ease-out);
}
.hero__portrait-frame::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(74, 56, 32, 0.18) 100%);
  pointer-events: none;
}
.hero__portrait-img { width: 100%; height: auto; display: block; }
.hero__portrait-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle, rgba(245, 183, 143, 0.45), transparent 65%);
  filter: blur(40px);
  z-index: -1;
  animation: glow-pulse 6s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 0.9; transform: scale(1.05); }
}

.hero__portrait-caption {
  margin-top: 18px;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* text */
.hero__text {
  position: relative;
  text-align: left;
  animation: fade-rise 1.4s var(--ease-out) 0.3s both;
}

/* invitation label — the very first thing readers see */
.hero__label {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 18px;
  margin-bottom: clamp(14px, 2vw, 22px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 1.15vw, 16px);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--terracotta);
  border-top: 1px solid rgba(196, 115, 86, 0.5);
  border-bottom: 1px solid rgba(196, 115, 86, 0.5);
  background: linear-gradient(180deg, rgba(196, 115, 86, 0.04), rgba(196, 115, 86, 0.08));
}
.hero__label-mark {
  font-size: 0.85em;
  color: var(--gold-deep);
  font-weight: 400;
}

.hero__eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(12px, 1.05vw, 14px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: clamp(20px, 3vw, 32px);
}
.hero__eyebrow .rule { flex: 0 0 24px; height: 1px; background: currentColor; opacity: 0.7; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.5vw, 16px);
  margin-bottom: clamp(18px, 3vw, 30px);
}
.hero__title-name {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(80px, 13vw, 200px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  padding-bottom: 0.08em;
  background: linear-gradient(135deg, var(--ink) 0%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.hero__title-numeral {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(8px, 1.5vw, 18px);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(60px, 10vw, 150px);
  line-height: 1;
  color: var(--terracotta);
  letter-spacing: -0.04em;
}
.numeral-3 { font-style: italic; }
.numeral-0 {
  font-style: italic;
  display: inline-block;
  position: relative;
}
.numeral-0::after {
  content: "";
  position: absolute; left: 50%; bottom: -8%;
  width: 80%; height: 80%;
  transform: translateX(-50%);
  border: 1px solid var(--terracotta);
  border-radius: 50%;
  opacity: 0.18;
  pointer-events: none;
}

.hero__script {
  font-family: var(--font-script);
  font-size: clamp(38px, 5.5vw, 78px);
  line-height: 1;
  color: var(--terracotta);
  margin-bottom: clamp(20px, 3vw, 32px);
  transform: rotate(-2deg);
  transform-origin: left center;
}

.hero__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(17px, 1.7vw, 23px);
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: clamp(20px, 3vw, 32px);
  max-width: 36ch;
}

.hero__save {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding-top: 16px;
  border-top: 1px solid rgba(176, 136, 80, 0.45);
  display: inline-block;
}

/* scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: clamp(12px, 3vh, 30px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3;
  text-decoration: none;
  color: var(--ink-soft);
}
.hero__scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, transparent, var(--gold-deep));
  animation: scroll-bounce 2.4s ease-in-out infinite;
}
.hero__scroll-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  opacity: 0.7;
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(8px); opacity: 1; }
}

@keyframes fade-rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════ */
/*  MANIFESTO                                                   */
/* ════════════════════════════════════════════════════════════ */
.manifesto {
  padding: clamp(80px, 14vw, 180px) 0;
  text-align: center;
  position: relative;
}

.manifesto__display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5.5vw, 76px);
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: clamp(28px, 4vw, 50px);
  letter-spacing: -0.015em;
}
.manifesto__display em {
  font-style: italic;
  display: block;
  color: var(--terracotta);
}
.manifesto__display span {
  display: block;
  margin-top: 12px;
}

.manifesto__body {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.55vw, 22px);
  font-weight: 500;
  line-height: 1.75;
  color: var(--ink);
  max-width: 60ch;
  margin: 0 auto;
}
.manifesto__body p + p { margin-top: 1.2em; }

.ornament {
  display: block;
  width: clamp(140px, 20vw, 200px);
  height: auto;
  margin: clamp(40px, 6vw, 70px) auto 0;
  color: var(--olive);
}

/* ════════════════════════════════════════════════════════════ */
/*  COUNTDOWN                                                   */
/* ════════════════════════════════════════════════════════════ */
.countdown {
  padding: clamp(80px, 14vw, 160px) 0;
  background:
    radial-gradient(ellipse at top, rgba(196, 115, 86, 0.25), transparent 60%),
    linear-gradient(180deg, var(--charcoal) 0%, var(--shadow) 100%);
  color: var(--cream);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.countdown::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 15% 50%, rgba(245, 183, 143, 0.08), transparent 35%),
    radial-gradient(circle at 85% 30%, rgba(168, 155, 196, 0.08), transparent 35%);
  pointer-events: none;
}

.countdown__heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 300;
  color: var(--cream);
  margin-bottom: clamp(40px, 6vw, 70px);
  position: relative;
  z-index: 2;
}
.countdown__heading em {
  font-style: italic;
  color: var(--peach);
}

.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2.5vw, 36px);
  max-width: 900px;
  margin: 0 auto clamp(40px, 6vw, 60px);
  position: relative;
  z-index: 2;
}

.cd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(18px, 3vw, 32px) clamp(8px, 1.5vw, 20px);
  background: linear-gradient(180deg, rgba(247, 239, 221, 0.06), rgba(247, 239, 221, 0.02));
  border: 1px solid rgba(247, 239, 221, 0.15);
  border-radius: 4px;
  position: relative;
  backdrop-filter: blur(6px);
}
.cd-cell::before, .cd-cell::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--peach);
  opacity: 0.6;
}
.cd-cell::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.cd-cell::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.cd-cell__number {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(48px, 7vw, 100px);
  line-height: 1;
  color: var(--cream);
  letter-spacing: -0.03em;
  display: block;
  font-variant-numeric: tabular-nums;
}
.cd-cell__label {
  margin-top: clamp(8px, 1.5vw, 14px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(11px, 1.05vw, 14px);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--peach);
}

.countdown__date {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 26px);
  color: var(--cream);
  opacity: 0.9;
  position: relative;
  z-index: 2;
  letter-spacing: 0.04em;
}
.cd-colon {
  display: inline-block;
  animation: blink 1.4s ease-in-out infinite;
  color: var(--peach);
}
@keyframes blink {
  0%, 60%, 100% { opacity: 1; }
  30%           { opacity: 0.35; }
}

/* ════════════════════════════════════════════════════════════ */
/*  INTERLUDE — cinematic landscape break                       */
/* ════════════════════════════════════════════════════════════ */
.interlude {
  position: relative;
  min-height: clamp(440px, 75vh, 720px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.interlude__image {
  position: absolute;
  inset: -8% -2%;
  background-image: url("../images/angela_2.PNG");
  background-size: cover;
  background-position: center 30%;
  z-index: -2;
  will-change: transform;
  animation: interlude-zoom 22s ease-in-out infinite alternate;
  transform-origin: 35% 50%;
}

.interlude__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 65% 50%, rgba(74, 56, 32, 0.0) 30%, rgba(26, 22, 18, 0.55) 95%),
    linear-gradient(180deg, rgba(74, 56, 32, 0.18) 0%, rgba(74, 56, 32, 0.05) 30%, rgba(74, 56, 32, 0.5) 100%);
}

@keyframes interlude-zoom {
  from { transform: scale(1.0) translateY(0); }
  to   { transform: scale(1.08) translateY(-2%); }
}

.interlude__inner {
  position: relative;
  width: 100%;
  max-width: 1240px;
  padding: clamp(60px, 10vw, 120px) clamp(20px, 5vw, 60px);
  text-align: center;
  color: var(--cream);
  margin-left: auto;        /* push to the right where there is breathing room */
  margin-right: 0;
}

@media (min-width: 900px) {
  .interlude__inner {
    text-align: right;
    padding-right: clamp(60px, 10vw, 140px);
    max-width: 60%;
    margin-left: auto;
  }
}

.interlude__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: clamp(20px, 3vw, 32px);
  padding: 8px 18px;
  background: rgba(26, 22, 18, 0.35);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  border: 1px solid rgba(247, 239, 221, 0.25);
}
.interlude__eyebrow .rule {
  flex: 0 0 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.85;
}

.interlude__script {
  font-family: var(--font-script);
  font-size: clamp(56px, 8.5vw, 120px);
  line-height: 0.95;
  color: var(--ivory);
  margin-bottom: clamp(18px, 3vw, 32px);
  text-shadow:
    0 6px 30px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.01em;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.interlude__sub {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.55vw, 21px);
  color: var(--cream);
  opacity: 0.92;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  max-width: 32ch;
  margin-left: auto;
  line-height: 1.5;
}
.interlude__sub em { font-style: italic; }


/* ════════════════════════════════════════════════════════════ */
/*  SAVE THE DATE / DETAILS                                     */
/* ════════════════════════════════════════════════════════════ */
.details {
  padding: clamp(80px, 14vw, 180px) 0;
  position: relative;
}

.details__layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

.details__copy { position: relative; }

.details__date {
  font-family: var(--font-display);
  display: flex;
  flex-direction: column;
  line-height: 0.88;
  margin: clamp(20px, 3vw, 36px) 0;
  color: var(--ink);
}
.details__date .d-day {
  font-style: italic;
  font-weight: 300;
  font-size: clamp(110px, 18vw, 220px);
  letter-spacing: -0.04em;
  color: var(--terracotta);
}
.details__date .d-month {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 4.5vw, 58px);
  margin-top: clamp(6px, 1vw, 12px);
  color: var(--ink);
}
.details__date .d-year {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0.5em;
  margin-top: clamp(8px, 1vw, 14px);
  color: var(--gold-deep);
}

.details__time {
  font-family: var(--font-body);
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: clamp(28px, 4vw, 40px);
}
.details__time em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--terracotta);
  font-weight: 700;
}

.details__where {
  padding: clamp(20px, 3vw, 28px) clamp(22px, 3vw, 32px);
  border-left: 2px solid var(--gold);
  background: linear-gradient(90deg, rgba(176, 136, 80, 0.06), transparent 70%);
  margin-bottom: clamp(28px, 4vw, 40px);
}
.details__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.details__actions .btn { flex: 0 1 auto; }
@media (max-width: 600px) {
  .details__actions { flex-direction: column; align-items: stretch; }
  .details__actions .btn { width: 100%; }
}
.details__where-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 8px;
}
.details__where-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(22px, 2.3vw, 30px);
  color: var(--ink);
  line-height: 1.25;
}
.details__where-addr {
  margin-top: 6px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink);
}

/* medallion image */
.details__medallion {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.details__medallion img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 30px 60px -25px rgba(74, 56, 32, 0.4);
  animation: medallion-float 6s ease-in-out infinite;
}
.details__medallion-ring {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px dashed var(--gold-deep);
  opacity: 0.4;
  animation: medallion-rotate 80s linear infinite;
  pointer-events: none;
}
@keyframes medallion-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes medallion-rotate {
  to { transform: rotate(360deg); }
}

/* button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 14px 24px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  transition: all 0.45s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
  z-index: -1;
}
.btn:hover, .btn:focus-visible {
  color: var(--cream);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; }
.btn__arrow { transition: transform 0.35s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary {
  background: var(--ink);
  color: var(--cream);
}
.btn--primary::before { background: var(--terracotta); transform-origin: left; }
.btn--primary:hover { color: var(--cream); }

.btn--ghost {
  background: rgba(253, 248, 236, 0.6);
  border-color: var(--gold-deep);
  color: var(--ink);
}
.btn--ghost::before { background: var(--gold-deep); }
.btn--ghost:hover { color: var(--cream); }
.btn--ghost[aria-expanded="true"] .btn__arrow { transform: rotate(180deg); }


/* ════════════════════════════════════════════════════════════ */
/*  DRESS CODE                                                  */
/* ════════════════════════════════════════════════════════════ */
.dresscode {
  padding: clamp(90px, 14vw, 180px) 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(168, 155, 196, 0.18), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(245, 183, 143, 0.18), transparent 55%),
    linear-gradient(180deg, var(--ivory-warm) 0%, var(--cream) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.dresscode__display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 5.5vw, 70px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 auto clamp(20px, 3vw, 32px);
  max-width: 18ch;
  letter-spacing: -0.015em;
}
.dresscode__display em {
  font-style: italic;
  color: var(--terracotta);
}

.dresscode__intro {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.55vw, 20px);
  font-weight: 500;
  color: var(--ink);
  max-width: 62ch;
  margin: 0 auto clamp(36px, 5vw, 56px);
  line-height: 1.7;
}
.dresscode__intro em {
  font-style: italic;
  font-weight: 600;
  color: var(--terracotta);
}
.dresscode__intro strong {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  color: var(--ink);
}

/* form */
.reveal-form {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.reveal-form input {
  flex: 1 1 220px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  padding: 12px 18px;
  border: 1.5px solid var(--gold);
  border-radius: 0;
  background: var(--ivory);
  outline: none;
  transition: all 0.3s ease;
}
.reveal-form input:focus {
  border-color: var(--terracotta);
  background: var(--ivory);
  box-shadow: 0 0 0 4px rgba(196, 115, 86, 0.12);
}
.reveal-form input::placeholder {
  color: var(--ink-soft);
  opacity: 0.7;
}
.reveal-form .btn { flex: 0 0 auto; }

.reveal-form__hint {
  margin-top: 20px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 17px;
  color: var(--terracotta);
  min-height: 26px;
}

/* color card */
.color-card {
  --card-color: var(--rose-dust);
  margin: clamp(40px, 6vw, 70px) auto 0;
  max-width: 880px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
  padding: clamp(28px, 5vw, 60px);
  background: var(--ivory);
  border: 1px solid rgba(176, 136, 80, 0.25);
  border-radius: 6px;
  box-shadow:
    0 30px 60px -25px rgba(74, 56, 32, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  text-align: left;
  position: relative;
  overflow: hidden;
  animation: card-bloom 0.9s var(--ease-bloom) both;
}
.color-card[hidden] { display: none; }

.color-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--card-color) 25%, transparent), transparent 55%),
    radial-gradient(circle at bottom left, color-mix(in srgb, var(--card-color) 18%, transparent), transparent 55%);
  pointer-events: none;
  opacity: 0.7;
}

@keyframes card-bloom {
  0%   { opacity: 0; transform: translateY(20px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.color-card__petals {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.color-card__petals .mini-petal {
  position: absolute;
  width: 14px; height: 18px;
  background: var(--card-color);
  border-radius: 50% 0;
  opacity: 0;
  animation: mini-petal-rain 2.4s var(--ease-out) forwards;
  animation-delay: var(--delay, 0s);
  top: -20px;
  left: var(--x, 50%);
  transform-origin: center;
}
@keyframes mini-petal-rain {
  0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
  20%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(400px) rotate(540deg); }
}

.color-card__swatch {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 280px;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--card-color) 50%, white), var(--card-color) 65%, color-mix(in srgb, var(--card-color) 75%, black 15%));
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 -20px 40px rgba(0, 0, 0, 0.12),
    inset 0 20px 30px rgba(255, 255, 255, 0.25),
    0 20px 40px -15px color-mix(in srgb, var(--card-color) 60%, black 20%);
}
.color-card__bloom {
  width: 75%;
  height: 75%;
  color: color-mix(in srgb, var(--card-color) 85%, white 15%);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
  animation: bloom-spin 30s linear infinite;
}
@keyframes bloom-spin {
  to { transform: rotate(360deg); }
}

.color-card__copy { position: relative; z-index: 1; }

.color-card__assigned-to {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 12px;
}
.color-card__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.color-card__hex {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.32em;
  color: var(--gold-deep);
}
.color-card__desc {
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.65;
}
.color-card__tip {
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.35vw, 17px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.55;
}
.color-card__tip strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  color: var(--ink);
}

.color-card__note {
  margin-top: 18px;
  padding: 14px 18px;
  background: rgba(176, 136, 80, 0.08);
  border-left: 2px solid var(--gold-deep);
  font-family: var(--font-body);
  font-size: clamp(14px, 1.25vw, 16px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.55;
  border-radius: 2px;
}
.color-card__note strong {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  color: var(--terracotta);
}
.color-card__note em {
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 600;
}
.color-card__note span[aria-hidden] {
  color: var(--gold-deep);
  margin-right: 4px;
}

.color-card__again {
  margin-top: 26px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 16px;
  color: var(--terracotta);
  border-bottom: 1px solid var(--terracotta);
  padding: 4px 0;
  transition: opacity 0.25s ease;
}
.color-card__again:hover { opacity: 0.75; }

/* all guests + colors */
.all-colors {
  max-width: 980px;
  margin: clamp(50px, 7vw, 80px) auto 0;
  text-align: center;
}

.all-colors__panel[hidden] { display: none; }
.all-colors__panel {
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 32px);
  background: rgba(253, 248, 236, 0.6);
  border: 1px solid rgba(176, 136, 80, 0.25);
  border-radius: 6px;
  animation: panel-bloom 0.55s var(--ease-out) both;
}
@keyframes panel-bloom {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.all-colors__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink);
  margin-bottom: clamp(24px, 3vw, 36px);
}

.all-colors__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 0;
  margin: 0;
}
.all-colors__grid li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  background: var(--ivory);
  border: 1px solid rgba(176, 136, 80, 0.18);
  border-radius: 6px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  text-align: left;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.all-colors__grid li:hover,
.all-colors__grid li:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px -10px rgba(74, 56, 32, 0.2);
  border-color: var(--terracotta);
}
.all-colors__grid li:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}
.all-colors__grid li:hover .all-colors__chev {
  opacity: 1;
  transform: translateX(3px);
}
.all-colors__chev {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold-deep);
  opacity: 0.45;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.all-colors__grid .swatch {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--c);
  box-shadow:
    inset 0 -10px 16px rgba(0, 0, 0, 0.22),
    inset 0 6px 10px rgba(255, 255, 255, 0.32),
    0 4px 12px -3px rgba(0, 0, 0, 0.28);
}
.all-colors__grid .meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.all-colors__grid .couple {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  line-height: 1.25;
}
.all-colors__grid .name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 17px;
  color: var(--terracotta);
  line-height: 1.2;
}

/* ════════════════════════════════════════════════════════════ */
/*  STAY                                                        */
/* ════════════════════════════════════════════════════════════ */
.stay {
  padding: clamp(80px, 14vw, 160px) 0;
  text-align: center;
}

.stay__display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: clamp(28px, 4vw, 40px);
  letter-spacing: -0.015em;
}
.stay__display em {
  font-style: italic;
  color: var(--terracotta);
}

.stay__body {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  line-height: 1.75;
  color: var(--ink);
  max-width: 55ch;
  margin: 0 auto;
}
.stay__body strong {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--terracotta);
  font-style: italic;
}

.stay__note {
  margin-top: clamp(18px, 2.5vw, 26px);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--ink-soft);
}

/* ════════════════════════════════════════════════════════════ */
/*  FOOTER                                                      */
/* ════════════════════════════════════════════════════════════ */
.footer {
  padding: clamp(50px, 8vw, 100px) 0 clamp(40px, 5vw, 60px);
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  text-align: center;
  position: relative;
}
.footer::before {
  content: "";
  display: block;
  width: 120px; height: 1px;
  margin: 0 auto clamp(40px, 5vw, 60px);
  background: linear-gradient(to right, transparent, var(--gold-deep), transparent);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vw, 30px);
}

.footer__monogram {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(50px, 7vw, 84px);
  line-height: 1;
  color: var(--terracotta);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.02em;
}
.footer__monogram span {
  font-size: 0.4em;
  color: var(--gold-deep);
  font-style: normal;
}

.footer__signoff {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.55;
}
.footer__signoff em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4em;
  color: var(--ink);
  display: block;
  margin-top: 6px;
}

.footer__location {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-deep);
}


/* ════════════════════════════════════════════════════════════ */
/*  REVEAL ON SCROLL                                            */
/* ════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════ */
/*  RESPONSIVE                                                  */
/* ════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .hero__layout {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .hero__portrait { max-width: 460px; margin: 0 auto; }
  .hero__text { text-align: center; }
  .hero__eyebrow { justify-content: center; }
  .hero__label { margin-left: auto; margin-right: auto; }
  .hero__subtitle { margin-left: auto; margin-right: auto; }
  .hero__script { transform: rotate(-2deg); display: inline-block; }
  .hero__title { align-items: center; }

  .details__layout {
    grid-template-columns: 1fr;
    gap: 50px;
    text-align: center;
  }
  .details__date { align-items: center; }
  .details__where { text-align: left; max-width: 420px; margin-left: auto; margin-right: auto; }
  .details__medallion { order: -1; max-width: 340px; }

  .color-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .color-card__swatch { max-width: 220px; }

  .hero__wisteria { width: clamp(110px, 22vw, 180px); opacity: 0.7; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }

  .hero { min-height: auto; padding: 60px 0 80px; }
  .hero__scroll { display: none; }
  .hero__portrait-frame { transform: rotate(-0.6deg); }
  .hero__save { font-size: 10px; letter-spacing: 0.32em; }

  .countdown__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .cd-cell {
    padding: 36px 12px;
    aspect-ratio: 1 / 1;
    justify-content: center;
  }
  .cd-cell__number { font-size: clamp(54px, 17vw, 84px); }
  .cd-cell__label { font-size: 11px; letter-spacing: 0.34em; }

  .reveal-form {
    flex-direction: column;
  }
  .reveal-form input,
  .reveal-form .btn { width: 100%; }
  .reveal-form .btn { justify-content: center; }

  .hero__title-name {
    font-size: clamp(80px, 22vw, 140px);
  }
  .hero__title-numeral {
    font-size: clamp(60px, 17vw, 110px);
  }
  .hero__script {
    font-size: clamp(36px, 11vw, 60px);
  }

  .details__date .d-day {
    font-size: clamp(110px, 32vw, 180px);
  }

  .color-card {
    padding: 28px 22px;
    gap: 20px;
  }
  .color-card__swatch { max-width: 180px; }
  .color-card__name { font-size: clamp(28px, 8vw, 40px); }

  .interlude { min-height: 60vh; }
  .interlude__image { background-position: 35% center; }
  .interlude__sub { margin-left: auto; margin-right: auto; }

  .hero__wisteria--left { top: -20px; left: -40px; }
  .hero__wisteria--right { top: -20px; right: -40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}