header { display: flex; flex-wrap: wrap; align-items: center; }
.collection-link { display: inline-flex; align-items: center; padding: 0.5rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.45); text-decoration: none; font: inherit; color: inherit; min-height: 44px; }
@media (max-width: 550px) { header { gap: 0.35rem; } header a { font-size: 0.875rem; } }
:root{color-scheme:dark;--ink:#081d20;--paper:#f0eee6;--gold:#d8bd85;--muted:#bed0cb}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--ink);color:var(--paper);font:16px/1.5 Arial,sans-serif;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button,a,input{touch-action:manipulation}button{font:inherit;min-height:44px;padding:.65rem 1rem;border:1px solid #ffffff45;background:transparent;color:inherit;cursor:pointer;border-radius:2px}button:disabled{opacity:.4;cursor:default}button:hover:not(:disabled){border-color:var(--gold)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
header{display:flex;align-items:center;justify-content:space-between;padding:1rem 4vw;gap:1rem;z-index:2}header button{border:0}.brand{font-family:Georgia,serif;letter-spacing:.3em;font-size:1.5rem;text-align:left;padding:0}.brand small{display:block;font:12px Arial,sans-serif;letter-spacing:.25em;margin-top:.35rem}#films-open{font-family:Georgia,serif}
main{position:relative;min-height:0;isolation:isolate;display:flex;align-items:center;background:linear-gradient(115deg,#163739,var(--ink) 75%);overflow:hidden}
#poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--poster-position,50% 50%);z-index:-2}main:has(#poster:not([hidden]))::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#061d20e6,transparent 90%)}
#intro{padding:3vh 6vw;max-width:65rem}.eyebrow{color:var(--gold);font-size:.875rem;letter-spacing:.18em}h1{font:clamp(2.3rem,6.5vw,6.5rem)/1.03 Georgia,serif;letter-spacing:-.035em;margin:.4em 0;max-width:12ch}h2{font:clamp(1.5rem,4vw,3rem)/1.1 Georgia,serif;margin:.5rem 0}p{margin:.6rem 0}#description{font-size:clamp(1rem,1.7vw,1.3rem);max-width:38rem;color:var(--muted)}#availability{font-size:.875rem;color:var(--muted);margin-top:1.2rem}
video{width:100%;height:100%;min-height:0;object-fit:contain;background:#000}#ending{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:#081d20ed;padding:2rem}
footer{padding:.8rem 4vw;border-top:1px solid #d8bd8550;z-index:2;background:var(--ink)}
.progress{display:flex;justify-content:space-between;gap:1rem;color:var(--gold);font-size:.875rem;min-height:1.5em}.progress #status{text-align:right;letter-spacing:0}
.controls,.secondary{display:flex;align-items:center;gap:.6rem;margin-top:.6rem;flex-wrap:wrap}#next{margin-left:auto;background:var(--gold);color:var(--ink);border-color:var(--gold)}.secondary{justify-content:center}.secondary button{border:0;font-size:.875rem;padding:.3rem .6rem}.note{font-size:12px;letter-spacing:.12em;color:var(--muted);text-align:center;margin:.35rem 0 0}
#reflection{font-family:Georgia,serif;font-size:1rem;text-align:center}
body.playing header,body.playing .secondary,body.playing .note{transition:opacity .5s}body.playing.idle header,body.playing.idle .secondary,body.playing.idle .note{opacity:.75}body.playing.idle header:focus-within,body.playing.idle .secondary:focus-within{opacity:1}
dialog{background:#0c2528;color:var(--paper);border:1px solid #d8bd8570;max-width:960px;width:90vw;max-height:90dvh;padding:1.5rem;box-shadow:0 1rem 5rem #0008}dialog::backdrop{background:#020b0de6}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem}dialog p{font-size:.95rem;color:var(--muted)}#library{overflow:hidden}
#film-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.2rem 0}.film-card{text-align:left;display:grid;grid-template-columns:90px 1fr;gap:.75rem;align-items:center;min-height:110px}.film-card img{width:90px;height:75px;object-fit:cover}.film-card .number{font:2rem Georgia,serif;color:var(--gold)}.film-card small,.source-film-card small{display:block;color:var(--muted);font-size:.8rem}.film-card[aria-current=true],.source-film-card[aria-current=true]{border-color:var(--gold);background:#d8bd8510}.source-film-library{border-top:1px solid #d8bd8540;margin-top:1.4rem;padding-top:1rem}.source-film-library h3{font:1.35rem Georgia,serif;margin:.2rem 0}.source-film-library p{margin:.25rem 0 .8rem}.source-film-grid{display:grid}.source-film-library #source-film-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;max-height:28dvh;overflow:auto;padding-right:.25rem}.source-film-card{display:grid;grid-template-columns:2.5rem 1fr;gap:.6rem;align-items:center;text-align:left;min-height:58px;padding:.55rem .7rem}.source-film-number{font:1.15rem Georgia,serif;color:var(--gold);letter-spacing:.05em}.pagination{display:flex;justify-content:space-between;align-items:center;gap:1rem}#page-label{font-size:.875rem}.toggle{display:flex;gap:.75rem;align-items:center;margin:1rem 0}input{width:22px;height:22px;accent-color:var(--gold)}#options button{margin:.3rem}a{color:var(--gold);display:inline-block;padding:.5rem}
#scene-preview{height:80dvh;overflow:hidden;grid-template-rows:auto minmax(0,1fr) auto}#scene-preview[open]{display:grid}#scene-preview-image{width:100%;height:100%;min-height:0;object-fit:contain}#scene-preview-status{margin:.5rem 0 0}
.reader-settings{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}.reader-settings select{font:inherit;max-width:100%;min-height:44px;background:var(--ink);color:var(--paper);border:1px solid var(--gold)}select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}
#reader{height:84dvh;max-height:84dvh;overflow:hidden;grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:.5rem}
#reader[open]{display:grid}#reader-source{font-size:.875rem}#reader .toggle{margin:0}#reader-page{min-height:0;overflow:hidden}#reader-text{font:1.25rem/1.55 Georgia,serif;margin:0;overflow-wrap:anywhere;color:var(--paper)}#reader.large-reading #reader-text{font-size:2.5rem;line-height:1.45}#reader .pagination{padding-top:.5rem}#reader .dialog-heading h2{font-size:1.6rem}#reader .dialog-heading{align-items:start}
@media(max-width:550px){header{padding:.75rem 5vw}.brand{font-size:1.05rem}.brand small{font-size:12px;letter-spacing:.1em}#intro{padding:2vh 6vw}h1{font-size:clamp(2rem,10vw,3.8rem)}footer{padding:.6rem 4vw}.progress{font-size:.8rem;display:block}#status{display:block;text-align:left!important}.controls{gap:.4rem}.controls button{font-size:.875rem;padding:.6rem .7rem}.note{display:none}dialog{padding:1rem;width:94vw}#film-grid,.source-film-library #source-film-grid{grid-template-columns:1fr;gap:.6rem}.film-card{min-height:92px}.source-film-library #source-film-grid{max-height:32dvh}.source-film-card{min-height:54px}.dialog-heading h2{font-size:1.6rem}.pagination button{font-size:.875rem;padding:.5rem}.secondary{margin-top:.2rem}}
@media(max-height:520px){header{padding:.25rem 4vw}.brand small,.note,#availability{display:none}h1{font-size:2rem;margin:.25em 0}.eyebrow{margin:.2rem 0}#description{font-size:1rem}#intro{padding:0 5vw}footer{padding:.2rem 4vw}.controls,.secondary{margin-top:0}.progress{font-size:.75rem}.secondary button{min-height:36px}.film-card{min-height:60px;grid-template-columns:1fr;padding:.4rem}.film-card img,.film-card .number{display:none}#film-grid{margin:.5rem 0;gap:.4rem}dialog{padding:.75rem}.dialog-heading h2{font-size:1.3rem}#library>p{display:none}}
@media(max-width:550px) and (max-height:520px){#options-playback>p{display:none}#options .toggle{font-size:.875rem;margin:.4rem 0}#options .option-pages{display:flex;gap:.15rem}#options .option-pages button{font-size:.75rem;padding:.3rem;margin:0;flex:1}#compact-controls{display:flex;flex-wrap:wrap;gap:.2rem}#compact-controls button{font-size:.875rem;margin:.1rem}#options-privacy button{font-size:.875rem;padding:.3rem}#options-privacy p{font-size:.8rem}}
@media(max-width:550px) and (max-height:520px){#options #options-privacy button{display:block;width:100%;margin:0;padding:.25rem;min-height:44px}#options-privacy p{margin:.3rem 0;line-height:1.3}}
.toggle{min-height:44px}.toggle input{flex-shrink:0}
#options-text a{min-height:44px;max-width:100%;overflow-wrap:anywhere}
@media(max-width:550px) and (max-height:520px){#reader{height:94dvh;max-height:94dvh;padding:.5rem;gap:.25rem}#reader .dialog-heading h2{font-size:1.1rem}#reader-source{font-size:.75rem;margin:.2rem 0}}
@media(max-height:520px){.secondary button{min-height:44px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media (max-width: 550px) {
  header {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 6px 12px;
  }
  header .brand {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  header #films-open {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    padding: 4px;
    font-size: 12px;
  }
  header a {
    grid-row: 2;
    font-size: 12px !important;
    padding: 4px !important;
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    text-align: center;
    border-radius: 6px;
  }
}