/* =========================================================================
   Varsha & Sanjay — wedding site
   Everything you'd want to change lives in the :root block below.
   ========================================================================= */

:root {
  /* --- palette ------------------------------------------------------- */
  --ink:        #2a2320;   /* body text, near-black but warm */
  --ink-soft:   #6d6155;   /* secondary text */
  --paper:      #f4efe6;   /* main background */
  --paper-2:    #ece3d5;   /* alternating section background */
  --accent:     #8c2f2a;   /* event titles, links — the deep red */
  --brass:      #b08d55;   /* hairlines, small ornaments */
  --hairline:   rgba(42, 35, 32, 0.18);

  /* To pick up the gold lettering from the save-the-date instead of the red,
     swap the two lines above for these:
       --accent: #a8761f;
       --brass:  #c9a24a;
     The illustrations carry their own colour — see the note in README.md. */

  /* --- type ---------------------------------------------------------- */
  /* Running text and small-caps labels are the same family at different
     weights and tracking. --script is the decorative face used for event
     names, the venue and the couple's name. */
  --body:   "Montserrat", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans:   var(--body);
  --script: "Tangerine", "Snell Roundhand", cursive;

  /* --- layout -------------------------------------------------------- */
  --wrap: 68rem;
  --pad: clamp(1.25rem, 5vw, 3rem);
}

/* =========================================================================
   Base
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  /* Montserrat has a far larger x-height than a garalde serif, so it needs
     to sit a couple of steps smaller and lighter to read as calmly. */
  font-size: clamp(0.86rem, 0.82rem + 0.2vw, 0.98rem);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* cinematic film grain — one tiny tiled SVG, fixed over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.12; }
p { margin: 0; }
ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--accent); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--paper);
  padding: 0.75rem 1.25rem;
}
.skip:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* The script face, used for every event title.
   Tangerine has a very small x-height and long ascenders, so it reads much
   smaller than most faces at the same font-size — the sizes below are scaled
   up to compensate, and bold is used because its regular weight is too thin
   to hold at these sizes. */
.script {
  font-family: var(--script);
  font-weight: 700;
  color: var(--accent);
  line-height: 1.15;
  letter-spacing: 0.01em;
}

/* =========================================================================
   Hero — the only full-bleed image on the site
   ========================================================================= */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(4rem, 12vh, 8rem) var(--pad);
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.02) sepia(0.14);
}

/* letterbox darkening, top and bottom — keeps the type readable on any photo */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(20,15,12,0.42) 0%, rgba(20,15,12,0) 32%, rgba(20,15,12,0) 55%, rgba(20,15,12,0.55) 100%),
    radial-gradient(ellipse 78% 62% at 50% 46%, rgba(20,15,12,0) 40%, rgba(20,15,12,0.45) 100%);
}

/* ---- "plate" hero -----------------------------------------------------
   For when the hero image ALREADY has the names and date printed on it —
   a scanned invite, or the save-the-date card. Add the class in index.html:
       <header class="hero hero--plate" id="top">
   The overlaid words are then hidden from sight but kept for screen readers
   and search results, and the heavy scrim comes off so the artwork reads.  */
