/* ============================================================
   WEDDING WEBSITE — Ashley & Eoin
   Global Stylesheet
   ============================================================ */


/* ------------------------------------------------------------
   1. @font-face declarations
   ------------------------------------------------------------ */

@font-face {
  font-family: "TheSecretLibrary";
  src: url("../fonts/TheSecretLibrary.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Show fallback font immediately, swap when loaded */
}

@font-face {
  font-family: "Lancelot";
  src: url("../fonts/Lancelot-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Recoleta";
  src: url("../fonts/Recoleta Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Recoleta";
  src: url("../fonts/Recoleta SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* ------------------------------------------------------------
   2. CSS Reset
   ------------------------------------------------------------ */

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

html {
  /* Prevent font size inflation on mobile */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* scroll-behavior: smooth intentionally omitted — Lenis handles all smooth scrolling */
}

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

/* Remove default list styling when lists are used for UI */
ul,
ol {
  list-style: none;
}

/* Remove default button styles — we'll apply our own */
button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

/* Inherit color, keep browser-default underline so links are visually distinct */
a {
  color: inherit;
}

/* Keep ordinal suffixes (st, nd, th) lowercase even inside uppercase parents */
sup {
  text-transform: lowercase;
}


/* ------------------------------------------------------------
   3. Design Tokens — all values live here as custom properties
   ------------------------------------------------------------ */

:root {

  /* --- Colours --- */
  --color-green-dark:   #43461f;  /* Primary. Text, dark section backgrounds */
  --color-green-mid:    #969d5c;  /* Mid-tone accent */
  --color-sand:         #b8a36a;  /* Sand accent */
  --color-cream:        #efe6d3;  /* Text on dark backgrounds */
  --color-bg-default:   #eeeade;  /* Default section background */
  --color-bg-hero:      #ceccaa;  /* Hero + FAQ background */
  --color-blue-dust:    #d6dee2;  /* Wedding Day order-of-events only */


  /* --- Typography: Font families --- */
  --font-h1:       "TheSecretLibrary", serif;
  --font-h2:       "TheSecretLibrary", serif;
  --font-h3:       "Recoleta", serif;
  --font-h4:       "Recoleta", serif;
  --font-body:     "Lancelot", serif;
  --font-flanking: "Cormorant SC", serif;


  /* --- Typography: Sizes — fluid scale ---
     Formula: clamp(min, calc(intercept + slope × 100vw), max)
     Parameters: min-viewport 375px → max-viewport 1440px (range 1065px)
     slope = (max − min) / 1065 | intercept = min − slope × 375
     Never hardcode a px font-size in section CSS — always use these tokens. */
  --size-h1:       clamp(48px, calc(39.6px + 2.25vw), 72px);
  --size-h2:       clamp(40px, calc(34.4px + 1.50vw), 56px);
  --size-h3:       clamp(28px, calc(23.8px + 1.13vw), 40px);
  --size-h4:       clamp(20px, calc(18.6px + 0.38vw), 24px);
  --size-body:     clamp(18px, calc(15.9px + 0.56vw), 24px);
  --size-body-sm:  clamp(16px, calc(15.3px + 0.19vw), 18px);
  --size-flanking: clamp(20px, 2.5vw, 40px);
  /* NOTE: flanking uses a viewport-proportional slope (not the standard intercept formula)
     because its column width is also fluid. The standard formula makes it too large at
     mid-viewport widths, causing "WEDDING WEEKEND" to wrap before the 1100px breakpoint. */


  /* --- Typography: Line heights (never use 'normal') --- */
  --leading-h1:   2;
  --leading-h2:   2;
  --leading-h3:   1;
  --leading-h4:   1.5;
  --leading-body: 1.6;


  /* --- Typography: Weights --- */
  --font-h4-weight: 600;


  /* --- Spacing --- */
  --page-padding:    clamp(32px, calc(23.56px + 2.25vw), 56px);   /* Global horizontal padding */
  --padding-section: clamp(80px, calc(44.79px + 9.39vw), 180px); /* Vertical padding between sections */
  --padding-sm:     16px;
  --max-width-xl:   1280px;
  --max-width-lg:   768px;
  --max-width-md:   560px;

  /* --- Hero oval sizing ---
     Change portrait dimensions to resize the whole frame.
     All ring sizes derive from these via calc(). */
  --hero-portrait-w: clamp(220px, 30vw, 525px);
  --hero-portrait-h: clamp(286px, 39.1vw, 684px);
  --hero-gap:        12px;  /* Each side gap: portrait→inner, inner→middle, middle→outer */
  --hero-gap-outer:   8px;  /* Each side gap: outer→dashed ring */


  /* --- Animation easings ---
     These are CSS custom properties for reference.
     When used in GSAP, pass the cubic-bezier string directly.
     When used in CSS transitions, use var() here.
  ------------------------------------------------------------ */
  --ease-entrance:  cubic-bezier(0.16, 1, 0.3, 1);    /* Fast in, luxurious settle */
  --ease-deliberate: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Slow, considered */
  --ease-snap:      cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoots — wax seal only */

}


/* ------------------------------------------------------------
   4. Mobile overrides
   Typography sizes are handled by clamp() in :root — no overrides needed here.
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   5. Base body styles
   ------------------------------------------------------------ */

body {
  background-color: var(--color-bg-default);
  color: var(--color-green-dark);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);

  /* Greyscale antialiasing — lighter, crisper text on Retina screens */
  -webkit-font-smoothing: antialiased; /* Chrome, Safari, Edge */
  -moz-osx-font-smoothing: grayscale; /* Firefox on Mac */

  /* Prevent horizontal overflow caused by animations */
  overflow-x: hidden;
}


/* ------------------------------------------------------------
   5b. Global heading base styles
   These ensure every h1–h4 anywhere on the page gets the right
   font and fluid size automatically. Per-section rules only need
   to override properties that differ (e.g. color, position).
   ------------------------------------------------------------ */

h1 {
  font-family: var(--font-h1); /* TheSecretLibrary */
  font-size: var(--size-h1);   /* clamp(48px → 72px) */
  line-height: var(--leading-h1);
}

h2 {
  font-family: var(--font-h2); /* TheSecretLibrary */
  font-size: var(--size-h2);   /* clamp(40px → 64px) */
  line-height: var(--leading-h2);
}

h3 {
  font-family: var(--font-h3); /* Recoleta */
  font-size: var(--size-h3);   /* clamp(28px → 40px) */
  line-height: var(--leading-h3);
}

h4 {
  font-family: var(--font-h4);        /* Recoleta */
  font-size: var(--size-h4);          /* clamp(20px → 24px) */
  font-weight: var(--font-h4-weight); /* 600 = SemiBold */
  line-height: var(--leading-h4);     /* 1.5 */
}

/* --- Global heading mobile overrides ---
   Default h2 line-height (2) creates excessive vertical space on mobile.
   Tighter scale + reduced line-height keeps headings proportional. */
@media (max-width: 640px) {
  h2 {
    font-size: clamp(32px, calc(20.68px + 3.02vw), 40px);
    line-height: 2;
  }

  body {
    font-size: 20px;
  }

  .event-section__note {
    font-size: 18px;
  }
}


/* ------------------------------------------------------------
   6. Paper texture overlay — section-specific
   Applied per section using ::after pseudo-elements.
   position: absolute covers just that section (not the viewport).
   mix-blend-mode: multiply lets dark texture speckles show through
   while light areas of the texture become invisible.
   The section must have position: relative for this to work.
   ------------------------------------------------------------ */

/* Shared texture styles — reused across sections that need it */
#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/background-texture.png');
  background-repeat: repeat;
  background-size: auto;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 3; /* above hero content (portrait z-index: 1, names z-index: 2) */
}


/* ------------------------------------------------------------
   7. prefers-reduced-motion — global animation kill-switch
   All GSAP animations are also gated in JS, but this ensures
   CSS transitions are suppressed as well.
   All GSAP animations are also gated in JS, but this ensures
   CSS transitions are suppressed as well.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   SECTION 1 — HERO
   ============================================================ */

#hero {
  background-color: var(--color-bg-hero);
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 0 var(--page-padding);
  overflow: hidden; /* Clip animation overflow */
  position: relative; /* Required for ::after texture overlay to anchor here */
}

/* Left and right flanking text */
.hero__flanking {
  font-family: var(--font-flanking);
  font-size: var(--size-flanking);
  font-weight: 600;
  color: var(--color-green-dark);
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  flex: 1; /* Each takes equal space beside the oval */
}

/* Oval frame — sized to fit the outermost ring */
.hero__oval-frame {
  display: grid;
  place-items: center;
  width:  calc(var(--hero-portrait-w) + 6 * var(--hero-gap) + 2 * var(--hero-gap-outer));
  height: calc(var(--hero-portrait-h) + 6 * var(--hero-gap) + 2 * var(--hero-gap-outer));
  flex-shrink: 0;
}

/* All direct children share the same grid cell — this is the stacking trick */
.hero__oval-frame > * {
  grid-area: 1 / 1;
}

/* --- Oval rings — sizes derived from portrait + gap tokens ---
   border-radius: 50% creates a true ellipse (no flat edges).
   Large pixel values like 802px cause flat sides on non-square elements. */

/* Outermost dashed ring — SVG, sized to match frame */
.hero__oval--dashed {
  width:  calc(var(--hero-portrait-w) + 6 * var(--hero-gap) + 2 * var(--hero-gap-outer));
  height: calc(var(--hero-portrait-h) + 6 * var(--hero-gap) + 2 * var(--hero-gap-outer));
  overflow: visible; /* Lets dots render outside the SVG boundary */
  /* Dots drawn by JS — no CSS stroke needed */
}

/* Outer ring: portrait + 3 gaps each side */
.hero__oval--outer {
  width:  calc(var(--hero-portrait-w) + 6 * var(--hero-gap));
  height: calc(var(--hero-portrait-h) + 6 * var(--hero-gap));
  border-radius: 50%;
  background: rgba(186, 185, 161, 0.10);
  box-shadow:
     2px -2px 1px 0 rgba(255, 255, 255, 0.20),
    -1px  1px 5px 0 rgba(0, 0, 0, 0.15);
}

/* Middle ring: portrait + 2 gaps each side */
.hero__oval--middle {
  width:  calc(var(--hero-portrait-w) + 4 * var(--hero-gap));
  height: calc(var(--hero-portrait-h) + 4 * var(--hero-gap));
  border-radius: 50%;
  background: rgba(186, 185, 161, 0.10);
  box-shadow:
    -2px  1px 2px 0 rgba(0, 0, 0, 0.10) inset,
     1px -1px 2px 0 rgba(255, 255, 255, 0.20) inset;
}

/* Inner ring: portrait + 1 gap each side */
.hero__oval--inner {
  width:  calc(var(--hero-portrait-w) + 2 * var(--hero-gap));
  height: calc(var(--hero-portrait-h) + 2 * var(--hero-gap));
  border-radius: 50%;
  background: rgba(186, 185, 161, 0.10);
  box-shadow:
    -2px  1px 2px 0 rgba(0, 0, 0, 0.10) inset,
     1px -1px 2px 0 rgba(255, 255, 255, 0.20) inset;
}

/* Portrait — sits above oval rings via z-index.
   overflow: hidden + border-radius: 50% clips any content (including the h1) to the oval shape. */
.hero__portrait {
  position: relative; /* Anchors absolutely-positioned photos */
  width:  var(--hero-portrait-w);
  height: var(--hero-portrait-h);
  border-radius: 50%;
  background-color: var(--color-green-mid); /* Fallback while images load */
  overflow: hidden;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Photos — stacked inside the oval, JS controls which is visible */
.hero__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto; /* Natural aspect ratio — image is taller than the oval */
  top: -10%; /* Shift up — adjust this value to taste */
  opacity: 0; /* JS reveals during entrance animation */
}

/* Names — lives inside .hero__portrait so oval clips it naturally.
   padding: 0 24px enforces 24px gap from the oval edge on each side.
   font-family inherited from global h1 rule. */
.hero__names {
  position: relative; /* Above photos */
  z-index: 2;
  /* Scale with the oval. Capped at --size-h1 so it never exceeds the token. */
  font-size: clamp(24px, calc(var(--hero-portrait-w) * 0.15), var(--size-h1));
  line-height: var(--leading-h1);
  color: var(--color-cream);
  text-align: center;
  width: 100%;
  padding: 0 24px;
}

/* --- Hero responsive --- */

@media (max-width: 1100px) {
  :root {
    /* Oval constrained by BOTH available width and available height so everything
       fits inside the fixed 100vh section.
       368px = vertical overhead: padding(80) + flanking text(120) + gaps(80) + ring frame(88). */
    --hero-portrait-w: min(
      calc((100dvh - 368px) / 1.302),
      calc(100vw - 2 * var(--page-padding) - 104px),
      525px
    );
    --hero-portrait-h: calc(var(--hero-portrait-w) * 1.302);
  }

  #hero {
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
    /* height: 100vh inherited from base styles — not overridden here */
  }

  /* In column layout flex: 1 would stretch flanking items vertically, creating
     uneven gaps. flex: none lets them shrink to their natural text height. */
  .hero__flanking {
    flex: none;
    width: 100%;
  }
}

@media (max-width: 640px) {
  #hero {
    /* 100vh on mobile Safari = large viewport height (constant).
       Avoids the jank from 100dvh resizing when the URL bar hides/shows. */
    height: 100vh;
  }
}

