html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body.roar-page { background: var(--bg-body); color: var(--text-main); font-family: Inter, sans-serif; }
.roar-main { padding-top: 105px; }
a { color: inherit; text-underline-offset: 4px; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.wrap { width: min(1280px, calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: absolute; left: 20px; top: -80px; z-index: 5; background: var(--bg-card); padding: 15px; }
.skip-link:focus { top: 10px; }
.hero { padding-block: 65px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.eyebrow { font-size: 10px; line-height: 1.6; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: var(--accent); }
.kicker { font-size: 22px; font-family: 'Playfair Display', Georgia, serif; margin: 34px 0 12px; }
h1 { font: 600 clamp(48px, 5.8vw, 83px)/1.03 'Playfair Display', Georgia, serif; letter-spacing: -.045em; margin: 0; }
h1 em { color: var(--accent); }
.standfirst { font-size: 17px; line-height: 1.8; max-width: 470px; color: var(--text-dim); margin: 25px 0; }
.byline { display: flex; flex-wrap: wrap; gap: 10px; font-size: 10px; line-height: 1.8; text-transform: uppercase; letter-spacing: .07em; }
.read-link { display: inline-block; margin-top: 28px; font-size: 12px; font-weight: 700; }
figure { margin: 0; }
.hero-photo { padding: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--round-lg); box-shadow: var(--shadow); }
.hero-photo img { width: 100%; height: auto; display: block; border-radius: var(--round-md); }
figcaption { font-size: 10px; line-height: 1.8; color: var(--text-dim); padding-top: 12px; }
.facts { background: var(--bg-card); border-radius: var(--round-lg); padding-inline: 24px; display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--border); padding-block: 23px; gap: 24px; }
.facts span { display: block; color: var(--text-dim); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.facts strong { font-size: 13px; font-weight: 600; }
.reading-layout { display: grid; grid-template-columns: 210px minmax(0, 750px); gap: clamp(30px, 7vw, 110px); padding-block: 70px; }
.contents { align-self: start; position: sticky; top: 115px; }
.contents a { display: block; text-decoration: none; font-size: 12px; padding-block: 13px; border-bottom: 1px solid var(--border); }
.editor-note { font-size: 11px; color: var(--text-dim); line-height: 1.9; margin-top: 28px; }
.prose { min-width: 0; }
.prose section { margin-bottom: 50px; }
h2 { font: 600 clamp(28px, 3.3vw, 40px)/1.22 'Playfair Display', Georgia, serif; letter-spacing: -.03em; margin: 16px 0 24px; }
.prose p { margin: 18px 0; font-size: 16px; line-height: 1.9; }
.prose .eyebrow { font-size: 10px; }
.prose .lead { font-size: 21px; font-family: 'Playfair Display', Georgia, serif; line-height: 1.6; }
.prose a { text-decoration: underline; text-decoration-color: var(--accent); }
.pullquote { border-block: 1px solid var(--accent); padding-block: 28px; margin: 44px 0; color: var(--accent); }
.pullquote span { font-size: 9px; text-transform: uppercase; letter-spacing: .17em; }
.pullquote p { font: 600 italic clamp(26px, 3vw, 36px)/1.4 'Playfair Display', Georgia, serif; margin: 15px 0 0; }
.story-photo { margin: 32px 0; }
.story-photo img { display: block; width: 100%; height: auto; }
.review-card { padding: 24px; margin: 18px 0; border: 1px solid var(--border); background: var(--bg-card); border-radius: var(--round-lg); }
.review-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
h3 { font: 600 22px 'Playfair Display', Georgia, serif; margin: 0; }
.rating { white-space: nowrap; color: var(--accent); font-size: 15px; font-weight: 800; }
.prose .critic { font-size: 10px; color: var(--text-dim); }
.review-card p { font-size: 14px; }
.review-card a { font-size: 12px; font-weight: 600; }
.share-panel { background: linear-gradient(135deg, var(--pink-glow), transparent), var(--bg-card); color: var(--text-main); border: 1px solid var(--border); border-radius: var(--round-lg); padding: clamp(24px, 4vw, 40px); }
.share-panel .eyebrow { color: var(--accent); }
blockquote { margin: 24px 0; border-left: 2px solid var(--accent); padding-left: 20px; font: 600 21px/1.6 'Playfair Display', Georgia, serif; }
.share-actions { display: flex; flex-wrap: wrap; gap: 12px; }
[hidden] { display: none !important; }
.share-actions button { border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--text-main); padding: 13px 17px; cursor: pointer; font: 600 12px Inter, sans-serif; }
.share-actions button:hover { background: var(--accent); color: #fff; }
.share-panel .small, #share-status { font-size: 11px; color: var(--text-dim); }
#share-status:empty { display: none; }
.closing { font-family: 'Playfair Display', Georgia, serif; font-style: italic; }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; border-top: 1px solid var(--text-main); padding-block: 25px; font-size: 11px; color: var(--text-dim); }
@media (max-width: 900px) {
  .wrap { width: calc(100% - 40px); }
  .hero { gap: 28px; }
  .reading-layout { grid-template-columns: 1fr; padding-block: 40px; }
  .contents { position: static; display: flex; flex-wrap: wrap; gap: 12px 24px; }
  .contents .eyebrow, .editor-note { width: 100%; margin: 0; }
  .contents a { padding-block: 8px; }
  .prose { max-width: 750px; margin-inline: auto; }
}
@media (max-width: 620px) {
  .hero { grid-template-columns: 1fr; padding-top: 32px; }
  h1 { font-size: clamp(44px, 11vw, 67px); }
  .kicker { margin-top: 22px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .review-card { padding: 20px; }
  .review-top h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Reuse the website's theme, navigation, glass cards and pink accents. */
.roar-page h1 { font-family: Inter, sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 5.3vw, 74px); }
.roar-page h1 em { font-family: 'Playfair Display', Georgia, serif; text-transform: none; }
.roar-page .eyebrow { letter-spacing: .15em; }
.roar-page .story-photo img { border-radius: var(--round-lg); border: 1px solid var(--border); }
.roar-page .skip-link { z-index: 10001; }
.roar-page .footer { background: transparent; }
.trailer-section { padding: 35px; margin-top: 40px; border: 1px solid var(--border); border-radius: var(--round-lg); background: var(--bg-card); }
.trailer-frame { aspect-ratio: 16 / 9; min-height: 200px; width: 100%; overflow: hidden; border-radius: var(--round-md); background: #000; }
.trailer-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.media-note { color: var(--text-dim); font-size: 12px; line-height: 1.7; margin-top: 15px; }
.watch-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.watch-button { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; padding: 14px 21px; border: 1px solid var(--accent); border-radius: 999px; font-size: 12px; font-weight: 800; text-align: center; }
.watch-button:hover { color: #fff; box-shadow: 0 8px 25px var(--pink-glow); }
.watch-button.secondary { color: var(--text-main); background: var(--glass); border-color: var(--border); }
.character-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 28px 0; }
.character-cards > div { padding: 24px; border: 1px solid var(--border); border-radius: var(--round-lg); background: var(--bg-card); }
.character-cards h3 { margin-top: 12px; }
.prose .character-cards p { font-size: 14px; }
.prose h3 { margin-top: 28px; }
.review-top h3 { margin-top: 0; }
.aneet-quote { padding: 26px; background: var(--bg-card); border-radius: 0 var(--round-lg) var(--round-lg) 0; }
.aneet-quote cite { display: block; font: 400 12px/1.8 Inter, sans-serif; color: var(--text-dim); margin-top: 18px; }
.prose .source-note { font-size: 12px; color: var(--text-dim); }
.social-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0; }
.social-review-grid .review-card { margin: 0; }
.social-review-card { min-width: 0; overflow-wrap: anywhere; }
.social-review-card h4 { margin: 17px 0 0; font-size: 18px; color: var(--text-main); }
.platform-label { display: inline-block; font-size: 10px; line-height: 1.7; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
.prose .social-handle { margin: 8px 0 14px; font-size: 11px; color: var(--text-dim); }
.social-review-card .social-excerpt { font-size: 23px; margin: 20px 0; }
.imdb-label { background: #f5c518; color: #151515; padding: 5px 9px; border-radius: 5px; }
.imdb-review-card .watch-button { text-decoration: none; }
@media (max-width: 620px) { .social-review-grid { grid-template-columns: 1fr; } }
@media (max-width: 1024px) {
  .roar-page .nav-menu.mobile-active { display: flex !important; opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }
}
@media (max-width: 620px) {
  .trailer-section { padding: 18px; }
  .character-cards { grid-template-columns: 1fr; }
  .watch-button { width: 100%; }
  .roar-page h1 { font-size: clamp(35px, 10vw, 60px); }
  .roar-main { padding-top: 90px; }
}