/* ============================================================
   Arianna & Adam — Wedding site design system
   Aesthetic carried over from the Save the Date:
   parchment palette, Cormorant Garamond + Pinyon Script, florals.
   ============================================================ */

:root {
  --page-bg: #ede3d0;
  --ink: #3a322c;
  --sepia: #5a4e42;
  --muted: #8a7e72;
  --faint: #bbb3a6;
  --line: rgba(90, 78, 66, 0.25);
  --line-strong: rgba(90, 78, 66, 0.5);
  --tint: rgba(90, 78, 66, 0.06);
  --header-h: 64px;
  --serif: 'Cormorant Garamond', 'Georgia', serif;
  --script: 'Pinyon Script', cursive;
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.7;
}

body.no-scroll { overflow: hidden; }

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

a { color: inherit; }

/* ============================================================
   TYPE ROLES  (same vocabulary as the Save the Date)
   ============================================================ */
.script {
  font-family: var(--script);
  color: var(--sepia);
  font-weight: 400;
}

.serif-caps {
  font-family: var(--serif);
  color: var(--ink);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.serif-italic {
  font-family: var(--serif);
  color: var(--sepia);
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: 0.05em;
}

/* ============================================================
   SHARED HEADER + NAV  (rendered by site.js)
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.1rem, 4vw, 2.4rem);
  background: rgba(237, 227, 208, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header .monogram {
  font-family: var(--script);
  font-size: 1.7rem;
  color: var(--sepia);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.7rem);
}

.nav-desktop a {
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}

.nav-desktop a:hover { border-bottom-color: var(--line-strong); }
.nav-desktop a.active { border-bottom-color: var(--sepia); color: var(--sepia); }

.nav-desktop a.rsvp-pill,
.nav-drawer a.rsvp-pill {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.4rem 1.1rem;
}
.nav-desktop a.rsvp-pill:hover { background: var(--tint); border-bottom-color: var(--line-strong); }

.header-tools { display: flex; align-items: center; gap: 0.5rem; }

/* hamburger */
.nav-toggle {
  background: none; border: none; cursor: pointer;
  width: 40px; height: 40px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block; width: 24px; height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s, opacity 0.2s;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--page-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease;
  padding: var(--header-h) 2rem 2rem;
}
body.nav-open .nav-drawer { opacity: 1; visibility: visible; }

.nav-drawer a {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
}
body.nav-open .nav-drawer a { animation: navFade 0.5s ease forwards; }
.nav-drawer a.active { color: var(--sepia); }
.nav-drawer .drawer-monogram {
  font-family: var(--script);
  font-size: 2.4rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sepia);
  margin-bottom: 0.6rem;
  opacity: 1; transform: none;
}

@keyframes navFade { to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   HERO  (Home)
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--page-bg);

  /* The floral frame is object-fit:contain, so its rendered width is the
     image ratio (1696/2458 = 0.690) fitted into the hero box. Everything in
     .hero-inner is sized from this, so the type always keeps the same
     proportion to the frame at any viewport size or browser zoom. Sizing the
     type in fixed px/rem is what made it overflow the wreath at 100% zoom
     while looking correct at 75%. */
  --frame-w: min(100vw, 69svh);
}

