/* Watch pages (SITE-008). Same ground, type and copper as the main page; one player per page, nothing else moving. */
@font-face { font-family: "Averia Libre"; font-weight: 700; font-display: swap; src: url(../fonts/averia-libre-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Coming Soon"; font-display: swap; src: url(../fonts/coming-soon-400.woff2) format("woff2"); }
@font-face { font-family: "OpenDyslexic"; font-display: swap; src: url(../fonts/opendyslexic-regular.woff) format("woff"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400 600; font-display: swap; src: url(../fonts/jetbrainsmono-400-600-latin.woff2) format("woff2"); }
:root { --ground: #11100f; --acc: #d0915a; --hi: #ecb07c; --text: #e6ded4; --dim: #a39a8f; --paper: #1e1b18; --paper-edge: #3b342c;
  --tape: #d9c7a2; --ink: #231a12; --focus: #6fc3d6; }
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; min-height: 100vh; background: var(--ground); color: var(--text); font: 17px/1.7 "OpenDyslexic", system-ui, sans-serif; }
main { width: min(100%, 1120px, calc((100vh - 230px) * var(--ar) + 56px)); min-width: min(100%, 560px); margin: 0 auto; padding: 18px 20px 48px; }
.home { display: inline-flex; align-items: center; gap: 8px; color: var(--acc); font: 700 17px "Averia Libre", serif; text-decoration: none; }
.home:hover { color: var(--hi); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1 { margin: 14px 0 12px; font: 700 clamp(30px, 5vw, 44px)/1.1 "Averia Libre", serif; color: var(--hi); }
.frame { padding: 6px; background: var(--paper); box-shadow: 0 0 0 1px var(--paper-edge), 0 10px 18px #000b; }
video { display: block; width: 100%; height: auto; background: #000; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 18px 0 0; font: 13px/1.3 "JetBrains Mono", monospace; color: var(--dim); }
.meta .tape { padding: 3px 10px 4px; background: var(--tape); color: var(--ink); font: 15px/1.2 "Coming Soon", cursive; transform: rotate(-1.2deg); }
.about { max-width: 42em; margin: 14px 0 0; }
@media (max-width: 760px) { body { font-size: 15px; } main { padding: 14px 12px 36px; } .frame { padding: 4px; } }