/* ================================================================
   WILLIAM & BAILLIE — style.css
   Shared stylesheet for tasmanandwife.com

   TABLE OF CONTENTS
   -----------------
   1.  Custom Properties  (design tokens — change here, updates everywhere)
   2.  CSS Reset & Base   (clears browser defaults, sets baseline styles)
   3.  Navigation         (fixed top bar, hamburger menu)
   4.  Hero Section       (photo + names, split layout)
   5.  Coming Soon        (holding section while site builds out)
   6.  Footer
   7.  Animations         (fade-up on page load)
   8.  Responsive         (mobile breakpoints)
   9.  Accessibility      (reduced-motion, focus styles)
   ================================================================ */


/* ================================================================
   1. CUSTOM PROPERTIES
   ================================================================
   CSS "variables" — set a value once here and use it everywhere.
   To change the palette or fonts, edit this section only.
   ================================================================ */

:root {

  /* ------ COLORS ------ */
  /* Derived from the palette moodboards: warm naturals, sage,
     blush terracotta. The palette sits in a narrow, warm register —
     nothing cool or stark. */

  --cream:       #F5EFE4;   /* warm parchment — main page background      */
  --cream-deep:  #EDE4D4;   /* slightly richer cream — footer, alternating sections */
  --cream-border: #D8CEBC;  /* warm greige — subtle borders and rules     */

  --ink:         #2B2319;   /* warm near-black — primary text             */
  --ink-soft:    #7A6A58;   /* warm gray-brown — secondary/smaller text   */
  --ink-faint:   #A89880;   /* very soft — captions, footnotes            */

  --sage:        #7A8C60;   /* muted sage green — the quiet accent        */
  --sage-light:  #B8C9A0;   /* lighter sage — subtle backgrounds          */

  --blush:       #C07A60;   /* warm terracotta-blush — hover states       */

  /* ------ TYPOGRAPHY ------ */
  --font-display: 'Cormorant Garamond', Georgia, serif;
                                   /* Headings, names, romantic copy.
                                      Note: we'd use Canela here if licensed. */
  --font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;
                                   /* Body text, nav, captions, buttons.  */

  /* ------ SPACING ------ */
  /* A consistent scale prevents random magic-number padding.
     Use these rather than inventing new values. */
  --space-xs:  0.5rem;   /*  8px */
  --space-sm:  1rem;     /* 16px */
  --space-md:  2rem;     /* 32px */
  --space-lg:  4rem;     /* 64px */
  --space-xl:  6rem;     /* 96px */
  --space-2xl: 9rem;     /* 144px */

  /* ------ NAV ------ */
  --nav-height: 4rem;    /* Fixed height, used to offset page content below it */

  /* ------ TRANSITIONS ------ */
  --ease: 0.25s ease;    /* Default transition speed for hover effects */
}


/* ================================================================
   2. CSS RESET & BASE
   ================================================================
   A minimal reset so every browser starts from the same baseline.
   ================================================================ */

/* Apply border-box sizing to everything — makes widths and paddings
   behave more intuitively. */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;       /* Smooth scroll when clicking anchor links */
  font-size: 16px;               /* 1rem = 16px throughout */
}

body {
  background-color: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;   /* Crisper text on Mac/iOS */
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;      /* Removes mystery gap below images */
  max-width: 100%;     /* Images never overflow their container */
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}


/* ================================================================
   3. NAVIGATION
   ================================================================
   Fixed bar that stays at the top while scrolling.
   Brand monogram on the left; all 7 page links on the right.
   A CSS-only hamburger handles the mobile menu.
   ================================================================ */

.site-nav {
  position: fixed;          /* Stays in place while the page scrolls */
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;             /* Sits above all other page content */

  display: flex;
  align-items: center;
  justify-content: space-between;

  height: var(--nav-height);
  padding: 0 var(--space-md);

  background-color: var(--cream);
  border-bottom: 1px solid var(--cream-border);
}

/* Brand / monogram ---- */
.nav-brand {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  flex-shrink: 0;           /* Won't shrink if space gets tight */
  transition: color var(--ease);
}

.nav-brand:hover {
  color: var(--blush);
}

/* Nav links list ---- */
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;             /* Space between each link */
}

/* Individual link ---- */
.nav-link {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color var(--ease);
  white-space: nowrap;      /* Prevent wrapping mid-word */
}

.nav-link:hover,
.nav-link.active {
  color: var(--ink);
}

