/* ==========================================================================
   A Little Song · Ornament layer
   Decoration only. Loaded last on every page. No layout or content rewrites:
   this file adds atmosphere, typography, entrances and small states on top of
   the existing romantic / experience / creator systems.
   ==========================================================================
   Contents
   01  Display face and tokens
   02  Paper atmosphere (grain, vignette, warm light)
   03  Shared type and detail
   04  Header, links and controls
   05  Home · hero
   06  Home · section rhythm, labels and reveals
   07  Home · story letter, process, gift editorial, price, guides
   08  Home · marquee, closing, footer
   09  Song player (waveform shell)
   10  Gift and example pages (seal, opening, arrival)
   11  Creator page
   12  Page transitions
   13  Responsive
   14  Reduced motion
   ========================================================================== */

/* 01 · Display face and tokens --------------------------------------------- */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-latin-italic.woff2') format('woff2');
}

:root {
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --orn-ease: cubic-bezier(.16, 1, .3, 1);
  --orn-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --orn-ease-soft: cubic-bezier(.33, 1, .68, 1);
  --orn-header: 96px;
}

/* The serif is display-only; small print and controls keep the sans face. */
h1, h2, h3,
.brand,
.footer-signature,
.price-display,
.memory-letter blockquote,
.photo-dedication strong,
.track-description strong,
.recipient-track h2,
.recipient-gift h1,
.gift-opening h1,
.sealed-letter p,
.gift-letter,
.example-present h1,
.example-present h2,
.creator-page .journey-aside h2,
.creator-page .form-step h1,
.lyrics-stage h1,
.song-title {
  font-family: var(--font-display);
  font-weight: 400;
}
h1 { letter-spacing: -.032em; }
h2 { letter-spacing: -.026em; }
h3 { letter-spacing: -.018em; }

/* Negative tracking is a Latin-display choice. Arabic joins and CJK glyphs
   need their own line-height and zero tracking; the fallback face carries them. */
:lang(ar) h1,
:lang(ar) h2,
:lang(ar) h3,
:lang(zh-CN) h1,
:lang(zh-CN) h2,
:lang(zh-CN) h3,
:lang(ja) h1,
:lang(ja) h2,
:lang(ja) h3 { letter-spacing: 0; }
:lang(ar) h1 { line-height: 1.12; }
:lang(ar) h2 { line-height: 1.2; }
:lang(ar) h3 { line-height: 1.3; }
:lang(zh-CN) h1, :lang(ja) h1 { line-height: 1.08; }
:lang(zh-CN) h2, :lang(ja) h2 { line-height: 1.14; }
:lang(zh-CN) h3, :lang(ja) h3 { line-height: 1.28; }
:lang(ar) .orn-lines .orn-line,
:lang(zh-CN) .orn-lines .orn-line,
:lang(ja) .orn-lines .orn-line {
  padding-bottom: .22em;
  margin-bottom: -.22em;
}

.hero-lead,
.closing-note,
.memory-letter blockquote,
.gift-letter,
.sealed-letter p {
  font-style: normal;
}

/* 02 · Paper atmosphere ----------------------------------------------------- */
.orn-grain,
.orn-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 70;
}
.orn-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: multiply;
  opacity: .06;
}
.orn-vignette {
  z-index: 69;
  background:
    radial-gradient(125% 95% at 50% 38%, transparent 52%, rgb(58 24 26 / .085) 100%);
}
.orn-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--color-accent);
  opacity: .72;
  z-index: 90;
  pointer-events: none;
}
[dir='rtl'] .orn-progress { transform-origin: 100% 50%; }

/* A quiet pool of light behind the hero, like a window at four o'clock. */
.letter-hero { position: relative; }
.letter-hero::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -12% -6% -18% 24%;
  pointer-events: none;
  background:
    radial-gradient(46% 44% at 72% 24%, rgb(173 89 59 / .075), transparent 72%),
    radial-gradient(34% 36% at 32% 82%, rgb(173 89 59 / .035), transparent 78%);
}
.letter-hero > * { position: relative; z-index: 1; }

/* 03 · Shared type and detail ---------------------------------------------- */
::selection { background: var(--color-blush, #f0dcd8); color: var(--color-ink); }
html { scroll-padding-top: calc(var(--orn-header) + 18px); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:focus-visible { outline: 2px solid var(--color-focus, var(--color-accent)); outline-offset: 3px; }
.site-header nav a:focus-visible,
.button:focus-visible,
.quiet-link:focus-visible { outline-offset: 5px; }

/* Thin wine scrollbar where supported. */
@supports (scrollbar-width: thin) {
  html { scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--color-accent) 45%, transparent) transparent; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--color-accent) 34%, transparent);
  border: 3px solid var(--color-paper);
  border-radius: 999px;
}

/* 04 · Header, links and controls ------------------------------------------ */
/* Sticky only from tablet up: the phone header carries a second row for the
   language picker and would eat a sixth of the viewport if it stayed pinned. */
@media (min-width: 801px) {
  .romance-home .site-header {
    position: sticky;
    top: 0;
    z-index: 45;
    background: var(--color-paper);
    box-shadow: 0 0 0 100vmax var(--color-paper);
    clip-path: inset(0 -100vmax);
    transition: background-color 300ms ease;
  }
  .romance-home .site-header::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100vw;
    height: 1px;
    transform: translateX(-50%) scaleX(0);
    transform-origin: 50% 50%;
    background: var(--color-rule);
    transition: transform 500ms var(--orn-ease);
  }
  .romance-home .site-header.orn-scrolled::after { transform: translateX(-50%) scaleX(1); }
}

