/* ==========================================================================
   Wedding Site - Global Stylesheet
   --------------------------------------------------------------------------
   Contents
     1.  Design tokens (colours, type, spacing)
     2.  Reset & base elements
     3.  Layout helpers (container, section, grid)
     4.  Typography helpers (eyebrow, ornament divider)
     5.  Buttons
     6.  Navigation
     7.  Hero
     8.  Countdown
     8b. Fact band (home page)
     9.  Cards
     9b. Story photos (then & now)
     10. Timeline (schedule)
     10b.Weekend day cards & grouped schedule
     11. Detail panels (ceremony / reception)
     11b.Travel guide (jump nav, place lists, phrases, callout)
     11c.Forms (RSVP)
     11d.Travel map (interactive map of Romania)
     12. Footer
     13. Scroll reveal animations
     14. Print / reduced motion
   ========================================================================== */


/* 1. DESIGN TOKENS
   Change these values to re-skin the whole site.
   ========================================================================== */
:root {
  /* Colour palette */
  --cream:      #faf7f1;   /* page background */
  --ivory:      #fffdf9;   /* raised surfaces, cards */
  --shell:      #f3ede3;   /* alternate section background */
  --ink:        #2f2e2a;   /* primary text */
  --ink-soft:   #6d6a61;   /* secondary text */
  --sage:       #8d9c84;   /* primary accent */
  --sage-deep:  #5e6c57;   /* accent, darker (links, hovers) */
  --gold:       #c0a062;   /* metallic accent, used sparingly */
  --line:       #e5ddd0;   /* hairline borders */

  /* Travel map only (travel.html) */
  --wine:       #8f5468;   /* wine region and winery pins */
  --slate:      #6c7a85;   /* cities, and the sea label */
  --clay:       #a97449;   /* curiosities */
  --map-water:  #e6eded;   /* the Black Sea */
  --map-abroad: #efe8db;   /* countries over the border */
  --map-land:   #fffdf9;   /* Romania itself */

  /* Typography */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-body:    "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  /* Layout */
  --measure: 1140px;        /* max content width */
  --measure-narrow: 720px;  /* max width for prose */
  --nav-height: 68px;

  /* Effects */
  --radius: 3px;
  --shadow-soft: 0 1px 2px rgba(47, 46, 42, 0.04),
                 0 8px 24px rgba(47, 46, 42, 0.06);
  --transition: 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* 2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Stops sticky nav from covering anchor targets */
  scroll-padding-top: calc(var(--nav-height) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 var(--space-sm);
  color: var(--ink);
}

h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); letter-spacing: 0.01em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); }
h4 { font-size: 1.0625rem; font-family: var(--font-body); font-weight: 700; }

p { margin: 0 0 var(--space-sm); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--sage-deep);
  text-decoration-color: rgba(94, 108, 87, 0.35);
  text-underline-offset: 0.25em;
  transition: color var(--transition);
}
a:hover { color: var(--gold); }

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

ul, ol { margin: 0 0 var(--space-sm); padding-left: 1.25rem; }
li { margin-bottom: 0.35rem; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-md) 0;
}

:focus-visible {
  outline: 2px solid var(--sage-deep);
  outline-offset: 3px;
}

/* Visually hidden, still read by screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--ivory);
  padding: 0.75rem 1.25rem;
}
.skip-link:focus {
  left: 0;
  color: var(--ivory);
}


/* 3. LAYOUT HELPERS
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.container--narrow { max-width: var(--measure-narrow); }

.section {
  padding-block: var(--space-lg);
}

.section--alt { background-color: var(--shell); }

.section--tight { padding-block: var(--space-md); }

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-md);
}

.section-head p { color: var(--ink-soft); }

.grid {
  display: grid;
  gap: var(--space-md);
}

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

@media (min-width: 760px) {
  .section { padding-block: var(--space-xl); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}


/* 4. TYPOGRAPHY HELPERS
   ========================================================================== */

/* Small caps label above a heading */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: var(--space-xs);
}

.eyebrow--gold { color: var(--gold); }

.lead {
  font-size: 1.1875rem;
  color: var(--ink-soft);
  line-height: 1.8;
}

.muted { color: var(--ink-soft); }

.script {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--sage-deep);
}

