@charset "utf-8";

/* ==========================================================================
   Jason Zhu — Nineteen
   A handcrafted birthday card. Cream paper, deep aubergine ink,
   lilac and butter-yellow accents.

   Architecture note: this site is CSS-first. Every piece of content is
   rendered and readable with CSS alone; JavaScript adds balloons, confetti and
   a little scroll courtesy. Nothing here depends on JS to be visible.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* paper + ink */
  --paper:        #FBF5EA;
  --paper-warm:   #F6ECDC;
  --paper-deep:   #EFE2CD;
  --ink:          #2E1B33;
  --ink-soft:     #5A4460;
  --ink-faint:    #8A7391;

  /* accents */
  --lilac:        #B79CE0;
  --lilac-deep:   #7A4FA8;
  --lilac-soft:   #E6DAF6;
  --butter:       #F2CE6B;
  --butter-deep:  #C79A2E;
  --butter-soft:  #FBEBBE;
  --rose:         #D98CA8;

  /* semantic */
  --focus:        var(--lilac-deep);
  --rule:         rgba(46, 27, 51, 0.14);
  --rule-soft:    rgba(46, 27, 51, 0.08);

  /* type */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                  "Hoefler Text", Georgia, "Times New Roman", serif;
  --font-sans:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
  --step-0:  clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --step-1:  clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --step-3:  clamp(1.875rem, 1.4rem + 2.2vw, 3rem);

  /* space */
  --gutter:  clamp(1.25rem, 5vw, 2.5rem);
  --measure: 34rem;
  --section-gap: clamp(4.5rem, 12vh, 8.5rem);

  /* shape */
  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;

  --shadow-soft: 0 1px 2px rgba(46, 27, 51, 0.05),
                 0 8px 24px -12px rgba(46, 27, 51, 0.18);
  --shadow-lift: 0 2px 4px rgba(46, 27, 51, 0.06),
                 0 18px 40px -18px rgba(46, 27, 51, 0.28);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--paper);
  /* Paper grain. A tiny tiling SVG, painted as the page background rather
     than a fixed overlay, so scrolling never has to re-composite it. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.16'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-repeat: repeat;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-0);
  line-height: 1.7;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip` rather than `hidden`: it contains the oversized hero scribble
     without turning <body> into a scroll container. */
  overflow-x: clip;
}

/* Warm light pooling behind the card. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(120% 68% at 50% -12%, rgba(183, 156, 224, 0.30) 0%, rgba(183, 156, 224, 0) 62%),
    radial-gradient(80% 52% at 12% 8%,   rgba(242, 206, 107, 0.26) 0%, rgba(242, 206, 107, 0) 60%),
    radial-gradient(90% 60% at 92% 26%,  rgba(217, 140, 168, 0.16) 0%, rgba(217, 140, 168, 0) 58%);
}

.page {
  position: relative;
  z-index: 1;
}

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

svg { fill: currentColor; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, p { margin: 0; }

h1, h2 {
  font-weight: 400;
  line-height: 1.12;
  text-wrap: balance;
}

::selection {
  background: var(--butter-soft);
  color: var(--ink);
}

a {
  color: var(--lilac-deep);
  text-decoration-color: rgba(122, 79, 168, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   4. Skip link + focus
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -140%);
  z-index: 100;
  margin-top: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   5. Confetti canvas
   -------------------------------------------------------------------------- */

.confetti,
.birthday-balloons {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 2.2vw, 1.5rem);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(7rem, 16vh, 10rem) var(--gutter) clamp(4rem, 11vh, 7rem);
  text-align: center;
  isolation: isolate;
}

/* --- bunting across the top ---------------------------------------------- */

.garland {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  color: var(--lilac);
}

.garland__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.5;
}

.garland__flags polygon {
  stroke: none;
}

.garland__flags polygon:nth-child(3n + 1) { fill: var(--lilac); }
.garland__flags polygon:nth-child(3n + 2) { fill: var(--butter); }
.garland__flags polygon:nth-child(3n + 3) { fill: var(--rose); }

/* --- eyebrow -------------------------------------------------------------- */

.hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 2vw, 1.1rem);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hero__eyebrow-rule {
  display: block;
  width: clamp(1.5rem, 6vw, 3.5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lilac-deep));
}

.hero__eyebrow-rule:last-child {
  background: linear-gradient(90deg, var(--lilac-deep), transparent);
}

/* --- the big 19 ----------------------------------------------------------- */

