/* Dirección visual v2: botánica delicada, lino y papelería de boda. */
:root {
  --linen-image: url("../images/botanical-linen-v1.webp");
  --thread: rgba(104, 54, 51, 0.12);
}

body {
  background-color: #f8f0e7;
  background-image: var(--linen-image);
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: center top;
}

.site-content {
  background-color: transparent;
  background-image: var(--linen-image);
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: center top;
}

.envelope-intro {
  background-color: #f3e5dc;
  background-image:
    linear-gradient(rgba(249,241,234,.45), rgba(249,241,234,.45)),
    var(--linen-image);
  background-size: cover;
  background-position: center;
}

.envelope-scene {
  position: relative;
  width: min(700px, 96vw);
  padding: 3.5rem 2rem;
  background: rgba(255, 250, 244, .42);
  border: 1px solid rgba(123, 35, 53, .14);
  box-shadow: inset 0 0 50px rgba(255,255,255,.36);
  backdrop-filter: blur(2px);
}

.envelope-scene::before,
.envelope-scene::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(123,35,53,.08);
  pointer-events: none;
}

.envelope-scene::after {
  inset: 18px;
  border-style: dashed;
  border-color: rgba(123,35,53,.09);
}

.envelope-kicker { margin-bottom: 2.6rem; }
.envelope { filter: drop-shadow(0 24px 30px rgba(80,38,40,.17)); }
.envelope__back,
.envelope__flap { background-color: #e6cfc4; }
.envelope__back {
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(111,65,58,.035) 3px 4px);
}
.envelope__flap {
  background-image: linear-gradient(150deg, rgba(255,255,255,.28), transparent 45%), repeating-linear-gradient(90deg, transparent 0 4px, rgba(111,65,58,.025) 4px 5px);
}
.envelope__letter {
  background-color: #fcf7ef;
  background-image: var(--linen-image);
  background-size: cover;
  background-position: center;
}
.envelope__letter::after {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(123,35,53,.15);
}

.hero {
  width: 100%;
  max-width: none;
  min-height: auto;
  padding: 7.5rem 1.2rem 9rem;
  background-image: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 2rem;
  border: 1px solid rgba(123,35,53,.14);
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.18);
  pointer-events: none;
}

.hero-monogram {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin-bottom: 2rem;
  padding: .65rem 1.1rem .52rem;
  color: var(--wine);
  font: 400 1rem var(--serif);
  letter-spacing: .13em;
}
.hero-monogram::before,
.hero-monogram::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 48px;
  border-top: 1px solid rgba(123,35,53,.35);
}
.hero-monogram::before { right: 100%; }
.hero-monogram::after { left: 100%; }
.hero-monogram i { color: var(--salmon); font: 400 1.4rem var(--script); }

.hero h1 {
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

.photo-mat {
  position: relative;
  width: min(490px, 83vw);
  margin: 3rem auto 2.5rem;
  padding: 17px;
  background: rgba(255,252,247,.82);
  border: 1px solid rgba(123,35,53,.16);
  box-shadow: 0 24px 70px rgba(92,48,47,.14);
  transform: rotate(-.8deg);
}
.photo-mat::before,
.photo-mat::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 64px;
  height: 26px;
  background: rgba(166,112,91,.18);
  border: 1px solid rgba(123,35,53,.08);
  backdrop-filter: blur(3px);
}
.photo-mat::before { top: -10px; left: -22px; transform: rotate(-40deg); }
.photo-mat::after { right: -22px; bottom: -9px; transform: rotate(-40deg); }
.photo-mat .hero-photo { width: 100%; margin: 0; transform: none; box-shadow: none; }
.hero-photo--placeholder {
  background-image:
    linear-gradient(rgba(250,238,232,.86), rgba(250,238,232,.86)),
    var(--linen-image);
  background-size: cover;
}

.intro {
  max-width: 1060px;
  padding-top: 9rem;
  padding-bottom: 9rem;
}
.intro,
.timing {
  background: transparent;
  box-shadow: none;
}
.intro h2,
.timing h2,
.timing h3,
.timing p,
.where h2,
.where p,
.closing h2,
.closing p {
  color: #442c2a;
  text-shadow: 0 1px 1px rgba(255,255,255,.72);
}
.fabric-note {
  position: relative;
  max-width: 850px;
  margin: 2rem auto 0;
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.5rem, 8vw, 6rem);
  background-image: linear-gradient(rgba(255,250,243,.78), rgba(255,250,243,.84)), var(--linen-image);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(123,35,53,.16);
  box-shadow: 0 24px 65px rgba(89,52,48,.1), inset 0 0 45px rgba(255,255,255,.45);
}
.fabric-note::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px dashed rgba(123,35,53,.18);
}
.fabric-note h2 { position: relative; margin: 0 auto; font-size: clamp(2rem,5vw,4rem); }
.fabric-note__sprig {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 1rem;
  color: var(--wine);
  font-size: 2rem;
}

