/* Rashel's cinematic opening. The unenhanced document is a complete reading flow. */
.has-cinematic { --story-ink: #121110; --story-paper: #f6f2e8; --story-height: 100vh; }
@supports (height: 100svh) { .has-cinematic { --story-height: 100svh; } }
.cinematic { position: relative; background: var(--story-ink); isolation: isolate; }
.story-stage { position: relative; }
.story-opening { position: relative; min-height: var(--story-height); overflow: hidden; overflow: clip; }
.story-intro {
  position: absolute; z-index: 4; right: max(6vw, calc((100vw - 1240px) / 2));
  top: 50%; width: 47%; max-width: 640px; transform: translateY(-45%);
}
.story-intro h1 { margin: 0; font-size: clamp(46px, 5.35vw, 82px); font-weight: 650; font-stretch: 85%; line-height: 1.14; letter-spacing: -.045em; }
.story-intro h1 span { display: block; }
.story-intro h1 span.gold-text { color: transparent; width: fit-content; padding-bottom: .06em; }
@media (max-width: 900px) { .story-intro h1 span.gold-text { margin-inline: auto; } }
.cinematic.is-flowing > .story-intro h1 span.gold-text { margin-inline: auto; }
.story-intro__text { max-width: 38ch; margin: 24px 0 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.85; color: #bdb6a9; }
.story-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.story-actions .btn { font-size: 15px; --pad: 17px 25px; }
.story-halo { position: absolute; pointer-events: none; width: min(56vw, 860px); aspect-ratio: 1; left: 0; top: 50%; transform: translateY(-48%); border-radius: 50%; background: radial-gradient(ellipse at center, #b2955530 0%, #80663314 35%, transparent 66%); }
.story-halo::after { content: ''; position: absolute; inset: 18%; border: 1px solid #b3965030; border-radius: 50%; }
.story-camera { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.story-book {
  position: absolute; left: 27%; top: 51%; width: clamp(250px, 25vw, 365px);
  aspect-ratio: 900 / 1272; transform: translate(-50%, -50%) rotate(-5deg);
  transform-style: preserve-3d; perspective: 1800px; z-index: 2;
}
.story-book::before { content: ''; position: absolute; inset: 3px -3px -6px -4px; border-radius: 2px 5px 5px 2px; background: repeating-linear-gradient(0deg, #c6bca8 0 1px, #f5eee0 1px 3px); box-shadow: -20px 35px 70px #0009, 0 0 0 1px #3d372b; }
.story-sheet { position: absolute; inset: 0; overflow: hidden; background: var(--story-paper); color: #29241a; border-radius: 2px; box-shadow: inset -12px 0 16px -15px #332919; }
.story-sheet::before { content: ''; position: absolute; inset: 4.5%; border: 1px solid #b29a64; pointer-events: none; }
.story-sheet__brand { margin: 11% 0 0; text-align: center; color: #8b723d; font-size: clamp(8px, .8vw, 12px); letter-spacing: .25em; }
.story-sheet__title { margin: 9% 10% 0; font-size: clamp(16px, 2vw, 27px); font-weight: 700; line-height: 1.25; }
.story-sheet__intro { margin: 4% 10%; font-size: clamp(8px, .85vw, 12px); color: #665e4d; }
.story-portal { position: absolute; top: 42%; left: 9%; right: 9%; aspect-ratio: 1672 / 941; overflow: hidden; }
.story-portal img { width: 100%; height: 100%; object-fit: cover; }
.story-sheet__foot { position: absolute; bottom: 7%; left: 10%; right: 10%; display: flex; justify-content: space-between; font-size: clamp(7px, .65vw, 10px); color: #85785d; }
.story-cover { position: absolute; inset: 0; transform-origin: 100% 50%; transform-style: preserve-3d; }
.story-cover__front, .story-cover__back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 2px; overflow: hidden; }
.story-cover__front { background: #181713; transform: translateZ(1px); box-shadow: inset 0 0 0 1px #c0a46650; }
.story-cover__front img, .story-cover__back img { width: 100%; height: 100%; object-fit: cover; }
.story-cover__front::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, #fff1, transparent 45%, #0001 94%, #0006); pointer-events: none; }
.story-cover__back { background: var(--story-paper); transform: rotateY(180deg) translateZ(1px); }
.cinematic.is-animated .story-cover__back { backface-visibility: visible; -webkit-backface-visibility: visible; }
.story-open-copy, .story-macro, .story-brush, .story-stroke, .story-navigation, .story-reading-cue { display: none; }
.story-reader { background: var(--story-ink); position: relative; padding: 100px max(6vw, calc((100vw - 1180px) / 2)); }
.story-reader__layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8vw; width: 100%; max-width: 1180px; margin: auto; }
.story-reader__copy h2 { font-size: clamp(36px, 4vw, 62px); font-weight: 600; font-stretch: 85%; letter-spacing: -.035em; line-height: 1.17; margin: 0; }
.story-reader__copy h2 span { display: block; color: #ccb47b; }
.story-reader__copy > p { max-width: 30ch; color: #bdb6a9; font-size: 17px; line-height: 1.8; margin: 22px 0; }
.reader-topics { display: flex; flex-wrap: wrap; gap: 8px 22px; color: #e0d4b7; font-size: 14px; margin: 22px 0 30px; }
.reader-topics span { padding-bottom: 8px; border-bottom: 1px solid #a88c4855; }
.reader-view { width: min(100%, 334px); margin: 0 auto; }
.reader-page { display: block; padding: 0; background: #f6f2e8; border: 0; border-radius: 2px; overflow: hidden; width: 100%; aspect-ratio: 1080 / 1528; cursor: zoom-in; box-shadow: -15px 22px 60px #0006, 0 0 0 1px #c9b78666; touch-action: pan-y; }
.reader-page img { display: block; width: 100%; height: 100%; object-fit: contain; }
.reader-controls { margin: 17px -6px 0; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.reader-controls[hidden], .reader-zoom[hidden] { display: none; }
.reader-controls button, .reader-zoom { appearance: none; font: inherit; color: #e1d5b5; background: transparent; border: 1px solid #8b75493d; cursor: pointer; min-height: 44px; min-width: 44px; border-radius: 50%; transition: background .16s, border-color .16s; }
.reader-controls button:hover { background: #b295551a; border-color: #b29555; }
.reader-controls button:disabled { opacity: .25; cursor: default; }
.reader-controls button:active { transform: scale(.96); }
.reader-counter { text-align: center; font-size: 12px; line-height: 1.6; color: #d0c3a2; }
.reader-counter span { display: block; color: #9b9383; font-size: 11px; }
.reader-zoom { display: block; margin: 8px auto 0; padding: 0 14px; border: none; border-radius: 4px; font-size: 12px; color: #b1a58b; text-decoration: underline; text-underline-offset: 4px; }
.story-motion { appearance: none; position: fixed; bottom: 23px; left: 28px; z-index: 55; display: flex; gap: 8px; align-items: center; min-height: 44px; background: #121110d9; border: 1px solid #b79c6633; border-radius: 50px; color: #c0b8a6; padding: 0 15px; font: inherit; font-size: 11px; cursor: pointer; }
.story-motion[hidden] { display: none; }
.story-motion { transition: opacity .25s, visibility .25s, bottom .35s cubic-bezier(.16, 1, .3, 1); }
.story-motion.is-away { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 767px) { body:has(.topbar.is-on) .story-motion:not(.is-away) { bottom: 84px; } }
.story-motion__icon { width: 12px; height: 10px; display: flex; gap: 4px; justify-content: center; align-items: center; }
.story-motion__icon::before, .story-motion__icon::after { content: ''; height: 9px; width: 2px; background: currentColor; }
.story-motion[aria-pressed='true'] .story-motion__icon::after { display: none; }
.story-motion[aria-pressed='true'] .story-motion__icon::before { width: 0; height: 0; border-block: 5px solid transparent; border-right: 7px solid currentColor; background: none; }
.story-static-note { max-width: 33ch; font-size: 12px; color: #938977; margin-top: 25px; }
.has-cinematic .lightbox { width: min(92vw, 850px); max-width: 92vw; max-height: calc(var(--story-height) * .94); overflow: hidden; background: #171511; border: 1px solid #b79c6640; border-radius: 6px; padding: 0 10px 10px; }
.lightbox__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 57px; padding: 5px 0; }
.has-cinematic .lightbox__close { position: static; width: 42px; height: 42px; font-size: 28px; }
.lightbox__zoom { font: inherit; font-size: 14px; padding: 10px 18px; color: #e1cc9a; background: transparent; border: 1px solid #b79c6650; border-radius: 40px; cursor: pointer; min-height: 44px; }
.lightbox__viewport { max-height: calc((var(--story-height) * .94) - 80px); overflow: auto; overscroll-behavior: contain; }
.has-cinematic .lightbox img { max-height: calc((var(--story-height) * .94) - 80px); max-width: 100%; width: auto; margin-inline: auto; border-radius: 2px; }
.has-cinematic .lightbox.is-zoomed img { width: 1080px; max-width: none; max-height: none; }

/* Animated composition (added by cinematic.js as soon as GSAP is ready). */
.cinematic.is-animated .story-camera { will-change: transform; }
.cinematic.is-animated .story-intro,
.cinematic.is-animated .story-halo,
.cinematic.is-animated .story-open-copy,
.cinematic.is-animated .story-macro,
.cinematic.is-animated .story-macro__copy,
.cinematic.is-animated .story-flood,
.cinematic.is-animated.is-flowing .story-reading-cue { will-change: opacity; }
.cinematic.is-zooming .story-cover { visibility: hidden; }
.cinematic.is-zooming .story-book::before { box-shadow: none; }
.cinematic.is-animated .story-stage { height: var(--story-height); overflow: hidden; overflow: clip; }
.cinematic.is-animated .story-opening { position: absolute; inset: 0; min-height: 0; }
.cinematic.is-animated .story-open-copy { display: block; position: absolute; z-index: 5; top: 12%; inset-inline: 20px; text-align: center; opacity: 0; pointer-events: none; }
.story-open-copy p { margin: 0 0 8px; font-size: 13px; color: #b79c66; }
.story-open-copy h2 { margin: 0; font-weight: 500; font-size: clamp(25px, 3vw, 42px); letter-spacing: -.025em; }
.cinematic.is-animated .story-macro { display: block; position: absolute; inset: 0; z-index: 6; opacity: 0; visibility: hidden; pointer-events: none; }
.story-macro > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.story-macro__copy { position: absolute; right: 9%; top: 43%; width: 36%; max-width: 500px; }
.story-macro__copy h2 { font-size: clamp(38px, 5.3vw, 80px); font-weight: 550; letter-spacing: -.05em; line-height: 1.13; margin: 0 0 24px; }
.story-macro__copy p { font-size: 17px; line-height: 1.8; color: #d2c7b5; max-width: 27ch; }
.story-flood { display: none; }
.cinematic.is-animated .story-flood { display: block; position: absolute; inset: 0; z-index: 8; opacity: 0; visibility: hidden; pointer-events: none;
  background: radial-gradient(120% 90% at 32% 22%, #8a1a2c 0%, #5c0f1e 42%, #36070f 78%, #22050a 100%); }
.cinematic.is-animated .story-brush { display: block; position: absolute; top: 0; left: 0; width: clamp(260px, 45vw, 700px); aspect-ratio: 1; z-index: 9; pointer-events: none; opacity: 0; visibility: hidden; transform-origin: 17% 87%; }
.story-brush img { width: 100%; height: 100%; }
.story-stroke img { width: 100%; height: 100%; }
.cinematic.is-animated .story-stroke { display: block; position: absolute; z-index: 8; left: 0; top: 0; width: 160vmax; height: 15vmin; opacity: 0; visibility: hidden; pointer-events: none; transform-origin: 0 50%; }
.story-iris, .story-iris__inner { display: contents; }
.cinematic.is-animated:not(.is-flowing) .story-iris { display: block; position: absolute; z-index: 10; border-radius: 50%; overflow: hidden; visibility: hidden; will-change: transform; }
.cinematic.is-animated:not(.is-flowing) .story-iris__inner { display: block; position: absolute; will-change: transform; }
.cinematic.is-animated:not(.is-flowing) .story-iris.is-open { overflow: visible; }
.cinematic.is-animated .story-reader { position: absolute; inset: 0; z-index: 10; padding-top: 100px; padding-bottom: 96px; opacity: 0; visibility: hidden; display: flex; align-items: center; }
.cinematic.is-animated .story-navigation { display: flex; gap: 25px; align-items: center; justify-content: center; position: absolute; bottom: 25px; inset-inline: 0; z-index: 14; }
.cinematic.is-animated .story-navigation { pointer-events: none; opacity: var(--nav-fade, 1); transition: opacity .3s, visibility .3s; }
.cinematic.is-animated .story-navigation:focus-within { opacity: 1; }
.cinematic.is-done .story-navigation { opacity: 0; visibility: hidden; }
.story-navigation button { pointer-events: auto; position: relative; border: 0; background: transparent; color: #9e9583; padding: 12px 0; min-height: 44px; font: inherit; font-size: 12px; cursor: pointer; }
.story-navigation button::after { content: ''; position: absolute; bottom: 4px; left: 0; right: 0; height: 1px; background: #cbb378; transform: scaleX(0); transition: transform .2s; transform-origin: right; }
.story-navigation button[aria-current='step'] { color: #e3d2a8; }
.story-navigation button[aria-current='step']::after { transform: scaleX(1); }
.story-navigation__line { width: 56px; height: 1px; background: #b4975540; }
.cinematic.is-animated .story-static-note { display: none; }

@media (max-width: 900px) {
  .story-opening { min-height: max(720px, var(--story-height)); }
  .story-intro { top: 100px; right: 22px; left: 22px; width: auto; max-width: none; transform: none; text-align: center; }
  .story-intro h1 { font-size: clamp(39px, 8.8vw, 64px); line-height: 1.12; }
  .story-intro__text { font-size: 15px; line-height: 1.7; margin: 17px auto 0; max-width: 32ch; }
  .story-actions { margin-top: 21px; justify-content: center; gap: 10px; }
  .story-actions .btn { --pad: 15px 20px; font-size: 13px; }
  .story-book { width: min(43vw, 235px); left: 50%; top: 72%; }
  .story-halo { width: 100%; top: 69%; }
  .story-sheet__brand { font-size: 7px; }
  .story-sheet__title { font-size: clamp(12px, 2.7vw, 20px); }
  .story-sheet__intro { font-size: 7px; }
  .story-sheet__foot { font-size: 6px; }
  .story-reader { padding: 80px 24px; }
  .story-reader__layout { display: flex; flex-direction: column; gap: 24px; }
  .story-reader__copy { text-align: center; }
  .story-reader__copy h2 { font-size: clamp(30px, 7vw, 44px); }
  .story-reader__copy h2 span { display: inline; }
  .story-reader__copy > p { font-size: 14px; margin: 13px auto 0; }
  .reader-topics { justify-content: center; gap: 18px; font-size: 12px; margin: 14px 0 0; }
  .story-reader__copy > .btn { display: none; }
  .reader-view { width: min(70vw, 320px); }
  .story-motion { bottom: 12px; left: 14px; min-width: 40px; min-height: 40px; padding: 0 12px; }
  .story-motion__label { display: none; }
  .cinematic.is-animated .story-stage { min-height: 0; }
  .cinematic.is-animated .story-open-copy { top: 15%; }
  .cinematic.is-animated .story-reader { padding: 83px 22px 75px; }
  .cinematic.is-animated .story-reader__layout { gap: 20px; }
  .cinematic.is-animated .story-navigation { bottom: 12px; gap: 12px; inset-inline: 16px 64px; }
  .story-navigation button { font-size: 11px; }
  .story-navigation__line { width: 20px; }
  .cinematic.is-animated .story-brush { width: 410px; }
  .reader-controls { margin-top: 10px; }
  .reader-zoom { margin-top: 0; }
  .story-macro__copy { right: 22px; left: 22px; top: auto; bottom: 20%; width: auto; max-width: none; text-align: center; text-shadow: 0 2px 25px #000; }
  .story-macro::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, #0e0907d9); pointer-events: none; opacity: var(--macro-shade, 1); }
  .story-macro__copy { z-index: 1; }
  .story-macro__copy h2 { font-size: 42px; margin-bottom: 14px; }
  .story-macro__copy p { font-size: 14px; margin-inline: auto; }
  .story-static-note { margin-inline: auto; }
}

@media (max-width: 400px) {
  .story-intro { top: 88px; }
  .story-intro h1 { font-size: 37px; }
  .story-intro__text { font-size: 14px; }
  .story-actions .btn { --pad: 14px 15px; font-size: 12px; }
  .story-reader__copy h2 { font-size: 28px; }
  .reader-topics { display: none; }
}

@media (max-height: 650px) and (min-width: 900.02px) {
  .story-book { width: min(25vw, 280px, calc((var(--story-height) - 250px) / 1.413)); }
  .story-intro h1 { font-size: clamp(40px, 4.2vw, 54px); }
  .story-intro__text { font-size: 15px; line-height: 1.65; margin-top: 16px; }
  .story-actions { margin-top: 20px; }
  .story-actions .btn { --pad: 12px 20px; font-size: 13px; }
  .cinematic.is-animated .story-reader { padding-top: 80px; padding-bottom: 60px; }
  .story-reader__copy h2 { font-size: 36px; }
  .story-reader__copy > p { font-size: 14px; margin-block: 14px; }
  .reader-topics { margin-block: 15px; }
  .cinematic.is-animated .story-open-copy { top: 15%; }
  .story-open-copy p { font-size: 12px; line-height: 1.4; }
  .story-open-copy h2 { font-size: 30px; line-height: 1.2; }
  .story-macro__copy { top: 34%; }
  .story-macro__copy h2 { font-size: clamp(38px, 4.3vw, 58px); }
  .story-macro__copy p { font-size: 15px; }
}

@media (max-height: 540px) and (max-width: 900px) {
  .story-opening { min-height: 640px; }
  .story-book { top: 73%; width: 175px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion) .story-navigation button::after { transition: none; }
}

/* All seven chapters remain reachable without the scroll animation library. */
html:not(.motion) .chapters__pin { min-height: 0; }
html:not(.motion) .chapters__viewport { overflow: visible; }
html:not(.motion) .chapters__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; gap: 20px; padding-inline: max(24px, calc((100vw - 1240px) / 2)); }
html:not(.motion) .chapter { width: auto; min-height: 260px; }
html:not(.motion) .chapters__bar { display: none; }
@media (max-width: 600px) {
  html:not(.motion) .chapters__track { grid-template-columns: 1fr; }
}

/* Small screens keep the full visual sequence. Long text and the real reader
   use the document's normal scroll instead of being clipped inside a pin. */
.cinematic.is-flowing > .story-intro {
  position: relative; inset: auto; transform: none; width: min(100%, 1000px);
  max-width: none; padding: 96px 24px 36px; margin-inline: auto; text-align: center;
}
.cinematic.is-flowing > .story-intro .story-intro__text { margin-inline: auto; }
.cinematic.is-flowing > .story-intro .story-actions { justify-content: center; }
.cinematic.is-flowing .story-book { left: 50%; top: 50%; }
.cinematic.is-flowing .story-halo { top: 50%; }
.cinematic.is-flowing .story-open-copy { top: 80px; }
.cinematic.is-flowing .story-open-copy p { font-size: 12px; line-height: 1.4; }
.cinematic.is-flowing .story-open-copy h2 { font-size: clamp(19px, 4.5vw, 28px); line-height: 1.25; }
.cinematic.is-flowing > .story-reader {
  position: relative; inset: auto; display: block; opacity: 1; visibility: visible;
  padding: 80px max(22px, 6vw); scroll-margin-top: 70px;
}
.cinematic.is-flowing > .story-reader .reader-view { width: min(70vw, 320px, calc((var(--story-height) - 130px) / 1.415)); min-width: 150px; }
.cinematic.is-flowing > .story-reader .story-reader__layout { gap: 32px; }
.cinematic.is-flowing .story-reading-cue {
  position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; background: var(--story-ink);
  padding: 78px 16px 70px; visibility: hidden; opacity: 0; pointer-events: none;
}
.story-reading-cue img { width: auto; max-width: 55vw; height: auto; max-height: max(40px, calc(var(--story-height) - 225px)); object-fit: contain; box-shadow: -12px 18px 35px #0007; }
.story-reading-cue p { font-size: clamp(20px, 4vw, 30px); line-height: 1.2; color: #cfb77f; margin: 0; }
.story-reading-cue span { font-size: 12px; text-align: center; color: #bdb6a9; }
.story-motion[aria-pressed='true'] .story-motion__label { display: inline; }

@media (max-height: 450px) {
  .cinematic.is-flowing .story-open-copy { top: 68px; }
  .cinematic.is-flowing .story-open-copy p { display: none; }
  .cinematic.is-flowing .story-open-copy h2 { font-size: 19px; }
  .cinematic.is-flowing .story-macro__copy { top: auto; bottom: 23%; right: 5%; left: auto; width: 44%; text-align: right; }
  .cinematic.is-flowing .story-macro__copy h2 { font-size: clamp(21px, 4vw, 34px); margin-bottom: 8px; }
  .cinematic.is-flowing .story-macro__copy p { font-size: 12px; line-height: 1.5; margin-block: 0; }
  .cinematic.is-flowing .story-navigation { bottom: 8px; gap: 12px; inset-inline: 12px 60px; }
  .cinematic.is-flowing .story-navigation__line { width: 20px; }
  .story-motion { bottom: 10px; left: 10px; padding-inline: 12px; min-width: 40px; min-height: 40px; }
  .story-motion__label { display: none; }
  .story-reading-cue img { max-height: max(36px, calc(var(--story-height) - 215px)); }
  .story-reading-cue span { display: none; }
}

@media (max-width: 350px) {
  .cinematic.is-flowing > .story-intro { padding-inline: 16px; }
  .cinematic.is-flowing > .story-intro h1 { font-size: clamp(29px, 9.5vw, 35px); }
  .cinematic.is-flowing .story-actions { gap: 8px; }
  .cinematic.is-flowing .story-actions .btn { --pad: 12px; font-size: 11px; }
  .cinematic.is-animated .story-navigation { gap: 9px; }
  .story-navigation__line { display: none; }
  .story-navigation button { font-size: 10px; }
  .cinematic.is-flowing .story-macro__copy h2 { font-size: 32px; }
}

@media (max-height: 350px) {
  .cinematic.is-flowing .story-macro__copy h2 { font-size: clamp(18px, 4vw, 28px); }
  .cinematic.is-flowing .story-macro__copy p { display: none; }
}