.site-header nav a:not(:last-child) {
  position: relative;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  transition: background-size 320ms var(--orn-ease), color 180ms ease;
}
.site-header nav a:not(:last-child):hover { background-size: 100% 1px; }
.site-header nav a:last-child { transition: background-color 220ms ease, transform 180ms var(--orn-ease); }
.site-header nav a:last-child:hover { background: var(--color-accent-hover); }
.site-header nav a:last-child span { transition: transform 260ms var(--orn-ease); }
.site-header nav a:last-child:hover span { transform: translate(2px, -2px); }

.button {
  position: relative;
  transition: background-color 240ms ease, color 240ms ease, transform 140ms var(--orn-ease);
}
.button span[aria-hidden] { display: inline-block; transition: transform 300ms var(--orn-ease); }
.button:hover span[aria-hidden] { transform: translateX(4px); }
.button:active { transform: scale(.985); }

.quiet-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 calc(100% - 9px);
  transition: background-size 340ms var(--orn-ease);
}
.quiet-link:hover { text-decoration: none; background-size: 100% 1px; }
.quiet-link span[aria-hidden] { transition: transform 300ms var(--orn-ease); }
.quiet-link:hover span[aria-hidden] { transform: translate(3px, -3px); }

.occasion-buttons button {
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, transform 160ms var(--orn-ease);
}
.occasion-buttons button:hover { border-color: var(--color-accent); }
.occasion-buttons button[aria-pressed='true'] { transform: translateY(-1px); }

/* 05 · Home · hero ---------------------------------------------------------- */
.letter-copy h1 {
  font-size: clamp(60px, 6.5vw, 96px);
  line-height: .98;
  letter-spacing: -.028em;
  margin-bottom: 30px;
}
.hero-lead {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -.005em;
  max-width: 33ch;
}
.hero-description { font-size: 14px; letter-spacing: .002em; }
.personal-intro {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.personal-intro::after {
  content: '';
  width: 46px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}
.hero-includes { gap: 10px 26px; }
.hero-includes li { position: relative; }
.hero-includes li + li::before {
  content: '·';
  position: absolute;
  inset-inline-start: -17px;
  color: var(--color-accent);
  opacity: .6;
}
.under-cta { letter-spacing: .012em; }

.hero-art::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 22px -18px -18px 22px;
  background: var(--color-paper-2);
  pointer-events: none;
}
.dedication-card {
  position: relative;
  z-index: 1;
  outline: 1px solid color-mix(in oklab, var(--color-accent) 9%, transparent);
  outline-offset: -1px;
}
.dedication-photo { isolation: isolate; }
.dedication-photo > img {
  transform-origin: 61% 55%;
  transition: scale 1200ms var(--orn-ease-soft), filter 800ms ease;
  scale: 1;
  filter: saturate(.9) sepia(.1) contrast(1.02) brightness(.99);
}
main img {
  filter: saturate(.9) sepia(.08) contrast(1.02);
}
.dedication-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(110% 80% at 50% 18%, transparent 52%, rgb(58 24 26 / .16) 100%),
    linear-gradient(0deg, rgb(58 24 26 / .10), transparent 46%);
  mix-blend-mode: multiply;
}
.dedication-photo:hover > img { scale: 1.035; filter: saturate(1.02) contrast(1.02); }
.photo-dedication { z-index: 3; }
.photo-dedication strong { letter-spacing: -.02em; }
.photo-dedication p { font-family: var(--font-display); font-size: 19px; }

.orn-seal {
  position: absolute;
  z-index: 6;
  inset-block-start: -26px;
  inset-inline-end: -22px;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  color: var(--color-accent);
  background: var(--color-paper);
  border-radius: 50%;
  rotate: 9deg;
  opacity: 0;
  scale: .86;
  transition: opacity 900ms var(--orn-ease), scale 1100ms var(--orn-ease);
  pointer-events: none;
}
.orn-seal svg { width: 100%; height: 100%; display: block; overflow: visible; }
.orn-seal text {
  font-family: var(--font-body);
  font-size: 8.2px;
  font-weight: 500;
  letter-spacing: 1.35px;
  fill: currentColor;
}
.orn-seal .orn-seal-mark { fill: none; stroke: currentColor; stroke-width: 1; }
.orn-in .orn-seal,
.orn-seal.orn-in { opacity: .92; scale: 1; }

.orn-petals {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* A physical-print adaptation of the React Bits HoloCard idea. No WebGL and
   no rainbow foil: a 3–4° pointer tilt, a weak pearl light on the photograph,
   and a slow idle drift that the footer motion control can stop. */
.orn-holo-stage {
  position: relative;
  display: block;
  width: 100%;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  will-change: transform;
}
.orn-holo-sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .26;
  background:
    linear-gradient(115deg, transparent 31%, rgb(255 250 242 / .46) 47%, transparent 61%),
    radial-gradient(
      230px 210px at var(--orn-sheen-x, 50%) var(--orn-sheen-y, 42%),
      rgb(255 247 232 / .8),
      rgb(255 234 210 / .2) 45%,
      transparent 72%
    );
  background-size: 200% 200%, 100% 100%;
  background-position: var(--orn-sheen-x, 50%) var(--orn-sheen-y, 50%), 50% 50%;
  mix-blend-mode: screen;
  transition: opacity 500ms var(--orn-ease);
}
.orn-holo-sheen::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgb(255 250 242 / .2);
}
.orn-holo-stage.is-hovering .orn-holo-sheen { opacity: .58; }
@media (max-width: 899px), (hover: none), (pointer: coarse) {
  .orn-holo-stage { transform: none !important; }
  .orn-holo-sheen { opacity: .16; }
}
@media (prefers-reduced-motion: reduce) {
  .orn-holo-stage { transform: none !important; }
  .orn-holo-sheen { opacity: .14; }
}
.closing-letter > .wrap { position: relative; z-index: 1; }