.nineteen {
  position: relative;
  display: grid;
  place-items: center;
  margin-block: clamp(0.25rem, 1vw, 0.75rem);
  /* This padding is the gap between the numeral and the hand-drawn ring
     that surrounds it — the ring fills the padding box exactly. */
  padding: clamp(1rem, 5vw, 2rem) clamp(1.75rem, 9vw, 3.5rem);
}

.nineteen__digits {
  grid-area: 1 / 1;
  font-family: var(--font-display);
  font-size: clamp(6.5rem, 27vw, 15.5rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
  font-variant-numeric: lining-nums;
  color: var(--ink);
  animation: digits-in 1100ms cubic-bezier(0.16, 0.84, 0.28, 1) both;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .nineteen__digits {
    background-image: linear-gradient(166deg,
        #54315F 0%, #2E1B33 38%, #6E4176 70%, #34203C 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Out of flow on purpose. An SVG with only a viewBox has no intrinsic width,
   so in flow it falls back to 300px and any percentage on top of that blows
   the page wider than the viewport. Absolutely positioned, it simply fills
   the padded box around the numeral and can never affect layout. */
.nineteen__scribble {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--lilac);
  opacity: 0.75;
  transform: rotate(-3deg);
  animation: scribble-in 1400ms cubic-bezier(0.16, 0.84, 0.28, 1) both;
}

.nineteen__scribble path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nineteen__spark {
  position: absolute;
  top: 2%;
  right: 1%;
  width: clamp(1.5rem, 5vw, 2.75rem);
  height: auto;
  color: var(--butter);
  animation: twinkle 3.6s ease-in-out 1200ms infinite;
}

/* --- title ---------------------------------------------------------------- */

.hero__title {
  max-width: 22ch;
  font-size: var(--step-3);
  color: var(--ink);
  animation: rise-in 820ms cubic-bezier(0.16, 0.84, 0.28, 1) 160ms both;
}

.hero__name {
  display: block;
  font-style: italic;
  color: var(--lilac-deep);
}

.hero__from {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  margin-top: clamp(0.25rem, 1vw, 0.5rem);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  animation: rise-in 820ms cubic-bezier(0.16, 0.84, 0.28, 1) 300ms both;
}

/* --- scattered stars ------------------------------------------------------ */

.star {
  fill: currentColor;
  color: var(--lilac);
}

.star--inline {
  width: 0.85em;
  height: 0.85em;
  color: var(--butter-deep);
}

.star--a, .star--b, .star--c, .star--d, .star--e {
  position: absolute;
  z-index: -1;
  height: auto;
}

.star--a { top: 20%; left: 8%;  width: clamp(0.7rem, 1.8vw, 1.15rem); color: var(--butter);     animation: twinkle 5.2s ease-in-out 400ms infinite; }
.star--b { top: 30%; right: 10%; width: clamp(0.85rem, 2.2vw, 1.4rem); color: var(--lilac);     animation: twinkle 4.4s ease-in-out 900ms infinite; }
.star--c { top: 62%; left: 14%; width: clamp(0.6rem, 1.5vw, 0.95rem); color: var(--rose);      animation: twinkle 6s   ease-in-out 200ms infinite; }
.star--d { top: 70%; right: 15%; width: clamp(1rem, 2.6vw, 1.6rem);   color: var(--lilac-soft); animation: twinkle 5s   ease-in-out 1400ms infinite; }
.star--e { top: 46%; right: 20%; width: clamp(0.55rem, 1.3vw, 0.8rem); color: var(--butter);    animation: twinkle 7s   ease-in-out 600ms infinite; }

/* --- scroll cue ----------------------------------------------------------- */

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(1rem, 3vh, 2rem);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease;
  animation: rise-in 820ms cubic-bezier(0.16, 0.84, 0.28, 1) 440ms both;
}

.scroll-cue svg {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: nudge 2.6s ease-in-out 1600ms infinite;
}

.scroll-cue:hover {
  color: var(--lilac-deep);
  background-color: rgba(183, 156, 224, 0.16);
}

/* --------------------------------------------------------------------------
   7. Sections
   -------------------------------------------------------------------------- */

.main {
  display: block;
}

.section {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--section-gap) var(--gutter);
}

.section--message { padding-bottom: clamp(2rem, 5vh, 3.5rem); }

.section__heading {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 1.25rem);
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.section__heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--rule), transparent);
}

/* --------------------------------------------------------------------------
   8. Prose
   -------------------------------------------------------------------------- */

