/* Sakura — a floral Japanese-garden invitation · contract v3 curated theme.
 * The platform blocks are the content; this sheet places and dresses them,
 * and the .sakura-js runtime class gates the few JS-only flourishes (petal
 * drift, staged reveals, the ticking countdown, the photo viewer) so the
 * page is fully legible without the runtime and under prefers-reduced-motion.
 *
 * The mood is pressed stationery, not a poster: warm cream paper with
 * nothing boxed or shadowed on it, a single loose vermillion blossom branch
 * bleeding off one corner, a dramatic Beau Rivage script for the couple's
 * names, Cormorant Garamond serif small-caps everywhere else, one deep-gold
 * ink carrying almost all of the decorative color, and — carried over from
 * the theme's Japanese brief — a faint seigaiha wave ring, small hanko seal,
 * and a kanji chapter mark per section. Negative space does most of the
 * work: nothing competes with the names for attention. */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/cormorant-roman.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Parisienne";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/parisienne.woff2") format("woff2");
}

/* The dramatic swash script carrying the couple's names — the one element
 * this theme lets get big, so nothing else has to compete with it. */
@font-face {
  font-family: "Beau Rivage";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/beau-rivage.woff2") format("woff2");
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

/* The paper tone repeats on the shell so the margins and overscroll never
 * flash white. */
html {
  background: #f6efe2;
}

.sakura {
  --color-paper: #f6efe2;
  --color-paper-2: #efe5d2;
  --color-paper-shadow: #ddcfb2;
  --color-ink: #34291f;
  --color-ink-soft: #5c4b3b;
  --color-vermillion: #ae2a2a;
  --color-vermillion-deep: #7c1b1d;
  --color-blossom: #d98a9a;
  --color-blossom-2: #c26678;
  --color-sage: #6f7a5d;
  --color-sage-deep: #4f5741;
  --color-gold: #b99354;
  --color-gold-soft: rgba(185, 147, 84, 0.5);
  --color-gold-ink: #7a5f26;
  --color-night: #2b2420;
  --color-night-deep: #1c1713;
  --color-ivory: #faf4e8;
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-script: "Parisienne", "Snell Roundhand", "Savoye LET", "Segoe Script", cursive;
  --font-script-display: "Beau Rivage", "Parisienne", "Snell Roundhand", "Segoe Script", cursive;
  --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-label: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
  background:
    radial-gradient(120% 40% at 50% -6%, rgba(185, 147, 84, 0.08), transparent 60%),
    var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.sakura a {
  color: var(--color-vermillion);
}

.sakura img {
  max-width: 100%;
}

.sakura :focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.sakura :where(h1, h2, h3, p) {
  margin: 0;
}

.sakura-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Shared section machinery: one centred column, one quiet spine        */
/* ------------------------------------------------------------------ */

/* z-index: 0 gives each section its own stacking context, so a
 * section-branch's z-index: -1 is trapped behind this section's own
 * text instead of escaping to the document root and painting behind
 * the whole page. */
.sakura__section {
  position: relative;
  z-index: 0;
  max-width: 36rem;
  margin-inline: auto;
  padding: 5rem 1.5rem 0.5rem;
}

/* The kicker and heading are both literal strings in this theme's own
 * template, never couple content — never a link — so they can let a click
 * meant for a section-branch pass through instead of swallowing it. */
.sakura__head {
  position: relative;
  margin-bottom: 2.4rem;
  padding-left: 2rem;
  pointer-events: none;
}

.sakura__kicker {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-variant: small-caps;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--color-gold-ink);
}

.sakura__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 6.8vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.sakura__section .sakura__head::before {
  content: "";
  position: absolute;
  left: -0.45rem;
  top: 0.6rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--color-gold);
}

/* A chapter mark, the way a folded booklet numbers its pages — 二 for the
 * couple, 三 for the story, and onward through 九 for the reply. Decorative
 * only: the section's own kicker and heading already carry the meaning. */
.sakura__mark {
  position: absolute;
  top: -0.9rem;
  right: 0.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 5.2rem;
  line-height: 1;
  color: var(--color-vermillion);
  opacity: 0.09;
  pointer-events: none;
  user-select: none;
}

/* Two branches behind every section — the same four painted poses as
 * the hero, mirrored, rotated, and paired differently each time so no
 * two sections repeat. Each pair bleeds from the paper's own edge —
 * the true edge of the invitation, not just this section's own inset
 * measure — the same way the hero's branch already does; see the
 * desktop override in the floating-card block below for the wider
 * reach needed once the paper is a card with its own margin. Bold
 * enough to read as intentional, but always tucked toward a corner so
 * the text in front never has to fight for legibility. Each one fades
 * in as its section scrolls into view (JS-only), and stays at its
 * resting opacity without the runtime. */
.sakura__section-branch {
  position: absolute;
  z-index: -1;
  width: var(--sakura-branch-width, 12rem);
  height: auto;
  opacity: var(--sakura-branch-opacity, 0.3);
  pointer-events: none;
  user-select: none;
}

