@font-face {
  font-family: 'Arabella';
  src: url('assets/fonts/arabella/Arabella-Terminal-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --display-font: 'Arabella', cursive;
  --display-width: .9;
  --display-stretch: 1.2;
}

/* Zero tracking preserves the joins. Scale only the text, leaving the
   story containers free to use their existing animation transforms. */
h1, h2, #upload-title, .handwritten, .sticker-title, .footer-top > span {
  font-family: var(--display-font);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  scale: var(--display-width) var(--display-stretch);
  transform-origin: left center;
}
h1 em, h2 em, .sticker-title em {
  font-style: normal;
  font-weight: inherit;
}
h1, h2 { line-height: 1.08; }
.story-copy h1 {
  font-weight: 400;
  font-size: clamp(50px, min(5.9vw, 9.5vh), 104px);
  margin: 30px 0;
}
.story-copy h2, .story-copy[data-story="4"] h2, .story-copy[data-story="5"] h2 {
  font-size: clamp(50px, min(5.4vw, 9.5vh), 96px);
  margin: 30px 0;
}
.how-heading h2 { font-size: clamp(45px, 4.5vw, 80px); line-height: 1.1; }
#upload-title { font-size: clamp(38px, 5vw, 58px); line-height: 1.1; margin: 8px 0; }
.simple-dialog h2 { font-size: 58px; line-height: 1.1; }
.sticker-title { font-size: clamp(44px, 4.2vw, 64px); line-height: .68; margin: 28px 0; }
.sticker-title .action-arrow { scale: calc(1 / var(--display-width)) calc(1 / var(--display-stretch)); }
.mother-wrap .handwritten {
  /* Use the corrected font tables and a consistent handwritten line box. */
  font-family: 'Arabella CTA', cursive;
  line-height: 1.28;
  font-size: 46px;
  opacity: 1;
  /* Keep the photo's lettering steady when the stage ink switches to light. */
  color: var(--ink);
  /* Match the desktop's 2px offset at 46px, scaling with smaller lettering. */
  text-shadow: .04347826em .04347826em 0 #fff;
}
.footer-top > span { font-size: 33px; line-height: 1.2; }

@media (max-width: 900px) {
  .story-copy h1 { font-size: clamp(48px, 6.4vw, 58px); }
  .story-copy h2, .story-copy[data-story="4"] h2, .story-copy[data-story="5"] h2 { font-size: clamp(45px, 6vw, 56px); }
  .sticker-title { font-size: 43px; }
  .footer-top > span { font-size: 28px; }
}
@media (max-width: 600px) {
  .story-copy h1,
  .story-copy h2, .story-copy[data-story="2"] h2, .story-copy[data-story="3"] h2,
  .story-copy[data-story="4"] h2, .story-copy[data-story="5"] h2 {
    --display-stretch: 1;
    font-size: clamp(30px, min(9.4vw, 5.6svh), 48px);
    line-height: 1.08;
    width: calc(100% / var(--display-width));
    max-width: none;
    margin: 8px 0 10px;
  }
  .story-copy .mobile-inline-break { display: none; }
  .story-copy[data-story="1"] h2, .story-copy[data-story="3"] h2, .story-copy[data-story="5"] h2 { font-size: clamp(27px, 8.3vw, 44px); }
  .story-copy[data-story="1"] h2, .story-copy[data-story="5"] h2 { max-width: none; white-space: nowrap; }
  .how-heading h2 { font-size: clamp(35px, 10.2vw, 56px); }
  #upload-title { font-size: clamp(31px, 9.1vw, 46px); text-wrap: balance; }
  #upload-title br { display: none; }
  .simple-dialog h2 { font-size: clamp(35px, 10.6vw, 53px); }
  .mother-wrap .handwritten { font-size: clamp(26px, 8vw, 36px); }
  .footer-top > span { font-size: 28px; }
}
@media (max-width: 600px) and (max-height: 740px) {
  .mother-wrap .handwritten { bottom: 20%; }
}
@media (max-width: 600px) and (max-height: 650px) {
  .story-copy h1, .story-copy[data-story] h2 { margin: 8px 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* This is a static correction, not an animated effect. */
  .sticker-title .action-arrow { scale: calc(1 / var(--display-width)) calc(1 / var(--display-stretch)) !important; }
}