/* ==========================================================
   Katie & Aiden: wedding website styles
   Colours and fonts are set once here in :root.
   ========================================================== */

:root {
  /* Colours */
  --paper: #faf8f4;        /* warm white background */
  --ink: #35333b;          /* main text */
  --ink-soft: #75717b;     /* secondary text */
  --line: #cfcac8;         /* thin rules and borders */
  --placeholder: #ebe6dd;  /* photo placeholders */

  /* Type */
  --serif: "Cormorant", "Cormorant Garamond", Garamond, "Times New Roman", serif;

  /* Layout */
  --column: 40rem;
  --column-wide: 58rem;
  --bar-height: 3.6rem;

  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-height) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.05rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover { text-decoration-color: var(--ink); }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

p { margin: 0 0 1em; }

.column      { width: min(100% - 3rem, var(--column));      margin-inline: auto; }
.column-wide { width: min(100% - 3rem, var(--column-wide)); margin-inline: auto; }

/* Small tracked capitals for dates and details */
.caps {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Italic underlined label, as on the invitations */
.label {
  display: inline-block;
  margin: 0 0 0.5rem;
  font-style: italic;
  font-size: 1.1em;
  border-bottom: 1px solid var(--ink-soft);
  line-height: 1.35;
}

.rule {
  width: 5rem;
  height: 0;
  margin: 0 auto;
  border: 0;
  border-top: 1px solid var(--line);
}

/* ---------- Menu links (used in the home screen and the top bar) ---------- */

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.6rem;
}
.menu a {
  font-style: italic;
  font-size: 1rem;
  text-decoration: none;
  padding-bottom: 0.1rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.menu a:hover { border-bottom-color: var(--line); }
.menu a.active { border-bottom-color: var(--ink); }

/* ---------- Top bar: appears once you scroll past the home screen ---------- */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: var(--bar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem;
  background: rgba(250, 248, 244, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(207, 202, 200, 0.6);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.topbar.show { transform: none; opacity: 1; }

.topbar .monogram {
  font-size: 1.15rem;
  letter-spacing: 0.3em;
  text-decoration: none;
  white-space: nowrap;
}
.topbar .monogram em { letter-spacing: 0; padding: 0 0.2em 0 0; }

.menu-toggle {
  display: none;
  font: inherit;
  font-style: italic;
  font-size: 1rem;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 0.05rem 0;
  cursor: pointer;
}

@media (max-width: 760px) {
  .menu-toggle { display: block; }
  .topbar .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 0 1rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .topbar .menu.open { display: flex; }
  .topbar .menu a { padding: 0.65rem 1.5rem; font-size: 1.15rem; border: 0; }
  .topbar .menu a.active { text-decoration: underline; text-decoration-color: var(--ink); }
}

/* ---------- Home screen: fills the first view ---------- */

.home {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem 7rem;
  position: relative;
}

/* Italic heading, same face as the welcome line */
.script-title {
  margin: 0 0 0.4rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
  line-height: 1.2;
}

.names {
  margin: 0.2rem 0 0.5rem;
  font-weight: 400;
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.5rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
}
.names em { font-weight: 300; letter-spacing: 0; padding: 0 0.12em; text-transform: none; }

.home .caps { margin: 0; line-height: 1.9; }
.home .menu { margin: 1.5rem 0 1.8rem; }
@media (max-height: 820px) and (min-width: 761px) {
  .home { padding-top: 1.5rem; }
  .home .menu { margin: 1rem 0 1.3rem; }
  .split { margin: 1.3rem auto 1rem; }
}

.hero-photo {
  width: min(100%, var(--column));
  aspect-ratio: 2 / 1;
  max-height: 34vh;
  object-fit: cover;
  background: var(--placeholder);
}

.split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 2.25rem);
  width: min(100%, 24rem);
  margin: 1.75rem auto 1.25rem;
}
.split p {
  margin: 0;
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
}
.split p:first-child { text-align: right; }
.split p:last-child  { text-align: left; }
.split .divider { width: 1px; height: 3.2rem; background: var(--ink-soft); }

.button {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}
.button:hover { background: transparent; color: var(--ink); }

.scroll-cue {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.scroll-cue::after {
  content: "";
  width: 1px;
  height: 2.2rem;
  background: var(--ink-soft);
  transform-origin: top;
}

/* ---------- Sections ---------- */

.section { padding: clamp(5rem, 11vw, 8rem) 0 0; }

.section-title {
  margin: 0 0 3rem;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.35rem + 1.2vw, 2.1rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.25;
}

.intro { margin-bottom: 1.2rem; font-style: italic; font-size: 1.25em; }

/* Our story */
.photo-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  --photo-gap: clamp(1.5rem, 5vw, 3rem);
  gap: var(--photo-gap);
  margin: 0 auto 5.5rem;
}
.photo-row figure { margin: 0; }
.photo-row figure:nth-child(2) { margin-top: 2.5rem; }
.photo-row img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--placeholder); }
.photo-row figcaption { margin-top: 0.6rem; font-style: italic; font-size: 0.95rem; color: var(--ink-soft); }

@media (max-width: 560px) {
  .photo-row { grid-template-columns: 1fr 1fr; }
  .photo-row figure:nth-child(2) { margin-top: 1.5rem; }
  /* Third photo sits centred under the first two, same size */
  .photo-row figure:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--photo-gap)) / 2);
  }
}

