/* Light moves across the ink, leaving letter shapes and line breaks intact. */
:root {
  --film-ink: #f1e9d7;
  --film-edge: #ddba7a;
  --film-light: #fff9e6;
  --film-halo: rgb(236 182 89 / 20%);
}
:root[data-theme="light"] {
  --film-ink: #222c31;
  --film-edge: #705325;
  --film-light: #846029;
  --film-halo: rgb(159 109 30 / 13%);
}
.main :is(.sale-description, .chapter-hero .lead, .sec-title p) {
  text-shadow: 0 1px 12px var(--film-halo);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .main :is(h1,h2).film-title, .main :is(h1,h2).film-title .sale-wordmark {
    color: var(--film-ink);
    background-color: var(--film-ink);
    background-image: linear-gradient(108deg,
      var(--film-ink) 31%, var(--film-edge) 44%, var(--film-light) 50%,
      var(--film-edge) 56%, var(--film-ink) 69%);
    background-size: 265% 100%;
    background-position: 50% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 18px var(--film-halo);
  }
  .main :is(h1,h2).film-title .sale-wordmark {
    --film-ink: #d7af68;
    --film-edge: #eed299;
    --film-light: #fff8db;
  }
  :root[data-theme="light"] .film-title .sale-wordmark {
    --film-ink: #805c24;
    --film-edge: #946c2a;
    --film-light: #79571d;
  }
  @media (prefers-reduced-motion: no-preference) {
    .main .film-lit, .main .film-lit .sale-wordmark {
      animation: title-light-pass 2.6s cubic-bezier(.28,.05,.26,1) both;
    }
    [dir="rtl"] .main .film-lit, [dir="rtl"] .main .film-lit .sale-wordmark {
      animation-direction: reverse;
    }
  }
}
@keyframes title-light-pass {
  from { background-position: 100% 50%; }
  to { background-position: 0% 50%; }
}
@media (forced-colors: active), print {
  .main :is(h1,h2).film-title, .main :is(h1,h2).film-title .sale-wordmark {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
    animation: none;
  }
}
/* Paint Latin glyphs directly, including the wordmark on RTL pages. */
:lang(en) .main :is(h1,h2,h3) {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}
@media screen and (forced-colors: none) {
  html:lang(en) .main :is(h1,h2).film-title,
  .main :is(h1,h2).film-title .sale-wordmark {
    background: none;
    color: var(--film-ink);
    -webkit-text-fill-color: currentColor;
    animation: none;
  }
  .main :is(h1,h2).film-title .sale-wordmark { line-height: 1.16; }
}
@media screen and (forced-colors: none) and (prefers-reduced-motion: no-preference) {
  html:lang(en) .main :is(h1,h2).film-lit,
  .main :is(h1,h2).film-lit .sale-wordmark {
    animation: latin-title-glow 2.6s ease-out both;
  }
}
@keyframes latin-title-glow {
  0%, 100% { text-shadow: 0 0 2px var(--film-halo); }
  45% { text-shadow: 0 0 12px var(--film-edge), 0 0 22px var(--film-halo); }
}


/* Keep the display hierarchy while stepping down the English type scale. */
html:lang(en) .sale-intro h1 { font-size: clamp(2rem, 4vw, 4.1rem); }
.sale-intro h1 .sale-wordmark { font-size: clamp(3.8rem, 7.4vw, 7.2rem); }
html:lang(en) .chapter-hero h1 { font-size: clamp(2rem, 4.5vw, 3.6rem); }
html:lang(en) .sec-title h2 { font-size: clamp(1.55rem, 2.7vw, 2.25rem); }
@media (max-width: 760px) {
  html:lang(en) .sale-intro h1 { font-size: clamp(1.6rem, 5.1vw, 2.5rem); }
  .sale-intro h1 .sale-wordmark { font-size: clamp(2.7rem, 9vw, 4.3rem); }
  html:lang(en) .chapter-hero h1 { font-size: clamp(1.45rem, 4.5vw, 2.25rem); }
}
@media (max-width: 440px) {
  html:lang(en) .sale-intro h1 { font-size: clamp(1.25rem, 5.8vw, 1.58rem); }
}