/* Change --accent to re-color the whole site. */
:root {
  /* --bg matches the paper color of the home page sketch so the drawing blends in */
  --bg: #f9f0df;
  --field: #fffaf0;
  --ink: #161616;
  --muted: #6f685e;
  --line: #e2d6bd;
  --soft: #f2e7d1;
  --accent: #d2452d;
  /* Script used for the couple's names, monogram, and footer */
  --script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  --display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --body: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  /* Small caps-style labels, nav, and buttons */
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 64px);
  --max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.55;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 0.75em; }
a { color: inherit; }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

.muted { color: var(--muted); }
.label, .eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.label { margin-bottom: 10px; }

:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 3px; }

/* ── Nav ─────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gutter);
  background: rgba(249, 240, 223, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__mark {
  font-family: var(--script);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  text-decoration: none;
}
.nav__links { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.nav__links a {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav__links a:hover { color: var(--accent); }
.nav__links .nav__cta {
  padding: 10px 22px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
}
.nav__links .nav__cta:hover { background: var(--accent); color: #fff; }
.nav__toggle { display: none; }

/* Language toggle */
.lang { display: flex; align-items: center; gap: 4px; margin-left: 28px; }
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 5px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 400 11px var(--sans);
  letter-spacing: 0.18em;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s;
}
.lang__btn svg { display: block; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }
.lang__btn:hover { opacity: 1; }
.lang__btn[aria-pressed="true"] { opacity: 1; color: var(--ink); background: var(--field); border-color: var(--line); }

/* ── Hero ────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; }
/* The sketch fills the whole home screen behind the text. It is kept faint on phones
   (where the text sits on top of the building) and stronger on wide screens, with a
   soft cream veil on the left so the names and buttons stay easy to read. */