.hero--plate .hero__inner {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Show the card whole rather than cropping it — a landscape card on a
   portrait phone would otherwise lose the names off both edges. */
.hero--plate .hero__media img { filter: none; }
.hero--plate .hero__scrim { display: none; }

/* Portrait: the hero is exactly as tall as the photo — no ground, no
   letterboxing above or below. The section simply ends where the picture
   ends and the first day card begins. */
@media (max-aspect-ratio: 1 / 1) {
  .hero--plate {
    display: block;
    min-height: 0;
    padding: 0;
  }
  .hero--plate .hero__media { position: static; }
  .hero--plate .hero__media img {
    width: 100%;
    height: auto;
    object-fit: fill;
  }
  .hero--plate::after,
  .hero--plate .hero__scroll { display: none; }
}

/* Landscape: the photo's proportions are close enough to the window that it
   can simply fill the frame. */
@media (min-aspect-ratio: 1 / 1) {
  .hero--plate .hero__media img { object-fit: cover; }
}

/* ...except a phone held sideways, which is landscape but only ~390px tall.
   There "cover" slices the top and bottom off the card — taking "Varsha"
   with it — so show the card whole on paper instead. */
@media (min-aspect-ratio: 1 / 1) and (max-height: 600px) {
  .hero--plate .hero__media img { object-fit: contain; }
}

/* vignette, painted above the photo but below the scroll cue */
.hero--plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 88% 74% at 50% 50%, rgba(20,15,12,0) 52%, rgba(20,15,12,0.44) 100%);
}
.hero--plate .hero__scroll { z-index: 1; }

.hero__inner {
  text-align: center;
  color: #f6f1e8;
  text-shadow: 0 1px 24px rgba(20, 15, 12, 0.45);
  max-width: min(100%, 46rem);
}

