/* Self-hosted fonts (SIL Open Font License 1.1, see fonts/OFL-*.txt). Replaces the Google Fonts link in the reference. */
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/archivo-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/archivo-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:500;src:url(fonts/jetbrains-mono-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:500;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Layout: a video-channel page. Top bar, banner, channel header with subscribe, tabs, then a featured player and grids of episodes. Single black-and-red theme by design. */
:root{
  --bg:#000000; --surface:#151517; --surface-2:#212124; --line:#2a2a2e;
  --fg:#f2f2f2; --muted:#9b9ba1;
  --red:#e3202e; --red-deep:#7a0d15; --on-red:#ffffff;
  --ui:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:15px/1.5 var(--ui)}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{margin:0;text-wrap:balance;line-height:1.15}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.top .wrap{display:flex;align-items:center;gap:1rem;height:60px}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:900;font-size:1.25rem;letter-spacing:-.02em;flex:none}
.mark{width:38px;height:auto;display:block}
.search{flex:1;max-width:560px;margin:0 auto;display:flex;min-width:0}
.search input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-right:0;border-radius:999px 0 0 999px;color:var(--fg);padding:.55rem 1rem;font:inherit}
.search button{background:var(--surface-2);border:1px solid var(--line);border-radius:0 999px 999px 0;padding:0 1.1rem;cursor:pointer;color:var(--muted)}
.top-cta{flex:none;background:var(--fg);color:var(--bg);border:0;border-radius:999px;padding:.5rem 1rem;font-weight:700;cursor:pointer}
@media(max-width:640px){.search{display:none}.top .wrap{justify-content:space-between}}

/* banner */
.banner{margin-top:.5rem;border-radius:16px;overflow:hidden;aspect-ratio:6.2/1;min-height:110px;max-width:100%;position:relative;
  background:
    repeating-linear-gradient(-45deg,transparent 0 22px,rgb(0 0 0 / .25) 22px 44px),
    linear-gradient(100deg,var(--bg) 0%,var(--red-deep) 55%,var(--red) 100%)}
.banner span{position:absolute;right:4%;top:50%;transform:translateY(-50%);font:900 clamp(1.4rem,5vw,3.6rem)/1 var(--ui);letter-spacing:-.03em;text-transform:uppercase;color:var(--on-red)}
.banner small{position:absolute;left:4%;top:50%;transform:translateY(-50%);font:500 clamp(.6rem,1.3vw,.85rem) var(--mono);letter-spacing:.2em;color:var(--muted)}

/* channel head */
.channel{display:flex;gap:1.5rem;align-items:center;padding-block:1.5rem 1rem;flex-wrap:wrap}
.avatar{width:140px;height:140px;border-radius:50%;flex:none;object-fit:cover;background:#000;border:1px solid var(--line)}
.meta{display:grid;gap:.5rem;min-width:0;flex:1}
.meta h1{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:.5rem}
.meta .sub{color:var(--muted)}
.meta .sub b{color:var(--fg);font-weight:600}
.meta .desc{color:var(--muted);max-width:44rem}
.subrow{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.3rem}
.subscribe{background:var(--red);color:var(--on-red);border:0;border-radius:999px;padding:.6rem 1.2rem;font-weight:700;cursor:pointer}
.subscribe.on{background:var(--surface-2);color:var(--fg)}
.pill{background:var(--surface-2);border:0;border-radius:999px;padding:.6rem 1.1rem;font-weight:600;cursor:pointer}
@media(max-width:600px){.avatar{width:80px;height:80px}}

/* tabs */
.tabs{display:flex;gap:1.6rem;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:.8rem 0;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--fg);border-color:var(--fg)}

.panel{padding-block:1.8rem 3rem;display:grid;gap:2.8rem}
.row-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.row-h h2{font-size:1.3rem;font-weight:700}
.row-h span{color:var(--muted);font-size:.9rem}

/* featured */
.featured{display:grid;grid-template-columns:1.25fr 1fr;gap:1.6rem;align-items:start}
.featured > *{min-width:0}
.player{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:12px;overflow:hidden;background:var(--surface);display:grid;place-items:center}
.player > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.player > *:not(img){position:relative}
.player .over,.player .play,.player .prog{position:absolute}
.player .clock{text-shadow:0 2px 20px rgb(0 0 0 / .6)}
.player .clock{font:500 clamp(3rem,10vw,6.5rem)/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.player .clock.alert{color:var(--red)}
.player .over{position:absolute;left:16px;top:14px;font:500 .72rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.player .play{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);background:var(--red);color:var(--on-red);border:0;border-radius:999px;padding:.45rem 1rem;font-weight:700;cursor:pointer;font-size:.85rem}
.prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgb(255 255 255 / .15)}
.prog i{display:block;height:100%;width:0;background:var(--red)}
.feat-info{display:grid;gap:.7rem}
.feat-info h3{font-size:1.45rem;font-weight:700}
.feat-info .m{color:var(--muted);font-size:.9rem}
.feat-info p{color:var(--muted)}

