/* ==========================================================================
   AE & JP Wedding — styles
   Tokens extracted from the Figma file (mobile 430px / desktop 1512px)
   ========================================================================== */

/* ---------- Fonts (drop the .woff2 files into /fonts, see README) ---------- */
@font-face {
  font-family: "IvyPresto Headline";
  src: url("../fonts/IvyPrestoHeadline-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Edwardian Script ITC";
  src: url("../fonts/EdwardianScriptITC.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hopeless Romantic Society";
  src: url("../fonts/HopelessRomanticSociety.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --ink: #162307;            /* forest green text & illustrations */
  --cream: #faf5e7;
  --cream-80: rgba(250, 245, 231, 0.65);
  --sage-80: rgba(158, 172, 105, 0.65);   /* #afbb85 */
  --teal-80: rgba(143, 185, 182, 0.65);   /* #accac8 */
  --footer-80: rgba(158, 172, 105, 0.65); /* #b4bd80 */

  --font-display: "IvyPresto Headline", "Didot", "Bodoni MT", Georgia, serif;
  --font-script: "Edwardian Script ITC", "Snell Roundhand", "Apple Chancery", cursive;
  --font-hand: "Hopeless Romantic Society", "Snell Roundhand", "Apple Chancery", cursive;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type: min = mobile Figma size, max = desktop Figma size */
  --fs-display: clamp(1.875rem, 0.9rem + 4.4vw, 6rem);      /* 30 -> 96 */
  --fs-script-lg: clamp(3.0625rem, 1.87rem + 4.44vw, 6.0625rem); /* 49 -> 97 */
  --fs-script-md: clamp(1.5625rem, 0.57rem + 3.7vw, 4.0625rem);  /* 25 -> 65 */
  --fs-script-tl: clamp(3.0625rem, 2.66rem + 1.48vw, 4.0625rem); /* 49 -> 65, timeline */
  --fs-script-party: clamp(1.625rem, 0.63rem + 3.7vw, 4.125rem); /* 26 -> 66, wedding party */
  --fs-hand: clamp(1.1875rem, 0.69rem + 1.85vw, 2.4375rem);   /* 19 -> 39 */
  --fs-hand-sm: clamp(0.9375rem, 0.54rem + 1.48vw, 1.9375rem); /* 15 -> 31 */
  --fs-body: clamp(0.875rem, 0.73rem + 0.66vw, 1.5rem);     /* 14 -> 24 */
  --fs-small: clamp(0.75rem, 0.57rem + 0.8vw, 1rem);      /* 12 -> 24 */
  --fs-eyebrow: clamp(0.875rem, 0.6rem + 1.2vw, 2rem);      /* 14 -> 32 */

  --content: min(88vw, 60rem);
  --content-narrow: min(88vw, 62ch);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--cream);
  background-image: url("../images/paper-texture.png");
  background-size: 480px auto;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Type roles ---------- */
.display-heading {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: var(--fs-display);
  line-height: 1.1;
  text-align: center;
  margin: 0 0 0.6em;
  color: var(--ink);
}
.display-heading--cream { color: var(--cream); }

.script-heading {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--fs-script-md);
  line-height: 1;
  text-align: center;
  margin: 0 0 0.35em;
  color: var(--ink);
}
.script-heading--cream { color: var(--cream); }
.script-heading--lg { font-size: var(--fs-script-lg); }
.script-heading--tl { font-size: var(--fs-script-tl); }
.script-heading--xl { font-size: var(--fs-script-lg); margin-bottom: 0.5em; }

.hand-script {
  font-family: var(--font-hand);
  font-size: var(--fs-hand);
  line-height: 1.4;
  text-align: center;
  margin: 0;
}

.body-copy {
  max-width: var(--content-narrow);
  margin: 0 auto 1.2em;
  text-align: center;
}

/* ---------- Sections ---------- */
.section {
  padding: clamp(3rem, 7vw, 6.5rem) clamp(1.25rem, 6vw, 4rem);
}
.section--cream { background-color: var(--cream-80); }
.section--sage  { background-color: var(--sage-80); }
.section--teal  { background-color: var(--teal-80); }

.section-illo {
  display: block;
  margin: 0 auto clamp(1rem, 3vw, 2rem);
  width: clamp(6rem, 16vw, 15.75rem);
}
.section-illo--dogs { width: clamp(8.25rem, 18vw, 17.5rem); }

/* Recolors any illustration to cream (#FAF5E7). If you export the SVGs
   already in cream from Figma, you can delete this rule. */
.illo--cream {
  filter: brightness(0) saturate(100%) invert(97%) sepia(9%) saturate(376%) hue-rotate(345deg) brightness(102%) contrast(96%);
}

/* Prevents awkward mid-phrase breaks in headings */
.keep { white-space: nowrap; }

/* ---------- Buttons & links ---------- */
.btn {
  display: block;
  width: min(100%, 28rem);
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  padding: clamp(0.55rem, 1.2vw, 1rem) 1.5rem;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(22, 35, 7, 0.18);
}

.text-link {
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
  text-underline-offset: 4px;
}
.text-link:hover { text-decoration-thickness: 2px; }

/* ---------- Hero ---------- */
/* The illustration is a real <img> so it always shows in full — the section
   height comes from the image itself. Text is overlaid on top. */
.hero {
  position: relative;
  background-color: #faf5e7; /* no paper texture in the hero */
}
.hero__bg img {
  width: 100%;
  height: auto;
  display: block;
}
.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Text starts ~12% down on mobile (53/430 in Figma) */
  padding: 12% clamp(1.25rem, 6vw, 4rem) 0;
}
.hero__eyebrow {
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 0.35rem;
}
.hero__lockup {
  margin: 0 auto;
  width: min(76vw, 70rem);
}
.hero__lockup--desktop { display: none; }
.hero__meta {
  margin: 1.25rem auto 0;
  color: var(--cream);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* ---------- Welcome ---------- */
.welcome { text-align: center; }
.welcome__logo {
  width: clamp(4.375rem, 12vw, 11.5rem);
  margin: 0 auto clamp(1.5rem, 3vw, 3rem);
}
.welcome__seeyou {
  margin: 0.75rem 0 clamp(2.25rem, 5vw, 4rem);
  transform: rotate(-12deg);
}

/* ---------- Polaroid shuffle slider ---------- */
.polaroid-stack {
  position: relative;
  width: min(64vw, 27rem);
  aspect-ratio: 3 / 3.85;
  margin: 0 auto;
}
.polaroid {
  position: absolute;
  inset: 4% 3%;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 6px 22px rgba(22, 35, 7, 0.22);
  transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.5s ease;
  will-change: transform;
}
.polaroid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Resting rotations, applied by JS via --tilt */
.polaroid { transform: rotate(var(--tilt, 0deg)); }
.polaroid.is-leaving {
  transform: translateY(-12%) rotate(calc(var(--tilt, 0deg) + 6deg));
  opacity: 0;
}

/* ---------- Main Event ---------- */
.main-event { text-align: center; }
.main-event__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3rem);
  max-width: var(--content);
  margin: 0 auto;
}
.main-event__strong {
  font-weight: 700;
  color: var(--cream);
  margin: 0 0 0.75em;
}
.main-event__links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
  margin: 0;
}