/* Hero entrance: base state is the finished state, so no-JS and reduced
   motion always see the page. Animations only ever play the finished look in. */
@keyframes ornRise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes ornRiseSoft {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes ornPhotoScale {
  from { transform: scale(1.09); }
  to { transform: scale(1); }
}
@keyframes ornFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .letter-copy > .personal-intro { animation: ornRise 700ms var(--orn-ease) both 0ms; }
  .letter-copy > .hero-lead { animation: ornRise 850ms var(--orn-ease) both 220ms; }
  .letter-copy > .hero-description { animation: ornRiseSoft 800ms var(--orn-ease) both 320ms; }
  .letter-copy > .button { animation: ornRiseSoft 800ms var(--orn-ease) both 420ms; }
  .letter-copy > .under-cta { animation: ornRiseSoft 800ms var(--orn-ease) both 500ms; }
  .letter-copy > .hero-includes { animation: ornRiseSoft 800ms var(--orn-ease) both 560ms; }
  .letter-copy > .quiet-link { animation: ornRiseSoft 800ms var(--orn-ease) both 620ms; }
  .dedication-card { animation: ornRise 1000ms var(--orn-ease) both 100ms; }
  .dedication-photo > img { animation: ornPhotoScale 1600ms var(--orn-ease-soft) both 100ms; }
  .photo-dedication { animation: ornFade 900ms var(--orn-ease) both 560ms; }
  .hero-audio { animation: ornFade 900ms var(--orn-ease) both 380ms; }
  .example-caption { animation: ornFade 800ms var(--orn-ease) both 700ms; }
}

/* 06 · Home · section rhythm, labels and reveals ---------------------------- */
.orn-index {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .22em;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}
.orn-index::after {
  content: '';
  width: 36px;
  height: 1px;
  background: currentColor;
  opacity: .38;
}
.orn-index--light { color: color-mix(in oklab, var(--color-light-ink) 96%, transparent); }

.story-spread { border-block: 1px solid transparent; }
.story-spread > .wrap { position: relative; }
.story-spread h2 { font-size: clamp(44px, 5vw, 68px); }

.orn-lines .orn-line {
  display: block;
  overflow: clip;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.orn-lines .orn-line-inner { display: block; }
.letter-copy h1.orn-lines .orn-line { padding-bottom: .16em; margin-bottom: -.16em; }
.letter-copy h1.orn-lines .orn-line-inner { transition-duration: 950ms; }

.orn-js .orn-reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 900ms var(--orn-ease),
    transform 1000ms var(--orn-ease);
  transition-delay: var(--orn-delay, 0ms);
}
.orn-js .orn-reveal.orn-in { opacity: 1; transform: none; }
.orn-js .orn-reveal--soft { transform: translate3d(0, 12px, 0); transition-duration: 800ms, 900ms; }
.orn-js .orn-reveal--right { transform: translate3d(18px, 0, 0); }
.orn-js .orn-reveal--fade { transform: none; }
/* Clip the picture, never the observed box: an intersection observer cannot
   see an element whose own clip-path has already hidden it. */
.orn-js .orn-reveal--clip { opacity: 1; transform: none; }
.orn-js .orn-reveal--clip img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1200ms var(--orn-ease-in-out), scale 1200ms var(--orn-ease-soft);
  transition-delay: var(--orn-delay, 0ms);
  scale: 1.04;
}
.orn-js .orn-reveal--clip.orn-in img { clip-path: inset(0 0 0 0); scale: 1; }
.orn-js .orn-reveal--unfold {
  opacity: 0;
  transform: perspective(1200px) rotateX(7deg) translate3d(0, 26px, 0);
  transform-origin: 50% 0;
  transition: opacity 900ms var(--orn-ease), transform 1100ms var(--orn-ease);
  transition-delay: var(--orn-delay, 0ms);
}
.orn-js .orn-reveal--unfold.orn-in { opacity: 1; transform: none; }

.orn-js .orn-lines .orn-line-inner {
  transform: translate3d(0, 112%, 0);
  transition: transform 1100ms var(--orn-ease);
  transition-delay: calc(var(--orn-line, 0) * 85ms + var(--orn-delay, 0ms));
}
.orn-js .orn-lines.orn-in .orn-line-inner { transform: none; }

/* 07 · Home · letter, process, gift, price, guides -------------------------- */
.memory-letter {
  position: relative;
  border: 1px solid color-mix(in oklab, var(--color-accent) 10%, transparent);
  transition: transform 1200ms var(--orn-ease-soft), rotate 1200ms var(--orn-ease-soft);
}
.memory-letter::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset-block-start: -13px;
  inset-inline-start: 50%;
  width: 92px;
  height: 27px;
  translate: -50% 0;
  rotate: -2.5deg;
  background: color-mix(in oklab, var(--color-blush) 78%, transparent);
  border-inline: 1px solid rgb(255 255 255 / .28);
  opacity: .85;
  pointer-events: none;
}
.memory-letter blockquote { font-style: italic; letter-spacing: -.012em; }
.orn-js .memory-letter.orn-reveal--unfold { rotate: -3.4deg; }
.orn-js .memory-letter.orn-reveal--unfold.orn-in { rotate: -2deg; }