.story-text {
  text-align: left;
  column-gap: 4rem;
}
@media (min-width: 761px) { .story-text { columns: 2; } }
.story-text h3 {
  margin: 0 0 0.6rem;
  font-weight: 400;
  font-style: italic;
  font-size: 1.35em;
  line-height: 1.3;
  break-after: avoid;
}
.story-text p + h3 { margin-top: 2.25rem; }
.story-text p { orphans: 3; widows: 3; }

/* The weekend */
.event h3 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.3rem, 1.2rem + 0.6vw, 1.55rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.event > .caps { margin: 0.15rem 0 1.4rem; color: var(--ink-soft); }
.event .map-link { font-style: italic; }
.event + .event { margin-top: 4.5rem; }

.venue-sketch {
  /* Same width as the Travel & Stay photo, centred even though the text column is narrower */
  width: min(100vw - 3rem, var(--column-wide));
  max-width: none;
  margin: 0 0 2.25rem 50%;
  translate: -50% 0;
}

.order {
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1.1rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.5rem;
  padding: 0;
  text-align: left;
}
.order li { display: contents; }
.order time { font-style: italic; color: var(--ink-soft); text-align: right; white-space: nowrap; }

/* Travel */
.wide-photo {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  margin-bottom: 3.5rem;
  background: var(--placeholder);
}
.two-col { display: grid; gap: 2.75rem 3.5rem; }
.two-col.narrow { max-width: 48rem; margin-inline: auto; }
@media (min-width: 760px) { .two-col { grid-template-columns: 1fr 1fr; } }

.sub-title {
  margin: 4.5rem 0 2rem;
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.stays { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .stays { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.stay h4 { margin: 0 0 0.2rem; font-weight: 500; font-size: 1.2rem; }
.stay p { margin-bottom: 0.35rem; }
.stay .meta { font-style: italic; color: var(--ink-soft); }

.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding: 0.3rem 0; }

/* Q + A */
.faq { text-align: left; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  padding: 1rem 2rem 1rem 0;
  font-size: 1.12em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 0.85rem;
  font-weight: 300;
  font-size: 1.4em;
  line-height: 1;
  transition: transform 0.25s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.25rem; }

/* RSVP */
.rsvp-form { text-align: left; margin-top: 2.5rem; }
.field { margin: 0 0 1.6rem; padding: 0; border: 0; min-width: 0; }
.field > label:not(.choice),
.field legend {
  display: block;
  padding: 0;
  margin-bottom: 0.4rem;
  font-style: italic;
  font-size: 1.05em;
}
.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.55rem 0.1rem;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  transition: border-color 0.2s;
}
.field textarea { min-height: 5.5rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.choice { display: flex; align-items: center; gap: 0.6rem; margin: 0.35rem 0; cursor: pointer; }
.choice input { accent-color: var(--ink); width: 1rem; height: 1rem; margin: 0; }
.rsvp-form .button { display: block; margin: 2.5rem auto 0; padding: 0.7rem 2.2rem; }
.form-status { text-align: center; font-style: italic; margin-top: 1.5rem; min-height: 1.6em; }
.form-status.ok  { color: #5e7a50; }
.form-status.err { color: #9a4a4a; }
.hidden { display: none; }

/* Footer */
.site-footer { padding: clamp(5rem, 11vw, 8rem) 1.5rem 3.5rem; }
.site-footer .rule { margin-bottom: 3rem; }
.site-footer .caps { color: var(--ink-soft); margin: 0.5rem 0 0; }

/* ---------- Big screens: larger home screen ---------- */

@media (min-width: 1000px) {
  .home .script-title { font-size: 3.5rem; }
  .names { font-size: 4rem; margin: 0.3rem 0 0.8rem; }
  .home .caps { font-size: 1.28rem; }
  .home .menu { gap: 0.5rem 2.6rem; margin: 2.4rem 0 5.4rem; }
  .home .menu a { font-size: 1.6rem; }
  .hero-photo { width: min(100%, 64rem); max-height: none; }
  .split { margin: 5.25rem auto 1.25rem; }
}

/* ==========================================================
   ANIMATION
   The home screen fades in piece by piece when the page opens.
   Everything below appears gently as you scroll to it.
   The venue drawing sketches itself in from left to right.
   Visitors who prefer reduced motion see everything at once.
   ========================================================== */

@media (prefers-reduced-motion: no-preference) {
  .home > * { animation: rise 1s ease-out both; }
  .home > :nth-child(1) { animation-delay: 0.15s; }
  .home > :nth-child(2) { animation-delay: 0.45s; }
  .home > :nth-child(3) { animation-delay: 0.65s; }
  .home > :nth-child(4) { animation-delay: 0.75s; }
  .home > :nth-child(5) { animation-delay: 0.9s; }
  .home > :nth-child(6) { animation-delay: 1.1s; }
  .home > :nth-child(7) { animation-delay: 1.3s; }
  .home > :nth-child(8) { animation-delay: 1.45s; }
  .home > .scroll-cue { animation: cue-in 1s 2s ease-out both; }
  .scroll-cue::after { animation: cue-line 2.4s 3s ease-in-out infinite; }

  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 1s ease-out, transform 1s ease-out;
  }
  .js .reveal.in { opacity: 1; transform: none; }

  .js .venue-sketch {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 2.6s cubic-bezier(0.45, 0, 0.2, 1) 0.2s;
  }
  .js .venue-sketch.in { clip-path: inset(0 0 0 0); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cue-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cue-line {
  0%   { transform: scaleY(0); }
  50%  { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0; }
}