/* Hero entrance — initial states (JS animates these to final values).
   Without this, elements flash at their final position before GSAP
   has a chance to set initial scale/opacity. */
.hero__portrait,
.hero__names,
.hero__flanking,
.hero__oval--outer,
.hero__oval--middle,
.hero__oval--inner,
.hero__oval--dashed,
.site-nav__toggle {
  opacity: 0;
}

/* Safety net: if reduced-motion is on, show everything immediately
   even if JS is slow to load */
@media (prefers-reduced-motion: reduce) {
  .hero__portrait,
  .hero__names,
  .hero__flanking,
  .hero__oval--outer,
  .hero__oval--middle,
  .hero__oval--inner,
  .hero__oval--dashed,
  .site-nav__toggle {
    opacity: 1;
  }
  .hero__photo--main {
    opacity: 1; /* Show final portrait immediately — no cycling */
  }
}


/* ============================================================
   HERO + INTRO STACK — sticky overlap
   Hero pins at top: 0 while Intro slides over it.
   The wrapper is the sticky containing block — hero unsticks
   once the wrapper has scrolled off, but by then it is fully
   hidden underneath Intro anyway.
   ============================================================ */

.hero-intro-stack {
  position: relative;
}

#hero {
  position: sticky;
  top: 0;
  z-index: 0;
}


/* ============================================================
   SECTION 2 — INTRO ("Our forever begins in Ireland…")
   ============================================================ */

#intro {
  position: relative;
  z-index: 1;               /* Slides over the pinned hero */
  background-color: var(--color-cream); /* #efe6d3 */
  padding: var(--padding-section) var(--page-padding);
}

/* Heading + body stacked, centred horizontally, 80px gap */
.intro__content {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 80px;
}

#intro-heading {
  color: var(--color-green-dark);
  line-height: 2;
}

.intro__body-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 768px;
}

.intro__body {
  font-family: var(--font-body); /* Lancelot */
  font-size: var(--size-h3); /* clamp(28px → 40px) — large intro body, same scale as h3 */
  line-height: 1.2;              /* 120% */
  color: var(--color-green-dark);
  text-wrap: pretty;
}

@media (max-width: 640px) {
  .intro__body {
    font-size: 20px;
  }

  .intro__content {
    gap: 32px;
  }
}

/* Grá Mór illustration
   right: calc(50% + 422px + 24px) places the illustration's right edge
   exactly 24px to the left of the body text container's left edge.
   422px = half of max-width 844px */
.intro__illustration {
  position: absolute;
  bottom: 100px;
  left: calc(50% + 340px); /* 24px right of body text's right edge */
}

/* --- Intro responsive --- */