.how-spread > div:first-child { align-self: start; }
@media (min-width: 1024px) {
  .how-spread > div:first-child {
    position: sticky;
    top: calc(var(--orn-header) + 54px);
    padding-bottom: 24px;
  }
}
.gift-steps { counter-reset: ornstep; }
.gift-steps > li { counter-increment: ornstep; position: relative; padding-inline-start: 54px; }
.gift-steps > li::before {
  content: '0' counter(ornstep);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--color-accent);
  opacity: .7;
}
.gift-steps > li::after {
  content: '';
  position: absolute;
  inset-inline-start: 21px;
  inset-block-start: 24px;
  bottom: -8px;
  width: 1px;
  background: linear-gradient(var(--color-rule), transparent);
}
.gift-steps > li:last-child::after { display: none; }

.gift-editorial {
  position: relative;
  isolation: isolate;
  background-image:
    radial-gradient(52% 60% at 14% 12%, rgb(255 236 226 / .075), transparent 70%),
    radial-gradient(46% 54% at 88% 88%, rgb(173 89 59 / .16), transparent 72%);
}
.gift-editorial::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(300px 280px at var(--orn-mx, 78%) var(--orn-my, 24%), rgb(255 238 226 / .09), transparent 70%);
  transition: opacity 400ms ease;
}
.gift-editorial > .wrap { position: relative; z-index: 1; }
.gift-editorial .orn-silk {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1200ms var(--orn-ease);
}
.gift-editorial.has-silk .orn-silk { opacity: 1; }
.gift-editorial.has-silk::before { opacity: 0; }
.gift-editorial.has-silk::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(100% 120% at 24% 50%, rgb(16 7 9 / .02), rgb(16 7 9 / .3) 72%),
    linear-gradient(180deg, rgb(16 7 9 / .08), rgb(16 7 9 / .16));
}
.gift-editorial figure { position: relative; }
.gift-editorial figure::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 18px -18px -18px 18px;
  border: 1px solid rgb(255 245 238 / .16);
  pointer-events: none;
}
.gift-editorial figure img {
  position: relative;
  z-index: 1;
  transition: scale 1200ms var(--orn-ease-soft);
  scale: 1;
}
.gift-editorial figure:hover img { scale: 1.025; }
.gift-editorial figcaption { position: relative; z-index: 2; }
.gift-editorial h2 { font-size: clamp(44px, 5vw, 70px); }
.gift-editorial p { color: color-mix(in oklab, var(--color-light-ink) 82%, transparent); }
.gift-editorial .orn-seal {
  inset-block-start: auto;
  inset-block-end: -30px;
  inset-inline-end: -16px;
  width: 92px;
  height: 92px;
  color: color-mix(in oklab, var(--color-light-ink) 84%, var(--color-accent));
  background: var(--color-night);
}

.purchase-note {
  position: relative;
  border: 1px solid color-mix(in oklab, var(--color-accent) 12%, transparent);
}
.purchase-note::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid color-mix(in oklab, var(--color-accent) 8%, transparent);
  pointer-events: none;
}
.price-display {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 18px;
  letter-spacing: -.035em;
}
.purchase-note .price-display > [data-price-usd] {
  font-size: clamp(46px, 4.5vw, 62px);
  line-height: .96;
  letter-spacing: -.035em;
}
.purchase-note .price-display > span:nth-of-type(2) {
  align-self: flex-end;
  margin: 0 0 .5em;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--color-ink-2);
  white-space: nowrap;
}
.orn-price-line {
  position: absolute;
  inset-inline: 0;
  bottom: -11px;
  width: 100%;
  height: 12px;
  overflow: visible;
  color: var(--color-accent);
  pointer-events: none;
}
.orn-price-line path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1500ms var(--orn-ease) 150ms;
  opacity: .72;
}
.orn-price-line.orn-in path { stroke-dashoffset: 0; }

.purchase-note ul { padding-inline-start: 0; }
.purchase-note li { position: relative; padding-inline-start: 20px; }
.purchase-note li::before {
  content: '';
  position: absolute;
  inset-inline-start: 1px;
  inset-block-start: .62em;
  width: 8px;
  height: 1px;
  background: var(--color-accent);
  opacity: .55;
}

.song-guides h2 { font-size: clamp(44px, 5vw, 68px); }
.song-guides-links { border-top: 1px solid var(--color-rule); }
.song-guides-links li { border-bottom: 1px solid var(--color-rule); }
.song-guides-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 6px;
  background-image: linear-gradient(color-mix(in oklab, var(--color-blush) 60%, transparent), color-mix(in oklab, var(--color-blush) 60%, transparent));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0 100%;
  transition: background-size 420ms var(--orn-ease), padding-inline-start 420ms var(--orn-ease);
}
.song-guides-links a:hover { background-size: 100% 100%; padding-inline-start: 16px; }
.song-guides-links a span[aria-hidden] { transition: transform 300ms var(--orn-ease); }
.song-guides-links a:hover span[aria-hidden] { transform: translate(3px, -3px); }

@media (min-width: 1024px) {
  .faq > h2 {
    position: sticky;
    top: calc(var(--orn-header) + 54px);
    align-self: start;
  }
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  list-style: none;
  transition: color 220ms ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  flex: none;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  color: var(--color-accent);
  transition: transform 320ms var(--orn-ease), opacity 220ms ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-accent); }