/* Thin gold rule with a diamond in the middle */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: var(--space-md) auto;
  max-width: 260px;
  color: var(--gold);
}
.ornament::before,
.ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.ornament span {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  border: 1px solid var(--gold);
  flex: none;
}


/* 5. BUTTONS
   ========================================================================== */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 2.25rem;
  border: 1px solid var(--sage-deep);
  border-radius: var(--radius);
  background-color: var(--sage-deep);
  color: var(--ivory);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.btn:hover {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
  transform: translateY(-1px);
}

.btn--outline {
  background-color: transparent;
  color: var(--sage-deep);
}
.btn--outline:hover {
  background-color: var(--sage-deep);
  color: var(--ivory);
  border-color: var(--sage-deep);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}


/* 6. NAVIGATION
   ========================================================================== */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(250, 247, 241, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* .is-scrolled is toggled by main.js once the page scrolls */
.site-nav.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px rgba(47, 46, 42, 0.05);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--nav-height);
  gap: var(--space-sm);
}

.nav-brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav-brand:hover { color: var(--gold); }

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
}
.nav-links li { margin: 0; }

.nav-links a {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.5rem;
  position: relative;
}

/* Underline grows in on hover / for the active page */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--sage-deep); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { display: block; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* --- Mobile navigation --- */
@media (max-width: 759px) {
  .nav-toggle { display: block; }

  .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(--line);
    box-shadow: var(--shadow-soft);
    padding: var(--space-xs) 1.5rem var(--space-sm);

    /* Hidden by default; .is-open is toggled by main.js */
    display: none;
  }
  .nav-links.is-open { display: flex; }

  .nav-links a {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-links li:last-child a { border-bottom: 0; }
  .nav-links a::after { display: none; }
}


/* 7. HERO
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100vh - var(--nav-height));  /* fallback */
  min-height: calc(100svh - var(--nav-height)); /* ignores mobile browser chrome */
  padding-block: var(--space-lg);
  overflow: hidden;

  /* Soft gradient stands in until you add a photo.
     To use a real image, drop it at assets/img/hero.jpg and swap the two
     declarations below for the commented-out block. */
  background:
    radial-gradient(ellipse at 50% 0%,  rgba(192, 160, 98, 0.10), transparent 60%),
    radial-gradient(ellipse at 20% 90%, rgba(141, 156, 132, 0.16), transparent 55%),
    linear-gradient(160deg, var(--ivory) 0%, var(--cream) 45%, var(--shell) 100%);

  /*
  background-image: linear-gradient(rgba(250, 247, 241, 0.55), rgba(250, 247, 241, 0.75)),
                    url("../img/hero.jpg");
  background-size: cover;
  background-position: center;
  */
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.hero-names {
  margin-bottom: var(--space-sm);
  line-height: 1.05;
}

.hero-amp {
  display: block;
  font-style: italic;
  font-size: 0.45em;
  color: var(--gold);
  margin-block: 0.15em;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-md);
}

.hero-meta .divider-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--gold);
}

@media (max-width: 480px) {
  /* Stack the date / location instead of squeezing them onto one line */
  .hero-meta { flex-direction: column; gap: 0.4rem; }
  .hero-meta .divider-dot { display: none; }
}

/* Subtle "scroll down" cue at the bottom of the hero */
.scroll-cue {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.scroll-cue::after {
  content: "";
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);   transform-origin: top; }
}


/* 8. COUNTDOWN
   ========================================================================== */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  max-width: 520px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.countdown li {
  margin: 0;
  padding: 1rem 0.35rem;
  background-color: rgba(255, 253, 249, 0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.countdown-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.countdown-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Small phones: tighten so "Minutes" and "Seconds" don't wrap */
@media (max-width: 400px) {
  .countdown { gap: 0.35rem; }
  .countdown li { padding: 0.85rem 0.15rem; }
  .countdown-label { font-size: 0.5625rem; letter-spacing: 0.1em; }
}

/* Shown by main.js if the wedding date has passed */
.countdown-done {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--sage-deep);
}


/* 8b. FACT BAND (home page)
   The three facts directly under the hero: when, where, how long. Three
   columns on a wide screen, stacked with hairline rules between them on a
   phone, so the answer is legible before anything else loads.
   ========================================================================== */
.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}

.facts li {
  margin: 0;
  padding: var(--space-md) var(--space-sm);
  border-top: 1px solid var(--line);
}
.facts li:first-child { border-top: 0; }

