/* Dracula by Bram Stoker — temporary landing page (v3)
   The four approved photographs ARE the environment: each act is one full-width scene,
   and the live HTML type sits inside the scene's own negative space.
   Desktop (≥1100px) is composed in vw so the scene keeps its exact framing at every width;
   mobile is a separate composition (photograph full width, type overlapping its quiet foot). */

@font-face { font-family: "Caslon Antique"; src: url("../fonts/caslon-antique.regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IM Fell Great Primer"; src: url("../fonts/IMFeGPrm29P.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IM Fell Great Primer"; src: url("../fonts/IMFeGPit29P.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IM Fell Great Primer SC"; src: url("../fonts/IMFeGPsc29P.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IM Fell DW Pica SC"; src: url("../fonts/IMFellDWPicaSC-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --cloth-500: #d79c0a;
  --blood-500: #c43a26;
  --ink-900: #201915;
  --sepia-700: #6a5a4c;
  --paper-100: #f3ece0;
  --paper-300: #d7c7a9;
  --gold-500: #c9a961;
  --desk: #0f0c0a;           /* the darkest tone shared by the four desk photographs */

  --font-display: "Caslon Antique", "IM Fell Great Primer", Georgia, serif;
  --font-body: "IM Fell Great Primer", Georgia, serif;
  --font-chapter: "IM Fell Great Primer SC", "IM Fell Great Primer", Georgia, serif;
  --font-meta: "IM Fell DW Pica SC", "IM Fell Great Primer SC", Georgia, serif;

  --shadow-type: 0 1px 2px rgba(0, 0, 0, .92), 0 0 12px rgba(0, 0, 0, .7);
  --shadow-paper: 0 1px 0 rgba(243, 236, 224, .5);
  --shadow-object: 0 2px 3px rgba(0, 0, 0, .6), 0 26px 44px -14px rgba(0, 0, 0, .78);
  --shadow-lifted: 0 4px 6px rgba(0, 0, 0, .55), 0 36px 60px -16px rgba(0, 0, 0, .85);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--desk); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--desk); color: var(--paper-100); font: 400 18px/1.55 var(--font-body); text-shadow: var(--shadow-type); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ================= Shared type ================= */
.kicker { display: flex; align-items: center; gap: 12px; font: 400 15px/1.3 var(--font-meta); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-500); }
.act-no { font: 400 17px/1 var(--font-chapter); letter-spacing: .08em; }
.act-no::after { content: "·"; margin-left: 12px; }
.title { font: 400 clamp(40px, 10.5vw, 76px)/1.02 var(--font-display); color: var(--paper-100); text-wrap: balance; }
.lead { font-size: clamp(19px, 4.8vw, 23px); line-height: 1.45; color: var(--paper-300); max-width: 26em; }
.lead--strong { color: var(--paper-100); font-style: italic; }
.facts { font: 400 clamp(17px, 4.2vw, 20px)/1.4 var(--font-chapter); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-100); }

/* ================= The label CTA — photographed 1897 binding cloth, cover-red rule, real <a> ================= */
.label-cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 62px; padding: 18px 30px;
  background: var(--cloth-500) url("../img/cloth-1897-binding-crop.webp") center / 460px auto;
  color: var(--ink-900); text-decoration: none; text-align: center; text-shadow: var(--shadow-paper);
  font: 400 16px/1.2 var(--font-meta); letter-spacing: .12em; text-transform: uppercase;
  border-radius: 2px; box-shadow: var(--shadow-object);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.label-cta::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--blood-500); pointer-events: none; }
.label-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-lifted); }
.label-cta:active { transform: scale(.97); }
.label-cta .arrow { font-family: var(--font-body); letter-spacing: 0; }
@media (min-width: 370px) { .label-cta { white-space: nowrap; } }

.textlink {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: 400 15px/1.3 var(--font-meta); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-500); text-shadow: var(--shadow-type); text-decoration: none;
}
.textlink { white-space: nowrap; }
.textlink:hover > span { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ================= Scenes — mobile composition (master) ================= */
.scene { position: relative; overflow: hidden; background: var(--desk); }
.scene__photo { display: block; position: relative; }
.scene__photo img {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 var(--fade, 62%), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 var(--fade, 62%), transparent 100%);
}
.scene--hero .scene__photo img { -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); }
.scene__shade { display: none; }
.scene__copy {
  position: relative; z-index: 2;
  margin-top: calc(-1 * var(--overlap, 40vw));
  padding: 0 var(--gutter) 72px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
.scene__caption { display: none; }

/* ---- Act I (mobile): wordmark over the sky, book clear, invitation and action at the foot ---- */
.scene--hero .scene__shade {
  display: block; position: absolute; inset: 0 0 auto 0; height: 62vw; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 9, 8, .72) 0%, rgba(10, 9, 8, .38) 55%, transparent 100%);
}
.hero-mark { position: absolute; z-index: 2; top: 5vw; left: 50%; transform: translateX(-50%); width: min(76vw, 420px); }
.hero-mark img { width: 100%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)) drop-shadow(0 0 18px rgba(0, 0, 0, .45)); }
.scene--hero { --overlap: 7vw; }
.hero-copy { align-items: center; text-align: center; gap: 18px; padding-bottom: 64px; }
.quote { margin: 0; max-width: 22em; }
.quote blockquote { margin: 0; }
.quote p { font: italic 400 clamp(23px, 6.4vw, 34px)/1.24 var(--font-body); color: var(--paper-100); }
.quote figcaption { margin-top: 10px; font: 400 14px/1.4 var(--font-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-500); }
.hero-line { font: 400 clamp(17px, 4.4vw, 21px)/1.4 var(--font-chapter); letter-spacing: .12em; text-transform: uppercase; color: var(--paper-100); }
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; margin-top: 4px; }
/* mobile: the purchase action directly after the invitation, so it sits in the first screen */
.hero-copy .quote { order: 1; } .hero-copy .hero-actions { order: 2; } .hero-copy .hero-line { order: 3; }
.hero-actions .label-cta { width: min(100%, 400px); }

