/* All Bay Music Magazine — Issue One web edition
   Rebrand: official ALLBAY MUSIC MAGAZINE logo — brand red #C80C0B, ink black, white  */
:root{
  --paper:#ffffff;
  --paper-2:#f5f4f2;
  --ink:#0a0a0a;
  --ink-soft:#3c3a38;
  --muted:#7a746e;
  --red:#c80c0b;
  --red-deep:#9c0908;
  --rule:#e2ddd7;
  --rule-dark:#c9c2ba;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;
  font-size:17px;
  line-height:1.65;
}
a{color:var(--red);text-decoration-color:rgba(200,12,11,.4);text-underline-offset:3px}
a:hover{color:var(--red-deep)}
a:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* Masthead — the logo itself, on white, over the brand red bar */
.masthead{
  background:var(--paper);
  border-bottom:6px solid var(--red);
  padding:30px 20px 22px;
  text-align:center;
}
.masthead .logo a{display:inline-block;line-height:0}
.masthead .logo img{
  width:min(440px,86vw);
  height:auto;
  display:inline-block;
}
.masthead .tag{
  font-family:Verdana,Geneva,sans-serif;
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:14px;
}

/* Page frame */
.wrap{max-width:760px;margin:0 auto;padding:38px 20px 80px}
.wide{max-width:900px}

/* Article header */
.eyebrow{
  font-family:Verdana,Geneva,sans-serif;
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--red);
  display:flex;align-items:center;gap:12px;
  margin-bottom:14px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule-dark)}
.pageref{
  font-family:Verdana,Geneva,sans-serif;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:var(--ink);
  padding:2px 8px;border-radius:2px;white-space:nowrap;
}
h1{
  font-family:Haettenschweiler,'Arial Narrow',Impact,sans-serif;
  font-weight:400;
  font-size:clamp(40px,7vw,64px);
  line-height:.95;
  margin:.1em 0 .25em;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--ink);
}
h1::after{
  content:"";display:block;width:84px;height:8px;background:var(--red);margin-top:14px;
}
.standfirst{
  font-style:italic;color:var(--ink-soft);
  border-left:4px solid var(--red);
  padding-left:14px;margin:22px 0 30px;
}
h2{
  font-family:Haettenschweiler,'Arial Narrow',Impact,sans-serif;
  font-weight:400;text-transform:uppercase;letter-spacing:.5px;
  font-size:28px;color:var(--red);
  margin:44px 0 10px;
}
h3{
  font-family:Verdana,Geneva,sans-serif;
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);margin:34px 0 8px;
  border-bottom:2px solid var(--red);
  display:inline-block;padding-bottom:3px;
}

/* Q&A styling — red speaker tags, like the print */
.q{margin:26px 0 6px;font-weight:bold;color:var(--ink)}
.q .spk{color:var(--ink)}
.a{margin:0 0 6px;color:var(--ink-soft)}
.a .spk{
  font-family:Verdana,Geneva,sans-serif;
  font-size:13px;letter-spacing:.06em;
  color:var(--red);font-weight:bold;text-transform:uppercase;
}
.spk{font-weight:bold}

/* Lists & blocks */
ul,ol{padding-left:26px}
li{margin:4px 0}
.listbox{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-top:4px solid var(--red);
  padding:18px 22px;
  margin:22px 0;
}
.listbox h3{margin-top:0;border-bottom:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
.note{
  font-family:Verdana,Geneva,sans-serif;font-size:12.5px;line-height:1.6;
  color:var(--muted);
  border:1px dashed var(--rule-dark);
  padding:12px 16px;margin:26px 0;
  background:var(--paper-2);
}
.stars{color:var(--red);letter-spacing:2px;font-size:15px}
blockquote{
  margin:28px 0;padding:4px 0 4px 20px;
  border-left:4px solid var(--red);
  font-style:italic;font-size:1.12em;color:var(--ink);
}

/* TOC */
.toc{list-style:none;padding:0;margin:0}
.toc li{
  display:flex;align-items:baseline;gap:10px;
  padding:11px 2px;margin:0;
  border-bottom:1px solid var(--rule);
}
.toc .pg{
  font-family:Verdana,Geneva,sans-serif;font-size:11px;letter-spacing:.08em;
  color:#fff;background:var(--red);
  min-width:74px;text-align:center;
  padding:3px 6px;border-radius:2px;white-space:nowrap;
}
.toc a{
  font-family:Georgia,serif;font-size:19px;color:var(--ink);
  text-decoration:none;
}
.toc a:hover{color:var(--red)}
.toc .lead{flex:1;border-bottom:2px dotted var(--rule-dark);transform:translateY(-4px)}
.toc .kind{
  font-family:Verdana,Geneva,sans-serif;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}

/* Cover strip on index */
.coverline{
  text-align:center;margin:6px 0 34px;
  font-family:Verdana,Geneva,sans-serif;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);
}
.coverline b{color:var(--red);font-weight:normal}

/* Tweets */
.tweet{
  background:var(--paper-2);border:1px solid var(--rule);
  border-left:4px solid var(--red);
  padding:14px 18px;margin:14px 0;
}
.tweet .handle{
  font-family:Verdana,Geneva,sans-serif;font-size:13px;font-weight:bold;
  color:var(--red);letter-spacing:.04em;
}
.tweet .meta{
  font-family:Verdana,Geneva,sans-serif;font-size:11px;color:var(--muted);
  margin-top:6px;
}

/* Footer nav */
.footnav{
  margin-top:70px;padding-top:20px;border-top:4px solid var(--red);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:Verdana,Geneva,sans-serif;font-size:12.5px;letter-spacing:.06em;
}
.footnav a{text-transform:uppercase;letter-spacing:.14em;text-decoration:none;color:var(--ink)}
.footnav a:hover{color:var(--red)}
.colophon{
  margin-top:26px;font-family:Verdana,Geneva,sans-serif;font-size:11px;
  color:var(--muted);letter-spacing:.06em;line-height:1.7;
}

/* ── Magazine page image gallery ── */
.mag-pages{margin:28px 0 38px}
.mag-pages .mp-label{
  font-family:Verdana,Geneva,sans-serif;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:10px;margin-bottom:10px;
}
.mag-pages .mp-label::after{content:"";flex:1;height:1px;background:var(--rule)}
.mp-grid{display:grid;gap:10px}
.mp-grid.cols-1{grid-template-columns:1fr}
.mp-grid.cols-2{grid-template-columns:1fr 1fr}
.mp-grid.cols-3{grid-template-columns:1fr 1fr 1fr}
.mp-grid.cols-4{grid-template-columns:1fr 1fr 1fr 1fr}
@media(max-width:600px){
  .mp-grid.cols-2,.mp-grid.cols-3,.mp-grid.cols-4{grid-template-columns:1fr 1fr}
}
.mp-grid figure{margin:0;line-height:0}
.mp-grid a{display:block;line-height:0;transition:opacity .15s}
.mp-grid a:hover{opacity:.88}
.mp-grid img{
  width:100%;height:auto;display:block;
  border:1px solid var(--rule);
}
.mp-grid figcaption{
  font-family:Verdana,Geneva,sans-serif;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:4px 2px 0;line-height:1.4;
}