/* ==========================================================================
   Rosie & Joe — Wedding Site
   Design system & styles — "Walled Garden in Winter Light"

   Warm, restrained keepsake palette on an ivory canvas. Cormorant Light
   Italic for display, Spectral for body, Cormorant SC for labels, Jost for
   utility. Fine sage rules, a film-grain hero overlay, sparing botanical
   marks. No drop shadows, no gold, no pure white, no bold weights.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens (CSS custom properties)
   -------------------------------------------------------------------------- */
:root {
  /* Palette */
  --ivory:     #f6f2ea;  /* warm parchment — primary background */
  --stone:     #352f28;  /* deep warm near-black — body text */
  --sage:      #7e9178;  /* dusty sage — botanical accent, fine rules */
  --terra:     #a8573d;  /* muted terracotta — the single warm accent */
  --terra-light: #d99877;  /* lighter terracotta tint — legible on the dark hero photo */
  --taupe:     #9a8f82;  /* warm taupe — secondary / muted text */
  --limestone: #eae5dc;  /* paler than ivory — card surfaces, inset areas */

  /* A translucent sage for fine hairlines (~35% opacity) */
  --rule: rgba(126, 145, 120, 0.35);

  /* Typography */
  --font-display:    "Cormorant", Georgia, "Times New Roman", serif;
  --font-small-caps: "Cormorant SC", Georgia, "Times New Roman", serif;
  --font-body:       "Spectral", Georgia, "Times New Roman", serif;
  --font-utility:    "Jost", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Type scale */
  --fs-sm: 0.875rem;
  --fs-lg: 1.4rem;
  --fs-xl: clamp(1.6rem, 4vw, 2.25rem);    /* sub-display / pull statements */
  --fs-2xl: clamp(2.25rem, 6vw, 3.25rem);  /* page titles */
  --fs-3xl: clamp(3rem, 9vw, 6rem);        /* the one big hero moment */

  /* Spacing scale (retained for layout rules) */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  /* Rhythm & layout */
  --section-gap: clamp(4rem, 8vw, 7rem);
  --text-max:    680px;
  --container-max: 1080px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 0.25s ease;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--ivory);
  color: var(--stone);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings — weight comes from size, never from boldness. */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
  color: var(--stone);
}

h1 { font-size: var(--fs-2xl); font-style: italic; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

p {
  margin: 0 0 var(--space-md);
}

/* Links — terracotta text with a matching underline, darkening on hover. */
a {
  color: var(--terra);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--terra) 40%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.15s ease;
}

a:hover,
a:focus-visible {
  text-decoration-color: var(--terra);
}

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

/* --------------------------------------------------------------------------
   Utility classes
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section {
  padding: var(--section-gap) 0;
}

/* Inset surface — used for the RSVP block. Paler than ivory, thin sage rules. */
.section--alt {
  background-color: var(--limestone);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* Constrain running prose to a comfortable measure. */
.prose {
  max-width: var(--text-max);
}

.text-center {
  text-align: center;
}

/* Section labels — structural signposts, not headings. Always taupe. */
.eyebrow {
  display: block;
  font-family: var(--font-small-caps);
  font-weight: 400;
  font-size: 0.8125rem;        /* ~13px */
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: var(--space-md);
}

/* Buttons — Jost utility type, terracotta as the single accent. No shadow. */
.btn {
  display: inline-block;
  font-family: var(--font-utility);
  font-weight: 300;
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 2rem;
  border: 1px solid var(--terra);
  border-radius: 2px;
  background-color: var(--terra);
  color: var(--ivory);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition);
}

.btn:hover,
.btn:focus-visible {
  background-color: transparent;
  color: var(--terra);
  text-decoration: none;
}

.btn--outline {
  background-color: transparent;
  color: var(--terra);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background-color: var(--terra);
  color: var(--ivory);
}

/* Botanical line marks — thin single-stroke SVG in sage. */
.botanical {
  display: block;
  fill: none;
  stroke: var(--sage);
  stroke-width: 0.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Fine horizontal rule between passages. */
.rule {
  border: 0;
  height: 1px;
  background-color: var(--rule);
  margin: var(--space-xl) 0;
}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Navigation — quiet, not a bar competing with the imagery
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(246, 242, 234, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}

.nav__logo {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--stone);
  text-decoration: none;
}

.nav__logo:hover {
  text-decoration: none;
}

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--stone);
  transition: transform var(--transition), opacity var(--transition);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  font-family: var(--font-utility);
  font-weight: 300;
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--taupe);
  text-decoration: none;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.nav__link:hover {
  color: var(--stone);
  text-decoration: none;
}