/* ---- Act II (mobile) ---- */
.scene--novel { --fade: 46%; --overlap: 40vw; }
.notice { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; max-width: 26em; }
.notice__dateline { font: italic 400 18px/1.3 var(--font-body); color: var(--gold-500); }
.notice h3 { font: 400 clamp(28px, 7.4vw, 44px)/1.08 var(--font-display); color: var(--paper-100); }
.notice p:last-child { font-size: clamp(18px, 4.6vw, 22px); color: var(--paper-300); }

/* the novel's argument */
.since { font: 400 clamp(30px, 8vw, 46px)/1.05 var(--font-display); color: var(--gold-500); }
.notice { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(201, 169, 97, .5); }
.notice__line { font: italic 400 clamp(20px, 5.2vw, 26px)/1.3 var(--font-body); color: var(--gold-500); }

/* ---- Act III (mobile) ---- */
.reborn { font: 400 clamp(19px, 4.8vw, 24px)/1.3 var(--font-chapter); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-100); }
.rarity { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid rgba(201, 169, 97, .5); border-bottom: 1px solid rgba(201, 169, 97, .5); width: 100%; max-width: 30em; }
.edition--quiet { color: var(--paper-300); font-size: clamp(15px, 3.9vw, 18px); }
.scene--facsimile { --fade: 66%; --overlap: 34vw; }
.edition { font: 400 clamp(18px, 4.6vw, 22px)/1.35 var(--font-chapter); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-100); }
.inventory { font: 400 clamp(28px, 7.4vw, 44px)/1.08 var(--font-display); color: var(--paper-100); }
.buy { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 6px; }
.buy .label-cta { width: 100%; max-width: 440px; }
.microcopy { font: italic 400 16px/1.45 var(--font-body); color: var(--paper-300); }
.disclaimer { font-size: 16px; color: var(--paper-300); max-width: 30em; }
.specs-disclosure { width: 100%; max-width: 30em; border-top: 1px solid rgba(201, 169, 97, .45); }
.specs-disclosure summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 10px; list-style: none; font: 400 14px/1.3 var(--font-meta); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-500); }
.specs-disclosure summary::-webkit-details-marker { display: none; }
.specs-disclosure summary::after { content: "+"; font-family: var(--font-body); font-size: 20px; letter-spacing: 0; }
.specs-disclosure[open] summary::after { content: "–"; }
.specs { margin: 4px 0 8px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.specs dt { font: 400 13px/1.6 var(--font-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-500); padding-top: 1px; }
.specs dd { margin: 0; font-size: 16px; color: var(--paper-300); }

/* ---- Act IV (mobile): Rate Your Dracula — search, then the examination file on paper ---- */
.scene--rate { --fade: 50%; --overlap: 42vw; }
.rate { width: 100%; max-width: 560px; margin-top: 8px; display: flex; flex-direction: column; gap: 18px; }
.rate-search label { display: block; font: italic 400 20px/1.35 var(--font-body); color: var(--paper-100); margin-bottom: 10px; }
.rate-search__row { display: flex; flex-direction: column; gap: 10px; }
.rate-search input {
  width: 100%; min-height: 58px; padding: 12px 16px;
  background: rgba(10, 8, 7, .6); color: var(--paper-100);
  border: 1px solid rgba(243, 236, 224, .55); border-radius: 2px;
  font: italic 400 19px/1.3 var(--font-body);
}
.rate-search input::placeholder { color: #bcae94; opacity: 1; }
.rate-search input:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.rate-go {
  min-height: 58px; padding: 0 24px; cursor: pointer;
  background: var(--paper-100); color: var(--ink-900); border: 0; border-radius: 2px;
  font: 400 16px/1 var(--font-meta); letter-spacing: .14em; text-transform: uppercase; text-shadow: none;
  transition: transform 120ms var(--ease), background-color 120ms var(--ease);
}
.rate-go:hover { background: #fffaf0; }
.rate-go:active { transform: scale(.97); }
.rate-hint { margin-top: 12px; font: italic 400 16px/1.6 var(--font-body); color: var(--paper-300); }
.chip { display: inline; padding: 0; margin: 0 4px 0 0; background: none; border: 0; cursor: pointer; font: inherit; font-style: normal; color: var(--paper-100); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold-500); text-shadow: var(--shadow-type); min-height: 44px; }

/* The examination file: a photographed sheet of paper (brand parchment photograph) */
.rate-result {
  position: relative; color: var(--ink-900);
  background: linear-gradient(rgba(240, 228, 204, .34), rgba(240, 228, 204, .34)), #c9ad83 url("../img/paper-verdict.webp") center / cover;
  padding: 40px 28px 36px; border-radius: 2px; box-shadow: var(--shadow-object);
  display: flex; flex-direction: column; gap: 12px;
}
.rate-result, .rate-result * { text-shadow: var(--shadow-paper); }
.rate-result:focus { outline: none; }
.rate-result:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 4px; }
.r-eyebrow { font: 400 13px/1.4 var(--font-meta); letter-spacing: .16em; text-transform: uppercase; color: #4a3b2f; }
.r-name { font: 400 clamp(28px, 7vw, 40px)/1.08 var(--font-display); color: var(--ink-900); }
.r-headline { font: 400 clamp(17px, 4.4vw, 21px)/1.3 var(--font-chapter); letter-spacing: .08em; text-transform: uppercase; color: var(--blood-500); }
.r-score { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; padding: 10px 0; border-top: 1px solid var(--ink-900); border-bottom: 1px solid var(--ink-900); }
.r-score__num { font: 400 clamp(52px, 13vw, 76px)/1 var(--font-display); color: var(--ink-900); }
.r-score__label { font: 400 14px/1.3 var(--font-meta); letter-spacing: .16em; text-transform: uppercase; color: #3d3128; }
.r-text { font-size: 18px; line-height: 1.5; color: #2b221c; }
.r-sub { margin: 6px 0 0; font: 400 14px/1.3 var(--font-meta); letter-spacing: .16em; text-transform: uppercase; color: #3d3128; }
.r-diffs { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: 18px; line-height: 1.45; color: #2b221c; }
.r-rubric { border-top: 1px solid rgba(32, 25, 21, .4); padding-top: 4px; }
.r-rubric summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 10px; list-style: none; font: 400 14px/1.3 var(--font-meta); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-900); }
.r-rubric summary::-webkit-details-marker { display: none; }
.r-rubric summary::after { content: "+"; font: 400 20px/1 var(--font-body); }
.r-rubric[open] summary::after { content: "–"; }
.r-rubric dl { margin: 4px 0 8px; display: grid; gap: 4px; }
.r-rubric dt { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font: 400 17px/1.3 var(--font-body); color: var(--ink-900); }
.r-pts { font: 400 15px/1.3 var(--font-meta); letter-spacing: .1em; white-space: nowrap; }
.r-rubric dd { margin: 0; font-size: 16px; line-height: 1.45; color: #3d3128; }
.r-note { font: italic 400 15px/1.45 var(--font-body); color: #3d3128; margin-top: 6px; }
.r-verdict { font: italic 400 21px/1.4 var(--font-body); color: var(--ink-900); }
.r-sources ul { margin: 6px 0 0; padding-left: 1.1em; font-size: 15px; line-height: 1.45; color: #3d3128; }
.r-sources a { color: var(--ink-900); text-underline-offset: 3px; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.paper-btn { min-height: 46px; padding: 10px 16px; cursor: pointer; background: transparent; color: var(--ink-900); border: 1px solid var(--ink-900); border-radius: 2px; font: 400 14px/1.2 var(--font-meta); letter-spacing: .12em; text-transform: uppercase; text-align: left; }
.paper-btn:hover { background: rgba(32, 25, 21, .08); }
.paper-btn:focus-visible { outline: 2px solid var(--blood-500); }
.share-status { font: italic 400 16px/1.4 var(--font-body); color: var(--ink-900); }
.share-status:empty { display: none; }
.share-fallback { width: 100%; min-height: 96px; background: rgba(243, 236, 224, .6); color: var(--ink-900); border: 1px solid var(--ink-900); font: 400 15px/1.4 var(--font-body); padding: 10px; }
.after { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 8px; }
.after__line { font: 400 clamp(26px, 6.6vw, 38px)/1.1 var(--font-display); color: var(--paper-100); }

/* ================= Footer ================= */
.site-footer { background: var(--desk); padding: 40px var(--gutter) 48px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; border-top: 1px solid rgba(201, 169, 97, .2); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 22px; justify-content: center; }
.site-footer p { font-size: 15px; color: var(--paper-300); max-width: 46em; }

@media (max-width: 359px) {
  :root { --gutter: 16px; }
  .label-cta { padding: 16px 16px; font-size: 14.5px; letter-spacing: .08em; }
  .slip-btn { font-size: 14px; letter-spacing: .1em; }
}

/* ================= Desktop scenes (≥1100px): the photograph fills the full width ================= */
@media (min-width: 1100px) {
  body { font-size: clamp(19px, 1.3vw, 24px); }
  .scene { min-height: var(--h); }
  .scene__photo { position: absolute; left: 0; right: 0; bottom: 0; top: calc(-1 * var(--crop, 0vw)); min-height: 133.34vw; z-index: 0; }
  /* if the content makes a scene taller than its photograph (an opened examination file), the photograph covers it, anchored at the top */
  .scene__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; -webkit-mask-image: none; mask-image: none; }
  /* soft joins between scenes: the desks meet in their own darkness */
  .scene::before, .scene::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
  .scene::before { top: 0; height: 3vw; background: linear-gradient(to bottom, var(--desk), transparent); }
  .scene::after { bottom: 0; height: 6vw; background: linear-gradient(to top, var(--desk), transparent); }
  .scene--hero::before { display: none; }
  .scene__shade { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--shade, none); }
  .scene__copy {
    margin: 0 0 0 var(--x); width: var(--w); padding: var(--y) 0 7vw;
    gap: 1.5vw;
  }
  .kicker { font-size: clamp(14px, 1vw, 19px); }
  .act-no { font-size: clamp(16px, 1.15vw, 22px); }
  .title { font-size: clamp(44px, 4vw, 84px); }
  .lead { font-size: clamp(19px, 1.45vw, 28px); }
  .facts { font-size: clamp(17px, 1.25vw, 24px); }
  .label-cta { font-size: clamp(15px, 1.08vw, 20px); min-height: clamp(60px, 4.3vw, 82px); padding: 0 clamp(26px, 2.2vw, 44px); }

  /* ---- Act I: Whitby across the whole viewport; the invitation and the action in the sky to the right ---- */
  .scene--hero { --h: 88vw; --crop: 25vw; --x: 61vw; --w: 35vw; --y: 20.5vw;
    --shade: linear-gradient(to left, rgba(9, 8, 7, .82) 0%, rgba(9, 8, 7, .64) 28%, rgba(9, 8, 7, .2) 46%, transparent 58%),
             linear-gradient(to bottom, rgba(9, 8, 7, .35), transparent 30%); }
  .scene--hero .scene__shade { height: auto; inset: 0; }
  .hero-mark { top: 4.5vw; left: 62vw; transform: none; width: 33vw; max-width: none; }
  .hero-copy { align-items: center; text-align: center; gap: 1.2vw; }
  .quote p { font-size: clamp(26px, 2.15vw, 42px); line-height: 1.22; }
  .quote figcaption { font-size: clamp(13px, .9vw, 17px); letter-spacing: .1em; margin-top: .7vw; }
  .hero-line { font-size: clamp(17px, 1.25vw, 24px); }
  .hero-actions { gap: .5vw; margin-top: .4vw; }
  .hero-copy .hero-line { order: 2; } .hero-copy .hero-actions { order: 3; }
  .hero-actions .label-cta { width: auto; }

  /* ---- Act II: the typewriter enters from the top left; the argument on the empty desk ---- */
  .scene--novel { --h: 75vw; --crop: 0vw; --x: 60vw; --w: 34vw; --y: 9vw;
    --shade: linear-gradient(to left, rgba(9, 8, 7, .45) 0%, rgba(9, 8, 7, .2) 34%, transparent 46%); }
  .scene--novel .title { font-size: clamp(48px, 4.4vw, 92px); }
  .since { font-size: clamp(38px, 3.5vw, 74px); }
  .notice { margin-top: 1.8vw; padding-top: 1.8vw; gap: .5vw; }
  .notice h3 { font-size: clamp(28px, 2.3vw, 48px); }
  .notice__line { font-size: clamp(20px, 1.6vw, 32px); }

  /* ---- Act III: the book dominates; the sale stands on the dark desk at its right ---- */
  .scene--facsimile { --h: 75vw; --crop: 17vw; --x: 70.5vw; --w: 26vw; --y: 7vw;
    --shade: linear-gradient(to left, rgba(9, 8, 7, .55) 0%, rgba(9, 8, 7, .22) 24%, transparent 31%); }
  .scene--facsimile .scene__copy { gap: 1.2vw; }
  .scene--facsimile .title { font-size: clamp(40px, 3.3vw, 70px); }
  .reborn { font-size: clamp(17px, 1.3vw, 26px); }
  .scene--facsimile .lead { font-size: clamp(17px, 1.2vw, 24px); }
  .edition { font-size: clamp(16px, 1.15vw, 22px); }
  .edition--quiet { font-size: clamp(15px, 1.05vw, 20px); }
  .inventory { font-size: clamp(28px, 2.3vw, 48px); }
  .rarity { padding: 1vw 0; }
  .scene--facsimile .label-cta { letter-spacing: .1em; width: 100%; }
  .microcopy { font-size: clamp(16px, 1.1vw, 21px); }

  /* ---- Act IV: the examination on the desk beside the magnified portraits ---- */
  .scene--rate { --h: 80vw; --crop: 14vw; --x: 61vw; --w: 34vw; --y: 6.5vw;
    --shade: linear-gradient(to left, rgba(9, 8, 7, .55) 0%, rgba(9, 8, 7, .25) 32%, transparent 42%); }
  .rate { max-width: none; gap: 1.3vw; }
  .rate-search label { font-size: clamp(19px, 1.4vw, 27px); }
  .rate-search__row { flex-direction: row; }
  .rate-search input { flex: 1; min-width: 0; font-size: clamp(17px, 1.25vw, 24px); min-height: clamp(58px, 4.2vw, 80px); }
  .rate-go { min-height: clamp(58px, 4.2vw, 80px); font-size: clamp(14px, 1vw, 19px); white-space: nowrap; }
  .rate-hint { font-size: clamp(16px, 1.15vw, 22px); }
  .rate-result { padding: 3vw 2.8vw 2.6vw; }
}

/* ================= Transitions: a restrained drift of each photograph within its scene (scroll-driven, CSS only) ================= */
@supports (animation-timeline: view()) {
  @media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
    .scene__photo { animation: scene-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .scene--hero .scene__photo { animation-range: exit 0% exit 100%; animation-name: hero-drift; }
    @keyframes scene-drift { from { transform: translateY(1.4vw); } to { transform: translateY(-1.4vw); } }
    @keyframes hero-drift { from { transform: translateY(0); } to { transform: translateY(5vw); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .label-cta::after { border-color: CanvasText; }
  .slip-btn[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* Tablet: keep the purchase action in the first screen */
@media (min-width: 600px) and (max-width: 1099px) {
  .scene--hero .scene__photo img { height: min(133.33vw, 80svh); object-fit: cover; object-position: 50% 80%; }
}

/* Final art-direction correction: easier reading and short, sourced comparison */
.lead strong { color: var(--paper-100); font-weight: 400; font-family: var(--font-chapter); letter-spacing: .035em; }
.lead em { color: var(--paper-100); font-style: italic; }
.ryd-explore { border-top: 1px solid rgba(201,169,97,.52); padding-top: 8px; margin-top: 6px; }
.ryd-explore summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; list-style: none; color: var(--gold-500); font: 400 15px/1.5 var(--font-meta); letter-spacing: .05em; }
.ryd-explore summary::-webkit-details-marker { display: none; }
.ryd-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 10px 0 16px; }
.archive-choice { min-height: 46px; cursor: pointer; padding: 8px 10px; text-align: left; font: 400 15px/1.2 var(--font-body); color: var(--paper-100); background: rgba(30,23,19,.38); border: 1px solid rgba(201,169,97,.55); border-radius: 1px; }
.archive-choice:hover,.archive-choice:focus-visible { background: rgba(201,169,97,.14); }
.comparison-piece { padding: 9px 0 12px; border-bottom: 1px solid rgba(32,25,21,.32); }
.comparison-piece .r-sub { margin-bottom: 6px; }
.r-source-link { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; font-size: 16px; }
.scene--hero .quote { max-width: 26em; }
@media (min-width: 1100px) {
 .scene--hero .quote p { font-size: clamp(31px, 2.55vw, 48px); line-height: 1.25; }
 .scene--hero .hero-line { font-size: clamp(20px, 1.5vw, 30px); }
 .scene--hero .scene__copy { gap: 1.1vw; }
 .scene--novel .lead { font-size: clamp(21px,1.65vw,31px); }
 .archive-choice { font-size: clamp(14px,1.08vw,19px); }
}
@media (max-width: 370px) {.ryd-choices { grid-template-columns: 1fr; }}

/* ===== ART DIRECTION R2: TEXT LIVES INSIDE THE PHOTOGRAPH, ALL VIEWPORTS =====
   Same approved photographic files, not invented images. No color-panel under type. */
.scene { isolation:isolate; }
.scene__photo { pointer-events:none; }
.scene__shade { pointer-events:none; }
/* A photographic desktop scene without solid-colored separators. */
@media (min-width: 1100px) {
  .scene::before,.scene::after { display:none; }
  .scene__copy { z-index:3; }
  .scene--novel { --h: 77vw; }
  .scene--facsimile { --h: 79vw; }
  .scene--rate { --h: 80vw; }
  .rate-result { max-width:100%; }
}
/* Mobile / tablet: the approved photograph is BOTH the main photographed object and the
   real photographed table underneath copy. The upper original image blends into a crop
   of its own actual photographed tabletop; no plain black/brown CSS panels. */
@media (max-width: 1099px) {
  .scene { background: transparent; min-height:0; }
  .scene__photo { display:block; position:absolute; inset:0; width:100%; height:100%; z-index:0;
     background-position: right 55%; background-size:cover; background-repeat:no-repeat; }
  .scene--hero .scene__photo { background-image:url("../img/01-invitation-whitby-1086.webp"); background-position: 68% 50%; }
  .scene--novel .scene__photo { background-image:url("../img/02-novel-typewriter-1086.webp"); background-position:right 50%; }
  .scene--facsimile .scene__photo { background-image:url("../img/03-facsimile-first-edition-1086.webp"); background-position:right 50%; }
  .scene--rate .scene__photo { background-image:url("../img/04-rate-your-dracula-1086.webp"); background-position:right 50%; }
  .scene__photo img { width:100%; height:auto; min-height:0; object-fit:contain; object-position:top center;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 77%, transparent 100%) !important;
            mask-image: linear-gradient(to bottom, #000 0%, #000 77%, transparent 100%) !important; }
  .scene__copy { margin:0; position:relative; width:100%; z-index:3;
    padding:0 clamp(20px,5.5vw,52px) 76px; gap:clamp(12px,3.3vw,22px); }
  .scene__shade { display:none; }
  .hero-mark { top:clamp(16px,4.8vw,42px); width:min(76vw,440px); }
  .scene--hero { min-height:clamp(690px,180vw,870px); }
  .scene--hero .scene__photo img { -webkit-mask-image:linear-gradient(to bottom,#000 85%,transparent 100%) !important;mask-image:linear-gradient(to bottom,#000 85%,transparent 100%) !important; }
  .scene--hero .scene__copy { padding-top:clamp(155px,41vw,245px); padding-bottom:clamp(250px,67vw,410px); gap:14px; }
  .hero-copy .quote { order:1; max-width:25em; }
  .hero-copy .hero-line { order:2; font-size:clamp(17px,4.2vw,25px); }
  .hero-copy .hero-actions { order:3; }
  .quote p { font-size:clamp(23px,5.8vw,37px); }
  .hero-mark img { filter: drop-shadow(0 2px 8px #000); }
  .scene--novel .scene__copy { padding-top:clamp(440px,113vw,650px); }
  .scene--facsimile .scene__copy { padding-top:clamp(460px,121vw,670px); }
  .scene--rate .scene__copy { padding-top:clamp(430px,109vw,610px); }
  .scene--novel .title,.scene--facsimile .title,.scene--rate .title { font-size:clamp(38px,8.7vw,65px); }
  .scene--novel .lead, .scene--facsimile .lead,.scene--rate .lead { font-size:clamp(19px,4.5vw,27px); }
  /* Use the photograph's real grain rather than artificially solid-color containers. */
  .rate-result { max-width:100%; }
  .site-footer { background-image:url("../img/04-rate-your-dracula-1086.webp"); background-size:cover; background-position:right bottom; border-top:1px solid rgba(201,169,97,.3); }
}
/* Even a revealed verdict sits over the scene photograph, not on a paper-colored panel. */
.rate-result { background:none !important; box-shadow:none; border:none; border-top:1px solid rgba(201,169,97,.5); border-bottom:1px solid rgba(201,169,97,.5);
    color:var(--paper-100); padding:25px 0; }
.rate-result,.rate-result * { text-shadow: var(--shadow-type); }
.r-eyebrow,.r-sub,.r-note,.r-score__label,.r-pts,.r-rubric dt,.r-rubric dd { color:var(--paper-300); }
.r-name,.r-text,.r-diffs,.r-verdict,.r-rubric summary,.r-score__num,.r-source-link,.r-sources a,.share-status { color:var(--paper-100); }
.r-headline { color:var(--gold-500); }
.r-score,.comparison-piece { border-color:rgba(201,169,97,.48); }
.r-rubric { border-color:rgba(201,169,97,.42); }
.paper-btn,.archive-choice { color:var(--paper-100); border:1px solid var(--gold-500); background:transparent; text-shadow:var(--shadow-type); }
.paper-btn:hover,.archive-choice:hover { background:rgba(201,169,97,.12); }
.share-fallback { color:var(--paper-100); background:none; border-color:var(--gold-500); }
@media (min-width:1100px) { .site-footer { background-image:url("../img/04-rate-your-dracula-1086.webp");background-size:cover;background-position:right bottom; } }
/* Keep the closing credits on actual photographed tabletop, never a paper-colored strip. */
.site-footer { background-image:url('../img/04-rate-your-dracula-1086.webp') !important; background-size:230% auto !important; background-position:100% 40% !important; background-repeat:no-repeat !important; }
/* The tiny labels remain secondary, but never illegible on phone screens. */
@media(max-width:599px) { .quote figcaption {font-size:clamp(13px,3.2vw,15px)}; .kicker {font-size:clamp(13px,3.3vw,16px)}; }


/* ===== R3 LEGIBILITY TUNING ===== */
:root {
  --shadow-type: 0 2px 3px rgba(0,0,0,.94), 0 0 18px rgba(0,0,0,.78), 0 0 34px rgba(0,0,0,.46);
}
body { font-size: 19px; line-height: 1.62; }
.kicker { font-size: clamp(15px, 3.8vw, 17px); letter-spacing: .17em; }
.act-no { font-size: clamp(17px, 4vw, 19px); }
.title { font-size: clamp(44px, 10.8vw, 84px); line-height: 1.02; }
.lead { font-size: clamp(20px, 4.9vw, 25px); line-height: 1.5; max-width: 24em; }
.textlink { font-size: 16px; }
.label-cta { font-size: 17px; min-height: 66px; padding: 18px 32px; }
.quote figcaption { font-size: clamp(14px, 3.2vw, 16px); letter-spacing: .13em; }

.hero-line { font-size: clamp(18px, 4.5vw, 23px); line-height: 1.38; max-width: 18em; }
.hero-copy { gap: 20px; }
.hero-actions { gap: 10px; }
.quote p { font-size: clamp(25px, 6.2vw, 38px); line-height: 1.22; }
.hero-mark { width: min(82vw, 460px); }
.scene--hero .scene__copy { padding-top: clamp(160px, 42vw, 250px); }

.scene--novel .title, .scene--facsimile .title, .scene--rate .title { font-size: clamp(42px, 9vw, 70px); }
.since { font-size: clamp(34px, 8.1vw, 50px); }
.notice h3 { font-size: clamp(32px, 7vw, 48px); }
.notice__line { font-size: clamp(22px, 5vw, 28px); }
.reborn { font-size: clamp(20px, 4.8vw, 25px); line-height: 1.34; }
.edition { font-size: clamp(19px, 4.6vw, 23px); }
.edition--quiet { font-size: clamp(16px, 4vw, 19px); }
.inventory { font-size: clamp(32px, 7.6vw, 46px); }
.microcopy, .disclaimer, .rate-hint, .r-text, .r-diffs { font-size: clamp(17px, 4.1vw, 20px); }
.rate-search label { font-size: clamp(22px, 5vw, 28px); }
.rate-search input { font-size: clamp(19px, 4.5vw, 22px); min-height: 60px; }
.rate-go { min-height: 60px; font-size: 16px; }
.r-name { font-size: clamp(31px, 7.6vw, 42px); }
.after__line { font-size: clamp(28px, 6.9vw, 40px); }

@media (max-width: 1099px) {
  .scene__copy { padding-left: clamp(22px, 6vw, 54px); padding-right: clamp(22px, 6vw, 54px); padding-bottom: 84px; }
  .scene--novel .scene__copy { padding-top: clamp(430px, 111vw, 620px); }
  .scene--facsimile .scene__copy { padding-top: clamp(448px, 118vw, 660px); }
  .scene--rate .scene__copy { padding-top: clamp(418px, 106vw, 595px); }
  .buy .label-cta, .hero-actions .label-cta { width: min(100%, 460px); }
}

@media (min-width: 1100px) {
  body { font-size: clamp(20px, 1.38vw, 26px); }
  .kicker { font-size: clamp(16px, 1.08vw, 20px); }
  .act-no { font-size: clamp(18px, 1.18vw, 23px); }
  .title { font-size: clamp(50px, 4.35vw, 92px); }
  .lead { font-size: clamp(21px, 1.55vw, 30px); line-height: 1.54; }
  .label-cta { font-size: clamp(16px, 1.12vw, 21px); min-height: clamp(66px, 4.5vw, 86px); padding: 0 clamp(30px, 2.3vw, 46px); }
  .textlink { font-size: clamp(15px, 1.02vw, 18px); }

  .scene--hero { --x: 57.5vw; --w: 38vw; --y: 18.6vw; }
  .hero-mark { top: 4vw; left: 58vw; width: 37vw; }
  .scene--hero .scene__copy { gap: 1.3vw; }
  .scene--hero .quote p { font-size: clamp(34px, 2.7vw, 52px); line-height: 1.2; }
  .scene--hero .quote figcaption { font-size: clamp(14px, .94vw, 18px); }
  .scene--hero .hero-line { font-size: clamp(22px, 1.65vw, 32px); line-height: 1.35; }
  .scene--hero .label-cta { min-width: 22vw; }

  .scene--novel { --x: 57.5vw; --w: 37vw; --y: 8vw; }
  .scene--novel .title { font-size: clamp(54px, 4.7vw, 100px); }
  .scene--novel .since { font-size: clamp(42px, 3.85vw, 78px); }
  .scene--novel .lead { font-size: clamp(23px, 1.7vw, 32px); }
  .scene--novel .notice { margin-top: 2vw; padding-top: 1.8vw; }
  .scene--novel .notice h3 { font-size: clamp(36px, 2.65vw, 54px); }
  .scene--novel .notice__line { font-size: clamp(24px, 1.72vw, 34px); }

  .scene--facsimile { --x: 68vw; --w: 28vw; --y: 6.2vw; }
  .scene--facsimile .title { font-size: clamp(44px, 3.55vw, 76px); }
  .scene--facsimile .reborn { font-size: clamp(18px, 1.32vw, 26px); }
  .scene--facsimile .lead { font-size: clamp(19px, 1.33vw, 25px); }
  .scene--facsimile .edition { font-size: clamp(18px, 1.25vw, 24px); }
  .scene--facsimile .edition--quiet { font-size: clamp(16px, 1.08vw, 20px); }
  .scene--facsimile .inventory { font-size: clamp(34px, 2.55vw, 52px); }
  .scene--facsimile .microcopy { font-size: clamp(16px, 1.1vw, 20px); }

  .scene--rate { --x: 57.5vw; --w: 37vw; --y: 5.6vw; }
  .scene--rate .title { font-size: clamp(52px, 4.2vw, 90px); }
  .scene--rate .lead { font-size: clamp(22px, 1.58vw, 29px); }
  .rate-search label { font-size: clamp(21px, 1.52vw, 28px); }
  .rate-search input { font-size: clamp(19px, 1.32vw, 23px); min-height: clamp(64px, 4.3vw, 82px); }
  .rate-go { min-height: clamp(64px, 4.3vw, 82px); font-size: clamp(15px, 1.02vw, 19px); }
  .rate-hint { font-size: clamp(17px, 1.15vw, 22px); }
  .r-name { font-size: clamp(34px, 2.45vw, 50px); }
  .r-score__num { font-size: clamp(58px, 4vw, 86px); }
  .r-text, .r-diffs { font-size: clamp(19px, 1.25vw, 22px); }
  .archive-choice { font-size: clamp(15px, 1.04vw, 19px); }
}

/* ===== R4 · USER REFERENCE: PHOTO AND EDITORIAL TYPE AS ONE COMPOSITION =====
   Type lives in authentic photographic negative space: NEVER on top of an object.
   Independent responsive art direction; no background panels or invented textures. */
@media (min-width:1100px) {
  /* Preserve the complete red wordmark's clear perimeter. */
  .scene--hero { --y: 23vw; }
  .scene--hero .scene__copy { gap: 1.12vw; }
  .scene--hero .quote { max-width: 30em; }
  .scene--hero .quote p { font-size: clamp(31px,2.42vw,46px); line-height: 1.18; }
  .scene--hero .hero-line { font-size: clamp(21px,1.47vw,28px); }
  .hero-actions { margin-top: 0; }
  /* Product image is physical artwork; typography must not intrude across its right edge. */
  .scene--facsimile { --x: 74vw; --w: 23vw; --y: 7.2vw; }
  .scene--facsimile .scene__copy { gap: 1.0vw; }
  .scene--facsimile .title { font-size: clamp(40px,3.03vw,63px); line-height: 1.03; }
  .scene--facsimile .lead { font-size: clamp(18px,1.27vw,24px); line-height: 1.4; }
  .scene--facsimile .edition { font-size: clamp(17px,1.19vw,23px); line-height: 1.34; }
  .scene--facsimile .inventory { font-size: clamp(32px,2.3vw,47px); }
  .scene--facsimile .label-cta { font-size: clamp(15px,1.04vw,18px); padding: 0 12px; letter-spacing:.035em; }
  /* Magnifying-glass object and editorial response have separate but adjacent space. */
  .scene--rate { --x: 60.5vw; --w: 35vw; }
  .scene--rate .scene__copy { gap: 1.0vw; }
  .scene--rate .rate-search input { font-size:clamp(18px,1.2vw,23px); }
  .scene--rate .rate-go { font-size:clamp(14px,.95vw,19px); padding-left:15px; padding-right:15px; }
}
@media (min-width:1100px) and (max-width:1250px) {
 .scene--facsimile { --x: 73.5vw; --w:23.5vw; }
 .scene--facsimile .label-cta { white-space:normal; min-height:66px; }
}
@media (max-width:1099px) {
  /* Photograph remains underneath ALL actual text; article starts below the main photographed object. */
  .hero-mark { width:min(78vw,440px); }
  .scene--hero .scene__copy { padding-top:clamp(174px,45vw,258px); }
  .hero-copy .quote { max-width: 19em; }
  .scene--novel .lead, .scene--facsimile .lead, .scene--rate .lead { max-width: 26ch; }
  .scene--novel .title, .scene--facsimile .title, .scene--rate .title { max-width: 12ch; text-wrap:balance; }
  .scene--facsimile .buy .label-cta { white-space:normal; padding:16px 20px; }
}
@media (max-width:390px) {
  .scene--hero .scene__copy { padding-top:clamp(178px,48vw,205px); }
  .scene--hero .quote p { font-size:clamp(24px,6.15vw,28px); }
  .hero-line { font-size:clamp(18px,4.5vw,20px); }
  .scene--facsimile .title { font-size:clamp(42px,11vw,48px); }
  .scene--facsimile .inventory { font-size:clamp(31px,8vw,39px); }
}

/* R4b — optical clearspace in hero and physical photographic continuation under mobile CTA. */
@media(min-width:1100px){
  .scene--hero .scene__copy { padding-top:23vw; }
  .scene--hero .quote { max-width:30em; }
  .scene--hero .quote p { font-size:clamp(30px,2.35vw,44px); }
}
@media(max-width:599px){
  .scene--hero { min-height:0; }
  .scene--hero .scene__photo {background-image:url('../img/hero-ground-photo-crop.webp');background-size:cover;background-position:center bottom;}
  .scene--hero .scene__photo img {width:100%; height:clamp(640px,183vw,740px);object-fit:cover;object-position:50% center;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 85%,transparent 100%) !important;
            mask-image:linear-gradient(to bottom,#000 0%,#000 85%,transparent 100%) !important;}
  .scene--hero .scene__copy {padding-top:clamp(170px,43vw,190px);padding-bottom:80px;gap:16px;}
  .scene--hero .hero-line {margin-top:clamp(455px,119vw,520px);}
  .scene--hero .quote p {font-size:clamp(23px,6vw,28px);}
}

/* ===== R5 — PHOTO-ONLY PARALLAX & SCENE-TO-SCENE DISSOLVE =====
   Original approved images and fixed accessible HTML text remain unchanged.
   No flat color strips, panels, fake papers or parallax on independently photographed objects.
   The departing photographic scene remains faintly visible behind the entering photograph. */
.scene { background: transparent; }
.scene + .scene { margin-top: -64px; }
.scene + .scene .scene__photo {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, #000 64px, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0px, #000 64px, #000 100%);
}
/* Overscan the photo so a gentle translation never reveals blank space at its edges. */
@media (min-width: 1100px) {
  .scene__photo { top: calc(-1 * var(--crop, 0vw) - 50px); bottom: -50px; }
}
@media (max-width: 1099px) {
  .scene__photo { top: -26px; bottom: -26px; height: calc(100% + 52px); }
}
@media (prefers-reduced-motion: no-preference) {
  /* An actual animation is handled by the tiny scroll-linked helper for Safari and Chrome parity.
     The document remains fully useful without JavaScript. */
  .dracula-parallax .scene__photo {
    animation: none !important;
    transform: translate3d(0,var(--photo-drift,0px),0);
    will-change: transform;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scene__photo { animation: none !important; transform: none !important; }
  .scene + .scene { margin-top: 0; }
  .scene + .scene .scene__photo { -webkit-mask-image: none; mask-image: none; }
}


/* ===== R6 — PARALLAX DIVIDERS BETWEEN SECTIONS =====
   Three photographic transition bands bridge the four acts.
   They use only the approved existing scene images, with no flat panels or artificial textures. */
.section-divider {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  margin-top: -72px;
  margin-bottom: -72px;
  z-index: 2;
}
.section-divider__photo {
  position: absolute;
  inset: -28px 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  transform: translate3d(0,var(--photo-drift,0px),0) scale(1.03);
  will-change: transform;
}
.section-divider::before,
.section-divider::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 2;
}
.section-divider::before {
  top: 0;
  height: 55%;
  background: linear-gradient(to bottom, rgba(10,8,7,0.96) 0%, rgba(10,8,7,0.58) 35%, rgba(10,8,7,0.0) 100%);
}
.section-divider::after {
  bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(10,8,7,0.96) 0%, rgba(10,8,7,0.58) 35%, rgba(10,8,7,0.0) 100%);
}
.section-divider--archive .section-divider__photo {
  background-image:
    linear-gradient(to right, rgba(8,7,7,0.28), rgba(8,7,7,0.08)),
    url('../img/02-novel-typewriter-1086.webp');
  background-position: 38% 22%;
}
.section-divider--edition .section-divider__photo {
  background-image:
    linear-gradient(to right, rgba(8,7,7,0.22), rgba(8,7,7,0.08)),
    url('../img/03-facsimile-first-edition-1086.webp');
  background-position: 50% 24%;
}
.section-divider--examination .section-divider__photo {
  background-image:
    linear-gradient(to right, rgba(8,7,7,0.18), rgba(8,7,7,0.04)),
    url('../img/04-rate-your-dracula-1086.webp');
  background-position: 40% 22%;
}
@media (min-width: 1100px) {
  .section-divider { height: clamp(150px, 16vw, 260px); margin-top: -92px; margin-bottom: -92px; }
  .section-divider__photo { inset: -52px 0; }
  .section-divider--archive .section-divider__photo { background-position: 38% 16%; }
  .section-divider--edition .section-divider__photo { background-position: 50% 14%; }
  .section-divider--examination .section-divider__photo { background-position: 36% 14%; }
}
@media (max-width: 1099px) {
  .section-divider { height: clamp(96px, 22vw, 180px); margin-top: -54px; margin-bottom: -54px; }
  .section-divider__photo { inset: -24px 0; }
}
@media (max-width: 599px) {
  .section-divider { height: clamp(92px, 28vw, 146px); margin-top: -42px; margin-bottom: -42px; }
  .section-divider--archive .section-divider__photo { background-position: 30% 16%; }
  .section-divider--edition .section-divider__photo { background-position: 52% 18%; }
  .section-divider--examination .section-divider__photo { background-position: 34% 18%; }
}
@media (prefers-reduced-motion: reduce) {
  .section-divider { margin-top: 0; margin-bottom: 0; }
  .section-divider__photo { transform: none !important; }
}

/* R6.1 safety: visual dividers may overlap scene CTA bounds but never intercept clicks. */
.section-divider, .section-divider__photo { pointer-events: none; }

/* SEO copy remains visible; reproduces the existing typographic vocabulary. */
.hero-product { color: var(--paper-300); font: 400 clamp(14px, 3.7vw, 18px)/1.4 var(--font-meta); letter-spacing: .06em; max-width: 37em; text-align: center; }
@media(max-width:1099px){ .hero-copy .hero-product { order:4; } }
@media(min-width:1100px){ .hero-product{ text-align:left; } }