.sakura-js .sakura__section-branch {
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}

.sakura-js .sakura__section-branch.is-revealed {
  opacity: var(--sakura-branch-opacity, 0.3);
}

/* A branch doubles as a quiet toy: touch one and it sheds a few more
 * petals from that spot. Only offered once the runtime is running and
 * motion is wanted — see the burst layer below the falling-petals rule. */
@media (prefers-reduced-motion: no-preference) {
  .sakura-js .sakura__branch,
  .sakura-js .sakura__section-branch {
    pointer-events: auto;
    cursor: pointer;
  }
}

/* JS-only staged reveals — everything stays visible without the runtime
 * or under reduced motion. */
.sakura-js [data-sakura-reveal],
.sakura-js .story__introduction,
.sakura-js .story__milestone,
.sakura-js .event-schedule__event,
.sakura-js .wedding-party__person,
.sakura-js .gallery__item,
.sakura-js .guest-information__faq,
.sakura-js .guest-information__travel-item,
.sakura-js .guest-information__gift,
.sakura-js .rsvp-widget,
.sakura-js .sakura__coda {
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out);
}

.sakura-js [data-sakura-reveal].is-revealed,
.sakura-js .is-revealed {
  opacity: 1;
  translate: 0 0;
}

/* ------------------------------------------------------------------ */
/* 一 · The announcement — a card under the falling blossoms            */
/* ------------------------------------------------------------------ */

.sakura__hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 8rem 1.5rem 5rem;
}

.sakura__bough {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The seigaiha roundel: a faint watermark centred behind the names, the
 * same treatment the countdown gives it later — the one motif that repeats
 * quietly across the invitation instead of a stationery card box. */
.sakura__roundel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(140vw, 34rem);
  height: auto;
  color: var(--color-gold);
  opacity: 0.13;
  transform: translate(-50%, -50%);
}

/* The blossom branch: one loose, diagonal sweep off the top-right corner,
 * clear of the text underneath it rather than boxed alongside it. */
.sakura__branch {
  position: absolute;
  top: -8rem;
  right: -9rem;
  width: min(96vw, 26rem);
  height: auto;
  rotate: 18deg;
  filter: drop-shadow(0 12px 24px rgba(124, 27, 29, 0.2));
}

/* A touched branch wobbles, as if the petals it just shed had weight — a
 * beat of feedback before they fall. rotate is its own property (not part
 * of transform), so this plays without disturbing the hero branch's
 * resting 18deg tilt or a section-branch's own position. Two variants
 * because they don't share a resting angle. */
.sakura-js .sakura__branch.is-shaking {
  animation: sakura-branch-shake-hero 0.55s var(--ease-out);
}

.sakura-js .sakura__section-branch.is-shaking {
  animation: sakura-branch-shake 0.55s var(--ease-out);
}

@keyframes sakura-branch-shake {
  0%, 100% { rotate: 0deg; }
  15% { rotate: -5deg; }
  35% { rotate: 4deg; }
  55% { rotate: -3deg; }
  75% { rotate: 2deg; }
  90% { rotate: -1deg; }
}

@keyframes sakura-branch-shake-hero {
  0%, 100% { rotate: 18deg; }
  15% { rotate: 12deg; }
  35% { rotate: 22deg; }
  55% { rotate: 14deg; }
  75% { rotate: 20deg; }
  90% { rotate: 17deg; }
}

/* The text here has no links of its own (every field is plain text, never
 * richtext), so it can let clicks pass through to whatever sits behind it —
 * the branch, most of the time — rather than swallowing them. Only the real
 * action links opt back in. */
.sakura__hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  pointer-events: none;
}

.sakura__hero-content .hero__actions {
  pointer-events: auto;
}

.sakura__hero-content .hero__eyebrow {
  margin: 0 0 1.4rem;
  font-family: var(--font-display);
  font-variant: small-caps;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-gold-ink);
}

.sakura__hero-content .hero__names {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.sakura__hero-content .hero__partner {
  font-family: var(--font-script-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 14vw, 5.2rem);
  line-height: 1;
  color: var(--color-gold-ink);
  overflow-wrap: anywhere;
}

.sakura__hero-content .hero__partner:last-of-type {
  align-self: flex-end;
  margin-top: -0.3rem;
}

.sakura__hero-content .hero__separator {
  align-self: center;
  margin: 0.1rem 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--color-ink-soft);
}

.sakura__hero-content .hero__date {
  display: block;
  margin-top: 1.8rem;
  font-family: var(--font-display);
  font-variant: small-caps;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: var(--color-ink);
}

.sakura__hero-content .hero__welcome {
  margin: 1rem 0 0;
  max-width: 26rem;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.sakura__hero-content .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin-top: 1.6rem;
}

.sakura__hero-content .hero__action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--color-gold-soft);
  text-underline-offset: 4px;
  color: var(--color-vermillion);
}

.sakura__cue {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
  white-space: nowrap;
  opacity: 0.7;
}