@media (max-width: 1024px) {
  /* Illustration drops out of absolute flow and stacks below text */
  #intro {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .intro__illustration {
    position: static;
    margin-top: 48px;
  }
}


/* ============================================================
   OUR STORY + PROPOSAL STACK
   Same pattern as hero-intro-stack: Our Story sticks while
   Proposal scrolls up over it on top.
   ============================================================ */

.story-proposal-stack {
  position: relative;
}

/* Invisible scroll runway for the envelope animation.
   Our Story sticks at the top while this scrolls behind it.
   Shorter on desktop — 1200vh at 1080px = 12,960px of scrolling,
   which feels sluggish with a mouse wheel. 900vh ≈ 9,720px. */
.story-scroll-spacer {
  height: 700vh;
}

@media (max-width: 1100px) {
  .story-scroll-spacer {
    height: 1200vh;
  }
}

/* ============================================================
   SECTION 3 — OUR STORY
   ============================================================ */

#our-story {
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: 100dvh;
  overflow: clip; /* Clips 5× scaled heading + off-screen envelopes. Uses clip (not hidden)
                     to avoid creating a scroll container that breaks sticky positioning. */
  background-image: url('../images/floral-background.webp');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-section);
}

/* "Our Story" heading — large, centered over the envelopes.
   Deliberate per-section font-size exception (approved in plan). */
.our-story__heading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(56px, 10vw, 140px);
  line-height: 0.95;
  color: var(--color-cream);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
  will-change: transform; /* GPU-accelerated for GSAP scale animation */
}


/* Envelope overlay — covers the full section so each wrapper can be
   individually positioned at 50%/50%. No perspective here — the wrapper
   only translates; 3D depth lives on the wrapper itself. */
.our-story__envelopes {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Clips envelopes that start at ±120vw — contains the overflow at the
     source instead of on the sticky parent (where overflow-x: clip fails). */
  overflow: hidden;
}

/* Envelope wrapper — anchored at the section centre (GSAP adds xPercent/yPercent: -50
   to truly centre it). perspective: 1200px gives the inner card enough depth room
   for the z:400 Ironhill entrance (was 800px — too shallow).
   preserve-3d passes the 3D context through to .envelope and its children. */
.envelope-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* The envelope card.
   No preserve-3d here — children stack in DOM paint order (flap first = behind front). */
.envelope {
  width: 600px;
  height: 420px;
  position: relative;
}

/* Shadow box — sibling of .envelope inside .envelope-wrapper.
   Carries the box-shadow so it's never clipped by .envelope's clip-path
   during letter extraction (prevents shadow flicker). */
.envelope__shadow-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 420px;
  border-radius: 4px;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.20),
    inset 0 0 50px rgba(67, 70, 31, 0.06);
  pointer-events: none;
}

/* Front face of the envelope — the address side.
   z-index: 1 creates a stacking context so stamps (z-index 1–3 inside)
   stay contained — they can't compete with the letter (z-index: 2) above. */
.envelope__front {
  width: 100%;
  height: 100%;
  background-color: #EFE6D3; /* Fallback colour if texture doesn't load */
  background-image: url('../images/background-texture-envelope.png');
  background-repeat: repeat;
  background-size: auto;
  border: 1px solid rgba(180, 155, 110, 0.25);
  border-radius: 4px;
  /* box-shadow moved to .envelope__shadow-box (sibling) to avoid clip-path flicker */
  position: relative;
  z-index: 1;
}

/* Address label — "Ashley's Version" / "Eoin's Version".
   Positioned center-left like a handwritten envelope address. */
.envelope__address {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Step 1 moves top-left corner to center, step 2 pulls it back by half its own size */
  text-align: center;
  white-space: nowrap; /* Prevent wrapping to a third line */
  font-family: var(--font-h2); /* TheSecretLibrary */
  font-size: clamp(28px, 2.5vw, 38px);
  line-height: 1.3;
  color: var(--color-green-dark);
}

/* Stamp cluster — anchored to top-right corner of the envelope.
   Percentage dimensions mean the cluster scales automatically
   when the envelope resizes (e.g. on mobile). */
.envelope__stamps {
  position: absolute;
  top: 8%;
  right: 5%;
  width: 38%;  /* ~160px on a 420px envelope */
  height: 42%; /* ~118px on a 280px envelope */
}

/* Each stamp is absolutely positioned within the cluster container.
   Width is a % of the container so it scales with the envelope.
   filter: drop-shadow() traces the actual stamp outline (unlike
   box-shadow which follows the rectangular bounding box). */
.envelope__stamp {
  position: absolute;
  width: 55%;
  height: auto;
}

/* --- Ashley's stamps: America (landscape), Florida (square), Cherub (portrait) ---
   Stacked like they've been placed one by one, each at a slightly different angle. */

/* America flag — behind, lower-left of cluster */
.envelope-wrapper--ashley .envelope__stamp:nth-child(1) {
  width: 50%;
  bottom: 60%;
  left: 30%;
  z-index: 1;
  transform: rotate(-5deg);
}

/* Florida — behind, upper-right */
.envelope-wrapper--ashley .envelope__stamp:nth-child(2) {
  width: 40%;
  top: -8%;
  right: -6%;
  z-index: 2;
  transform: rotate(8deg);
}

/* Cherub — front, overlapping both */
.envelope-wrapper--ashley .envelope__stamp:nth-child(3) {
  width: 30%;
  top: 20%;
  left: 58%;
  z-index: 3;
  transform: rotate(-3deg);
}

/* --- Eoin's stamps: Éire (circular), Hurler (portrait) --- */

/* Éire — behind, lower-left */
.envelope-wrapper--eoin .envelope__stamp:nth-child(1) {
  width: 35%;
  bottom: 35%;
  left: 50%;
  z-index: 2;
  transform: rotate(-4deg);
}

/* Hurler — front, upper-right */
.envelope-wrapper--eoin .envelope__stamp:nth-child(2) {
  width: 30%;
  top: -5%;
  right: -3%;
  z-index: 1;
  transform: rotate(8deg);
}

/* Flap — triangular lid at the top of the envelope.
   clip-path makes the triangle pointing downward (the classic V-flap shape).
   transform-origin: center top = hinge is the top edge (where flap meets envelope body).
   The tip hangs down when closed; rotateX(180) swings it away from the viewer and flat
   behind the envelope. backface-visibility: hidden = flap disappears once it rotates
   past 90°, preventing it re-appearing as a mirror image. */
.envelope__flap {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #EFE6D3;
  background-image: url('../images/background-texture-envelope.png');
  background-repeat: repeat;
  background-size: auto;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: center top;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Letter — cream paper that lives inside the envelope.
   Taller than the envelope (A4 portrait: 480 × √2 = 679px).
   Anchored to the bottom of the envelope — bottom: 10px puts it like
   a letter resting inside, the rest extending upward out of frame.
   GSAP raises it into view on scroll. */
/* Letter — positioned at centre of envelope-wrapper (which is at section centre).
   GSAP sets xPercent/yPercent to move it from hidden (behind envelope) to viewport centre.
   left:50% + top:50% + translate(-50%,-50%) = true centre. */
.envelope__letter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 560px;
  height: 80vh;
  background-color: var(--color-cream);
  border-radius: 2px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.10),
    inset 0 0 60px rgba(139, 119, 80, 0.12); /* Subtle vignette — aged paper feel */
  /* z-index managed by GSAP: starts at 0 (behind envelope), switches to 2
     after extraction clears overlap — no visual pop */
  padding: 32px 16px 32px;
  overflow-y: auto;
  /* Hide scrollbar but keep scrolling — letter looks like real paper */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--color-green-dark);
  /* TODO: re-add filter + SVG mask when new texture is ready.
     Removed for now — square viewBox mask distorted on tall rectangle. */
}

/* WebKit scrollbar hide (Chrome, Safari, Edge) */
.envelope__letter::-webkit-scrollbar {
  display: none;
}

/* Paragraph spacing inside letters — fills empty space after text was shortened */
.envelope__letter-inner p + p:not(.envelope__signature) {
  margin-top: 16px;
}