.prose {
  max-width: var(--measure);
  font-size: var(--step-1);
  line-height: 1.72;
  color: var(--ink-soft);
}

.prose p + p { margin-top: 1.15em; }

.prose__lead {
  font-size: 1.12em;
  line-height: 1.6;
  color: var(--ink);
}

.prose__lead::first-letter {
  float: left;
  margin: 0.06em 0.09em 0 0;
  font-size: 3.15em;
  line-height: 0.78;
  color: var(--lilac-deep);
}

.prose__signoff {
  font-style: italic;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   9. Reveal (letter + wish)
   -------------------------------------------------------------------------- */

.reveal {
  position: relative;
}

.reveal__button {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 1.15rem);
  width: 100%;
  margin: 0;
  padding: clamp(0.85rem, 2.5vw, 1.15rem) clamp(1rem, 3.5vw, 1.6rem);
  border: 1px solid rgba(122, 79, 168, 0.32);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #FFFDF8 0%, var(--paper-warm) 100%);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: left;
  cursor: pointer;
  list-style: none;
  transition: transform 180ms cubic-bezier(0.16, 0.84, 0.28, 1),
              box-shadow 180ms ease,
              border-color 180ms ease;
}

.reveal__button::-webkit-details-marker { display: none; }
.reveal__button::marker { content: ""; }

.reveal__button:hover {
  transform: translateY(-2px);
  border-color: rgba(122, 79, 168, 0.55);
  box-shadow: var(--shadow-lift);
}

.reveal__button:active {
  transform: translateY(0);
}

.reveal[open] > .reveal__button {
  border-color: rgba(122, 79, 168, 0.5);
  background: linear-gradient(180deg, var(--lilac-soft) 0%, #F4EDFC 100%);
}

/* seal */

.reveal__seal {
  flex: 0 0 auto;
  width: clamp(2.1rem, 7vw, 2.6rem);
  color: var(--lilac-deep);
  transition: transform 420ms cubic-bezier(0.16, 0.84, 0.28, 1);
}

.reveal__seal svg { width: 100%; height: auto; }

.seal__ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0.5;
}

.seal__spark { fill: currentColor; }

.reveal__seal--wish { color: var(--butter-deep); }

.reveal[open] > .reveal__button .reveal__seal {
  transform: rotate(135deg);
}

/* label */

.reveal__label {
  flex: 1 1 auto;
  min-width: 0;
}

.reveal__label-close { display: none; }
.reveal[open] .reveal__label-open  { display: none; }
.reveal[open] .reveal__label-close { display: inline; }

/* chevron */

.reveal__chevron {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
  transition: transform 320ms cubic-bezier(0.16, 0.84, 0.28, 1);
}

.reveal[open] > .reveal__button .reveal__chevron {
  transform: rotate(180deg);
}

/* panel */

.reveal__panel {
  padding-top: clamp(0.85rem, 2.5vw, 1.25rem);
}

.reveal[open] > .reveal__panel > * {
  animation: unfold 620ms cubic-bezier(0.16, 0.84, 0.28, 1) both;
}

/* --------------------------------------------------------------------------
   10. The letter
   -------------------------------------------------------------------------- */

.letter {
  position: relative;
  padding: clamp(1.6rem, 5vw, 3rem) clamp(1.35rem, 5vw, 3.25rem)
           clamp(1.6rem, 5vw, 2.75rem) clamp(1.9rem, 6vw, 3.75rem);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #FFFCF5 0%, #FBF4E6 100%);
  box-shadow: var(--shadow-soft);
  color: var(--ink-soft);
  font-size: var(--step-1);
  line-height: 1.75;
  transform-origin: top center;
  overflow: hidden;
}

/* stationery margin rule */
.letter::before {
  content: "";
  position: absolute;
  top: clamp(1.6rem, 5vw, 3rem);
  bottom: clamp(1.6rem, 5vw, 2.75rem);
  left: clamp(1rem, 3.2vw, 1.9rem);
  width: 1px;
  background: linear-gradient(180deg, rgba(183, 156, 224, 0.7), rgba(242, 206, 107, 0.55));
}

.letter p + p { margin-top: 1.1em; }

.letter__greeting {
  font-size: 1.15em;
  font-style: italic;
  color: var(--ink);
}

.letter__signature {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: clamp(1.5rem, 4vw, 2.25rem) !important;
  font-size: 1.1em;
  font-style: italic;
  color: var(--lilac-deep);
}