.sakura__cue-arrow {
  display: inline-block;
  animation: sakura-cue-drift 2.2s var(--ease-out) infinite;
}

@keyframes sakura-cue-drift {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(5px); opacity: 1; }
}

/* One page-level home for anything falling — fixed to the viewport rather
 * than any one section, so the shower keeps going at whatever scroll
 * position the guest is at instead of stopping at the edge of the hero,
 * and a branch's burst has room to fall clear of every section's own
 * overflow: hidden. */
.sakura__petal-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 40;
  pointer-events: none;
}

/* The falling petals are DOM spans, so they degrade instantly if the runtime
 * never runs. */
.sakura__petal {
  position: fixed;
  top: -1.4rem;
  left: 0;
  color: var(--color-blossom);
  opacity: 0.85;
  pointer-events: none;
  will-change: transform;
}

/* The petal's <svg> carries a viewBox but no width/height attribute, so it
 * has no intrinsic size of its own — without an explicit box it renders at
 * 0x0 in some browsers rather than falling back to the viewBox's aspect
 * ratio. Both the shower and a branch's burst share this one shape. */
.sakura__petal svg,
.sakura__petal--burst svg {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
}

.sakura-js .sakura__petal {
  animation: sakura-fall var(--sakura-duration, 6s) linear var(--sakura-delay, 0s) infinite;
}

@keyframes sakura-fall {
  0% { transform: translate3d(var(--sakura-drift, 0), -2rem, 0) rotate(0deg); opacity: 0; }
  8% { opacity: 0.85; }
  85% { opacity: 0.7; }
  100% { transform: translate3d(calc(var(--sakura-drift, 0) * 1.4), calc(100vh + 2rem), 0) rotate(var(--sakura-spin, 340deg)); opacity: 0; }
}

.sakura__petal--burst {
  position: fixed;
  top: 0;
  left: 0;
  color: var(--color-blossom);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}

.sakura-js .sakura__petal--burst {
  animation: sakura-burst-fall var(--sakura-burst-duration, 1.5s) var(--ease-out) var(--sakura-burst-delay, 0s) forwards;
}

/* Two legs, not one straight line: a quick flick outward in whatever
 * direction the petal happened to catch (ease-out, decelerating, so it
 * reads as a shake rather than a throw), then gravity takes over for the
 * back half (ease-in, accelerating) and every petal ends up falling,
 * however it started. */
@keyframes sakura-burst-fall {
  0% {
    transform: translate3d(var(--sakura-burst-x, 0), var(--sakura-burst-y, 0), 0) rotate(0deg);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  10% { opacity: 0.9; }
  32% {
    transform: translate3d(var(--sakura-burst-mid-x, 0), var(--sakura-burst-mid-y, 0), 0) rotate(var(--sakura-burst-mid-spin, 140deg));
    animation-timing-function: ease-in;
  }
  80% { opacity: 0.7; }
  100% {
    transform: translate3d(var(--sakura-burst-end-x, 0), var(--sakura-burst-end-y, 0), 0) rotate(var(--sakura-burst-spin, 320deg));
    opacity: 0;
  }
}

/* This hero's picture is the painted branch, not a photograph — an
 * uploaded cover photo would compete with the script names and the
 * paper texture, so it stays unused here rather than boxed in behind
 * the text. */
.sakura__hero .hero__cover-photo {
  display: none;
}

/* ------------------------------------------------------------------ */
/* 二 · The couple — a pair of portraits, almost calligraphy            */
/* ------------------------------------------------------------------ */

.sakura__section-branch--couple-a {
  top: -3rem;
  right: -3rem;
  --sakura-branch-width: 11.5rem;
  --sakura-branch-opacity: 0.32;
  transform: rotate(10deg);
}

.sakura__section-branch--couple-b {
  bottom: -2.5rem;
  left: -3.5rem;
  --sakura-branch-width: 13rem;
  --sakura-branch-opacity: 0.24;
  transform: scaleX(-1) rotate(-6deg);
}

.sakura__section--couple .couple {
  display: grid;
  gap: 3rem;
}

.sakura__section--couple .couple__partner {
  display: grid;
  gap: 0.85rem;
  padding-left: 2rem;
}

.sakura__section--couple .couple__portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 5px solid var(--color-ivory);
  border-radius: 0.4rem;
  box-shadow: 0 10px 26px rgba(52, 41, 31, 0.22);
  background: var(--color-ivory);
  transition: transform 0.5s var(--ease-out);
}

.sakura__section--couple .couple__partner:hover .couple__portrait {
  transform: translateY(-3px) rotate(-0.5deg);
}

.sakura__section--couple .couple__name {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.85rem, 5.4vw, 2.5rem);
  line-height: 1.08;
  color: var(--color-ink);
}

.sakura__section--couple .couple__label {
  margin: 0.2rem 0 0;
  font-family: var(--font-label);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold-ink);
}