@supports (interpolate-size: allow-keywords) {
  .faq details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 360ms var(--orn-ease), content-visibility 360ms allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

.closing-letter {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-image:
    radial-gradient(58% 62% at 50% 0%, rgb(255 252 246 / .5), transparent 70%),
    radial-gradient(90% 90% at 50% 120%, rgb(173 89 59 / .08), transparent 70%);
}
.closing-letter::before {
  content: '';
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 0;
  width: 1px;
  height: 34px;
  background: var(--color-accent);
  opacity: .25;
}
.closing-letter h2 { letter-spacing: -.028em; }
.closing-letter .closing-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 21px;
  line-height: 1.55;
  letter-spacing: 0;
}
.closing-letter .orn-index {
  justify-content: center;
  margin-inline: auto;
  margin-bottom: 18px;
}
.closing-letter .button { margin-top: 6px; }

.love-footer { position: relative; }
.footer-signature {
  letter-spacing: -.045em;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 92%;
  transition: background-size 600ms var(--orn-ease);
  width: fit-content;
}
.footer-signature:hover { background-size: 100% 1px; }
.footer-top nav a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 calc(100% - 12px);
  transition: background-size 300ms var(--orn-ease);
}
.footer-top nav a:hover { background-size: 100% 1px; }
.orn-motion {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 200ms ease;
}
.orn-motion:hover { color: var(--color-accent); }
.orn-motion::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 10px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 2px 10px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 2px 10px no-repeat;
  opacity: .72;
}
.orn-motion[aria-pressed='true']::before {
  width: 0;
  height: 0;
  background: none;
  border-block: 5px solid transparent;
  border-inline-start: 8px solid currentColor;
}
.orn-motion:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
html.orn-paused .orn-marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .orn-motion { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .orn-js .footer-signature {
    scale: .965;
    opacity: .55;
    transition: scale 1200ms var(--orn-ease-soft), opacity 900ms ease;
    transform-origin: 8% 70%;
  }
  .orn-js .footer-signature.orn-in { scale: 1; opacity: 1; }
}

/* A barely-there drift as the hero card leaves the viewport. Uses the
   separate `translate` property so the load animation is not disturbed. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-art .dedication-card {
      animation: ornRise 1100ms var(--orn-ease) both 300ms, ornDrift linear both;
      animation-timeline: auto, view();
      animation-range: normal, entry 0% exit 100%;
    }
    @keyframes ornDrift {
      from { translate: 0 -8px; }
      to { translate: 0 22px; }
    }
  }
}

/* 08 · Marquee ------------------------------------------------------------- */
.orn-marquee {
  position: relative;
  overflow: clip;
  border-block: 1px solid var(--color-rule);
  background: var(--color-paper-2);
  padding-block: 22px;
  color: var(--color-accent);
}
.orn-marquee-track {
  display: flex;
  width: max-content;
  gap: 0;
  will-change: transform;
  animation: ornMarquee 52s linear infinite;
}
.orn-marquee:hover .orn-marquee-track { animation-play-state: paused; }
.orn-marquee-track > span {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  padding-inline-end: 34px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.orn-marquee-track > span::after {
  content: '·';
  font-size: .55em;
  opacity: .55;
}
.orn-marquee-track > span:nth-child(even) { font-style: italic; }
@keyframes ornMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
[dir='rtl'] .orn-marquee-track { animation-name: ornMarqueeRtl; }
@keyframes ornMarqueeRtl {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}

/* 09 · Song player --------------------------------------------------------- */
.song-player {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 0;
  border-top: 1px solid color-mix(in oklab, var(--color-accent) 14%, transparent);
  border-radius: 0 !important;
  padding: 15px 0 0 !important;
  background: transparent !important;
  transition: border-color 260ms ease, background-color 260ms ease;
}
.song-player:hover { border-top-color: color-mix(in oklab, var(--color-accent) 30%, transparent); }
.song-player .orn-wave-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 52px;
}
.song-player .orn-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.song-player .player-seek {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  appearance: none;
  background: transparent;
  touch-action: pan-y;
}
.song-player .player-seek::-webkit-slider-runnable-track {height:4px;background:color-mix(in srgb,var(--color-accent) 25%,transparent);}
.song-player .player-seek::-webkit-slider-thumb {appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-accent);margin-top:-6px;}
.song-player .player-seek::-moz-range-track {height:4px;background:var(--color-paper-2);}
.song-player .player-seek::-moz-range-thumb {width:16px;height:16px;border:0;border-radius:50%;background:var(--color-accent);}
.song-player .player-seek:disabled {opacity:.35!important;}
.song-player:has(.player-seek:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
.song-player .player-toggle {
  width: 46px !important;
  height: 46px !important;
  min-height: 46px;
  border-radius: 50% !important;
  font-size: 0 !important;
  color: transparent !important;
  background: var(--color-accent) !important;
  display: inline-grid;
  place-items: center;
  position: relative;
  transition: background-color 220ms ease, scale 180ms var(--orn-ease);
}
.song-player .player-toggle:hover { background: var(--color-accent-hover) !important; }
.song-player .player-toggle:active { scale: .95; }
.song-player .player-toggle::before {
  content: '';
  width: 0;
  height: 0;
  margin-inline-start: 3px;
  border-block: 7px solid transparent;
  border-inline-start: 11px solid var(--color-light-ink);
  transition: opacity 160ms ease;
}
.song-player .player-toggle[aria-label='Pause song']::before {
  width: 11px;
  height: 13px;
  margin: 0;
  border: 0;
  background:
    linear-gradient(var(--color-light-ink), var(--color-light-ink)) 0 0 / 3.5px 100% no-repeat,
    linear-gradient(var(--color-light-ink), var(--color-light-ink)) 100% 0 / 3.5px 100% no-repeat;
}
.song-player .player-clock {
  font-size: 10px !important;
  letter-spacing: .04em;
  color: var(--color-ink-2) !important;
  font-variant-numeric: tabular-nums;
  align-self: end;
  padding-bottom: 2px;
}
.song-player .player-error { grid-column: 1 / -1; }
.song-player.is-playing { background: color-mix(in oklab, var(--color-paper-2) 78%, var(--color-white)) !important; }

/* 10 · Gift and example ---------------------------------------------------- */
.sealed-letter {
  position: relative;
  border-radius: 2px !important;
  transition: transform 600ms var(--orn-ease), border-color 300ms ease;
  box-shadow: 0 1px 0 color-mix(in oklab, var(--color-accent) 8%, transparent);
}
.sealed-letter::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid color-mix(in oklab, var(--color-accent) 9%, transparent);
  pointer-events: none;
}
.sealed-letter:hover { transform: translateY(-2px) rotate(-.35deg); }
.letter-heart {
  display: inline-block;
  transition: transform 500ms var(--orn-ease);
  color: var(--color-accent);
}
.sealed-letter:hover .letter-heart { transform: scale(1.14) rotate(-6deg); }
.sealed-letter:has(.orn-wax) .letter-heart { display: none; }