.hero__bg {
  position: absolute;
  inset: 0;
  background: url("home-page-background.jpg") center top / cover no-repeat;
  opacity: 0.38;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
}
@media (min-width: 761px) {
  .hero__bg {
    background-image:
      linear-gradient(to right, rgba(249, 240, 223, 0.88) 0%, rgba(249, 240, 223, 0.55) 32%, rgba(249, 240, 223, 0) 62%),
      url("home-page-background.jpg");
    opacity: 0.85;
  }
}
.hero__inner {
  position: relative;
  min-height: calc(100svh - 58px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px var(--gutter) 72px;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
}
.hero__names {
  /* --name-chars is set in main.js so short names get bigger type */
  font-size: clamp(64px, min(calc(150vw / var(--name-chars, 8)), 17svh), 240px);
  font-family: var(--script);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.95;
  margin: 24px 0 36px;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}
.hero__amp { color: var(--accent); font-size: 0.6em; line-height: 1; margin: -0.3em 0 -0.2em; padding-left: 0.5em; }
.hero__tagline { font-size: clamp(22px, 2.6vw, 28px); font-style: italic; max-width: 32ch; color: var(--muted); }

.countdown { display: flex; gap: clamp(24px, 4vw, 56px); margin: 28px 0 40px; }
.countdown div { display: flex; flex-direction: column; }
.countdown strong {
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.countdown span {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}

/* Slightly darker small text in the hero so it reads clearly over the sketch */
.hero .eyebrow, .hero__tagline, .hero .countdown span { color: #4f483e; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .btn:not(.btn--solid) { background: rgba(249, 240, 223, 0.7); }
.hero .btn:not(.btn--solid):hover { background: var(--ink); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 400 12px var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn--solid { background: var(--ink); color: var(--bg); }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn[disabled] { opacity: 0.5; cursor: default; }

@media (min-width: 761px) {
  /* Keep the whole hero (names through buttons) on the first screen of a laptop */
  .hero__inner { padding-top: 32px; padding-bottom: 48px; }
  .hero__names { font-size: clamp(64px, min(calc(150vw / var(--name-chars, 8)), 15svh), 240px); margin: 18px 0 28px; }
  .countdown { margin: 20px 0 32px; }
}

/* ── Sections ────────────────────────────────────── */
.section {
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(64px, 10vw, 120px) var(--gutter);
  border-top: 1px solid var(--line);
}
/* City sketch behind a run of sections. The drawing stays put while the
   sections scroll over it, and is kept faint so the text stays readable. */
.band { position: relative; border-top: 1px solid var(--line); }
.band__bg { position: absolute; inset: 0; pointer-events: none; }
.band__bg::before {
  content: "";
  display: block;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  background: url("city-background.jpg") center 55% / cover no-repeat;
  opacity: 0.3;
}
.band .section { position: relative; }
.band .section:first-of-type { border-top: 0; }
/* Darker secondary text so it reads clearly over the drawing */
.band .muted, .band .timeline p, .band .card p, .band .label { color: #554d42; }
.band .card { background: rgba(249, 240, 223, 0.82); }
.band .cards--plain .card { background: rgba(242, 231, 209, 0.9); }
.band .venue { background: rgba(242, 231, 209, 0.9); }

.section__head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 40px; }
.section__num { font: 400 12px var(--sans); color: var(--accent); letter-spacing: 0.2em; }
.section h2 { font-size: clamp(44px, 7vw, 88px); font-weight: 300; letter-spacing: -0.02em; }
.section h3 { font-size: 28px; font-weight: 500; margin-bottom: 8px; letter-spacing: 0; }
.lede { font-size: clamp(22px, 2.4vw, 27px); line-height: 1.45; max-width: 48ch; margin-bottom: 40px; }

.split { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }

.days { display: flex; flex-direction: column; gap: 48px; }
.day__head { margin-bottom: 14px; }
.day__head .label { margin-bottom: 6px; color: var(--accent); }
.day__title { font-size: 34px !important; font-weight: 500; margin-bottom: 6px !important; }
.day__intro { margin: 0; color: var(--muted); max-width: 48ch; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.timeline time {
  font: 400 12px var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  padding-top: 11px;
}
.timeline h3 { font-size: 27px; margin-bottom: 2px; }
.timeline p { margin: 0; color: var(--muted); }

.venue { background: var(--soft); padding: 36px; border-radius: 2px; }
.venue p:last-child { margin-bottom: 0; }
.venue [data-bind="venueAddress"] { white-space: pre-line; }

.link-arrow {
  display: inline-block;
  font: 400 12px var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}
.link-arrow::after { content: " →"; }
.link-arrow:hover { color: var(--accent); border-color: var(--accent); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 20px; }
.card { border: 1px solid var(--line); border-radius: 2px; padding: 32px; display: flex; flex-direction: column; }
.card p { color: var(--muted); }
.card .link-arrow { margin-top: auto; align-self: flex-start; }
.cards--plain .card { background: var(--soft); border-color: transparent; }

/* Hotel cards */
.card--hotel h3 { margin-bottom: 4px; }
.card__address {
  display: block;
  font-size: 17px;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  margin-bottom: 14px;
}
.card__address:hover { color: var(--accent); }
.card__photo {
  display: block;
  width: calc(100% + 64px);
  margin: 0 -32px 18px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 40%;
}
.code {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  margin: 4px 0 16px;
  border: 1px dashed var(--ink);
  border-radius: 2px;
}
.code .label { margin: 0; }
.code strong { font: 500 20px var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.card__booking { margin-bottom: 18px; }
.card__booking .label { display: block; }
.card__booking p { margin: 0; font-size: 18px; line-height: 1.5; }
.card--hotel .link-arrow { margin-top: auto; }

.rows a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  font: 400 clamp(28px, 4vw, 44px) var(--display);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color 0.15s, padding 0.15s;
}
.rows a:last-child { border-bottom: 1px solid var(--line); }
.rows a::after { content: "↗"; font: 300 0.6em var(--sans); }
.rows a:hover { color: var(--accent); padding-left: 10px; font-style: italic; }
/* Registry links that are not live yet: same look, but nothing happens on click */
.rows a.rows__soon { cursor: default; color: var(--muted); }
.rows a.rows__soon::after { content: ""; }
.rows a.rows__soon:hover { color: var(--muted); padding-left: 0; font-style: normal; }

.faq { max-width: 760px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 22px 0;
  font: 500 25px var(--display);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 24px var(--sans); line-height: 1; color: var(--accent); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); padding-bottom: 22px; margin: 0; max-width: 60ch; }

/* ── RSVP form ───────────────────────────────────── */
.form, .form__attending { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.form { max-width: 760px; }
.form__attending, .field--wide { grid-column: 1 / -1; }
.hp { position: absolute; left: -9999px; }

.field { display: flex; flex-direction: column; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend {
  font: 400 12px var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 0;
}
.field label .muted { letter-spacing: 0.1em; text-transform: none; }
.field input[type="text"], .field input[type="email"], .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--field);
  color: var(--ink);
  font: 400 20px var(--body);
  font-variant-numeric: lining-nums;
  transition: border-color 0.15s;
}
.field input::placeholder { color: #aaa6a1; font-style: italic; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea { resize: vertical; }

.choice { display: flex; flex-wrap: wrap; gap: 12px; }
.choice label { margin: 0; cursor: pointer; font: inherit; letter-spacing: 0; text-transform: none; }
.choice input { position: absolute; opacity: 0; }
.choice span {
  display: block;
  padding: 10px 26px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: italic 400 21px var(--body);
  transition: all 0.15s;
}
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.choice input:focus-visible + span { outline: 1.5px solid var(--accent); outline-offset: 3px; }

.checks { display: flex; flex-direction: column; gap: 14px; }
.checks label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font: 400 21px/1.3 var(--body);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.checks__day {
  display: inline-block;
  min-width: 84px;
  font: 400 12px var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.checks input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--field);
  cursor: pointer;
  transition: background 0.15s;
}
.checks input::before {
  content: "";
  width: 13px;
  height: 13px;
  background: var(--bg);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 84% 4%, 38% 68%);
  transform: scale(0);
  transition: transform 0.12s;
}
.checks input:checked { background: var(--ink); }
.checks input:checked::before { transform: scale(1); }

.form__submit { flex-direction: row; align-items: center; gap: 20px; flex-wrap: wrap; }
.form__status { margin: 0; font-style: italic; color: var(--accent); }

.thanks { background: var(--soft); padding: 56px 36px; border-radius: 2px; max-width: 760px; }
.thanks h3 { font-size: clamp(40px, 6vw, 64px); font-weight: 300; font-style: italic; margin-bottom: 12px; }
.thanks p { margin: 0; color: var(--muted); }

/* ── Footer ──────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding: 64px var(--gutter); text-align: center; }
.footer__names { font: 400 48px var(--script); line-height: 1.1; margin-bottom: 6px; }
.footer p:last-child { margin: 0; }

/* ── Small screens ───────────────────────────────── */
@media (max-width: 760px) {
  body { font-size: 20px; }
  .eyebrow { font-size: 10.5px; letter-spacing: 0.14em; }
  /* Tighter hero so both buttons stay on the first screen, even when they stack (Spanish) */
  .hero__inner { padding-top: 20px; padding-bottom: 36px; }
  .hero__names { margin: 14px 0 22px; }
  .countdown { margin: 18px 0 26px; }
  .btn { padding: 15px 26px; }
  .split, .form, .form__attending { grid-template-columns: 1fr; }
  /* Event tick boxes: day on its own line so long event names wrap neatly */
  .checks label { align-items: flex-start; }
  .checks__day { display: block; margin: 2px 0 2px; }
  .timeline li { grid-template-columns: 92px 1fr; }

  .nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    width: 40px;
    height: 40px;
    padding: 8px;
    margin: 0 -8px 0 6px;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .nav__toggle span { display: block; height: 1px; background: var(--ink); transition: transform 0.2s; }
  .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .nav__links.is-open { display: flex; }
  .lang { margin-left: auto; }
  .nav__links a { padding: 16px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
  .nav__links .nav__cta { margin-top: 16px; text-align: center; border: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}