:root { --ink:#17110e; --paper:#fffaf0; --gold:#d8a04a; --muted:#d7c7b1; }
* { box-sizing:border-box; }
html,body,#app { width:100%; min-height:100%; margin:0; background:var(--ink); color:var(--paper); font-family:Georgia, 'Times New Roman', serif; -webkit-text-size-adjust:100%; }
body { overflow:hidden; overscroll-behavior:none; }
button,input,textarea { font:inherit; -webkit-tap-highlight-color:transparent; } button { cursor:pointer; touch-action:manipulation; }
.hidden { display:none !important; }
.festival-entry { position:relative; height:100svh; height:100dvh; min-height:540px; overflow:auto; background:#061a27; }
.entry-scene { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.festival-entry::before { content:""; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(4,17,36,.43),rgba(4,17,36,.2) 43%,rgba(4,17,36,.12) 59%,rgba(4,17,36,.48) 100%); pointer-events:none; }
.entry-content { position:relative; z-index:1; min-height:100%; display:flex; flex-direction:column; align-items:center; text-align:center; padding:clamp(22px,4vh,48px) 24px max(20px,env(safe-area-inset-bottom)); text-shadow:0 2px 14px #061527; }
.entry-medallion { position:relative; width:clamp(64px,10vh,105px); aspect-ratio:1; flex:none; overflow:hidden; border:2px solid #c99b4e; border-radius:50%; background:#6d421a; box-shadow:0 0 0 4px rgba(218,172,78,.22),0 8px 24px #061527; }
.entry-medallion::before { content:"✦"; position:absolute; inset:0; display:grid; place-items:center; color:#f6d99c; font-size:clamp(36px,6vh,62px); }
.entry-medallion img { position:absolute; display:block; width:445%; max-width:none; height:auto; left:-172.5%; top:-41%; }
.entry-eyebrow,.entry-edition { color:#e3bd79; letter-spacing:.28em; font:600 clamp(10px,1.15vw,14px)/1.5 Georgia,serif; }
.entry-eyebrow { margin:clamp(14px,3vh,28px) 0 5px; }
.entry-content h1 { max-width:95vw; margin:0; color:#f6d99c; font:400 clamp(44px,7.5vw,112px)/.95 Georgia,'Times New Roman',serif; letter-spacing:.045em; text-shadow:0 3px 1px #755019,0 8px 32px #051529; }
.entry-edition { margin:12px 0 0; }
.entry-tagline { margin:clamp(18px,4vh,38px) 0 2px; color:#fff0d5; font:clamp(19px,2.4vw,34px)/1.2 Georgia,serif; letter-spacing:.06em; }
.entry-era { margin:7px 0 0; color:#f2dbb6; font:clamp(14px,1.7vw,22px)/1.3 Georgia,serif; letter-spacing:.08em; }
.entry-lower { margin:auto 0 0; display:flex; flex-direction:column; align-items:center; gap:clamp(9px,1.6vh,18px); width:100%; }
.entry-credits { margin:0; color:#f5e6cc; font:clamp(14px,1.45vw,20px)/1.45 Georgia,serif; letter-spacing:.035em; }
.festival-entry .enter-button { min-height:50px; width:min(90vw,430px); padding:10px 22px; border:2px solid #f2ce79; border-radius:30px; background:linear-gradient(#f6db9d,#c8953c 48%,#94621c); box-shadow:inset 0 0 0 3px #755021,0 4px 20px #041326; color:#24180b; text-shadow:none; font:600 clamp(17px,1.65vw,23px)/1.3 Georgia,serif; letter-spacing:.08em; }
.festival-entry .enter-button:hover { filter:brightness(1.12); }
.festival-entry .enter-button:focus-visible { outline:3px solid #fff1b5; outline-offset:4px; }
.entry-music { margin:0; color:#e7d4b6; font:italic 15px Georgia,serif; }
.entry-studio { margin:8px 0 0; color:#e9d3ac; font:clamp(12px,1.25vw,17px) Georgia,serif; letter-spacing:.14em; }
.festival-entry .apple-install-tip { display:none !important; }
@media (max-width:700px) { .festival-entry { background-position:center; }.entry-content { padding:clamp(18px,3vh,35px) 12px 16px; }.entry-content h1 { font-size:clamp(40px,10vw,70px); line-height:1; }.entry-eyebrow,.entry-edition { letter-spacing:.15em; }.entry-tagline { margin-top:22px; }.entry-lower { gap:12px; }.entry-credits { font-size:13px; } }
@media (max-height:650px) { .entry-medallion { width:52px; }.entry-eyebrow { margin-top:9px; }.entry-tagline { margin-top:12px; }.entry-lower { gap:6px; }.entry-studio { margin:0; } }
.part-collection-screen { height:100svh; height:100dvh; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; padding:clamp(20px,5vw,64px); color:#f4e6ca; background:radial-gradient(ellipse at 50% 30%,#183a60 0%,#102e4e 35%,#091f38 75%,#07192e 100%); }
.collection-back { border:1px solid rgba(220,180,104,.65); background:transparent; color:#e9c987; padding:8px 11px; font:12px Arial,sans-serif; }
.collection-copy { max-width:820px; margin:clamp(18px,4vw,44px) auto 28px; text-align:center; }
.collection-copy p { margin:0 0 8px; color:#cda35b; font:700 11px Arial,sans-serif; letter-spacing:.22em; }
.collection-copy h1 { margin:0; color:#eac16f; font-size:clamp(34px,7vw,72px); font-weight:400; letter-spacing:.04em; }
.collection-copy span { display:block; margin-top:9px; color:#eadbc2; font:14px/1.4 Arial,sans-serif; }
.collection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(45px,6vw,86px) clamp(35px,7vw,100px); max-width:1120px; margin:0 auto; align-items:start; }
.part-card { position:relative; min-width:0; text-align:center; color:#d9c6a7; }
.book-object { width:100%; max-width:290px; margin:0 auto; transition:transform .22s ease; }
.book-object img { display:block; width:100%; height:auto; border:0; -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 94%,transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 94%,transparent); mask-composite:intersect; }
.part-card.available:hover .book-object,.part-card.available:focus-within .book-object { transform:translateY(-5px) scale(1.015); }
.part-card h2 { position:relative; z-index:2; margin:16px 0 2px; color:#e9c987; font:700 12px Arial,sans-serif; letter-spacing:.1em; }
.part-card p { position:relative; z-index:2; margin:0; font:13px/1.35 Arial,sans-serif; }
.part-card button { position:relative; z-index:2; margin-top:11px; border:1px solid #e3b758; background:#d4a64c; color:#1a120b; padding:9px 10px; font:700 11px Arial,sans-serif; letter-spacing:.06em; }
@media (max-width:760px) { .part-collection-screen { padding:16px 12px 24px; }.collection-copy { margin:13px auto 18px; }.collection-copy h1 { font-size:clamp(30px,10vw,42px); }.collection-copy span { font-size:12px; }.collection-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px 14px; max-width:520px; }.part-card h2 { margin-top:11px; font-size:10px; }.part-card p { font-size:11px; }.part-card button { margin-top:7px; padding:7px 5px; font-size:9px; } }
.reader { width:100%; max-width:100vw; height:100svh; height:100dvh; overflow:hidden; display:grid; grid-template-rows:auto 1fr auto; background:radial-gradient(circle at 50% 0,#49301e 0,var(--ink) 55%); }
.reader-header,.reader-footer { min-width:0; display:flex; align-items:center; gap:10px; padding:11px max(15px,env(safe-area-inset-right)) 11px max(15px,env(safe-area-inset-left)); background:rgba(23,17,14,.96); font:12px Arial,sans-serif; letter-spacing:.06em; z-index:2; }
.reader-header { border-bottom:1px solid rgba(255,255,255,.13); }
.reader-header p { flex:1; min-width:0; margin:0; text-align:center; color:var(--muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.header-actions { flex:0 0 auto; min-width:0; display:flex; align-items:center; gap:7px; }
.header-button,.icon-button,.nav-button { padding:8px 10px; border:1px solid rgba(255,255,255,.27); color:var(--paper); background:transparent; }
.icon-button { min-width:35px; font-size:17px; line-height:1; }
.volume-control { display:flex; align-items:center; }
#volume-slider { width:72px; accent-color:var(--gold); }
.page-stage { width:100%; max-width:100%; min-height:0; position:relative; display:grid; place-items:center; padding:18px 10px; perspective:1800px; touch-action:pan-y; overflow:hidden; }
.page-wrap { width:100%; height:100%; min-width:0; max-height:calc(100dvh - 128px); max-width:100%; display:flex; justify-content:center; align-items:center; gap:7px; }
.book-page { display:block; flex:0 0 auto; min-width:0; height:auto; max-height:100%; max-width:100%; width:auto; object-fit:contain; background:var(--paper); box-shadow:0 14px 34px rgba(0,0,0,.55); user-select:none; -webkit-user-drag:none; }
.facing-page { display:none; }
.page-wrap.spread-mode { width:100%; }
.page-wrap.spread-mode .book-page { max-width:calc(50% - 4px); }
.page-wrap.spread-mode .facing-page { display:block; }
.page-wrap.turn-next .book-page { animation:page-flip-next .48s cubic-bezier(.2,.7,.25,1) both; transform-origin:left center; }
.page-wrap.turn-previous .book-page { animation:page-flip-previous .48s cubic-bezier(.2,.7,.25,1) both; transform-origin:right center; }
@keyframes page-flip-next { 0% { opacity:.18; transform:rotateY(-76deg) translateX(-5%); filter:brightness(.55); } 58% { opacity:1; transform:rotateY(7deg) translateX(0); filter:brightness(1.06); } 100% { opacity:1; transform:rotateY(0) translateX(0); filter:brightness(1); } }
@keyframes page-flip-previous { 0% { opacity:.18; transform:rotateY(76deg) translateX(5%); filter:brightness(.55); } 58% { opacity:1; transform:rotateY(-7deg) translateX(0); filter:brightness(1.06); } 100% { opacity:1; transform:rotateY(0) translateX(0); filter:brightness(1); } }
.tap-zone { position:absolute; top:0; bottom:0; width:28%; border:0; background:transparent; z-index:1; }
.previous-zone { left:0; }.next-zone { right:0; }
.swipe-hint { position:absolute; bottom:18px; padding:7px 11px; border-radius:20px; background:rgba(0,0,0,.5); color:#eadbc6; font:11px Arial,sans-serif; opacity:0; transition:opacity .35s; pointer-events:none; }
.swipe-hint.visible { opacity:1; }
.reader-footer { justify-content:center; border-top:1px solid rgba(255,255,255,.13); }
.reader.immersive { grid-template-rows:0 minmax(0,1fr) 0; }
.reader.immersive.chrome-visible { grid-template-rows:auto minmax(0,1fr) auto; }
.reader.immersive .reader-header,.reader.immersive .reader-footer { transition:transform .24s ease,opacity .2s ease; }
.reader.immersive:not(.chrome-visible) .reader-header { transform:translateY(-120%); opacity:0; pointer-events:none; }
.reader.immersive:not(.chrome-visible) .reader-footer { transform:translateY(120%); opacity:0; pointer-events:none; }
.reader.immersive .page-stage { padding:0; }
.reader.immersive .page-wrap { max-height:100dvh; }
.nav-button { font-size:12px; }.nav-button:disabled { opacity:.35; cursor:not-allowed; }
#page-count { min-width:58px; color:var(--muted); text-align:center; }
dialog { width:min(440px,calc(100% - 28px)); border:0; padding:20px; color:var(--ink); background:var(--paper); box-shadow:0 24px 80px #000; }
#contents-dialog { max-height:min(84dvh,760px); overflow:hidden; }
dialog[open] { position:fixed; inset:0; margin:auto; }
dialog::backdrop { background:rgba(0,0,0,.7); }
.dialog-heading { display:flex; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid #e2d3bd; color:#6f481b; font:700 12px Arial,sans-serif; letter-spacing:.14em; }
.dialog-heading button { border:0; background:none; font-size:28px; line-height:.55; }
.chapter-list { display:grid; gap:8px; max-height:calc(min(84dvh,760px) - 72px); padding:16px 3px 4px 0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }.chapter-list button { text-align:left; padding:13px; border:1px solid #decdb2; background:#fff; color:var(--ink); font:600 14px/1.35 Arial,sans-serif; cursor:pointer; }.chapter-list button:hover,.chapter-list button:focus-visible { border-color:#a8742e; outline:2px solid rgba(168,116,46,.28); outline-offset:1px; }.chapter-list button.active-chapter { border-color:#a8742e; background:#f4e3bf; box-shadow:inset 4px 0 #a8742e; }
.visual-page { object-fit:contain; background:#17110e; }
/* Existing wide cinematic stills always preserve their complete composition.
   New 2:3 book images will naturally occupy the page without cropping. */
@media (orientation:landscape) {
  .page-wrap .book-page.visual-page {
    width:auto;
    height:100%;
    aspect-ratio:auto;
    object-fit:contain;
    object-position:center;
  }
}
@media (max-width:640px) { .festival-entry>.entry-emblem { width:100vw; height:66dvh; }.entry-copy { inset:auto 0 max(19dvh,116px); }.entry-copy small { margin-top:8px; }.enter-button { padding:12px 16px; font-size:12px; }.part-collection { gap:4px; width:96vw; }.part-collection img { width:calc((96vw - 20px)/6); }.reader-header { padding-top:max(11px,env(safe-area-inset-top)); }.reader-footer { padding-bottom:max(11px,env(safe-area-inset-bottom)); }.volume-control { display:none; }.reader-header #spread-toggle { display:inline-flex; }.header-actions { gap:5px; }.header-button { padding:7px 9px; }.nav-button { padding:8px 7px; font-size:11px; }.page-stage { padding:10px 5px; }.page-wrap { max-height:calc(100dvh - 118px); } }
@media (max-width:390px) { .reader-header,.reader-footer { gap:5px; padding-left:max(8px,env(safe-area-inset-left)); padding-right:max(8px,env(safe-area-inset-right)); }.reader-header p { font-size:11px; }.header-actions { gap:3px; }.header-button { padding:7px 6px; font-size:10px; }.icon-button { min-width:30px; padding:7px 6px; }.page-stage { padding-left:3px; padding-right:3px; }.page-wrap { max-width:100%; } }
@media (orientation:landscape) and (max-height:560px) { .reader-header,.reader-footer { padding-top:7px; padding-bottom:7px; }.page-wrap { max-height:calc(100dvh - 96px); }.swipe-hint { bottom:8px; } }

/* Practical reading controls keep the original page artwork intact. */
.reader[data-theme="light"] { background:#eadcc5; }
.reader[data-theme="light"] .reader-header,.reader[data-theme="light"] .reader-footer { background:rgba(245,238,224,.97); border-color:#c5a77a; color:#2c211a; }
.reader[data-theme="light"] .reader-header p,.reader[data-theme="light"] #page-count { color:#65451f; }
.reader[data-theme="light"] .header-button,.reader[data-theme="light"] .icon-button,.reader[data-theme="light"] .nav-button { color:#2c211a; border-color:#ae8a56; }
.tools-dialog { max-height:min(84dvh,760px); overflow:auto; }
.tool-section { padding:16px 0; border-bottom:1px solid #e2d3bd; }
.tool-section:last-child { border-bottom:0; }
.tool-label { margin:0 0 10px; color:#6f481b; font:700 11px Arial,sans-serif; letter-spacing:.13em; }
.tool-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tool-button { border:1px solid #b9935e; background:#fffdf8; color:#2d2118; padding:9px 11px; }
.tool-row output { min-width:52px; text-align:center; font:700 13px Arial,sans-serif; }
.tool-volume-row { margin-top:12px; color:#6f481b; font:700 13px Arial,sans-serif; }
.tool-volume-row input { width:min(210px,100%); accent-color:#b47823; }
.tool-help { margin:9px 0 0; color:#6e5e50; font:13px/1.4 Arial,sans-serif; }
.search-form { display:flex; gap:8px; }
.search-form input,#page-note { width:100%; border:1px solid #cdbb9f; padding:10px; font:14px Arial,sans-serif; color:#241a13; background:#fff; }
#page-note { display:block; resize:vertical; margin-bottom:8px; }
.result-list { display:grid; gap:7px; margin-top:10px; color:#6e5e50; font:13px Arial,sans-serif; }
.result-list:empty { display:none; }
.result-button { text-align:left; border:1px solid #dfcfb5; background:#fff; color:#2d2118; padding:10px; font:13px/1.35 Arial,sans-serif; }
.result-button small { display:block; margin-top:3px; color:#766351; }
.page-stage.zoomed { overflow:auto; place-items:start center; touch-action:pan-x pan-y; }
.page-stage.zoomed .tap-zone { display:none; }
@media (max-width:640px) { .reader-header #reader-tools { padding:7px 8px; }.tools-dialog { width:min(100% - 18px,440px); padding:16px; } }

/* On iPhone/iPad the same button starts the reader's built-in immersive mode. */
@supports (-webkit-touch-callout:none) {
  .page-stage { -webkit-overflow-scrolling:touch; }
  .page-stage.zoomed { overscroll-behavior:contain; }
}
@media (prefers-reduced-motion: reduce) { .page-wrap.turn-next .book-page,.page-wrap.turn-previous .book-page { animation:none; } }

/* Safari/iOS compatibility: visual viewport, safe areas, and native-feeling fallback fullscreen. */
html.reader-immersive,html.reader-immersive body { overflow:hidden; overscroll-behavior:none; }
.reader.immersive { position:fixed; top:var(--visual-top,0); left:var(--visual-left,0); width:var(--visual-width,100vw); max-width:none; height:100vh; height:100svh; height:var(--visual-height,100dvh); z-index:1000; }
.reader.immersive .reader-header { padding-top:max(11px,env(safe-area-inset-top)); }
.reader.immersive .reader-footer { padding-bottom:max(11px,env(safe-area-inset-bottom)); }
.reader.immersive .page-wrap { max-height:var(--visual-height,100dvh); }
.apple-mobile .volume-control,.apple-mobile .tool-volume-row { display:none !important; }
#ios-volume-tip { margin-top:12px; font-style:italic; }
#spread-toggle[hidden] { display:none !important; }
dialog { max-width:calc(100vw - max(28px,env(safe-area-inset-left) + env(safe-area-inset-right))); max-height:calc(var(--visual-height,100dvh) - max(28px,env(safe-area-inset-top) + env(safe-area-inset-bottom))); }
#contents-dialog { height:min(760px,calc(var(--visual-height,100dvh) - max(28px,env(safe-area-inset-top) + env(safe-area-inset-bottom)))); display:none; grid-template-rows:auto minmax(0,1fr); }
#contents-dialog[open] { display:grid; }
.chapter-list { min-height:0; max-height:none; -webkit-overflow-scrolling:touch; }
.tools-dialog { max-height:calc(var(--visual-height,100dvh) - max(28px,env(safe-area-inset-top) + env(safe-area-inset-bottom))); overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
@media (max-width:480px) {
  .reader-header { gap:5px; padding-left:max(7px,env(safe-area-inset-left)); padding-right:max(7px,env(safe-area-inset-right)); }
  .reader-header p { font-size:10px; }
  .header-actions { gap:3px; }
  .header-button { padding:7px 6px; font-size:10px; }
  .icon-button { min-width:30px; padding:7px 5px; }
  .reader-footer { gap:5px; padding-left:max(7px,env(safe-area-inset-left)); padding-right:max(7px,env(safe-area-inset-right)); }
  #page-count { min-width:0; flex:1; font-size:10px; }
  dialog { width:calc(100% - 16px); padding:15px; }
}
@media (orientation:landscape) and (max-height:560px) {
  .reader-header { padding-left:max(8px,env(safe-area-inset-left)); padding-right:max(8px,env(safe-area-inset-right)); }
  .reader-footer { padding-left:max(8px,env(safe-area-inset-left)); padding-right:max(8px,env(safe-area-inset-right)); }
  dialog { max-height:calc(var(--visual-height,100dvh) - 12px); }
  #contents-dialog { height:calc(var(--visual-height,100dvh) - 12px); }
}