:root{--bg:#0c171c;--ink:#eef2ee;--muted:#9fb1b2;--dim:#7f9294;--line:rgba(238,242,238,.14);--accent:#e9b56f;--accent-ink:#1a1206}
*{box-sizing:border-box}
html{background:var(--bg)}html,body{margin:0;color:var(--ink);font:16px/1.5 -apple-system,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,p,figure,ul{margin:0}a{color:inherit;text-underline-offset:4px}a:hover{color:var(--accent)}a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;background:var(--bg)}
.shade{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,23,28,.5) 0%,rgba(12,23,28,.15) 30%,rgba(12,23,28,.45) 60%,rgba(12,23,28,.96) 100%)}
.page{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto auto;gap:0;padding:0 clamp(18px,3vw,44px) 16px;max-width:1500px;margin:auto}
.top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0 0;font-size:13px;color:var(--muted)}
.top a{text-decoration:none}.brand{letter-spacing:.6px;text-transform:uppercase;font-size:12px}
.intro{align-self:center;max-width:640px;padding:28px 0 22px}
h1{font-size:clamp(40px,5vw,66px);font-weight:500;letter-spacing:-1.8px;line-height:1;margin-bottom:12px}
.role{font-size:clamp(17px,1.6vw,22px);color:var(--ink);margin:0 0 16px;max-width:600px}
.premise{list-style:none;padding:0;margin:0;max-width:600px;display:grid;gap:9px;font-size:clamp(14px,1.15vw,16px);line-height:1.45;color:#dfe7e4}.premise li{padding-left:18px;position:relative}.premise li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--accent)}.premise b{color:var(--ink);font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.how{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:6px 0;font-size:14px;color:#d6dfdc;counter-reset:n}.how li{counter-increment:n}.how li::before{content:counter(n);display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;margin-right:8px}.how li+li{margin-left:18px}
.proof{margin-top:10px;font-size:13px;color:var(--muted)}
.btn{display:inline-block;padding:11px 22px;border-radius:999px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:600;font-size:14px;border:1px solid var(--accent)}
.btn:hover{background:#f2c78a;color:var(--accent-ink)}
.btn.ghost{background:rgba(12,23,28,.35);color:var(--ink);border-color:rgba(238,242,238,.45)}.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.does{list-style:none;padding:0;margin-top:20px;display:flex;flex-wrap:wrap;gap:6px 0;font-size:14px;color:#d6dfdc}
.does li+li::before{content:"·";margin:0 10px;color:var(--dim)}
.fine{margin-top:10px;font-size:12px;color:var(--muted)}
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding-top:12px}
.strip figure img{display:block;width:100%;height:clamp(120px,19vh,190px);object-fit:cover;border-radius:5px;background:#122026}
.strip figcaption{font-size:12px;color:var(--muted);padding:7px 2px 0}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:14px;padding-top:10px;border-top:1px solid var(--line);font-size:11px;color:var(--dim)}
@media(max-height:800px){.intro{padding:10px 0 8px}h1{margin-bottom:8px}.role{margin-bottom:10px}.premise{gap:5px}.how{margin-top:14px}.actions{margin-top:14px}.strip figure img{height:clamp(90px,14vh,140px)}}
@media(max-width:760px){.page{min-height:auto;padding-bottom:22px}.top a{display:none}.intro{padding:40px 0 26px;align-self:start}.strip{grid-template-columns:1fr 1fr}.strip figure:first-child{grid-column:1/-1}.strip figure img{height:150px}.foot{flex-direction:column;gap:6px}.bg,.shade{position:fixed}}
@media(max-width:460px){.strip{grid-template-columns:1fr}.how{display:block}.how li+li{margin:6px 0 0}.strip figure img{height:auto;aspect-ratio:16/9}.play-mark{width:64px;height:64px;margin:-32px 0 0 -32px}.viewer-box{width:100vw;padding:0}.viewer-box video{width:100%;max-height:60vh;background:#000}.viewer-cap{padding:10px 16px;font-size:13px}.viewer{padding:12px}.btn{padding:12px 18px}.foot span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.bg{display:none}body{background:url(media/hero-poster.jpg) center/cover fixed var(--bg)}}

/* Clip tile and in-place player */
.play{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:5px;overflow:hidden}
.play img{transition:transform .4s ease}.play:hover img{transform:scale(1.03)}
.play-mark{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(12,23,28,.72);border:1px solid rgba(238,242,238,.5)}
.play-mark::after{content:"";position:absolute;left:22px;top:17px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--ink)}
.play:hover .play-mark{background:var(--accent);border-color:var(--accent)}.play:hover .play-mark::after{border-left-color:var(--accent-ink)}
.play-len{position:absolute;right:10px;bottom:10px;font-size:12px;padding:3px 8px;border-radius:4px;background:rgba(12,23,28,.75);color:var(--ink)}
.play:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.viewer{position:fixed;inset:0;z-index:40;background:rgba(6,12,15,.94);display:flex;align-items:center;justify-content:center;padding:24px}
.viewer[hidden]{display:none}
.viewer-box{position:relative;width:min(1400px,100%);}
.viewer video{display:block;width:100%;height:auto;max-height:80vh;background:#000;border-radius:6px}
.viewer-cap{margin-top:12px;font-size:13px;color:var(--muted);max-width:900px}
.viewer-close{position:absolute;right:0;top:-44px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(238,242,238,.4);background:transparent;color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.viewer-close:hover{border-color:var(--accent);color:var(--accent)}
body.viewing{overflow:hidden}
@media(max-width:760px){.strip{grid-template-columns:1fr 1fr}.strip figure.clip{grid-column:1/-1}.strip figure.clip img{height:auto}}
.viewer-cap{min-height:1em}