/* ============================================================
   CIRCLE 6 — site.css
   Components. Requires tokens.css loaded first.
   Sections: topbar, hero/flyer, ticker, feed cards, shows,
   merch, categories, footer, article, event, show hub,
   archive, 404, responsive.
   ============================================================ */

/* ---------- Topbar ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--ink); border-bottom: var(--border); }
.topbar .wrap { display: flex; align-items: center; gap: 22px; height: 64px; }
.logo { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.logo .six { background: var(--hazard); color: var(--ink); padding: 0 8px; transform: rotate(-4deg); display: inline-block; }
.nav { display: flex; gap: 20px; margin-left: auto; font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: .08em; }
.nav a { padding: 6px 2px; border-bottom: 3px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-color: var(--hazard); }
.live-btn { background: var(--blood); color: var(--bone); font-family: var(--font-display); font-size: 15px; text-transform: uppercase; padding: 9px 16px; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; }
.live-btn .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bone); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.burger { display: none; background: none; border: 2px solid var(--bone); color: var(--bone); font-family: var(--font-display); padding: 6px 10px; text-transform: uppercase; cursor: pointer; }
.mobile-nav { display: none; border-bottom: var(--border); background: var(--ink-2); }
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: 14px 20px; font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: .08em; border-top: 1px solid rgba(85,80,74,.4); }

/* ---------- Hero + flyer ---------- */
.hero { position: relative; overflow: hidden; padding: 64px 0 90px; border-bottom: var(--border);
  background: radial-gradient(rgba(232,226,214,.05) 1px, transparent 1px), linear-gradient(180deg,#161210,var(--ink) 70%);
  background-size: 5px 5px, 100% 100%; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.hero-copy h1 { font-family: var(--font-display); font-size: clamp(52px,7.5vw,104px); line-height: .9; text-transform: uppercase; margin: 14px 0 18px; }
.hero-copy p { max-width: 480px; color: var(--bone-dim-2); font-size: 17px; }
.hero-ctas { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }

.flyer { background: var(--bone); color: var(--ink); padding: 36px 30px 30px; transform: rotate(-2deg); border: 2px solid var(--ink);
  box-shadow: 10px 10px 0 var(--hazard); position: relative; max-width: 430px; justify-self: center; width: 100%; }
.flyer::before, .flyer::after { content: ""; position: absolute; width: 78px; height: 24px; background: rgba(85,80,74,.5); top: -12px; }
.flyer::before { left: 26px; transform: rotate(-5deg); }
.flyer::after { right: 26px; transform: rotate(6deg); }
.flyer .fk { font-family: var(--font-zine); font-size: 13px; text-transform: uppercase; letter-spacing: .15em; color: var(--blood); }
.flyer .fh { font-family: var(--font-display); font-size: clamp(58px,7vw,86px); text-transform: uppercase; line-height: .88; margin: 10px 0 6px; }
.flyer .fsub { font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: .09em; }
.flyer .fmeta { display: flex; gap: 10px; margin: 18px 0 6px; flex-wrap: wrap; }
.flyer .fmeta span { border: 2px solid var(--ink); font-family: var(--font-display); font-size: 14px; padding: 4px 10px; text-transform: uppercase; }
.countdown { display: flex; gap: 10px; margin-top: 16px; }
.countdown div { background: var(--ink); color: var(--bone); text-align: center; padding: 8px 0; flex: 1; }
.countdown b { font-family: var(--font-display); font-size: 26px; display: block; line-height: 1; }
.countdown small { font-family: var(--font-zine); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.flyer .cta { display: block; text-align: center; margin-top: 18px; background: var(--blood); color: var(--bone); font-family: var(--font-display);
  text-transform: uppercase; padding: 13px; font-size: 20px; letter-spacing: .05em; }
.flyer .cta:hover { background: var(--blood-hot); }

/* ---------- Ticker ---------- */
.ticker { border-top: var(--border); border-bottom: var(--border);
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 26px, var(--ink) 26px 52px); padding: 5px 0; }
.ticker-inner { background: var(--ink); overflow: hidden; white-space: nowrap; border-top: var(--border); border-bottom: var(--border); }
.ticker-track { display: inline-block; padding: 10px 0; animation: scroll 32s linear infinite; font-family: var(--font-display);
  text-transform: uppercase; font-size: 16px; letter-spacing: .04em; }
.ticker-track span { margin: 0 26px; }
.ticker-track .sep { color: var(--hazard); }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- Feed cards ---------- */
.feed { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: auto; gap: 22px; }
.post { border: var(--border); background: var(--ink-2); position: relative; display: flex; flex-direction: column; }
.post:hover { transform: translateY(-3px); transition: transform .15s; }
.post .thumb { aspect-ratio: 16/9; position: relative; overflow: hidden; border-bottom: var(--border); background: linear-gradient(135deg,#2a1310,var(--ink) 65%); }
.post .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post .thumb .art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); text-transform: uppercase; color: rgba(232,226,214,.14); font-size: 54px; line-height: .9; text-align: center; padding: 10px; }
.post .body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post .kick { font-size: 12px; letter-spacing: .12em; }
.post h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 24px; line-height: 1.02; }
.post h3 a:hover { color: var(--hazard); }
.post p { color: var(--bone-dim); font-size: 14px; }
.post .byline { margin-top: auto; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tape); }
.post .byline b { color: var(--bone); }
.post--lead { grid-row: span 2; }
.post--lead h3 { font-size: clamp(30px,3.4vw,44px); }
.post--lead .thumb { aspect-ratio: 4/3; }

