:root{--bg:#F5F5F6;--panel:#FFFFFF;--panel-2:#F5F5F6;--line:#E2E2E6;
 --line-soft:#EDEDF0;--ink:#1A1A1F;--ink-2:#45454D;--ink-3:#6B6B75;
 --accent:#4A2CFF;--bar:#1C1C1C;--bar-2:#5A5A5A;
 --strip:linear-gradient(90deg,#4A2CFF 0 20%,#16C25C 20% 40%,#F0C800 40% 60%,
  #E63030 60% 80%,#E31FE6 80% 100%);
 --font:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:15px/1.6 var(--font);
 -webkit-font-smoothing:antialiased}
/* Three cells: the wordmark left, the title in the centre of the window, and
   an empty right cell of the same width as the left, which keeps the title
   centred. */
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
 gap:16px;padding:18px 20px 16px;
 background:linear-gradient(90deg,var(--bar) 55%,var(--bar-2));
 border-bottom:3px solid transparent;border-image:var(--strip) 1;color:#fff}
.topbar .brand{justify-self:start;display:inline-flex;align-items:center}
.topbar .brand img{height:14px;width:auto;display:block}
.topbar .masthead{text-align:center}
.topbar h1{margin:0;font-size:34px;line-height:1.15;font-weight:750;
 letter-spacing:.08em}
.topbar h1 a{color:#fff;text-decoration:none}
.topbar .tagline{margin:6px 0 0;font-style:italic;color:#C8C8CE;font-size:14px}
/* A phone: the wordmark on its own line, the title centred under it. */
@media (max-width:640px){
 .topbar{grid-template-columns:1fr;gap:12px;padding:12px 16px 14px}
 .topbar .right{display:none}
 .topbar h1{font-size:26px;letter-spacing:.06em}
 .topbar .tagline{font-size:13px}
}

.wrap{max-width:44rem;margin:0 auto;padding:28px 16px 64px}
/* One issue is one card: the date leads, everything under it is that
   issue's. */
article{background:var(--panel);border:1px solid var(--line);border-radius:8px;
 box-shadow:0 1px 2px rgba(20,20,30,.04);padding:20px 24px;margin:0 0 16px}
h2{font-size:17px;line-height:1.35;margin:0 0 2px;font-weight:650}
h2 a{color:var(--ink);text-decoration:none}
h2 a:hover{color:var(--accent)}
.meta{color:var(--ink-3);font-size:12.5px;margin:0 0 10px;
 font-variant-numeric:tabular-nums}
.unpublished{color:var(--ink-3);font-style:italic}
.summary{margin:0 0 12px;color:var(--ink-2)}
.summary a{color:var(--ink-2);text-decoration:underline;
 text-decoration-color:var(--accent);text-underline-offset:2px}
.summary a:hover{color:var(--accent)}
/* The section rail from the issue itself: the shape of the week at a glance,
   and a way into the part of it the reader came for. */
.rail{display:flex;flex-wrap:wrap;column-gap:14px;row-gap:2px;margin:0 0 6px;
 padding-top:10px;border-top:1px solid var(--line-soft)}
.rail a{color:var(--ink-3);text-decoration:none;font-size:12px;line-height:1.6}
.rail a:hover{color:var(--accent)}
.rail .n{opacity:.6;margin-left:4px;font-variant-numeric:tabular-nums}
.listen{color:var(--ink-3);font-size:12.5px;margin:0}
.listen a{color:var(--ink-3)}
.listen a:hover{color:var(--accent)}
.listen .lead{font-weight:600;color:var(--ink-2)}
.listen .x{font-variant-numeric:tabular-nums;opacity:.7}
footer{margin-top:28px;color:var(--ink-3);font-size:12.5px;text-align:center}
a{color:var(--accent)}