.fact-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-xs);
}

.fact-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  line-height: 1.25;
  color: var(--ink);
}

.fact-note {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (min-width: 760px) {
  .facts { grid-template-columns: repeat(3, 1fr); }
  .facts li {
    border-top: 0;
    border-left: 1px solid var(--line);
    padding-block: 0;
  }
  .facts li:first-child { border-left: 0; }
}


/* 9. CARDS
   ========================================================================== */
.card {
  background-color: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-md);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition), box-shadow var(--transition);
}

.card--link:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(47, 46, 42, 0.05),
              0 16px 36px rgba(47, 46, 42, 0.09);
}

.card h3 { margin-bottom: var(--space-xs); }
.card p  { color: var(--ink-soft); }

.card-icon {
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

.card-link {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.card-link::after {
  content: " \2192";
  transition: opacity var(--transition);
}


/* 9b. STORY PHOTOS (then & now)
   Two portraits side by side on story.html. Both files are cropped to 4:5
   before they're saved, so the pair always lines up.
   ========================================================================== */
.story-pair {
  display: grid;
  gap: var(--space-md);
  margin: var(--space-lg) 0 var(--space-md);
}

.story-pair figure {
  margin: 0;
}

.story-pair img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.story-pair figcaption {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

@media (min-width: 560px) {
  .story-pair { grid-template-columns: repeat(2, 1fr); }
}


/* 10. TIMELINE (schedule)
   ========================================================================== */
.timeline {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--measure-narrow);
  position: relative;
}

/* Vertical hairline running behind the markers */
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 10%,
                              var(--line) 90%, transparent);
}

.timeline li {
  position: relative;
  margin: 0;
  padding: 0 0 var(--space-md) 2.25rem;
}
.timeline li:last-child { padding-bottom: 0; }

.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--cream);
  border: 1px solid var(--gold);
}

.timeline-time {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.15rem;
}

.timeline-title {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  margin-bottom: 0.25rem;
}

.timeline-note { color: var(--ink-soft); margin: 0; }

@media (min-width: 760px) {
  .section--alt .timeline li::before { background-color: var(--shell); }
}


/* 10b. WEEKEND DAY CARDS & GROUPED SCHEDULE
   Used on details.html, where the celebration runs Friday to Sunday.
   ========================================================================== */

/* --- Day cards: the "weekend at a glance" row --- */
.day-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  background-color: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-sm);
  box-shadow: var(--shadow-soft);
}

/* The main day is emphasised with a gold rule along the top */
.day-card--main {
  border-color: rgba(192, 160, 98, 0.5);
  box-shadow: 0 2px 4px rgba(47, 46, 42, 0.05),
              0 16px 36px rgba(47, 46, 42, 0.08);
}
.day-card--main::before {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background-color: var(--gold);
  margin: 0 auto var(--space-sm);
}

.day-card .day-name {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}

.day-card .day-date {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 0.15rem;
}

.day-card .day-month {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-sm);
}

.day-card h3 { margin-bottom: 0.35rem; }
.day-card p  { color: var(--ink-soft); }

.day-card .day-time {
  font-size: 0.9375rem;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 0.35rem;
}

/* Dress note pinned to the bottom so the three cards line up */
.day-card .day-dress {
  margin-top: auto;
  padding-top: var(--space-sm);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

/* --- Grouped schedule: one timeline per day --- */
.day-block { margin-bottom: var(--space-lg); }
.day-block:last-child { margin-bottom: 0; }

.day-block-head {
  text-align: center;
  margin-bottom: var(--space-md);
}

.day-block-head h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 0.15rem;
}

.day-block-head .day-when {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}


/* 11. DETAIL PANELS (ceremony / reception)
   ========================================================================== */
.detail-panel {
  background-color: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-md);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}

.detail-panel h3 { margin-bottom: 0.25rem; }

.detail-list {
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0 var(--space-md);
}

.detail-list li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0.75rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.detail-list li:last-child { border-bottom: 0; }

.detail-list dt,
.detail-list .label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 0.3rem;
}

.detail-list .value { margin: 0; }
.detail-list .value strong { font-weight: 700; }

.detail-panel .btn { align-self: flex-start; margin-top: auto; }

/* Small phones: stack the label above its value rather than squeezing
   addresses into a narrow second column */