/* ---------- Shows rail ---------- */
.shows { background: var(--bone); color: var(--ink); border-top: var(--border); }
.shows .sec-head h2 { color: var(--ink); }
.shows .sec-head .note { color: var(--blood); }
.show-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 22px; }
.show-card { border: 2px solid var(--ink); background: var(--bone); padding: 26px; position: relative; box-shadow: 6px 6px 0 var(--ink); }
.show-card:nth-child(2) { transform: rotate(1deg); }
.show-card:nth-child(3) { transform: rotate(-1deg); }
.show-card .tag { font-family: var(--font-zine); font-size: 12px; text-transform: uppercase; letter-spacing: .13em; color: var(--blood); }
.show-card h3 { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; line-height: .95; margin: 8px 0; }
.show-card p { font-size: 14px; color: var(--ink-on-bone); }
.show-card .watch { display: inline-block; margin-top: 14px; font-family: var(--font-display); text-transform: uppercase; background: var(--ink); color: var(--bone); padding: 8px 18px; font-size: 15px; }
.show-card .watch:hover { background: var(--hazard); color: var(--ink); }

/* ---------- Merch strip ---------- */
.merch { background: var(--hazard); color: var(--ink); border-top: 2px solid var(--ink); border-bottom: var(--border); }
.merch .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.merch h2 { font-family: var(--font-display); font-size: clamp(44px,6vw,84px); text-transform: uppercase; line-height: .9; }
.merch p { font-weight: 600; max-width: 440px; margin-top: 14px; }
.merch .btn { margin-top: 24px; background: var(--ink); color: var(--hazard); box-shadow: var(--shadow-hard) var(--ink-2); }
.shirt { background: var(--ink); border: 2px solid var(--ink); padding: 40px; text-align: center; transform: rotate(2deg); box-shadow: 8px 8px 0 var(--ink-2); }
.shirt .tee { font-family: var(--font-display); color: var(--hazard); font-size: clamp(40px,4.5vw,58px); text-transform: uppercase; line-height: .9; }
.shirt .lbl { font-family: var(--font-zine); color: var(--bone); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; margin-top: 16px; }

/* ---------- Category tiles ---------- */
.cats { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 14px; }
.cat { border: var(--border); padding: 26px 18px; font-family: var(--font-display); text-transform: uppercase; font-size: 22px; position: relative; background: var(--ink-2); }
.cat small { display: block; font-family: var(--font-zine); font-size: 11px; color: var(--hazard); letter-spacing: .12em; margin-top: 6px; }
.cat:hover { background: var(--bone); color: var(--ink); }
.cat:hover small { color: var(--blood); }

/* ---------- Footer ---------- */
.footer { border-top: var(--border); padding: 64px 0 40px; background: var(--ink-2); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.join h2 { font-family: var(--font-display); font-size: clamp(34px,4.5vw,52px); text-transform: uppercase; line-height: .95; }
.join p { color: var(--bone-dim); font-size: 14px; margin: 12px 0 18px; max-width: 380px; }
.join .row { display: flex; max-width: 420px; }
.join input { flex: 1; background: var(--ink); border: 2px solid var(--bone); color: var(--bone); padding: 12px 14px; font-family: var(--font-body); font-size: 15px; min-width: 0; }
.join button { background: var(--hazard); color: var(--ink); border: 2px solid var(--hazard); font-family: var(--font-display); text-transform: uppercase; padding: 0 22px; font-size: 16px; cursor: pointer; }
.join button:hover { background: var(--bone); border-color: var(--bone); }
.fcol h4 { font-family: var(--font-zine); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--hazard); margin-bottom: 14px; }
.fcol a { display: block; font-weight: 600; text-transform: uppercase; font-size: 13px; letter-spacing: .06em; padding: 5px 0; color: var(--bone-dim-2); }
.fcol a:hover { color: var(--hazard); }
.legal { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--tape); font-family: var(--font-zine); font-size: 11px;
  color: var(--tape); text-transform: uppercase; letter-spacing: .1em; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------- Article template ---------- */