.hero-florals {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-florals img {
  position: absolute;
  top: 0; left: 50%;
  width: 100%;
  height: 100%;
  /* contain at every width: the artwork is a floating bouquet with its own
     margins, and cover would crop them off and slice blooms at the edge */
  object-fit: contain;
  object-position: center;
  transform: translate3d(-50%, var(--floral-shift, 0), 0);
  will-change: transform;
}

.hero-inner {
  position: relative;
  z-index: 3;
  max-width: calc(var(--frame-w) * 0.50);
  padding: 0 1.4rem;
  /* the torn card sits a little above the artwork's centre, so nudge the type
     block up to sit inside it. No scrim: the card itself is the backdrop, and
     a scrim would bleed a translucent patch onto the surrounding flowers. */
  transform: translateY(calc(var(--frame-w) * -0.045));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero .eyebrow {
  font-family: var(--script);
  font-size: clamp(0.78rem, calc(var(--frame-w) * 0.027), 1.45rem);
  color: var(--sepia);
  margin-bottom: 0.3rem;
}
.hero .names {
  font-family: var(--serif);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(1.12rem, calc(var(--frame-w) * 0.0445), 2.7rem);
  line-height: 1.02;
}
.hero .amp {
  font-family: var(--script);
  text-transform: none;
  font-weight: 400;
  font-size: clamp(0.9rem, calc(var(--frame-w) * 0.0342), 2.05rem);
  display: block;
  margin: 0.04em 0;
  letter-spacing: 0;
}
.hero .meta {
  font-family: var(--serif);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: clamp(0.5rem, calc(var(--frame-w) * 0.0157), 0.92rem);
  margin-top: calc(var(--frame-w) * 0.026);
  line-height: 1.5;
}
.hero .meta .venue { display: block; margin-top: 0.3rem; letter-spacing: 0.13em; }

/* the hero's RSVP button scales with the frame like the rest of the block */
.hero .btn {
  font-size: clamp(0.6rem, calc(var(--frame-w) * 0.0165), 0.95rem);
  padding: calc(var(--frame-w) * 0.019) calc(var(--frame-w) * 0.055);
}

/* countdown */
.countdown {
  display: flex;
  gap: clamp(0.55rem, calc(var(--frame-w) * 0.026), 1.5rem);
  margin: calc(var(--frame-w) * 0.022) 0;
}
.countdown .unit { display: flex; flex-direction: column; align-items: center; }
.countdown .num {
  font-family: var(--serif);
  font-size: clamp(0.85rem, calc(var(--frame-w) * 0.0325), 2rem);
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.countdown .lbl {
  font-family: var(--serif);
  font-size: clamp(0.4rem, calc(var(--frame-w) * 0.0108), 0.64rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.35rem;
}

/* ============================================================
   BUTTONS  (lifted from .calendar-btn / .mailing-form button)
   ============================================================ */
.btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  border: 1px solid var(--line-strong);
  background: transparent;
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sepia);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s, border-color 0.2s;
  border-radius: 0;
  -webkit-appearance: none;
}
.btn:hover { background: var(--tint); border-color: var(--sepia); }
.btn-block { display: block; width: 100%; }

/* ============================================================
   PAGE-HERO  (sub-pages)
   ============================================================ */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + 3rem) 1.5rem 2rem;
  text-align: center;
  overflow: hidden;
}
.page-hero .banner-strip {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  pointer-events: none;
  /* fade the florals into the parchment toward the bottom */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 96%);
}
/* soft parchment glow behind the title so the type reads cleanly over the florals */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 66% at 50% 52%,
    rgba(237, 227, 208, 0.82) 0%,
    rgba(237, 227, 208, 0.55) 45%,
    rgba(237, 227, 208, 0) 72%);
}
.page-hero .page-title {
  position: relative;
  z-index: 2;
  font-family: var(--script);
  font-size: clamp(2.6rem, 9.5vw, 3.9rem);
  color: #1d1712;
  line-height: 1;
  text-shadow: 0 1px 10px rgba(237, 227, 208, 0.9);
}
.page-hero .page-sub {
  position: relative;
  z-index: 2;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--ink);
  margin-top: 0.6rem;
  text-shadow: 0 1px 8px rgba(237, 227, 208, 0.95);
}

/* ============================================================
   LAYOUT + SECTIONS  (reuse .section-label / .section-title / .divider)
   ============================================================ */
/* Positioned + stacked above the hero so page content can never be covered
   by the hero's floral layer (z-index:1), which spans the full 100svh. */
main { display: block; position: relative; z-index: 2; }

.wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
}
.wrap-wide { max-width: 960px; }

/* one-page anchors: offset the smooth-scroll target below the fixed header */
.section-anchor { scroll-margin-top: calc(var(--header-h) + 1.2rem); }
#top { scroll-margin-top: 0; }

/* On phones the hero (100svh) is taller than the contained bouquet, leaving a
   band of empty parchment below it. Pull the first section up into that empty
   band and trim its top padding so Our Story follows the invitation without a
   huge gap. Safe: the band is empty, and <main> stacks above the hero. */
@media (max-width: 700px) {
  #story {
    margin-top: -52px;
    padding-top: 0.5rem;
  }
}

.section { text-align: center; margin-bottom: 3.5rem; }
.section:last-child { margin-bottom: 0; }

.section-label {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1rem;
  text-align: center;
}
.section-title {
  font-family: var(--script);
  font-size: clamp(2.15rem, 7.2vw, 2.95rem);
  color: var(--sepia);
  margin-bottom: 0.9rem;
  font-weight: 400;
}
.section p { color: var(--sepia); font-size: clamp(1rem, 2.5vw, 1.12rem); }
.section p + p { margin-top: 1rem; }

.section a.inline {
  color: var(--sepia);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
  transition: text-decoration-color 0.2s;
}
.section a.inline:hover { text-decoration-color: var(--line-strong); }

.divider {
  width: 44px; height: 1px;
  background: var(--line);
  margin: 3rem auto;
}
/* Simple, elegant section divider: a fading hairline with a small diamond. */
.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  max-width: 240px;
  margin: 3.25rem auto;
}
.rule::before, .rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to var(--rule-dir, right), transparent, var(--line-strong));
}
.rule::after { --rule-dir: left; }
.rule span {
  display: block;
  width: 5px; height: 5px;
  transform: rotate(45deg);
  background: var(--sepia);
  opacity: 0.55;
  flex: 0 0 auto;
}
.divider-floral {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 3rem auto;
  opacity: 0.55;
}

.placeholder {
  font-style: italic;
  color: var(--faint);
  font-size: 0.92rem;
}

/* ============================================================
   CARDS / GRID  (explore strip, things-to-do, gallery)
   ============================================================ */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
