/* content.css — styles specific to the Content (Ducksworth) page */

:root{
  --twitch: #9146ff;
  --youtube: #ff4444;
  --instagram: #e1306c;
  --tiktok: #262421;
}

a{ color:inherit; }

.page-hero{ padding: 0 0 2.6rem; max-width: 60ch; }
.page-hero h1{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height:1.05; letter-spacing:-0.015em; margin-bottom:.9rem; }
.page-hero p{ font-size:1.02rem; color:var(--ink-soft); line-height:1.65; }

.section-label{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.1rem; margin-bottom:1.1rem; }

/* ── Stats strip ── */
.stats-row{ display:flex; flex-wrap:wrap; gap:1.6rem; padding:1.2rem 0 1.6rem; margin-bottom:2.4rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat-pill{ display:flex; flex-direction:column; gap:.2rem; }
.stat-pill .sp-val{ font-family:'Space Grotesk',sans-serif; font-size:1.4rem; font-weight:700; color:var(--accent-deep); }
.stat-pill .sp-label{ font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:.3rem; }

/* ── Embeds, pinboard-card style ── */
.embeds{ display:grid; grid-template-columns: 1fr 1fr; gap:1.6rem; margin-bottom:2.6rem; }
.embed-card{ position:relative; background:#fdfbf5; border:1px solid var(--ink); box-shadow:3px 4px 0 rgba(38,36,33,0.14); padding:1rem 1.1rem 1.2rem; will-change:transform; backface-visibility:hidden; }
.embed-card:nth-child(1){ transform: rotate(-.6deg) translateZ(0); }
.embed-card:nth-child(2){ transform: rotate(.5deg) translateZ(0); }
.embed-pin{ position:absolute; top:-9px; left:20px; width:16px; height:16px; border-radius:50%; background:var(--accent); border:1px solid var(--accent-deep); }
.embed-label{ display:flex; align-items:center; gap:.4rem; font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.6rem; }
.embed-label.twitch i{ color:var(--twitch); }
.embed-label.youtube i{ color:var(--youtube); }
.embed-wrap{ position:relative; width:100%; aspect-ratio:16/9; background:#f0ead9; border:1px solid var(--line); overflow:hidden; }
.embed-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.embed-title{ font-size:.78rem; color:var(--ink-soft); margin-top:.55rem; }
.embed-title a:hover{ color:var(--ink); }
.embed-empty{ color:var(--ink-soft); font-size:.78rem; padding:1rem; }

/* ── Platform links ── */
.platforms{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.6rem; }
.platform-link{ display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:500; color:var(--ink); border:1px solid var(--ink); padding:.55rem 1rem; background:#fdfbf5; transition: transform .18s ease, box-shadow .18s ease; box-shadow:2px 3px 0 rgba(38,36,33,0.12); }
.platform-link:hover{ transform: translateY(-2px); box-shadow:3px 4px 0 rgba(38,36,33,0.16); }
.platform-link i{ font-size:1rem; }
.platform-link.twitch i{ color:var(--twitch); }
.platform-link.youtube i{ color:var(--youtube); }
.platform-link.instagram i{ color:var(--instagram); }
.platform-link.tiktok i{ color:var(--tiktok); }
.pl-live{ font-size:.6rem; font-weight:700; padding:.1rem .35rem; background:var(--red); color:#fff; border-radius:3px; display:none; }

.mk-link{ display:inline-flex; align-items:center; gap:.5rem; font-family:'IBM Plex Mono',monospace; font-size:.78rem; border:1.3px solid var(--ink); padding:.6rem 1.1rem; color:var(--ink); text-decoration:none; }
.mk-link:hover{ background:var(--ink); color:#fdfbf5; }

@media (max-width: 620px){
  .embeds{ grid-template-columns: 1fr; }
}