/* ---------- Timeline ---------- */
.timeline__list {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 3rem) auto 0;
  padding: 0;
  max-width: var(--content);
  display: grid;
  gap: clamp(3.25rem, 7vw, 6rem);
}
.timeline__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
}
/* Alternate icon side on mobile, per the design */
.timeline__item:nth-child(even) { flex-direction: row-reverse; }
.timeline__illo { width: clamp(5.25rem, 12vw, 8.25rem); flex: none; }
.timeline__text { text-align: left; }
.timeline__text .script-heading { text-align: left; }
.timeline__meta {
  margin: 0;
  color: var(--cream);
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* ---------- Accommodations ---------- */
.accommodations { text-align: center; }
.accommodations__list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  font-weight: 700;
  display: grid;
  gap: 0.55em;
}

/* ---------- Wedding Party ---------- */
.party { text-align: center; }
.party .display-heading { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.party__row {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr 1fr;
  max-width: var(--content);
  margin: 0 auto clamp(3.25rem, 6vw, 5.5rem);
  align-items: start;
}
.party__group .script-heading { margin-bottom: 0.6em; font-size: var(--fs-script-party); }
.party__group p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.9;
}
.party__group--wide {
  max-width: var(--content);
  margin: 0 auto clamp(3.25rem, 6vw, 5.5rem);
}
.party__group--wide:last-child { margin-bottom: 0; }
.party__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  justify-items: center;
}