@media (min-width: 640px) {
  .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  padding: 1.6rem 1.4rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.card:hover { background: var(--tint); border-color: var(--line-strong); transform: translateY(-2px); }
.card .card-title {
  font-family: var(--script);
  font-size: 1.6rem;
  color: var(--sepia);
  margin-bottom: 0.4rem;
}
.card .card-text { font-size: 0.92rem; color: var(--sepia); }

/* timeline (schedule) */
.timeline { max-width: 460px; margin: 0 auto; text-align: center; }
.timeline .event { padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.timeline .event:last-child { border-bottom: none; }
.timeline .event .time {
  font-family: var(--serif);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--muted);
}
.timeline .event .name {
  font-family: var(--script);
  font-size: 1.7rem;
  color: var(--sepia);
  margin: 0.2rem 0;
}
.timeline .event .where { font-size: 0.95rem; color: var(--sepia); }

/* venue block */
.venue-logo {
  display: block;
  margin: 0 auto 1.2rem;
  height: 50px; width: auto;
  filter: invert(25%) sepia(10%) saturate(500%) hue-rotate(350deg) brightness(50%);
}
.section .venue-name {
  font-family: var(--serif);
  font-size: clamp(1rem, 2.4vw, 1.1rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin-bottom: 0.3rem;
}

/* gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-grid.pair-2 { grid-template-columns: repeat(2, 1fr); max-width: 600px; margin: 0 auto; }
.gallery-grid .photo {
  aspect-ratio: 1 / 1;
  background: rgba(90, 78, 66, 0.08);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--script);
  font-size: 1.2rem;
  color: var(--faint);
  overflow: hidden;
}
.gallery-grid .photo img { width: 100%; height: 100%; object-fit: cover; }

/* Single, large story photo (not the square grid) */
.story-photo { margin: 2rem auto 3rem; max-width: 600px; }
.story-photo a { display: block; }
.story-photo img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
}

/* FAQ */
.faq-item { border-bottom: 1px solid var(--line); text-align: left; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.2rem 2rem 1.2rem 0;
  position: relative;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem; color: var(--muted);
  transition: transform 0.2s;
}
.faq-item[open] summary::after { content: '\2013'; }
.faq-item .answer { padding: 0 0 1.3rem; color: var(--sepia); }

/* ============================================================
   FORMS  (RSVP — lifted from .mailing-form)
   ============================================================ */
.form {
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
}
.form label {
  display: block;
  font-family: var(--serif);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.form input,
.form select,
.form textarea {
  display: block;
  width: 100%;
  padding: 0.6rem 0;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 1.4rem;
  outline: none;
  transition: border-color 0.2s;
  border-radius: 0;
  -webkit-appearance: none;
}
.form textarea { resize: vertical; min-height: 3rem; }
.form input:focus,
.form select:focus,
.form textarea:focus { border-bottom-color: var(--sepia); }
.form input::placeholder, .form textarea::placeholder { color: var(--faint); font-style: italic; }
.form .row { display: flex; gap: 1rem; }
.form .row > div { flex: 1; }

.form-success {
  display: none;
  text-align: center;
  font-family: var(--script);
  font-size: 1.6rem;
  color: var(--sepia);
  padding: 1.5rem 0;
}

/* ============================================================
   FOOTER  (rendered by site.js)
   ============================================================ */
.site-footer {
  text-align: center;
  padding: 3rem 2rem calc(3rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--page-bg);
}
.site-footer .fmono { font-family: var(--script); font-size: 2rem; color: var(--sepia); }
.site-footer .fmeta {
  font-family: var(--serif);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

/* ============================================================
   MOTION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-florals img { transform: translateX(-50%) !important; }
}

/* ============================================================
   DESKTOP NAV SWITCH
   ============================================================ */
@media (min-width: 880px) {
  .nav-desktop { display: flex; }
  .nav-toggle { display: none; }
  .nav-drawer { display: none; }
}

/* ============================================================
   RSVP  (party lookup + per-guest response)
   ============================================================ */
.form .opt {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  color: var(--faint);
}
.lookup-error {
  color: var(--sepia);
  font-size: 0.92rem;
  font-style: italic;
  margin: -0.6rem 0 1.1rem;
  min-height: 1px;
}
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--sepia);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.link-btn:hover { border-bottom-color: var(--sepia); }

.guest-card {
  border: 1px solid var(--line);
  padding: 1.2rem 1.2rem 0.4rem;
  margin-bottom: 1.4rem;
}
.guest-head { margin-bottom: 0.9rem; }
.guest-name-fixed {
  font-family: var(--serif);
  font-size: 1.22rem;
  color: var(--ink);
}
.guest-card .guest-name { margin-bottom: 0; font-size: 1.1rem; }

.guest-attend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin-bottom: 1rem;
}
.choice {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sepia);
  margin-bottom: 0;
  cursor: pointer;
}
/* The base .form input rule strips appearance for the underlined text fields;
   radios need it back or they render as invisible boxes. */
.choice input[type="radio"] {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: none;
  border-bottom: none;
  accent-color: var(--sepia);
  -webkit-appearance: radio;
  appearance: radio;
}
.guest-detail { padding-top: 0.2rem; }