/* video grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem 1rem}
@media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.grid{grid-template-columns:1fr}}
.vid{display:grid;gap:.6rem;min-width:0}
.thumb{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:12px;overflow:hidden;background:var(--surface);display:flex;align-items:flex-end;padding:.8rem}
.thumb b{font:900 clamp(1.1rem,2.4vw,1.6rem)/1 var(--ui);text-transform:uppercase;letter-spacing:-.02em;position:relative}
.thumb.r{background:linear-gradient(135deg,var(--red-deep),var(--surface) 70%)}
.thumb.k{background:linear-gradient(135deg,var(--surface-2),var(--bg))}
.thumb > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.6)}
.thumb.s{background:repeating-linear-gradient(-45deg,var(--surface) 0 14px,var(--surface-2) 14px 28px)}
.chip{position:absolute;right:8px;bottom:8px;background:rgb(0 0 0 / .8);color:var(--fg);font:500 .7rem var(--mono);padding:.15rem .4rem;border-radius:4px;letter-spacing:.06em}
.chip.red{background:var(--red);color:var(--on-red)}
.vid h3{font-size:.98rem;font-weight:600}
.vid .m{color:var(--muted);font-size:.85rem}

/* shorts */
.shorts{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem}
@media(max-width:900px){.shorts{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.shorts{grid-template-columns:repeat(2,1fr)}}
.short{display:grid;gap:.5rem;min-width:0}
.short .card{aspect-ratio:9/16;max-width:100%;border-radius:12px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:.9rem;
  background:linear-gradient(180deg,var(--surface-2),var(--bg))}
.short:nth-child(odd) .card{background:linear-gradient(180deg,var(--red-deep),var(--bg) 75%)}
.short .card{justify-content:flex-start;gap:.5rem}
.short .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.short .card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(0 0 0 / .75),transparent 40%)}
.short .card > span{position:relative;z-index:1}
.short .card .chip{position:absolute}
.short .q{font:900 4rem/1 var(--ui);color:var(--red);align-self:center;position:relative;z-index:1}
.short .n{font:500 .7rem var(--mono);letter-spacing:.16em;color:var(--muted)}
.short .big{font:900 clamp(1.4rem,3vw,2rem)/.95 var(--ui);text-transform:uppercase;letter-spacing:-.02em}
.short h3{font-size:.92rem;font-weight:600}
.short .m{color:var(--muted);font-size:.82rem}

/* about */
.about{display:grid;grid-template-columns:1.4fr 1fr;gap:2.5rem;align-items:start}
.about > *{min-width:0}
.about h2{font-size:1.3rem;margin-bottom:.8rem}
.about p{color:var(--muted);max-width:44rem}
.about .block{display:grid;gap:.8rem}
.box{background:var(--surface);border-radius:12px;padding:1.4rem;display:grid;gap:1rem}
.box ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem;color:var(--muted)}
.box li::before{content:"▸ ";color:var(--red)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:s}
.steps li{display:grid;grid-template-columns:2rem 1fr;gap:.8rem;counter-increment:s}
.steps li::before{content:counter(s);width:2rem;height:2rem;border-radius:50%;background:var(--red);color:var(--on-red);display:grid;place-items:center;font-weight:800;font-size:.9rem}
.steps b{display:block;color:var(--fg)}
.steps span{color:var(--muted)}
form{display:grid;gap:.7rem}
label{font-size:.85rem;font-weight:600;display:grid;gap:.35rem}
input[type=email]{background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--fg);padding:.7rem .85rem;font:inherit;width:100%}
.msg{font-size:.88rem;color:var(--fg)}
.copyline{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.copyline code{font:500 .95rem var(--mono);user-select:all}
.copy{background:var(--surface-2);border:0;border-radius:999px;padding:.35rem .8rem;font-size:.8rem;font-weight:600;cursor:pointer}
.handles{display:grid;gap:.4rem;font-size:.92rem}
.handles div{display:flex;justify-content:space-between;gap:1rem;color:var(--muted)}
.handles b{color:var(--fg);font-weight:600}
@media(max-width:820px){.featured,.about{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-block:1.6rem;color:var(--muted);font-size:.85rem}