:root { --bg:#0b0c0e; --panel:#14161a; --line:#2a2d33; --fg:#e8e6e1; --dim:#a9adb4; --accent:#f3f4f6; }
* { box-sizing:border-box; }
html { background:var(--bg); color-scheme:dark; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--fg);
  font:18px/1.55 Georgia,'Times New Roman',serif; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:8px; top:-60px; background:var(--fg); color:var(--bg); padding:8px 14px; z-index:9; }
.skip:focus { top:8px; }
.hero { text-align:center; padding:clamp(40px,10vh,96px) 20px 24px; }
.mark { width:72px; height:72px; fill:var(--fg); }
.mark .eye { fill:var(--bg); }
h1 { font-weight:normal; letter-spacing:.14em; text-transform:uppercase; font-size:clamp(30px,7vw,64px); margin:.25em 0 .2em; }
.tagline { color:var(--dim); max-width:34em; margin:0 auto; }
main { flex:1; width:100%; max-width:1100px; margin:0 auto; padding:24px 20px 48px; }
.grid { list-style:none; margin:0; padding:0; display:grid; gap:24px; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); }
.card { height:100%; background:var(--panel); border:1px solid var(--line); border-radius:4px; overflow:hidden; display:flex; flex-direction:column; }
.card img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:#222; }
.body { padding:16px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
h3 { margin:0; font-weight:normal; letter-spacing:.06em; font-size:24px; }
.body p { margin:0; }
.note { color:var(--dim); font-size:15px; }
.touch { display:none; }
@media (hover:none) and (pointer:coarse) { .touch { display:block; } }
.play { margin-top:auto; align-self:flex-start; padding:10px 28px; border:1px solid var(--fg); border-radius:3px; color:var(--fg);
  text-decoration:none; letter-spacing:.14em; text-transform:uppercase; }
.play:hover { background:var(--fg); color:var(--bg); }
a:focus-visible { outline:3px solid #ffc48a; outline-offset:3px; }
footer { border-top:1px solid var(--line); padding:20px; text-align:center; color:var(--dim); font-size:15px; }
footer p { margin:0; }
@media (prefers-reduced-motion:no-preference) { .play { transition:background .15s,color .15s; } }