/* Signature at the bottom of the letter — TheSecretLibrary to look handwritten */
.envelope__signature {
  font-family: var(--font-h2); /* TheSecretLibrary */
  font-size: clamp(18px, 1.5vw, 24px);
  color: var(--color-green-dark);
  margin-top: 36px;
  text-align: left;
}

/* Fold lines — thin horizontal creases at 1/3 and 2/3 of letter height.
   Top edge = shadow (dark), bottom edge = highlight (light) — simulates
   light catching a paper fold. Hidden until GSAP reveals during unfold. */
.envelope__fold-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.08),   /* shadow on top edge */
    rgba(255, 255, 255, 0.15) /* highlight on bottom edge */
  );
  mix-blend-mode: multiply; /* Fold crease interacts with text — ink deepens at the fold */
}

.envelope__fold-line--upper {
  top: 33.33%;
}

.envelope__fold-line--lower {
  top: 66.66%;
}

/* --- Section 3 responsive --- */


@media (max-width: 640px) {
  .our-story__heading {
    font-size: clamp(44px, 16vw, 72px);
    white-space: normal; /* allow "Our" and "Story" to stack on narrow screens */
    line-height: 2;
  }

  .envelope {
    width: min(380px, 90vw); /* Scale down on screens narrower than ~420px */
    height: 265px;
  }

  .envelope__shadow-box {
    width: min(380px, 90vw);
    height: 265px;
  }

  .envelope__letter {
    width: min(350px, 85vw); /* Narrower than envelope, still fits small screens */
    padding: 24px 20px;
    font-size: 14px;
    justify-content: flex-start; /* Desktop uses center, but on mobile content may be taller —
       flex-start starts text from top */
  }

  .envelope__letter-inner {
    min-height: 0; /* Flexbox fix: lets parent's overflow-y: auto activate
       — without this, flex children default to min-height: auto
       and refuse to shrink below content height */
  }

  /* .envelope__address font-size handled by var(--size-h4) clamp — no override needed */

  /* Stamps scale automatically via % widths — no px override needed */

}

/* ============================================================
   SECTION 4 — PROPOSAL PHOTO
   Full-bleed image, no padding, no text.
   ANIMATION PLAN (future session):
   - #proposal will be pinned/sticky via GSAP ScrollTrigger
   - Starts at translateY(100vh), slides up to translateY(0)
   - Triggered at the end of #our-story scrolling past viewport
   - Effect: proposal photo "covers" Our Story as user scrolls
   ============================================================ */

#proposal {
  position: relative;
  z-index: 1; /* Scrolls over the sticky Our Story */
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.proposal__photo {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   ORDER OF EVENTS — Transitional heading
   ============================================================ */

#order-of-events {
  background-color: var(--color-bg-default);
  padding: var(--padding-section) var(--page-padding) 0;
}

.order-of-events__content {
  max-width: var(--max-width-xl);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40px;
}

.order-of-events__body {
  max-width: 680px;
}

/* ============================================================
   SHARED — EVENT SECTION
   Used by: #welcome-dublin (s5), #night-before (s6), #day-two (s8)
   ============================================================ */

/* Event titles: semantically h3 but keep TheSecretLibrary script feel,
   sized between global h2 (40→56) and h3 (28→40). */
.event-section__header h3,
.wedding-day__header h3 {
  font-family: var(--font-h2);
  font-size: clamp(32px, calc(26.4px + 1.50vw), 48px);
  line-height: var(--leading-h2);
}

@media (max-width: 640px) {
  .event-section__header h3,
  .wedding-day__header h3 {
    font-size: clamp(28px, calc(21.66px + 1.69vw), 34px);
    line-height: 2;
  }
}

.event-section {
  padding: var(--padding-section) var(--page-padding );
}

.event-section__inner {
  max-width:var(--max-width-xl);
  margin:0 auto;
}

/* --- Header row: title left, date + badge stacked right --- */

.event-section__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 80px;
}

.event-section__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  flex-shrink: 0; /* prevents meta from squishing when h2 is long */
}

.event-section__date {
  font-family: var(--font-h3); /* Recoleta */
  font-size: clamp(16px, calc(13.5px + 0.7vw), 24px); /* 24px max — smaller than h3's 40px */
  font-weight: 600;            /* SemiBold */
  line-height: 1;
  text-transform: uppercase;
  text-align: right;
}

.event-section__badge {
  display: inline-block;
  font-family: var(--font-h4); /* Recoleta */
  font-size: var(--size-body-sm); /* clamp(16px → 18px) — smaller than before */
  font-weight: 600;
  text-transform: uppercase;
  padding: 8px 12px;
  border: 1.5px solid var(--color-green-dark);
  line-height: 1;
}

/* --- Body: flex layout, each col max 768px --- */

.event-section__body {
  display: flex;
  gap: 80px;
}

@media (max-width:1100px) {
  .event-section__header {
    flex-direction: column;
    gap:64px;
  }

  .event-section__meta {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;}
  .event-section__body {
    flex-direction: column;
    gap:32px;
  }
}

@media (max-width: 640px) {
  .event-section__header {
    flex-direction: column; /* Stack title above date/badge on mobile */
    gap: 24px;             /* Title to date/badge */
    margin-bottom: 48px;   /* Header group further from body content */
  }

  .event-section__meta {
    flex-direction: column; /* Stack date + badge vertically on small screens */
    align-items: flex-start;
    gap: 16px;
  }
}


.event-section__col:first-child {
  flex: 5;
}

.event-section__col:last-child {
  flex: 5;
}


/* Direct-child spacing only — avoids bleeding into schedule items */
.event-section__col > h4 {
  margin-bottom: 8px;
}

.event-section__col > p {
  margin-bottom: 32px;
}

.event-section__address {
  font-family: var(--font-h4); /* Recoleta Regular */
  font-weight: 400;
}

/* Last child in a column removes its own bottom margin so it doesn't
   add to the section's bottom padding, keeping top and bottom even */
.event-section__col > p:last-child,
.event-section__col > h4:last-child,
.event-section__col > .event-section__schedule:last-child {
  margin-bottom: 0;
}

/* --- Schedule (time + event rows within a col) ---
   Parent grid: max-content col 1 = width of the widest time
   string, so all descriptions stay left-aligned across rows.
   display: contents on items makes them transparent to the grid
   (their children become the actual grid cells).
   Divider is an explicit <hr> with grid-column: 1 / -1 so it
   spans both columns as a single unbroken line. */

.event-section__schedule {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 24px;
  margin-bottom: 32px;
}

.event-section__schedule-item {
  display: contents;
}

.event-section__schedule-item > * {
  padding-top: 16px;
  padding-bottom: 16px;
}

.event-section__divider {
  grid-column: 1 / -1; /* spans both schedule columns */
  border: none;
  border-top: 1px solid rgba(67, 70, 31, 0.25);
}

.event-section__time {
  font-family: var(--font-h4); /* Recoleta Regular */
  font-size: var(--size-h4);   /* clamp(20px → 24px) */
  font-weight: 400;
  
  line-height: var(--leading-h4);
  white-space: nowrap; /* time string never wraps mid-line */
}

.event-section__note {
  font-size: var(--size-body-sm); /* clamp(16px → 18px) — supplementary detail */
  margin-top: 8px;
}