.countdown-wrap { padding: 2rem 1rem 6rem; }
.countdown-card {
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(88,18,37,.89), rgba(105,27,44,.93)),
    var(--linen-image);
  background-size: cover;
  border: 1px solid rgba(255,235,225,.3);
  box-shadow: 0 26px 70px rgba(80,28,38,.18);
}
.countdown-label {
  display: inline-block;
  margin: 0 auto 1.4rem;
  padding: .55rem 1rem;
  border: 1px solid rgba(255,235,225,.45);
  border-radius: 999px;
  color: #fff4ee;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.countdown-card::before,
.countdown-card::after {
  content: "❦";
  position: absolute;
  color: rgba(255,230,218,.16);
  font: 400 8rem var(--serif);
}
.countdown-card::before { top: -3rem; left: 2rem; transform: rotate(-20deg); }
.countdown-card::after { right: 2rem; bottom: -3rem; transform: rotate(160deg); }

.where {
  width: min(940px, calc(100% - 2rem));
  margin-top: 3rem;
  margin-bottom: 3rem;
  background: rgba(255,252,247,.78);
  border: 1px solid var(--thread);
  box-shadow: inset 0 0 0 8px rgba(230,154,120,.05), 0 18px 55px rgba(88,49,45,.07);
}
.where::before {
  content: "";
  display: block;
  width: 120px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: var(--linen-image) center top / 280px auto;
  -webkit-mask-image: radial-gradient(ellipse, #000 40%, transparent 72%);
  mask-image: radial-gradient(ellipse, #000 40%, transparent 72%);
}

.timeline li {
  padding: 1.4rem 1.5rem 3rem;
  background: linear-gradient(90deg, rgba(238,215,210,.45), transparent 70%);
  border-top: 1px solid rgba(123,35,53,.1);
}
.timeline-icon { background: #fbf4ec; box-shadow: inset 0 0 0 5px rgba(217,164,162,.12); }

.detail-card {
  border: 1px solid rgba(123,35,53,.13);
  box-shadow: inset 0 0 0 9px rgba(255,255,255,.2);
}
.detail-card--rose {
  background-image: linear-gradient(rgba(237,215,210,.84), rgba(237,215,210,.9)), var(--linen-image);
  background-size: cover;
}
.detail-card--apricot {
  background-image: linear-gradient(rgba(240,213,194,.84), rgba(240,213,194,.9)), var(--linen-image);
  background-size: cover;
  background-position: bottom right;
}

.rsvp-section {
  position: relative;
  width: min(1240px, calc(100% - 2rem));
  margin: 5rem auto;
  padding: clamp(3rem,7vw,7rem);
  background-image: linear-gradient(rgba(249,240,232,.77), rgba(249,240,232,.88)), var(--linen-image);
  background-size: cover;
  border: 1px solid rgba(123,35,53,.15);
}
.rsvp-section::before { content:""; position:absolute; inset:14px; border:1px dashed rgba(123,35,53,.13); pointer-events:none; }
.rsvp-heading,.rsvp-form { position: relative; z-index: 1; }
.rsvp-form { background: rgba(255,253,249,.92)!important; backdrop-filter: blur(4px); }
.rsvp-form__input:focus,.rsvp-form__textarea:focus { outline: 2px solid rgba(123,35,53,.18)!important; border-color: var(--wine)!important; }

.closing {
  width: 100%;
  max-width: none;
  background-image: none;
  border-top: 1px solid rgba(123,35,53,.12);
  border-bottom: 1px solid rgba(123,35,53,.12);
}
.closing h2 { text-shadow: 0 1px rgba(255,255,255,.7); }

@media (max-width: 760px) {
  .envelope-scene { width: 94vw; padding: 3rem .8rem; }
  .hero { padding: 6rem 1rem 7rem; background-position: 48% top; }
  .hero::after { inset: .75rem; }
  .hero h1 { font-size: clamp(4.5rem, 21vw, 7rem); }
  .photo-mat { width: min(84vw, 430px); padding: 10px; }
  .fabric-note { padding: 4rem 1.25rem; }
  .fabric-note::before { inset: 10px; }
  .where { padding: 5rem 1.3rem; }
  .timeline li { padding-inline: .7rem; }
  .rsvp-section { width: calc(100% - 1rem); margin: 2rem auto; padding: 4rem 1rem; }
  .rsvp-section::before { inset: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-mat { transform: none; }
}