/* ─────────────────────────────────────────────────────────────────────────
   Sam & Rachel — Studio direction
   Image-led, clean, generous whitespace. EB Garamond + Italiana.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --paper: #f6f1e8;
  --ink: #1a1a1a;
  --ink-soft: #7a7268;
  --accent: #a8856a;
  --accent-dark: #8a6a4f;

  --serif: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  --display: "Italiana", "Cormorant Garamond", serif;
  --script: "Pinyon Script", "Italianno", cursive;

  --pad-y: clamp(64px, 10vw, 120px);
  --pad-x: clamp(20px, 5vw, 56px);
  --rule: rgba(26, 26, 26, 0.11);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "onum";
  text-rendering: optimizeLegibility;
}

/* ── shared utilities ───────────────────────────────────────────────── */

.pad {
  padding: var(--pad-y) var(--pad-x);
}

.eyebrow,
.micro {
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 12px;
  font-family: var(--serif);
}

.micro--accent { color: var(--accent); letter-spacing: 0.3em; margin-bottom: 8px; }

.display-head {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  color: var(--ink);
  margin: 0;
}

.centered-head {
  text-align: center;
  margin-bottom: 48px;
}

/* generic photo-tag (small monospace label inside a placeholder) */
.photo-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.85);
  color: #7a6a55;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.photo-tag--bl { top: auto; right: auto; bottom: 12px; left: 12px; background: rgba(0,0,0,.4); color: #fdfaf2; }
.photo-tag--br { top: auto; left: auto; bottom: 16px; right: 24px; background: transparent; color: rgba(253, 250, 242, 0.6); }
.photo-tag--light { background: transparent; }

/* ── HERO ─────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  /* Use 100svh (small viewport height) so the hero's height does NOT change
     as iOS Safari's URL bar collapses on scroll. dvh would resize and cause
     the image (object-fit: cover) to re-crop slightly, which reads as a
     "zoom in/out" effect during scroll. svh stays stable. */
  height: 82vh;
  height: 82svh;
}

.hero__photo {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #4a3f30;
}

.hero__photo img {
  position: absolute;
  left: 0;
  /* Gentle parallax setup (20% lag instead of 40%):
     - Image is offset 20% above container and 120% tall.
     - JS translates it DOWN as you scroll (max +20% of container height).
     - Image always covers the container — never exposes background.
     - object-position pulls the focal point upward in the photo so that
       even with the upward offset, the couple's heads sit safely below
       the top edge of the viewport (no head crop). */
  top: -20%;
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: center 25%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(20px, 5vw, 56px);
  padding-top: max(clamp(20px, 5vw, 56px), env(safe-area-inset-top, 0px));
  padding-bottom: max(clamp(28px, 5vw, 64px), env(safe-area-inset-bottom, 0px));
  color: #fdfaf2;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.hero__date {
  font-size: clamp(9px, 1.5vw, 11px);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: clamp(8px, 1.5vw, 14px);
}

.hero__names {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 9vw, 100px);
  line-height: 0.95;
  letter-spacing: -0.01em;
}

.hero__sub {
  margin: clamp(8px, 1.5vw, 16px) 0 0;
  font-size: clamp(14px, 1.8vw, 18px);
  font-style: italic;
  opacity: 0.9;
  max-width: 460px;
}

/* ── INVITATION ──────────────────────────────────────────────────── */

.invite {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.invite .eyebrow { margin-bottom: 32px; }

.invite__body {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 40px);
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}

.invite__body em { font-style: italic; }

/* ── VENUE ───────────────────────────────────────────────────────── */

.venue {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.venue__text {
  max-width: 100%;
}
.venue__text .eyebrow { margin-bottom: 18px; }

.venue__name {
  margin: 0 0 24px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(56px, 8vw, 96px);
  line-height: 0.95;
  color: var(--ink);
}

.venue__addr {
  font-style: normal;
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 32px;
}

.btn-dark {
  display: inline-block;
  padding: 14px 32px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}
.btn-dark:hover { background: var(--accent-dark); }

/* ── SCHEDULE ───────────────────────────────────────────────────── */

.schedule {
  max-width: 880px;
  margin: 0 auto;
}

.schedule__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.schedule__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}
.schedule__row:last-child { border-bottom: 1px solid var(--rule); }

.schedule__time {
  font-family: var(--display);
  font-size: 28px;
  color: var(--ink);
}

.schedule__detail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 16px;
  color: var(--ink);
  font-style: italic;
}

.schedule__loc {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-style: normal;
  flex-shrink: 0;
}

/* ── LANDSCAPE BAND ──────────────────────────────────────────── */

.band {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: #4a3f30;
  color: #fdfaf2;
}

.band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.band__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(32px, 6vw, 56px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 100%);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.band__script {
  font-family: var(--script);
  font-size: clamp(56px, 8vw, 96px);
  line-height: 1;
}

