/* The Print Run - Instrument Serif + Schibsted Grotesk.
   Issue archive, :target overlay menu, reworded footer, prefers-color-scheme dark. */
:root{
  --ink:#14161a; --body:#3d424a; --muted:#767b84; --paper:#fbfaf8; --panel:#f2efe9;
  --rule:#dcd8d0; --ink-a:#8c2f1f; --ink-a2:#a63c28; --shadow:rgba(20,22,26,.08);
}
@media(prefers-color-scheme:dark){
  :root{
    --ink:#f0ece4; --body:#c3c0b8; --muted:#8e8b84; --paper:#14151a; --panel:#1c1e24;
    --rule:#2f323a; --ink-a:#e08a6a; --ink-a2:#f0a184; --shadow:rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);
  font:400 17px/1.68 "Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink-a);text-underline-offset:2px}
a:hover{color:var(--ink-a2)}
h1,h2,.issue-no,.brand{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;
  font-weight:400;color:var(--ink);line-height:1.14;text-wrap:balance}
p{text-wrap:pretty}

/* ---- header ---- */
.head{max-width:1160px;margin:0 auto;padding:26px 28px 0;display:flex;align-items:center;
  justify-content:space-between;gap:24px}
.brand img{width:clamp(200px,24vw,320px);height:auto}
/* This is the only build in the network with dark mode, so it is the only one where a dark
   logo would vanish into its own header. The prompt asks for a single-colour dark wordmark
   on transparent, which inverts cleanly to white. See feedback_pbn_build_checks. */
@media(prefers-color-scheme:dark){.brand img{filter:brightness(0) invert(1)}}
.desknav{display:flex;gap:0 26px}
.desknav a{font-size:13px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  color:var(--ink);text-decoration:none}
.desknav a:hover,.desknav a.on{color:var(--ink-a)}
.strap{max-width:1160px;margin:14px auto 0;padding:0 28px 20px;
  font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:19px;color:var(--muted);
  border-bottom:1px solid var(--rule)}

/* ---- :target overlay. Hidden until the hash matches; no script involved. ---- */
.ovopen{display:none;font-size:13px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  color:var(--ink);text-decoration:none;border:1px solid var(--rule);padding:9px 15px}
.overlay{position:fixed;inset:0;z-index:60;background:var(--paper);
  display:none;flex-direction:column;justify-content:center;padding:40px 30px}
.overlay:target{display:flex}
.ovclose{position:absolute;top:26px;right:28px;font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;color:var(--muted);text-decoration:none}
.ovnav{display:flex;flex-direction:column;gap:6px}
.ovnav a{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(30px,9vw,46px);
  color:var(--ink);text-decoration:none;padding:8px 0;border-bottom:1px solid var(--rule)}
.ovnav a:last-child{border-bottom:0}
.ovnav a:hover{color:var(--ink-a)}

/* ---- issue archive ---- */
.archive{max-width:1160px;margin:0 auto;padding:38px 28px 10px}
.lede{max-width:62ch;margin:0 0 52px;font-size:20px;line-height:1.58;color:var(--ink)}
.issue{margin:0 0 60px;padding:0 0 52px;border-bottom:1px solid var(--rule)}
.issue:last-child{border-bottom:0}
.issue-head{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0 30px;align-items:baseline;
  margin-bottom:28px}
.issue-no{grid-row:span 2;margin:0;font-size:34px;color:var(--ink-a);letter-spacing:-.01em}
.issue-head h2{margin:0;font-size:clamp(27px,3.6vw,36px)}
.issue-when{grid-column:2;margin:6px 0 0;font-size:13.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.entries{list-style:none;margin:0;padding:0;display:grid;gap:0}
.entries li{border-top:1px solid var(--rule)}
.entries li:last-child{border-bottom:1px solid var(--rule)}
.entries a{display:grid;grid-template-columns:210px minmax(0,1fr);gap:0 28px;align-items:center;
  padding:20px 0;text-decoration:none;color:var(--body)}
/* overflow:hidden is non-optional on any aspect box - see feedback_pbn_build_checks */
.ent-img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--panel)}
.ent-img img{width:100%;height:100%;object-fit:cover}
.ent-txt{display:block;min-width:0}
.ent-cat{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:6px}
.entries strong{display:block;font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:26px;line-height:1.16;color:var(--ink);margin-bottom:7px}
.entries a:hover strong{color:var(--ink-a)}
.ent-desc{display:block;font-size:15.5px;color:var(--muted);line-height:1.55}

/* ---- piece ---- */
.piece{max-width:70ch;margin:0 auto;padding:40px 28px 10px}
.crumb{margin:0 0 12px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.crumb a{color:var(--muted)}
.piece h1{margin:0 0 16px;font-size:clamp(34px,5.4vw,52px)}
.standfirst{margin:0 0 32px;font-size:20px;line-height:1.55;color:var(--ink)}
.piece h2{margin:42px 0 12px;font-size:28px}
.piece p{margin:0 0 17px}
.sig{margin-top:34px;padding-top:16px;border-top:1px solid var(--rule);
  font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:17px;color:var(--muted)}
.onward{margin:4px 0 0;font-size:16px}

figure{margin:28px 0}
figure img{width:100%;aspect-ratio:3/2;object-fit:cover;overflow:hidden;
  box-shadow:0 2px 14px var(--shadow)}
figure.lead{margin:0 0 32px}
figcaption{margin-top:10px;font-size:13.5px;color:var(--muted);line-height:1.5}

/* ---- footer: reworded labels, issue count where a (c) would be ---- */
.foot{max-width:1160px;margin:60px auto 0;padding:34px 28px 52px;border-top:3px solid var(--ink)}
.footcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.foot h2{margin:0 0 10px;font-size:22px}
.foot p{margin:0;font-size:15px;color:var(--muted);line-height:1.62;max-width:46ch}
.footmeta{margin-top:32px;padding-top:16px;border-top:1px solid var(--rule);
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---- one breakpoint per collapse, measured against the 210px thumb + 28px gap ---- */
@media(max-width:860px){
  .desknav{display:none}
  .ovopen{display:inline-block}
  .entries a{grid-template-columns:1fr;gap:14px 0;padding:22px 0}
  .ent-img{max-width:none}
  .issue-head{grid-template-columns:1fr;gap:0}
  .issue-no{grid-row:auto;font-size:28px;margin-bottom:4px}
  .issue-when{grid-column:1}
  .footcols{grid-template-columns:1fr;gap:28px}
  .head,.strap,.archive,.piece,.foot{padding-left:22px;padding-right:22px}
}
@media(max-width:560px){
  body{font-size:16.5px}
  .lede{font-size:18px}
  .standfirst{font-size:18.5px}
  .piece h2{font-size:25px}
  .entries strong{font-size:23px}
}