.nav__link.active {
  color: var(--stone);
  border-bottom-color: var(--terra);
}

/* --------------------------------------------------------------------------
   Hero — wide and quiet; names overlaid in light italic
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  min-height: calc(100vh - 64px);
  padding: var(--space-xl) var(--space-md);
  background-color: var(--limestone);
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ivory);
}

/* Hero banner image — Eyam Hall. Filter lives on this layer (not .hero)
   so the Ektar colour signature doesn't bleed onto the text above it. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../images/eyam-hall.png") center / cover no-repeat;
  filter: contrast(1.03) saturate(0.92) sepia(0.06);
}

/* Scrim — darkens the photo so the ivory text reads clearly. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(53, 47, 40, 0.45) 0%,
    rgba(53, 47, 40, 0.6) 100%
  );
}

/* Film grain — the signature element. ~8% opacity, subliminal. */
.hero-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Hero content sits above the image, scrim and grain. */
.hero > *:not(.hero-grain):not(.hero__bg):not(.hero__scrim) {
  position: relative;
  z-index: 3;
}

.hero__mark {
  width: 38px;
  height: auto;
  margin: 0 auto var(--space-md);
  opacity: 0.9;
}

.hero__names {
  font-size: var(--fs-3xl);
  font-style: italic;
  margin: 0 0 var(--space-md);
  letter-spacing: 0.01em;
}

.hero__date {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-xl);
  color: var(--terra-light);
  margin: 0 0 var(--space-md);
}

/* The botanical mark and outline button use sage/terra elsewhere against
   the ivory canvas; on the hero's dark photo those muted tones disappear,
   so lighten them here to keep the same accent without losing legibility. */
.hero .botanical {
  stroke: var(--ivory);
}

.hero .btn--outline {
  border-color: var(--terra-light);
  color: var(--terra-light);
}

.hero .btn--outline:hover,
.hero .btn--outline:focus-visible {
  background-color: var(--terra-light);
  color: var(--stone);
}

.hero .btn:hover,
.hero .btn:focus-visible {
  color: var(--terra-light);
}

.hero__tagline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-lg);
  color: var(--ivory);
  opacity: 0.85;
  max-width: 36ch;
  margin: 0 auto;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-xl);
}

/* --------------------------------------------------------------------------
   Figure — letterbox intro image, shot-on-film treatment
   -------------------------------------------------------------------------- */
.figure {
  margin: 0;
}

/* Full-bleed: the image sits directly in <main>, which already spans the
   full page width (like the hero), so no viewport-breakout trick is needed —
   using 100vw here would overflow past the scrollbar on the right. */
.figure--bleed {
  width: 100%;
}

/* Banner: a shallower crop than the standard letterbox figure, for images
   used as a low-profile divider rather than a full editorial moment. */
.figure--banner .figure__img {
  aspect-ratio: 16 / 5;
}

.figure__img {
  display: block;
  width: 100%;
  /* Letterbox crop — never square, per the concept. */
  aspect-ratio: 21 / 9;
  object-fit: cover;
  /* Ektar / 35mm colour signature. */
  filter: contrast(1.03) saturate(0.92) sepia(0.06);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.figure__caption {
  font-family: var(--font-small-caps);
  font-weight: 400;
  font-size: 0.8125rem;        /* ~13px */
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--taupe);
  text-align: center;
  margin-top: var(--space-md);
}

/* Photo credit — quiet utility line beneath a borrowed image's caption. */
.figure__credit {
  font-family: var(--font-utility);
  font-weight: 200;
  font-size: 0.75rem;
  color: var(--taupe);
  text-align: center;
  margin-top: var(--space-xs);
}

.figure__credit a {
  color: var(--taupe);
}

/* --------------------------------------------------------------------------
   Split — portrait image beside prose (welcome note)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 5fr 6fr;   /* portrait slightly narrower than the prose */
  gap: var(--space-xl);
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
}

.split__figure {
  margin: 0;
}

.split__img {
  display: block;
  width: 100%;
  /* Gentle portrait crop — never square, per the concept. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Ektar / 35mm colour signature — matches .figure__img. */
  filter: contrast(1.03) saturate(0.92) sepia(0.06);
  /* Thin sage hairline frame. */
  border: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   Page header (interior pages) — left-aligned, like a letter
   -------------------------------------------------------------------------- */
.page-header {
  max-width: var(--text-max);
  margin: 0 auto;
  padding: var(--section-gap) var(--space-md) var(--space-lg);
}

.page-header h1 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-md);
}