.letter__signature-rule {
  display: block;
  width: clamp(1.75rem, 6vw, 3rem);
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   11. The wish
   -------------------------------------------------------------------------- */

.wish {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: clamp(1.75rem, 5.5vw, 3rem) clamp(1.25rem, 5vw, 2.5rem);
  border: 1px solid rgba(199, 154, 46, 0.3);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(251, 235, 190, 0.9) 0%, rgba(251, 235, 190, 0) 70%),
    linear-gradient(180deg, #FFFCF5 0%, #FBF4E6 100%);
  box-shadow: var(--shadow-soft);
  text-align: center;
  transform-origin: top center;
}

.wish__star {
  width: clamp(2rem, 7vw, 2.75rem);
  height: auto;
  margin-bottom: 0.35rem;
  color: var(--butter);
  animation: twinkle 3.2s ease-in-out infinite;
}

.wish__line {
  font-size: var(--step-2);
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}

.wish__sub {
  font-size: var(--step-0);
  font-style: italic;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   11b. Not-found page
   -------------------------------------------------------------------------- */

.section--error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.75rem, 2.5vw, 1.25rem);
  min-height: 100vh;
  min-height: 100svh;
}

.error__star {
  width: clamp(1.5rem, 4vw, 2.25rem);
  height: auto;
  color: var(--butter);
  animation: twinkle 3.8s ease-in-out infinite;
}

.error__title {
  font-size: var(--step-3);
  color: var(--ink);
}

.error__text {
  max-width: var(--measure);
  color: var(--ink-soft);
  line-height: 1.72;
}

.error__link {
  margin-top: clamp(0.25rem, 1.5vw, 0.75rem);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.error__link a { text-decoration: none; }
.error__link a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: clamp(3rem, 9vh, 5rem) var(--gutter) clamp(3.5rem, 10vh, 6rem);
  text-align: center;
}

.footer::before {
  content: "";
  width: min(6rem, 40vw);
  height: 1px;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
  background: linear-gradient(90deg, transparent, var(--rule), transparent);
}

.star--footer {
  width: clamp(0.9rem, 2.4vw, 1.2rem);
  height: auto;
  margin-bottom: 0.5rem;
  color: var(--lilac);
}

.footer__line {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.footer__sub {
  font-style: italic;
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   13. Motion
   -------------------------------------------------------------------------- */

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

@keyframes digits-in {
  from { opacity: 0; transform: translateY(24px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes scribble-in {
  from { opacity: 0; transform: rotate(-9deg) scale(0.86); }
  to   { opacity: 0.75; transform: rotate(-3deg) scale(1); }
}

@keyframes unfold {
  from { opacity: 0; transform: translateY(-10px) scaleY(0.97); }
  to   { opacity: 1; transform: translateY(0) scaleY(1); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.45; transform: scale(0.88) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.08) rotate(14deg); }
}

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* --------------------------------------------------------------------------
   14. Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 30rem) {
  .star--a, .star--c, .star--e { display: none; }
  .letter { font-size: var(--step-0); }
  .prose { font-size: var(--step-0); }
}

@media (min-width: 60rem) {
  .section { max-width: 52rem; }
}

/* Short landscape phones: stop the hero from forcing a tall scroll. */
@media (orientation: landscape) and (max-height: 34rem) {
  .hero {
    min-height: 0;
    padding-top: clamp(5rem, 18vh, 7rem);
  }
}

/* --------------------------------------------------------------------------
   15. Reduced motion — honour it completely.
       Entrance animations are removed rather than shortened, so nothing
       moves, fades, or scales. Content is simply present.
   -------------------------------------------------------------------------- */

@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;
    scroll-behavior: auto !important;
  }

  .star--a, .star--b, .star--c, .star--d, .star--e,
  .nineteen__spark,
  .wish__star,
  .scroll-cue svg {
    animation: none !important;
    opacity: 0.75;
    transform: none;
  }

  .reveal[open] > .reveal__panel > * { animation: none !important; }
}

/* --------------------------------------------------------------------------
   16. Forced colours / print
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
  .reveal__button,
  .letter,
  .wish { border: 1px solid CanvasText; }

  .nineteen__digits {
    background-image: none;
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
  }
}

@media print {
  .confetti,
  .birthday-balloons,
  .garland,
  .scroll-cue,
  .skip-link { display: none; }

  body { background-image: none; }
  body::before { display: none; }
}

/* Printing should not swallow a letter that was never opened. */
@supports selector(details::details-content) {
  @media print {
    details::details-content { content-visibility: visible; }
  }
}