.sakura__section--couple .couple__bio {
  margin: 0.55rem 0 0;
  max-width: 28rem;
  font-size: 0.98rem;
  line-height: 1.66;
  color: var(--color-ink-soft);
}

.sakura__section--couple .couple__bio > :first-child { margin-top: 0; }
.sakura__section--couple .couple__bio > :last-child { margin-bottom: 0; }

@media (min-width: 46rem) {
  .sakura__section--couple .couple {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.4rem;
  }
}

/* ------------------------------------------------------------------ */
/* 三 · The story — letterpress notes and keepsakes                     */
/* ------------------------------------------------------------------ */

.sakura__section-branch--story-a {
  bottom: -2.5rem;
  left: -3.5rem;
  --sakura-branch-width: 13rem;
  --sakura-branch-opacity: 0.26;
  transform: scaleX(-1) rotate(16deg);
}

.sakura__section-branch--story-b {
  top: -1.5rem;
  right: -3rem;
  --sakura-branch-width: 10rem;
  --sakura-branch-opacity: 0.24;
  transform: rotate(-8deg);
}

.sakura__section--story .story__introduction {
  margin: 0 0 2.6rem;
  padding-left: 1.2rem;
  border-left: 2px solid var(--color-gold-soft);
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.62;
  color: var(--color-ink-soft);
}

.sakura__section--story .story__introduction p {
  margin: 0;
}

.sakura__section--story .story__milestones {
  display: grid;
  gap: 3.2rem;
}

.sakura__section--story .story__milestone {
  position: relative;
  display: grid;
  gap: 1.1rem;
}

.sakura__section--story .story__milestone-photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 6px solid var(--color-ivory);
  border-bottom-width: 24px;
  border-radius: 0.3rem;
  box-shadow: 0 10px 26px rgba(52, 41, 31, 0.24);
  background: var(--color-ivory);
  transition: transform 0.5s var(--ease-out);
}

.sakura__section--story .story__milestone:hover .story__milestone-photo {
  transform: rotate(0deg) scale(1.012);
}

.sakura__section--story .story__milestone-date {
  margin-top: 0.4rem;
  font-family: var(--font-label);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-sage-deep);
}

.sakura__section--story .story__milestone-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.12;
  color: var(--color-ink);
}

.sakura__section--story .story__milestone-description {
  font-size: 0.98rem;
  line-height: 1.66;
  color: var(--color-ink-soft);
}

.sakura__section--story .story__milestone-description p {
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* 四 · The countdown — a paper plaque under a faint seigaiha roundel   */
/* ------------------------------------------------------------------ */

.sakura__section-branch--countdown-a {
  bottom: -1.5rem;
  right: -3rem;
  --sakura-branch-width: 10.5rem;
  --sakura-branch-opacity: 0.2;
  transform: scaleX(-1);
}

.sakura__section-branch--countdown-b {
  top: -1rem;
  left: -2.5rem;
  --sakura-branch-width: 8rem;
  --sakura-branch-opacity: 0.16;
  transform: scaleX(-1) rotate(6deg);
}

.sakura__countdown-card {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 1.4rem 1rem;
}

/* The seigaiha roundel from the hero, faint and centred behind the
 * count, so the plaque still carries this theme's own motif instead
 * of reading as a bare number block. */
.sakura__countdown-roundel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(150%, 30rem);
  height: auto;
  color: var(--color-gold);
  opacity: 0.14;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sakura__section--countdown .countdown {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.sakura__section--countdown .countdown__remaining {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  line-height: 1.25;
  text-wrap: balance;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--color-gold-ink);
}

.sakura__section--countdown .countdown__remaining--source {
  display: none;
}

.sakura-countdown {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.sakura-countdown__units {
  display: flex;
  align-items: center;
}

.sakura-countdown__unit {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  padding-inline: 0.7rem;
}

.sakura-countdown__unit:not(:last-child) {
  border-right: 1px solid var(--color-gold-soft);
}

.sakura-countdown__value {
  color: var(--color-gold-ink);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 8.6vw, 3.2rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.sakura-countdown__value.is-changing {
  animation: sakura-countdown-tick 0.5s var(--ease-out) both;
}

@keyframes sakura-countdown-tick {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

.sakura-countdown__label {
  color: var(--color-sage-deep);
  font-family: var(--font-label);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sakura-countdown__status {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  line-height: 1.25;
  text-wrap: balance;
  text-align: center;
  color: var(--color-gold-ink);
}

/* ------------------------------------------------------------------ */
/* 五 · The events — the order of the day                               */
/* ------------------------------------------------------------------ */

.sakura__section-branch--events-a {
  top: -2.5rem;
  left: -3rem;
  --sakura-branch-width: 10rem;
  --sakura-branch-opacity: 0.3;
  transform: scaleX(-1) rotate(-8deg);
}

.sakura__section-branch--events-b {
  bottom: -2rem;
  right: -3.5rem;
  --sakura-branch-width: 12rem;
  --sakura-branch-opacity: 0.24;
  transform: rotate(-20deg);
}

.sakura__section--events .event-schedule {
  display: grid;
  gap: 2.6rem;
}

.sakura__section--events .event-schedule__event {
  position: relative;
  padding-left: 2rem;
  padding-bottom: 2.6rem;
}

.sakura__section--events .event-schedule__event::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px dashed var(--color-paper-shadow);
}

.sakura__section--events .event-schedule__event:last-child::after {
  display: none;
}

.sakura__section--events .event-schedule__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--color-ink);
}

.sakura__section--events .event-schedule__time {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--color-gold-ink);
}

.sakura__section--events .event-schedule__time-separator {
  display: none;
}

.sakura__section--events .event-schedule__time-separator + .event-schedule__time {
  margin-top: 0.15rem;
  font-size: 0.98rem;
  color: var(--color-sage-deep);
}

.sakura__section--events .event-schedule__time-separator + .event-schedule__time::before {
  content: "until ";
}

.sakura__section--events .event-schedule__location {
  margin-top: 0.9rem;
  border-left: 2px solid var(--color-gold-soft);
  padding-left: 0.85rem;
}

.sakura__section--events .event-schedule__venue,
.sakura__section--events .event-schedule__address {
  font-size: 0.94rem;
  line-height: 1.5;
}

.sakura__section--events .event-schedule__venue {
  font-weight: 600;
  color: var(--color-ink);
}

.sakura__section--events .event-schedule__address {
  color: var(--color-ink-soft);
}

.sakura__section--events .event-schedule__directions {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.3rem;
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--color-gold-soft);
  text-underline-offset: 4px;
  color: var(--color-vermillion);
}