#gift-opening:not([hidden]),
#example-opening:not([hidden]) {
  min-height: calc(100svh - 300px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.orn-wax {
  position: absolute;
  z-index: 3;
  inset-block-end: -26px;
  inset-inline-start: 50%;
  width: 72px;
  height: 72px;
  translate: -50% 0;
  display: grid;
  place-items: center;
  border-radius: 46% 54% 49% 51% / 52% 45% 55% 48%;
  background:
    radial-gradient(62% 62% at 34% 28%, rgb(255 255 255 / .28), transparent 62%),
    radial-gradient(70% 70% at 68% 76%, rgb(84 22 28 / .45), transparent 70%),
    var(--color-accent);
  color: color-mix(in oklab, var(--color-light-ink) 88%, transparent);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12);
  pointer-events: none;
}
.orn-wax svg { width: 38px; height: 38px; display: block; }
.orn-wax .orn-wax-ring { fill: none; stroke: currentColor; stroke-width: 1; opacity: .6; }
.orn-wax .orn-wax-heart { fill: currentColor; opacity: .9; }

.orn-burst {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  overflow: clip;
  display: grid;
  place-items: center;
}
.orn-burst-ring {
  width: 12vmin;
  height: 12vmin;
  border: 1px solid color-mix(in oklab, var(--color-accent) 55%, transparent);
  border-radius: 50%;
  opacity: 0;
  animation: ornBurstRing 1200ms var(--orn-ease) forwards;
}
@keyframes ornBurstRing {
  0% { opacity: .8; transform: scale(.4); }
  100% { opacity: 0; transform: scale(5.5); }
}
.orn-burst i {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 12px;
  height: 16px;
  margin: -8px 0 0 -6px;
  border-radius: 62% 38% 58% 42% / 58% 48% 52% 42%;
  background: color-mix(in oklab, var(--color-accent) 55%, var(--color-blush));
  opacity: 0;
  animation: ornPetalBurst var(--orn-burst-dur, 1400ms) var(--orn-ease) forwards;
  animation-delay: var(--orn-burst-delay, 0ms);
}
@keyframes ornPetalBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.5); }
  18% { opacity: .85; }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--orn-bx, 0px)), calc(-50% + var(--orn-by, -120px)))
      rotate(var(--orn-br, 90deg)) scale(1);
  }
}

@keyframes ornCardIn {
  from { opacity: 0; transform: perspective(1400px) rotateX(5deg) translate3d(0, 26px, 0) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes ornItemIn {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: none; }
}
.orn-arrive { animation: ornCardIn 900ms var(--orn-ease) both; }
.orn-arrive .orn-stagger { animation: ornItemIn 900ms var(--orn-ease) both; animation-delay: calc(var(--orn-i, 0) * 70ms + 180ms); }
#gift-opening:not([hidden]),
#example-opening:not([hidden]) { animation: ornFade 900ms var(--orn-ease) both; }
#gift-opening:not([hidden]) h1,
#example-opening:not([hidden]) h1 { animation: ornItemIn 1000ms var(--orn-ease) both 100ms; }

.recipient-page .recipient-gift,
.example-present {
  border-radius: 2px !important;
}
.recipient-page .recipient-gift { position: relative; }
#present .orn-seal {
  inset-block-start: -24px;
  inset-inline-end: -18px;
  width: 88px;
  height: 88px;
  background: var(--color-paper);
}
@media (max-width: 600px) {
  #present .orn-seal { inset-block-start: -16px; inset-inline-end: -10px; width: 72px; height: 72px; }
}
.recipient-page .recipient-gift h1,
.example-present h1,
.gift-recipient { letter-spacing: -.03em; }
/* The revealed gift names the recipient with a <p>. One visible <h1> per
   document keeps the page readable for search engines and screen readers. */
.example-present .gift-recipient { font-size: 2.2rem; line-height: 1.1; margin: 0; }
.recipient-page #photo { transition: scale 1200ms var(--orn-ease-soft); }
.recipient-page #photo:hover { scale: 1.012; }
.recipient-lyrics summary,
.gift-lyrics summary { transition: color 220ms ease; }
.recipient-lyrics summary:hover,
.gift-lyrics summary:hover { color: var(--color-accent); }

/* 11 · Creator page -------------------------------------------------------- */
/* The sticky confirm button used to float over the first lines of the lyrics.
   In the reading screen it belongs after the words, not on top of them. */