.hero__kicker {
  font-family: var(--sans);
  font-size: clamp(0.62rem, 0.55rem + 0.3vw, 0.75rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.hero__names {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: clamp(3.4rem, 1.6rem + 12vw, 8rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero__names > span { display: block; }

.hero__amp {
  font-family: var(--script);
  font-size: 0.68em;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  margin-block: 0.06em 0.04em;
  opacity: 0.95;
}

.hero__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-block: clamp(1.4rem, 4vh, 2.2rem);
  font-size: 0.7rem;
  opacity: 0.8;
}
.hero__rule span {
  display: block;
  width: clamp(2.5rem, 9vw, 5rem);
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.hero__date-main {
  display: block;
  font-size: clamp(0.85rem, 0.78rem + 0.4vw, 1.1rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero__date-sub {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--sans);
  font-size: clamp(0.62rem, 0.56rem + 0.28vw, 0.74rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.82;
}

.hero__scroll {
  position: absolute;
  bottom: max(1.75rem, env(safe-area-inset-bottom));
  left: 50%;
  translate: -50% 0;
  width: 3px;
  height: clamp(2.5rem, 7vh, 4rem);
  background: rgba(246, 241, 232, 0.4);
  overflow: hidden;
}
.hero__scroll span {
  display: block;
  width: 100%;
  height: 45%;
  background: #f6f1e8;
  animation: trickle 2.6s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
@keyframes trickle {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(240%); }
}

/* =========================================================================
   Day sections
   ========================================================================= */

/* Each day sits on a full-width photograph, so the card reads as a postcard
   lying on a surface — the same idea as the hero. The photo goes on ::before
   and a paper-toned veil on ::after; both sit behind the content, and the
   veil is what keeps the card legible against a busy image. Swap a photo by
   changing --backdrop below. */
.day {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.25rem, 9vw, 5rem);
  background: var(--paper-2);        /* shows until the photo loads */
}

.day::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--backdrop);
  background-size: cover;
  background-position: center;
}

.day--one { --backdrop: url("../img/backdrop-day-one.jpg"); }
.day--two { --backdrop: url("../img/backdrop-day-two.jpg"); }

.daycard { padding: clamp(0.9rem, 2.8vw, 2rem) clamp(0.85rem, 3.2vw, 2.25rem); }

/* On phones every card is held to the same portrait proportion, so Day One,
   Day Two and the location read as one object even though they hold
   different amounts. The 1.7 is set by Day One's natural height at the
   tightest --overlap that doesn't collide; the other two are padded up to
   match. min-height rather than aspect-ratio, so a card can still grow if
   you add an event — it sets a floor, never a ceiling. The card is the
   viewport minus the .wrap padding, hence the 2.5rem. */
@media (max-width: 779px) {
  .daycard {
    min-height: calc((100vw - 2.5rem) * 1.7);
    display: flex;
    flex-direction: column;
  }
  /* The header stays at the top and the events take the rest of the card,
     spread down it. Day Two has one fewer event, so without this its block
     floated in the middle with dead space above and below. */
  .daycard .tl {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
}

.daycard__head {
  text-align: center;
  padding-bottom: clamp(0.6rem, 1.8vw, 1.15rem);
  margin-bottom: clamp(0.2rem, 1.2vw, 0.75rem);
  border-bottom: 1px solid var(--hairline);
}

.day__eyebrow {
  font-family: var(--sans);
  font-size: clamp(0.52rem, 0.49rem + 0.2vw, 0.62rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.45rem;
}

/* Tracking is kept modest here so the longest date still holds one line at
   320px — letterspaced uppercase Montserrat runs wide. */
.day__date {
  font-size: clamp(0.68rem, 0.6rem + 0.34vw, 0.92rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* =========================================================================
   Timeline
   Desktop: centre rail, events alternating left / right.
   Mobile:  rail moves to the left, everything stacks in one column.
   ========================================================================= */

.tl {
  position: relative;
  --rail: 50%;                /* the rail runs down the centre at every width */
  --art: clamp(4.25rem, 19vw, 5.75rem);
  /* Consecutive events sit on opposite sides of the rail, so they can be
     pulled up into each other's row without colliding. This is what keeps
     the card closer to a landscape postcard than a tall column on a phone. */
  --overlap: 1rem;
}

/* the vertical rail */
.tl::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: var(--rail);
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--hairline) 6%, var(--hairline) 94%, transparent);
}

.tl__item {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  /* wide enough that the words clear the rail and its diamond marker even on
     the narrowest phone */
  column-gap: clamp(1.4rem, 6vw, 3rem);
  padding-block: clamp(0.2rem, 1.2vw, 0.85rem);
}

/* the node where each event meets the rail */
.tl__item::before {
  content: "";
  position: absolute;
  left: var(--rail);
  top: 50%;
  width: 7px;
  height: 7px;
  translate: -50% -50%;
  rotate: 45deg;
  background: var(--paper);
  border: 1px solid var(--brass);
}

.tl__art {
  width: var(--art);
  color: var(--accent);
}
/* A fixed square box with contain, so icons of different proportions —
   a wide pair of rings, a square umbrella — still line up with each other
   and with the rail. */
.tl__art img {
  width: 100%;
  height: var(--art);
  object-fit: contain;
  object-position: center;
}

.tl__text h3 {
  font-size: clamp(1.3rem, 0.9rem + 2vw, 2.9rem);
  /* looser than the global .script so two-line names like "Maapillai
     Azhaippu" don't run their ascenders into the line above */
  line-height: 1.24;
  margin-bottom: 0.1rem;
}

/* The English reading of a Tamil name, on its own line under the title. */
.tl__translation {
  font-family: var(--sans);
  font-size: clamp(0.46rem, 0.44rem + 0.13vw, 0.56rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.2rem;
}

/* The timing sits below it, in the accent red so it's the thing that
   catches the eye when a guest is scanning for when to be somewhere. */
.tl__time {
  font-family: var(--sans);
  font-size: clamp(0.5rem, 0.48rem + 0.15vw, 0.6rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
}

.tl__text p:not(.tl__time):not(.tl__translation) {
  font-size: clamp(0.7rem, 0.66rem + 0.2vw, 0.85rem);
  line-height: 1.35;
  max-width: 46ch;
}
.tl__text em { font-style: italic; color: var(--accent); }

/* ---- desktop: split the rail down the middle ------------------------- */
/* Illustrations sit hard against the rail rather than floating in the middle
   of their half, so each one lines up with its diamond on the centre line. */
.tl__item + .tl__item { margin-top: calc(var(--overlap) * -1); }

/* Roomier laptop screens don't need the overlap — rows sit clear of each
   other and the rhythm reads better. */
@media (min-width: 780px) {
  .tl { --overlap: 0rem; }
}

/* odd events: illustration left, words right */
.tl__item:nth-child(odd) .tl__art  { grid-column: 1; grid-row: 1; justify-self: end; }
.tl__item:nth-child(odd) .tl__text { grid-column: 2; grid-row: 1; }

/* even events: words left, illustration right */
.tl__item:nth-child(even) .tl__text {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  justify-self: end;
}
.tl__item:nth-child(even) .tl__art { grid-column: 2; grid-row: 1; justify-self: start; }
.tl__item:nth-child(even) .tl__text p:not(.tl__time):not(.tl__translation) { margin-left: auto; }

/* =========================================================================
   Location — postcard
   ========================================================================= */

.loc {
  padding-block: clamp(2.25rem, 6vw, 4.5rem);
  background-image: url("../img/backdrop-postcard.jpg");
  background-size: cover;
  background-position: center;
}

/* The shared sheet-of-paper look, used by both the day cards and the
   location card. Layout is left to whichever class sits alongside it. */
.panel {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 18px 40px -28px rgba(42,35,32,0.5);
}

/* The location card reuses .panel and .daycard, so its frame and padding
   match the two day cards. It has no header — the venue name sits in the
   right half. Left half is the RSVP, right half is venue and accommodation. */

/* ---- the location postcard ---------------------------------------------
   Laptop: one postcard — all the detail on the left, both handwritten notes
   together on the right, with a rule between them and a stamp in the corner.
   Phone: the two halves split into two separate cards, tilted and lapping
   over each other, with no rule. See the media query further down.
   ------------------------------------------------------------------------ */

.loccard {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.4rem, 4vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset,
              0 14px 34px -18px rgba(42,35,32,0.55);
}

/* the postcard's centre rule */
.loccard::before {
  content: "";
  position: absolute;
  top: clamp(1rem, 3vw, 2.25rem);
  bottom: clamp(1rem, 3vw, 2.25rem);
  left: 50%;
  width: 1px;
  background: var(--hairline);
  pointer-events: none;
}

.loccard__info {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 3.5vw, 1.9rem);
}

.loccard__hand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 2.75rem);
}

.loccard__note,
.loccard__signoff {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center;
}
.loccard__note    { transform: rotate(-9deg); }
.loccard__signoff { max-width: 66%; margin-inline: auto; transform: rotate(-7deg); }

.loccard__title {
  /* same size as the itinerary event headers — see .tl__text h3 */
  font-size: clamp(1.3rem, 0.9rem + 2vw, 2.9rem);
  line-height: 1.24;
  margin-block: 0.15rem 0.3rem;
}

.loccard__label {
  display: block;
  font-family: var(--sans);
  font-size: clamp(0.5rem, 0.48rem + 0.15vw, 0.6rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

.loccard__blurb {
  font-size: clamp(0.74rem, 0.7rem + 0.18vw, 0.88rem);
  line-height: 1.55;
  max-width: 34ch;
}

.loccard address {
  font-style: normal;
  font-size: clamp(0.76rem, 0.72rem + 0.2vw, 0.92rem);
  letter-spacing: 0.02em;
  line-height: 1.7;
  max-width: 30ch;
}

/* ---- RSVP ------------------------------------------------------------- */

.loccard__field {
  display: block;
  margin-top: clamp(0.9rem, 3vw, 1.4rem);
  margin-bottom: 0.4rem;
  font-size: clamp(0.66rem, 0.63rem + 0.15vw, 0.76rem);
  line-height: 1.4;
  color: var(--ink-soft);
}

.rsvp__input {
  width: 100%;
  /* the visible label was removed, so the input carries the gap that used
     to sit above it */
  margin-top: clamp(0.7rem, 2.5vw, 1.1rem);
  padding: 0.55rem 0.65rem;
  font-family: var(--body);
  font-size: clamp(0.74rem, 0.7rem + 0.18vw, 0.88rem);
  font-weight: 300;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--hairline);
  border-radius: 0;
  -webkit-appearance: none;
          appearance: none;
}
.rsvp__input::placeholder { color: var(--ink-soft); opacity: 0.65; }
.rsvp__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Phones: one postcard can't hold two usable halves at 350px, so the two
   halves become two cards — the detail on one, both handwritten notes on the
   other — tilted opposite ways and lapping over each other. No centre rule. */
@media (max-width: 779px) {
  .loccard {
    display: block;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .loccard::before { display: none; }   /* no rule on phones */

  .loccard__info,
  .loccard__hand {
    width: 94%;
    margin-inline: auto;
    padding: clamp(1.2rem, 4.5vw, 1.6rem);
    background: var(--paper);
    border: 1px solid var(--hairline);
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset,
                0 14px 34px -18px rgba(42,35,32,0.55);
  }

  /* the information sits square — it's the part people read */
  .loccard__info {
    position: relative;
    z-index: 1;
    padding-bottom: clamp(1.8rem, 6vw, 2.4rem);
  }

  /* the notes card is smaller, framed, and tipped clockwise so it reads as
     a card dropped on top of the one above */
  .loccard__hand {
    position: relative;
    z-index: 2;
    width: 82%;
    rotate: 3deg;
    margin-top: -1.1rem;
    padding: clamp(1.1rem, 4vw, 1.5rem);
    padding-top: clamp(2.2rem, 8vw, 3rem);
    border: 1px solid rgba(42, 35, 32, 0.35);
    gap: clamp(1.1rem, 4.5vw, 1.6rem);
  }

  /* a second hairline set in from the edge, so the note reads as a framed
     card rather than a plain rectangle */
  .loccard__hand::before {
    content: "";
    position: absolute;
    inset: clamp(0.3rem, 1.4vw, 0.5rem);
    border: 1px solid rgba(42, 35, 32, 0.22);
    pointer-events: none;
  }

  .loccard__blurb,
  .loccard address { max-width: none; }

  .loccard__note { max-width: 92%; margin-inline: auto; }
  .loccard__signoff { max-width: 62%; }
}

/* Both buttons fill their half — the columns are narrow on a phone and a
   tracked-out uppercase label needs the room. */
.loccard .btn {
  display: block;
  width: 100%;
  margin-top: clamp(0.7rem, 2.5vw, 1rem);
  padding: 0.7rem 0.5rem;
  letter-spacing: 0.13em;
  text-align: center;
}

.btn {
  display: inline-block;
  margin-top: 1.75rem;
  padding: 0.85rem 1.9rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.63rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background-color 0.35s ease, color 0.35s ease;
}
.btn:hover, .btn:focus-visible {
  background: var(--accent);
  color: var(--paper);
}

/* =========================================================================
   Footer
   ========================================================================= */

.foot {
  text-align: center;
  padding: clamp(3rem, 8vw, 5rem) var(--pad) clamp(3.5rem, 8vw, 5rem);
  background: var(--paper-2);
  border-top: 1px solid var(--hairline);
}

.foot__names {
  font-size: clamp(2.7rem, 1.6rem + 5.4vw, 4.4rem);
  margin-bottom: 0.75rem;
}

.foot__meta {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.foot__meta--small { margin-top: 1rem; letter-spacing: 0.14em; }

/* =========================================================================
   Reveal on scroll — handled by assets/js/main.js
   ========================================================================= */

/* Only hidden once the inline snippet in <head> confirms JS is running, so a
   guest with JS disabled still sees every section. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* =========================================================================
   Print — a guest printing the page should get a clean itinerary
   ========================================================================= */

@media print {
  body::after, .hero__scroll, .hero__media, .hero__scrim { display: none; }
  .hero { min-height: auto; padding-block: 2rem; }
  .hero__inner { color: var(--ink); text-shadow: none; }
  .day, .foot { background: none; }
  .day::before { display: none; }
  .js .reveal { opacity: 1; transform: none; }
  .tl__item { break-inside: avoid; }
}