.sakura__section--events .event-schedule__dress-code {
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}

.sakura__section--events .event-schedule__dress-code span {
  display: inline-block;
  margin-right: 0.4rem;
  font-family: var(--font-label);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-sage-deep);
}

.sakura__section--events .event-schedule__description {
  margin-top: 0.8rem;
  font-size: 0.96rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.sakura__section--events .event-schedule__description p {
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* 六 · The wedding party — garden cards                                */
/* ------------------------------------------------------------------ */

.sakura__section-branch--party-a {
  bottom: -3rem;
  right: -3.5rem;
  --sakura-branch-width: 13.5rem;
  --sakura-branch-opacity: 0.3;
  transform: rotate(-18deg);
}

.sakura__section-branch--party-b {
  top: -2rem;
  left: -3rem;
  --sakura-branch-width: 11rem;
  --sakura-branch-opacity: 0.24;
  transform: scaleX(-1) rotate(10deg);
}

.sakura__section--party .wedding-party {
  display: grid;
  gap: 3rem;
}

.sakura__section--party .wedding-party__person {
  display: grid;
  gap: 0.85rem;
  padding-left: 2rem;
}

.sakura__section--party .wedding-party__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 5px solid var(--color-ivory);
  border-radius: 0.4rem;
  box-shadow: 0 10px 26px rgba(52, 41, 31, 0.2);
  background: var(--color-ivory);
  transition: transform 0.5s var(--ease-out);
}

.sakura__section--party .wedding-party__person:hover .wedding-party__photo {
  transform: translateY(-3px);
}

.sakura__section--party .wedding-party__name {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--color-ink);
}

.sakura__section--party .wedding-party__role {
  margin: 0.2rem 0 0;
  font-family: var(--font-label);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold-ink);
}

.sakura__section--party .wedding-party__group {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-sage-deep);
}

.sakura__section--party .wedding-party__bio {
  margin: 0.55rem 0 0;
  max-width: 26rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
}

/* ------------------------------------------------------------------ */
/* 七 · The gallery — loose keepsake prints                             */
/* ------------------------------------------------------------------ */

.sakura__section-branch--gallery-a {
  top: -1.5rem;
  right: -3rem;
  --sakura-branch-width: 10.5rem;
  --sakura-branch-opacity: 0.28;
  transform: rotate(-4deg);
}

.sakura__section-branch--gallery-b {
  bottom: -2.5rem;
  left: -3rem;
  --sakura-branch-width: 9.5rem;
  --sakura-branch-opacity: 0.22;
  transform: scaleX(-1) rotate(12deg);
}

.sakura__section--gallery .gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: start;
}

.sakura__section--gallery .gallery__item {
  position: relative;
  margin: 0;
  padding: 0.55rem 0.55rem 0.4rem;
  background: var(--color-ivory);
  border: 1px solid var(--color-paper-shadow);
  border-radius: 0.22rem;
  box-shadow: 0 8px 20px rgba(52, 41, 31, 0.18);
  cursor: zoom-in;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.sakura__section--gallery .gallery__item:first-child {
  grid-column: 1 / -1;
}

.sakura__section--gallery .gallery__item:hover,
.sakura__section--gallery .gallery__item:focus-visible {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 14px 30px rgba(52, 41, 31, 0.28);
}

.sakura__section--gallery .gallery__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-paper-2);
}

.sakura__section--gallery .gallery__caption {
  padding: 0.55rem 0.25rem 0.15rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--color-sage-deep);
}

