/* TODO: ADD CREATO DISPLAY @font-face HERE (weights 300/400/500/700 + italic)
@font-face {
  font-family: "Creato Display";
  src: url("fonts/CreatoDisplay-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
*/

/* @font-face {
    font-family: 'Creato Display';
    src: url('./fonts/CreatoDisplay-Medium.woff2') format('woff2'),
        url('./fonts/CreatoDisplay-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
} */

/* @font-face {
    font-family: 'Creato Display';
    src: url('./fonts/CreatoDisplay-Regular.woff2') format('woff2'),
        url('./fonts/CreatoDisplay-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
} */

/* @font-face {
    font-family: 'Creato Display';
    src: url('./fonts/CreatoDisplay-Bold.woff2') format('woff2'),
        url('./fonts/CreatoDisplay-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
} */

/* TODO: ADD CREATO DISPLAY @font-face HERE (weights 300/400/500/700 + italic)
@font-face {
  font-family: "Creato Display";
  src: url("fonts/CreatoDisplay-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
*/

/* TOKENS */
:root {
  --white:#fff; --cream:#faf6ec; --cream-deep:#f3ead3;
  --gold:#b8860b; --gold-hover:#9a7009;
  --ink:#1a1a1a; --body:#5f5a50; --hairline:#e6ddc6; --frame:#000;
  --font-display:"Creato Display","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Creato Display","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --maxw:1200px;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.03'/></svg>");
}

/* BASE */
*,*::before,*::after { box-sizing:border-box; }
html { font-size:100%; scroll-behavior:smooth; scroll-padding-top:5rem; }
body { margin:0; background:var(--white); color:var(--body); font:1.0625rem/1.65 var(--font-body); }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-family:var(--font-display); color:var(--ink); font-weight:500; margin:0; line-height:1.05; letter-spacing:-.02em; }
h1 { font-size:clamp(2.75rem,6vw,5rem); max-width:14ch; }
h2 { font-size:clamp(2rem,4.5vw,3.5rem); max-width:18ch; }
h3 { font-size:1.35rem; letter-spacing:-.01em; line-height:1.15; }
em { color:var(--gold); font-style:italic; display:block; }
p { margin:0; }
.lead { max-width:60ch; margin:1.25rem 0 1.75rem; }
small { display:block; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:700; }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

/* LAYOUT */
.container { width:min(100% - 2 * clamp(1rem,4vw,2rem), var(--maxw)); margin-inline:auto; }
.section { padding-block:clamp(3.5rem,8vw,6.5rem); }
.white { background:var(--white); }
.cream { background:var(--cream) var(--grain); }
.head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:2.5rem; flex-wrap:wrap; }

/* ELEMENTS */
.eyebrow { display:flex; align-items:center; gap:.75rem; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:1.25rem; }
.eyebrow::before { content:""; width:24px; height:1px; background:var(--gold); }
.btn { display:inline-flex; align-items:center; gap:.5rem; background:var(--gold); color:#fff; padding:.8rem 1.4rem; border:0; border-radius:3px; font:700 .9rem var(--font-body); cursor:pointer; transition:background .2s; }
.btn:hover { background:var(--gold-hover); }
.btn svg,.link svg { width:14px; height:14px; transition:transform .2s; }
.btn:hover svg,.link:hover svg { transform:translateX(3px); }
.link { display:inline-flex; align-items:center; gap:.5rem; color:var(--ink); font-weight:700; font-size:.95rem; background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat; transition:background-size .3s; padding-bottom:2px; }
.link:hover { background-size:100% 1px; }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:1.5rem; }
.ph { display:grid; place-items:end; border:1px dashed var(--gold); color:var(--gold); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; width:100%; }
.r169 { aspect-ratio:16/9; } .r23 { aspect-ratio:2/3; } .r34 { aspect-ratio:1; }
.framed { border:2px solid var(--frame); }