/* --- Schedule mobile: stack time above description --- */
@media (max-width: 640px) {
  .event-section__schedule {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  /* Remove the 16px+16px padding gap between stacked time and description */
  .event-section__schedule-item > * {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Re-add vertical spacing between schedule items via the time element */
  .event-section__time {
    white-space: normal;
    padding-top: 16px;
  }

  /* Description gets a small gap below time */
  .event-section__schedule-item > *:not(.event-section__time) {
    padding-top: 4px;
    padding-bottom: 16px;
  }
}


/* ============================================================
   PHOTO STRIP — reusable full-width image breaker
   Appears between sections. Each instance has a unique ID for
   targeting different images. Placeholder bg-colors show when
   src is empty — they'll disappear behind real photos.
   ============================================================ */

.photo-strip {
  display: flex;
  gap: 8px;
  background: var(--color-cream); /* gap colour = cream background showing through */
}

.photo-strip__item {
  flex: 1;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* Placeholder colours — visible until real photos replace them */
.photo-strip__item:nth-child(odd)  { background-color: #c8cbab; } /* light sage */
.photo-strip__item:nth-child(even) { background-color: #d9cdb5; } /* warm sand */

.photo-strip__item img {
  width: 100%;
  height: 120%; /* Extra height for parallax shift */
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.photo-strip__item:nth-child(1) img {
  object-position: center 25%;
}

.photo-strip__item:nth-child(3) img {
  object-position: center 25%;
}

.photo-strip__item:nth-child(4) img {
  object-position: center 35%;
}

/* --- Photo strip mobile: 3 images instead of 4 --- */
@media (max-width: 640px) {
  .photo-strip__item:nth-child(4) {
    display: none;
  }
}


/* ============================================================
   SECTION 7 — OUR WEDDING DAY
   Four visual zones: upper (dark green) | timeline (cream) |
   full-bleed photo | venue (dark green).
   Each zone manages its own padding and background.
   ============================================================ */

#wedding-day {
  background-color: var(--color-green-dark);
}


/* --- Zone 1: Upper — header + 3-col + attire (dark green) --- */

.wedding-day__upper {
  padding: var(--padding-section) var(--page-padding) 0;
  color: var(--color-cream);
}

.wedding-day__header {
  text-align: center;
  margin-bottom: 80px;
}

.wedding-day__overline {
  font-family: var(--font-h4);
  font-size: clamp(16px, calc(13.5px + 0.7vw), 24px);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 40px; /* Increased for visible breathing room before h2 */
}

/* Three-column: equal 1fr widths, items vertically centred */
.wedding-day__three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Left column: Recoleta Regular pull quote, all caps, centred.
   Font-size scales so the longest line ("UNFOLDS HERE", 12 chars) fills the column.
   Formula: column-width ÷ (12 chars × ~0.7em avg char width) = ÷ 25.
   Adjust divisor if lines overflow (increase) or fall short (decrease). */
.wedding-day__pull {
  font-family: var(--font-h4);
  font-size: clamp(32px, calc((100vw - 2 * var(--page-padding) - 120px) / 25), 56px);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
}

/* Centre column: 3:4 portrait crop.
   Wrapper div owns the aspect-ratio — more reliable than putting it on <img>
   directly, which can fight with the HTML width/height attributes during resize. */
.wedding-day__fountain-wrap {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.wedding-day__fountain-photo {
  display: block;
  width: 100%;
  height: 120%; /* 20% taller than container — parallax headroom */
  object-fit: cover;
}

/* Right column: centred text */
.wedding-day__col--right {
  text-align: center;
}

/* Vertical divider: short decorative line, centred */
.wedding-day__divider {
  width: 1px;
  height: 60px;
  background-color: rgba(239, 230, 211, 0.4);
  margin: 80px auto;
}

/* Last divider sits flush at the bottom edge of the upper zone —
   no gap between it and the cream timeline section below. */
.wedding-day__upper > .wedding-day__divider:last-child {
  margin-bottom: 0;
}

/* Attire block: centred */
.wedding-day__attire {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}

/* --size-h3 hits 40px max as requested */
.wedding-day__attire-label {
  font-family: var(--font-h4);
  font-size: var(--size-h3);
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
  text-wrap: balance;
  margin-bottom: 8px;
}

.wedding-day__attire-body {
  text-wrap: pretty;
  margin-bottom: 24px;
}

.wedding-day__attire-link a {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* --- Zone 2: Timeline (cream background) --- */

.wedding-day__timeline-section {
  background-color: var(--color-cream);
  padding: var(--padding-section) var(--page-padding);
  position: relative; /* Anchor for the full-height centre divider */
  --line-progress: 0; /* GSAP animates 0→1 to draw the centre line on scroll */
}

/* Divider runs full height of the section (including padding),
   not just the height of the grid. */
.wedding-day__timeline-section::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: rgba(67, 70, 31, 0.25);
  transform: translateX(-50%) scaleY(var(--line-progress));
  transform-origin: center top; /* Line draws downward from the top */
  pointer-events: none;
}

/* Two independent flex columns side by side.
   Right column offset downward (padding-top) so items alternate
   rather than aligning in rows. */
.wedding-day__timeline {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.timeline__col {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* 80px gap from centre divider on each side.
   align-items: flex-end pushes each event to the right (toward divider). */
.timeline__col--left {
  padding-right: 80px;
  align-items: flex-end;
}

.timeline__col--right {
  padding-left: 80px;
  padding-top: var(--padding-section); /* Stagger: offsets right col to alternate with left */
}

/* Left items: image on left, text right-aligned (faces centre) */
.timeline__col--left .timeline__event {
  display: flex;
  align-items: center;
  gap: 24px;
}

.timeline__col--left .timeline__text {
  text-align: right;
}

/* Right items: text left-aligned (faces centre), image on right */
.timeline__col--right .timeline__event {
  display: flex;
  align-items: center;
  gap: 24px;
}

.timeline__col--right .timeline__text {
  text-align: left;
}

.timeline__photo {
  width: clamp(80px, 8vw, 130px);
  height: auto;
  flex-shrink: 0;
}

.timeline__time {
  display: block;
  font-family: var(--font-h4);
  font-size: var(--size-body-sm);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-green-dark);
  margin-bottom: 24px; /* Space between time and event name */
}

/* Overrides global h3 font-family (Recoleta) — TheSecretLibrary needed here */
.timeline__label {
  font-family: var(--font-h2);
  font-size: var(--size-h4); /* Reduced: 20→24px */
  line-height: 1;
  color: var(--color-green-dark);
}


/* --- Zone 3: Full-bleed venue photo --- */

/* Wrapper owns the layout (margin, width, aspect-ratio) and clips overflow.
   The image inside is 120% tall for parallax headroom. */
.wedding-day__venue-photo-wrap {
  width: calc(100% - 64px);
  aspect-ratio: 16 / 9;
  margin: 32px 32px 0;
  overflow: hidden;
}

.wedding-day__venue-photo {
  display: block;
  width: 100%;
  height: 120%; /* 20% taller than container — parallax headroom */
  object-fit: cover;
  object-position: center 60%;
}


/* --- Zone 4: Venue sub-section (dark green) --- */

.wedding-day__venue {
  padding: 64px var(--page-padding) var(--padding-section);
}

.venue__inner {
  display:flex;
  flex-direction:row;
  max-width: var(--max-width-xl);
  margin:0 auto;
  gap:60px

}

.venue__left {
  flex:6;
}

.venue__right {
  flex:4;
}

.venue__overline {
  font-family: var(--font-h4);
  font-size: var(--size-body-sm);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-cream);
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.venue__name {
  color: var(--color-cream);
}

.venue__right {
  max-width: 768px;
}

.venue__body {
  color: var(--color-cream);
  margin-bottom: 32px;
}

.venue__location-label {
  font-family: var(--font-h4);
  font-size: var(--size-body);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-cream);
  letter-spacing: 0.05em;
  margin-top: 40px;
  margin-bottom: 8px;
}

.venue__address {
  font-size: var(--size-body);
  color: var(--color-cream);
}


/* --- Section 7 responsive --- */

@media (max-width: 1100px) {

  .wedding-day__three-col {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto;
    gap: 60px;
  }

.wedding-day__divider {
  margin:60px auto;
}

  .wedding-day__col--centre { order: -1; }

  .wedding-day__timeline-section {
    padding: 80px var(--page-padding);
  }

  .timeline__col--left  { padding-right: 40px; }
  .timeline__col--right { padding-left: 40px; padding-top: 80px; }

  .wedding-day__venue {
    grid-template-columns: 1fr;
  }

  .venue__inner {
  flex-direction: column;
  gap:60px
}
}

@media (max-width: 640px) {

  /* Tighten 2-column timeline to fit narrow screens */
  .timeline__col--left  { padding-right: 12px; align-items: center; }
  .timeline__col--right { padding-left: 12px; padding-top: 60px; align-items: center; }
  .timeline__col { gap: 72px; }

  /* Stack photo above text on mobile */
  .timeline__col--left .timeline__event,
  .timeline__col--right .timeline__event {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  /* Right column: photo is after text in DOM — pull it above */
  .timeline__col--right .timeline__photo {
    order: -1;
  }

  .timeline__photo { width: clamp(60px, 18vw, 100px); }
  .timeline__time { margin-bottom: 8px; }

  .timeline__label {
    font-size: clamp(14px, 3.8vw, 18px);
  }

  .wedding-day__venue-photo-wrap {
    height: 50vh;
    aspect-ratio: unset; /* Height-based on mobile, not aspect-ratio */
    width: calc(100% - 32px);
    margin: 16px 16px 0;
  }

}


/* ============================================================
   SECTION 9 — How to Get There
   ============================================================ */

#getting-there {
  background-color: var(--color-bg-default); /* matches event sections */
  padding: var(--padding-section) var(--page-padding );
}

.getting-there__inner {
  max-width: 1280px;
  margin: 0 auto;
}

#getting-there h2 {
  text-align: center;
  margin-bottom: 24px;
}

/* Flexbox layout: text has min-width and grows; visuals fills remaining space */
.getting-there__grid {
  display: flex;
  align-items: center;
  gap: 60px;
}

.getting-there__text {
  flex: 1;
  min-width: 480px;
}

.getting-there__visuals {
  flex: 1;
}


/* ── Left column: text ─────────────────────────────────── */

.getting-there__text p {
  margin-bottom: 32px;
}

.getting-there__text p:last-child {
  margin-bottom: 0;
}

/* Bullet list — re-enable list-style removed by CSS reset */
.getting-there__directions {
  list-style: disc;
  padding-left: 1.4em;
  margin-top: -16px; /* snug under "From Dublin:" paragraph */
  margin-bottom: 32px;
}

.getting-there__directions li {
  margin-bottom: 8px;
}


/* ── Right column: visuals ─────────────────────────────── */

/* Polaroid wrapper: aspect-ratio gives the composition a fluid height.
   As the visuals column narrows, the wrapper shrinks proportionally.
   Both polaroids are absolute inside, so they scale with it. */
.getting-there__polaroids {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
}

/* Polaroid — shared styles. Width is % of the wrapper so it scales. */
.polaroid {
  position: absolute;
  background: var(--color-cream);
  padding: 12px 12px 48px; /* thick bottom = classic Polaroid look */
  box-shadow:
    0 1.836px 0 0 #fff inset,
    1.836px 0 0 0 rgba(0, 0, 0, 0.20) inset;
  width: 70%;
}

.polaroid__photo {
  width: 100%;
  aspect-ratio: 383 / 414; /* Figma photo area ratio */
  background-color: #d6d0c4; /* neutral placeholder tone */
  overflow: hidden; /* clip img to aspect-ratio box */
}

.polaroid__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

/* Back polaroid — Figma rotation */
.getting-there__polaroid--back {
  top: 16%;
  right: 11%;
  transform: rotate(13.308deg);
  z-index: 1;
}

/* Front polaroid — Figma rotation */
.getting-there__polaroid--front {
  top: 26%;
  right: 19%;
  transform: rotate(8.62deg);
  z-index: 2;
}

/* Map: normal flow, pulled up into the polaroids via negative margin-top.
   margin-top % is relative to parent width — gives proportional overlap.
   z-index above polaroids so it reads as sitting on top. */
.getting-there__map {
  position: relative;
  width: 50%;
  margin-left: 40%;
  margin-top: -60%;
  z-index: 10;
}

.getting-there__map img {
  width: 100%;
  height: auto;
}

/* Route overlay SVG — shares viewBox (0 0 273 343) with map image.
   Route path added in animation build phase. */
.getting-there__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}


/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 1100px) {


  /* Stack columns vertically */
  .getting-there__grid {
    flex-direction: column;
  }

  /* Release min-width so text fills the full column */
  .getting-there__text {
    min-width: 0;
  }

  .getting-there__visuals {
  width: 100%;
}

.getting-there__polaroid--back {
  top: 5%;
}

.getting-there__polaroid--front {
  top: 15%;
}
}


/* ============================================================
   SECTION 10 — Where to Stay
   ============================================================ */

#where-to-stay {
  background-color: var(--color-bg-default);
  padding: var(--padding-section) var(--page-padding);
}

.where-to-stay__inner {
  max-width: 1280px;
  margin: 0 auto;
}

#where-to-stay h2 {
  text-align: center;
  margin-bottom: 24px;
}

/* Intro paragraph — centered, constrained width */
.where-to-stay__intro {
  text-align: center;
  max-width: 768px;
  margin: 0 auto 80px;
}

/* 50/50 grid — top-aligned so unequal content heights don't stretch */
.where-to-stay__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  align-items: start;
}