/* RSVP + Registry get a subtle green accent to stand out slightly */
.nav-link--accent {
  color: var(--sage);
}

.nav-link--accent:hover {
  color: var(--blush);
}

/* -------- Hamburger Menu (mobile only) --------
   The checkbox input is hidden; the label becomes the ☰ icon.
   When the checkbox is :checked, CSS reveals the nav links.
---------------------------------------------- */

/* Hide the actual checkbox — it's just a state tracker */
.nav-toggle-input {
  display: none;
}

/* The hamburger icon: three horizontal lines */
.nav-toggle-label {
  display: none;              /* Hidden on desktop; shown on mobile via media query */
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 17px;
  cursor: pointer;
  padding: 1px 0;
  flex-shrink: 0;
}

.nav-toggle-label span {
  display: block;
  height: 1.5px;
  background-color: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Animate the three bars into an X when menu is open */
.nav-toggle-input:checked + .nav-toggle-label span:nth-child(1) {
  transform: translateY(7.75px) rotate(45deg);
}
.nav-toggle-input:checked + .nav-toggle-label span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle-input:checked + .nav-toggle-label span:nth-child(3) {
  transform: translateY(-7.75px) rotate(-45deg);
}


/* ================================================================
   4. HERO SECTION
   ================================================================
   Split layout:
     — Left 45%:  engagement photo
     — Right 55%: names, date, venue

   The photo fills its column top-to-bottom; the text is
   vertically centered in the right column.
   ================================================================ */

.hero {
  margin-top: var(--nav-height);   /* push below the fixed nav */
}

/* The photo container — full width, tall, with the photo filling it */
.hero-media {
  position: relative;
  width: 100%;
  height: clamp(460px, 84vh, 780px);
  overflow: hidden;
}

/* The engagement photo, filling the container */
.hero-photo {
  position: absolute;
  inset: 0;                    /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;           /* fill the frame; crop rather than distort */
  object-position: center 32%; /* keep faces and sky in view */
  display: block;
}

/* The gradient that darkens the lower part of the photo for legibility.
   Transparent at the top, deepening to a warm near-black at the bottom. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(43, 35, 25, 0)   0%,
    rgba(43, 35, 25, 0)   38%,
    rgba(43, 35, 25, 0.18) 60%,
    rgba(43, 35, 25, 0.62) 100%
  );
}

/* The overlaid text block, anchored to the bottom-centre of the photo */
.hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-xl) var(--space-md) var(--space-lg);
}

/* "together with their families" */
.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 239, 228, 0.85);   /* soft cream on the photo */
  margin-bottom: var(--space-sm);
  animation: fadeUp 0.9s ease both;
  animation-delay: 0.1s;
}

/* The names: the typographic heart of the page */
.hero-names {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--cream);
  display: flex;
  flex-direction: column;      /* stack name / & / name */
  align-items: center;
  gap: 0.02em;
  text-shadow: 0 1px 18px rgba(43, 35, 25, 0.35);  /* gentle lift off the photo */
  margin-bottom: var(--space-md);
  animation: fadeUp 0.9s ease both;
  animation-delay: 0.25s;
}

.hero-name {
  display: block;
}

/* The ampersand "&" — smaller, tinted sage-light to read on the photo */
.hero-amp {
  display: block;
  font-size: 0.5em;
  font-style: normal;
  font-weight: 400;
  color: var(--sage-light);
  line-height: 1.2;
  letter-spacing: 0.05em;
}

/* Thin rule between names and details */
.hero-rule {
  width: 2.5rem;
  height: 1px;
  background-color: rgba(245, 239, 228, 0.6);
  margin-bottom: var(--space-md);
  animation: fadeUp 0.9s ease both;
  animation-delay: 0.4s;
}

/* Date and venue */
.hero-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  animation: fadeUp 0.9s ease both;
  animation-delay: 0.5s;
}

.hero-date {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--cream);
}

.hero-venue {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 239, 228, 0.85);
}


/* ================================================================
   5. COMING SOON SECTION
   ================================================================
   A gentle holding section that lets guests know the full site
   is on its way. Replace with real content as pages are built.
   ================================================================ */

.coming-soon {
  position: relative;       /* anchor the scattered decorations to this section */
  overflow: hidden;         /* keep stray decoration edges from causing scroll */
  background-color: var(--cream-deep);
  border-top: 1px solid var(--cream-border);
  padding: var(--space-xl) var(--space-md);
}