/* ------------------------------------------------------------------ */
/* 八 · The notes — folded cards beneath the reply                       */
/* ------------------------------------------------------------------ */

.sakura__section-branch--notes-a {
  bottom: -2rem;
  left: -3rem;
  --sakura-branch-width: 9.5rem;
  --sakura-branch-opacity: 0.22;
  transform: rotate(-10deg);
}

.sakura__section-branch--notes-b {
  top: -1.5rem;
  right: -3rem;
  --sakura-branch-width: 10.5rem;
  --sakura-branch-opacity: 0.2;
  transform: scaleX(-1) rotate(4deg);
}

.sakura__section--notes .guest-information {
  display: grid;
  gap: 2.4rem;
}

.sakura__section--notes .guest-information h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--color-ink);
}

.sakura__section--notes .guest-information__faqs {
  display: grid;
  gap: 0.8rem;
}

.sakura__section--notes .guest-information__faq {
  border-bottom: 1px solid var(--color-paper-shadow);
}

.sakura__section--notes .guest-information__faq:last-child {
  border-bottom: 0;
}

.sakura__section--notes .guest-information__question {
  display: flex;
  align-items: center;
  min-height: 44px;
  width: 100%;
  padding: 0.85rem 1.05rem;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--color-ink);
  cursor: pointer;
}

.sakura__section--notes .guest-information__question-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.sakura__section--notes .guest-information__question-button::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-label);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-vermillion);
  transition: transform 0.35s var(--ease-out);
}

.sakura__section--notes .guest-information__question-button[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

.sakura__section--notes .guest-information__answer-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.4s var(--ease-out);
}

.sakura__section--notes .guest-information__answer-wrap[data-collapsed] {
  grid-template-rows: 0fr;
}

.sakura__section--notes .guest-information__answer-wrap > div {
  overflow: hidden;
}

.sakura__section--notes .guest-information__answer {
  padding: 0 1.05rem 1rem;
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--color-ink-soft);
}

.sakura__section--notes .guest-information__answer p {
  margin: 0;
}

.sakura__section--notes .guest-information__travel,
.sakura__section--notes .guest-information__gifts {
  display: grid;
  gap: 0.9rem;
}

.sakura__section--notes .guest-information__travel-item {
  position: relative;
  padding: 0.2rem 0 0.2rem 1.15rem;
  border-left: 2px solid var(--color-gold-soft);
}

/* Gifts read as a wrapped parcel rather than a plain list row — a card
 * with a ribbon crossing the corner, echoing the sakura seal motif used
 * at the reply footer, so a registry link can't be mistaken for a travel
 * note at a glance. */
.sakura__section--notes .guest-information__gift {
  position: relative;
  overflow: hidden;
  padding: 1.4rem 1.3rem 1.3rem;
  border: 1px solid var(--color-paper-shadow);
  border-radius: 0.4rem;
  background: var(--color-paper-2);
  box-shadow: 0 2px 10px rgba(52, 41, 31, 0.07);
}

.sakura__section--notes .guest-information__gift::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: -2.6rem;
  width: 8rem;
  height: 0.5rem;
  background: linear-gradient(90deg, var(--color-vermillion-deep), var(--color-vermillion));
  box-shadow: 0 0 0 1px rgba(250, 244, 232, 0.4);
  transform: rotate(-45deg);
}

.sakura__section--notes .guest-information__gift-title {
  padding-left: 0.15rem;
}

.sakura__section--notes .guest-information__travel-description,
.sakura__section--notes .guest-information__gift-description {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  line-height: 1.58;
  color: var(--color-ink-soft);
}

.sakura__section--notes .guest-information__gift-description {
  padding-left: 0.15rem;
}

.sakura__section--notes .guest-information__travel-link,
.sakura__section--notes .guest-information__gift-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.3rem;
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--color-gold-soft);
  text-underline-offset: 4px;
  color: var(--color-vermillion);
}

.sakura__section--notes .guest-information__gift-link {
  padding-left: 0.15rem;
}

/* ------------------------------------------------------------------ */
/* 九 · The reply — a sealed card under the night                       */
/* ------------------------------------------------------------------ */

.sakura__reply {
  position: relative;
  z-index: 0;
  max-width: none;
  margin-top: 5rem;
  padding: 5.5rem 0 5rem;
  background:
    radial-gradient(110% 60% at 50% 0%, rgba(185, 147, 84, 0.14), transparent 55%),
    linear-gradient(var(--color-night), var(--color-night-deep));
  color: var(--color-ivory);
  color-scheme: dark;
}

/* The night section reads its own branch in gold rather than the
 * blossom's daylight vermillion and pink — brightness plus a sepia
 * tint keeps it legible against near-black instead of just going dark. */
.sakura__section-branch--reply-a {
  top: -2.5rem;
  right: -3.5rem;
  --sakura-branch-width: 11rem;
  --sakura-branch-opacity: 0.4;
  transform: rotate(12deg);
  filter: brightness(1.9) saturate(0.5) sepia(0.35);
}

