:root {
  color-scheme: dark;
  --cream: #fff2d7;
  --gold: #efd096;
  --muted: #e0d3ba;
  --forest: #111710;
  --serif: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--forest); color: var(--cream); font: 1rem/1.6 system-ui, sans-serif; }
body.intro-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cream); outline-offset: 5px; }
h1, h2, p { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: 1.02; text-wrap: balance; }
h2 { font-size: clamp(2.35rem, 6vw, 5rem); }
h1:focus, h2:focus { outline: none; }
.scene { position: relative; isolation: isolate; overflow: hidden; }
.intro {
  position: fixed; inset: 0; z-index: 5; overflow: auto; background: #08090c;
  --book-width: min(100vw, 138svh);
}
.book {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: var(--book-width); aspect-ratio: 1294 / 688;
  background: url("assets/book.webp") center / 100% 100%;
  mask-image: linear-gradient(transparent, #000 24%), linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
}
.page {
  position: absolute; inset: 0; background: inherit; transform-origin: 50% 88%;
  animation: flutter 4.8s ease-in-out infinite alternate;
}
.page.left { clip-path: polygon(20% 64%, 34% 65%, 46% 69%, 50% 83%, 50% 88%, 47% 80%, 41% 76%, 30% 80%, 12% 87%); }
.page.right { clip-path: polygon(50% 83%, 54% 70%, 68% 64%, 78% 66%, 87% 81%, 74% 81%, 63% 74%, 56% 75%, 50% 88%); animation-delay: -2.4s; }
@keyframes flutter { to { transform: skewY(-.55deg) scaleY(1.04); filter: brightness(1.12); } }
.intro-copy { position: relative; z-index: 2; padding: clamp(3.4rem, 11svh, 8rem) 1.1rem 2rem; text-align: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .24em; font-weight: 650; font-size: .7rem; color: var(--gold); }
.intro h1 { font-size: clamp(3.5rem, 11vw, 8rem); letter-spacing: -.065em; margin: .06em 0 .15em; text-shadow: 0 4px 25px #000; }
.intro-copy > p:not(.eyebrow) { color: var(--muted); max-width: 29rem; margin: auto; text-wrap: balance; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 53px; margin-top: 1.5rem; padding: .65rem 1.45rem;
  border: 1px solid var(--gold); border-radius: 99px; color: #271b0b;
  background: var(--gold); font: 650 .95rem/1.35 system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 0 25px #efcc8c32; transition: transform .2s, background .2s, box-shadow .2s;
}
.button:hover { transform: translateY(-2px); background: #ffe7bd; box-shadow: 0 0 32px #efcc8c55; }
.particles { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.particle {
  position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size);
  background: #fff2bd; border-radius: 50%; box-shadow: 0 0 8px 2px #ffca71;
  opacity: 0; animation: drift var(--duration) var(--delay) infinite;
}
@keyframes drift {
  0% { opacity: 0; transform: translate(0, 12px) scale(.5); }
  45% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--sway), -55px) scale(.75); }
}
.forest {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(180deg, #0c130dcc, transparent 27%, transparent 56%, var(--forest) 99%),
    url("assets/forest.webp") 60% center / cover no-repeat;
}
header, footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem max(1.2rem, 5vw); }
header a, footer a { display: inline-flex; align-items: center; min-height: 44px; }
header a:last-child { border-bottom: 1px solid #efcc8c99; font-size: .84rem; }
.brand { font: 1.25rem var(--serif); }
.forest-copy { position: relative; z-index: 2; text-align: center; padding: 1rem 1rem max(2rem, 6svh); text-shadow: 0 3px 24px #000; }
.trail { display: inline-flex; flex-direction: column; align-items: center; margin-top: .75rem; color: var(--gold); min-height: 44px; font-size: .86rem; }
.trail span { font-size: 1.35rem; }
.veil {
  position: fixed; inset: 0; z-index: 8; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at 53% 56%, #fff0c2, #b98142 27%, #17100b 76%);
  transition: opacity .48s ease;
}
.veil.visible { opacity: 1; pointer-events: auto; }
.chapter { padding: clamp(3.5rem, 10vw, 8rem) max(1.25rem, 7vw); text-align: center; }
.chapter .eyebrow { margin-bottom: 1rem; }
.chapter p:not(.eyebrow) { max-width: 35rem; margin: 1.2rem auto 0; color: var(--muted); }
.order { background: radial-gradient(ellipse at top, #293629, var(--forest) 65%); }
.author {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(1.5rem, 6vw, 5rem); align-items: center;
  max-width: 71rem; margin: auto; text-align: left; border-block: 1px solid #efcc8c36;
}
.author h2 { font-size: clamp(2.25rem, 4.7vw, 4rem); }
.author p:not(.eyebrow) { margin-left: 0; }
.author .author-signature {
  max-width: none; margin: 1.2rem 0 0; color: var(--gold); text-align: right;
  font: italic clamp(1.45rem, 2.8vw, 2.15rem)/1.25 var(--serif);
}
.ornament {
  display: grid; place-items: center; min-height: 13rem; color: var(--gold); font: 5rem var(--serif);
  background: radial-gradient(ellipse, #4b492d, #182219 72%); text-shadow: 0 0 29px #efcc8c;
  border: 1px solid #efcc8c58; border-radius: 50% 50% 1.7rem 1.7rem;
}
.contacts { background: radial-gradient(ellipse at bottom, #302e1e, var(--forest) 72%); }
.contact-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; margin-top: 1.5rem; }
.contact { min-height: 44px; padding: .55rem 1rem; border: 1px solid #efcc8c70; border-radius: 99px; }
a.contact:hover { color: #271b0b; background: var(--gold); }
span.contact { opacity: .7; }
#contact-note, footer { font-size: .85rem; }
footer { border-top: 1px solid #efcc8c30; color: var(--muted); }
@media (max-width: 640px) {
  .intro { --book-width: min(146vw, 100svh); }
  .book { bottom: 8svh; }
  .intro-copy { padding-top: clamp(3rem, 14svh, 7rem); }
  .intro h1 { font-size: clamp(3.5rem, 14.5vw, 5.5rem); }
  .forest { background-position: center; }
  .author { grid-template-columns: 1fr; }
  .ornament { min-height: 8rem; max-width: 11rem; width: 100%; margin: auto; font-size: 3.5rem; }
}
@media (max-height: 490px) and (orientation: landscape) {
  .intro-copy { padding-top: 1.4rem; }
  .intro h1 { font-size: clamp(3rem, 9vw, 5rem); }
  .intro-copy .button { margin-top: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .particle { opacity: .4; }
}
/* Full-width book composition. Only the isolated page layers move at rest. */
.book-world { position: absolute; inset: 0; overflow: hidden; transform-origin: var(--portal-x, 50%) var(--portal-y, 82%); }
.book {
  width: max(100vw, 69svh); bottom: 0; aspect-ratio: 1;
  mask-image: linear-gradient(transparent, #000 19%);
  mask-composite: add;
}
.book-world::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #08090c90, transparent 55%);
}
.book .page { clip-path: none; transform-origin: 50% 80%; background: center / 100% 100% no-repeat; }
.book .left { background-image: url("assets/page-left.webp"); animation: leaf-left 5.4s ease-in-out infinite; }
.book .right { background-image: url("assets/page-right.webp"); animation: leaf-right 6.3s -2s ease-in-out infinite; }
@keyframes leaf-left {
  0%, 100% { transform: none; }
  37% { transform: perspective(65rem) rotateY(-5deg) rotate(-1.4deg) scaleY(1.12); filter: brightness(1.13) drop-shadow(0 3px 4px #40200488); }
  66% { transform: perspective(65rem) rotateY(-2deg) rotate(-.5deg) scaleY(1.04); }
}
@keyframes leaf-right {
  0%, 100% { transform: none; }
  41% { transform: perspective(65rem) rotateY(5deg) rotate(1.5deg) scaleY(1.16); filter: brightness(1.14) drop-shadow(0 3px 4px #40200488); }
  65% { transform: perspective(65rem) rotateY(2deg) rotate(.6deg) scaleY(1.055); }
}
.logo {
  display: inline-grid; place-items: center; width: clamp(3.6rem, 7vw, 4.8rem); aspect-ratio: 1;
  flex: none; border: 1px solid #f7d692; border-radius: 50%; background: #100e0bb8;
  box-shadow: 0 0 7px #ffcf7680, 0 0 22px #efb94e60, inset 0 0 8px #f8ca7138; overflow: hidden;
}
.logo img { display: block; width: 77%; height: 77%; object-fit: contain; }
.intro-logo { position: absolute; z-index: 3; top: 1rem; left: max(1.2rem, 5vw); }
.intro-copy { padding-top: clamp(6rem, 15svh, 10rem); }
.intro h1 {
  max-width: 21ch; margin: .27em auto 0; font-size: clamp(2.3rem, 5.3vw, 5.45rem);
  letter-spacing: -.045em; text-shadow: 0 3px 24px #000, 0 1px 8px #000;
}
.forest header { position: relative; z-index: 2; }
.forest header a:last-child { text-shadow: 0 1px 8px #000; }
.portrait {
  margin: 0; padding: .45rem; width: min(100%, 21rem); justify-self: center;
  border: 1px solid #efcc8c99; border-radius: 50%;
  background: #b28b4624; box-shadow: 0 0 45px #edc06729;
}
.portrait img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: inherit;
  object-fit: cover; object-position: center 72%;
}
.contact { display: inline-flex; align-items: center; gap: .55rem; transition: background .2s, color .2s; }
.contact svg { width: 1.25rem; height: 1.25rem; flex: none; }

.page-light, .burst { position: absolute; pointer-events: none; }
.page-light {
  inset: 0; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse 30% 11% at 50% 78%, #fff8d9, #ffc967a0 31%, transparent 83%);
}
.burst { inset: 0; z-index: 4; overflow: hidden; }
.burst i {
  position: absolute; left: var(--portal-x); top: var(--portal-y);
  width: var(--size); height: var(--size); border-radius: 50%; background: #fff6c6;
  box-shadow: 0 0 8px 2px #f7a72e; opacity: 0;
}
.intro.diving .page-light { animation: page-glow 1.35s ease-in both; }
.intro.diving .burst i { animation: rise 1.18s var(--delay) ease-out both; }
.intro.diving .book-world { animation: dive 1.38s both; }
.intro.diving .intro-copy, .intro.diving .intro-logo { animation: title-fade .62s ease-out both; }
@keyframes page-glow {
  0% { opacity: 0; } 35% { opacity: .75; } 100% { opacity: 1; }
}
@keyframes rise {
  0% { opacity: 0; transform: translate(0, 0) scale(.5); }
  22% { opacity: 1; }
  83% { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.8); }
}
@keyframes dive {
  0%, 23% { transform: none; }
  70% { transform: translateY(var(--dive-y, -16vh)) scale(2.1); animation-timing-function: cubic-bezier(.45,.03,.86,.67); }
  100% { transform: translateY(var(--dive-y, -16vh)) scale(7); }
}
@keyframes title-fade { to { opacity: 0; transform: translateY(-.75rem); } }
.veil {
  background: radial-gradient(ellipse at var(--portal-x, 50%) var(--portal-y, 70%), #fff8df, #f4cd85 45%, #7b502d 100%);
  transition: opacity .56s ease;
}
body.entering .veil { animation: portal-flare 2s ease-in-out both; }
@keyframes portal-flare {
  0%, 43% { opacity: 0; }
  68%, 70% { opacity: 1; }
  100% { opacity: 0; }
}
body.lite .page { filter: none; }
body.lite .intro.diving .book-world { animation-name: dive-lite; }
@keyframes dive-lite {
  0%, 23% { transform: none; }
  100% { transform: translateY(var(--dive-y, -16vh)) scale(2.8); }
}
@media (max-width: 640px) {
  .book { bottom: 0; }
  .intro-copy { padding-top: clamp(6rem, 16svh, 8.5rem); }
  .intro h1 { max-width: 16ch; margin-top: clamp(1.2rem, 5vw, 1.75rem); font-size: clamp(2.15rem, 9vw, 3.4rem); }
  .portrait { width: min(68vw, 15rem); }
  .author { text-align: center; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .intro-copy { padding-top: 1.3rem; padding-inline: 5rem; }
  .intro h1 { font-size: clamp(1.8rem, 5.5vw, 2.75rem); }
  .book { width: 100vw; bottom: -7svh; }
}
@media (prefers-reduced-motion: reduce) {
  .burst { display: none; }
}