.coming-soon-inner {
  position: relative;       /* sit above the decorations */
  z-index: 1;
  max-width: 580px;         /* Narrow column reads better for body copy */
  margin: 0 auto;
  text-align: center;
}

/* Section heading */
.coming-soon-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--ink);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}

/* Body copy */
.coming-soon-body {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.85;
  margin-bottom: var(--space-lg);
}

/* Call-to-action button ---- */
.cta-button {
  display: inline-block;
  padding: 0.9rem 2.5rem;

  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;

  color: var(--cream);
  background-color: var(--ink);
  border: 1px solid var(--ink);

  /* No border-radius — keeps it sharp and considered, not rounded/casual */
  transition: background-color var(--ease), border-color var(--ease);
}

.cta-button:hover {
  background-color: var(--blush);
  border-color: var(--blush);
}


/* ================================================================
   6. FOOTER
   ================================================================ */

.site-footer {
  background-color: var(--cream);
  border-top: 1px solid var(--cream-border);
  padding: var(--space-lg) var(--space-md);
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

.footer-brand {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-link {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color var(--ease);
}

.footer-link:hover {
  color: var(--blush);
}

.footer-dot {
  color: var(--cream-border);
  font-size: 0.75rem;
}

.footer-copy {
  font-size: 0.7rem;
  font-weight: 300;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
}


/* ================================================================
   7. ANIMATIONS
   ================================================================
   A subtle fade-up on page load for the hero text elements.
   Feels natural and adds polish without being showy.
   ================================================================ */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ================================================================
   8. RESPONSIVE — MOBILE BREAKPOINTS
   ================================================================
   768px is the breakpoint between mobile and desktop.
   480px handles very small phones.

   Media queries say "apply these styles ONLY when the screen
   is smaller than X pixels wide."
   ================================================================ */

@media (max-width: 768px) {

  /* --- Navigation on mobile --- */

  /* The nav becomes flex-wrap so links can drop below the brand row */
  .site-nav {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--nav-height);
    padding: 0 var(--space-sm);
    align-items: center;
    gap: 0;
  }

  /* Show the hamburger icon on mobile */
  .nav-toggle-label {
    display: flex;
  }

  /* Nav links: hidden by default on mobile */
  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-xs) 0 var(--space-sm);
    border-top: 1px solid var(--cream-border);
    margin-top: 0.5rem;
  }

  .nav-links li {
    width: 100%;
  }

  .nav-link {
    display: block;
    padding: 0.65rem 0;
    font-size: 0.75rem;
  }

  /* When the checkbox is checked, reveal the nav links */
  /* The ~ is the "general sibling" selector:
     "any .nav-links that comes after a checked .nav-toggle-input" */
  .nav-toggle-input:checked ~ .nav-links {
    display: flex;
  }


  /* --- Hero on mobile --- */

  .hero-media {
    height: clamp(420px, 72vh, 560px);
  }

  .hero-overlay {
    padding: var(--space-lg) var(--space-md);
  }

  .hero-names {
    font-size: clamp(2.5rem, 13vw, 4rem);
  }


  /* --- Coming soon: adjust padding --- */

  .coming-soon {
    padding: var(--space-lg) var(--space-md);
  }

}/* end @media 768px */


@media (max-width: 480px) {

  /* Tighten spacing on very small phones */
  :root {
    --space-lg:  3rem;
    --space-xl:  4rem;
  }

  .hero-media {
    height: 78vh;
    min-height: 440px;
  }

  .hero-photo {
    object-position: center 28%;
  }

  .cta-button {
    width: 100%;
    text-align: center;
  }

}/* end @media 480px */


/* ================================================================
   9. ACCESSIBILITY
   ================================================================ */

/* Visible focus ring for keyboard navigation.
   The :focus-visible selector only shows this when using a keyboard
   (not on mouse click), which is the correct modern behaviour. */
:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
}

/* Skip-to-content link for screen readers (hidden visually,
   shown when focused by keyboard) — add to HTML if desired:
   <a href="#main-content" class="skip-link">Skip to content</a>
*/
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--ink);
  color: var(--cream);
  font-size: 0.8rem;
  z-index: 999;
}
.skip-link:focus {
  top: var(--space-sm);
}

/* Honour the user's "reduce motion" system preference.
   Disables all animations and transitions for people who prefer it. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ================================================================
   10. PAGE HEADER  (used by Our Story and future inner pages)
   ================================================================
   A simple centered title block that opens an inner page. The
   top padding clears the fixed navigation bar.
   ================================================================ */

.page-header {
  margin-top: var(--nav-height);   /* clear the fixed nav */
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  text-align: center;
}