/* HERO */
.hero { background:var(--cream) var(--grain); }
.hero-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:2.5rem; padding-block:clamp(2.5rem,6vw,5rem); align-items:center; }
.hero-text > *, .player-wrap { animation:rise .8s ease both; }
.hero-text > :nth-child(2) { animation-delay:.1s; } .hero-text > :nth-child(3) { animation-delay:.2s; }
.hero-text > :nth-child(4) { animation-delay:.3s; } .player-wrap { animation-delay:.4s; }
.player-wrap { min-width:0; }
.channel-card { overflow:hidden; background:transparent; color:#000;  }
.channel-player-shell { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#000; }
.channel-player { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; background:#000; }
.channel-player-fallback { position:absolute; inset:0; display:grid; place-items:center; padding:2rem; color:#fff; background:#111827; font-weight:700; text-align:center; }
.channel-player-fallback:hover { color:var(--gold); }
.channel-player-fallback[hidden] { display:none; }
.channel-preview { position:relative; display:block; min-height:220px; aspect-ratio:16/9; overflow:hidden; background:#000; color:#fff; }
.channel-preview-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42; filter:blur(18px); transform:scale(1.08); }
.channel-preview-art { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.channel-preview::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.24) 46%,rgba(0,0,0,.08)); }
.channel-play { position:absolute; inset:0; z-index:2; margin:auto; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#000; box-shadow:0 18px 45px rgba(0,0,0,.4); transition:transform .2s, background .2s; }
.channel-preview:hover .channel-play { transform:scale(1.06); background:var(--gold); }
.channel-play svg { width:25px; height:25px; margin-left:3px; fill:currentColor; }
.channel-live-card { position:absolute; left:clamp(.9rem,2vw,1.5rem); bottom:clamp(.9rem,2vw,1.35rem); z-index:2; display:grid; gap:.45rem; }
.channel-live-card b { width:max-content; border-radius:2px; background:#f20d18; color:#fff; padding:.18rem .5rem; font:700 .7rem var(--font-body); }
.channel-live-card strong { color:#fff; font:700 clamp(1rem,1.8vw,1.2rem)/1.15 var(--font-body); }
.channel-info { display:flex; flex-direction:column; gap:1.1rem; justify-content:space-between; padding:1rem 0; background:transparent; }
.channel-tags { display:none!important; flex-wrap:wrap; gap:.5rem; margin-bottom:.8rem; }
.channel-tags span { display:inline-flex; align-items:center; min-height:1.6rem; border-radius:2px; padding:.22rem .6rem; background:rgba(255,255,255,.14); color:#000; font:700 .72rem/1 var(--font-body); }
.channel-tags span:first-child { background:#d4a843; color:#000; }
.channel-title-row { display:flex; align-items:center; gap:.8rem; min-width:0; }
.channel-title-row img { width:48px; height:48px; flex:0 0 auto; object-fit:cover; border-radius:5px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.08); }
.channel-title-row h2 { max-width:none; color:#000; font:700 clamp(1.25rem,2.5vw,1.65rem)/1.1 var(--font-body); letter-spacing:0; font-size: 20px; }
.channel-title-row p { display:flex; align-items:center; gap:.45rem; margin-top:.2rem; color: #000; font:700 .78rem/1.2 var(--font-body); }
.channel-title-row p svg { width:16px; height:16px; }
.channel-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.channel-btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:44px; border-radius:4px; padding:.7rem .85rem; font:700 .88rem/1 var(--font-body); transition:background .2s, transform .2s; }
.channel-btn:hover {  }
.channel-btn svg { width:19px; height:19px; flex:0 0 auto; }
.channel-btn-live { background:#fff; color:#000; }
.channel-btn-live:hover { background:rgba(255,255,255,.86); }
.channel-btn-live svg { fill:currentColor; }
.channel-btn-vod { background:#d4a843; color:#000; }
.channel-btn-vod:hover { background:#e5bd58; }
.tv-schedule { margin-top:.65rem; border:1px solid var(--hairline); background:rgba(255,255,255,.68); color:var(--ink); box-shadow:0 10px 28px rgba(58,39,0,.04); }
.schedule-topline { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; padding:.7rem .85rem; border-bottom:1px solid var(--hairline); }
.schedule-topline h2 { display:flex; align-items:center; gap:.45rem; max-width:none; font:700 .68rem/1 var(--font-body); letter-spacing:.13em; text-transform:uppercase; color:var(--gold-hover); }
.schedule-topline h2 svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.schedule-count { color:var(--body); font-size:.68rem; font-weight:700; }
.schedule-featured { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--hairline); border-bottom:1px solid var(--hairline); }
.schedule-card { min-width:0; padding:.7rem .8rem .75rem; background:rgba(255,255,255,.84); }
.schedule-label { display:block; margin-bottom:.35rem; color:var(--gold-hover); font-size:.58rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.schedule-card h3 { display:-webkit-box; min-height:2.4em; overflow:hidden; font:700 clamp(.76rem,1.4vw,.88rem)/1.2 var(--font-body); letter-spacing:0; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; }
.schedule-card p { overflow:hidden; margin-top:.3rem; color:var(--body); font-size:.69rem; text-overflow:ellipsis; white-space:nowrap; }
.schedule-progress { height:3px; margin-top:.55rem; overflow:hidden; border-radius:99px; background:var(--cream-deep); }
.schedule-progress span { display:block; width:0; height:100%; border-radius:inherit; background:var(--gold); transition:width .5s ease; }
.schedule-details { padding:.6rem .8rem; }
.schedule-details summary { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.55rem .7rem; border:1px solid var(--hairline); border-radius:3px; background:var(--cream); cursor:pointer; list-style:none; transition:background .2s,border-color .2s; }
.schedule-details summary::-webkit-details-marker { display:none; }
.schedule-details summary:hover { background:var(--cream-deep); border-color:#d8c99f; }
.schedule-details summary strong { display:block; font-size:.76rem; color:var(--ink); }
.schedule-details summary small { margin-top:.12rem; color:var(--body); font-size:.61rem; font-weight:500; letter-spacing:0; text-transform:none; }
.schedule-details summary svg { width:16px; height:16px; flex:0 0 auto; fill:none; stroke:var(--gold-hover); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.schedule-details[open] summary svg { transform:rotate(180deg); }
.schedule-list { max-height:320px; overflow-y:auto; margin-top:.6rem; padding-right:.2rem; scrollbar-color:var(--gold) var(--cream-deep); scrollbar-width:thin; }
.schedule-day { position:sticky; top:0; z-index:1; margin:0; padding:.65rem .75rem; border-left:3px solid var(--gold); background:rgba(250,246,236,.96); color:var(--gold-hover); font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; backdrop-filter:blur(6px); }
.schedule-row { display:grid; grid-template-columns:minmax(0,1fr); gap:.35rem; padding:.85rem .25rem; border-bottom:1px solid var(--hairline); }
.schedule-row:last-child { border-bottom:0; }
.schedule-row time { color:var(--body); font-size:.75rem; font-weight:700; }
.schedule-row h3 { font:700 .88rem/1.35 var(--font-body); letter-spacing:0; }
.schedule-row.is-live h3 { color:var(--gold-hover); }
.schedule-live-badge { width:max-content; align-self:start; border-radius:2px; padding:.25rem .5rem; background:var(--gold); color:#fff; font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.schedule-empty,.schedule-error { padding:1rem; color:var(--body); font-size:.85rem; }
.schedule-error { margin:0 clamp(1rem,2.5vw,1.5rem) 1rem; border-left:3px solid var(--gold); background:var(--cream); }
.strip { display:grid; grid-template-columns:minmax(0,1fr); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.strip div { padding:1.4rem 1.25rem 1.4rem 0; }
.strip p { font:500 1.25rem/1.25 var(--font-display); color:var(--ink); margin-top:.4rem; }

/* PITCH PARTY */
.split { display:grid; grid-template-columns:minmax(0,1fr); gap:2.5rem; align-items:center; margin-bottom:3.5rem; }
.poster { max-width:360px; box-shadow:12px 12px 0 var(--cream-deep); }
.cells { display:grid; grid-template-columns:minmax(0,1fr); border:1px solid var(--hairline); }
.cells div { padding:1.5rem; border-bottom:1px solid var(--hairline); }
.cells h3 { margin:.5rem 0; }
.cells p { font-size:.95rem; }
.signup { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; align-items:end; margin-top:2.5rem; padding:1.5rem; background:var(--cream); border:1px solid var(--hairline); }
.signup label { display:grid; gap:.35rem; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:var(--ink); }
.signup input { font:1rem var(--font-body); padding:.75rem; border:1px solid var(--hairline); background:#fff; border-radius:2px; letter-spacing:0; text-transform:none; }
.msg { grid-column:1/-1; color:var(--gold-hover); font-weight:700; }

/* FEATURED AUTHOR OPPORTUNITIES */
.opportunities-intro { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem 2.5rem; align-items:end; margin-bottom:2.5rem; }
.opportunities-intro .lead { margin:0; }
.opportunity-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:1.25rem; }
.opportunity-card { position:relative; display:flex; flex-direction:column; min-height:100%; overflow:hidden; padding:clamp(1.4rem,3vw,2rem); border:1px solid var(--hairline); background:#fff; box-shadow:0 14px 35px rgba(58,39,0,.05); }
.opportunity-number { position:absolute; top:1rem; right:1rem; color:var(--cream-deep); font:600 clamp(3rem,6vw,5rem)/1 var(--font-display); }
.opportunity-type { position:relative; margin-bottom:.75rem; color:var(--gold-hover); font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.opportunity-card h3 { position:relative; max-width:12ch; margin-bottom:1rem; font-size:clamp(1.65rem,3vw,2.2rem); }
.opportunity-card > p:not(.opportunity-type) { position:relative; flex:1; max-width:42ch; font-size:.96rem; }
.opportunity-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-top:2rem; padding-top:1.25rem; border-top:1px solid var(--hairline); }
.opportunity-footer strong { color:var(--ink); font:600 clamp(1.7rem,3vw,2.25rem)/1 var(--font-display); white-space:nowrap; }
.opportunity-footer strong small { display:inline; color:var(--body); font:500 .8rem var(--font-body); letter-spacing:0; text-transform:none; }
.opportunity-footer .btn { justify-content:center; }

/* BEST SELLERS */
.books { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.book { border:1px solid var(--hairline); padding:.75rem; transition:transform .2s; }
.book:hover { transform:translateY(-2px); }
.book b { display:block; margin-top:.8rem; color:var(--gold); font-size:.8rem; letter-spacing:.15em; }
.book h3 { font-size:1.15rem; }
.book p { font-size:.95rem; }

/* LIBRARY */
.lib { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; }
.card { background:#fff; border:1px solid var(--hairline); padding:1.75rem; display:flex; flex-direction:column; gap:.75rem; transition:transform .2s; }
.card:hover { transform:translateY(-2px); }
.card svg { width:34px; height:34px; color:var(--gold); }
.card p { font-size:.95rem; flex:1; }
.card span { font-weight:700; color:var(--ink); font-size:.9rem; }

/* ABOUT + QUOTE + BOARD */
.about-quote { padding-top:clamp(3.5rem,8vw,6.5rem); }
.about { display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem; align-items:end; padding-bottom:clamp(3rem,6vw,4.5rem); }
.about .lead { margin:0; }
.quote { background:var(--cream-deep) var(--grain); padding-block:clamp(3.5rem,8vw,6rem); text-align:center; }
blockquote { margin:0 auto; max-width:22ch; font:500 clamp(2rem,5vw,3.75rem)/1.08 var(--font-display); color:var(--ink); letter-spacing:-.02em; }
.board { display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem; }
.person { margin:0; border:2px solid var(--frame); background:#fff; }
.person .ph { overflow:hidden; border:0; border-bottom:2px solid var(--frame); background:#fff; }
.person .ph img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.person figcaption { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; padding:1rem; }
.person b { font:500 1.3rem/1.1 var(--font-display); color:var(--ink); }
.person span { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; text-align:right; max-width:14ch; }

/* REVEAL (progressive enhancement) */
.js .reveal { opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.js .reveal.is-visible { opacity:1; transform:none; }
@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

/* BREAKPOINTS */
@media (min-width:640px) {
  .schedule-row { grid-template-columns:145px minmax(0,1fr) auto; align-items:start; gap:1rem; }
  .books { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cells { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .opportunity-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .opportunity-card:last-child { grid-column:1/-1; }
  .board { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .signup { grid-template-columns:repeat(3,minmax(0,1fr)) auto; }
  .strip { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .strip div + div { padding-left:1.5rem; border-left:1px solid var(--hairline); }
}
@media (min-width:900px) {
  .split { grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); }
  .poster { margin-left:auto; margin-bottom:-4rem; }
  .cells { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .cells div { border-right:1px solid var(--hairline); }
  .opportunities-intro { grid-template-columns:minmax(0,1fr) minmax(280px,.65fr); }
  .opportunity-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .opportunity-card:last-child { grid-column:auto; }
  .books { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .about { grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:4rem; }
  .board { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .js .reveal { opacity:1; transform:none; }
}

/* UPDATE: promotions, lineup, library */
.cells { gap:1px; background:var(--hairline); }
.cells div,.cell-link { background:#fff; border:0; padding:1.5rem; }
.cell-link { display:block; background:var(--cream-deep); transition:background .2s; }
.cell-link:hover { background:var(--cream); }
.cell-link span { display:block; margin-top:.75rem; font-weight:700; color:var(--gold-hover); font-size:.9rem; }
.speaker-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.75rem,2vw,1.5rem); align-items:stretch; }
.speaker-card { min-width:0; margin:0; overflow:hidden; aspect-ratio:320/591; background:#090704; border:1px solid rgba(182,130,0,.35); box-shadow:0 14px 32px rgba(32,20,3,.12); }
.speaker-card img { display:block; width:100%; height:100%; object-fit:contain; }
.price-band { display:grid; grid-template-columns:minmax(0,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
.price-band div { background:#fff; padding:1.75rem; }
.price-band h3 { font-size:clamp(1.6rem,3vw,2.2rem); margin:.5rem 0; }
.pitch { font:italic 500 clamp(1.4rem,2.6vw,2rem)/1.2 var(--font-display); color:var(--gold); margin:2.5rem 0; max-width:34ch; }
.shelf { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.25rem; }
.listing { position:relative; display:flex; flex-direction:column; gap:.6rem; background:#fff; border:1px solid var(--hairline); padding:.9rem; }
.listing p { font-size:.95rem; }
.listing .by { color:var(--gold-hover); font-weight:700; }
.listing .btn { margin-top:auto; justify-content:center; }
.badge { position:absolute; top:1.4rem; left:1.4rem; z-index:1; background:var(--ink); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.25rem .55rem; }
.addbook { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; margin-top:3.5rem; padding:clamp(1.25rem,3vw,2.25rem); background:#fff; border:2px solid var(--frame); }
.addbook h3 { font-size:2rem; }
.addbook label { display:grid; gap:.35rem; font-size:.8rem; font-weight:700; color:var(--ink); }
.addbook input,.addbook textarea { font:1rem var(--font-body); padding:.75rem; border:1px solid var(--hairline); background:var(--cream); border-radius:2px; }
.total { display:flex; justify-content:space-between; align-items:baseline; padding:1rem 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.total strong { font:500 2rem var(--font-display); color:var(--ink); }
.addbook .btn { justify-self:start; }
@media (min-width:640px) {
  .price-band { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .addbook { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .addbook h3,.addbook .wide,.addbook .msg { grid-column:1/-1; }
}
@media (min-width:900px) {
  .hero-grid { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:4rem; }
  .channel-info { flex-direction:row; align-items:center; gap:1rem; }
  .channel-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; min-width:max-content; }
  .channel-btn { min-width:140px; }
  .cells { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .speaker-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:479px) {
  .speaker-grid { grid-template-columns:minmax(0,1fr); }
}