.band__sub {
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-top: 16px;
  opacity: 0.85;
}

/* ── ATTIRE / DRESS CODE ─────────────────────────────────────── */

.attire {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.palette {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  max-width: 640px;
  margin: 0 auto 32px;
}

.palette__cell { text-align: center; }

.palette__swatch {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
}

.palette__name {
  display: block;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 8px;
}

.attire__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 560px;
  margin: 32px auto 0;
  text-align: left;
}

.attire__copy {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
}

.attire__note {
  margin: 28px 0 0;
  font-size: 16px;
  color: var(--ink-soft);
  font-style: italic;
}

/* ── REGISTRY ────────────────────────────────────────────────── */

.registry {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.registry__body {
  margin: 0 auto 32px;
  max-width: 460px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  font-style: italic;
}

/* ── RSVP ─────────────────────────────────────────────────────── */

.rsvp {
  max-width: 560px;
  margin: 0 auto;
}

.rsvp__head { margin-bottom: 40px; }

.rsvp__head .display-head { margin-bottom: 14px; }

.rsvp__deadline {
  margin: 0;
  font-size: 15px;
  font-style: italic;
  color: var(--ink-soft);
}

.rsvp-form {
  display: grid;
  gap: 18px;
  color: var(--ink);
}

.field { display: grid; gap: 4px; }

.field__label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}

.field input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  padding: 8px 4px;
  font: 400 16px var(--serif);
  color: var(--ink);
  outline: none;
  width: 100%;
}
.field input:focus { border-bottom-color: var(--accent); }

.field__label-optional {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  opacity: 0.7;
  margin-left: 4px;
}

.field textarea {
  background: transparent;
  border: 1px solid rgba(26, 26, 26, 0.35);
  padding: 12px 14px;
  font: 400 16px var(--serif);
  color: var(--ink);
  outline: none;
  width: 100%;
  resize: vertical;
  min-height: 84px;
  line-height: 1.4;
}
.field textarea:focus { border-color: var(--accent); }

.stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--ink);
  margin-top: 8px;
  width: max-content;
  background: transparent;
}
.stepper__btn {
  background: transparent;
  border: none;
  width: 44px;
  height: 44px;
  font: 400 22px var(--serif);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.stepper__btn:hover { background: var(--ink); color: var(--paper); }
.stepper input {
  border: none;
  border-left: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  width: 64px;
  text-align: center;
  font: 400 18px var(--serif);
  color: var(--ink);
  background: transparent;
  outline: none;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.reply-toggle {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.reply-toggle__btn {
  flex: 1;
  padding: 12px 10px;
  cursor: pointer;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: italic 400 15px var(--serif);
  letter-spacing: 0.04em;
  transition: background 0.2s, color 0.2s;
}

.reply-toggle__btn.is-selected {
  background: var(--ink);
  color: var(--paper);
}

.rsvp-form__submit {
  margin-top: 6px;
  padding: 14px 20px;
  cursor: pointer;
  border: 1px solid var(--ink);
  background: transparent;
  font: 400 12px var(--serif);
  color: var(--ink);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}

.rsvp-form__submit:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
}

.rsvp-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rsvp-thanks {
  text-align: center;
  padding: 24px 0;
}

.rsvp-thanks__line {
  font-style: italic;
  font-size: 22px;
  margin-bottom: 6px;
}

/* ── FOOTER ──────────────────────────────────────────────────── */

.foot {
  padding: clamp(20px, 4vw, 32px) var(--pad-x);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* On mobile the dynamic island sits opaquely over anything underneath,
     so stop trying to put the photo behind it. Push the page down by the
     top safe area, let the paper color fill that strip, and shrink the
     hero by the same amount so it still fills the rest of the screen. */
  body {
    padding-top: env(safe-area-inset-top, 0px);
  }
  .hero {
    height: calc(76vh - env(safe-area-inset-top, 0px));
    height: calc(76svh - env(safe-area-inset-top, 0px));
  }
  .hero__photo img { object-position: center 32%; }
  .band { aspect-ratio: 4 / 3; }

  .venue__name { font-size: clamp(48px, 12vw, 72px); }

  .schedule__row {
    grid-template-columns: 110px 1fr;
  }
  .schedule__time { font-size: 22px; }

  .palette { max-width: 100%; }
  .palette__name { font-size: 8px; letter-spacing: 0.12em; }

  .attire__cols {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }

  .foot {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .reply-toggle { flex-direction: column; }
  .schedule__detail { flex-direction: column; align-items: flex-start; gap: 2px; }
  .schedule__loc { padding-left: 0; }
  .wax-seal { width: 100px; height: 100px; }
  .wax-seal__monogram { font-size: 32px; }
}