/* ── Column label (NEAR THE VENUE / DUBLIN CITY BREAK) ──────── */

.where-to-stay__col-label {
  font-family: var(--font-h4); /* Recoleta */
  font-weight: var(--font-h4-weight); /* 600 SemiBold */
  font-size: var(--size-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

/* Intro text under the column label */
.where-to-stay__col-intro {
  margin-bottom: 40px;
}


/* ── Tables ─────────────────────────────────────────────────── */

.where-to-stay__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 48px;
}

/* Remove bottom margin from the last table in each column */
.where-to-stay__col > .where-to-stay__table:last-of-type {
  margin-bottom: 0;
}

/* Column headers */
.where-to-stay__table th {
  font-family: var(--font-h4); /* Recoleta SemiBold */
  font-weight: var(--font-h4-weight);
  font-size: var(--size-body-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  padding-bottom: 12px;
}

/* Data cells — non-name columns (drive, price, guests) use Recoleta */
.where-to-stay__table td {
  padding-top: 14px;
  padding-bottom: 2px;
  vertical-align: top;
}

.where-to-stay__table td:not(:first-child) {
  font-family: var(--font-h4); /* Recoleta — numbers/data */
  font-weight: normal;
  font-size: var(--size-body-sm); /* Recoleta renders optically larger than Lancelot at same size */
}

/* Add left padding to non-name columns so they don't crowd the name */
.where-to-stay__table td:not(:first-child),
.where-to-stay__table th:not(:first-child) {
  padding-left: 24px;
  white-space: nowrap;
}

/* Property/hotel name links */
.where-to-stay__table a {
  color: inherit;
  text-decoration: underline;
}

/* Bride/groom note at bottom of Dublin column */
.where-to-stay__note {
  margin-top: 40px;
}

/* Numeric values inline within the note — match table data cell treatment */
.where-to-stay__num {
  font-family: var(--font-h4);
  font-weight: normal;
  font-size: var(--size-body-sm);
}


/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 1100px) {

  /* Stack to single column */
  .where-to-stay__columns {
    grid-template-columns: 1fr;
    gap:60px
  }

}

@media (max-width: 640px) {

  /* Allow table cell text to wrap on narrow screens */
  .where-to-stay__table td:not(:first-child),
  .where-to-stay__table th:not(:first-child) {
    white-space: normal;
  }

}


/* ============================================================
   SECTION 11 — Things to Do Nearby
   ============================================================ */

#things-to-do {
  background-color: var(--color-cream);
  padding: var(--padding-section) var(--page-padding);
}

.things-to-do__inner {
  max-width: 1280px;
  margin: 0 auto;
}

#things-to-do h2 {
  text-align: center;
  margin-bottom: 24px;
}

.things-to-do__intro {
  text-align: center;
  max-width: var(--max-width-lg);
  margin: 0 auto 80px;
}


/* ── Dublin guide CTA card ───────────────────────────────── */

.things-to-do__dublin-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 80px;
  padding: 24px 32px;
  border: 1.5px solid var(--color-green-dark);
  text-align: center;
  text-decoration: none;
  color: var(--color-green-dark);
  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
}

.things-to-do__dublin-cta:hover {
  background-color: rgba(67, 70, 31, 0.06);
}

/* h3 inside the CTA — use global h3 font/size, override margin */
.things-to-do__dublin-cta-label {
  margin: 0;
}