@media (max-width: 420px) {
  .detail-list li {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
  .detail-list .label { padding-top: 0; }
  .detail-panel { padding: var(--space-sm) 1.25rem var(--space-md); }
}

/* Dress code swatches */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
}

.swatches li {
  margin: 0;
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  width: 78px;
}

.swatch {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 0.5rem;
  border: 1px solid var(--line);
}


/* 11b. TRAVEL GUIDE
   ========================================================================== */

/* --- Jump links at the top of a long page --- */
.jump-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
}
.jump-nav li { margin: 0; }

.jump-nav a {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background-color: var(--ivory);
  transition: color var(--transition), border-color var(--transition);
}
.jump-nav a:hover {
  color: var(--sage-deep);
  border-color: var(--sage);
}

/* --- Place list: a named recommendation with a short note --- */
.place-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.place-list > li {
  margin: 0;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--line);
}
.place-list > li:first-child { padding-top: 0; }
.place-list > li:last-child  { border-bottom: 0; padding-bottom: 0; }

.place-name {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  margin: 0 0 0.15rem;
}
.place-name a { text-decoration: none; }

.place-meta {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.35rem;
}

.place-list p { color: var(--ink-soft); margin: 0; }
.place-list p + p { margin-top: 0.55rem; }

/* --- Callout: a highlighted aside --- */
.callout {
  border-left: 2px solid var(--gold);
  background-color: var(--ivory);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callout p { color: var(--ink-soft); }
.callout strong { color: var(--ink); }

/* --- Packing checklist --- */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: var(--space-md);
}
.check-list li {
  break-inside: avoid;
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: 0.6rem;
  color: var(--ink-soft);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--sage);
  border-bottom: 1.5px solid var(--sage);
  transform: rotate(-45deg);
}
@media (max-width: 560px) {
  .check-list { columns: 1; }
}

/* --- Romanian phrases --- */
.phrases {
  margin: 0;
  display: grid;
  gap: 0;
}

.phrase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 1.5rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.phrase:last-child { border-bottom: 0; }

.phrase dt {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--ink);
  grid-column: 1;
}

.phrase .phrase-say {
  grid-column: 1;
  margin: 0;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0.02em;
}

.phrase .phrase-mean {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .phrase { grid-template-columns: 1fr; }
  .phrase .phrase-mean { grid-column: 1; grid-row: auto; margin-top: 0.2rem; }
}


/* 11c. FORMS (RSVP)
   ========================================================================== */
.form {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}

.field { margin-bottom: var(--space-md); }

.field > label,
.fieldset-legend {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.field-note {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.req { color: var(--gold); }

.input,
select.input,
textarea.input {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background-color: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
}

textarea.input { min-height: 130px; resize: vertical; }

/* Native arrow is removed by appearance:none, so draw one */
select.input {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236d6a61' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.input:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(141, 156, 132, 0.18);
}

/* Only flag invalid fields after the user has interacted with them */
.input:user-invalid {
  border-color: #b4685f;
  box-shadow: 0 0 0 3px rgba(180, 104, 95, 0.14);
}

/* --- Radio / checkbox groups --- */
fieldset.field {
  border: 0;
  padding: 0;
  margin-inline: 0;
  min-width: 0;
}

.choice-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.choice-group--row { flex-direction: row; flex-wrap: wrap; gap: 0.75rem; }

.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  background-color: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}
.choice:hover { border-color: var(--sage); }

.choice input {
  margin: 0;
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--sage-deep);
  margin-top: 0.22rem;
}

.choice-text { display: block; }
.choice-text strong { display: block; font-weight: 700; }
.choice-text .choice-sub {
  display: block;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.choice-text .choice-cost {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--gold);
}

.choice-group--row .choice { flex: 1 1 140px; }

/* --- Submit + status --- */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.form-status {
  margin-top: var(--space-sm);
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
}
.form-status[hidden] { display: none; }

.form-status--ok {
  background-color: rgba(141, 156, 132, 0.14);
  border: 1px solid var(--sage);
  color: var(--sage-deep);
}
.form-status--error {
  background-color: rgba(180, 104, 95, 0.1);
  border: 1px solid #b4685f;
  color: #8d4a43;
}

/* Honeypot - hidden from people, visible to naive spam bots */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Success panel shown in place of the form after a successful submit */
.form-done {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  background-color: var(--ivory);
  border: 1px solid var(--sage);
  border-radius: var(--radius);
}
.form-done[hidden] { display: none; }