#lyrics-stage #show-gift { position: static; margin-top: 22px; }
.site-header .language-switcher select,
.recipient-header .language-switcher select,
.creator-header .language-switcher select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  background-color: transparent;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-accent) 50%),
    linear-gradient(135deg, var(--color-accent) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% + 1px),
    calc(100% - 12px) calc(50% + 1px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .03em;
  padding: 10px 34px 10px 12px;
  min-height: 44px;
  transition: border-color 220ms ease, background-color 220ms ease;
}
.site-header .language-switcher select:hover,
.recipient-header .language-switcher select:hover,
.creator-header .language-switcher select:hover { border-color: var(--color-accent); }
.form-step:not([hidden]),
#quick-start:not([hidden]),
#lyrics-stage:not([hidden]),
#song-stage:not([hidden]),
#gift:not([hidden]) { animation: ornStepIn 620ms var(--orn-ease) both; }
#lyrics-stage:not([hidden]) { animation-duration: 800ms; }
@keyframes ornStepIn {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: none; }
}
.creator-page .creator-progress .progress-track { overflow: hidden; }
.creator-page #step-progress {
  background-image: linear-gradient(90deg, var(--color-accent), color-mix(in oklab, var(--color-accent) 70%, var(--color-blush)));
  transition: width 620ms var(--orn-ease) !important;
}
.creator-page .chapter-list li { transition: color 240ms ease; }
.creator-page .rich-choice { transition: border-color 220ms ease, background-color 220ms ease, transform 180ms var(--orn-ease); }
.creator-page .rich-choice:hover { transform: translateY(-1px); }
.creator-page input:not([type=radio]):not([type=file]):not([type=checkbox]),
.creator-page textarea { transition: border-color 220ms ease, box-shadow 220ms ease; }
.creator-page input:not([type=radio]):not([type=file]):not([type=checkbox]):focus,
.creator-page textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 10%, transparent); }


/* Mirror directional arrows when the document reads right-to-left. */
[dir='rtl'] .button span[aria-hidden],
[dir='rtl'] .quiet-link span[aria-hidden],
[dir='rtl'] .site-header nav a:last-child span,
[dir='rtl'] .song-guides-links a span[aria-hidden] {
  display: inline-block;
  transform: scaleX(-1);
}
[dir='rtl'] .button:hover span[aria-hidden] { transform: scaleX(-1) translateX(-4px); }
[dir='rtl'] .quiet-link:hover span[aria-hidden],
[dir='rtl'] .song-guides-links a:hover span[aria-hidden] { transform: scaleX(-1) translate(-3px, -3px); }
[dir='rtl'] .site-header nav a:last-child:hover span { transform: scaleX(-1) translate(-2px, -2px); }

/* 12 · Page transitions ---------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: ornPageOut 320ms var(--orn-ease) both;
}
::view-transition-new(root) {
  animation: ornPageIn 520ms var(--orn-ease) both;
}
@keyframes ornPageOut {
  to { opacity: 0; transform: translateY(-6px); }
}
@keyframes ornPageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* 13 · Responsive ---------------------------------------------------------- */
@media (max-width: 1000px) {
  .letter-copy h1 { font-size: clamp(58px, 8.6vw, 84px); }
  .hero-lead { font-size: 20px; }
  .hero-art::before { inset: 16px -12px -12px 16px; }
  .orn-seal { width: 88px; height: 88px; inset-block-start: -20px; inset-inline-end: -14px; }
  .gift-steps > li { padding-inline-start: 44px; }
}
@media (max-width: 600px) {
  .song-player { grid-template-columns: 46px minmax(0, 1fr); gap: 8px 12px; padding: 13px 0 0 !important; }
  .song-player .orn-wave-wrap { height: 44px; }
  .song-player .player-toggle { grid-row: 1 / 3; align-self: stretch; height: auto !important; min-height: 46px; }
  .song-player .player-clock { grid-column: 2; justify-self: end; align-self: end; padding-bottom: 0; }
}
@media (max-width: 800px) {
  :root { --orn-header: 80px; }
  .hero-lead { font-size: 19px; max-width: 38ch; }
  .letter-copy h1 { font-size: clamp(54px, 13vw, 76px); }
  .hero-art::before { inset: 14px -10px -10px 14px; }
  .orn-seal { width: 78px; height: 78px; inset-block-start: -16px; inset-inline-end: -10px; }
  .orn-seal text { font-size: 7.6px; letter-spacing: 1.35px; }
  .memory-letter::before { width: 74px; height: 24px; }
  .gift-editorial figure::before { inset: 12px -12px -12px 12px; }
  .gift-editorial .orn-seal { inset-block-end: -24px; inset-inline-end: -8px; width: 76px; height: 76px; }
  .orn-marquee { padding-block: 16px; }
  .song-player { padding: 13px 14px 12px !important; }
  .song-player .orn-wave-wrap { height: 42px; }
  .footer-signature { letter-spacing: -.035em; }
}
@media (max-width: 480px) {
  .personal-intro { font-size: 10px; letter-spacing: .1em; gap: 10px; }
  .personal-intro::after { display: none; }
  .letter-copy h1 { font-size: clamp(50px, 14.2vw, 66px); line-height: .99; }
  .hero-lead { font-size: 18px; }
  .hero-includes { display: grid; gap: 5px; font-size: 13px; }
  .hero-includes li { padding-inline-start: 18px; }
  .hero-includes li::before,
  .hero-includes li + li::before {
    content: '—';
    position: absolute;
    inset-inline-start: 0;
    color: var(--color-accent);
    opacity: .55;
  }
  .hero-art::before { inset: 10px -8px -8px 10px; }
  .orn-seal { width: 68px; height: 68px; inset-block-start: -13px; inset-inline-end: -7px; }
  .orn-seal text { font-size: 8.2px; letter-spacing: 1.2px; }
  .gift-steps > li { padding-inline-start: 0; padding-top: 26px; }
  .gift-steps > li::before { inset-block-start: 0; }
  .gift-steps > li::after { display: none; }
  .memory-letter::before { inset-block-start: -11px; height: 22px; width: 64px; }
  .closing-letter .closing-note { font-size: 19px; }
  .orn-marquee-track > span { gap: 22px; padding-inline-end: 22px; }
  .orn-index { margin-bottom: 14px; }
  .song-player .player-clock { padding-bottom: 0; }
}