.things-to-do__dublin-cta-action {
  font-family: var(--font-h4);
  font-weight: var(--font-h4-weight);
  font-size: var(--size-body-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ── Categories ──────────────────────────────────────────── */

.things-to-do__category {
  margin-bottom: 40px;
}

.things-to-do__category:last-of-type {
  margin-bottom: 0;
}

.things-to-do__category-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-transform: uppercase;
  color: var(--color-green-dark);
  font-family: var(--font-h4);
  font-weight: var(--font-h4-weight);
  font-size: var(--size-h4);
  line-height: var(--leading-h4);
}

/* Chevron — same technique as FAQ, but dark green stroke */
.things-to-do__category-heading::after {
  content: '';
  flex-shrink: 0;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M2 5 L8 11 L14 5' stroke='%2343461f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.7;
  transform: rotate(0deg);
  transition: transform 0.35s ease-in-out;
}

.things-to-do__category-heading[aria-expanded="true"]::after {
  transform: rotate(180deg);
}


/* ── Collapsible items panel ─────────────────────────────── */

.things-to-do__items {
  overflow: hidden;
  height: 0;
}

/* Inner slides down from above into the mask */
.things-to-do__items-inner {
  padding-top: 16px;
  transform: translateY(-100%);
}

.things-to-do__item {
  margin-bottom: 20px;
}

.things-to-do__item:last-child {
  margin-bottom: 0;
}

/* Drive time / location metadata */
.things-to-do__meta {
  font-family: var(--font-h4);
  font-weight: normal;
  font-size: var(--size-body-sm);
  opacity: 0.7;
}


/* ── Tips list (category 5) ──────────────────────────────── */

.things-to-do__tips {
  list-style: disc;
  padding-left: 1.5em;
}

.things-to-do__tips li {
  margin-bottom: 16px;
}

.things-to-do__tips li:last-child {
  margin-bottom: 0;
}


/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 640px) {

  .things-to-do__dublin-cta {
    margin-top: 60px;
    padding: 20px 24px;
  }

}


/* ============================================================
   SECTION 12 — Common Questions (FAQ accordion)
   ============================================================ */

#common-questions {
  background-color: var(--color-green-dark);
  padding: var(--padding-section) var(--page-padding );
}

.faq__inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* Two-column layout: heading left, accordion right */
.faq__layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 60px;
  align-items: start;
}

#common-questions h2 {
  color: var(--color-cream);
}


/* ── Accordion items ─────────────────────────────────────── */

.faq__item {
  margin-bottom: 40px;
}

.faq__item:last-child {
  margin-bottom: 0;
}

/* Question button — full-width, styled as text */
.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-transform: uppercase;
  color: var(--color-cream);
  font-family: var(--font-h4); /* Recoleta */
  font-weight: var(--font-h4-weight); /* SemiBold */
  font-size: var(--size-h4);
  line-height: var(--leading-h4);
}

/* Chevron indicator — SVG background-image so stroke width is controllable.
   inline-block + width/height required for transform to apply to a pseudo-element. */
.faq__question::after {
  content: '';
  flex-shrink: 0;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M2 5 L8 11 L14 5' stroke='%23efe6d3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.7;
  transform: rotate(0deg);   /* points down by default */
  transition: transform 0.35s ease-in-out;
}

.faq__question[aria-expanded="true"]::after {
  transform: rotate(180deg); /* points up when open */
}

/* Answer panel — outer is the clipping mask, height animates 0 → full */
.faq__answer {
  overflow: hidden;
  height: 0;
}

/* Inner slides down from above into the mask */
.faq__answer-inner {
  padding-top: 16px;
  color: var(--color-cream);
  transform: translateY(-100%);
}

.faq__answer-inner p {
  margin-bottom: 16px;
}

.faq__answer-inner p:last-child {
  margin-bottom: 0;
}

/* Numeric values (phone numbers, etc.) — match hotel price treatment */
.faq__num {
  font-family: var(--font-h4);
  font-weight: normal;
}


/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 1100px) {

  /* Stack heading above accordion */
  .faq__layout {
    grid-template-columns: 1fr;
  }

}


/* ============================================================
   SECTION 12 — Gifts
   ============================================================ */

#gifts {
  position: relative;
  z-index: 1; /* sits above sticky countdown to cover it during scroll */
  background-color: var(--color-bg-default);
  padding: var(--padding-section) var(--page-padding);
}

.gifts__inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* Header row: h2 left, intro text fills remaining space */
.gifts__header {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  margin-bottom: 80px;
}

.gifts__intro {
  flex: 1;
  padding-top: 8px; /* optically align with top of heading */
}

/* Cards — auto-wrap when columns would drop below 280px */
.gifts__cards {
  display: flex;
  flex-wrap:wrap;
  gap: 40px;
  align-items: stretch;
}

.gifts__card {
  flex:1;
  border: 1px solid rgba(67, 70, 31, 0.2); /* --color-green-dark at 20% */
  padding: 32px;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 640px) {

  /* Stack to single column */
  .gifts__card{
    flex:1 1 100%;
  }
}


/* ── Card ───────────────────────────────────────────────── */

/* Payment method label */
.gifts__method {
  font-family: var(--font-h4); /* Recoleta SemiBold */
  font-weight: var(--font-h4-weight);
  font-size: var(--size-body-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

/* Detail lines */
.gifts__details {
  font-size: var(--size-body-sm);
  margin-bottom: 4px;
}

.gifts__details:last-child {
  margin-bottom: 0;
}

/* IBAN / SWIFT values — Recoleta, no uppercase */
.gifts__data {
  font-family: var(--font-h4);
  font-weight: normal;
}


/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 1100px) {

  .gifts__header {
    flex-direction: column;
    gap: 40px;
    margin-bottom: 60px;
  }

}


/* ── Gifts-Countdown stack ──────────────────────────────────────
   Same pattern as hero-intro-stack: Countdown sticks at bottom: 0
   while Gifts scrolls up over it, revealing the countdown beneath. */

.gifts-countdown-stack {
  position: relative;
}


/* ============================================================
   SECTION 13 — Countdown
   ============================================================ */

#countdown {
  position: sticky;
  bottom: 0;
  z-index: 0; /* behind gifts during the reveal */
  background-image: url('../images/floral-background.webp');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px var(--page-padding);
  color: var(--color-cream);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* Flex row: units + colons */
.countdown__display {
  display: flex;
  align-items: flex-start;
}

/* Each unit: number on top, label 24px below, both centred */
.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Large display numbers — width locked per-field by JS (not per-digit) */
.countdown__number {
  display: inline-block;
  text-align: center;
  font-family: var(--font-h1); /* TheSecretLibrary */
  font-size: clamp(18px, 7vw, 130px);
  line-height: 2;
  /* width set dynamically by initCountdown() */
}

/* Colon separator — matches number font-size exactly */
.countdown__colon {
  font-family: var(--font-h1);
  font-size: clamp(18px, 7vw, 130px);
  line-height: 1;
  padding: 0 0.1em;
  align-self: flex-start; /* align with the number row, not the label */
}

/* Unit labels */
.countdown__label {
  font-family: var(--font-h3); /* Recoleta */
  font-size: var(--size-h3);
  text-align: center;
}

/* Post-wedding message — shown after target date passes */
.countdown__married {
  font-family: var(--font-h1);
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1.2;
  text-align: center;
  width: 100%;
}

/* --- Countdown mobile overrides --- */
@media (max-width: 640px) {
  /* On mobile, remove the wrapper from layout entirely so #gifts and
     #countdown become direct flow children — eliminates scroll-height
     miscalculation caused by sticky-in-relative-wrapper at document end */
  .gifts-countdown-stack {
    display: contents;
  }

  /* Disable sticky reveal — tall stacked gift cards make the sticky
     interaction feel broken on mobile (can't scroll past) */
  #countdown {
    position: relative;
  }

  .countdown__number {
    font-size: clamp(28px, 8.5vw, 54px);
    line-height: 1.2;
  }

  .countdown__colon {
    font-size: clamp(28px, 8.5vw, 54px);
  }

  .countdown__label {
    font-size: clamp(14px, 3.5vw, 20px);
  }
}

