/* Layout: one long dark reel. A single rust "loose thread" runs down the left edge and ties every section together; series sit in a grid of case-file tabs. */
:root{
  color-scheme:dark;
  --bg:#0f0d0b;        /* charcoal, warm */
  --panel:#191512;     /* raised surface */
  --line:#2e2620;      /* hairlines */
  --cream:#efe4d0;     /* main text */
  --muted:#a89a87;     /* secondary text */
  --rust:#b5562f;      /* thread + buttons */
  --gold:#c9a35c;      /* overlines */
  --display:"Lora",Georgia,"Times New Roman",serif;
  --body:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--bg);color:var(--cream);font-family:var(--body);font-size:17px;line-height:1.6;margin:0;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;position:relative}
h1,h2,h3{font-family:var(--display);font-weight:700;text-wrap:balance;margin:0}
p{margin:0}
.over{font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

/* the thread */
.thread{position:absolute;left:-2px;top:0;bottom:0;width:2px;background:linear-gradient(var(--rust),var(--rust) 60%,transparent);opacity:.55}
@media (max-width:1180px){.thread{display:none}}

/* nav */
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);margin:0 calc(-1*max(16px,env(safe-area-inset-left,0px)));padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.1rem}
.brand svg{width:30px;height:30px;flex:none}
.links{display:flex;gap:20px;align-items:center;font-size:.92rem}
.links a{text-decoration:none;color:var(--muted)}
.links a:hover{color:var(--cream)}
.links a.btn-rust{color:#fff8ef}


.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;font-weight:600;font-size:.95rem;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:var(--body)}
.btn-rust{background:var(--rust);color:#fff8ef}
.btn-rust:hover{filter:brightness(1.1)}
.btn-ghost{border-color:var(--line);color:var(--cream);background:transparent}
.btn-ghost:hover{border-color:var(--muted)}
.btn-sm{padding:8px 14px;font-size:.85rem}

section{padding-block:72px;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
.head{display:flex;flex-direction:column;gap:10px;margin-bottom:32px;max-width:65ch}
.head h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.head p{color:var(--muted)}

/* hero */
.hero{padding-block:64px 72px;display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.hero>*{min-width:0}
.hero h1{font-size:clamp(2.8rem,8vw,5.2rem);line-height:.98;letter-spacing:-.01em}
.hero h1 em{font-style:italic;font-weight:400;color:var(--rust)}
.hero .lede{font-size:1.15rem;color:var(--muted);max-width:44ch;margin-top:20px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:32px;padding-block:40px 56px}}

/* video slots */
.screen{position:relative;aspect-ratio:16/9;max-width:100%;background:radial-gradient(120% 90% at 30% 20%,#2a2019,var(--panel) 60%);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:grid;place-items:center}
.screen.tall{aspect-ratio:9/16}
.screen video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.slot{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:20px;color:var(--muted)}
.slot .play{width:54px;height:54px;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center}
.slot .play::after{content:"";border-left:14px solid var(--gold);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.slot b{font-family:var(--display);color:var(--cream);font-size:1.05rem;font-weight:600}
.slot small{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.caption{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:.85rem;color:var(--muted)}
.caption span:first-child{color:var(--cream);font-weight:500}

/* latest */
.latest{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ep{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px;display:flex;flex-direction:column;gap:12px;min-width:0}
.ep .tag{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pill{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pill.live{border-color:var(--rust);color:var(--rust)}
.ep h3{font-size:1.4rem}
.ep p{color:var(--muted);font-size:.95rem}
.ep ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:.9rem}
.ep li{display:flex;gap:10px}
.ep li::before{content:"";flex:none;width:14px;height:1px;background:var(--rust);margin-top:.8em}
.ep .go{margin-top:auto;padding-top:8px;font-weight:600;color:var(--cream);text-decoration:none;font-size:.92rem}
.ep .go:hover{color:var(--rust)}
@media (max-width:900px){.latest{grid-template-columns:1fr}}

/* trailers */
.trailers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.trailers>*{min-width:0}
@media (max-width:900px){.trailers{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.trailers{grid-template-columns:1fr}}

/* shorts */
.shorts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.shorts>*{min-width:0}
@media (max-width:760px){.shorts{grid-template-columns:repeat(2,1fr)}}

/* series files */
.files{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 18px}
@media (max-width:900px){.files{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.files{grid-template-columns:1fr}}
.file{position:relative;padding-top:14px;min-width:0;text-decoration:none}
.file::before{content:attr(data-no);position:absolute;top:0;left:0;height:16px;padding:0 12px;background:var(--panel);border:1px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--gold);line-height:16px}
.file .card{background:var(--panel);border:1px solid var(--line);border-radius:0 8px 8px 8px;padding:18px;display:flex;flex-direction:column;gap:6px;height:100%;transition:border-color .2s}
.file:hover .card{border-color:var(--rust)}
.file h3{font-size:1.2rem;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.file p{color:var(--muted);font-size:.9rem}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.about>*{min-width:0}
.about blockquote{margin:0;font-family:var(--display);font-style:italic;font-size:clamp(1.6rem,3.6vw,2.3rem);line-height:1.25;border-left:2px solid var(--rust);padding-left:22px}
.about .copy{display:flex;flex-direction:column;gap:16px;color:var(--muted);max-width:60ch}
.about .copy strong{color:var(--cream);font-weight:600}
@media (max-width:860px){.about{grid-template-columns:1fr;gap:28px}}

/* follow */
.follow{text-align:left;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:36px}
.follow h2{font-size:clamp(1.8rem,4vw,2.4rem)}
.follow p{color:var(--muted);margin-top:8px;max-width:48ch}
.mail{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;font-family:var(--mono);font-size:.88rem;color:var(--cream)}
.mail button{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font:inherit;font-size:.75rem;cursor:pointer}
.mail button:hover{color:var(--cream);border-color:var(--muted)}

footer{padding-block:36px 48px;color:var(--muted);font-size:.85rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid var(--line)}
footer a{text-decoration:none}
footer a:hover{color:var(--cream)}

@keyframes fray{from{stroke-dashoffset:520}to{stroke-dashoffset:0}}
.coil-big path.c{stroke-dasharray:520;animation:fray 2.4s ease-out both}

/* tall pop-up player for Shorts */
.shortbtn{all:unset;cursor:pointer;position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(transparent 55%,rgba(0,0,0,.55))}
.shortbtn .play{width:58px;height:58px;border-radius:50%;background:rgba(15,13,11,.6);border:1.5px solid var(--gold);display:grid;place-items:center}
.shortbtn .play::after{content:"";border-left:15px solid var(--gold);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.shortbtn:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.pop{position:fixed;inset:0;z-index:50;background:rgba(8,7,6,.92);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.pop video{height:min(88vh,calc((100vw - 32px)*16/9));aspect-ratio:9/16;max-width:100%;border-radius:10px;background:#000}
.pop .x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));background:var(--panel);color:var(--cream);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font:600 .9rem var(--body);cursor:pointer}

/* multi-page nav */
.links a.tab[aria-current="page"]{color:var(--cream);box-shadow:inset 0 -2px 0 var(--rust);padding-bottom:4px}
.menu{display:none;background:transparent;border:1px solid var(--line);color:var(--cream);border-radius:999px;padding:7px 14px;font:600 .85rem var(--body);cursor:pointer}
@media (max-width:900px){
  .menu{display:inline-flex}
  .links{gap:10px}
  .brand{white-space:nowrap;font-size:1rem}
  .links .tabs{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:6px 16px 12px}
  .links .tabs.open{display:flex}
  .links .tabs a{padding:12px 4px;border-bottom:1px solid var(--line)}
  .links a.tab[aria-current="page"]{box-shadow:none;color:var(--rust)}
}
.tabs{display:flex;gap:20px;align-items:center}
nav .wrap{position:static}
nav{position:sticky}
.pagehead{padding-block:56px 8px}
.pagehead h1{font-size:clamp(2.4rem,6vw,4rem);line-height:1.02}
.pagehead p.lede{color:var(--muted);font-size:1.1rem;max-width:56ch;margin-top:16px}
.pagehead + section{border-top:0;padding-top:40px}
/* game files */
body.game{--rust:#2fa82f}
body.game .btn-rust{background:#1d7a1d;color:#fff}
.vault{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:28px}
.vault .icon{width:64px;height:64px;border-radius:14px;background:color-mix(in srgb,var(--rust) 18%,var(--panel));display:grid;place-items:center;border:1px solid var(--rust)}
.vault h2{font-size:clamp(1.5rem,3vw,2rem)}
.vault p{color:var(--muted);margin-top:6px;max-width:52ch}
@media (max-width:760px){.vault{grid-template-columns:1fr}}
.gamelist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.gamelist li{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);min-width:0}
.gamelist .no{font-family:var(--mono);font-size:.8rem;color:var(--rust);padding-top:3px;flex:none;width:2ch}
.gamelist b{display:block;font-family:var(--display);font-weight:600;font-size:1.05rem}
.gamelist small{display:block;color:var(--muted);font-size:.9rem}
@media (max-width:760px){.gamelist{grid-template-columns:1fr}}