:root{
  --bg:#000;
  --fg:#f2eee8;
  --muted:#9d968d;
  --line:#2a2622;
  --ember:#f08227;
  --bar:96px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg)}
body{font:16px/1.6 ui-sans-serif,-apple-system,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--fg);text-underline-offset:3px;text-decoration-color:var(--ember)}
a:hover{color:var(--ember)}

/* Stage: video as large as possible, 16:9, leaving room for the year bar */
.stage{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.player{
  position:relative;
  width:min(100vw, calc((100svh - var(--bar)) * 16 / 9));
  aspect-ratio:16/9;
  background:#050403 url('../og-fireplace.jpg') center/cover no-repeat;
  overflow:hidden;
}
.player.still{background:#000}
.player iframe,.player video,.player > div:not(.empty){position:absolute;inset:0;width:100%;height:100%;border:0}
/* The Privacy Player is an iframe whose own page is white. At fractional sizes the video
   inside can end a sub-pixel short of the edge, leaving hairline white lines. The stage is
   sized to whole pixels in JS, and the iframe overscans by 1px on every side as a safety net. */
.player iframe{position:absolute !important;top:-1px !important;left:-1px !important;width:calc(100% + 2px) !important;height:calc(100% + 2px) !important;border:0 !important;background:#000;display:block}
.empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;color:var(--fg);background:rgba(0,0,0,.45);text-shadow:0 1px 8px #000;font-size:14px;letter-spacing:.08em;text-transform:uppercase}

/* Version links */
.years{min-height:72px;padding:12px 16px 4px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;}
.years a{
  display:inline-flex;align-items:center;
  font-size:14px;letter-spacing:.06em;color:var(--muted);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;
  min-height:44px;padding:0 20px;transition:color .2s,border-color .2s;
}
.years a:hover{color:var(--fg);border-color:#4a433c}
.years a[aria-current="page"]{color:var(--fg);border-color:var(--ember)}
.years a:focus-visible{outline:2px solid var(--ember);outline-offset:2px}

/* Text below the fold: short, useful, crawlable */
main{max-width:680px;margin:0 auto;padding:72px 20px 24px}
.crumbs{font-size:14px;color:var(--muted);margin:0 0 16px}
.crumbs a{color:var(--muted)}
h1{font-size:clamp(28px,4vw,40px);line-height:1.15;font-weight:600;letter-spacing:-.01em;margin:0 0 16px}
h2{font-size:20px;font-weight:600;margin:48px 0 8px}
p{margin:0 0 12px;color:#cfc8bf}
ul{margin:0 0 12px;padding-left:20px;color:#cfc8bf}
li{margin:4px 0}
.lead{font-size:18px;color:var(--fg)}
details{border-top:1px solid var(--line);padding:14px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--muted)}
details[open] summary::after{content:"\2212"}
details p{margin-top:8px}

footer{max-width:680px;margin:0 auto;padding:48px 20px 56px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:14px}
footer a{color:var(--fg)}

/* Chromecast opt-in */
.cast{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 16px 16px;max-width:760px;margin:0 auto;text-align:center}
.switch{display:inline-flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.06em;color:var(--fg);cursor:pointer;min-height:44px}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .track{position:relative;width:40px;height:22px;border-radius:999px;border:1px solid #4a433c;background:#14110f;transition:background .2s,border-color .2s;flex:none}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
.switch input:checked + .track{background:var(--ember);border-color:var(--ember)}
.switch input:checked + .track::after{transform:translateX(18px);background:#fff}
.switch input:focus-visible + .track{outline:2px solid var(--ember);outline-offset:2px}
#cast-hint{font-size:13px;color:var(--muted);line-height:1.4}