/* Small label above the page title, e.g. "our story" */
.page-eyebrow {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-sm);
}

/* The page title itself */
.page-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1.1;
  color: var(--ink);
}

/* The thin centered rule beneath the title */
.page-rule {
  width: 2.5rem;
  height: 1px;
  background-color: var(--cream-border);
  margin: var(--space-md) auto 0;
}


/* ================================================================
   11. OUR STORY
   ================================================================
   The story reads as a narrow column of prose broken into titled
   "chapters," with a full-width photo between them.
   ================================================================ */

.story {
  max-width: 620px;        /* Narrow column keeps prose comfortable to read */
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Each titled section of the story */
.story-chapter {
  padding: var(--space-lg) 0;
}

/* Small italic label above each chapter heading */
.story-kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--sage);
  margin-bottom: var(--space-xs);
}

/* Chapter heading */
.story-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: var(--space-md);
}

/* Story paragraphs */
.story-body {
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.95;
  color: var(--ink);
  margin-bottom: var(--space-sm);
}

/* The body text is slightly softer than headings for a gentle feel */
.story-body:last-child {
  margin-bottom: 0;
}

/* ---- Full-width photo break between chapters ---- */
.story-photo {
  /* Break out of the narrow .story column to span the full page width.
     This is a common trick: 50vw left + 50vw right of the centre line. */
  margin: var(--space-lg) calc(-50vw + 50%);
  width: 100vw;
  max-width: 100vw;
}

.story-photo img {
  width: 100%;
  height: clamp(320px, 55vh, 560px);
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

/* Caption beneath the photo */
.story-caption {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-top: var(--space-sm);
  padding: 0 var(--space-md);
}

/* ---- Closing flourish at the end of the story ---- */
.story-closing {
  text-align: center;
  padding: var(--space-lg) 0 var(--space-xl);
}

.story-mark {
  display: block;
  font-size: 0.85rem;
  color: var(--sage);
  letter-spacing: 0.3em;
  margin-bottom: var(--space-md);
}

.story-closing-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: var(--space-md);
}

.story-signoff {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}


/* ================================================================
   12. PASSWORD GATE  (built by auth.js)
   ================================================================
   A full-screen cover shown until a guest enters the password.
   Styled to match the rest of the site so it feels intentional.
   ================================================================ */

.gate-overlay {
  position: fixed;
  inset: 0;                       /* top/right/bottom/left all 0 */
  z-index: 1000;                  /* above everything, including the nav */
  background-color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* When unlocked, the cover fades out before being removed */
.gate-overlay.gate-unlocked {
  opacity: 0;
  pointer-events: none;
}

/* The centered card containing the prompt and input */
.gate-card {
  max-width: 380px;
  width: 100%;
  text-align: center;
}

.gate-eyebrow {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-sm);
}

.gate-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 2.4rem;
  color: var(--ink);
  margin-bottom: var(--space-sm);
}

.gate-text {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: var(--space-lg);
}

/* The input + button sit side by side */
.gate-form {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.gate-input {
  flex: 1;
  min-width: 0;                   /* lets the input shrink on small screens */
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--ink);
  background-color: #fff;
  border: 1px solid var(--cream-border);
  border-radius: 0;               /* sharp corners, in keeping with the site */
  transition: border-color var(--ease);
}

.gate-input:focus {
  outline: none;
  border-color: var(--sage);
}

.gate-button {
  padding: 0.75rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  background-color: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease);
}

.gate-button:hover {
  background-color: var(--blush);
  border-color: var(--blush);
}

/* The gentle "try again" message */
.gate-error {
  min-height: 1.2rem;             /* reserve space so layout doesn't jump */
  margin-top: var(--space-sm);
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--blush);
}

/* Stack the input and button on very small screens */
@media (max-width: 420px) {
  .gate-form {
    flex-direction: column;
  }
  .gate-button {
    width: 100%;
  }
}


/* ================================================================
   13. PROPOSAL ITINERARY  (Our Story page)
   ================================================================
   A vertical list of the proposal-day stops, styled as a quiet
   timeline with a sage line running down the left.
   ================================================================ */

.itinerary {
  list-style: none;            /* remove default numbers */
  counter-reset: stop;         /* start our own custom numbering */
  margin: var(--space-lg) 0;
  padding: 0;
}

/* Each stop on the day */
.itinerary-stop {
  counter-increment: stop;     /* advance the number each item */
  position: relative;
  padding: 0 0 var(--space-md) var(--space-lg);
  border-left: 1px solid var(--cream-border);  /* the vertical line */
}

