:root{--ink:#18211d;--muted:#6b746f;--paper:#f5f3ec;--card:#fffefa;--line:#deddd5;--accent:#d64d36;--dark:#26342e}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.sidebar{position:fixed;inset:0 auto 0 0;width:260px;background:var(--dark);color:#eef1ed;padding:32px 20px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;color:white;text-decoration:none;font-family:Georgia,serif;font-size:25px;font-weight:700;margin:0 10px 46px}.brand-mark{display:grid;place-items:center;width:34px;height:29px;border-radius:9px;background:var(--accent);font-size:13px}.nav-label{margin:34px 13px 12px;color:#9eaaa4;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.nav-item{width:100%;border:0;background:transparent;color:#cbd2ce;padding:12px 13px;border-radius:10px;text-align:left;font:inherit;font-weight:600;display:flex;align-items:center;gap:12px;cursor:pointer}.nav-item:hover,.nav-item.active{background:#35473f;color:white}.nav-item b{margin-left:auto;background:#526159;border-radius:12px;padding:2px 8px;font-size:11px}.dot{width:8px;height:8px;border-radius:50%;background:#ddd}.coral{background:#f07c67}.gold{background:#e9bb57}.blue{background:#6a9fc5}.green{background:#72a37d}.sidebar-footer{margin-top:auto}main{margin-left:260px;padding:0 52px 60px;max-width:1600px}.topbar{height:145px;display:flex;align-items:center;justify-content:space-between}.eyebrow{margin:0 0 7px;color:#8b8d86;font-size:11px;font-weight:800;letter-spacing:.13em}.topbar h1{font:700 34px/1.1 Georgia,serif;margin:0}.top-actions{display:flex;gap:12px}.icon-button,.avatar{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--card);font-size:22px}.avatar{background:var(--dark);color:#fff;font-size:12px;font-weight:800}.hero{height:335px;display:grid;grid-template-columns:55% 45%;overflow:hidden;border-radius:20px;background:#d9cab7;box-shadow:0 16px 35px #29342e17}.hero-art{position:relative;background:linear-gradient(135deg,#9ba79d,#485c53);overflow:hidden}.hero-art:before,.hero-art:after{content:"";position:absolute;background:#d8d0bd}.hero-art:before{width:55%;height:78%;left:9%;top:17%;clip-path:polygon(10% 35%,60% 0,100% 20%,96% 100%,0 100%)}.hero-art:after{width:34%;height:58%;right:6%;bottom:0;background:#687a70;clip-path:polygon(50% 0,100% 22%,82% 100%,0 100%,5% 25%)}.play{position:absolute;z-index:2;left:47%;top:45%;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;color:var(--accent);box-shadow:0 8px 25px #23302944}.hero-copy{padding:45px 48px;background:#e8dfd0;display:flex;flex-direction:column;justify-content:center}.pill{align-self:flex-start;background:#f8f1e7;color:var(--accent);padding:6px 9px;border-radius:5px;font-size:10px;font-weight:900;letter-spacing:.12em}.hero-copy h2{font:700 30px/1.13 Georgia,serif;margin:15px 0 8px}.hero-copy p{color:#5e6661;line-height:1.55;margin:8px 0}.hero-copy .channel{font-size:13px;font-weight:700;color:#37423d}.button-row{display:flex;gap:10px;margin-top:15px}.button-row button{padding:12px 17px;border-radius:9px;border:0;font-weight:750}.primary{background:var(--accent);color:white}.secondary{background:#f7f4ed;color:var(--ink)}.feed{padding-top:44px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.section-heading h2{font:700 25px Georgia,serif;margin:0 0 5px}.section-heading p{color:var(--muted);font-size:13px;margin:0}.filters{display:flex;gap:3px;padding:4px;background:#e9e7df;border-radius:10px}.filter{border:0;border-radius:7px;background:transparent;padding:7px 14px;color:var(--muted);font-weight:700}.filter.active{background:var(--card);color:var(--ink);box-shadow:0 2px 6px #2221}.video-grid{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:22px}.video-card{min-width:0}.thumb{height:145px;border-radius:12px;position:relative;overflow:hidden;background:#999}.thumb:before,.thumb:after{content:"";position:absolute}.t1{background:linear-gradient(145deg,#70818c,#b99e7a)}.t1:before{inset:24% 15% 0;background:#d6c49b;clip-path:polygon(0 30%,65% 0,100% 20%,95% 100%,5% 100%)}.t2{background:linear-gradient(135deg,#c49155,#473629)}.t2:before{width:45%;height:70%;left:28%;bottom:0;background:#292a27;border-radius:60px 60px 0 0}.t3{background:linear-gradient(140deg,#6c8493,#17262f)}.t3:before{inset:20%;background:#cbd7d8;border:8px solid #26383e;transform:perspective(120px) rotateX(6deg)}.t4{background:linear-gradient(#5d7180 0 48%,#172f2a 49%)}.t4:before{left:14%;bottom:0;width:65%;height:48%;background:#ad593c;clip-path:polygon(0 100%,50% 0,100% 100%)}.duration{position:absolute;z-index:2;right:8px;bottom:8px;background:#19231fcf;color:white;border-radius:5px;padding:4px 6px;font-size:10px;font-weight:700}.save{position:absolute;z-index:2;right:8px;top:8px;width:30px;height:30px;border:0;border-radius:50%;background:#fffdf0d9;font-size:18px}.card-meta{display:flex;gap:10px;padding-top:13px}.channel-dot{flex:0 0 auto;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#a8554b;color:#fff;font-size:9px;font-weight:900}.channel-dot.yellow{background:#b58a35}.channel-dot.blue{background:#427694}.channel-dot.green{background:#477359}.card-meta h3{font:700 16px/1.25 Georgia,serif;margin:0 0 6px}.card-meta p{margin:0;color:var(--muted);font-size:11px}@media(max-width:1050px){.video-grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:45% 55%}.hero-copy{padding:30px}.hero-copy h2{font-size:25px}}@media(max-width:760px){.sidebar{position:static;width:auto;height:auto;padding:18px}.sidebar nav,.nav-label,.sidebar-footer{display:none}.brand{margin:0}main{margin:0;padding:0 20px 40px}.topbar{height:115px}.hero{display:block;height:auto}.hero-art{height:210px}.hero-copy{padding:27px}.video-grid{grid-template-columns:1fr}.section-heading{align-items:start;gap:15px;flex-direction:column}}
/* Strong focus indicator for directional TV remotes. */
.tv-mode button:focus,
.tv-mode a[href]:focus,
.tv-mode select:focus,
.tv-mode input:focus,
.tv-mode [tabindex]:focus {
  outline: 5px solid #f1bd59 !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(32, 55, 47, .85) !important;
}
.tv-mode.tv-video-open > .sidebar,
.tv-mode.tv-video-open > main { visibility: hidden; }
.tv-mode .sidebar { top: 0; bottom: 0; height: auto; min-height: 100vh; }
.tv-mode main { max-width: none; padding-right: 64px; }
.tv-mode .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 32px; }
.tv-mode .thumb { height: 300px; }
.tv-mode .card-meta h3 { font-size: 28px; line-height: 1.2; }
.tv-mode .card-meta p { font-size: 19px; }
.tv-mode .channel-dot { width: 44px; height: 44px; font-size: 12px; }
.tv-mode .duration { padding: 5px 8px; font-size: 14px; }
.tv-mode .nav-item { padding-top: 14px; padding-bottom: 14px; font-size: 18px; }
.tv-mode .nav-label { font-size: 13px; }
.tv-mode .section-heading h2 { font-size: 32px; }
.tv-mode .section-heading p,.tv-mode .feed-status { font-size: 16px; }
.tv-mode .channel-feed-filter,.tv-mode .days-filter { font-size: 16px; }
.tv-mode select[data-tv-selecting="1"] { position: relative; z-index: 1000; min-width: 360px; padding: 10px; background: #fffefa; font-size: 18px; }
.tv-mode select[data-tv-selecting="1"] option { padding: 8px; }
.tv-mode .sidebar,
.tv-mode main { transition: margin-left .22s ease, width .22s ease, padding .22s ease; }
.tv-mode.tv-sidebar-collapsed .sidebar { width: 76px; padding-left: 10px; padding-right: 10px; overflow: hidden; }
.tv-mode.tv-sidebar-collapsed main { margin-left: 76px; }
.tv-mode.tv-sidebar-collapsed .brand { width: 40px; margin-left: 7px; overflow: hidden; white-space: nowrap; }
.tv-mode.tv-sidebar-collapsed .brand-mark { flex: 0 0 34px; }
.tv-mode.tv-sidebar-collapsed .nav-label { visibility: hidden; white-space: nowrap; }
.tv-mode.tv-sidebar-collapsed .nav-item { width: 56px; height: 52px; overflow: hidden; white-space: nowrap; gap: 18px; }
.tv-mode.tv-sidebar-collapsed .nav-item > span,
.tv-mode.tv-sidebar-collapsed .nav-item > i { flex: 0 0 18px; text-align: center; }
.tv-mode.tv-sidebar-collapsed .nav-item b { display: none; }