.page-header p {
  color: var(--taupe);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Prose blocks (welcome note, accommodation)
   -------------------------------------------------------------------------- */
.note {
  max-width: var(--text-max);
  margin: 0 auto;
}

.note__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: 1.3;
  color: var(--stone);
  margin-bottom: var(--space-lg);
}

.note .hero__actions {
  justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   Two-column detail rows
   -------------------------------------------------------------------------- */
.detail {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-xl);
  align-items: start;
  max-width: var(--container-max);
  margin: 0 auto;
}

.detail__meta h2 {
  margin-bottom: var(--space-sm);
}

.detail__time {
  display: block;
  font-family: var(--font-utility);
  font-weight: 300;
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--taupe);
}

.address {
  font-style: normal;
  color: var(--taupe);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

/* --------------------------------------------------------------------------
   Schedule timeline — a quiet list, no icons
   -------------------------------------------------------------------------- */
.timeline {
  list-style: none;
  max-width: var(--text-max);
  margin: 0 auto;
  padding: 0;
}

.timeline__item {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--space-md);
  align-items: baseline;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--rule);
}

.timeline__item:last-child {
  border-bottom: none;
}

.timeline__time {
  font-family: var(--font-utility);
  font-weight: 300;
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--taupe);
}

.timeline__event {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--stone);
}

.timeline__event span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--taupe);
}

/* --------------------------------------------------------------------------
   Payment details (gift — bank transfer)
   -------------------------------------------------------------------------- */
.payment-details {
  max-width: var(--text-max);
  margin: var(--space-lg) 0 0;
}

.payment-details__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--rule);
}

.payment-details__row:last-child {
  border-bottom: none;
}

.payment-details dt {
  font-family: var(--font-utility);
  font-weight: 300;
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--taupe);
}

.payment-details dd {
  margin: 0;
  font-family: var(--font-utility);
  font-size: var(--fs-lg);
  color: var(--stone);
  letter-spacing: 0.04em;
  text-align: right;
}

/* --------------------------------------------------------------------------
   Link list (accommodation)
   -------------------------------------------------------------------------- */
.link-list {
  list-style: none;
  max-width: var(--text-max);
  margin: var(--space-lg) auto 0;
  padding: 0;
}

.link-list li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--rule);
}

.link-list li:last-child {
  border-bottom: none;
}

.link-list a {
  color: var(--terra);
}

/* --------------------------------------------------------------------------
   Embeds (RSVP form / map)
   -------------------------------------------------------------------------- */
.embed {
  max-width: var(--container-max);
  margin: var(--space-lg) auto 0;
}

.embed iframe {
  width: 100%;
  height: 900px;
  border: 0;
  display: block;
}

.embed__cta {
  margin: var(--space-sm) 0 0;
}

/* The mat — gives a bare cross-origin iframe (Google Forms, Maps) a
   considered border instead of sitting raw on the section background. */
.embed__frame {
  background-color: var(--ivory);
  padding: var(--space-md);
  border: 1px solid var(--rule);
}

/* Considered placeholder — a letterbox limestone panel with grain, not a grey
   box. No "image coming soon" styling beyond the copy itself. */
.embed__placeholder {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 21 / 9;
  min-height: 280px;
  color: var(--taupe);
  background-color: var(--limestone);
  border: 1px solid var(--rule);
  padding: var(--space-lg);
}

.embed__placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.embed__placeholder p {
  position: relative;
  z-index: 1;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Footer — minimal
   -------------------------------------------------------------------------- */
.site-footer {
  text-align: center;
  padding: var(--section-gap) var(--space-md);
  border-top: 1px solid var(--rule);
  background-color: var(--ivory);
}

.site-footer__ornament {
  width: 32px;
  height: auto;
  margin: 0 auto var(--space-md);
  opacity: 0.9;
}

.site-footer__date {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  margin-bottom: var(--space-xs);
}

.site-footer__note {
  font-family: var(--font-utility);
  font-weight: 300;
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  color: var(--taupe);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Responsive — mobile-first, single breakpoint at 768px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .nav__toggle {
    display: flex;
  }

  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--ivory);
    border-bottom: 1px solid var(--rule);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }

  .nav__links.open {
    max-height: 360px;
  }

  .nav__links li {
    text-align: center;
    border-top: 1px solid var(--rule);
  }

  .nav__link {
    display: block;
    padding: var(--space-sm);
    border-bottom: none;
  }

  .nav__link.active {
    border-bottom: none;
    background-color: var(--limestone);
  }

  .split {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .detail {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .timeline__item {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  .embed__frame {
    padding: var(--space-sm);
  }

  .embed iframe {
    height: 1200px;
  }
}