@import url('tokens.css');
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; color: var(--color-ink); background: var(--color-bg); font: var(--text-base)/var(--leading-body) var(--font-body); }
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .35; cursor: default; }
:focus-visible { outline: var(--focus-width) solid var(--color-primary); outline-offset: var(--space-1); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: var(--leading-tight); }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: var(--border-width); height: var(--border-width); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.eyebrow { font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); }
.skip-link { position: fixed; top: var(--space-3); left: var(--space-3); transform: translateY(-200%); z-index: 50; background: var(--color-surface); padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); }
.skip-link:focus { transform: none; }
.site-nav { position: fixed; inset: 0 0 auto; height: var(--nav-height); padding-inline: var(--gutter); display: flex; justify-content: space-between; align-items: center; z-index: 20; pointer-events: none; background: linear-gradient(var(--color-bg), transparent); }
.site-nav > * { pointer-events: auto; }
.wordmark { display: inline-flex; gap: var(--space-2); align-items: center; font: 500 var(--nav-logo-size)/1 var(--font-display); }
.wordmark span { color: var(--color-accent); }
.nav-dedication, .nav-read { font-size: var(--text-xs); }
.nav-dedication { position: absolute; left: 50%; transform: translateX(-50%); color: var(--color-muted); letter-spacing: var(--tracking-label); }
.nav-read { border-bottom: var(--border-width) solid var(--color-border); padding-block: var(--space-2); }
.scrub { position: relative; height: var(--journey-length, 1500vh); }
.scrub-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: var(--color-bg); }
.world { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 45%, var(--color-bg), transparent 70%), radial-gradient(ellipse at 88% 30%, var(--color-lavender), transparent 70%), var(--color-pearl); }
.mirror-visual { position: absolute; width: calc(var(--mirror-height) * 2 / 3); height: var(--mirror-height); left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--mirror-scale, 1)); transform-origin: 50% 51%; opacity: var(--mirror-opacity, 1); z-index: 5; pointer-events: none; will-change: transform; }
.mirror-glass { position: absolute; left: 16%; top: 23.5%; width: 68%; height: 58%; border-radius: 50%; background: linear-gradient(125deg, var(--color-glass-light), var(--color-glass) 43%, var(--color-glass-light) 58%, var(--color-glass)); box-shadow: inset 0 0 var(--space-5) var(--color-glass-shadow); opacity: var(--glass-opacity, 1); }
.mirror-visual canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.petals { position: absolute; inset: 0; opacity: var(--petal-opacity, 1); pointer-events: none; }
.petals i { position: absolute; width: var(--petal-size); height: calc(var(--petal-size) * .48); border-radius: 85% 12% 80% 25%; background: linear-gradient(120deg, var(--color-petal-light), var(--color-petal)); transform: rotate(var(--petal-angle)); box-shadow: var(--shadow-petal); }
.petals i:nth-child(1) { left: 13%; top: 32%; --petal-angle: 25deg; }
.petals i:nth-child(2) { left: 28%; top: 72%; --petal-angle: -28deg; }
.petals i:nth-child(3) { left: 78%; top: 20%; --petal-angle: -40deg; }
.petals i:nth-child(4) { left: 89%; top: 58%; --petal-angle: 70deg; }
.petals i:nth-child(5) { left: 17%; top: 86%; --petal-angle: 130deg; }
.petals i:nth-child(6) { left: 71%; top: 82%; --petal-angle: 4deg; }
.petals i:nth-child(7) { left: 34%; top: 16%; --petal-angle: 50deg; }
.petals i:nth-child(8) { left: 85%; top: 90%; --petal-angle: -20deg; }
.hero-copy { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; }
.hero-copy.is-in { opacity: var(--hero-opacity, 1); }
.hero-copy > .eyebrow { position: absolute; top: var(--hero-eyebrow-top); width: 100%; text-align: center; color: var(--color-muted); }
.hero-copy h1 { position: absolute; width: 100%; top: var(--hero-title-top); display: flex; justify-content: space-between; padding-inline: var(--hero-title-gutter); font-size: var(--hero-type); letter-spacing: var(--tracking-display); }
.hero-copy h1 span:first-child { font-style: italic; }
.hero-copy p { position: absolute; bottom: var(--hero-tagline-bottom); width: 100%; text-align: center; font: italic var(--text-lg)/var(--leading-body) var(--font-display); }
.intro-instruction { position: absolute; bottom: var(--space-4); left: 50%; transform: translateX(-50%); display: flex; align-items: center; flex-direction: column; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-muted); opacity: var(--instruction-opacity, 1); pointer-events: none; white-space: nowrap; z-index: 9; }
.scroll-line { width: var(--border-width); height: var(--scroll-line-height); background: var(--color-primary); transform-origin: top; animation: breathe var(--scroll-breathe) var(--ease) infinite; }
.scene-marker { position: absolute; bottom: var(--space-6); left: var(--gutter); display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-muted); opacity: var(--intro-ui-opacity, 1); }
.scene-marker i { width: var(--space-7); height: var(--border-width); background: var(--color-border); }
.intro-skip { position: absolute; right: var(--gutter); bottom: var(--space-6); font-size: var(--text-xs); z-index: 9; opacity: var(--intro-ui-opacity, 1); }
.book-heading { position: absolute; top: calc(var(--book-top) - var(--book-height) / 2 - var(--reader-heading-gap)); width: 100%; text-align: center; opacity: var(--read-ui-opacity, 0); z-index: 9; pointer-events: none; }
.book-heading .eyebrow { color: var(--color-muted); }
.book-heading p { font: italic var(--text-lg)/1.2 var(--font-display); margin: var(--space-1) auto 0; max-width: calc(100% - var(--gutter) * 2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.book-anchor { position: absolute; left: 50%; top: var(--book-top); width: calc(var(--page-width) * (1 + var(--book-open, 0))); height: calc(var(--page-width) / .707); transform: translate(-50%, -50%) scale(var(--book-camera-scale, .2)); transform-origin: 50% 50%; opacity: var(--book-opacity, 0); z-index: 3; touch-action: pan-y pinch-zoom; }
.physical-book { position: relative; width: 100%; height: 100%; perspective: var(--book-perspective); transform-style: preserve-3d; }
.sheet { position: absolute; top: 0; height: 100%; background: var(--color-paper); overflow: hidden; }
.sheet img { width: 100%; height: 100%; object-fit: contain; user-select: none; }
.sheet-left { left: 0; width: calc(var(--page-width) * var(--book-open, 0)); }
.sheet-left img { width: var(--page-width); max-width: none; position: absolute; right: 0; }
.sheet-right { right: 0; width: var(--page-width); box-shadow: var(--shadow-book); }
.sheet-left::after, .sheet-right::after { content: ''; position: absolute; top: 0; bottom: 0; width: var(--binding-shadow-width); pointer-events: none; }
.sheet-left::after { right: 0; background: linear-gradient(270deg, var(--color-binding-shadow), transparent); }
.sheet-right::after { left: 0; background: linear-gradient(90deg, var(--color-binding-shadow), transparent); }
.center-binding { position: absolute; right: calc(var(--page-width) - var(--border-width)); width: var(--binding-width); top: 0; bottom: 0; background: var(--color-binding-shadow); opacity: var(--book-open, 0); }
.book-cover { position: absolute; top: 0; right: 0; width: var(--page-width); height: 100%; transform-origin: left center; transform-style: preserve-3d; transform: rotateY(var(--cover-angle, 0deg)); z-index: 3; pointer-events: none; }
.book-cover > img, .cover-inside { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--color-paper); }
.book-cover > img { object-fit: fill; }
.cover-inside { transform: rotateY(180deg); background: linear-gradient(90deg, var(--color-paper-edge), var(--color-paper) 12%); }
.turning-sheet { position: absolute; inset: 0 0 0 auto; width: var(--page-width); height: 100%; transform-style: preserve-3d; z-index: 4; pointer-events: none; }
.paper-strip { position: absolute; inset: 0 auto 0 0; transform-origin: left center; transform-style: preserve-3d; will-change: transform; }
.paper-face { position: absolute; inset: 0; background: var(--color-paper); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.paper-front { transform: translateZ(.2px); }
.paper-back { transform: rotateY(180deg) translateZ(.2px); }
.paper-face img { position: absolute; top: 0; width: var(--page-width); max-width: none; height: 100%; object-fit: fill; user-select: none; }
.paper-face::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--color-ink); opacity: var(--paper-shade, 0); }
.end-cover { position: absolute; top: 0; bottom: 0; left: var(--page-width); width: var(--page-width); transform-origin: left center; transform-style: preserve-3d; z-index: 5; }
.chapter-note { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--color-accent); font: 400 calc(var(--page-width) * .1)/1.25 var(--font-display); }
.chapter-note br { display: none; }
.scrub-stage:is([data-phase="book-closing"], [data-phase="back-cover"]) .sheet-left { width: var(--page-width); box-shadow: var(--shadow-book); }
.scrub-stage:is([data-phase="book-closing"], [data-phase="back-cover"]) .sheet-right { visibility: hidden; }
/* The closing anchor narrows, but the hinge stays at the left page's edge. */
.scrub-stage:is([data-phase="book-closing"], [data-phase="back-cover"]) .center-binding { left: calc(var(--page-width) - var(--border-width)); right: auto; }
.page-arrow { position: absolute; top: 50%; margin-top: calc(-1 * var(--control-size) / 2); width: var(--control-size); height: var(--control-size); border-radius: var(--radius-pill); border: var(--border-width) solid var(--color-border); background: var(--color-control); font-size: var(--text-h3); opacity: var(--read-ui-opacity, 0); }
.page-arrow-prev { left: calc(-1 * (var(--control-size) + var(--space-5))); }
.page-arrow-next { right: calc(-1 * (var(--control-size) + var(--space-5))); }
.page-arrow:hover:not(:disabled) { background: var(--color-surface); }
.scrub-stage:is([data-phase="mirror"], [data-phase="book-closed"], [data-phase="book-opening"]) .page-arrow { visibility: hidden; }
.reading-controls { position: absolute; top: calc(var(--book-top) + var(--book-height) / 2 + var(--space-4)); left: 50%; transform: translateX(-50%); width: min(var(--reader-control-width), calc(100% - var(--gutter) * 2)); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: var(--text-xs); opacity: var(--read-ui-opacity, 0); z-index: 9; }
.page-picker { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.page-picker label, .page-picker > span, .reader-hint { color: var(--color-muted); }
.reading-controls button, .page-picker select { border: var(--border-width) solid var(--color-border); background: var(--color-control); border-radius: var(--radius-pill); font-size: var(--text-sm); min-height: var(--control-size); padding-inline: var(--space-4); }
.page-picker select { border-radius: var(--radius-sm); padding-inline: var(--space-3); }
.page-links { position: absolute; left: 0; right: 0; top: calc(var(--book-top) + var(--book-height) / 2 + var(--reader-links-offset)); display: flex; justify-content: center; gap: var(--space-4); font-size: var(--text-xs); z-index: 9; }
.page-links a { border-bottom: var(--border-width) solid var(--color-border); }
.reading-progress { position: absolute; left: 50%; top: calc(var(--book-top) + var(--book-height) / 2 + var(--reader-progress-offset)); transform: translateX(-50%); width: min(var(--reader-control-width), calc(100% - var(--gutter) * 2)); height: var(--progress-height); background: var(--color-border); opacity: var(--read-ui-opacity, 0); }
.reading-progress i { display: block; height: 100%; width: calc(var(--reading-progress, .1) * 100%); background: var(--color-primary); transition: width var(--dur) var(--ease); }
.back-page { height: 100%; padding: var(--space-6); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.back-page > span { font: var(--text-h2)/1 var(--font-display); color: var(--color-accent); }
.back-page p { font: var(--back-page-type)/1.1 var(--font-display); margin-block: var(--space-5); }
.back-page small, .back-page a { font-size: var(--text-xs); color: var(--color-muted); }
.back-page a { margin-top: var(--space-7); border-bottom: var(--border-width) solid var(--color-border); }
.footer { padding: var(--space-5) var(--gutter); font-size: var(--text-xs); display: flex; justify-content: space-between; color: var(--color-muted); }
dialog { border: var(--border-width) solid var(--color-border); padding: 0; width: min(var(--zoom-dialog-width), 96vw); height: 94svh; max-height: none; max-width: none; background: var(--color-bg); color: var(--color-ink); border-radius: var(--radius); box-shadow: var(--shadow-2); overflow: hidden; }
dialog::backdrop { background: var(--color-backdrop); backdrop-filter: blur(var(--backdrop-blur)); }
.zoom-toolbar { height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-inline: var(--space-5); font-size: var(--text-sm); }
.zoom-toolbar button { border: 0; background: var(--color-surface); border-radius: var(--radius-pill); min-height: var(--control-size); padding-inline: var(--space-4); }
.zoom-scroll { height: calc(100% - var(--nav-height) - var(--zoom-tip-height)); overflow: auto; display: flex; align-items: flex-start; padding: var(--space-5); touch-action: pan-x pan-y pinch-zoom; }
.zoom-scroll img { width: var(--zoom-page-width); max-width: none; flex: 0 0 var(--zoom-page-width); }
.zoom-tip { height: var(--zoom-tip-height); font-size: var(--text-xs); text-align: center; padding-top: var(--space-2); color: var(--color-muted); }
.no-script { padding-block: var(--space-8); }
@keyframes breathe { 0%, 100% { transform: scaleY(.55); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; }
@media (max-width: 700px) {
  .nav-dedication { display: none; }
  .hero-copy h1 { top: var(--mobile-hero-title-top); padding-inline: var(--space-5); font-size: var(--mobile-hero-type); justify-content: center; gap: var(--space-4); }
  .hero-copy > .eyebrow { top: var(--mobile-hero-eyebrow-top); font-size: var(--mobile-eyebrow-size); }
  .hero-copy p { bottom: var(--mobile-tagline-bottom); }
  .mirror-visual { width: calc(var(--mobile-mirror-height) * 2 / 3); height: var(--mobile-mirror-height); top: 51%; }
  .intro-instruction { bottom: var(--space-8); }
  .scene-marker { display: none; }
  .intro-skip { bottom: var(--space-5); left: 0; right: 0; text-align: center; }
  .book-heading { padding-inline: var(--gutter); }
  .book-heading p { font-size: var(--text-lg); }
  .page-arrow { width: var(--mobile-control-size); border: 0; background: transparent; }
  .page-arrow-prev { left: calc(-1 * var(--mobile-control-size)); }
  .page-arrow-next { right: calc(-1 * var(--mobile-control-size)); }
  .reader-hint { display: none; }
  .zoom-toolbar { padding-inline: var(--space-3); }
  .zoom-toolbar > span:first-child { display: none; }
  .back-page { padding: var(--space-3); }
  .back-page p { font-size: var(--text-h3); }
  .back-page small, .back-page a { font-size: var(--mobile-eyebrow-size); }
  .back-page a { margin-top: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}