/* Shortloop Media — shared styles */
:root{
  --bg:#f8fafc; --bg-card:#ffffff; --ink:#0f172a; --ink-soft:#475569;
  --ink-faint:#94a3b8; --accent:#2563eb; --accent-ink:#1d4ed8;
  --line:#e2e8f0; --pill:#eff6ff;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1120; --bg-card:#111a2e; --ink:#e2e8f0; --ink-soft:#94a3b8;
    --ink-faint:#64748b; --accent:#60a5fa; --accent-ink:#93c5fd;
    --line:#1e293b; --pill:#172554;
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.65;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:960px; margin:0 auto; padding:0 1.25rem}

header.site{
  border-bottom:1px solid var(--line); background:var(--bg-card);
}
header.site .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:.9rem; padding-bottom:.9rem; flex-wrap:wrap; gap:.5rem;
}
.brand{font-weight:700; font-size:1.05rem; color:var(--ink); letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand .dot{color:var(--accent)}
nav.site a{color:var(--ink-soft); margin-left:1.1rem; font-size:.95rem}
nav.site a[aria-current="page"]{color:var(--ink); font-weight:600}

.hero{padding:4.5rem 0 3rem; text-align:center}
.hero h1{font-size:clamp(2rem,5vw,3rem); letter-spacing:-.02em; margin:0 0 .6rem}
.hero p.lede{
  color:var(--ink-soft); font-size:1.15rem; max-width:38rem; margin:0 auto;
}
.hero .cta{margin-top:1.6rem}
.btn{
  display:inline-block; background:var(--accent); color:#fff; font-weight:600;
  padding:.6rem 1.2rem; border-radius:.55rem; margin:0 .3rem .5rem;
}
.btn:hover{text-decoration:none; filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--accent)}

section{padding:2.5rem 0}
section h2{font-size:1.5rem; letter-spacing:-.01em; margin:0 0 .4rem}
section p.sub{color:var(--ink-soft); margin:0 0 1.5rem; max-width:44rem}

.channels{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.5rem}
.channel{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:.9rem; overflow:hidden;
}
.channel .player{aspect-ratio:16/9; width:100%; background:#000}
.channel .player iframe{width:100%; height:100%; border:0; display:block}
.channel .body{padding:1.1rem 1.25rem 1.3rem}
.channel h3{margin:0 0 .25rem; font-size:1.15rem}
.channel .tag{
  display:inline-block; background:var(--pill); color:var(--accent-ink);
  font-size:.78rem; font-weight:600; padding:.15rem .6rem; border-radius:99px;
  margin-bottom:.6rem;
}
.channel p{margin:.2rem 0 .8rem; color:var(--ink-soft); font-size:.95rem}

.standards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem}
.standard{background:var(--bg-card); border:1px solid var(--line); border-radius:.9rem; padding:1.2rem 1.3rem}
.standard h3{margin:0 0 .35rem; font-size:1.02rem}
.standard p{margin:0; color:var(--ink-soft); font-size:.93rem}

.contact-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:.9rem;
  padding:1.5rem 1.6rem; text-align:center;
}
.contact-card .email{font-size:1.15rem; font-weight:600}

article.page{max-width:720px; margin:0 auto; padding:2.5rem 1.25rem 3rem}
article.page h1{font-size:1.9rem; letter-spacing:-.01em}
article.page h2{font-size:1.2rem; margin-top:2rem}
.updated{color:var(--ink-faint); font-size:.9rem}

footer.site{border-top:1px solid var(--line); margin-top:2rem}
footer.site .wrap{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  gap:.6rem; padding-top:1.4rem; padding-bottom:1.6rem;
  color:var(--ink-faint); font-size:.88rem;
}
footer.site a{color:var(--ink-soft); margin-right:1rem}