.sakura__section-branch--reply-b {
  bottom: -2.5rem;
  left: -3.5rem;
  --sakura-branch-width: 12.5rem;
  --sakura-branch-opacity: 0.32;
  transform: scaleX(-1) rotate(-8deg);
  filter: brightness(1.9) saturate(0.5) sepia(0.35);
}

.sakura__reply-card {
  position: relative;
  max-width: 36rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.sakura__reply .sakura__mark {
  color: var(--color-gold);
  opacity: 0.14;
}

.sakura__reply .sakura__kicker {
  color: var(--color-gold);
}

.sakura__reply .sakura__heading {
  color: var(--color-ivory);
}

.sakura__reply .rsvp-widget__title {
  margin: 0 0 1.6rem;
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(250, 244, 232, 0.66);
}

.sakura__reply .rsvp-widget__form {
  display: grid;
  gap: 1.6rem;
}

.sakura__reply .rsvp-widget__field {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.sakura__reply fieldset.rsvp-widget__field {
  gap: 0.9rem;
}

.sakura__reply .rsvp-widget__label,
.sakura__reply .rsvp-widget__field legend {
  font-family: var(--font-label);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250, 244, 232, 0.7);
}

.sakura__reply .rsvp-widget__input {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.2rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(250, 244, 232, 0.35);
  border-radius: 0;
  color: var(--color-ivory);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.4;
  transition: border-color 0.3s var(--ease-out);
}

.sakura__reply .rsvp-widget__input::placeholder {
  color: rgba(250, 244, 232, 0.4);
  font-style: italic;
}

.sakura__reply .rsvp-widget__input:focus {
  outline: none;
  border-bottom-color: var(--color-blossom);
}

.sakura__reply .rsvp-widget__input:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
  border-radius: 2px;
}

.sakura__reply textarea.rsvp-widget__input {
  resize: vertical;
}

.sakura__reply .rsvp-widget__choices {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.sakura__reply .rsvp-widget__choice {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  padding: 0.55rem 1.05rem;
  border: 1px solid rgba(250, 244, 232, 0.4);
  border-radius: 999px;
  font-family: var(--font-label);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ivory);
  cursor: pointer;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}

.sakura__reply .rsvp-widget__choice:has(input:checked) {
  border-color: var(--color-blossom);
  background: rgba(217, 138, 154, 0.22);
}

.sakura__reply .rsvp-widget__choice input {
  accent-color: var(--color-blossom);
  width: 1.1rem;
  height: 1.1rem;
}

.sakura__reply .rsvp-widget__submit {
  justify-self: start;
  min-height: 52px;
  padding: 0.85rem 2.1rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-blossom), var(--color-vermillion-deep));
  color: var(--color-ivory);
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(174, 42, 42, 0.32);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), filter 0.3s var(--ease-out);
}

.sakura__reply .rsvp-widget__submit:hover {
  filter: brightness(1.08);
  box-shadow: 0 14px 30px rgba(174, 42, 42, 0.44);
}

.sakura__reply .rsvp-widget__submit:active {
  transform: translateY(2px);
}

.sakura__coda {
  max-width: 36rem;
  margin: 4.6rem auto 0;
  padding-top: 2.6rem;
  border-top: 1px solid rgba(250, 244, 232, 0.16);
  text-align: center;
}

.sakura__coda .sakura__seal {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  color: var(--color-vermillion);
  margin-bottom: 1.2rem;
}

.sakura__coda-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 4.6vw, 1.9rem);
  line-height: 1.25;
  color: var(--color-ivory);
}

.sakura__coda-sign {
  margin-top: 0.6rem;
  font-family: var(--font-script-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 9vw, 3.2rem);
  color: var(--color-gold);
}

.sakura__back-top {
  display: block;
  width: fit-content;
  margin: 2rem auto 0;
  min-height: 44px;
  padding-top: 0.8rem;
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: rgba(250, 244, 232, 0.35);
  text-underline-offset: 4px;
  color: rgba(250, 244, 232, 0.75);
}

/* ------------------------------------------------------------------ */
/* The full-size gallery viewer                                        */
/* ------------------------------------------------------------------ */

body.sakura-viewer-open {
  overflow: hidden;
}

.sakura__viewer[hidden] {
  display: none;
}

.sakura__viewer {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --color-ivory: #faf4e8;
  --color-gold: #b99354;
  --color-blossom: #d98a9a;
  --font-label: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 1.1rem;
  background: rgba(28, 23, 19, 0.92);
  backdrop-filter: blur(4px);
}

.sakura__viewer-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(92vw, 46rem);
  max-height: 88svh;
  margin: 0;
}

.sakura__viewer-image {
  display: block;
  max-width: 100%;
  max-height: 72svh;
  object-fit: contain;
  border: 6px solid var(--color-ivory);
  border-radius: 0.3rem;
  background: var(--color-ivory);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.sakura__viewer-caption {
  margin-top: 1rem;
  max-width: 30rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  text-align: center;
  color: var(--color-ivory);
}

.sakura__viewer button {
  position: fixed;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(250, 244, 232, 0.4);
  border-radius: 50%;
  background: rgba(28, 23, 19, 0.6);
  color: var(--color-ivory);
  font-family: var(--font-label);
  font-size: 1.2rem;
  cursor: pointer;
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

.sakura__viewer button:hover {
  border-color: var(--color-blossom);
  color: var(--color-blossom);
}

.sakura__viewer-close {
  top: 1.1rem;
  right: 1.1rem;
}

.sakura__viewer-prev {
  left: 1.1rem;
  bottom: 1.1rem;
}

.sakura__viewer-next {
  right: 1.1rem;
  bottom: 1.1rem;
}

/* ------------------------------------------------------------------ */
/* Sparse invitations: collapse shells whose platform block is empty    */
/* ------------------------------------------------------------------ */

.sakura__section--couple:not(:has(.couple__partner)),
.sakura__section--story:not(:has(.story__introduction, .story__milestone)),
.sakura__section--countdown:not(:has(.countdown__remaining)),
.sakura__section--events:not(:has(.event-schedule__event)),
.sakura__section--party:not(:has(.wedding-party__person)),
.sakura__section--gallery:not(:has(.gallery__item)),
.sakura__section--notes:not(:has(.guest-information *)),
.sakura__reply:not(:has(.rsvp-widget)) {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Tablet and up: the invitation becomes one card on a table, not a     */
/* page stretched edge to edge                                          */
/* ------------------------------------------------------------------ */

@media (min-width: 46rem) {
  html {
    background: #e3d9c7;
  }

  .invite-frame {
    display: flex;
    justify-content: center;
    padding: 3.5rem 2rem;
  }

  .sakura {
    width: 100%;
    max-width: 50rem;
    border-radius: 0.6rem;
    box-shadow: 0 40px 90px rgba(52, 41, 31, 0.3), 0 6px 18px rgba(52, 41, 31, 0.14);
    overflow: hidden;
  }

  .sakura__hero {
    min-height: 42rem;
  }

  /* Section branches only bleed to their own narrow text measure by
   * default (.sakura__section caps at 36rem). On the card, the gutter
   * between that measure and .sakura's true edge isn't fixed — it's 3rem
   * right at this breakpoint and grows to a capped 7rem once .sakura
   * reaches its own 50rem max-width. A single flat offset tuned for one
   * end of that range breaks at the other: too small and a branch never
   * reaches .sakura's overflow: hidden at all on a wide screen, so it
   * just sits inside the gutter looking like a mistake instead of a
   * bleed; too large and a narrow branch can clear the gutter with room
   * to spare, landing past .sakura's edge and getting clipped away
   * almost entirely. Each offset below is sized to its own branch's
   * width instead of one shared number, so every branch keeps a solid
   * chunk of itself inside the card at the narrowest gutter while still
   * reaching past .sakura's edge to bleed at the widest one. */
  .sakura__section-branch--couple-a { right: -10rem; }
  .sakura__section-branch--couple-b { left: -11rem; }
  .sakura__section-branch--story-a { left: -11rem; }
  .sakura__section-branch--story-b { right: -9rem; }
  .sakura__section-branch--countdown-a { right: -9.5rem; }
  .sakura__section-branch--countdown-b { left: -8rem; }
  .sakura__section-branch--events-a { left: -9rem; }
  .sakura__section-branch--events-b { right: -10rem; }
  .sakura__section-branch--party-a { right: -11rem; }
  .sakura__section-branch--party-b { left: -9.5rem; }
  .sakura__section-branch--gallery-a { right: -9.5rem; }
  .sakura__section-branch--gallery-b { left: -8.5rem; }
  .sakura__section-branch--notes-a { left: -8.5rem; }
  .sakura__section-branch--notes-b { right: -9.5rem; }
  /* The reply section is the one exception: .sakura__reply itself has
   * max-width: none, so it's already flush with .sakura's true edge —
   * there's no gutter here to reach across, so these two need a much
   * smaller offset than the rest or they overshoot straight past the
   * card with almost nothing left inside it. */
  .sakura__section-branch--reply-a { right: -3.5rem; }
  .sakura__section-branch--reply-b { left: -4rem; }
}

/* ------------------------------------------------------------------ */
/* Motion: none of the choreography is essential                       */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sakura *,
  .sakura *::before,
  .sakura *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .sakura-js [data-sakura-reveal],
  .sakura-js .story__introduction,
  .sakura-js .story__milestone,
  .sakura-js .event-schedule__event,
  .sakura-js .wedding-party__person,
  .sakura-js .gallery__item,
  .sakura-js .guest-information__faq,
  .sakura-js .guest-information__travel-item,
  .sakura-js .guest-information__gift,
  .sakura-js .rsvp-widget,
  .sakura-js .sakura__coda {
    opacity: 1;
    translate: 0 0;
  }
}