/* What the guest sent, read back under the form's own labels */
.form-summary {
  text-align: left;
  margin: var(--space-md) 0 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}
.form-summary dt {
  color: var(--ink-soft);
  font-size: 0.875rem;
  margin-top: 0.75rem;
}
.form-summary dd {
  margin: 0.125rem 0 0;
  overflow-wrap: anywhere;
}

/* Bank details on gifts.html: a centred two-column label / value list */
.gift-details {
  display: grid;
  grid-template-columns: auto minmax(0, auto);
  justify-content: center;
  gap: 0.375rem 1.25rem;
  margin: var(--space-md) 0 0;
  text-align: left;
}
.gift-details dt {
  color: var(--ink-soft);
  font-size: 0.875rem;
  align-self: baseline;
}
.gift-details dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}


/* 11d. TRAVEL MAP
   The interactive map of Romania on travel.html. The SVG terrain is static
   (built from Natural Earth data - see CLAUDE.md); the pins and the place
   labels are absolutely positioned over it by initMap() in main.js, which is
   why .map-canvas has to keep the SVG's 1000 × 740 aspect ratio exactly.
   ========================================================================== */

.map-layout {
  display: grid;
  gap: var(--space-md);
  align-items: start;
}

@media (min-width: 900px) {
  .map-layout { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); }
  .map-frame  { position: sticky; top: calc(var(--nav-height) + 1.25rem); }
}

/* No JS, no map: the list carries all the same content, set as prose. */
.no-js .map-frame,
.no-js .map-filters { display: none; }

.no-js .map-layout {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--measure-narrow);
  margin-inline: auto;
}

