/* ── Byteperform v2 — type system + premium components (overrides styles.css) ── */
:root{ --navy:#0b1322; --navy-deep:#070b16; --cobalt:#2547ff; --cobalt-soft:#8aa0ff; }

/* ── Type system ──────────────────────────────────────────────
   Headlines: Inter Tight · Body/prose: Newsreader serif · Labels: JetBrains Mono */
body{ font-family:'Newsreader', Georgia, serif; }
h1,h2,h3,h4{ font-family:'Inter Tight', system-ui, sans-serif; letter-spacing:-0.03em; font-weight:600; }
h1{ letter-spacing:-0.04em; }
.lede,.standfirst,.prose,.card p,.cover p,.case p{ font-family:'Newsreader', Georgia, serif; }

/* keep the mono signature only on micro-labels / structural chrome */
.nav, .nav .links, .nav .links a, .wm, .eyebrow, .kicker, .tag, .dateline,
.statbar, .divider-label, .bnum, .pill, .stamp, .idx, .tick-row, .tick-track,
.section-head .idx, .card .tag, footer .col, footer .col .h, footer a, .h,
.cover .kicker, .chan .lbl, .case .idx, .ministat .k{
  font-family:'JetBrains Mono', ui-monospace, monospace;
}

/* tighten heading sizes a touch for Inter Tight */
h2{ font-size:38px; line-height:1.08; }
.section-head h2{ letter-spacing:-0.035em; }

/* ── Verticals — magazine-cover tiles ─────────────────────── */
.covers{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.cover{
  display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--rule); overflow:hidden;
  transition:transform 220ms cubic-bezier(.2,.7,.2,1), border-color 220ms ease, box-shadow 220ms ease;
}
.cover:hover{ transform:translateY(-3px); border-color:var(--rule-strong); box-shadow:0 14px 40px -22px rgba(23,22,26,0.4); }
.cover .img{ aspect-ratio:4/5; background-color:var(--navy); background-size:cover; background-position:center; }
.cover .body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:9px; }
.cover .kicker{ font-size:10px; letter-spacing:0.28em; text-transform:uppercase; color:var(--red); }
.cover .kicker.muted{ color:var(--muted); }
.cover h4{ font-family:'Inter Tight',sans-serif; font-size:20px; line-height:1.18; margin:0; }
.cover p{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.55; }

/* ── Dark feature band ────────────────────────────────────── */
.band-dark{
  background:var(--navy-deep); color:var(--bone);
  border-bottom:0; position:relative; overflow:hidden; padding:104px 0;
}
.band-dark h2{ color:var(--bone); }
.band-dark .eyebrow{ color:rgba(244,241,234,0.55); }
.band-dark .lede{ color:rgba(244,241,234,0.72); }

/* Channels banner image + three-up explainer */
.chan-banner{
  width:100%; aspect-ratio:24/7; background:var(--navy);
  background-size:cover; background-position:center;
  border:1px solid rgba(244,241,234,0.12); border-radius:2px;
}
.chan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:44px; }
.chan{ padding:0 30px; border-left:1px solid rgba(244,241,234,0.14); }
.chan:first-child{ padding-left:0; border-left:0; }
.chan .lbl{ font-size:11px; letter-spacing:0.26em; text-transform:uppercase; color:var(--cobalt-soft); margin-bottom:12px; }
.chan h3{ color:var(--bone); font-size:21px; margin:0 0 10px; }
.chan p{ font-family:'Newsreader',serif; color:rgba(244,241,234,0.66); font-size:15px; line-height:1.6; margin:0; }

/* ── Selected work — case tiles with art ──────────────────── */
.cases{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; }
.case{
  display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--rule); overflow:hidden;
  transition:transform 220ms cubic-bezier(.2,.7,.2,1), border-color 220ms ease, box-shadow 220ms ease;
}
.case:hover{ transform:translateY(-3px); border-color:var(--rule-strong); box-shadow:0 14px 40px -22px rgba(23,22,26,0.4); }
.case .img{ aspect-ratio:3/2; background-color:var(--navy); background-size:cover; background-position:center; }
.case .body{ padding:28px 30px 30px; display:flex; flex-direction:column; gap:12px; }
.case .idx{ font-size:10px; letter-spacing:0.26em; text-transform:uppercase; color:var(--muted); }
.case h3{ font-family:'Inter Tight',sans-serif; font-size:23px; line-height:1.2; margin:0; }
.case p{ margin:0; color:var(--muted); font-size:15px; line-height:1.6; }
.case .meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }

/* ── Mini stat strip (dark) ───────────────────────────────── */
.ministats{ display:flex; gap:56px; flex-wrap:wrap; margin-top:46px; padding-top:30px; border-top:1px solid rgba(244,241,234,0.14); }
.ministat{ display:flex; flex-direction:column; gap:7px; }
.ministat .v{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:34px; letter-spacing:-0.03em; color:var(--bone); }
.ministat .k{ font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:rgba(244,241,234,0.5); }

/* ── Secondary page hero (About / Work) — static image, dark ─ */
.page-hero{
  position:relative; background:var(--navy); color:var(--bone);
  overflow:hidden; border-bottom:2px solid rgba(23,22,26,0.18);
  padding:104px 0 96px;
}
.page-hero .ph-img{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; opacity:0.5; }
.page-hero .ph-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, var(--navy-deep) 0%, rgba(7,11,22,0.92) 34%, rgba(7,11,22,0.55) 56%, rgba(7,11,22,0.1) 82%); }
.page-hero .shell{ position:relative; z-index:2; }
.page-hero h1{ color:var(--bone); font-size:clamp(40px,4.6vw,60px); line-height:1.05; max-width:760px; }
.page-hero .eyebrow{ color:var(--cobalt-soft); margin-bottom:22px; }
.page-hero .lede{ color:rgba(244,241,234,0.74); margin-top:24px; max-width:600px; }
.page-hero .em{ color:var(--cobalt-soft); }

/* dark footer already exists; align fonts */
footer .wm, footer .col .h, footer a, .colophon{ font-family:'JetBrains Mono',monospace; }

@media (max-width:820px){
  .covers, .chan-grid, .cases{ grid-template-columns:1fr; }
  .chan{ padding:0; border-left:0; border-top:1px solid rgba(244,241,234,0.14); padding-top:22px; margin-top:22px; }
  .chan:first-child{ border-top:0; padding-top:0; margin-top:0; }
  .band-dark{ padding:64px 0; }
  .ministats{ gap:32px; }
}