/* Post layout, shared by every post under web/blog/.
   This is the "superclass": the article column, its header, and the long-form
   vocabulary (dek, section labels, takeaway, setup grid, quotes, crossheads).
   Colours and fonts come from web/home/theme.css (generated from the tokens)
   and web/home/fonts.css; page chrome (nav, footer, buttons) from web/home/site.css.
   A post adds its own stylesheet only for things specific to that post
   (figures, interactive explainers). */

/* the column */
.note{max-width:720px;margin:0 auto;padding:72px 28px 110px;}

/* header: meta row, title, dek */
.nmeta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:26px;}
.nmeta .nid{color:var(--accent-text);}
.nmeta .chip{border:1px solid var(--line2);border-radius:6px;padding:3px 8px;}
.note h1{font-size:40px;line-height:1.12;margin-bottom:18px;}
.note .dek{font-family:var(--sans);font-size:18px;line-height:1.55;color:var(--ink2);margin:0 0 34px;max-width:650px;}
.note .dek a{color:var(--accent-text);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent);text-underline-offset:3px;transition:background-color .15s ease;}
.note .dek a:hover,.note .dek a:focus-visible{background:var(--accent-soft);}
.standfirst{font-family:var(--serif);font-size:20px;line-height:1.6;color:var(--ink2);font-style:italic;
  border-left:2px solid var(--accent);padding-left:22px;margin-bottom:34px;}

/* body: long-form serif */
.note .body{font-family:var(--serif);font-size:19px;line-height:1.75;color:var(--ink);}
.note .body p{color:var(--ink);margin-bottom:20px;}
.note .body p b,.note .body strong{font-weight:600;}
.note .body h3{font-size:31px;margin:0 0 20px;}
.note .body h4{font-family:var(--grotesk);font-weight:500;letter-spacing:-.01em;line-height:1.15;color:var(--h1);font-size:22px;margin:36px 0 13px;}
.note .body a{color:var(--accent-text);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset:3px;}
.note .body code{font-family:var(--mono);font-size:.8em;color:var(--code-ink);background:var(--code-bg);
  border:1px solid var(--line);border-radius:4px;padding:.08em .3em;}
.note .body .section-label{font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-text);margin:64px 0 14px;}
.note .body .crosshead{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--accent-text);
  text-transform:uppercase;margin:38px 0 14px;}
.dateline{font-family:var(--mono);font-style:normal;font-size:13px;letter-spacing:.06em;color:var(--accent-text);}

/* blocks */
.takeaway{margin:32px 0 42px;padding:22px 24px;border-left:3px solid var(--accent);background:var(--accent-soft);
  font-family:var(--sans);font-size:16px;line-height:1.6;}
.note blockquote{margin:26px 0;padding-left:22px;border-left:2px solid var(--accent);}
.note blockquote p{font-style:italic;}
.note blockquote .attr{font-family:var(--mono);font-style:normal;font-size:12.5px;letter-spacing:.06em;color:var(--ink3);}
.setup{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:28px 0 38px;}
.setup div{background:var(--s1);padding:16px 18px;}
.setup .wide{grid-column:1/-1;}
.setup dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:3px;}
.setup dd{font-family:var(--sans);font-size:14px;line-height:1.45;color:var(--ink);margin:0;}
.closing{margin-top:54px;padding-top:28px;border-top:1px solid var(--line);}

/* end of the article */
.endrule{margin-top:44px;border-top:1px solid var(--line);padding-top:18px;display:flex;gap:22px;flex-wrap:wrap;}
.backlink{font-family:var(--mono);font-size:12.5px;color:var(--ink2);}
.backlink:hover{color:var(--accent-text);}

@media(max-width:740px){
  .note{padding-top:48px}.note h1{font-size:34px}.note .body{font-size:18px}.note .body h3{font-size:27px}
  .standfirst{font-size:18px}
  .setup{grid-template-columns:1fr;}.setup .wide{grid-column:auto;}
}