/* ── Reduced motion: disable the sticky reveal ────────────── */
@media (prefers-reduced-motion: reduce) {
  #countdown {
    position: static;
  }
}

/* ============================================================
   PAGE TRANSITION OVERLAY
   Full-screen cream cover used for nav-link navigation.
   GSAP fades opacity 0→1→0; pointer-events stays none so
   a stuck overlay can never block interaction.
   ============================================================ */

.page-transition {
  position: fixed;
  inset: 0;
  background: var(--color-cream);
  opacity: 0;
  pointer-events: none;
  z-index: 9997; /* below paper texture (9998) and nav panel (9999) */
}


/* ============================================================
   SECTION 14 — Nav
   Fixed toggle button top-right. Slide-in panel.
   ============================================================ */

/* ── Toggle button ─────────────────────────────────────────── */

.site-nav__toggle {
  position: fixed;
  top: var(--page-padding);
  right: var(--page-padding);
  z-index: 10000; /* above panel */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.site-nav__toggle-labels {
  display: inline-block; /* sized by full "CLOSE MENU" width at all times */
}

.site-nav__toggle-close {
  opacity: 0; /* invisible but occupies space — MENU never shifts */
}

.site-nav__toggle-close,
.site-nav__toggle-menu {
  font-family: var(--font-h4);       /* Recoleta */
  font-weight: 600;
  font-size: var(--size-body-sm);    /* 16–18px fluid */
  letter-spacing: 0.12em;
  color: var(--color-green-dark);
  text-transform: uppercase;
  transition: color 400ms ease;
}

/* Over dark-green sections the button flips to cream */
.site-nav__toggle--light .site-nav__toggle-close,
.site-nav__toggle--light .site-nav__toggle-menu {
  color: var(--color-cream);
}


/* ── Panel ─────────────────────────────────────────────────── */

.site-nav__panel {
  position: fixed;
  /* Panel sits half a page-padding from viewport edges.
     Toggle button is at --page-padding, so it lands --page-padding/2 inside
     the panel boundary — a natural buffer between button and panel edge. */
  top: calc(var(--page-padding) / 2);
  right: calc(var(--page-padding) / 2);
  z-index: 9999;
  width: 35vw;
  height: calc(100dvh - var(--page-padding));
  background-color: var(--color-cream); /* #efe6d3 */
  box-shadow: -4px 4px 32px rgba(0, 0, 0, 0.18);
  padding: 32px;
  /* clip-path starting state — GSAP animates this open */
  clip-path: inset(0% 0% 100% 100%);
}

/* display: flex only applies when the hidden attribute is absent.
   Without this split, display: flex would override the HTML hidden attribute
   and the panel would be visible on page load. */
.site-nav__panel:not([hidden]) {
  display: flex;
  flex-direction: column;
}


/* ── Nav list ──────────────────────────────────────────────── */

.site-nav__list {
  list-style: none;
  flex: 1;                  /* Grows to fill remaining space above RSVP */
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Vertically centre the links in the available space */
  gap: 4px;
  /* Items are revealed with clip-path by JS — start hidden */
  overflow: hidden;
}

.site-nav__item {
  overflow: hidden; /* Clip child so rising animation stays inside the item row */
}

.site-nav__link {
  display: flex;
  justify-content: space-between; /* Label left, numeral right */
  align-items: baseline;
  gap: 16px;
  text-decoration: none;
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid rgba(67, 70, 31, 0.12);
}

.site-nav__label {
  font-family: var(--font-h3);       /* Recoleta */
  font-size: var(--size-body);       /* 18–24px fluid */
  color: var(--color-green-dark);
  line-height: 1.2;
}

.site-nav__numeral {
  font-family: var(--font-h4);     /* Recoleta SemiBold */
  font-size: var(--size-body-sm);    /* smaller, secondary */
  color: var(--color-green-dark);
  opacity: 0.5;
  line-height: 1.2;
  flex-shrink: 0;
}

/* Hover: underline slides in from left on the label */
.site-nav__link::after {
  display: none; /* Using border-bottom on the link row instead */
}

@media (hover: hover) and (pointer: fine) {
  .site-nav__link:hover .site-nav__label {
    opacity: 0.7;
    transition: opacity 150ms ease-out;
  }
}


/* ── Contact section ───────────────────────────────────────── */

.site-nav__contact-wrap {
  overflow: hidden; /* Mask — contact slides into this from above */
  margin-top: 24px;
}

.site-nav__contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(67, 70, 31, 0.2);
}

.site-nav__contact-title {
  grid-column: 1 / -1;              /* Spans both name columns */
  font-family: var(--font-h4);      /* Recoleta SemiBold — gives it weight over the detail text */
  font-weight: 600;
  font-size: 16px;
  color: var(--color-green-dark);
  line-height: 1.5;
}

.site-nav__contact-person {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0; /* Allow grid child to shrink below content size so text can wrap */
}

.site-nav__contact-name {
  font-family: var(--font-h4);       /* Recoleta SemiBold */
  font-weight: 600;
  font-size: 16px;
  color: var(--color-green-dark);
  margin-bottom: 3px;
}

.site-nav__contact-detail {
  font-family: var(--font-h4);
  font-weight: normal;
  font-size: 14px;
  color: var(--color-green-dark);
  opacity: 0.7;
  text-decoration: none;
  line-height: 1.4;
  /* Allow long emails to wrap onto a second line */
  overflow-wrap: break-word;
}

@media (hover: hover) and (pointer: fine) {
  .site-nav__contact-detail:hover {
    opacity: 1;
    text-decoration: underline;
  }
}


/* ── Tablet ────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .site-nav__panel {
    /* Full screen from tablet down */
    top: 0;
    right: 0;
    min-width: 0;
    width: 100vw;
    height: 100dvh;
  }
}

/* ── Mobile ────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .site-nav__panel {
    padding: 28px 24px;
  }
}


/* ── Reduced motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .site-nav__panel {
    /* Skip clip-path animation — JS will apply this class */
    transition: none;
  }
}


/* ============================================================
   PASSWORD GATE
   Full-screen overlay that hides the site until password entered.
   z-index: 10001 — above everything including nav toggle (10000).
   ============================================================ */

.password-gate {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background-color: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-gate[hidden] {
  display: none;
}

.password-gate__content {
  text-align: center;
  padding: 0 var(--page-padding);
  padding-top: 5vh; /* Nudge down — offsets visual top-heaviness of the title */
}

.password-gate__title {
  font-family: var(--font-h1);
  font-size: clamp(44px, calc(37px + 1.88vw), 64px);
  line-height: 2;
  color: var(--color-green-dark);
  margin-bottom: 20px;
}

.password-gate__subtitle {
  font-family: var(--font-body);
  font-size: var(--size-body-sm);
  color: var(--color-green-dark);
  opacity: 0.55;
  max-width: 320px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

.password-gate__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 320px;
  margin: 0 auto;
}

.password-gate__input {
  font-family: var(--font-body);
  font-size: var(--size-body-sm);
  color: var(--color-green-dark);
  background: transparent;
  border: 1px solid rgba(67, 70, 31, 0.3);
  padding: 14px 20px;
  text-align: center;
  outline: none;
  transition: border-color 200ms ease;
}

.password-gate__input:focus {
  border-color: var(--color-green-dark);
}

.password-gate__button {
  font-family: var(--font-h4);
  font-weight: 600;
  font-size: var(--size-body-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cream);
  background-color: var(--color-green-dark);
  border: none;
  padding: 14px 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Fill sweeps down from top on hover — same as RSVP button */
.password-gate__button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-100%);
  transition: transform 150ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .password-gate__button:hover::before {
    transform: translateY(0);
  }
}

.password-gate__error {
  font-family: var(--font-body);
  font-size: var(--size-body-sm);
  color: #9a3a3a;
  margin-top: 16px;
}

/* Shake animation for wrong password */
@keyframes gate-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-6px); }
  80%      { transform: translateX(6px); }
}

.password-gate__input--shake {
  animation: gate-shake 0.4s ease;
  border-color: #9a3a3a;
}