:root{font-family:'DM Sans',sans-serif;--bg:#f3eee4;--fg:#252f2c;--muted:#777568;--line:#cfc9bb;--accent:#a74026;--ink:#17130f;--night:#120E0B;--chalk:#F4EEE2;--gold:#D8B36E;--sanguine:#9E4B2D;--flame:#EE7A2D}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg)}a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button{font:inherit}
.page{max-width:1250px;margin:auto;padding:0 5%}
header{display:flex;align-items:center;justify-content:space-between;padding:26px 0;border-bottom:1px solid var(--line);font-size:12px}
header a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.brand{font-size:23px;font-weight:700;letter-spacing:-1px}.brand span{color:var(--muted)}
.meta{color:var(--accent);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;margin:34px 0 0}
h1{font-family:Georgia,serif;font-size:clamp(32px,5vw,52px);font-weight:400;line-height:1.15;margin:14px 0 12px}
h1 em{font-family:'Playfair Display',Georgia,serif;color:var(--accent);font-size:.72em}
.prose{font-family:Georgia,serif;font-size:17px;line-height:1.65;max-width:720px;color:var(--muted);margin:0 0 26px}
.player{background:var(--ink);border:1px solid var(--line);box-shadow:0 12px 30px #252f2c12}
.frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.frame:fullscreen{aspect-ratio:auto;width:100%;height:100%;background:#000}
.frame iframe{display:block;width:100%;height:100%;border:0;background:var(--ink)}
.live{position:absolute;inset:0;display:grid;place-items:center;color:#f8e6c5;background:radial-gradient(circle at 50% 38%,#f2cf8b 0 4%,#bf6a3b 15%,#573329 43%,#17130f 78%)}
.live .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;mix-blend-mode:luminosity}
.live:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#ee7a2d40,#17130fcc 80%);pointer-events:none}
.live .title{position:absolute;top:26%;left:50%;width:90%;text-align:center;transform:translate(-50%,-50%);z-index:1;font:italic clamp(28px,7vw,84px)/1.08 'Playfair Display',Georgia,serif;color:#f8e6c5;text-shadow:0 0 30px #ff9a3d99;pointer-events:none}
.start{position:relative;z-index:1;margin-top:18%;border:1px solid #f5d39b;background:#17130fcc;color:#f8e6c5;padding:14px 22px;cursor:pointer;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;transition:background .2s,color .2s}
.start:hover{background:#f8e6c5;color:var(--ink)}
.bar{display:flex;gap:10px 24px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:14px 0 8px;font-size:15px}
.bar a{text-decoration:underline;text-underline-offset:4px}.bar a:hover{opacity:.7}
.bar a.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border:1px solid var(--fg);color:var(--fg);font-size:15px;text-decoration:none;transition:background .2s,color .2s}
.bar a.btn:hover{background:var(--fg);color:var(--bg);opacity:1}
footer{border-top:1px solid var(--line);margin-top:40px;display:flex;justify-content:space-between;padding:24px 0 35px;font-size:11px;color:var(--muted)}
/* unified MP4 player: same look as the Promethean player */
.vid{position:absolute;inset:0;background:var(--night);font-family:Jost,Futura,'Century Gothic',sans-serif;color:var(--chalk)}
.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--night)}
.vid .hud{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:34px 16px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(#0000,#120e0bd9);opacity:0;transition:opacity .3s ease}
.vid .hud.show,.vid .hud:focus-within{opacity:1}
.vid button{display:grid;place-items:center;width:40px;height:40px;flex:none;border:0;border-radius:50%;background:#120e0b9e;color:var(--chalk);cursor:pointer;padding:0}
.vid button:hover{background:var(--chalk);color:var(--night)}
.vid button svg{fill:currentColor}
.vid .time{font-size:13px;letter-spacing:.08em;color:#CDBFA6;white-space:nowrap;font-variant-numeric:tabular-nums}
.vid .seek{position:relative;flex:1;height:22px;cursor:pointer;touch-action:none}
.vid .seek:before{content:'';position:absolute;left:0;right:0;top:10px;height:2px;background:#f4eee24d}
.vid .fill{position:absolute;left:0;right:0;top:10px;height:2px;background:var(--sanguine);transform-origin:0 50%;transform:scaleX(0)}
.vid .knob{position:absolute;top:5px;left:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--chalk)}
.vid .vol{-webkit-appearance:none;appearance:none;background:transparent;width:90px;height:22px;margin:0;cursor:pointer}
.vid .vol::-webkit-slider-runnable-track{height:2px;background:#f4eee280}.vid .vol::-moz-range-track{height:2px;background:#f4eee280}
.vid .vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-5px;border-radius:50%;background:var(--chalk);border:0}
.vid .vol::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--chalk)}
.vid .status{position:absolute;left:0;right:0;top:50%;text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9C8F7A;pointer-events:none}
@media(max-width:600px){.prose{font-size:16px}.start{margin-top:30%;min-height:44px}.vid .vol{display:none}.vid .hud{gap:8px;padding-left:10px;padding-right:10px}}