/* ---------- What to Wear ---------- */
.wear { text-align: center; }
.wear__boards {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: clamp(2rem, 6vw, 6rem);
  justify-content: center;
  margin: clamp(2rem, 4vw, 3.5rem) 0;
}
.wear__board img {
  width: clamp(6.625rem, 14vw, 11.75rem);
  margin: 0 auto;
}
.wear__palette {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.25rem);
  margin: 1rem 0 clamp(2.5rem, 5vw, 4rem);
}
.wear__swatch {
  width: clamp(3.25rem, 10vw, 9.6rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--swatch);
}
.wear__inspo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  max-width: var(--content);
  margin: 0 auto;
}
.wear__inspo img { border-radius: 4px; }

/* ---------- FAQs (accordions) ---------- */
.faqs__grid {
  max-width: var(--content);
  margin: 0 auto;
}
.faq {
  border-bottom: 0.5px solid var(--ink);
}
.faqs__col:last-child .faq:last-child { border-bottom: none; }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
  cursor: pointer;
  list-style: none; /* hide default marker */
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 700;
}
/* Plus icon that becomes a minus when open */
.faq__icon {
  position: relative;
  flex: none;
  width: 0.9em;
  height: 0.9em;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--ink);
}
.faq__icon::before { width: 100%; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 100%; transition: transform 0.25s ease; }
.faq[open] .faq__icon::after { transform: rotate(90deg); }
.faq > p {
  margin: 0;
  padding: 0 1.9em clamp(1.25rem, 2.5vw, 2rem) 0;
}

/* ---------- Closing ---------- */
.closing { text-align: center; }
.closing__seeyou {
  font-size: var(--fs-hand-sm);
  margin: clamp(1.75rem, 3.5vw, 3.25rem) 0 1.25rem;
  transform: rotate(-8deg);
}
.closing__love { font-size: var(--fs-hand-sm); }
.closing__initials {
  width: clamp(12.75rem, 30vw, 28rem);
  margin: 0.75rem auto 0;
}

/* ---------- Footer ---------- */
.footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.4rem, 1vw, 0.8rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--footer-80);
  font-size: var(--fs-small);
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Desktop (>= 750px) — layout switches to the desktop Figma frame
   ========================================================================== */
@media (min-width: 750px) {
  /* Text starts ~8% down on desktop (119/1512 in Figma) */
  .hero__content { padding-top: 8%; }
  .hero__lockup--mobile { display: none; }
  .hero__lockup--desktop { display: block; }

  .main-event__grid { grid-template-columns: 1fr 1fr; }
  .main-event__links {
    flex-direction: row;
    justify-content: center;
    gap: 2.5rem;
  }

  .timeline__list {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(3rem, 8vw, 8rem);
  }
  /* Desktop: icon always left */
  .timeline__item:nth-child(even) { flex-direction: row; }

  .faqs__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(3rem, 9vw, 9rem);
    align-items: start;
  }
  .faqs__col .faq:last-child { border-bottom: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .polaroid { transition: opacity 0.4s ease; }
  .polaroid.is-leaving { transform: rotate(var(--tilt, 0deg)); }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}