* { box-sizing: border-box; }
/* colors mirror the website's night theme tokens in assets/site.css */
html, body { margin: 0; height: 100%; background: #0e1522; color: #efe5d0; font: 14px/1.4 "Inter", system-ui, sans-serif; }
body.export { overflow: hidden; }
#theater { position: relative; height: 100vh; display: grid; place-items: center; background: #000; }
body.export #theater { position: fixed; inset: 0; height: auto; }
#stage { position: relative; width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9; background: #000; }
#frame { width: 100%; height: 100%; display: block; }
#poster { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 45%, rgba(20, 16, 10, .35), rgba(0, 0, 0, .9)), url('assets/poster.jpg') center / cover no-repeat, #000; transition: opacity .8s; text-align: center; }
#poster.gone { opacity: 0; pointer-events: none; }
.poster-inner .byline { font: 500 clamp(.7rem, 1.4vw, 1.1rem)/1 "Cinzel", serif; letter-spacing: .42em; text-transform: uppercase; color: #e2c173; }
.poster-inner h1 { font: 500 clamp(3rem, 11vw, 9rem)/1 "Cormorant Garamond", serif; margin: .25em 0 .1em; letter-spacing: .04em; color: #efe5d0; }
.poster-inner .sub { font: italic 400 clamp(.9rem, 1.8vw, 1.4rem)/1.3 "Cormorant Garamond", serif; color: #d8ccb3; margin: 0 0 1.8em; }
#play-big { font: 600 1rem/1 "Inter", sans-serif; letter-spacing: .06em; padding: 1rem 1.8rem; border-radius: 99px; border: 1px solid rgba(226, 193, 115, .6); background: rgba(226, 193, 115, .14); color: #efe5d0; cursor: pointer; }
#play-big:hover { background: rgba(240, 200, 130, .3); }
#play-big:disabled { opacity: .4; cursor: wait; }
/* the rough cut is behind a code while it is in production */
#gate { margin: 0 auto 1.2rem; max-width: 22rem; }
#gate label { display: block; font: italic 400 1.05rem/1.4 "Cormorant Garamond", serif; color: #d8ccb3; margin-bottom: .6rem; }
.gate-row { display: flex; gap: .5rem; justify-content: center; }
#gate input { width: 9rem; padding: .7rem .9rem; border-radius: 99px; border: 1px solid rgba(226, 193, 115, .5); background: rgba(0, 0, 0, .45); color: #efe5d0; font: 600 1rem/1 "Inter", sans-serif; letter-spacing: .2em; text-align: center; }
#gate input:focus { outline: 2px solid rgba(226, 193, 115, .7); outline-offset: 2px; }
#gate button { font: 600 .95rem/1 "Inter", sans-serif; letter-spacing: .06em; padding: .7rem 1.2rem; border-radius: 99px; border: 1px solid rgba(226, 193, 115, .6); background: rgba(226, 193, 115, .14); color: #efe5d0; cursor: pointer; }
#gate button:hover { background: rgba(240, 200, 130, .3); }
.gate-err { color: #e0a68a; font: 500 .85rem/1.3 "Inter", sans-serif; margin: .6rem 0 0; }
body.locked #controls, body.locked .down, body.locked #parts { display: none !important; }
.runtime, .status { font-size: .8rem; color: #a39479; margin: 1rem 0 0; }
.release { font: 500 .8rem/1.3 "Cinzel", serif; letter-spacing: .18em; text-transform: uppercase; color: #efe5d0; margin: 1.1rem 0 0; }
.audience { font: 500 .68rem/1 "Cinzel", serif; letter-spacing: .3em; text-transform: uppercase; color: #e2c173; margin: .6rem 0 0; }
#controls { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .6rem; padding: 1.4rem 1rem .7rem; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); opacity: 0; transition: opacity .3s; }
#stage:hover #controls, #controls.show { opacity: 1; }
#controls button { background: transparent; border: 0; color: #efe5d0; font: 600 .9rem/1 "Inter", sans-serif; cursor: pointer; padding: .35rem .5rem; border-radius: 6px; }
#controls button:hover { background: rgba(255, 255, 255, .1); }
#controls button.on { color: #e2c173; }
#seek { flex: 1; accent-color: #e2c173; }
#chapters { background: rgba(0, 0, 0, .5); color: #efe5d0; border: 1px solid rgba(255, 255, 255, .2); border-radius: 6px; padding: .3rem; max-width: 14rem; }
#controls span { font-variant-numeric: tabular-nums; font-size: .8rem; color: #d8ccb3; }
.back { position: absolute; top: .8rem; left: .9rem; color: #d8ccb3; text-decoration: none; font: 500 .75rem/1 "Cinzel", serif; letter-spacing: .14em; opacity: .55; }
.back:hover { opacity: 1; }
body.export .back, body.export #controls, body.export #poster { display: none !important; }
body.export #stage { width: 1920px; height: 1080px; }

.music-vol { display: inline-flex; align-items: center; gap: .3rem; color: #e2c173; font-size: .9rem; }
.music-vol input { width: 5.5rem; accent-color: #e2c173; }

/* the chapters below the theater */
.down { position: absolute; bottom: .9rem; left: 50%; transform: translateX(-50%); color: #d8ccb3; text-decoration: none; font: 500 .7rem/1 "Cinzel", serif; letter-spacing: .2em; opacity: .55; }
.down:hover { opacity: 1; }
#stage:hover ~ .down { opacity: 0; }
#parts { max-width: 78rem; margin: 0 auto; padding: 3.5rem 1.25rem 5rem; }
.parts-head { max-width: 40rem; margin-bottom: 2rem; }
.parts-head .byline { font: 500 .75rem/1 "Cinzel", serif; letter-spacing: .34em; text-transform: uppercase; color: #e2c173; }
.parts-head h2 { font: 500 clamp(2rem, 4vw, 3rem)/1.05 "Cormorant Garamond", serif; margin: .3em 0 .3em; color: #efe5d0; }
.parts-head p { color: #a39479; font-size: 1rem; }
#parts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.1rem; }
.part { display: block; text-align: left; background: #131c2b; border: 1px solid #2c3a52; border-radius: 10px; overflow: hidden; color: inherit; cursor: pointer; padding: 0; font: inherit; transition: transform .15s ease, border-color .15s ease; }
.part:hover { transform: translateY(-2px); border-color: #e2c173; }
.part .still { aspect-ratio: 16 / 9; background: #0a0f18 center / cover no-repeat; position: relative; }
.part .still::after { content: '▶'; position: absolute; right: .7rem; bottom: .6rem; color: #efe5d0; background: rgba(0, 0, 0, .55); border-radius: 99px; padding: .35rem .55rem .3rem .65rem; font-size: .7rem; }
.part .num { font: 500 .66rem/1 "Cinzel", serif; letter-spacing: .3em; text-transform: uppercase; color: #e2c173; }
.part h3 { font: 500 1.35rem/1.1 "Cormorant Garamond", serif; margin: .35rem 0 .3rem; color: #efe5d0; }
.part .at { font: 500 .72rem/1 "Inter", sans-serif; color: #a39479; font-variant-numeric: tabular-nums; }
.part .body { padding: .85rem 1rem 1rem; }
.parts-foot { margin-top: 2.2rem; color: #a39479; }
.parts-foot a { color: #e2c173; text-decoration: none; }
.parts-foot a:hover { text-decoration: underline; }


#poster-band { max-width: 78rem; margin: 0 auto; padding: 0 1.25rem 5rem; display: grid; grid-template-columns: minmax(14rem, 22rem) 1fr; gap: 2.5rem; align-items: center; }
#poster-band img { width: 100%; display: block; border-radius: 6px; box-shadow: 0 20px 50px rgba(0,0,0,.55); }
#poster-band .byline { font: 500 .75rem/1 "Cinzel", serif; letter-spacing: .34em; text-transform: uppercase; color: #e2c173; }
#poster-band h2 { font: 500 clamp(1.6rem, 3vw, 2.4rem)/1.1 "Cormorant Garamond", serif; margin: .3em 0; color: #efe5d0; }
#poster-band p { color: #a39479; }
#poster-band a { color: #e2c173; }
@media (max-width: 40rem) { #poster-band { grid-template-columns: 1fr; } }