/* --- The canvas: SVG terrain with an HTML layer on top --- */
.map-canvas {
  position: relative;
  background-color: var(--map-water);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* Holds the 1000 × 740 aspect so pin percentages line up with the viewBox */
.map-canvas::before {
  content: "";
  display: block;
  padding-top: 74%;
}

.map-svg,
.map-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* --- Terrain --- */
.map-water  { fill: var(--map-water); }
.map-land   { fill: var(--map-land); }

/* The stroke is the same colour as the fill: it closes the hairline gaps that
   would otherwise show between separately simplified country outlines. */
.map-abroad path {
  fill: var(--map-abroad);
  stroke: var(--map-abroad);
  stroke-width: 2.5;
}

.map-outline {
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.4;
  stroke-linejoin: round;
  opacity: 0.9;
  vector-effect: non-scaling-stroke;
}

/* Soft mass along the Carpathian spines, with hill glyphs drawn over it */
.map-ridges path {
  fill: none;
  stroke: var(--sage);
  stroke-width: 42;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.17;
  filter: blur(9px);
}

.map-hills {
  fill: none;
  stroke: var(--sage-deep);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.42;
  vector-effect: non-scaling-stroke;
}

/* The flat half of the country: ploughed-field texture over the plains, so
   that the ground east and west of the estate isn't simply blank. */
.map-furrow { stroke: var(--sage-deep); stroke-width: 0.7; }
.map-plains { fill: url(#map-fields); opacity: 0.26; }

/* Rivers. The Danube is the wide one, and most of the southern border. */
.map-river {
  fill: none;
  stroke: var(--slate);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.45;
  vector-effect: non-scaling-stroke;
}
.map-river--main { stroke-width: 1.8; opacity: 0.55; }

/* Towns and cities, drawn as the ground they cover: a soft tint with a
   stipple of rooftops over it, so they read as built-up at any zoom. */
.map-house      { fill: var(--slate); }
.map-town-tint  { fill: var(--slate); opacity: 0.3; }
.map-town-dots  { fill: url(#map-houses); opacity: 0.42; }
.map-town-core  { fill: var(--slate); opacity: 0.28; }

/* Dealu Mare, drawn as rows of vines */
.map-vine-row  { stroke: var(--gold); stroke-width: 1.2; }
.map-wine-fill { fill: url(#map-vines); opacity: 0.7; }
.map-wine-edge {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.1;
  opacity: 0.55;
  vector-effect: non-scaling-stroke;
}

/* The Transfăgărășan, which is a destination rather than a route */
.map-drive {
  fill: none;
  stroke: var(--clay);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
  vector-effect: non-scaling-stroke;
}

/* The hour from the airport */
.map-route {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.2;
  stroke-dasharray: 4 5;
  opacity: 0.55;
  vector-effect: non-scaling-stroke;
}

/* --- Labels printed on the map --- */
.map-overlay { pointer-events: none; }

.map-label {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.55;
}

.map-label--region {
  color: var(--sage-deep);
  opacity: 0.8;
}

.map-label--water {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--slate);
  opacity: 0.75;
}

.map-label--town {
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.7;
}

/* On a phone the map is a third of its desktop width but the type isn't,
   so the labels at the edges and the ones crowding the venue are dropped. */
@media (max-width: 559px) {
  .map-label--minor { display: none; }
}

/* --- Pins (built by main.js) --- */
.map-pin {
  position: absolute;
  width: 19px;
  height: 19px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
  color: var(--slate);
  transition: opacity var(--transition);
}

.map-pin-mark {
  position: absolute;
  inset: 2.5px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background-color: var(--ivory);
  box-shadow: 0 1px 3px rgba(47, 46, 42, 0.18);
  transition: transform var(--transition), box-shadow var(--transition);
}

.map-pin svg { display: block; width: 9px; height: 9px; fill: currentColor; }

.map-pin-label {
  position: absolute;
  left: 145%;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background-color: rgba(255, 253, 249, 0.85);
  padding: 0.1rem 0.3rem;
  border-radius: 2px;
  opacity: 0;
  transition: opacity var(--transition);
}

/* thinLabels() settles where each label actually fits */
.map-pin[data-label-side="left"] .map-pin-label { left: auto; right: 145%; }

.map-pin[data-label-side="below"] .map-pin-label,
.map-pin[data-label-side="above"] .map-pin-label {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.map-pin[data-label-side="below"] .map-pin-label { top: 135%; }
.map-pin[data-label-side="above"] .map-pin-label { top: auto; bottom: 135%; }

/* Bucharest: bigger, ringed, and always labelled - it's the capital */
.map-pin--capital { width: 26px; height: 26px; z-index: 2; }
.map-pin--capital .map-pin-mark {
  inset: 4px;
  border-width: 1.5px;
  box-shadow: 0 0 0 3px rgba(108, 122, 133, 0.18),
              0 1px 3px rgba(47, 46, 42, 0.18);
}
.map-pin--capital svg { width: 11px; height: 11px; }

.map-pin:hover  { z-index: 3; }
.map-pin.is-active,
.map-pin.is-linked { z-index: 4; }

.map-pin:hover .map-pin-mark,
.map-pin.is-linked .map-pin-mark { transform: scale(1.22); }

.map-pin.is-active .map-pin-mark {
  transform: scale(1.32);
  box-shadow: 0 0 0 4px rgba(192, 160, 98, 0.28),
              0 1px 3px rgba(47, 46, 42, 0.2);
}

.map-pin.has-label .map-pin-label,
.map-pin:hover .map-pin-label,
.map-pin.is-active .map-pin-label,
.map-pin.is-linked .map-pin-label { opacity: 1; }

.map-pin.is-dimmed { opacity: 0.2; pointer-events: none; }
.map-pin[hidden]   { display: none; }

/* --- The frame showing what the close-up covers --- */
.map-extent {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 1px dashed rgba(192, 160, 98, 0.55);
  border-radius: var(--radius);
  background: rgba(192, 160, 98, 0.05);
  pointer-events: auto;
  cursor: zoom-in;
  transition: background-color var(--transition), border-color var(--transition);
}
.map-extent:hover {
  background: rgba(192, 160, 98, 0.11);
  border-color: var(--gold);
}
.map-extent[hidden] { display: none; }

/* --- Category colours, shared by pins, list marks and filter chips --- */
.map-pin[data-cat="venue"],    .map-place[data-cat="venue"],    .map-chip[data-cat="venue"]    { --cat: var(--gold); }
.map-pin[data-cat="wine"],     .map-place[data-cat="wine"],     .map-chip[data-cat="wine"]     { --cat: var(--wine); }
.map-pin[data-cat="mountain"], .map-place[data-cat="mountain"], .map-chip[data-cat="mountain"] { --cat: var(--sage-deep); }
.map-pin[data-cat="city"],     .map-place[data-cat="city"],     .map-chip[data-cat="city"]     { --cat: var(--slate); }
.map-pin[data-cat="curio"],    .map-place[data-cat="curio"],    .map-chip[data-cat="curio"]    { --cat: var(--clay); }
.map-pin[data-cat="arrive"],   .map-place[data-cat="arrive"],   .map-chip[data-cat="arrive"]   { --cat: var(--ink-soft); }

.map-pin,
.map-place-mark,
.map-chip-dot { color: var(--cat, var(--slate)); }

.map-pin[data-cat="venue"] .map-pin-mark { background-color: var(--gold); border-color: var(--gold); }
.map-pin[data-cat="venue"] svg { fill: var(--ivory); }

/* --- Below the map: the key and the view switch --- */
.map-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 0.85rem;
}

.map-key {
  flex: 1 1 18rem;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.map-views { display: flex; gap: 0.4rem; }

/* Tighter on a phone, so the two views fit on one line each */
@media (max-width: 480px) {
  .map-views .map-chip { letter-spacing: 0.08em; padding-inline: 0.7rem; }
}

/* --- Chips: the view switch and the category filters --- */
.map-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background-color: var(--ivory);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.map-chip:hover { color: var(--sage-deep); border-color: var(--sage); }

.map-chip[aria-pressed="true"] {
  color: var(--ink);
  border-color: var(--sage);
  background-color: var(--shell);
}

.map-chip-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: currentColor;
  flex: 0 0 auto;
}

.map-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-sm);
}
.map-filters li { margin: 0; }

/* --- The list of places, which doubles as the map's index --- */
.map-places > li { padding: 0; }

.map-place-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  padding: 0.85rem 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
}

/* Only a button once main.js has made it one */
button.map-place-head { cursor: pointer; }

.map-place-mark {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 0.3rem;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background-color: var(--ivory);
}
.map-place-mark svg { display: block; width: 8px; height: 8px; fill: currentColor; }

.map-place[data-cat="venue"] .map-place-mark {
  background-color: var(--gold);
  border-color: var(--gold);
}
.map-place[data-cat="venue"] .map-place-mark svg { fill: var(--ivory); }

.map-place .place-name  { display: block; transition: color var(--transition); }
.map-place .place-meta  { margin-bottom: 0; }

.map-place-head:hover .place-name,
.map-place.is-linked .place-name,
.map-place.is-active .place-name { color: var(--sage-deep); }

.map-place-body { padding-bottom: 0.9rem; }
.map-place-body p { color: var(--ink-soft); }

.map-place-more {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
}
.map-place-more a { text-decoration: none; }
.map-place-more a::after { content: " \2192"; }

.map-place[hidden] { display: none; }

@media (min-width: 900px) {
  .map-places {
    max-height: 27rem;
    overflow-y: auto;
    padding-right: 0.75rem;
  }
}

@media print {
  .map-frame,
  .map-filters { display: none !important; }
}


/* 12. FOOTER
   ========================================================================== */
.site-footer {
  background-color: var(--ink);
  color: rgba(255, 253, 249, 0.72);
  text-align: center;
  padding-block: var(--space-lg);
  font-size: 0.9375rem;
}

.site-footer h2,
.site-footer .footer-names {
  font-family: var(--font-display);
  color: var(--ivory);
  font-size: 1.75rem;
  margin-bottom: var(--space-xs);
}

.site-footer a { color: var(--ivory); }
.site-footer a:hover { color: var(--gold); }

.site-footer .ornament { color: rgba(192, 160, 98, 0.8); }
.site-footer .ornament::before,
.site-footer .ornament::after {
  background: linear-gradient(to right, transparent,
              rgba(192, 160, 98, 0.8), transparent);
}

.footer-meta {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 253, 249, 0.45);
  margin-top: var(--space-md);
}


/* 13. SCROLL REVEAL
   Elements with .reveal start faded/offset; main.js adds .is-visible
   when they scroll into view.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

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

/* Stagger children by adding .reveal-delay-1 ... -3 */
.reveal-delay-1 { transition-delay: 120ms; }
.reveal-delay-2 { transition-delay: 240ms; }
.reveal-delay-3 { transition-delay: 360ms; }

/* If JS is unavailable, never leave content invisible */
.no-js .reveal { opacity: 1; transform: none; }


/* 14. REDUCED MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-nav, .scroll-cue, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
}