/* Print: every ornament goes, every reveal resolves. */
@media print {
  .orn-grain, .orn-vignette, .orn-progress, .orn-marquee, .orn-burst,
  .orn-seal, .orn-petals, .orn-wax { display: none !important; }
  .orn-js .orn-reveal,
  .orn-js .orn-reveal--clip,
  .orn-js .orn-reveal--unfold {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .orn-lines .orn-line-inner { transform: none !important; }
  .dedication-photo > img, .gift-editorial figure img { clip-path: none !important; scale: 1 !important; }
}

/* Non-Latin display corrections. These must sit after every Latin display rule
   so they also out-rank the component-specific tracking on h1 and closing h2. */
html:lang(ar) :is(h1, h2, h3),
html:lang(zh-CN) :is(h1, h2, h3),
html:lang(ja) :is(h1, h2, h3) { letter-spacing: 0; }
html:lang(ar) .letter-copy h1 { line-height: 1.12; }
html:lang(zh-CN) .letter-copy h1,
html:lang(ja) .letter-copy h1 { line-height: 1.08; }
html:lang(ar) .letter-copy h1 .orn-line,
html:lang(zh-CN) .letter-copy h1 .orn-line,
html:lang(ja) .letter-copy h1 .orn-line {
  padding-bottom: .22em;
  margin-bottom: -.22em;
}

/* 14 · Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .orn-marquee-track { animation: none; transform: none; width: 100%; }
  .orn-marquee-track > span:nth-child(n+2) { display: none; }
  .orn-burst { display: none; }
  .orn-js .orn-reveal,
  .orn-js .orn-reveal--clip { opacity: 1; transform: none; clip-path: none; }
  .orn-js .orn-lines .orn-line-inner { transform: none; }
  .orn-js .footer-signature { scale: 1; opacity: 1; }
  .sealed-letter:hover { transform: none; }
  .dedication-photo:hover > img,
  .gift-editorial figure:hover img { scale: 1; }
}

/* Activity belongs to a real pending task, with no simulated percentage. */
.creation-activity {position:fixed;inset:auto 24px 24px auto;z-index:90;width:min(370px,calc(100vw - 32px));padding:24px;background:var(--color-paper-2);color:var(--color-ink);box-shadow:0 12px 42px #25191925;max-height:55vh;overflow:auto;pointer-events:none;}
.creation-activity[hidden] {display:none;}
.creation-activity--inline {position:static;width:100%;max-width:620px;max-height:none;margin:24px auto;box-shadow:none;pointer-events:auto;}
.creation-activity strong {font:30px/1.15 var(--font-display);}
.creation-activity p {font-size:15px;line-height:1.6;margin:12px 0 0;}
.activity-notes {display:flex;gap:5px;height:28px;align-items:center;margin-bottom:18px;}
.activity-notes span {height:24px;width:4px;background:var(--color-accent);transform:scaleY(.3);animation:studio-note 1.2s ease-in-out infinite;}
.activity-notes span:nth-child(2) {animation-delay:.15s}.activity-notes span:nth-child(3) {animation-delay:.3s}.activity-notes span:nth-child(4) {animation-delay:.45s}.activity-notes span:nth-child(5) {animation-delay:.6s}
@keyframes studio-note {50% {transform:scaleY(1);opacity:.55;}}
.backing-tools {margin-block:28px;padding:24px;background:var(--color-paper-2);}
.backing-tools h3,.backing-tools h2 {font:32px/1.15 var(--font-display);margin:0 0 12px;}
.backing-tools p {font-size:15px;line-height:1.6;}
.backing-tools select {display:block;width:100%;font:inherit;min-height:48px;margin-block:16px;padding:12px;color:var(--color-ink);background:var(--color-white);}
.backing-tools[data-pending=true] {border-inline-start:4px solid var(--color-accent);}
.order-field-notes {display:grid;grid-template-columns:1fr 1.4fr;gap:64px;padding-block:100px;}
.order-field-notes h2 {font-size:clamp(38px,4vw,58px);line-height:1.05;margin:0 0 20px;}
.order-field-notes p {font-size:17px;line-height:1.7;max-width:62ch;}
.order-field-notes blockquote {margin:0 0 24px;}
.order-field-notes blockquote p {font:clamp(24px,2.6vw,34px)/1.25 var(--font-display);}
@media(max-width:700px) {.order-field-notes {grid-template-columns:1fr;gap:24px;padding-block:64px;}.creation-activity {inset:auto 16px 16px;padding:18px;}.creation-activity strong {font-size:25px;}.backing-tools {padding:18px;}}
@media(prefers-reduced-motion:reduce) {.activity-notes span {animation:none;transform:scaleY(.65);}}
html.orn-paused .activity-notes span {animation-play-state:paused;}