/* Remove the line's leftover tail under the final stop */
.itinerary-stop:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

/* The little numbered marker sitting on the line */
.itinerary-stop::before {
  content: counter(stop);
  position: absolute;
  left: -0.75rem;
  top: -0.15rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cream);
  border: 1px solid var(--sage);
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--sage);
}

/* The place name */
.itinerary-place {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--ink);
  line-height: 1.3;
}

/* The little note beneath each place */
.itinerary-note {
  display: block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

/* Emphasis (the italic "I love you") within story prose */
.story-body em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1em;
  color: var(--ink);
}


/* ================================================================
   14. DECORATIVE MOTIFS  (ring + Save the Date doodles)
   ================================================================
   These little line drawings live in the /art folder as SVG files.
   We display them using the CSS "mask" technique: the SVG's shape
   becomes a stencil, and we paint it with a solid colour. That lets
   one set of files take on any palette colour we like.

   Two flavours:
     .deco         — absolutely positioned, scattered in a section's
                     margins as faint "easter eggs"
     .deco-inline  — sits in the normal flow (e.g. a row in the footer,
                     or the ring above the "coming soon" heading)
   ================================================================ */

/* Shared mask setup for every motif */
[class*="deco--"] {
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: var(--ink-faint);   /* default tint — soft greige */
}

/* ---- Which SVG each motif uses ---- */
.deco--ring     { -webkit-mask-image: url('art/ring.svg');        mask-image: url('art/ring.svg'); }
.deco--lemon    { -webkit-mask-image: url('art/lemon.svg');       mask-image: url('art/lemon.svg'); }
.deco--cherries { -webkit-mask-image: url('art/cherries.svg');    mask-image: url('art/cherries.svg'); }
.deco--martini  { -webkit-mask-image: url('art/martini.svg');     mask-image: url('art/martini.svg'); }
.deco--tulip    { -webkit-mask-image: url('art/tulip.svg');       mask-image: url('art/tulip.svg'); }
.deco--disco    { -webkit-mask-image: url('art/disco-ball.svg');  mask-image: url('art/disco-ball.svg'); }
.deco--car      { -webkit-mask-image: url('art/car.svg');         mask-image: url('art/car.svg'); }
.deco--sprig    { -webkit-mask-image: url('art/sprig.svg');       mask-image: url('art/sprig.svg'); }

/* ---- Scattered (absolutely positioned) decorations ---- */
.deco {
  position: absolute;
  z-index: 0;               /* behind the readable content */
  pointer-events: none;     /* never interferes with clicks */
  opacity: 0.14;            /* faint — an easter egg, not a billboard */
  background-color: var(--sage);
}

/* Individual placements around the "coming soon" section.
   These positions are intentionally loose and asymmetric. */
.coming-soon .deco--lemon {
  width: 64px;  height: 64px;
  top: 14%;  left: 7%;
  transform: rotate(-12deg);
}
.coming-soon .deco--cherries {
  width: 58px;  height: 58px;
  bottom: 16%;  left: 12%;
  transform: rotate(8deg);
}
.coming-soon .deco--martini {
  width: 60px;  height: 60px;
  top: 18%;  right: 9%;
  transform: rotate(10deg);
}
.coming-soon .deco--tulip {
  width: 56px;  height: 56px;
  bottom: 14%;  right: 11%;
  transform: rotate(-9deg);
}

/* ---- Inline decorations (in the normal flow) ---- */
.deco-inline {
  display: inline-block;
  vertical-align: middle;
}

/* The ring above the "coming soon" heading */
.coming-soon-inner .deco--ring {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-md);
  background-color: var(--sage);
  opacity: 0.85;
}

/* The little row of motifs in the footer */
.footer-motifs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
  opacity: 0.4;
}

.footer-motifs .deco-inline {
  width: 30px;
  height: 30px;
  background-color: var(--ink-soft);
}

/* Hide the busiest scattered motifs on small screens to avoid clutter */
@media (max-width: 600px) {
  .coming-soon .deco--martini,
  .coming-soon .deco--tulip {
    display: none;
  }
  .coming-soon .deco--lemon    { width: 46px; height: 46px; top: 5%;  left: 5%; }
  .coming-soon .deco--cherries { width: 44px; height: 44px; bottom: 6%; right: 6%; left: auto; }
  .footer-motifs { gap: var(--space-sm); }
}