.article-head { padding: 60px 0 34px; border-bottom: var(--border); }
.article-head .cat-link:hover { color: var(--bone); }
.article-head h1 { font-family: var(--font-display); font-size: clamp(38px,5.5vw,72px); text-transform: uppercase; line-height: .95; margin: 14px 0 18px; max-width: 900px; }
.article-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tape); }
.article-meta b { color: var(--bone); }
.article-hero { border-bottom: var(--border); background: linear-gradient(135deg,#2a1310,var(--ink) 65%); }
.article-hero .frame { aspect-ratio: 21/9; position: relative; }
.article-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-hero .credit { font-family: var(--font-zine); font-size: 11px; color: var(--tape); text-transform: uppercase; letter-spacing: .1em; padding: 8px 0; }
.article-body { max-width: 720px; margin: 0 auto; padding: 48px var(--pad-x) 64px; font-size: 17px; line-height: 1.65; }
.article-body > * + * { margin-top: 1.2em; }
.article-body h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 30px; line-height: 1; margin-top: 1.6em; }
.article-body a { color: var(--hazard); border-bottom: 2px solid var(--hazard); }
.article-body blockquote { border-left: 4px solid var(--hazard); padding: 6px 0 6px 20px; font-family: var(--font-zine); font-size: 19px; color: var(--bone-dim-2); }
.article-body img { border: var(--border); }
.article-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2em; }
.article-tags a { font-family: var(--font-zine); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; border: 1px solid var(--tape); padding: 5px 12px; color: var(--bone-dim); }
.article-tags a:hover { border-color: var(--hazard); color: var(--hazard); }
.next-show { background: var(--blood); }
.next-show .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 26px; padding-bottom: 26px; flex-wrap: wrap; }
.next-show .t { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(22px,3vw,34px); line-height: 1; }
.next-show .btn { background: var(--ink); color: var(--bone); box-shadow: var(--shadow-hard) rgba(13,11,10,.4); }

/* ---------- Event template ---------- */
.event-head { padding: 64px 0; border-bottom: var(--border); }
.event-head .wrap { display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: start; }
.matchcard { margin-top: 10px; }
.match { border: var(--border); background: var(--ink-2); margin-bottom: 16px; position: relative; padding: 20px 22px; }
.match .stip { font-family: var(--font-zine); font-size: 12px; color: var(--hazard); text-transform: uppercase; letter-spacing: .12em; }
.match .vs { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.match .vs .name { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(22px,2.6vw,32px); line-height: 1; }
.match .vs .x { font-family: var(--font-zine); color: var(--blood); font-size: 15px; }
.match .result { margin-top: 10px; font-size: 14px; color: var(--bone-dim); border-top: 1px solid rgba(85,80,74,.4); padding-top: 10px; }
.match .result b { color: var(--bone); text-transform: uppercase; }
.photo-strip { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 14px; }
.photo-strip .ph { aspect-ratio: 4/3; border: var(--border); background: linear-gradient(135deg,#1c1b2a,var(--ink) 70%); position: relative; }
.photo-strip .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Show hub ---------- */
.show-hero { padding: 64px 0; border-bottom: var(--border); background: linear-gradient(180deg,#161210,var(--ink) 75%); }
.show-hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.show-hero h1 { font-family: var(--font-display); font-size: clamp(44px,6.5vw,88px); text-transform: uppercase; line-height: .9; margin: 12px 0 16px; }
.show-hero p { color: var(--bone-dim-2); max-width: 480px; }
.player { aspect-ratio: 16/9; border: var(--border); background: var(--ink-2); position: relative; box-shadow: 8px 8px 0 var(--hazard); }
.player iframe, .player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player .placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); text-transform: uppercase; color: rgba(232,226,214,.18); font-size: 40px; }
.episodes { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 22px; }

/* ---------- Archive ---------- */
.archive-head { padding: 56px 0 36px; border-bottom: var(--border); }
.archive-head h1 { font-family: var(--font-display); font-size: clamp(44px,7vw,90px); text-transform: uppercase; line-height: .9; display: inline-block; position: relative; margin-top: 10px; }
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.filter-row a { font-family: var(--font-display); text-transform: uppercase; font-size: 14px; padding: 7px 14px; border: 2px solid var(--tape); color: var(--bone-dim); }
.filter-row a:hover, .filter-row a[aria-current="page"] { border-color: var(--hazard); color: var(--hazard); }
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 22px; }
.pager { display: flex; justify-content: center; gap: 14px; margin-top: 44px; }

/* ---------- 404 ---------- */
.botched { min-height: 60vh; display: flex; align-items: center; text-align: left; padding: 80px 0; }
.botched h1 { font-family: var(--font-display); font-size: clamp(80px,16vw,220px); text-transform: uppercase; line-height: .85; }
.botched p { color: var(--bone-dim-2); font-size: 18px; margin: 18px 0 26px; max-width: 460px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .feed { grid-template-columns: 1fr 1fr; }
  .post--lead { grid-column: span 2; grid-row: auto; }
  .merch .wrap { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .event-head .wrap { grid-template-columns: 1fr; }
  .show-hero .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav { display: none; }
  .burger { display: block; margin-left: auto; }
  .hero .wrap { grid-template-columns: 1fr; gap: 44px; }
  .feed { grid-template-columns: 1fr; }
  .post--lead { grid-column: auto; }
}