/* ---------- intro strip (replaces the big hero title) ---------- */
.intro{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(1.4rem,3vw,2.2rem) clamp(1.2rem,4vw,3.5rem) 0;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 2rem;
}
.intro-line{margin:0;font-family:Archivo,sans-serif;font-size:clamp(1.05rem,2vw,1.3rem)}
.intro-line strong{font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.intro-line span{color:var(--mute);font-weight:400;margin-left:.6rem}
.intro-links{margin:0;display:flex;gap:1.2rem;flex-wrap:wrap}
.intro-links a{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:.15rem;
}
.intro-links a:hover{color:var(--warm);border-color:var(--warm)}

/* ---------- home bands ---------- */
.band.home{scroll-margin-top:4.5rem}
.band.home:first-of-type{border-top:0}
.intro + .band.home{border-top:0;padding-top:clamp(1.4rem,3vw,2.2rem)}
.rowlabel{
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin:2rem 0 1rem;
}
.strip + .rowlabel{margin-top:0}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-7{grid-template-columns:repeat(7,1fr)}
.grid.cols-8{grid-template-columns:repeat(8,1fr)}
.grid.cols-2 .card h3{font-size:clamp(1.15rem,1.8vw,1.45rem)}

/* ---------- frames ---------- */
.frame.tall{aspect-ratio:9/16}
.frame.wide{aspect-ratio:16/9}
.frame.vfit img.fg{
  position:absolute;top:0;bottom:0;left:50%;height:100%;width:auto;aspect-ratio:9/16;
  transform:translateX(-50%);object-fit:cover;
}
.card:hover .frame.vfit img.fg,.card:focus-visible .frame.vfit img.fg{transform:translateX(-50%) scale(1.03)}
.card .frame.vfit img.bg,.card:hover .frame.vfit img.bg,.card:focus-visible .frame.vfit img.bg{
  position:absolute;inset:0;filter:blur(22px) brightness(.45) saturate(.6);transform:scale(3.4);
}
.frame.ph{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:repeating-linear-gradient(135deg,#14181b 0 14px,#191e22 14px 28px);
  border:1px dashed #3a4348;
}
.frame.ph span{
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--warm);line-height:1.6;padding:.5rem;
}
.frame.ph em{font-style:normal;color:var(--dim);letter-spacing:.04em;text-transform:none}
.card.is-ph h3::after{content:" \2022 placeholder";color:var(--warm);font-size:.7em;font-weight:400}
.player.ph{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,#14181b 0 14px,#191e22 14px 28px)}
.watchlink{text-align:center;margin:.8rem 0 0}
.watchlink a{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:.15rem;
}
.watchlink a:hover{color:var(--warm);border-color:var(--warm)}
.player.ph span{font-family:"IBM Plex Mono",monospace;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--warm)}
.preview-banner{
  background:var(--warm);color:#0d1012;text-align:center;padding:.55rem 1rem;
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.06em;
}

/* ---------- about / resume links ---------- */
.cta.ghost{margin-left:.8rem;border-color:var(--line);color:var(--ink)}
.cta.ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.res-block h3 a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.res-block h3 a:hover{color:var(--warm);border-color:var(--warm)}

/* ---------- responsive ---------- */
@media (max-width:1200px){ .grid.cols-7,.grid.cols-8{grid-template-columns:repeat(4,1fr)} }
@media (max-width:1000px){
  .grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .grid.cols-7{grid-template-columns:repeat(3,1fr)}
  .grid.cols-8{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:720px){ .nav nav a.sec{display:none} }
@media (max-width:600px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .grid.cols-7,.grid.cols-8{grid-template-columns:repeat(2,1fr)}
  .intro-line span{display:block;margin:.2rem 0 0}
  .strip{flex-wrap:wrap;row-gap:.4rem}
  .strip .note{flex-basis:100%}
  .cta.ghost{margin-left:0}
}