/* Tribbo / catalog + channel: production UI specification; backend integration required. */
:root{--ink:#19143b;--purple:#7047ff;--purple-strong:#5d35ef;--yellow:#ffca43;--lav:#f2efff;--muted:#696684;--line:#e7e4ef;--bg:#fcfbff;--white:#fff;--radius:26px;--shadow:0 22px 60px rgba(25,20,59,.08);--max:1180px;--site-gutter:32px}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #7047ff;outline-offset:4px}
.container{width:min(var(--max),calc(100% - 2 * var(--site-gutter)));margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.muted{color:var(--muted)}

.header{height:82px;position:sticky;z-index:30;top:0;background:rgba(252,251,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid #ece8f4}
.header-row{height:100%;display:flex;align-items:center;gap:34px}
.logo{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.logo svg{width:34px;height:37px}
.logo b{font-size:28px;letter-spacing:-.08em;font-weight:900}
.nav{display:flex;gap:28px;margin-left:auto;align-items:center}
.nav a{font-size:14px;font-weight:650;color:var(--ink)}
.nav a:hover,.nav a[aria-current='page']{color:var(--purple)}
.nav a[aria-current='page']{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}
.btn{border:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 23px;font-weight:750;font-size:14px;line-height:1.2;min-height:49px;transition:transform .2s,background .2s,box-shadow .2s;text-align:center}
.btn:hover:not(:disabled){transform:translateY(-2px)}
.btn-primary{background:var(--purple);color:#fff;box-shadow:0 10px 25px #7047ff2a}
.btn-primary:hover:not(:disabled){background:var(--purple-strong)}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-ghost{border:1px solid #d9d3ec;background:#fff;color:var(--ink)}
.btn-small{min-height:43px;padding:12px 19px}
.btn-disabled,.btn:disabled{background:#e6e1fa;color:#645d86;box-shadow:none;opacity:1}
.menu-toggle{display:none;margin-left:auto;border:1px solid var(--line);background:#fff;width:44px;height:44px;border-radius:14px;align-items:center;justify-content:center;font-size:21px}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:13px;color:#747089;padding:26px 0}
.crumbs a{text-decoration:underline;text-underline-offset:3px}
.crumbs span[aria-hidden]{color:#b8aed5}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;text-transform:uppercase;letter-spacing:.135em;font-weight:850;color:#633cea}
.eyebrow::before{content:'';width:8px;height:8px;background:var(--purple);box-shadow:0 0 0 5px #7047ff18;border-radius:50%}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{letter-spacing:-.055em}
h1{font-size:clamp(43px,5.4vw,76px);line-height:1.05;font-weight:900;margin-bottom:21px}
h2{font-size:clamp(31px,3.5vw,47px);line-height:1.11;font-weight:870;margin-bottom:16px}
h3{font-size:23px;line-height:1.2;font-weight:800;letter-spacing:-.04em}
.lead{color:var(--muted);font-size:18px;line-height:1.6;max-width:650px}
.small{font-size:13px;line-height:1.55}
.section{padding:76px 0}
.section-tight{padding:48px 0}
.section-tint{background:var(--lav)}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:30px}
.section-heading p{max-width:520px;line-height:1.6;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:#efeafe;color:#5636c9;padding:8px 12px;font-size:12px;font-weight:760}
.chip-dot{width:7px;height:7px;background:var(--purple);border-radius:50%}

.catalog-hero{padding:74px 0 56px}
.catalog-hero-grid{display:grid;grid-template-columns:1.22fr .78fr;gap:54px;align-items:center}
.catalog-hero h1 .colored{color:var(--purple)}
.catalog-hero .lead{margin-bottom:25px}
.bullet-row{display:flex;gap:11px;flex-wrap:wrap}
.bullet-row .chip{background:#f2efff;color:#4f4774}
.hero-panel{border-radius:32px;background:var(--ink);min-height:320px;position:relative;overflow:hidden;padding:33px;color:#fff;box-shadow:0 24px 50px #19143b1d}
.hero-panel::before{content:'';position:absolute;width:280px;height:280px;right:-90px;top:-95px;border-radius:50%;border:50px solid #7150eb}
.hero-panel::after{content:'';position:absolute;width:250px;height:250px;right:-100px;bottom:-160px;border-radius:50%;background:#a995ff}
.hero-panel .micro{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#c6b9ff;position:relative}
.hero-panel strong{font-size:53px;line-height:1;letter-spacing:-.09em;display:block;margin:32px 0 10px;position:relative}
.hero-panel .panel-sub{font-size:18px;line-height:1.4;max-width:190px;font-weight:720;position:relative}
.hero-panel .panel-note{position:absolute;bottom:30px;font-size:12px;color:#e0d9ff;z-index:1}

.search-shell{background:#fff;box-shadow:0 16px 50px #19143b09;border:1px solid #eeebf7;border-radius:30px;padding:24px 25px 26px}
.search-head{display:flex;justify-content:space-between;gap:22px;align-items:center;margin-bottom:14px}
.search-head h2{font-size:28px;margin:0}
.count{color:var(--muted);font-size:13px;font-weight:700}
.search-row{display:flex;align-items:center;gap:12px;padding:8px 9px 8px 18px;border-radius:18px;background:#f8f6ff;border:1px solid #e9e4f4}
.search-row svg{width:21px;height:21px;stroke:#766d9a;stroke-width:2;fill:none;flex:none}
.search-row input{min-width:0;flex:1;border:0;background:transparent;outline:0;color:var(--ink);font-size:15px;padding:12px 0}
.search-row:focus-within{outline:2px solid #7047ff;outline-offset:2px}
.search-row input:focus-visible{outline:0}
.search-row input::placeholder{color:#696684}
.search-row button{border:0;background:#fff;border-radius:11px;color:#6a6480;padding:10px 13px;font-size:13px;font-weight:700;min-width:80px}
.search-row button[hidden]{display:none}
.results-info{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:26px 0 18px;color:var(--muted);font-size:13px}
.results-info strong{color:var(--ink)}

.channel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.channel-card{display:flex;flex-direction:column;min-height:395px;border-radius:27px;overflow:hidden;background:#fff;border:1px solid #e8e4f1;box-shadow:0 16px 40px #19143b0c;transition:transform .2s,box-shadow .2s}
.channel-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px #19143b18}
.card-cover{height:145px;background:radial-gradient(circle at 90% 15%,#b5a2ff 0 10%,transparent 11%),linear-gradient(135deg,#ede5ff,#f9f7ff);display:flex;align-items:center;justify-content:center;position:relative}
.card-cover::before{content:'';position:absolute;width:160px;height:160px;border:27px solid #fff8;border-radius:50%;right:-25px;bottom:-110px}
.card-cover svg{width:59px;height:59px;position:relative}
.card-body{padding:25px;flex:1;display:flex;flex-direction:column}
.card-body h3{margin:13px 0 12px;font-size:26px}
.card-body h3 a:hover{color:var(--purple)}
.card-body p{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 23px}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding:15px 0;border-top:1px solid var(--line)}
.price-row strong{font-size:20px;letter-spacing:-.03em}
.price-row span{font-size:12px;color:var(--muted)}
.card-body .btn{width:100%}
.empty-state{border:1px dashed #cec4e8;border-radius:25px;background:#faf8ff;padding:48px 24px;text-align:center}
.empty-state strong{display:block;font-size:22px;margin-bottom:9px}
.empty-state p{color:var(--muted);font-size:14px}
.empty-state[hidden]{display:none}

.explain-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.explain{border-radius:25px;background:#fff;padding:29px;border:1px solid #ebe7f4}
.explain span{width:39px;height:39px;border-radius:13px;background:var(--yellow);display:flex;align-items:center;justify-content:center;font-weight:900;margin-bottom:26px}
.explain h3{margin-bottom:10px}
.explain p{margin-bottom:0;font-size:14px;color:var(--muted);line-height:1.65}
.author-cta{background:var(--ink);border-radius:31px;padding:45px 50px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:35px}
.author-cta h2{max-width:540px;margin-bottom:12px}
.author-cta p{margin:0;max-width:600px;color:#ccc5ef;font-size:15px;line-height:1.6}
.author-cta .btn{flex-shrink:0}
.faq{display:grid;grid-template-columns:.65fr 1fr;gap:55px}
.faq details{border-bottom:1px solid #e8e3ef;padding:20px 0}
.faq summary{list-style:none;cursor:pointer;font-weight:770;line-height:1.45;display:flex;gap:10px;justify-content:space-between}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:22px;color:var(--purple);line-height:1}
.faq details[open] summary::after{content:'−'}
.faq details p{font-size:14px;line-height:1.7;color:var(--muted);padding-top:12px;margin-bottom:0}

/* Detail */
.detail-head{padding:30px 0 65px}
.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;align-items:start;gap:58px}
.detail-header{display:flex;gap:20px;align-items:center;margin:10px 0 26px}
.channel-avatar{width:86px;height:86px;flex-shrink:0;border-radius:27px;background:linear-gradient(135deg,#5c35ed,#9f82ff);display:grid;place-items:center;box-shadow:0 15px 32px #7047ff30}
.channel-avatar svg{width:41px;height:41px}
.detail-header h1{font-size:clamp(43px,4vw,60px);margin:0 0 8px;word-break:break-word}
.detail-header .tagline{font-size:14px;color:var(--muted);margin:0}
.detail-lead{font-size:19px;line-height:1.65;color:var(--muted);max-width:640px}
.detail-facts{display:flex;gap:13px;flex-wrap:wrap;margin:27px 0 30px}
.fact{border:1px solid var(--line);background:#fff;border-radius:16px;padding:12px 15px;min-width:162px}
.fact span{font-size:12px;color:var(--muted);display:block;margin-bottom:4px}
.fact strong{font-size:16px}
.rule{height:1px;background:var(--line);margin:30px 0}
.intro-copy h2{font-size:33px}
.intro-copy p{font-size:15px;color:var(--muted);line-height:1.75;max-width:650px}
.demo-warning{border-radius:18px;background:#faf4df;border:1px solid #f2dfaa;padding:16px 18px;font-size:13px;line-height:1.6;color:#6f540f}
.demo-warning strong{display:block;color:#533f0b;margin-bottom:2px}
.plan-panel{border:1px solid #ebe6f4;background:#fff;box-shadow:var(--shadow);border-radius:30px;padding:27px;position:sticky;top:110px}
.plan-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.plan-panel h2{font-size:26px;margin:17px 0 12px}
.period-label{font-weight:770;font-size:14px;color:#4f496c}
.plan-amount{display:flex;align-items:baseline;gap:10px;margin:15px 0 13px}
.plan-amount strong{font-size:57px;letter-spacing:-.09em;line-height:1}
.plan-amount span{font-size:13px;color:var(--muted)}
.plan-highlight{background:#f3efff;border-radius:14px;padding:13px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px;font-size:13px}
.plan-highlight b{font-size:18px}
.plan-panel .btn{width:100%;margin-bottom:11px}
.plan-panel .hint{color:#696684;font-size:12px;line-height:1.6;margin:7px 0 0}
.plan-checks{border-top:1px solid var(--line);margin:18px 0 0;padding:17px 0 0;list-style:none}
.plan-checks li{font-size:13px;line-height:1.5;display:flex;gap:9px;margin-bottom:12px}
.plan-checks li::before{content:'✓';color:var(--purple);font-weight:900}
.detail-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.detail-flow article{background:#fff;border:1px solid var(--line);padding:25px;border-radius:23px}
.detail-flow article>span{font-size:12px;font-weight:800;color:var(--purple)}
.detail-flow h3{font-size:19px;margin:23px 0 9px}
.detail-flow p{font-size:13px;line-height:1.65;color:var(--muted);margin:0}
.conditions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px}
.condition-card{border-radius:25px;padding:28px;background:#fff;border:1px solid #eae6f5}
.condition-card h3{font-size:20px}
.condition-card p{font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:0}
.back-link{color:var(--purple);font-weight:750;font-size:14px;display:inline-block;margin:25px 0 0}
.detail-bottom-bar{display:none}

.footer{border-top:1px solid #eae6f3;background:#fff;padding:35px 0}
.footer-row{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.footer .logo svg{width:28px;height:31px}
.footer .logo b{font-size:24px}
.footer-links{display:flex;gap:19px;flex-wrap:wrap;margin-left:auto}
.footer a:not(.logo){font-size:13px;text-decoration:underline;text-underline-offset:3px}
.footer-note{font-size:11px;color:#858095;margin-top:20px}
.toast{position:fixed;bottom:26px;right:26px;padding:16px 20px;border-radius:18px;background:var(--ink);color:#fff;box-shadow:var(--shadow);z-index:100;max-width:min(440px,calc(100% - 40px));font-size:13px;line-height:1.5}
.toast[hidden]{display:none}

@media(max-width:1030px){.catalog-hero-grid{gap:28px}
.channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.detail-layout{grid-template-columns:minmax(0,1fr) 320px;gap:25px}
.detail-header h1{font-size:44px}
}

@media(max-width:820px){:root{--site-gutter:19px}
.header{height:72px}
.header-row{gap:16px}
.nav{gap:14px}
.nav a{font-size:12px}
.header .btn{padding:12px 15px;font-size:12px}
.catalog-hero-grid{grid-template-columns:1fr}
.hero-panel{min-height:230px}
.hero-panel strong{margin-top:25px}
.hero-panel .panel-note{bottom:18px}
.section{padding:64px 0}
.faq{grid-template-columns:1fr;gap:14px}
.detail-layout{grid-template-columns:1fr}
.plan-panel{position:static;max-width:510px}
.detail-flow{grid-template-columns:1fr 1fr}
.author-cta{padding:35px}
.detail-bottom-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;position:sticky;bottom:0;z-index:22;padding:12px 19px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 25px #19143b0e}
.detail-bottom-bar .btn{min-height:45px;flex-shrink:0}
.detail-bottom-bar strong{display:block;font-size:18px}
.detail-bottom-bar span{font-size:11px;color:var(--muted)}
body.has-bottom-bar .footer{padding-bottom:50px}
}

@media(max-width:640px){:root{--site-gutter:18px}
.logo b{font-size:26px}
.header .header-cta{display:none}
.menu-toggle{display:flex}
.nav{display:none;position:absolute;top:72px;left:0;right:0;margin:0;background:#fff;box-shadow:0 18px 30px #19143b0d;padding:15px 19px 19px;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--line)}
.nav.open{display:flex}
.nav a{font-size:15px;padding:13px 10px}
.catalog-hero{padding:42px 0 34px}
h1{font-size:clamp(39px,11.3vw,56px)}
.lead{font-size:16px}
.search-shell{padding:17px}
.search-head{align-items:start}
.search-head h2{font-size:24px}
.search-row button{min-width:0;padding:10px}
.channel-grid{grid-template-columns:1fr}
.channel-card{min-height:0}
.section-heading{display:block}
.section-heading h2{margin-bottom:14px}
.explain-grid,.detail-flow,.conditions-grid{grid-template-columns:1fr}
.author-cta{display:block;padding:32px 26px}
.author-cta .btn{margin-top:25px}
.detail-head{padding-bottom:43px}
.detail-header{align-items:flex-start;gap:14px}
.channel-avatar{width:63px;height:63px;border-radius:20px}
.channel-avatar svg{width:31px;height:31px}
.detail-header h1{font-size:clamp(33px,9vw,46px)}
.detail-lead{font-size:16px}
.detail-facts{gap:9px}
.fact{min-width:calc(50% - 5px)}
.plan-panel{padding:23px}
.footer-row{display:block}
.footer-links{margin:26px 0 0;gap:15px}
.detail-bottom-bar{padding:10px 15px}
.detail-bottom-bar .btn{padding:12px 14px;font-size:12px}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}

.channel-card[hidden]{display:none}

/* Correct price wrapping and persistent mobile conversion affordance. */
.plan-highlight b{white-space:nowrap;flex-shrink:0}

@media(max-width:820px){.detail-bottom-bar{position:fixed;left:0;right:0;bottom:0}
body.has-bottom-bar{padding-bottom:calc(94px + env(safe-area-inset-bottom, 0px))}
}


/* v2: live channel, non-demo UI */
.hero-offer{min-height:300px}
.hero-offer h2{font-size:clamp(29px,3.1vw,42px);line-height:1.19;letter-spacing:-.045em;margin:35px 0 16px;position:relative;z-index:1}
.hero-offer h2 em{color:#ffca43;font-style:normal}
.hero-offer>p{font-size:14px;color:#cec7ed;position:relative;z-index:1;max-width:230px}
.hero-decor{position:absolute;font-size:140px;line-height:1;right:18px;bottom:-18px;color:#8870e8;opacity:.6;transform:rotate(-18deg)}
.hero-offer strong{display:none}
.card-cover .cover-caption{position:absolute;left:23px;bottom:18px;font-size:10px;font-weight:850;letter-spacing:.12em;color:#5c4b98}
.channel-card .card-body h3{font-size:25px}
.channel-card .price-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.channel-card .price-row>div{display:flex;flex-direction:column;gap:5px}
.channel-card .price-row small{font-size:11px;color:var(--muted);line-height:1.4}
.channel-card .price-row strong{font-size:25px}
.detail-header .channel-avatar svg{width:48px;height:48px}
.plan-highlight small{font-size:11px;font-weight:500;color:#6a6283}
.plan-amount strong{white-space:nowrap}
.light{color:var(--muted);font-size:12px;font-weight:500}
.fallback{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--lav)}
.fallback-box{width:min(560px,100%);background:#fff;border-radius:28px;padding:45px;box-shadow:var(--shadow)}
.fallback-box h1{font-size:42px;margin:25px 0 12px}
.fallback-box p{font-size:16px;line-height:1.6;color:var(--muted)}
.fallback-box .btn{margin-top:20px}
.hero-panel .micro{position:relative;z-index:1}
.hero-panel h2{color:#fff}
.detail-head .intro-copy{max-width:760px}
.detail-head .intro-copy .small{font-size:13px}
.footer-note{font-size:12px;line-height:1.6}
.footer-note a{color:var(--purple)}

@media(max-width:820px){.hero-offer{min-height:230px}
.hero-offer h2{margin:20px 0 10px}
.hero-offer>p{margin:0}
.detail-bottom-bar strong .light{font-size:11px}
}
@media(max-width:640px){.hero-offer{min-height:245px}
.channel-card .price-row{grid-template-columns:1fr 1fr}
.detail-bottom-bar strong{font-size:17px}
.detail-bottom-bar .btn{min-height:45px}
.fallback-box{padding:29px}
.fallback-box h1{font-size:32px}
}


/* One published channel: a purposeful wide card rather than two empty columns. */
@media(min-width:821px){.channel-grid:has(> .channel-card:only-child){grid-template-columns:1fr}
.channel-grid:has(> .channel-card:only-child) .channel-card{min-height:310px;display:grid;grid-template-columns:40% minmax(0,1fr)}
.channel-grid:has(> .channel-card:only-child) .card-cover{height:auto;min-height:310px}
.channel-grid:has(> .channel-card:only-child) .card-cover svg{width:88px;height:88px}
.channel-grid:has(> .channel-card:only-child) .card-body{padding:31px 36px}
.channel-grid:has(> .channel-card:only-child) .card-body h3{font-size:30px}
.channel-grid:has(> .channel-card:only-child) .card-body .btn{max-width:260px}
.channel-grid:has(> .channel-card:only-child) .price-row{max-width:390px}
}


/* Production states and progressive enhancement. */
[hidden] { display:none !important; }

.catalog-main { min-height:60vh; }

.catalog-search { margin:0; }

.search-row input { width:100%; }

.search-row button { min-height:44px; }

.search-submit { flex:none; }

.search-hint { margin:12px 0 0; }

.catalog-pagination { display:flex; justify-content:center; margin-top:28px; }

.error-state { border:1px solid var(--line); border-radius:24px; padding:30px; background:white; }

.error-state p { color:var(--muted); line-height:1.6; }

.card-cover img { width:68px; height:78px; }

.card-cover .cover-caption { color:#5c4b98; }

.card-body h3, .detail-header h1 { overflow-wrap:anywhere; }

.detail-header .channel-avatar img { width:41px; height:45px; }

.plan-switch { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }

.plan-switch a { min-height:44px; display:inline-flex; align-items:center; padding:8px 12px; border:1px solid var(--line); border-radius:14px; font-size:13px; }

.plan-switch a[aria-current] { background:var(--purple); color:white; }

.plan-panel a:not(.btn), .condition-card a, .faq p a { text-decoration:underline; text-underline-offset:3px; }

.detail-bottom-bar { padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }

.detail-bottom-bar > div { min-width:0; }

.detail-bottom-bar > div > span { display:block; }

.skip { position:fixed; left:8px; top:8px; z-index:150; transform:translateY(-150%); background:var(--ink); color:white; padding:12px; border-radius:12px; }

.skip:focus { transform:none; }

.catalog-status { min-height:20px; }

.catalog-loading { opacity:.65; }

@media(max-width:640px) { .search-row { gap:8px; padding-left:12px; }
 .search-row input { font-size:14px; }
 .search-row button { padding:10px 8px; }
 .detail-bottom-bar { gap:8px; }
 .detail-bottom-bar .btn { min-width:120px; }
 }

/* A single channel always fills the list, including tablet widths. */
.channel-grid:has(> .channel-card:only-child) { grid-template-columns:1fr; }
.search-submit { width:44px; min-width:44px; }
@media(max-width:820px) { .channel-grid { grid-template-columns:1fr; } }

/* MAX avatars retain their square proportions in both the list and detail header. */
.card-cover img.max-channel-image { width:96px; height:96px; object-fit:cover; border-radius:24px; position:relative; }
.detail-header .channel-avatar img.max-channel-image { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.detail-lead { white-space:pre-line; overflow-wrap:anywhere; }
.card-body > div > p { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }