/* Denyan editions platform — edition skin: magazine, not website.
   The brand's colours are the variables below; a site's own are set in
   brand/brand.css (written by the admin, Issues > Brand) and override them. */
/* ---------- colour tokens: light by default, dark on request ---------- */
:root {
  --red:#C51A1B; --ink:var(--brand-ink, #212121);
  --red-deep:#9d1516;    /* the brand colour's hover */
  --red-rgb:197,26,27;   /* the brand colour, for tints */
  --bg:#ffffff;          /* page */
  --bg-soft:#faf7f3;     /* panels, plates, next-block */
  --text:#3a3a3a;        /* interface prose */
  --body:#26241f;        /* article body */
  --muted:#8b857d;       /* captions, meta */
  --faint:#999999;       /* the quietest type */
  --line:#e8e0d6;        /* rules and card borders */
  --line-soft:#f2eee9;
  --panel-line:#eee2d6;
  --card:#ffffff;        /* things that must stay light: ad plates */
  --accent:#ff8b7a;      /* on dark grounds */
  --meta:#a0a0a0;
}
/* html[...] outranks any later :root, so the theme cannot be undone
   by a stylesheet rule that happens to come afterwards */
html[data-theme="dark"] {
  --bg:#131211;
  --bg-soft:#1c1a18;
  --text:#c9c4bd;
  --body:#ddd8d1;
  --muted:#918b83;
  --faint:#7d776f;
  --line:#2e2b28;
  --line-soft:#242120;
  --panel-line:#2e2b28;
  --ink:#f0ece7;
  --card:#ffffff;
  --accent:#ff8b7a;
  --meta:#7d776f;
}
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:600; font-display:swap; src:url("assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:700; font-display:swap; src:url("assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"Source Serif 4"; font-style:normal; font-weight:400; font-display:swap; src:url("assets/fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Source Serif 4"; font-style:italic; font-weight:400; font-display:swap; src:url("assets/fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family:"Source Serif 4"; font-style:normal; font-weight:600; font-display:swap; src:url("assets/fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:Poppins; font-style:normal; font-weight:400; font-display:swap; src:url("assets/fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:Poppins; font-style:normal; font-weight:500; font-display:swap; src:url("assets/fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:Poppins; font-style:normal; font-weight:600; font-display:swap; src:url("assets/fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:Poppins; font-style:normal; font-weight:700; font-display:swap; src:url("assets/fonts/poppins-latin-700-normal.woff2") format("woff2"); }
* { box-sizing:border-box; margin:0; padding:0; }
/* Words are never broken across lines. Hyphenating a headline mid-word
   reads as a fault rather than typesetting, so a long word takes the next
   line instead; only a word longer than its container is ever broken. */
* { hyphens:none; -webkit-hyphens:none; overflow-wrap:break-word;
    word-break:normal; }
body { font-family:Poppins,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
       color:var(--text); background:var(--bg); line-height:1.65;
       font-size:15px;
       overflow-x:hidden; }   /* a quote sliding in must not widen the page */
.loading { text-align:center; color:#999; padding:4rem 1rem; }
/* ---------- header: white masthead row + red nav strip (site pattern) */
header { position:sticky; top:0; z-index:20; background:var(--bg);
         box-shadow:0 1px 4px rgba(0,0,0,.12); }
.hwrap { max-width:min(1800px, 94vw); margin:0 auto; width:100%;
         display:flex; align-items:center; gap:.9rem; position:relative;
         padding:0 1rem; }
.masthead .hwrap { padding-top:.6rem; padding-bottom:.6rem; }
.logo { display:flex; align-items:center; text-decoration:none;
        color:var(--ink); font-size:1.4rem; font-weight:700;
        letter-spacing:-.03em; min-width:0; }
.logo b { color:var(--red); }
.logo img { height:29px; width:auto; display:block;
  /* on a narrow phone a long issue name wins: the logo scales down to fit
     rather than running under it */
  max-width:100%; object-fit:contain; object-position:left center; }
/* a stacked logo (app.js sets .logo-tall): taller, in the same header
   height, so nothing below it moves */
.masthead.logo-tall .hwrap { padding-top:.3rem; padding-bottom:.3rem; }
.masthead.logo-tall .logo img { height:40px; }
/* the issue's name: at the right on phones (bigger from 30 Sept, and
   darker, so it reads at a glance) */
.issue-label { font-size:.86rem; color:#6b6b6b; font-weight:600;
               letter-spacing:.04em; margin-left:auto; white-space:nowrap;
               flex-shrink:0; }
[data-theme="dark"] .issue-label { color:#a9a9a9; }
.navstrip { background:var(--red); }
.navstrip .hwrap { min-height:44px; gap:0; }
#burger { background:none; border:0; color:#fff; cursor:pointer;
  font-family:inherit; font-size:.8rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:.8rem 1rem .8rem 0;
  display:flex; align-items:center; gap:.5rem; }
#burger .bicon { font-size:1.05rem; line-height:1; }
/* home, first in the red bar; phones keep theirs in the bottom bar */
.navhome { width:32px; height:32px; margin-right:.7rem; border:0;
  border-radius:50%; cursor:pointer; flex:0 0 auto;
  background:rgba(255,255,255,.18); color:#fff; font-size:1.05rem;
  line-height:1; transition:background .15s; }
.navhome:hover { background:rgba(255,255,255,.34); }
@media (max-width: 899px) { .navhome { display:none; } }
.navlink { color:#fff; text-decoration:none; font-size:.8rem;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.8rem .9rem; }
.navlink:hover, #burger:hover { background:rgba(0,0,0,.15); }
.site-link { margin-left:auto; color:rgba(255,255,255,.85);
  text-decoration:none; font-size:.74rem; font-weight:500; }
.site-link:hover { color:#fff; }
#pagemenu { display:none; position:absolute; top:100%; right:0; left:0;
  background:var(--bg); border-top:3px solid var(--red);
  box-shadow:0 10px 20px rgba(0,0,0,.2); max-height:72vh; overflow-y:auto;
  padding:.4rem 1rem 1.2rem; }
#pagemenu.open { display:block; }

/* the issues flyout: what there is to read, by its cover */
.navbtn { background:none; border:0; cursor:pointer; font:inherit;
  color:#fff; text-decoration:none; font-size:.8rem; font-weight:500;
  display:inline-flex; align-items:center; gap:.35rem; padding:.8rem 1rem; }
.navbtn .ibicon { font-size:.7rem; opacity:.8; transition:transform .15s; }
.navbtn[aria-expanded="true"] .ibicon { transform:rotate(180deg); }
#issuemenu { display:none; position:absolute; top:100%; right:0; left:0;
  background:var(--bg); border-top:3px solid var(--red);
  box-shadow:0 10px 20px rgba(0,0,0,.2); max-height:72vh; overflow-y:auto;
  padding:1.1rem 1rem 1.3rem; }
#issuemenu.open { display:block; }
.imgrid { display:grid; gap:1rem; max-width:min(1800px, 94vw); margin:0 auto;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
.imcard { text-decoration:none; color:var(--ink); display:block; }
.imcard img { display:block; width:100%; height:auto; aspect-ratio:3/4;
  object-fit:cover; background:#eee; border:1px solid var(--line, #e5e5e5);
  transition:transform .15s, box-shadow .15s; }
.imcard:hover img { transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.18); }
.imcard.on img { outline:3px solid var(--red); outline-offset:-3px; }
.imnocover { display:flex; align-items:center; justify-content:center;
  aspect-ratio:3/4; background:#1c1c1c; color:#fff; text-align:center;
  padding:.6rem; font-family:"Barlow Condensed",sans-serif; font-weight:700;
  font-size:1.1rem; line-height:1.1; }
.imlabel { display:block; margin-top:.45rem;
  font-family:Poppins,sans-serif; font-size:.74rem; font-weight:600; }
.imreading { font-weight:400; font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:#999; }
.imnone { font-size:.8rem; color:#888; margin:0; text-align:center; }
@media (max-width:600px) {
  .imgrid { grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); }
}
/* Each section stays whole in one column. The first group in the first
   column carried a top margin the others did not, which is what left
   COVER STORY sitting lower than the headings beside it. */
.menugroup { margin-top:.8rem; break-inside:avoid; }
.menuwrap > .menugroup:first-child { margin-top:0; }
.menupage { font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--line);
  padding-bottom:.3rem; position:relative; }
.menupage::after { content:""; position:absolute; left:0; bottom:-1px;
  width:34px; border-bottom:2px solid var(--red); }
.menugroup ul { list-style:none; }
.menugroup li a { display:block; padding:.5rem 0; color:var(--ink);
  text-decoration:none; font-size:.88rem; line-height:1.4; font-weight:500;
  border-bottom:1px solid var(--line-soft); white-space:normal; }
.menugroup li a:hover { color:var(--red); }
main { max-width:640px; margin:0 auto; padding:0 1rem 2rem; }
/* ---------- contents */
.hero { display:block; margin:1.2rem 0; }
.hero img { width:100%; height:auto; border:1px solid var(--line); }
.sectionhead { font-size:.85rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); margin:1.6rem 0 .8rem;
  border-bottom:1px solid var(--line); padding-bottom:.45rem;
  position:relative; }
.sectionhead::after { content:""; position:absolute; left:0; bottom:-1px;
  width:44px; border-bottom:2px solid var(--red); }
.tocsection { display:flex; align-items:center; gap:.9rem;
  margin:3.4rem 0 1.3rem; padding:0; border:0; }
.tocsection span { background:var(--red); color:#fff;
  font-family:"Barlow Condensed",sans-serif; font-weight:700;
  font-size:1.15rem; line-height:1; letter-spacing:.15em;
  text-transform:uppercase; padding:.42rem .85rem .34rem;
  white-space:nowrap; }
/* the rule carries the eye across the column, so a section break is
   unmistakable even between two photographs */
.tocsection::after { content:""; flex:1; height:3px; background:var(--red); }
.cardlist > .tocsection:first-child { margin-top:1.2rem; }
.issuemast { margin:1.4rem 0 .2rem; }
.issuemast .im-issue { font-family:"Barlow Condensed",sans-serif;
  font-weight:700; font-size:2.3rem; line-height:1; color:var(--ink);
  text-transform:uppercase; }
.issuemast .im-sub { font-family:"Source Serif 4",Georgia,serif;
  color:var(--muted); margin-top:.2rem; font-size:.95rem; }
.sponsorstrip { display:flex; align-items:center; gap:.7rem;
  margin:.5rem 0 .4rem; padding:.55rem .8rem; border:1px solid #eee2d6;
  background:#faf7f3; text-decoration:none; width:fit-content; }
.sponsorstrip .sp-label { font-family:Poppins,sans-serif; font-size:.64rem;
  font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:#999; }
.sponsorstrip .sp-name { font-family:"Barlow Condensed",sans-serif;
  font-weight:700; font-size:1.3rem; color:var(--ink); line-height:1; }
.sponsorstrip img { height:26px; width:auto; display:block; }
.sponsorstrip:hover .sp-name { color:var(--red); }
.sponsorend { font-family:Poppins,sans-serif; text-align:center;
  font-size:.76rem; color:#999; margin:.8rem 0 .2rem; }
/* TOC entries: landscape hero on top, wording beneath at full card width */
.card { display:flex; flex-direction:column; gap:.65rem;
        padding:1.1rem 0 1.2rem; border-bottom:1px solid var(--line);
        text-decoration:none; }
.cardtitle { transition:color .18s ease; }
.card:hover .cardtitle { color:var(--red); }
.card .thumb { width:100%; aspect-ratio:16/9; object-fit:cover;
               object-position:center 30%; display:block;
               background:transparent; }
.card .cardtext { min-width:0; }
.cardtext { display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.tag { font-family:Poppins,sans-serif; font-size:.62rem; font-weight:700;
       letter-spacing:.16em; text-transform:uppercase; color:var(--red); }
.cardtitle { font-family:"Barlow Condensed",sans-serif; font-weight:700;
  font-size:1.45rem; line-height:1.05; color:var(--ink); }
.teaser { font-family:"Source Serif 4",Georgia,serif; font-size:.95rem;
  color:var(--muted); line-height:1.45; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* archive */
.archive { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
           gap:1rem; margin:0 0 1.5rem; }
.archive a { text-decoration:none; color:var(--ink); font-size:.82rem;
             font-weight:700; text-align:center; }
.archive img { width:100%; height:auto; border:1px solid var(--line);
               display:block; margin-bottom:.35rem; }
.archive a:hover { color:var(--red); }
/* ---------- article */
.pagetag { font-size:.72rem; font-weight:600; letter-spacing:.22em;
           text-transform:uppercase; color:var(--red); margin:2rem 0 .7rem;
           font-family:Poppins,sans-serif; }
/* A left-aligned headline should fill the measure, so it sits square with
   the body beneath it. (text-wrap:balance evens the lines instead, which
   left the headline visibly short of the column.) Balance is kept for the
   centred feature hero, where even lines are the point. */
article h1 { font-family:"Barlow Condensed",Poppins,sans-serif;
  font-weight:700; color:var(--ink); font-size:2.6rem; line-height:1.02;
  letter-spacing:-.01em; margin-bottom:1rem; text-wrap:pretty; }
article { font-family:"Source Serif 4",Georgia,serif; }
/* crossheads: h2 is what the admin's Crosshead button writes, h3 is what
   the pipeline's imports carry. They read as one level. */
article h2, article h3 { font-family:"Barlow Condensed",sans-serif;
  font-weight:700; font-size:1.5rem; margin:1.8rem 0 .4rem;
  color:var(--ink); }
/* a crosshead starts a new thought, so it starts below any picture
   standing beside the column rather than running alongside it */
article h2 { clear:both; }
/* an imported standfirst is the first thing in the piece, before any body
   text: it stays in the reading face, upright — the edition sets no italic */
article > h3:first-child { font-family:"Source Serif 4",Georgia,serif;
  font-weight:400; font-size:1.26rem; line-height:1.45;
  color:#555; margin:.2rem 0 1rem; }
article p { margin:0 0 1.15rem; font-size:1.13rem; line-height:1.72;
  color:var(--body); }
/* a wider column needs slightly larger type and a little more leading,
   or the line simply gets longer and harder to track */
@media (min-width:1080px) {
  /* type grows with the column so the line stays around 90 characters */
  article p, article ul, article ol { font-size:1.25rem; line-height:1.68; }
  article li { margin-bottom:.5rem; }
  article > h3 { font-size:1.6rem; }
}
article p.caption { font-family:Poppins,sans-serif; font-size:.78rem;
  color:var(--faint); line-height:1.5; margin:-.5rem 0 1.2rem; }
h3 { font-size:1.1rem; font-weight:700; margin:1.2rem 0 .4rem;
     color:var(--ink); }
p { margin:.65rem 0; font-size:1rem; color:#3a3a3a; }
p.caption { font-size:.8rem; color:#888; margin-top:-.25rem; }
a { color:var(--red); }
article blockquote, blockquote.pullquote {
  border:0; border-top:3px solid var(--red);
  border-bottom:1px solid var(--line); padding:1.1rem .3rem 1.2rem;
  margin:1.8rem 0; font-family:"Source Serif 4",Georgia,serif;
  font-weight:400; font-size:1.45rem; line-height:1.4;
  color:var(--ink); text-align:center; }
figure { margin:1.1rem 0; }
figure img { width:100%; height:auto; }
/* article images: landscape frame at column width, cropped never stretched */
article figure img { width:100%; aspect-ratio:16/10; object-fit:cover;
  object-position:center 22%; border-radius:2px; }
/* small originals & strong portraits: natural size, centred, never upscaled */
article figure img.natural { aspect-ratio:auto; object-fit:unset; width:auto;
  max-width:100%; max-height:420px; display:block; margin:0 auto; }
article figure.lead { margin:.5rem 0 1.2rem; }
/* a draft opened through a proofing link says so, above everything */
/* Where you are in the issue, kept in view the whole way down a piece —
   the digital equivalent of a page number. It sits above whichever bar the
   layout is using: the red section rail on a wide window, the reading nav
   on a narrow one. */
/* in the masthead, beside the issue's name: a page number, not a badge */
.pagecount { font-family:Poppins,sans-serif; font-size:.72rem;
  font-weight:600; letter-spacing:.04em; color:#999;
  white-space:nowrap; }
.issue-label:empty + .pagecount { margin-left:auto; }
.pagecount[hidden] { display:none; }
@media print { .pagecount { display:none; } }

.proofbar { position:sticky; top:0; z-index:200; background:#1c1c1c;
  color:#fff; font-family:Poppins,sans-serif; font-size:.78rem;
  line-height:1.4; padding:.55rem 1rem; text-align:center; }
.proofbar b { color:var(--accent); font-weight:700; }
.draftflag { font-family:Poppins,sans-serif; font-size:.6rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; background:var(--red);
  color:#fff; border-radius:2px; padding:.1rem .3rem; vertical-align:.1em; }

/* A headshot is a person, not a picture of a thing. It reads as a portrait
   in a circle with the brand ring around it, in one of three sizes, at the
   right of the column unless flipped to the left (29 Sept: it was left
   unless flipped right; head-right is still read, and is simply the
   default now). The disc behind it can be filled red for a cutout; a
   photographed background fills the circle by itself. */
article figure.fig-head {
  --head:170px;
  float:right; clear:right; width:auto; max-width:none;
  margin:.35rem 0 .7rem 1.6rem; padding:0;
  background:transparent; text-align:center;
}
article figure.fig-head.head-left {
  float:left; clear:left; margin:.35rem 1.6rem .7rem 0;
}
article figure.fig-head img {
  display:block; width:var(--head); height:var(--head);
  max-width:none; max-height:none; margin:0;
  border-radius:50%; object-fit:cover; object-position:50% 14%;
  background:#f1f1f1; margin:0 auto;
  border:4px solid var(--red); box-sizing:border-box;
}
/* a cutout on the brand red, with a white ring keeping it off the page */
article figure.fig-head.head-red img {
  background:var(--red); border-color:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.10);
}
article figure.fig-head figcaption {
  /* a name sets the circle's width; a caption carrying a quote may run up
     to half as wide again rather than becoming a tall narrow ribbon */
  width:max-content; min-width:var(--head);
  max-width:calc(var(--head) * 1.5);
  margin:.5rem auto 0; padding:0;
  text-align:center; font-size:.78rem; line-height:1.35;
}
article figure.fig-head.head-s { --head:120px; }
article figure.fig-head.head-m { --head:170px; }
article figure.fig-head.head-l { --head:240px; }
/* a phone column is too narrow for a large circle to leave readable copy */
@media (max-width:700px) {
  article figure.fig-head { --head:110px; margin-left:1.1rem; }
  article figure.fig-head.head-left { margin-left:0; margin-right:1.1rem; }
  article figure.fig-head.head-s { --head:92px; }
  article figure.fig-head.head-m { --head:110px; }
  article figure.fig-head.head-l { --head:132px; }
}

/* portrait images range right, no wider than 300px, text wraps around */
article figure.portrait, article figure.portrait img { background:transparent; }
article figure img.natural, article figure.graphic img { background:transparent; }
article figure.portrait { float:right; clear:right; max-width:300px;
  margin:.25rem 0 .9rem 1.1rem; }
article figure.portrait img { width:auto; max-width:100%; max-height:400px;
  aspect-ratio:auto; object-fit:unset; display:block; margin:0; }
article::after { content:""; display:block; clear:both; }
.artnav { clear:both; }
@media (max-width:560px) {
  article figure.portrait { max-width:46%; margin-left:.8rem; }
}
/* infographics keep their true shape (tap to enlarge) */
article figure.graphic img { aspect-ratio:auto; object-fit:unset; width:auto;
  max-width:100%; max-height:72vh; display:block; margin:0 auto; }
figure.graphic figcaption { font-size:.75rem; color:#999; text-align:center; }
aside.ad { margin:1.8rem 0; text-align:center; }
.cardlist > aside.ad { text-align:left; }
aside.ad .adlabel { display:block; font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:#b5b5b5; margin-bottom:.35rem; }
aside.ad picture { display:block; }
aside.ad img { max-width:100%; height:auto; border:1px solid var(--line); }
/* An ad plate runs the width of the editorial grid. Depth comes from the
   creative's own shape — 8:3 for a deep banner, 16:3 for a half — so there
   is no pixel cap here to fight it. */
.cardlist > aside.ad img, .cardlist > aside.ad video.advideo {
  width:100%; height:auto; max-width:100%; margin:0; }
/* A banner in the reading flow is part of the page, not a stop: it sits at
   the width of the reading column and scrolls past with everything else. */
aside.ad.inflow { margin:2.6rem 0 1rem; text-align:left; }
/* in an article a portrait junior is a panel of its own, not a slab
   the width of the reading column */
aside.ad.inflow.fmt-junior { text-align:center; }
aside.ad.inflow.fmt-junior img { width:min(100%, 400px) !important;
  margin:0 auto !important; }
/* with its own article artwork (1080×500) the junior runs the width of
   the reading column on a wide screen, like any other banner */
@media (min-width: 700px) {
  aside.ad.inflow.fmt-junior.artart { text-align:left; }
  aside.ad.inflow.fmt-junior.artart img { width:100% !important; }
}
.cardlist > aside.ad.fmt-junior { text-align:center; }
.cardlist > aside.ad.fmt-junior img { width:min(100%, 480px) !important;
  margin:0 auto !important; }
aside.ad.inflow img, aside.ad.inflow video.advideo {
  width:100%; height:auto; max-width:100%; margin:0; display:block; }
.adview { min-height:60vh; display:flex; align-items:center;
          justify-content:center; }
.adview aside.ad { width:100%; }
.adview aside.ad img { max-height:80vh; width:auto; max-width:100%; }
.adview aside.ad img.wide { width:100%; height:auto; max-height:none; }
/* article nav */
#issueprogress { position:fixed; top:0; left:0; height:3px;
  background:var(--red); z-index:40; transition:width .25s; }
.nextblock { display:block; margin:2.6rem 0 .8rem; padding:1.4rem 1.5rem;
  background:var(--bg-soft); border:1px solid var(--panel-line);
  text-decoration:none; }
.nextblock .nb-label { font-family:Poppins,sans-serif; font-size:.68rem;
  font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--red); }
.nextblock .nb-title { display:block; font-family:"Barlow Condensed",sans-serif;
  font-weight:700; font-size:1.7rem; line-height:1.05; color:var(--ink);
  margin-top:.3rem; }
.nextblock:hover .nb-title { color:var(--red); }
.backlink { font-family:Poppins,sans-serif; font-size:.78rem;
  color:#999; text-decoration:none; }
.backlink:hover { color:var(--red); }
.artnav { display:flex; gap:.7rem; margin:2rem 0 .6rem; }
.artnav a { flex:1; border:1px solid var(--line); padding:.65rem .8rem;
  text-decoration:none; color:var(--ink); font-size:.82rem; min-width:0; }
.artnav a:hover { border-color:var(--red); }
.artnav a b { display:block; color:var(--red); font-size:.66rem;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:.2rem; }
.artnav a span { display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; font-weight:500; }
.artnav a.next { text-align:right; }
.artnav a.off { visibility:hidden; }
.artpos { text-align:center; font-size:.74rem; color:var(--faint);
          margin-bottom:1rem; }
/* ---------- footer (site pattern: dark) */
footer { background:#1b1b1b; color:#bdbdbd; text-align:center;
         font-size:.8rem; padding:1.6rem 1rem 2.2rem; margin-top:2rem; }
footer a { color:#fff; text-decoration:none; }
footer a:hover { color:var(--red); }
#rail { display:none; }
.upnext ul { list-style:none; }
.upnext li a { display:block; padding:.55rem 0; font-size:.87rem;
  line-height:1.35; color:var(--ink); font-weight:500; text-decoration:none;
  border-bottom:1px solid var(--line-soft); }
.upnext li a:hover { color:var(--red); }
/* ---------- tablet ---------- */
@media (min-width:700px) {
  main { max-width:960px; padding:0 2rem 2rem; }
  /* single stacked column reads better than a two-up grid */
  .cardlist { max-width:680px; margin:0 auto; }
  /* every contents image is the same depth, so the column keeps a rhythm;
     the lead earns its prominence through type, not a different crop */
  .card.leadcard .cardtitle { font-size:2.1rem; line-height:1.02; }
  .card.leadcard .teaser, .card.solo .teaser { -webkit-line-clamp:3; }
  /* a plate spans the list up to its format depth; the premium position
     earns its rate by placement (top of contents, under the cover story) */
  .cardlist aside.ad img, .cardlist aside.ad img.wide { max-width:100%; }
  .contents .coverpanel { max-width:420px; margin:0 auto; }
  .contents .hero { max-width:none; margin:1.4rem auto .8rem; }
  .readergrid { max-width:840px; margin:0 auto; }
  article h1 { font-size:2rem; }
}
/* ---------- desktop ---------- */
@media (min-width:1080px) {
  main { max-width:min(1800px, 94vw); }
  .contents { display:grid; grid-template-columns:340px minmax(0,1fr);
              gap:0 2.8rem; align-items:start; }
  .contents .coverpanel { position:sticky; top:110px; }
  .contents .hero { max-width:none; margin:1.4rem 0 .8rem; }

  .contents .homeright { min-width:0; }
  .contents .cardlist { max-width:none; }
  .contents .fullrow { grid-column:1 / -1; }
  /* a picture-led contents rather than a column of text */
  .menuwrap { columns:3; column-gap:2.8rem;
    max-width:min(1800px, 94vw); margin:0 auto; }
}
@media (min-width:1520px) { .menuwrap { columns:4; } }
@media (min-width:1900px) { .menuwrap { columns:5; } }
@media (min-width:1080px) {
  /* the column grows with the window, as the reference does, but stops
     before the line becomes tiring to track */
  /* the column grows with the window, as the reference does, but stops
     before the line becomes tiring to track */
  .readergrid { display:block; width:min(76vw, 1040px); max-width:100%;
                margin:0 auto; }
  article h1 { font-size:3.4rem; }
  article figure.lead:not(.portrait):not(.fig-right):not(.fig-left):not(.fig-natural):not(.fig-head) {
    margin-left:-3.5rem; margin-right:-3.5rem; }
}

/* ---------- zoom viewer ---------- */
aside.ad a { cursor:zoom-in; display:block; }
.adzoomhint { display:block; font-family:Poppins,sans-serif; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:#b9b0a6;
  margin-top:.3rem; }
article figure img.zoomable { cursor:zoom-in; }
body.zoomlock { overflow:hidden; }
#zoomer { position:fixed; inset:0; z-index:100; display:flex;
  align-items:center; justify-content:center; touch-action:none; }
#zoomer .z-backdrop { position:absolute; inset:0; background:rgba(12,10,9,.94); }
#zoomer .z-img { position:relative; max-width:96vw;
  max-height:calc(100vh - 120px); transition:transform .06s linear;
  will-change:transform; user-select:none; -webkit-user-drag:none; }
#zoomer .z-close { position:absolute; top:max(10px, env(safe-area-inset-top));
  right:14px; width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; font-size:1.6rem;
  line-height:1; cursor:pointer; z-index:2; }
#zoomer .z-close:hover { background:var(--red); }
#zoomer .z-hint { position:absolute; top:max(20px, env(safe-area-inset-top));
  left:0; right:0; text-align:center; color:rgba(255,255,255,.55);
  font-family:Poppins,sans-serif; font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; pointer-events:none;
  animation:zhint 4s forwards; }
@keyframes zhint { 0%,70% { opacity:1; } 100% { opacity:0; } }
#zoomer .z-bar { position:absolute; left:0; right:0;
  bottom:max(0px, env(safe-area-inset-bottom)); display:flex;
  align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem 1.1rem; background:rgba(0,0,0,.55); z-index:2; }
#zoomer .z-adv { color:rgba(255,255,255,.75); font-family:Poppins,sans-serif;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
#zoomer .z-link { position:relative; display:block; cursor:pointer;
  max-width:96vw; max-height:calc(100vh - 120px); }
#zoomer .z-link .z-img { display:block; }
#zoomer .z-host { color:#fff; font-family:Poppins,sans-serif;
  font-weight:600; font-size:.82rem; white-space:nowrap; }

/* ---------- floating article navigation ---------- */
@media (min-width:1080px) {
  }

/* ---------- entry takeover (app-open ad) ---------- */
#entryad { position:fixed; inset:0; z-index:120; background:#111014;
  display:flex; align-items:center; justify-content:center; }
#entryad .e-label { position:absolute;
  top:max(14px, env(safe-area-inset-top)); left:50%;
  transform:translateX(-50%); background:rgba(255,255,255,.12); color:#fff;
  font-family:Poppins,sans-serif; font-size:.68rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; padding:.45rem 1rem;
  border-radius:99px; }
#entryad .e-count { position:absolute;
  top:max(12px, env(safe-area-inset-top)); right:14px; width:40px;
  height:40px; border-radius:50%; background:rgba(255,255,255,.14);
  color:#fff; font-family:Poppins,sans-serif; font-weight:600;
  display:flex; align-items:center; justify-content:center; }
#entryad .e-link { display:flex; width:100%; height:100%;
  align-items:center; justify-content:center; }
#entryad img { max-width:100vw; max-height:100vh; object-fit:contain; }
#entryad .e-skip { position:absolute;
  bottom:max(18px, env(safe-area-inset-bottom)); right:16px;
  background:rgba(255,255,255,.92); border:0; border-radius:99px;
  font-family:Poppins,sans-serif; font-weight:600; font-size:.85rem;
  padding:.55rem 1.1rem; cursor:pointer; }
#entryad .e-skip:hover { background:var(--red); color:#fff; }

/* ---------- offline save ---------- */
.offlinebtn { display:flex; flex-direction:column; align-items:center;
  gap:.15rem; width:100%; margin:.9rem 0 .2rem; padding:.8rem 1rem;
  background:var(--bg-soft); border:1px solid var(--panel-line);
  cursor:pointer;
  font-family:"Barlow Condensed",sans-serif; font-weight:700;
  font-size:1.25rem; color:var(--ink); }
.offlinebtn:hover { border-color:var(--red); color:var(--red); }
.offlinebtn .ob-icon { font-size:1rem; }
.offlinebtn .ob-note { font-family:Poppins,sans-serif; font-weight:400;
  font-size:.74rem; color:#8b857d; text-transform:none; letter-spacing:0; }
.offlinebtn.working { opacity:.7; cursor:progress; }
.offlinebtn.saved { border-color:#cfe3cf; background:#f4faf4;
  color:#2e7d32; cursor:default; }
.offlinebtn.unavailable { opacity:.75; cursor:default; }
@media (min-width:700px) {
  /* under the cover: match the cover width, stacked label */
  .coverpanel .offlinebtn { flex-direction:column; gap:.15rem;
    width:100%; padding:.85rem 1rem; margin:0 0 1.2rem; }
  .offlinebtn .ob-note { font-size:.76rem; }
}

/* ---------- explicit figure layouts (chosen in the editor) ---------- */
article figure.fig-full img { width:100%; aspect-ratio:16/10;
  object-fit:cover; }
article figure.fig-natural img { width:auto; max-width:100%;
  aspect-ratio:auto; object-fit:unset; margin:0 auto; display:block; }
article figure.fig-right, article figure.fig-left { max-width:300px;
  margin:.25rem 0 .9rem 1.1rem; }
article figure.fig-right { float:right; }
article figure.fig-left { float:left; margin:.25rem 1.1rem .9rem 0; }
article figure.fig-right img, article figure.fig-left img { width:auto;
  max-width:100%; aspect-ratio:auto; object-fit:unset; display:block; }
article figure.fig-bleed img { width:100%; aspect-ratio:21/9;
  object-fit:cover; }
article figure figcaption { font-family:Poppins,sans-serif; font-size:.76rem;
  color:var(--muted); line-height:1.5; margin-top:.4rem; }
/* body text that an older insert left inside a figure is still body text,
   not a caption */
article figure p { font-family:"Source Serif 4",Georgia,serif;
  font-size:1.13rem; line-height:1.72; color:var(--body); margin:.6rem 0 0; }
@media (min-width:1080px) {
  article figure.fig-bleed { margin-left:-3.5rem; margin-right:-3.5rem; }
}
@media (max-width:560px) {
  article figure.fig-right, article figure.fig-left { max-width:46%; }
}
/* ---------- article templates ---------- */
article.tpl-feature h1 { font-size:3rem; line-height:.98; }
article.tpl-feature > h3:first-child { font-size:1.4rem; color:#4a463f; }
article.tpl-feature figure.lead img { aspect-ratio:21/9; }
article.tpl-feature > p:first-of-type { font-size:1.22rem; }
@media (min-width:1080px) {
  article.tpl-feature h1 { font-size:3.9rem; }
  article.tpl-feature figure.lead:not(.portrait):not(.fig-right):not(.fig-left):not(.fig-natural):not(.fig-head) {
    margin-left:-5rem; margin-right:-5rem; }
}
article.tpl-interview p > strong:first-child {
  font-family:"Barlow Condensed",sans-serif; font-weight:700;
  font-size:1.18em; color:var(--red); display:block; margin-top:.2rem; }
article.tpl-interview p { margin-bottom:1.3rem; }
article.tpl-sponsored { background:none; padding:1.2rem 0 1rem;
  border-top:3px solid var(--red); }
.sponsorflag { display:inline-block; font-family:Poppins,sans-serif;
  font-size:.62rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:#fff; background:var(--red);
  padding:.28rem .6rem; margin-bottom:.9rem; }
article.tpl-sponsored .pagetag { color:var(--muted); }

/* ---------- colophon (About this issue) ---------- */
:is(article, .v2about) .colophon { font-family:Poppins,sans-serif; }
:is(article, .v2about) .colophon .masthead-list { display:grid;
  grid-template-columns:max-content 1fr; gap:.35rem 1.2rem;
  margin:.4rem 0 1.6rem; }
:is(article, .v2about) .colophon dt { font-size:.68rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red); padding-top:.25rem; }
:is(article, .v2about) .colophon dd { margin:0; font-size:1rem; color:var(--ink);
  font-weight:500; }
:is(article, .v2about) .colophon .col-pub { font-size:.95rem; line-height:1.6;
  color:#3a3a3a; margin:0 0 1.2rem; padding-top:1.1rem;
  border-top:1px solid var(--line); }
:is(article, .v2about) .colophon .col-pub strong { font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--red);
  display:block; margin-bottom:.3rem; }
:is(article, .v2about) .colophon .col-small { font-size:.82rem; line-height:1.6;
  color:#7c766d; margin:0 0 .9rem; }
:is(article, .v2about) .colophon .col-issn { font-size:.78rem; letter-spacing:.06em;
  color:#9a938a; margin:1.2rem 0 0; padding-top:.8rem;
  border-top:1px solid var(--line); }
@media (max-width:520px) {
  :is(article, .v2about) .colophon .masthead-list { grid-template-columns:1fr; gap:.1rem 0; }
  :is(article, .v2about) .colophon dt { padding-top:.7rem; }
}

/* ---------- video creatives ---------- */
aside.ad video.advideo { width:100%; max-width:100%; height:auto; display:block;
  background:#111; }
.cardlist aside.ad video.advideo { max-width:100%; margin:0; }
.adview aside.ad video.advideo { max-height:80vh; width:auto;
  max-width:100%; margin:0 auto; }
.adview aside.ad video.advideo.wide { width:100%; height:auto;
  max-height:none; }
aside.ad.hasvideo { position:relative; }
.adsound, #entryad .e-sound { position:absolute; right:.6rem; bottom:1.6rem;
  background:rgba(0,0,0,.6); color:#fff; border:0; border-radius:99px;
  font-family:Poppins,sans-serif; font-size:.72rem; padding:.35rem .8rem;
  cursor:pointer; }
.adsound:hover, #entryad .e-sound:hover { background:var(--red); }
#entryad video.advideo { max-width:100vw; max-height:100vh;
  object-fit:contain; }
#entryad .e-sound { right:1rem;
  bottom:max(70px, calc(env(safe-area-inset-bottom) + 70px)); }

/* ---------- editorial video ---------- */
article figure video { width:100%; height:auto; display:block; background:#111;
  border-radius:2px; }
article figure.fig-right video, article figure.fig-left video { width:100%; }
@media (min-width:1080px) {
  article figure.lead video { border-radius:2px; }
}

/* ---------- issue intro video ---------- */
.introvid { margin:0 0 1.2rem; }
.introvid video { width:100%; height:auto; display:block; background:#111; }
.introvid figcaption { font-family:Poppins,sans-serif; font-size:.76rem;
  color:#8b857d; margin-top:.4rem; }
.introvid.autoplay { position:relative; }
.introsponsor { display:flex; align-items:center; gap:.5rem; margin-top:.5rem;
  padding-top:.5rem; border-top:1px solid #eee2d6; text-decoration:none; }
.introsponsor .is-label { font-family:Poppins,sans-serif; font-size:.62rem;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:#a09990; }
.introsponsor .is-name { font-family:"Barlow Condensed",sans-serif;
  font-weight:700; font-size:1.15rem; color:var(--ink); line-height:1; }
.introsponsor img { height:22px; width:auto; display:block; }
.introsponsor:hover .is-name { color:var(--red); }
#introoverlay { position:fixed; inset:0; z-index:110; background:#0c0b0a;
  display:flex; align-items:center; justify-content:center; }
#introoverlay video { max-width:100vw; max-height:100vh; object-fit:contain; }
#introoverlay .i-title { position:absolute;
  top:max(16px, env(safe-area-inset-top)); left:0; right:0; text-align:center;
  color:#fff; font-family:"Barlow Condensed",sans-serif; font-weight:700;
  font-size:1.4rem; letter-spacing:.02em; pointer-events:none;
  text-shadow:0 1px 8px rgba(0,0,0,.6); }
#introoverlay .i-skip { position:absolute;
  bottom:max(20px, env(safe-area-inset-bottom)); right:18px;
  background:#fff; color:var(--ink); border:0; border-radius:99px;
  font-family:Poppins,sans-serif; font-weight:600; font-size:.86rem;
  padding:.6rem 1.2rem; cursor:pointer; }
#introoverlay .i-skip:hover { background:var(--red); color:#fff; }

/* ---------- imprint in the cover column (desktop only) ---------- */
.aboutpanel { display:none; }
@media (min-width:1080px) {
  .aboutpanel { display:block; margin-top:1.6rem; padding-top:1.2rem;
    border-top:1px solid var(--line); }
  .aboutpanel h2 { font-family:"Barlow Condensed",sans-serif; font-weight:700;
    font-size:1rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink); margin:0 0 .7rem; }
  .aboutpanel .colophon .masthead-list { grid-template-columns:1fr;
    gap:0; margin:0 0 1rem; }
  .aboutpanel .colophon dt { font-size:.6rem; padding-top:.5rem;
    letter-spacing:.12em; }
  .aboutpanel .colophon dd { font-size:.84rem; line-height:1.4; }
  .aboutpanel .colophon .col-pub { font-size:.78rem; padding-top:.9rem;
    margin-bottom:.9rem; }
  .aboutpanel .colophon .col-pub strong { font-size:.6rem; }
  .aboutpanel .colophon .col-small { font-size:.7rem; line-height:1.5;
    margin-bottom:.7rem; }
  .aboutpanel .colophon .col-issn { font-size:.68rem; margin-top:.9rem;
    padding-top:.7rem; }
  /* the imprint closes the contents, as a masthead panel does in print */
  .cardlist .card.aboutcard,
  .cardlist .tocsection.aboutsection { display:none; }
  .railcover .aboutpanel { display:block; margin-top:1.6rem;
    padding-top:1.2rem; border-top:1px solid var(--line); }
}

/* ---------- Feature template: full-bleed hero ---------- */
article.tpl-feature .fhero { position:relative; z-index:0;
  margin:0 -1rem 2rem;
  min-height:66vh; display:flex; align-items:flex-end; overflow:hidden;
  background:#0c0b0a; }
/* no usable picture: a confident dark panel rather than a bad crop */
article.tpl-feature .fhero.nopic { min-height:auto;
  background:linear-gradient(160deg,#1b1917 0%,#0c0b0a 100%); }
article.tpl-feature .fhero.nopic .fhero-text { padding-top:3rem; }
article.tpl-feature .fhero-img { position:absolute; inset:0;
  background-size:cover; background-position:center 40%; }
/* legible type over any photograph, without flattening the picture */
article.tpl-feature .fhero-img::after { content:""; position:absolute;
  inset:0; background:linear-gradient(180deg,
    rgba(10,9,8,.72) 0%, rgba(10,9,8,.35) 38%, rgba(10,9,8,.78) 100%); }
article.tpl-feature .fhero-text { position:relative; width:100%;
  padding:3rem 1.4rem 2.2rem; text-align:center; }
article.tpl-feature .fhero .fhero-stand { max-width:none; }
article.tpl-feature .fhero .pagetag { color:var(--accent); margin:0 0 1rem;
  letter-spacing:.24em; font-size:.72rem; }
article.tpl-feature .fhero h1 { color:#fff; font-size:2.4rem;
  line-height:1.04; margin:0 auto; text-wrap:pretty;
  text-shadow:0 2px 24px rgba(0,0,0,.45); }
article.tpl-feature .fhero .fhero-stand { font-family:"Source Serif 4",
  Georgia,serif; font-style:normal; font-weight:400; font-size:1.02rem;
  line-height:1.5; color:rgba(255,255,255,.9); max-width:46ch;
  margin:1.1rem auto 0; padding:0; }
article.tpl-feature .fhero .fhero-by { font-family:Poppins,sans-serif;
  font-size:.72rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin-top:1.4rem;
  padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.3);
  display:inline-block; }
/* the body resumes as normal beneath the hero */
article.tpl-feature .fhero + p:first-letter { }
@media (min-width:700px) {
  article.tpl-feature .fhero { margin:0 -2rem 2.6rem; min-height:72vh; }
  article.tpl-feature .fhero-text { padding:4rem 3rem 3rem; }
  article.tpl-feature .fhero h1 { font-size:3.6rem; }
  article.tpl-feature .fhero .fhero-stand { font-size:1.14rem; }
}
@media (min-width:1080px) {
  /* break out of the reading column to the full width of the page */
  article.tpl-feature .fhero { margin-top:0;
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    width:100vw; min-height:76vh; }
  /* the same measure as the reading column, so the headline lines up with
     the body beneath it */
  article.tpl-feature .fhero-text { width:min(76vw, 1040px); margin:0 auto;
    padding:5rem 0 3.4rem; }
  article.tpl-feature .fhero h1 { font-size:4.4rem; }
}

/* ---------- dark mode: the remaining surfaces ---------- */
[data-theme="dark"] .card:hover .cardtitle,
[data-theme="dark"] .menugroup li a:hover { color:var(--accent); }
[data-theme="dark"] .cardtitle,
[data-theme="dark"] article h1,
[data-theme="dark"] article h3,

[data-theme="dark"] .issuemast .im-issue,
[data-theme="dark"] .menupage,
[data-theme="dark"] .sectionhead { color:var(--ink); }
[data-theme="dark"] article blockquote,
[data-theme="dark"] blockquote.pullquote { color:var(--ink); }
[data-theme="dark"] .colophon dd { color:var(--ink); }
[data-theme="dark"] .colophon .col-pub { color:var(--text); }
[data-theme="dark"] .colophon .col-small { color:var(--muted); }
[data-theme="dark"] .colophon .col-issn { color:var(--faint); }
[data-theme="dark"] .nextblock .nb-title { color:var(--ink); }
[data-theme="dark"] .artnav a { color:var(--ink); }
[data-theme="dark"] .artnav a span { color:var(--text); }
[data-theme="dark"] .archive a { color:var(--ink); }
[data-theme="dark"] .offlinebtn { color:var(--ink); }
[data-theme="dark"] .offlinebtn.saved { background:#16281a; color:#8fd694;
  border-color:#2c4a30; }
[data-theme="dark"] [data-theme="dark"] [data-theme="dark"] .backlink { color:var(--faint); }
[data-theme="dark"] header { box-shadow:0 1px 0 rgba(255,255,255,.06); }
[data-theme="dark"] .hero img,
[data-theme="dark"] .archive img { border-color:var(--line); }
/* photographs and charts are content: never dim them */
[data-theme="dark"] article figure img,
[data-theme="dark"] .card .thumb,
[data-theme="dark"] .hero img { opacity:1; }
/* advertiser artwork keeps its own white ground, whatever the theme */
[data-theme="dark"] aside.ad img,
[data-theme="dark"] aside.ad video { background:var(--card); }
[data-theme="dark"] aside.ad img { border-color:#3a3632; }
[data-theme="dark"] .introvid figcaption { color:var(--muted); }
[data-theme="dark"] .introsponsor { border-top-color:var(--line); }
[data-theme="dark"] .introsponsor .is-name { color:var(--ink); }
[data-theme="dark"] article.tpl-sponsored { background:none;
  border-top-color:var(--red); }
[data-theme="dark"] .sponsorstrip { background:var(--bg-soft);
  border-color:var(--panel-line); }
[data-theme="dark"] .sponsorstrip .sp-name { color:var(--ink); }
[data-theme="dark"] .dropslot { background:#2a1f1e; }

/* ---------- the theme switch ---------- */
.themetoggle { background:none; border:0; color:#fff; cursor:pointer;
  font-family:Poppins,sans-serif; font-size:.78rem; font-weight:600;
  letter-spacing:.06em; padding:.8rem .9rem; display:flex;
  align-items:center; gap:.4rem; margin-left:auto; }
.themetoggle:hover { background:rgba(0,0,0,.15); }
.themetoggle .tt-icon { font-size:.95rem; line-height:1; }
.navstrip .site-link { margin-left:1rem; }
@media (max-width:560px) {
  .themetoggle .tt-label { display:none; }
  .navstrip .site-link { display:none; }
}

/* ---------- lists ---------- */
article ul, article ol { margin:0 0 1.15rem; padding-left:1.5rem;
  font-family:"Source Serif 4",Georgia,serif; font-size:1.13rem;
  line-height:1.62; color:var(--body); }
article li { margin-bottom:.45rem; padding-left:.25rem; }
article ul { list-style:none; padding-left:1.3rem; }
article ul > li { position:relative; }
article ul > li::before { content:""; position:absolute; left:-.95rem;
  top:.62em; width:6px; height:6px; background:var(--red);
  border-radius:50%; }
article ol { list-style:none; counter-reset:np; padding-left:1.9rem; }
article ol > li { position:relative; counter-increment:np; }
article ol > li::before { content:counter(np); position:absolute;
  left:-1.6rem; top:.02em; font-family:"Barlow Condensed",sans-serif;
  font-weight:700; font-size:1.05em; color:var(--red); }
article li > ul, article li > ol { margin:.45rem 0 .2rem; }
/* lettered and roman lists, and one that starts after 1 (numberLists() in
   app.js sets the class and the counter from type and start) */
article ol.ol-la > li::before { content:counter(np, lower-alpha); }
article ol.ol-ua > li::before { content:counter(np, upper-alpha); }
article ol.ol-lr > li::before { content:counter(np, lower-roman); }
article ol.ol-ur > li::before { content:counter(np, upper-roman); }
/* A list is set like the paragraphs around it (5 Oct, Ian: "the fonts look
   the wrong size in the list"). The wider-column sizes above set lists with
   paragraphs, but this block comes after them and pulled lists back to the
   phone size between 1080 and 1519px: 18px against 20px. */
article ul, article ol { line-height:1.72; }
@media (min-width:1080px) {
  article ul, article ol { font-size:1.25rem; line-height:1.68; }
}
/* a superscript or subscript (footnote numbers, mm\00b2) must not open up
   its line: it set one bullet higher than the rest, and a paragraph's line
   spacing uneven */
article sup, article sub { line-height:0; }

/* ---------- tables ---------- */
.tablescroll { overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:0 0 1.4rem; }
article table { border-collapse:collapse; width:100%; min-width:32rem;
  font-family:Poppins,sans-serif; font-size:.88rem; line-height:1.45; }
article table th { text-align:left; font-weight:600; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  border-bottom:2px solid var(--red); padding:.55rem .8rem .5rem;
  white-space:nowrap; }
article table td { padding:.6rem .8rem; border-bottom:1px solid var(--line);
  color:var(--body); vertical-align:top; }
article table tbody tr:last-child td { border-bottom:1px solid var(--line); }
article table td:first-child { font-weight:600; color:var(--ink); }
.tablescroll .scrollhint { display:none; font-family:Poppins,sans-serif;
  font-size:.7rem; color:var(--faint); text-align:right;
  margin:.3rem .1rem 0; }
.tablescroll.scrollable .scrollhint { display:block; }

/* ==========================================================================
   Magazine furniture: a cover you arrive at, a designed contents, a folio
   ========================================================================== */

/* ---------- the cover screen: full-bleed art, type over it ---------- */
.covergate { position:relative; margin:0 -1rem; padding:3.5rem 1.2rem 3rem;
  min-height:70vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:#0d0c0b; }
.cg-media { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; background-size:cover; background-position:center 42%; }
.cg-veil { position:absolute; inset:0; background:linear-gradient(180deg,
  rgba(10,9,8,.62) 0%, rgba(10,9,8,.34) 34%, rgba(10,9,8,.80) 100%); }
.cg-inner { position:relative; width:100%; max-width:920px; margin:0 auto;
  text-align:center; color:#fff; }
.cg-mast { width:min(74%, 380px); height:auto; display:block;
  margin:0 auto 1.4rem; }
/* the issue line reads as a cover label, matching Opinion / In depth */
/* the way in to the cover story, in the same idiom as the cover lines */
.cg-badge { display:inline-block; background:var(--red); color:#fff;
  /* its own line: under the date, above the headline */
  margin-left:auto; margin-right:auto;
  font-family:"Barlow Condensed",sans-serif; font-weight:700;
  font-size:.95rem; line-height:1; letter-spacing:.15em;
  text-transform:uppercase; padding:.34rem .7rem .27rem;
  margin-bottom:.6rem; text-decoration:none;
  transition:background .14s ease; }
.cg-inner > .cg-badge { display:table; }
.cg-badge:hover { background:var(--red-deep); }
/* the date, legible over any artwork */
.cg-issue { display:block; background:transparent; color:#fff;
  font-family:Poppins,sans-serif; font-weight:600;
  font-size:.74rem; line-height:1; letter-spacing:.26em;
  text-transform:uppercase; padding:0; margin-bottom:1.5rem;
  text-shadow:0 1px 12px rgba(0,0,0,.6); }
.cg-head-link { text-decoration:none; display:block; }
.cg-head-link .cg-head { transition:color .14s ease; }
.cg-head-link:hover .cg-head { color:var(--accent); }
.cg-head { font-family:"Barlow Condensed",sans-serif; font-weight:700;
  font-size:2.3rem; line-height:1.02; letter-spacing:-.005em; color:#fff;
  margin:0 auto; text-wrap:pretty;
  text-shadow:0 2px 26px rgba(0,0,0,.5); }
.cg-stand { font-family:"Source Serif 4",Georgia,serif; font-size:1rem;
  line-height:1.5; color:rgba(255,255,255,.9); margin:1rem auto 0;
  max-width:56ch; }
.cg-lines { list-style:none; margin:1.6rem auto 0; padding:0;
  max-width:44rem; text-align:left; }
.cg-lines li { border-top:1px solid rgba(255,255,255,.22); }
.cg-lines li > *, .cg-lines li { display:flex; align-items:baseline;
  gap:.7rem; }
.cg-lines .cl-link { padding:.42rem 0; text-decoration:none; width:100%; }
.cg-lines .cl-link .cl-text { transition:color .14s ease; }
.cg-lines .cl-link:hover .cl-text { color:var(--accent); }
.cg-lines li:not(:has(.cl-link)) { padding:.42rem 0; }
.cg-lines li:last-child { border-bottom:1px solid rgba(255,255,255,.22); }
.cl-label { flex:0 0 auto; background:var(--red); color:#fff;
  font-family:"Barlow Condensed",sans-serif; font-weight:700;
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  padding:.2rem .5rem .15rem; }
.cl-text { font-family:"Source Serif 4",Georgia,serif; font-size:.92rem;
  color:rgba(255,255,255,.92); line-height:1.35; }
.cg-sponsor { justify-content:center; border-color:rgba(255,255,255,.25);
  background:rgba(255,255,255,.08); margin-top:1.4rem; }
.cg-sponsor .sp-label { color:rgba(255,255,255,.7); }
.cg-sponsor .sp-name { color:#fff; }
.cg-enter { display:inline-block; margin-top:1.8rem; appearance:none;
  background:none; cursor:pointer; font-family:Poppins,sans-serif;
  font-family:Poppins,sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:#fff;
  text-decoration:none; border:1px solid rgba(255,255,255,.45);
  padding:.6rem 1.4rem; border-radius:99px; }
.cg-enter:hover { background:#fff; color:var(--ink);
  border-color:#fff; }

@media (min-width:700px) {
  .covergate { margin:0 -2rem; min-height:76vh; padding:4rem 2rem; }
  .cg-head { font-size:3.2rem; }
  .cg-stand { font-size:1.08rem; }
}
@media (min-width:1080px) {
  /* the art fills the window edge to edge; the type keeps the reading width */
  .covergate { margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    width:100vw; min-height:calc(100vh - 128px); padding:4rem 2rem; }
  .cg-head { font-size:4.2rem; }
  .cg-mast { width:min(52%, 440px); }
  .cl-text { font-size:1rem; }
}

/* ---------- contents as a designed page, not a feed ---------- */
@media (min-width:1080px) {
  .contents { max-width:1280px; margin:0 auto; padding-top:2rem;
    display:grid; grid-template-columns:210px minmax(0, 1fr); gap:0 2.4rem;
    align-items:start; }
  .railcover { position:sticky; top:104px; }

  /* whatever opens the list — an ad plate or a section label — starts
     level with the top of the rail beside it */
  .cardlist > *:first-child { margin-top:0; }
  .cardlist > aside.ad:first-child { margin-top:0; padding-top:0; }
  .cardlist > .tocsection:first-child { margin-top:0; }
  .railcover > *:first-child { margin-top:0; }
  /* Four columns from 1150px up: News and Products divide by four, so a
     three-column grid left both ragged. */
  .cardlist { max-width:none; display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0 1.6rem;
    align-items:start; }
  /* section rules and ad plates run the full width */
  .cardlist > .tocsection, .cardlist > aside.ad { grid-column:1 / -1; }
  /* the cover story takes the width of the page, picture above the words */
  .cardlist > .card.leadcard { grid-column:1 / -1;
    display:flex; flex-direction:column; gap:.9rem;
    padding:0 0 1.8rem; border-bottom:2px solid var(--line); }
  .cardlist > .card.leadcard .thumb { aspect-ratio:21/9;
    max-height:400px; object-fit:cover; }

  .cardlist > .card.leadcard .cardtitle { font-size:2.5rem;
    line-height:1.02; }
  .cardlist > .card.leadcard .teaser { font-size:1.05rem;
    -webkit-line-clamp:3; }
  /* the rest sit denser and quieter, so the page reads at a glance */
  .cardlist > .card { padding:.9rem 0 1.1rem; gap:.5rem; }
  .cardlist > .card .thumb { aspect-ratio:5/3; }
  .cardlist > .card .cardtitle { font-size:1.12rem; line-height:1.12; }
  .cardlist > .card .teaser { font-size:.86rem; line-height:1.45;
    -webkit-line-clamp:2; }
  .cardlist > .card .tag { font-size:.6rem; }
  /* A lone entry fills the row as a horizontal band — picture beside the
     words rather than above them. Several full-width picture-above entries
     in a row make the page long and monotonous; this keeps each compact
     while still using the width, and varies the rhythm against the grid. */
  /* A band takes the parent's own column tracks, so its picture is exactly
     one column wide and lines up with the entries above and below it. */
  .cardlist > .card.solo, .cardlist > .card.pair {
    grid-column:1 / -1; display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:0 2.2rem; align-items:center; padding:.5rem 0 1.4rem; }
  /* The picture takes two of the grid's columns, so it is markedly bigger
     than a news thumbnail while still landing on the column lines. */
  .cardlist > .card.solo > .thumb, .cardlist > .card.pair > .thumb {
    grid-column:span 2; aspect-ratio:16/9; }
  .cardlist > .card.solo > .cardtext, .cardlist > .card.pair > .cardtext {
    grid-column:3 / -1; }
  .cardlist > .card.solo .cardtitle { font-size:1.7rem; line-height:1.05; }
  .cardlist > .card.solo .teaser { font-size:.98rem; -webkit-line-clamp:3;
    margin-top:.5rem; }
  .cardlist > .card.pair .cardtitle { font-size:1.45rem; line-height:1.06; }
  .cardlist > .card.pair .teaser { font-size:.92rem; -webkit-line-clamp:2;
    margin-top:.4rem; }
  .cardlist > .card.solo .tag, .cardlist > .card.pair .tag {
    font-size:.62rem; }
  /* Two entries in a section read as bands too. Spanning two of three
     columns left an orphaned column beside them and kept the picture on
     top, which is what made a short section look unresolved. */

  /* an entry with no picture reads as a deliberate text entry rather than
     a hole in the grid */
  .cardlist > .card:not(:has(.thumb)) { border-top:2px solid var(--ink);
    padding-top:.7rem; }
  .cardlist > .card:not(:has(.thumb)) .cardtitle { font-size:1.05rem; }
}
@media (min-width:1520px) {
  .contents { max-width:1520px; grid-template-columns:280px minmax(0, 1fr);
    gap:0 3rem; }
  .cardlist { gap:0 2.2rem; }
  /* four columns now, so the fallback template must follow */
  .cardlist > .card.solo, .cardlist > .card.pair {
    grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .cardlist > .card.solo .cardtitle { font-size:1.85rem; }
}
/* Where subgrid is available the band inherits the real tracks, so the
   picture matches the column exactly however many columns there are. */
/* ---------- an article on a large screen ----------
   The column grows a little and the type with it, so the line stays near
   100 characters rather than sprawling. The rest of the width is put to
   work instead: pull quotes and ranged pictures move out into the margin,
   the way they would sit on a printed spread. */
@media (min-width:1520px) {
  .readergrid { width:min(70vw, 1120px); }
  article p, article ul, article ol { font-size:1.32rem; line-height:1.66; }
  article > h3 { font-size:1.72rem; }
  /* a pull quote steps out of the column on both sides */
  article blockquote.pullquote { margin-left:-4.5rem; margin-right:-4.5rem; }
  /* a ranged picture reaches into the margin beside the text */
  article figure.fig-right { width:26rem; margin-right:-6rem; }
  article figure.fig-left { width:26rem; margin-left:-6rem; }
  /* the folio sits with the column, not adrift */
  .folio { margin-left:0; margin-right:0; }
}
@media (min-width:1900px) {
  .readergrid { width:min(62vw, 1180px); }
  article p, article ul, article ol { font-size:1.36rem; }
  article blockquote.pullquote { margin-left:-6rem; margin-right:-6rem; }
  article figure.fig-right { margin-right:-9rem; }
  article figure.fig-left { margin-left:-9rem; }
}

/* A large monitor should show more of the issue, not more white space.
   The reading column in an article stays where it is — a longer line
   would be harder to read, not better. */
/* Four columns is the ceiling: eight news items fall as 4 + 4 and four
   products fill a row exactly, where five columns left ragged gaps. The
   page still widens — the entries get bigger rather than more numerous. */
@media (min-width:1900px) {
  .contents { max-width:1800px; grid-template-columns:320px minmax(0, 1fr);
    gap:0 3.4rem; }
  .cardlist { gap:0 2.6rem; }
  .cardlist > .card .cardtitle { font-size:1.2rem; }
  .cardlist > .card .teaser { font-size:.92rem; }
  .cardlist > .card.solo .cardtitle { font-size:1.85rem; }
}
@supports (grid-template-columns: subgrid) {
  @media (min-width:1080px) {
    .cardlist > .card.solo, .cardlist > .card.pair {
      grid-template-columns:subgrid; }
  }
}
/* A tablet in portrait has the width for the rail but not for several
   columns beside it — the entries would be too narrow to read. */
@media (min-width:1080px) and (max-width:1149px) {
  .contents { grid-template-columns:220px minmax(0, 1fr); gap:0 2rem; }
  .cardlist { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  /* two columns here: one each, or the words would have nowhere to go */
  .cardlist > .card.solo, .cardlist > .card.pair {
    grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cardlist > .card.solo > .thumb, .cardlist > .card.pair > .thumb {
    grid-column:span 1; }
  .cardlist > .card.solo > .cardtext, .cardlist > .card.pair > .cardtext {
    grid-column:2 / -1; }
  @supports (grid-template-columns: subgrid) {
    .cardlist > .card.solo, .cardlist > .card.pair {
      grid-template-columns:subgrid; }
  }
}

/* ---------- the folio ---------- */
.folio { display:flex; align-items:center; gap:.7rem; margin:2.4rem 0 .5rem;
  padding-top:.9rem; border-top:1px solid var(--line);
  font-family:Poppins,sans-serif; font-size:.64rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.folio .fo-title { color:var(--red); }
.folio .fo-n { margin-left:auto; letter-spacing:.1em; }
.folio .fo-sec::before, .folio .fo-issue::before { content:"\00b7";
  margin-right:.7rem; color:var(--line); }

/* ==========================================================================
   Bottom navigation — the reach-friendly zone on a phone
   ========================================================================== */
:root { --nav-red:var(--red); --nav-red-deep:var(--red-deep);
        --nav-white:#fff; --nav-dim:rgba(255,255,255,.66); --nav-h:58px; }

.mreader-nav { position:fixed; inset:auto 0 0 0; z-index:60;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:grid; grid-template-columns:repeat(5, 1fr); align-items:center;
  background:var(--nav-red); border-top:1px solid rgba(255,255,255,.18);
  box-shadow:0 -2px 14px rgba(0,0,0,.22); }
[data-theme="dark"] .mreader-nav { border-top-color:rgba(255,255,255,.28); }

.mreader-nav__btn { -webkit-tap-highlight-color:transparent; appearance:none;
  background:none; border:0; height:var(--nav-h); display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--nav-dim); font:600 10.5px/1 Poppins,system-ui,sans-serif;
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; }
.mreader-nav__btn svg { width:22px; height:22px; display:block; }
.mreader-nav__btn[aria-current="page"], .mreader-nav__btn:hover,
.mreader-nav__btn:focus-visible { color:var(--nav-white); }
.mreader-nav__btn:active { background:var(--nav-red-deep); }
.mreader-nav__btn:focus-visible { outline:2px solid var(--nav-white);
  outline-offset:-3px; border-radius:4px; }
.mreader-nav__btn[aria-disabled="true"] { opacity:.3; pointer-events:none; }

/* the centre disc reads as the primary action */
.mreader-nav__home { justify-self:center; width:50px; height:50px;
  margin-top:-14px; border-radius:50%; background:var(--nav-white);
  color:var(--nav-red); display:grid; place-items:center; gap:0;
  box-shadow:0 2px 10px rgba(0,0,0,.28); border:3px solid var(--nav-red); }
.mreader-nav__home svg { width:24px; height:24px; }
/* The shared hover rule turns every icon white, which on a white disc
   makes the house vanish. Invert the whole disc instead. */
.mreader-nav__home:hover,
.mreader-nav__home:focus-visible,
.mreader-nav__home[aria-current="page"] {
  background:var(--nav-red); color:var(--nav-white);
  border-color:var(--nav-white); }
.mreader-nav__home:active { background:var(--nav-red-deep);
  color:var(--nav-white); border-color:var(--nav-white); }
.mreader-nav__home:focus-visible { outline-offset:2px; border-radius:50%; }
@media (prefers-reduced-motion: no-preference) {
  .mreader-nav__home { transition:background .15s ease, color .15s ease,
    border-color .15s ease; }
}
@media (prefers-reduced-motion: no-preference) {
  .mreader-nav__btn { transition:color .15s ease, background .15s ease; }
}
/* nothing hides beneath the bar */
main { padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px); }
/* On a wide screen the bar floats as a centred island rather than
   stretching the full width, which would read as an app chrome. */
@media (min-width:1080px) {
  .mreader-nav { left:50%; right:auto; bottom:20px;
    transform:translateX(-50%); width:min(560px, 92vw);
    border-radius:99px; border:1px solid rgba(255,255,255,.2);
    height:var(--nav-h); padding-bottom:0;
    box-shadow:0 8px 28px rgba(0,0,0,.28); overflow:visible; }
  .mreader-nav__btn:first-child { border-radius:99px 0 0 99px; }
  .mreader-nav__btn:last-child { border-radius:0 99px 99px 0; }
  .mreader-nav__home { margin-top:-16px; }
  main { padding-bottom:calc(var(--nav-h) + 44px); }
}

/* ---------- search: a panel above the bar it was opened from ---------- */
.searchlayer { position:fixed; inset:0; z-index:80; display:flex;
  align-items:flex-end; justify-content:center;
  background:rgba(12,11,10,0); transition:background .2s ease; }
.searchlayer.open { background:rgba(12,11,10,.35); }
.sl-panel { width:100%; max-width:640px;
  margin-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,.32); display:flex;
  flex-direction:column; max-height:min(62vh, 560px); overflow:hidden;
  transform:translateY(16px); opacity:0;
  transition:transform .22s cubic-bezier(.22,.61,.36,1), opacity .18s ease; }
.searchlayer.open .sl-panel { transform:none; opacity:1; }
@media (prefers-reduced-motion: reduce) {
  .sl-panel { transition:none; transform:none; opacity:1; }
}
.sl-bar { display:flex; gap:.6rem; padding:.8rem .9rem;
  border-bottom:1px solid var(--line); }
.sl-bar input { flex:1; font:inherit; font-size:1rem; padding:.6rem .8rem;
  border:1px solid var(--line); border-radius:6px; background:var(--bg-soft);
  color:var(--ink); }
.sl-bar button { font-family:Poppins,sans-serif; font-size:.78rem;
  font-weight:600; background:none; border:0; color:var(--red);
  cursor:pointer; padding:0 .4rem; }
.sl-results { flex:1; overflow-y:auto; padding:.2rem 1rem 1rem;
  -webkit-overflow-scrolling:touch; }
.sl-count, .sl-hint { font-family:Poppins,sans-serif; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
  margin:.7rem 0 .6rem; }
.sl-hit { display:block; padding:.7rem 0; border-bottom:1px solid var(--line);
  text-decoration:none; }
.sl-hit:last-child { border-bottom:0; }
.sl-sec { display:block; font-family:Poppins,sans-serif; font-size:.6rem;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); margin-bottom:.25rem; }
.sl-title { display:block; font-family:"Barlow Condensed",sans-serif;
  font-weight:700; font-size:1.15rem; line-height:1.1; color:var(--ink); }
.sl-snip { display:block; font-family:"Source Serif 4",Georgia,serif;
  font-size:.84rem; line-height:1.42; color:var(--muted); margin-top:.25rem; }
/* on a phone the panel spans the width, as the bar does */
@media (max-width:1079px) {
  .sl-panel { max-width:none; margin:0 .6rem
    calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px); }
}

/* ---------- elements settling into place on scroll ---------- */
/* only elements the script has marked are hidden, so a failed script can
   never leave the page blank */
.reveal { opacity:0; transform:translateY(14px); }
.reveal-in, .reveal-in.reveal-left, .reveal-in.reveal-right {
  opacity:1; transform:none; }
/* on screen when the page arrived: present, but not announced */
.reveal-now, .reveal-now.reveal-left, .reveal-now.reveal-right {
  opacity:1; transform:none; transition:none !important; }
@media (prefers-reduced-motion: no-preference) {
  .reveal, .reveal-in { transition:opacity .5s cubic-bezier(.22,.61,.36,1),
    transform .5s cubic-bezier(.22,.61,.36,1); }
  .cardlist > .card.reveal { transform:translateY(16px); }
  /* Pull quotes and body pictures arrive from the margin, the way they
     would be placed on a printed spread — further than the body furniture,
     and a shade slower. */
  /* The offsets apply only while an element is still waiting. Scoping them
     with :not() means the finished state cannot be overridden by a later,
     more specific rule — which is what left pictures sitting 52px left of
     the column once they had arrived. */
  article blockquote.reveal:not(.reveal-in):not(.reveal-now).reveal-left {
    transform:translateX(-56px); }
  article blockquote.reveal:not(.reveal-in):not(.reveal-now).reveal-right {
    transform:translateX(56px); }
  article figure.reveal:not(.reveal-in):not(.reveal-now).reveal-left {
    transform:translate(-52px, 10px); }
  article figure.reveal:not(.reveal-in):not(.reveal-now).reveal-right {
    transform:translate(52px, 10px); }
  article blockquote.reveal, article figure.reveal {
    transition-duration:.62s; }
}
/* If the script never runs, nothing should be left invisible. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
}

/* the entry you have just come back from, briefly marked so you can find
   your place without hunting for it */
.cardlist .card.justread { position:relative; }
.cardlist .card.justread::before { content:""; position:absolute;
  left:-.8rem; right:-.8rem; top:-.6rem; bottom:-.4rem;
  border-left:3px solid var(--red); background:rgba(var(--red-rgb),.06);
  pointer-events:none; animation:justread 2.6s ease forwards; }
@keyframes justread { 0%,70% { opacity:1; } 100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  .cardlist .card.justread::before { animation:none; opacity:1; }
}

/* ---------- menu entries with a thumbnail ---------- */
.menugroup li a { display:flex; align-items:flex-start; gap:.7rem; }
.mi-thumb { flex:0 0 62px; width:62px; height:42px; object-fit:cover;
  display:block; background:var(--bg-soft); }
.mi-none { border:1px solid var(--line); }
.mi-title { flex:1; min-width:0; }
.menugroup li a.mi-plain { display:block; }
@media (min-width:1080px) {
  .mi-thumb { flex-basis:72px; width:72px; height:48px; }
  .menugroup li a { padding:.55rem 0; }
}

.menugroup li a.mi-plain.on { color:var(--red); font-weight:600; }

/* ---------- contents: band headlines read at one size ---------- */
/* A run of two articles was set two steps down from a run of one, so a
   pair of features sat visibly smaller than the solo entries either side
   of them. Both are the same horizontal band, so both take the same size. */
@media (min-width:1080px) {
  .cardlist > .card.pair .cardtitle { font-size:1.7rem; line-height:1.05; }
}
@media (min-width:1520px) {
  .cardlist > .card.pair .cardtitle { font-size:1.85rem; }
}
@media (min-width:1900px) {
  .cardlist > .card.pair .cardtitle { font-size:1.85rem; }
}

/* ---------- contents: the imprint appears once ---------- */
/* Above 1080px the imprint sits in the cover rail, so its card and section
   divider come out of the contents. The earlier hide rule tied on
   specificity with the later .card.solo display rule and lost, which is
   why an About article that happened to be a run of one reappeared at the
   foot of the page. Marked important so run length cannot resurrect it. */
@media (min-width:1080px) {
  .cardlist > .card.aboutcard,
  .cardlist .card.aboutcard,
  .cardlist > .tocsection.aboutsection,
  .cardlist .tocsection.aboutsection { display:none !important; }
}

/* ==================================================================
   v2 — sections across, not down (desktop evaluation build, ?v2)
   Each section fills the window; you move sideways between them. The
   phone is untouched: below 900px the ordinary contents runs.
   ================================================================== */
.v2wrap { position:relative; overflow:hidden; min-height:420px; }
/* the sideways contents owns the window: no page gutters, no scroll, and
   the site footer sits below the fold rather than under the panel */
body.np-v2 main { max-width:none; width:100%; margin:0; padding:0; }
body.np-v2 footer { display:none; }
body.np-v2 { overflow:hidden; }
body.np-v2 .mreader-nav { display:none; }
body.np-v2 main { padding-bottom:0 !important; }
.v2track { display:flex; height:100%; transition:transform .5s
  cubic-bezier(.4,0,.2,1); will-change:transform; }
@media (prefers-reduced-motion: reduce) {
  .v2track { transition:none; }
}
.v2panel { flex:0 0 100%; height:100%; box-sizing:border-box;
  padding:1.4rem 4.6rem 62px; display:flex; flex-direction:column;
  overflow:hidden; }

/* cover panel — the v1 cover screen, sized to the window */
.v2cover { position:relative; padding:0 0 52px; overflow:hidden; }
.v2cover .covergate { margin:0; min-height:0; height:100%; width:100%;
  padding:2.4rem 2rem; }
.v2cover .cg-inner { max-height:100%; overflow:auto; }
/* The cover panel is a fixed height, so its rhythm answers to that height
   as well as to the window's width: a three-line headline used to push the
   cover lines and READ ON out of sight behind a scrollbar. The column is
   also wider on a large screen, which is what takes a long headline from
   three lines to two. Measured on the September cover: at 1512x700 the
   block was 220px taller than the panel; it now fits with room to spare,
   and still fits at 1728x1000. */
.v2cover .covergate { padding:clamp(.8rem, 4vh, 4rem) 2rem; }
.v2cover .cg-mast { width:min(74%, clamp(190px, 30vh, 380px));
  margin-bottom:clamp(.45rem, 1.8vh, 1.4rem); }
.v2cover .cg-issue { margin-bottom:clamp(.45rem, 1.6vh, 1.5rem); }
.v2cover .cg-badge { margin-bottom:clamp(.3rem, .9vh, .6rem); }
.v2cover .cg-stand { margin-top:clamp(.45rem, 1.3vh, 1rem);
  font-size:clamp(.9rem, 1.8vh, 1.08rem); }
.v2cover .cg-lines { margin-top:clamp(.5rem, 2vh, 1.6rem); }
.v2cover .cg-lines .cl-link,
.v2cover .cg-lines li:not(:has(.cl-link)) {
  padding:clamp(.2rem, .85vh, .42rem) 0; }
@media (min-width:1200px) {
  /* Room enough to set the cover line across the screen rather than down
     it. One measure holds the block together: the headline and the cover
     lines share it, and the standfirst is inset to about three quarters,
     so the three read as one stack. Before this the headline ran to 1240,
     the lines to 896 and the standfirst to 585 — three unrelated widths. */
  .cg-inner { --cov:min(1100px, 82vw); max-width:var(--cov); }
  .cg-head { font-size:clamp(2.2rem, min(4.4vw, 7.2vh), 4.4rem);
             max-width:100%; }
  .cg-lines { max-width:100%; }
  /* the standfirst shares the measure too, so all three line up on the
     same left and right edge rather than one of them sitting narrow */
  .cg-stand { max-width:100%; }
}

.v2veil { position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.78)); }

/* section panels */
/* section label with a rule running off it — drawn as a border on the
   header itself rather than a flexed pseudo-element, which was rendering
   as a faint box on some screens */
.v2head { font-family:Poppins,sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:1rem;
  display:block; border-bottom:2px solid rgba(var(--red-rgb),.25);
  line-height:0; }
.v2head span { display:inline-block; background:var(--red); color:#fff;
  padding:.34rem .7rem; line-height:1.1; margin-bottom:-1px; }
/* The grid divides the window rather than growing past it: rows share the
   height that is left, pictures take what the words do not, and nothing
   runs under the rail. */
.v2grid { flex:1; min-height:0; display:grid; gap:1.2rem;
  grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(0,1fr);
  align-content:stretch; overflow:hidden; }
.v2n1 { grid-template-columns:1fr; }
.v2n2 { grid-template-columns:repeat(2,1fr); }
.v2n3 { grid-template-columns:repeat(3,1fr); }
.v2tile { display:flex; flex-direction:column; text-decoration:none;
  color:inherit; min-height:0; overflow:hidden; }
/* every picture the same depth: a fixed share of the row rather than
   whatever the headline leaves over, so a three-line title cannot shrink
   its own thumbnail below its neighbour's */
.v2thumb { flex:0 0 58%; width:100%; height:58%; min-height:0;
  object-fit:cover; display:block; background:#e9ebee; }
/* A single row of tiles has height to spare, and the words need no more of
   it than they did in two rows — so the pictures take the difference and
   the grid meets the advert beneath it. */
.v2rows1 .v2thumb { flex-basis:74%; height:74%; }
.v2noimg { background:linear-gradient(135deg,#e9ebee,#f6f7f8); }
.v2text { flex:1 1 auto; min-height:0; overflow:hidden; padding:.55rem 0 0;
  display:block; }
.v2kicker { display:block; font-family:Poppins,sans-serif; font-weight:700;
  font-size:.58rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--red); margin-bottom:.15rem; }
.v2title { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; font-family:Poppins,sans-serif; font-weight:700;
  font-size:clamp(.82rem,.95vw,1rem); line-height:1.2; }
.v2teaser { display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; font-size:.8rem;
  opacity:.72; margin-top:.2rem; }
/* on a short laptop screen the standfirsts are the first thing to go */
@media (max-height: 900px) {
  .v2teaser { -webkit-line-clamp:1; }
  .v2grid { gap:.9rem; }
}
@media (max-height: 760px) {
  .v2teaser { display:none; }
  .v2title { -webkit-line-clamp:2; }
  .v2thumb { flex-basis:64%; height:64%; }
  .v2rows1 .v2thumb { flex-basis:78%; height:78%; }
}
.v2title { transition:color .18s ease; }
.v2tile:hover .v2title { color:var(--red); }

/* adverts on a section screen: above, between or below the tiles */
.v2adrow { grid-column:1/-1; margin:0 0 .6rem; }
.v2solo > .v2adrow { margin:.45rem 3.6rem .2rem; }
.v2grid .v2adrow { margin:.4rem 0 .6rem; }
/* an advert between two halves of a section keeps its full depth */
.v2panel > .v2grid + .v2adrow { margin:.7rem 0; flex:0 0 auto; }
.v2panel > .v2adrow { flex:0 0 auto; }
/* centred, so an advert drawn narrower than the panel sits in the middle
   with its label and hint over and under it */
aside.ad.v2ad { margin:0; text-align:center; }
/* Banners are strips: fixed depth, full width, whatever the window is. The
   creative covers that box, so the artwork is drawn wide and only its outer
   edges are ever lost. */
/* The strip is scaled to the width of the panel and takes whatever depth
   that gives it — no crop, no bars. 300px is the ceiling for the rare
   window wider than the artwork. */
aside.ad.v2ad img, aside.ad.v2ad video.advideo { display:block; width:100%;
  height:auto; max-width:100%; margin:0; object-fit:contain;
  object-position:center; }
/* Depth is capped against the window as well as the drawn size: a strip
   must never take so much of a panel that the editorial it sits with is
   pushed off the top. On a big screen it reaches its full 250 or 500. */
/* 300px is a ceiling, not a target: on a short window the strip gives way
   to the editorial rather than the other way round */
aside.ad.v2ad.fmt-half img, aside.ad.v2ad.fmt-half video.advideo,
aside.ad.v2ad.fmt-deep img, aside.ad.v2ad.fmt-deep video.advideo {
  max-height:min(300px, 20vh);
  /* up to 20% of the window, which lets a 2560×300 strip run the full
     width of a laptop panel; the width follows the depth limit, drawn
     narrower and centred when it binds */
  width:min(100%, calc(20vh * 8.533), 2560px); height:auto; margin:0 auto; }
/* The junior is the junior-page equivalent: twice the strip's depth, with
   the same give on a short window. */
/* The junior is portrait (1080×1350) and normally stands in a column
   beside the section (.v2side, below). Anywhere else on a section screen
   it is held to 28% of the window, centred. */
aside.ad.v2ad.fmt-junior img, aside.ad.v2ad.fmt-junior video.advideo {
  max-height:28vh; width:min(100%, calc(28vh * 0.8)); height:auto;
  margin:0 auto; }
/* the junior column: the advert (1080×1350, 4:5) is drawn to the full
   height of the panel less the rail, padding and label (110px), and
   the column takes whatever width that needs — about a third on most
   screens, never more than 40%. The editorial has the rest. */
.v2hasside { flex-direction:row; gap:1.8rem; }
.v2hasside > .v2main { flex:1 1 0; min-width:0; min-height:0;
  display:flex; flex-direction:column; }
.v2hasside > .v2side { flex:0 0 auto; max-width:40%; min-width:0;
  min-height:0; display:flex; align-items:center; justify-content:center; }
.v2solo.v2hasside { gap:0; }
/* on the full-picture screens the column keeps clear of the side arrow */
.v2solo.v2hasside > .v2side { padding:1rem 3.6rem 1rem 1.8rem;
  box-sizing:border-box; }
.v2side aside.ad.v2ad { width:100%; }
/* the zoom cursor says it on a desktop; the words cost the advert depth */
.v2side aside.ad.v2ad .adzoomhint { display:none; }
.v2side aside.ad.v2ad.fmt-junior img,
.v2side aside.ad.v2ad.fmt-junior video.advideo {
  height:calc(var(--v2h, 80vh) - 110px); width:auto; max-width:100%;
  max-height:none; object-fit:contain; margin:0 auto; }
/* no keyline on a section screen: the advert's own edges frame it */
aside.ad.v2ad img, aside.ad.v2ad video.advideo { border:0; }
aside.ad.v2ad .adlabel { margin-bottom:.15rem; }
aside.ad.v2ad .adzoomhint { margin-top:.1rem; }

/* moving between sections */
/* The arrows sit at one fixed point in the window on every screen —
   sections and articles alike — so after a click the next arrow is still
   under the pointer. They stay clear of adverts sideways instead: every
   advert is inset further from the window edge than an arrow is wide. */
.v2arrow { position:fixed; top:50%; transform:translateY(-50%);
  width:46px; height:84px; border:0; cursor:pointer; z-index:6;
  background:rgba(20,20,22,.55); color:#fff; font-size:2rem; line-height:1;
  backdrop-filter:blur(6px); transition:background .18s, opacity .18s; }
.v2arrow:hover { background:var(--red); }
.v2arrow:disabled { opacity:0; pointer-events:none; }
.v2prev { left:0; border-radius:0 6px 6px 0; }
.v2next { right:0; border-radius:6px 0 0 6px; }

/* the contents sits on a red band across the foot, framing the panel */
.v2rail { position:absolute; left:0; right:0; bottom:0; height:52px;
  display:flex; align-items:center; justify-content:center; gap:.2rem;
  flex-wrap:nowrap; overflow-x:auto; z-index:7; background:var(--red);
  padding:0 1rem; }
.v2dot { border:0; background:none; cursor:pointer; white-space:nowrap;
  font-family:Poppins,sans-serif; font-size:.62rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.72);
  padding:.5rem .7rem; transition:color .15s; }
.v2dot:hover { color:#fff; }
.v2dot.on { color:#fff; font-weight:700;
  box-shadow:inset 0 -3px 0 rgba(255,255,255,.9); }

/* a section of one or two articles: pictures take the window edge to edge,
   the words sit over them in white */
.v2solo { padding:0 0 52px; }
.v2herowrap { flex:1; min-height:0; display:flex; flex-direction:column;
  gap:2px; }
.v2hero { position:relative; flex:1; min-height:0; display:block;
  overflow:hidden; text-decoration:none; color:#fff; }
.v2hero-media { position:absolute; inset:0; background-size:cover;
  background-position:center; }
.v2hero-media.plain { background:linear-gradient(135deg,#1b1f26,#333a45); }
/* (1 Oct) darker all over, and a touch less colour, so a picture we have
   sourced sits behind the words rather than leading the screen; the cover
   keeps its own veil (.cg-veil) */
.v2hero .v2veil { background:linear-gradient(180deg,rgba(10,9,8,.45) 0%,
  rgba(10,9,8,.55) 45%, rgba(10,9,8,.9) 100%); }
.v2pair .v2veil { background:linear-gradient(180deg,rgba(10,9,8,.48) 0%,
  rgba(10,9,8,.58) 40%, rgba(10,9,8,.92) 100%); }
.v2hero .v2hero-media { filter:saturate(.85); }
.v2hero-in { position:absolute; left:0; right:0; bottom:0; padding:2.2rem 3rem;
  max-width:74ch; }
/* two articles stand side by side, each a full-height column */
.v2pair .v2herowrap { flex-direction:row; }
.v2pair .v2hero-in { padding:2rem 2.2rem; max-width:none; }
/* everything over a picture is white — the page colours would vanish */
.v2hero-in, .v2hero-in * { color:#fff; }
.v2chip { display:inline-block; background:var(--red); color:#fff;
  font-family:Poppins,sans-serif; font-weight:700; font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; padding:.3rem .7rem;
  margin-bottom:.8rem; }
.v2pair .v2chip { margin-bottom:.5rem; }
.v2hero-kicker { display:block; font-family:Poppins,sans-serif;
  font-weight:700; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; opacity:.9; margin-bottom:.3rem; }
.v2hero-title { font-family:Poppins,sans-serif; font-weight:700;
  font-size:clamp(1.5rem,2.5vw,2.5rem); line-height:1.1; margin:0 0 .5rem;
  transition:color .18s ease;
  /* the whole screen is the link, so the headline is only as wide as its
     own words: without this it would light up from anywhere on the page */
  width:fit-content; max-width:100%; }
.v2pair .v2hero-title { font-size:clamp(1.4rem,2vw,2.1rem); }
.v2hero-teaser { font-size:1rem; opacity:.9; margin:0; max-width:60ch; }
/* The side arrows are fixed to the edges of the window and sit over the
   panel, so hero text set hard against the panel edge ran underneath them.
   Every hero keeps a gutter wider than an arrow; in a pair only the outer
   edges need it, because no arrow stands between the two. */
@media (min-width:1080px) {
  .v2hero-in { padding-left:76px; padding-right:76px; }
  .v2pair .v2hero-in { padding-left:76px; padding-right:76px; }
  .v2pair .v2hero:first-of-type .v2hero-in { padding-right:2.2rem; }
  .v2pair .v2hero:last-of-type .v2hero-in { padding-left:2.2rem; }
}
.v2pair .v2hero-teaser { font-size:.92rem; max-width:46ch; }
/* a section of a single article (Ian, 2 Oct): the headline and teaser run
   the full width of the screen, inside the gutters that keep them clear of
   the arrows, rather than stopping at 74 and 60 characters */
.v2solo:not(.v2pair) .v2hero-in,
.v2solo:not(.v2pair) .v2hero-teaser { max-width:none; }
/* and sits a little up from the foot of the picture (Ian, 2 Oct: "slightly
   higher up from the bottom, but not half way") */
.v2solo:not(.v2pair) .v2hero-in { bottom:8%; }   /* 11% was a touch high */
/* Hovering a headline warms it towards the brand red rather than drawing
   a line under it. Over a picture that is the soft accent, which holds its
   contrast against white type on a dark ground; on white it is the red
   itself, as on the tiles below.
   The hover is on the words, not on the hero: a section screen is one big
   link, so hanging it off the panel lit the headline up the moment the
   pointer entered the window, which told the reader nothing. Focus still
   comes from the link, which is what a keyboard lands on. */
.v2hero-title:hover,
.v2hero:focus-visible .v2hero-title { color:var(--accent); }

/* a way back to the cover from anywhere in the issue */
.v2home { position:absolute; left:.6rem; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff; font-size:1.05rem;
  line-height:1; transition:background .15s; }
.v2home:hover { background:rgba(255,255,255,.34); }
.v2cover .cg-enter { cursor:pointer; }

/* a full-page booking: a screen of its own, edge to edge. The creative is
   pinned to the panel rather than sized by its own proportions, so it fills
   whatever shape the window is. */
.v2pagead { padding:0; position:relative; }
.v2pagead aside.ad.v2page { position:absolute; top:0; left:0; right:0;
  bottom:52px; margin:0; overflow:hidden; }
/* the bleed: the creative again, enlarged and blurred, filling whatever the
   fitted copy does not reach */
.v2pagead aside.ad.v2page::before { content:""; position:absolute; inset:0;
  background-image:var(--adbleed); background-size:cover;
  background-position:center; filter:blur(38px) saturate(1.1);
  transform:scale(1.12); z-index:0; }
.v2pagead aside.ad.v2page > a { position:relative; z-index:1; }
.v2pagead aside.ad.v2page a,
.v2pagead aside.ad.v2page picture { display:block; width:100%; height:100%; }
/* A full page fills the panel on every screen — a laptop is about 2.2:1
   and a tablet about 1.7:1, and no single file fits both. It covers, and
   the artwork is drawn with bleed at the edges so only the bleed is ever
   lost. The banner rules above pin creatives left and cap their height,
   which is right for a strip and wrong here: both are overridden. */
.v2pagead aside.ad.v2page img, .v2pagead aside.ad.v2page video.advideo {
  width:100%; height:100%; max-width:none; max-height:none;
  object-fit:cover; object-position:center; border:0; margin:0;
  display:block; }
.v2pagead aside.ad.v2page .adlabel { position:absolute; left:1rem;
  bottom:.6rem; z-index:2; color:rgba(255,255,255,.72);
  text-shadow:0 1px 3px rgba(0,0,0,.6); }
.v2pagead .adzoomhint { display:none; }

/* offline control in the masthead, for the sideways contents */
.v2offline { margin-left:.9rem; display:inline-flex; align-items:center;
  gap:.4rem; border:1px solid var(--line); background:var(--bg-soft);
  color:var(--text); font-family:Poppins,sans-serif; font-weight:600;
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.42rem .8rem; cursor:pointer; border-radius:3px; }
.v2offline:hover { border-color:var(--red); color:var(--red); }
.v2offline .ob-icon { font-size:.8rem; }
.v2offline .ob-note { font-size:.62rem; text-transform:none;
  letter-spacing:0; opacity:.7; }
.v2offline.saved { border-color:var(--red); color:var(--red); }

/* the rail follows the reader into an article: pinned to the window, with
   the floating pill nav standing down while it is there */
body.np-v2-article .mreader-nav { display:none; }
body.np-v2-article main { padding-bottom:76px; }
.v2rail-fixed { position:fixed; left:0; right:0; bottom:0; z-index:60; }

/* the imprint reads on the panel itself — no picture, nothing to click
   through to */
.v2plain { justify-content:flex-start; }
.v2about { flex:1; min-height:0; overflow:auto; max-width:70ch;
  padding-right:1rem; }
/* the headline set as an article's is, so the imprint reads as a page of
   the magazine rather than a settings screen */
.v2about h2 { font-family:"Barlow Condensed",Poppins,sans-serif; font-weight:700;
  font-size:clamp(2.2rem,3vw,2.9rem); line-height:1.02; letter-spacing:-.01em;
  color:var(--ink); margin:.5rem 0 1.1rem; }
.v2about p { font-size:.95rem; line-height:1.62; margin:0 0 .9rem; }
.v2about h3, .v2about h4 { font-family:Poppins,sans-serif; font-weight:700;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  margin:1.2rem 0 .3rem; color:var(--muted); }
.v2about img { display:none; }
.v2about a { color:var(--red); }

/* the same arrows inside an article, moving piece to piece */
.v2artarrow { position:fixed; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; z-index:61; }
.v2artarrow.v2prev { left:0; }
.v2artarrow.v2next { right:0; }

/* arriving in an article: rise into place instead of cutting */
.v2enter { opacity:0; transform:translateY(26px);
  transition:opacity .34s ease, transform .34s cubic-bezier(.2,.7,.3,1); }
.v2enter.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .v2enter, .v2enter.in { opacity:1; transform:none; transition:none; }
}

/* back to the contents, landing on the section you came from */
.v2back { position:fixed; left:1rem; top:calc(var(--np-headbot, 120px) + 12px);
  z-index:61; display:inline-flex; align-items:center; gap:.3rem;
  background:var(--red); color:#fff; text-decoration:none;
  font-family:Poppins,sans-serif; font-weight:700; font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase; padding:.5rem .8rem;
  border-radius:3px; box-shadow:0 2px 10px rgba(0,0,0,.18); }
.v2back:hover { background:var(--red-deep); }
/* below the width the wide layout needs, the red bar's own Contents is
   one line above: a second identical control is noise, and it lands on
   the bar */
@media (max-width:899px) { .v2back { display:none; } }

/* a sponsored piece is labelled on the contents as well as in the article */
.v2sponsor { background:#1f242b; margin-left:.4rem; }
.v2sponsork { color:#fff; background:#1f242b; display:inline-block;
  padding:.16rem .4rem; }

/* ==================================================================
   One rhythm for every article, whoever built it
   ================================================================== */
/* the opening paragraph carries the weight, in the reading face — never a
   different family from the body it introduces */
article > p:first-of-type { font-family:"Source Serif 4",Georgia,serif;
  font-weight:600; }
article p strong, article li strong { font-family:inherit; font-weight:600; }
@media (min-width:1520px) {
  article > p:first-of-type { font-size:1.4rem; line-height:1.56; }
}
/* equal air between paragraphs, whatever the pipeline produced */
article p { margin:0 0 1.05em; }
article p:last-child { margin-bottom:0; }
/* subheads all spaced alike — and in the headline face, so a piece reads in
   one voice rather than three */
article > h2, article > h3 { font-family:"Barlow Condensed",Poppins,sans-serif;
  font-weight:700; line-height:1.16; letter-spacing:-.005em;
  margin:2em 0 .5em; color:var(--ink); }
article > h2 { font-size:1.72rem; }
article > h3 { font-size:1.72rem; }
article > h2:first-child, article > h3:first-child { margin-top:0; }
/* an imported standfirst — only when it opens the piece — is not a
   subhead: it stays in the reading face, upright */
article > h3:first-child { font-family:"Source Serif 4",Georgia,serif;
  font-weight:400; font-size:1.26rem; line-height:1.45;
  letter-spacing:0; color:#555; margin:.2rem 0 1rem; }
@media (min-width:1080px) {
  article > h2 { font-size:1.9rem; }
  article > h3 { font-size:1.9rem; }
}
article ul, article ol { margin:0 0 1.05em 1.2em; }
article li { margin:0 0 .35em; }
article figure { margin:1.6em 0; }
article figure + p, article blockquote + p { margin-top:0; }

/* the sponsored label reads white on red type, so it holds on any picture */
.v2sponsor { background:#fff; color:var(--red); margin-left:.4rem; }
.v2hero-in .v2sponsor { color:var(--red); }
.v2sponsork { color:var(--red); background:#fff; display:inline-block;
  padding:.16rem .4rem; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }

/* The issue's name in the white bar on a wide window: beside the logo,
   after a hairline, as the magazine would print it on its spine. The page
   count and Read offline stay at the right. Phones keep the smaller name
   at the right, where it has always been. */
@media (min-width:900px) {
  .masthead .issue-label { margin-left:0; align-self:center;
    font-family:Poppins,sans-serif; font-size:1.05rem; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:#6b6b6b;
    padding-left:.95rem; border-left:1px solid var(--line);
    line-height:1.9rem; white-space:nowrap; }
  .masthead .issue-label:empty { display:none; }
  .masthead .pagecount { margin-left:auto; }
  .masthead .pagecount[hidden] + .v2offline { margin-left:auto; }
  [data-theme="dark"] .masthead .issue-label { color:#a9a9a9; }
}

/* "Read more" after every teaser, on cards, tiles and section screens */
.readmore { display:inline-flex; align-items:center; gap:.3rem;
  margin-top:.45rem; font-family:Poppins,sans-serif; font-weight:700;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--red); white-space:nowrap; }
.rm-arrow { display:inline-block; font-size:1.35em; line-height:.8;
  transition:transform .18s ease; }
a:hover .readmore .rm-arrow, a:focus-visible .readmore .rm-arrow {
  transform:translateX(4px); }
.v2text .readmore { display:flex; margin-top:.3rem; font-size:.62rem; }
.cardtext .readmore { display:inline-flex; align-self:flex-start; margin-top:.15rem; }
/* over a picture, the soft accent that keeps its contrast on dark */
.v2hero .readmore { margin-top:.8rem; color:var(--accent); font-size:.7rem; }
[data-theme="dark"] .readmore { color:var(--accent); }
@media (prefers-reduced-motion: reduce) { .rm-arrow { transition:none; } }

/* a paragraph inside a name (the contributors) reads as a list of names,
   not as a second, heavier headline */
/* (1 Oct) the same size as the team's names above them, wherever the
   imprint is set */
.colophon dd p { margin:0; font-weight:400; font-size:inherit; line-height:1.6;
  color:inherit; opacity:1; }
[data-theme="dark"] .colophon dt,
[data-theme="dark"] .colophon .col-pub strong { color:var(--accent); }
/* the heading is already a block of its own; the line break after it only
   left an empty line before the address */
.colophon .col-pub strong + br { display:none; }
/* The imprint's words are set in the issue's body face, like every
   article; only its small red labels stay in the interface face, as the
   section labels do everywhere else. */
:is(article, .v2about) .colophon,
:is(article, .v2about) .colophon dd,
:is(article, .v2about) .colophon .col-pub,
:is(article, .v2about) .colophon .col-small,
:is(article, .v2about) .colophon .col-issn,
.v2about { font-family:"Source Serif 4",Georgia,serif; }
:is(article, .v2about) .colophon dd { font-size:1.08rem; font-weight:400; }
:is(article, .v2about) .colophon dd p { font-size:inherit; line-height:1.55; }
:is(article, .v2about) .colophon .col-pub { font-size:1.02rem; }
:is(article, .v2about) .colophon .col-small { font-size:.92rem; }
:is(article, .v2about) .colophon dt,
:is(article, .v2about) .colophon .col-pub strong { font-family:Poppins,sans-serif; }
/* On a wide window the imprint spreads across the screen instead of
   running down a narrow column that has to scroll: the names on the left,
   the publisher, copyright and ISSN beside them on the right. */
@media (min-width:1100px) {
  .v2about { max-width:none; padding-right:0; }
  .v2about .colophon { display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
    column-gap:clamp(2.5rem,5vw,6rem); align-items:start; }
  .v2about .colophon .masthead-list { grid-column:1; grid-row:1 / span 20;
    margin-top:0; }
  .v2about .colophon > p { grid-column:2; }
  .v2about .colophon .col-pub { border-top:0; padding-top:0; margin-top:.2rem; }
}

/* Every word of the imprint in the body colour, as in an article; only the
   small labels keep the red. (It had four greys of its own.) */
:is(article, .v2about) .colophon dd,
:is(article, .v2about) .colophon dd p,
:is(article, .v2about) .colophon .col-pub,
:is(article, .v2about) .colophon .col-small,
:is(article, .v2about) .colophon .col-issn,
[data-theme="dark"] :is(article, .v2about) .colophon dd,
[data-theme="dark"] :is(article, .v2about) .colophon .col-pub,
[data-theme="dark"] :is(article, .v2about) .colophon .col-small,
[data-theme="dark"] :is(article, .v2about) .colophon .col-issn { color:var(--body); }

/* The admin writes each line of a name list as its own <dd> (one per
   contributor). Every name sits in the right-hand column under its label,
   packed like lines of one list, instead of the extra lines flowing back
   into the label column. */
:is(article, .v2about) .colophon .masthead-list dt { grid-column:1; }
:is(article, .v2about) .colophon .masthead-list dd { grid-column:2; }
:is(article, .v2about) .colophon .masthead-list dd + dd { margin-top:-.3rem; }
@media (max-width:520px) {
  :is(article, .v2about) .colophon .masthead-list dd { grid-column:1; }
  /* a name that wraps must not read as two names */
  :is(article, .v2about) .colophon .masthead-list dd + dd { margin-top:.35rem; }
}

/* About in the red bar */
#aboutbtn.on { background:rgba(0,0,0,.18); }
@media (max-width:420px) {
  .navstrip .navbtn, .navstrip #burger { padding-left:.55rem; padding-right:.55rem; }
  .navstrip #burger { padding-left:0; }
}

/* the build this device is running, shown to proofers only */
.proofbar .pb-build { opacity:.6; white-space:nowrap; margin-left:.35rem; }

/* Read more under the cover story's standfirst, as under every teaser */
.cg-readmore { display:inline-block; margin-top:.7rem; text-decoration:none; }
.cg-readmore .readmore { color:var(--accent); font-size:.72rem; }
.v2cover .cg-readmore { margin-top:clamp(.4rem, 1.2vh, .9rem); }

/* Read more under a cover line, left under its words */
.cg-lines .cl-body { display:flex; flex-direction:column; align-items:flex-start;
  min-width:0; text-align:left; }
.cg-lines .cl-body .readmore { color:var(--accent); font-size:.62rem;
  margin-top:.2rem; }
/* on the same line as the cover line's words, running on after them */
.cg-lines .cl-body { display:block; }
.cg-lines .cl-body .cl-text { display:inline; }
.cg-lines .cl-body .readmore { display:inline; white-space:nowrap;
  margin:0 0 0 .55rem; vertical-align:baseline; }
.cg-lines .cl-body .readmore .rm-arrow { margin-left:.25rem; }

/* the way out when an issue will not load */
.cg-retry { margin-top:1rem; appearance:none; border:0; cursor:pointer;
  background:var(--red); color:#fff; font:700 .72rem Poppins,sans-serif;
  letter-spacing:.1em; text-transform:uppercase; padding:.65rem 1.1rem; }
/* the label sits in the middle of its row, equal space above and below,
   however many lines the words run to */
.cg-lines li, .cg-lines li > * { align-items:center; }
.cg-lines .cl-label { align-self:center; }

/* ---------- advertiser demo: Try your artwork ---------- */
.trybtn { position:fixed; left:18px; bottom:18px; z-index:90;
  appearance:none; border:0; cursor:pointer; background:#111;
  color:#fff; font:700 .74rem Poppins,sans-serif; letter-spacing:.08em;
  text-transform:uppercase; padding:.8rem 1.1rem; border-radius:999px;
  box-shadow:0 6px 22px rgba(0,0,0,.35); display:flex; align-items:center;
  gap:.5rem; }
.trybtn span { color:var(--accent); font-size:1rem; line-height:1; }
.trybtn:hover { background:var(--red); }
.trybtn:hover span { color:#fff; }
@media (max-width:899px) {
  /* above the phone's bottom bar */
  .trybtn { left:50%; transform:translateX(-50%); bottom:92px;
    padding:.65rem 1rem; font-size:.68rem; }
}
#trypanel { position:fixed; inset:0; z-index:110; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center; padding:16px; }
#trypanel .tp-card { position:relative; background:var(--bg); color:var(--ink);
  width:100%; max-width:480px; max-height:calc(100vh - 32px); overflow:auto;
  padding:1.5rem 1.4rem 1.3rem; box-shadow:0 20px 60px rgba(0,0,0,.4); }
#trypanel h2 { margin:0 0 .3rem; font-family:"Barlow Condensed",sans-serif;
  font-size:1.7rem; text-transform:uppercase; letter-spacing:.01em; }
#trypanel .tp-sub { margin:0 0 1rem; font-size:.84rem; color:var(--text);
  line-height:1.5; }
#trypanel .tp-x { position:absolute; top:.5rem; right:.6rem; border:0;
  background:none; font-size:1.6rem; line-height:1; cursor:pointer;
  color:var(--muted); }
#trypanel .tp-fmts { display:grid; grid-template-columns:repeat(4,1fr);
  gap:.35rem; margin-bottom:.9rem; }
#trypanel .tp-fmts button { appearance:none; border:1px solid var(--line);
  background:var(--bg-soft); color:var(--ink); cursor:pointer;
  font:700 .68rem Poppins,sans-serif; letter-spacing:.06em;
  text-transform:uppercase; padding:.6rem .2rem; }
#trypanel .tp-fmts button.on { background:var(--red); border-color:var(--red);
  color:#fff; }
#trypanel .tp-note { margin:0 0 .8rem; font-size:.84rem; color:var(--text); }
#trypanel .tp-file { display:block; margin:0 0 .8rem; }
#trypanel .tp-lab { display:block; font:700 .66rem Poppins,sans-serif;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  margin-bottom:.3rem; }
#trypanel .tp-lab em { font-style:normal; font-weight:500; color:var(--muted);
  letter-spacing:.04em; margin-left:.3rem; }
#trypanel input[type=file] { font-size:.8rem; max-width:100%; }
#trypanel .tp-warn { display:none; margin-top:.35rem; font-size:.78rem;
  color:#b3261e; line-height:1.4; }
#trypanel .tp-warn.on { display:block; }
#trypanel .tp-actions { display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top:1.1rem; }
#trypanel .tp-go { appearance:none; border:0; cursor:pointer;
  background:var(--red); color:#fff; font:700 .74rem Poppins,sans-serif;
  letter-spacing:.1em; text-transform:uppercase; padding:.75rem 1.3rem; }
#trypanel .tp-go:disabled { opacity:.4; cursor:not-allowed; }
#trypanel .tp-reset { appearance:none; border:1px solid var(--line);
  background:none; color:var(--ink); cursor:pointer;
  font:600 .72rem Poppins,sans-serif; padding:.7rem 1rem; }
#trypanel .tp-reset[hidden] { display:none; }
/* the tried advert, marked for a moment when the page arrives at it */
.ad.tryflash { outline:3px solid var(--accent); outline-offset:4px;
  transition:outline-color .6s ease; }

/* Search in the red bar, wide windows only (phones have it in the bottom bar) */
.navstrip .searchbtn { margin-left:auto; display:inline-flex; align-items:center;
  gap:.45rem; font-weight:600; letter-spacing:.06em; }
.navstrip .searchbtn svg { width:17px; height:17px; }
.navstrip .searchbtn + .themetoggle { margin-left:0; }
@media (max-width:899px) {
  .navstrip .searchbtn { display:none; }
  .navstrip .searchbtn + .themetoggle { margin-left:auto; }
}

/* ==========================================================================
   A company's logo on an article (28 Sept). Drawn by what it sits on, as
   the printed magazine does (see sponsorMarkHTML in app.js):
   .spm-light on the page, .spm-photo on the white pill over a picture,
   .spm-dark on a flat dark ground. Sizes come from --spm-h (the logo's
   height) and --spm-w (the widest a long wordmark may run).
   ========================================================================== */
:root { --sp-band:#1f1d1b; }                 /* the closing band */
html[data-theme="dark"] { --sp-band:#2a2723; }
.spmark { display:inline-flex; align-items:center; gap:.65rem;
  text-decoration:none; max-width:100%; vertical-align:middle; }
.spm-logo { display:inline-flex; align-items:center; line-height:0;
  flex:0 1 auto; min-width:0; }
.spm-logo img { display:block; height:var(--spm-h, 30px); width:auto;
  max-width:var(--spm-w, 220px); object-fit:contain; }
.spm-logo .spm-wht { display:none; }
.spm-label { font-family:Poppins,sans-serif; font-size:.6rem;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; line-height:1.2; }
/* over a picture: the colour logo on a white pill */
.spm-photo { background:#fff; border-radius:999px;
  padding:var(--spm-py, .5rem) var(--spm-px, 1.05rem);
  box-shadow:0 2px 14px rgba(0,0,0,.2); }
.spm-photo .spm-label { color:#6f6a63; }
/* a flat dark ground: the white logo, or the pill round the colour one */
.spm-dark.has-white .spm-logo .spm-col { display:none; }
.spm-dark.has-white .spm-logo .spm-wht { display:block; }
.spm-dark:not(.has-white) .spm-logo { background:#fff; border-radius:999px;
  padding:.45rem .95rem; }
.spm-dark .spm-label { color:rgba(255,255,255,.72); }
/* in dark mode the page itself is a dark ground */
[data-theme="dark"] .spm-light.has-white .spm-logo .spm-col { display:none; }
[data-theme="dark"] .spm-light.has-white .spm-logo .spm-wht { display:block; }
[data-theme="dark"] .spm-light:not(.has-white) .spm-logo {
  background:#fff; border-radius:999px; padding:.35rem .8rem; }

/* under the headline in an article */
article > .spm-top { display:flex; width:fit-content; --spm-h:34px;
  margin:0 0 1.3rem; }
/* over a feature hero, after the byline */
.fhero-text .spm-top { --spm-h:30px; margin:1.4rem auto 0; }
.fhero-text .fhero-by + .spm-top { margin-top:1.2rem; }
.fhero-text > .spm-top { display:flex; width:fit-content; }

/* the band that closes the piece: the printed page's footer, once */
.spband { display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.8rem 1.2rem; background:var(--sp-band);
  padding:1.15rem 1.4rem; margin:2.4rem 0 0; --spm-h:38px; --spm-w:260px;
  text-decoration:none; }
.spband .spb-lead { display:inline-flex; align-items:center; gap:.8rem;
  min-width:0; }
.spband .spb-visit { font-family:Poppins,sans-serif; font-size:.7rem;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.78); white-space:nowrap;
  transition:color .18s ease; }
a.spband:hover .spb-visit, a.spband:focus-visible .spb-visit {
  color:var(--accent); }
[data-theme="dark"] .spband { box-shadow:inset 0 0 0 1px var(--line); }

/* the cover screen: the logo centred under the label (29 Sept; beside it,
   the pill and the label read as two unrelated chips) */
.cg-badgerow { display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1rem; margin:0 auto 1rem; }
/* The label, the logo and the headline are spaced evenly by eye: the
   headline's first line box starts about .22em above its capitals, so it
   is pulled up by that much (the margins collapse through the link), and
   the gap under the logo then looks the same as the gap above it. */
.cg-badgerow + .cg-head-link .cg-head, .cg-badgerow + .cg-head {
  margin-top:-.22em; }
.cg-badgerow .cg-badge { margin:0; display:inline-block; }
.cg-badgerow .spm-cover { --spm-h:24px; --spm-w:170px; --spm-py:.42rem;
  --spm-px:.9rem; }
/* the masthead and issue line, then a little more space, then label,
   logo and headline at one even spacing (29 Sept) */
.v2cover .cg-badgerow { gap:clamp(.8rem, 2vh, 1.2rem);
  margin-top:clamp(.8rem, 2.4vh, 1.5rem);
  margin-bottom:clamp(.8rem, 2vh, 1.2rem); }
@media (min-width:1080px) {
  .cg-badgerow .spm-cover { --spm-h:clamp(20px, 3.2vh, 30px); }
}

/* a section screen of one or two articles: beside the section label */
.v2chiprow { display:flex; align-items:center; flex-wrap:wrap;
  gap:.45rem .55rem; margin-bottom:.8rem; }
.v2chiprow .v2chip { margin-bottom:0; }
.v2chiprow .v2sponsor { margin-left:0; }
.v2pair .v2chiprow { margin-bottom:.5rem; }
.spm-chip { --spm-h:22px; --spm-w:150px; --spm-py:.34rem; --spm-px:.8rem; }

/* a tile on a section screen: pinned to the picture's corner, where it
   costs the headline and teaser nothing */
.v2tile.has-spm { position:relative; }
.spm-over { position:absolute; top:.55rem; left:.55rem; z-index:2;
  --spm-h:18px; --spm-w:120px; --spm-py:.34rem; --spm-px:.75rem; }

/* a card in the phone contents: above the headline */
.cardtext > .spm-card { align-self:flex-start; --spm-h:20px;
  --spm-w:140px; margin:.1rem 0 .15rem; }
/* everything in a hero is white, but not the words on the white pill */
.v2hero-in .spm-photo .spm-label { color:#6f6a63; }

/* the header logo in dark mode: the site's white logo, if it has one */
#logoslot .lg-wht { display:none; }
[data-theme="dark"] #logoslot.has-white .lg-col { display:none; }
[data-theme="dark"] #logoslot.has-white .lg-wht { display:block; }

/* The card picture where it opens an article is shown whole (Ian, 1 Oct:
   a wide picture lost its right-hand edge to the 16:10 frame). It fills
   the column at its own proportions; one taller than the window allows is
   drawn narrower and centred, so it is seen at once without cropping.
   --ar (height / width) is set by app.js thumbAsLead() once it loads; until
   then the max-width is invalid and so ignored. A portrait or small one
   (img.natural, from fitImages) keeps its own treatment. The feature
   hero, a picture behind the headline, still fills its panel. */
article figure.lead.fromthumb img:not(.natural) { aspect-ratio:auto;
  object-fit:fill; width:100%; height:auto; display:block;
  max-width:calc(80vh / var(--ar)); margin-left:auto; margin-right:auto; }
article figure.fromthumb .ovwrap { max-width:calc(80vh / var(--ar));
  margin-left:auto; margin-right:auto; }

/* A caption over the card picture where it opens an article (Ian, 1 Oct):
   white, in a bottom corner, over a soft shade so it reads on any photo.
   app.js thumbCaption(); never on the contents. */
article figure .ovwrap { position:relative; display:block; }
article figure .ovwrap > img { display:block; }
/* a small or portrait picture is drawn narrower than the column: the
   caption stays on the picture, not the column's corner */
article figure .ovwrap:has(> img.natural),
article figure.portrait .ovwrap { width:fit-content; max-width:100%;
  margin:0 auto; }
article figure .ovwrap::after { content:""; position:absolute; left:0;
  right:0; bottom:0; height:40%; max-height:7.5rem; pointer-events:none;
  border-radius:0 0 2px 2px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45)); }
.ovcap { position:absolute; right:.8rem; bottom:.6rem; z-index:1;
  max-width:min(75%, 46ch); font-family:Poppins,sans-serif;
  font-size:.72rem; font-weight:500; line-height:1.4; letter-spacing:.02em;
  color:#fff; text-align:right; pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.65), 0 0 14px rgba(0,0,0,.45); }
.ovcap.ovcap-left { right:auto; left:.8rem; text-align:left; }
/* a feature's hero: the corner of the whole picture */
article.tpl-feature .fhero > .ovcap { right:1.1rem; bottom:.85rem; }
article.tpl-feature .fhero > .ovcap.ovcap-left { right:auto; left:1.1rem; }
@media (min-width:1080px) {
  .ovcap { font-size:.76rem; }
  article.tpl-feature .fhero > .ovcap { right:1.8rem; bottom:1.1rem; }
  article.tpl-feature .fhero > .ovcap.ovcap-left { right:auto; left:1.8rem; }
}
/* room under a feature's byline for the caption on a phone */
@media (max-width:699px) {
  article.tpl-feature .fhero.hascap .fhero-text { padding-bottom:3.3rem; }
}
@media (max-width:560px) {
  .ovcap { font-size:.66rem; right:.6rem; bottom:.45rem; max-width:85%; }
  .ovcap.ovcap-left { left:.6rem; }
}

/* The card picture as a quiet band at the top of a Standard, Interview or
   Sponsored article on a wide screen (Ian, 1 Oct, option C of three; phones
   keep the picture under the headline): the width it had, a
   shallow strip (3.2:1, cropped to fill), a little less colour, a light
   wash that fades into the page, and the label and headline starting on
   the fade. app.js thumbAsLead() puts it first and marks it tl-band; the
   Feature template keeps its full-width hero. */
article > figure.tl-band { position:relative; overflow:hidden;
  border-radius:0 0 2px 2px; margin-top:0; margin-bottom:0; }
/* butted to the menu bar (Ian, 1 Oct); a Sponsored piece drops its rule
   and top padding there, the flag says what it is */
article.tpl-sponsored.has-band { padding-top:0; border-top:0; }
article figure.lead.fromthumb.tl-band img:not(.natural) { aspect-ratio:3.2;
  width:100%; max-width:none; height:auto; object-fit:cover;
  object-position:center 35%; filter:saturate(.8); }
article figure.fromthumb.tl-band .ovwrap { max-width:none; margin:0; }
article figure.fromthumb.tl-band .ovwrap::after { display:none; }
article > figure.tl-band::after { content:""; position:absolute; inset:0;
  pointer-events:none; background:linear-gradient(180deg,
    rgba(255,255,255,.15) 0%, rgba(255,255,255,.35) 40%, var(--bg) 100%); }
[data-theme="dark"] article > figure.tl-band::after {
  background:linear-gradient(180deg, rgba(19,18,17,.2) 0%,
    rgba(19,18,17,.45) 40%, var(--bg) 100%); }
/* whatever opens the piece (the label, or Sponsored's flag) starts on the
   fade, and the headline follows it */
article > figure.tl-band + * { margin-top:-4.3rem; }
article > figure.tl-band ~ .sponsorflag,
article > figure.tl-band ~ .pagetag,
article > figure.tl-band ~ h1 { position:relative; z-index:1; }
article > figure.tl-band ~ h1 { text-shadow:0 0 22px rgba(255,255,255,.95); }
[data-theme="dark"] article > figure.tl-band ~ h1 {
  text-shadow:0 0 22px rgba(19,18,17,.95); }
/* the headline stands a little clear of the copy, as it did over the
   picture; on a Sponsored piece the label stays with the flag */
article > figure.tl-band ~ h1 { margin-bottom:1.5rem; }
article > figure.tl-band ~ .sponsorflag + .pagetag { margin-top:.2rem; }
/* the flag is inline-block, which a negative margin cannot lift: as a
   shrink-wrapped block it starts on the fade like a label */
article > figure.tl-band + .sponsorflag { display:table; }
/* a caption, if one is set, sits in a top corner, clear of the headline */
article figure.tl-band .ovcap { top:.6rem; bottom:auto; z-index:2; }

/* ==========================================================================
   The header on a wide window (1 Oct, Ian): the controls up in the white
   bar, in grey, warming to the brand colour; the sections in the green bar
   under it, centred, all in white with the one on screen underlined; and a
   slim green line at the foot of the window where the section rail used to
   sit, framing the screen. app.js (placeHeader) moves the buttons and sets
   body.np-topnav wherever the sideways reader runs. Phones, narrow tablets
   and ?v1 keep the green bar of controls they have always had.
   ========================================================================== */
.mastnav, .mastend { display:none; }
.issue-label:empty ~ .pagecount { margin-left:auto; }
body.np-topnav .mastnav, body.np-topnav .mastend { display:flex;
  align-items:center; }
body.np-topnav .masthead .logo { flex-shrink:0; }
/* home, Contents, Issues and About follow the issue's name after a hairline */
body.np-topnav .mastnav { align-self:stretch; padding-left:.35rem;
  border-left:1px solid var(--line); }
body.np-topnav .masthead .issue-label:empty + .mastnav { border-left:0; }
/* Search and Dark lead the right-hand group; the page count or Read
   offline, then the site's address, follow */
body.np-topnav .mastend { margin-left:auto; }
body.np-topnav .masthead .pagecount,
body.np-topnav .masthead .pagecount[hidden] + .v2offline { margin-left:0; }
body.np-topnav .masthead #burger,
body.np-topnav .masthead .navbtn,
body.np-topnav .masthead .themetoggle { color:var(--ink); background:none;
  margin:0; padding:.4rem .8rem; line-height:1.4; transition:color .15s; }
body.np-topnav .masthead #burger { padding-left:.55rem; }
body.np-topnav .masthead #burger:hover,
body.np-topnav .masthead .navbtn:hover,
body.np-topnav .masthead .themetoggle:hover,
body.np-topnav .masthead #aboutbtn.on { background:none; color:var(--red); }
body.np-topnav .masthead #aboutbtn.on { box-shadow:inset 0 -2px 0 var(--red); }
[data-theme="dark"] body.np-topnav .masthead #burger:hover,
[data-theme="dark"] body.np-topnav .masthead .navbtn:hover,
[data-theme="dark"] body.np-topnav .masthead .themetoggle:hover,
[data-theme="dark"] body.np-topnav .masthead #aboutbtn.on { color:var(--accent); }
[data-theme="dark"] body.np-topnav .masthead #aboutbtn.on {
  box-shadow:inset 0 -2px 0 var(--accent); }
body.np-topnav .masthead .searchbtn { display:inline-flex; align-items:center;
  gap:.45rem; font-weight:600; letter-spacing:.06em; }
body.np-topnav .masthead .searchbtn svg { width:16px; height:16px; }
body.np-topnav .masthead .themetoggle .tt-icon { font-size:1.05rem; }
body.np-topnav .masthead .site-link { margin-left:.3rem; color:#6b6b6b;
  font-size:.74rem; font-weight:500; white-space:nowrap; }
body.np-topnav .masthead .site-link:hover { color:var(--red); }
[data-theme="dark"] body.np-topnav .masthead .site-link { color:#a9a9a9; }
[data-theme="dark"] body.np-topnav .masthead .site-link:hover { color:var(--accent); }
/* home, first after the hairline: back to this issue's cover (Ian asked
   for it back, 1 Oct, after 1353 left it out) */
body.np-topnav .masthead .navhome { width:30px; height:30px;
  margin:0 .15rem 0 .45rem; background:#f1f1ef; color:var(--ink);
  font-size:1rem; }
body.np-topnav .masthead .navhome:hover { background:var(--red); color:#fff; }
[data-theme="dark"] body.np-topnav .masthead .navhome {
  background:rgba(255,255,255,.1); }
[data-theme="dark"] body.np-topnav .masthead .navhome:hover {
  background:var(--red); color:#fff; }

/* the sections, in the green bar */
body.np-topnav .secslot { flex:1 1 auto; min-width:0; align-self:stretch;
  display:flex; }
.secslot:empty { display:none; }
.secslot .v2rail { position:relative; left:auto; right:auto; bottom:auto;
  height:auto; min-height:44px; width:100%; background:none; padding:0;
  display:flex; align-items:stretch; justify-content:flex-start; gap:0;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; z-index:auto; }
.secslot .v2rail::-webkit-scrollbar { display:none; }
/* centred while they fit; a list too long for the bar starts at the left
   and scrolls, rather than losing its first sections off the edge */
.secslot .v2dot:first-child { margin-left:auto; }
.secslot .v2dot:last-child { margin-right:auto; }
.secslot .v2dot { color:#fff; font-size:.74rem; letter-spacing:.1em;
  padding:.7rem .95rem; line-height:1.4; flex:0 0 auto; }
.secslot .v2dot:hover { color:#fff; background:rgba(0,0,0,.12); }
.secslot .v2dot.on { color:#fff; font-weight:700;
  box-shadow:inset 0 -4px 0 #fff; }
/* A title with a dozen sections (Networking+) does not fit a laptop at
   that size: app.js (fitRail) steps the type and spacing down until the
   list fits the bar, and only past the last step does it scroll */
.secslot .v2rail.fit1 .v2dot { font-size:.7rem; letter-spacing:.08em;
  padding-left:.75rem; padding-right:.75rem; }
.secslot .v2rail.fit2 .v2dot { font-size:.68rem; letter-spacing:.07em;
  padding-left:.6rem; padding-right:.6rem; }
.secslot .v2rail.fit3 .v2dot { font-size:.66rem; letter-spacing:.06em;
  padding-left:.5rem; padding-right:.5rem; }
.secslot .v2rail.fit4 .v2dot { font-size:.64rem; letter-spacing:.05em;
  padding-left:.42rem; padding-right:.42rem; }
.secslot .v2rail.fit5 .v2dot { font-size:.62rem; letter-spacing:.04em;
  padding-left:.36rem; padding-right:.36rem; }
.secslot .v2rail.more-r {
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent); }
.secslot .v2rail.more-l {
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 56px);
  mask-image:linear-gradient(90deg,transparent,#000 56px); }
.secslot .v2rail.more-l.more-r {
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent); }

/* the foot: a slim line instead of the rail, and the room it took back */
body.np-topnav.np-v2::after, body.np-topnav.np-v2-article::after {
  content:""; position:fixed; left:0; right:0; bottom:0; height:7px;
  background:var(--red); z-index:61; pointer-events:none; }
body.np-topnav .v2panel { padding-bottom:calc(1.4rem + 7px); }
body.np-topnav .v2cover, body.np-topnav .v2solo { padding-bottom:7px; }
body.np-topnav .v2pagead aside.ad.v2page { bottom:7px; }
body.np-topnav.np-v2-article main { padding-bottom:40px; }

/* A narrower laptop, in three steps: the logo never gives way. app.js
   (fitHead) sets .mh-fit1-3 on the body by the window's width (under
   1240, 1080 and 1000px), and a step further while the white bar still
   does not fit (Networking+'s "September 2026" beside its logo needs step
   1 up to about 1320px).
   1: Search and Dark become their icons, Read offline its arrow, and the
      site's address drops out (as the samples showed, 1 Oct) */
body.np-topnav.mh-fit1 .masthead .site-link { display:none; }
body.np-topnav.mh-fit1 .masthead .searchbtn span,
body.np-topnav.mh-fit1 .masthead .themetoggle .tt-label { display:none; }
body.np-topnav.mh-fit1 .masthead .v2offline { font-size:0; gap:0;
  padding:.42rem .6rem; }
body.np-topnav.mh-fit1 .masthead .v2offline .ob-icon { font-size:.8rem; }
body.np-topnav.mh-fit1 .masthead #burger,
body.np-topnav.mh-fit1 .masthead .navbtn,
body.np-topnav.mh-fit1 .masthead .themetoggle { padding-left:.6rem;
  padding-right:.6rem; }
/* 2: a smaller issue name */
body.np-topnav.mh-fit2 .masthead .issue-label { font-size:.9rem;
  letter-spacing:.1em; padding-left:.7rem; }
/* 3: the controls closer together */
body.np-topnav.mh-fit3 .masthead #burger,
body.np-topnav.mh-fit3 .masthead .navbtn,
body.np-topnav.mh-fit3 .masthead .themetoggle { padding-left:.36rem;
  padding-right:.36rem; }
body.np-topnav.mh-fit3 .masthead .navhome { margin-left:.3rem; }
body.np-topnav.mh-fit3 .masthead .issue-label { letter-spacing:.06em; }
@media print {
  body.np-topnav.np-v2::after, body.np-topnav.np-v2-article::after { display:none; }
}

/* ==========================================================================
   How to read the edition (2 Oct): a hint shown once (app.js armHint), and
   the panel a reader opens from the Contents menu or the About page
   ========================================================================== */
/* a wide window: a label just above the right-hand arrow, pointing at it */
.hh-tip { position:fixed; right:10px; bottom:calc(50% + 56px); z-index:62;
  display:flex; align-items:flex-start; gap:.9rem; max-width:300px;
  background:rgba(20,20,22,.86); color:#fff; border-radius:8px;
  padding:.85rem 1rem .85rem 1.15rem; font:500 .86rem/1.35 Poppins,sans-serif;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; transform:translateY(6px); transition:opacity .25s, transform .25s; }
.hh-tip.in { opacity:1; transform:none; }
.hh-tip::after { content:""; position:absolute; right:16px; bottom:-7px;
  width:14px; height:14px; transform:rotate(45deg);
  background:rgba(20,20,22,.86); }
.hh-tip .hh-msg { cursor:pointer; }
.hh-tip b { display:block; font-weight:700; font-size:.92rem; }
.hh-tip .hh-sub { display:block; color:rgba(255,255,255,.78); font-size:.78rem;
  margin-top:.15rem; }
.hh-tip .hh-kbd { border-color:rgba(255,255,255,.55); color:#fff; }
.hh-x { background:none; border:0; color:rgba(255,255,255,.6); font-size:1.15rem;
  line-height:1; cursor:pointer; padding:0 0 0 .1rem; }
.hh-x:hover { color:#fff; }
.v2next.hh-glow, .v2artarrow.v2next.hh-glow { background:var(--red);
  box-shadow:0 0 0 4px rgba(var(--red-rgb),.35); }
/* a phone: a note above the bottom bar */
.hh-toast { position:fixed; left:12px; right:12px; z-index:62;
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);
  display:flex; align-items:center; gap:.8rem;
  background:rgba(20,20,22,.92); color:#fff; border-radius:10px;
  padding:.7rem .85rem; font:500 .82rem/1.35 Poppins,sans-serif;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  opacity:0; transform:translateY(8px); transition:opacity .25s, transform .25s; }
.hh-toast.in { opacity:1; transform:none; }
.hh-toast .hh-hand { flex:0 0 auto; width:36px; height:36px; }
.hh-toast .hh-ok { margin-left:auto; flex:0 0 auto; white-space:nowrap;
  background:none; border:0; color:var(--accent); cursor:pointer;
  font:700 .74rem Poppins,sans-serif; letter-spacing:.08em;
  text-transform:uppercase; padding:.45rem .1rem .45rem .5rem; }
@media (prefers-reduced-motion: reduce) {
  .hh-tip, .hh-toast { transition:none; transform:none; }
}
/* a key, as printed on the keyboard */
.hh-kbd { display:inline-block; min-width:1.45rem; text-align:center;
  border:1px solid var(--muted); border-bottom-width:2px; border-radius:4px;
  padding:0 .3rem; margin:0 .05rem; font:600 .7rem/1.3rem Poppins,sans-serif;
  color:var(--ink); vertical-align:baseline; }

/* the ways in: the foot of the Contents menu, and the About page */
.hh-menulink, .hh-aboutlink a { display:inline-flex; align-items:center;
  gap:.55rem; color:var(--red); font:600 .82rem Poppins,sans-serif;
  text-decoration:none; }
.hh-menulink { display:flex; margin:1.1rem 0 .2rem; padding-top:.9rem;
  border-top:1px solid var(--line); }
.hh-menulink:hover, .hh-aboutlink a:hover { text-decoration:underline; }
[data-theme="dark"] .hh-menulink, [data-theme="dark"] .hh-aboutlink a {
  color:var(--accent); }
.hh-q { width:22px; height:22px; border-radius:50%; display:inline-grid;
  place-items:center; border:1.5px solid currentColor; font-weight:700;
  font-size:.72rem; flex:0 0 auto; }
.hh-aboutlink { margin:1.6rem 0 0; }
/* the reader-count note under it (10 Oct 2026): kept small, as asked */
.np-count { margin:.7rem 0 0; font:400 .7rem/1.5 Poppins,sans-serif;
  color:#6f6a63; max-width:60em; }
[data-theme="dark"] .np-count { color:var(--muted); }
.np-count a { color:inherit; text-decoration:underline;
  text-underline-offset:2px; }
.np-count a:hover { color:var(--ink); }
@media print { .np-count { display:none; } }

/* the panel: centred on a wide window, a sheet from the foot on a phone */
.hh-back { position:fixed; inset:0; z-index:150; background:rgba(10,9,8,.55);
  display:flex; align-items:center; justify-content:center; padding:1rem; }
.hh-panel { position:relative; background:var(--bg); color:var(--text);
  width:min(620px,100%); max-height:calc(100vh - 2rem); overflow:auto;
  border-radius:10px; border-top:5px solid var(--red);
  box-shadow:0 20px 60px rgba(0,0,0,.4); padding:1.6rem 1.8rem 1.4rem; }
.hh-panel:focus { outline:none; }
.hh-panel h2 { font-family:"Barlow Condensed",Poppins,sans-serif; font-weight:700;
  font-size:2rem; line-height:1; color:var(--ink); margin:0 2rem .35rem 0; }
.hh-lede { font-size:.86rem; color:var(--muted); margin:0 0 1.1rem; }
.hh-close { position:absolute; right:.9rem; top:.8rem; background:none;
  border:0; font-size:1.5rem; line-height:1; color:var(--muted);
  cursor:pointer; padding:.2rem; }
.hh-close:hover { color:var(--ink); }
.hh-rows { list-style:none; margin:0; padding:0; }
.hh-rows li { display:grid; grid-template-columns:40px 1fr; gap:.85rem;
  align-items:start; padding:.62rem 0; border-top:1px solid var(--line-soft); }
.hh-rows li:first-child { border-top:0; }
.hh-ic { width:40px; height:40px; border-radius:50%; display:grid;
  place-items:center; background:rgba(var(--red-rgb),.1); color:var(--red);
  font-size:1.05rem; font-weight:700; }
[data-theme="dark"] .hh-ic { color:var(--accent); background:rgba(255,255,255,.08); }
.hh-ic svg { width:19px; height:19px; }
.hh-rows b { display:block; font:700 .9rem/1.3 Poppins,sans-serif; color:var(--ink); }
.hh-rows .hh-d b { display:inline; font:inherit; font-weight:700; }
.hh-d { display:block; font-size:.84rem; line-height:1.5; margin-top:.1rem; }
.hh-done { display:block; margin:1.1rem 0 0 auto; background:var(--red);
  color:#fff; border:0; border-radius:4px; padding:.65rem 1.4rem; cursor:pointer;
  font:700 .74rem Poppins,sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.hh-done:hover { background:var(--red-deep); }
@media (max-width:899px) {
  .hh-back { align-items:flex-end; padding:0; }
  .hh-panel { border-radius:14px 14px 0 0; max-height:90vh;
    padding:1.15rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom)); }
  .hh-panel h2 { font-size:1.6rem; }
  .hh-lede { margin-bottom:.6rem; font-size:.82rem; }
  .hh-rows li { grid-template-columns:34px 1fr; gap:.75rem; padding:.48rem 0; }
  .hh-ic { width:34px; height:34px; font-size:.95rem; }
  .hh-ic svg { width:17px; height:17px; }
  .hh-d { font-size:.8rem; line-height:1.42; }
  .hh-done { margin-top:.7rem; width:100%; }
}
@media print { .hh-tip, .hh-toast, .hh-back, .hh-menulink, .hh-aboutlink { display:none; } }
/* ==========================================================================
   Keeping the edition (14 Oct 2026, app.js openKeep): Add to Home Screen
   beside Read offline on the phone contents, the steps sheet, the link at
   the foot of the Contents menu, and the one-off nudge. Hidden in the app.
   ========================================================================== */
.keeprow { display:grid; grid-template-columns:1fr 1fr; gap:.6rem;
  margin:.9rem 0 .2rem; }
.keeprow .offlinebtn { margin:0; padding:.8rem .55rem; text-align:center;
  line-height:1.15; }
.keeprow .ob-icon { display:flex; align-items:center; justify-content:center;
  height:1.3rem; }
.keepbtn .ob-icon svg { width:19px; height:19px; }
/* in the narrow column down the left (?v1 on a wide window): stacked */
@media (min-width:1080px) { .railcover .keeprow { grid-template-columns:1fr; } }
.np-app .keepbtn, .np-app .hh-keeplink, .np-app .hh-keep { display:none; }
.hh-keeplink { border-top:0; margin-top:.1rem; padding-top:.35rem; }
.hh-plus svg { width:12px; height:12px; }
/* the sheet */
.hh-keepsheet { width:min(540px,100%); }
.hh-steps .hh-ic { font:700 .95rem Poppins,sans-serif; }
.hh-inl { width:1.05em; height:1.05em; vertical-align:-.17em; }
.hh-d a { color:var(--red); font-weight:600; }
[data-theme="dark"] .hh-d a { color:var(--accent); }
.hh-install { display:flex; align-items:center; justify-content:center;
  gap:.5rem; margin:.6rem 0 .1rem; background:var(--red); color:#fff; border:0;
  border-radius:4px; padding:.6rem 1.1rem; cursor:pointer;
  font:700 .74rem Poppins,sans-serif; letter-spacing:.08em;
  text-transform:uppercase; }
.hh-install:hover { background:var(--red-deep); }
.hh-install svg { width:18px; height:18px; }
.hh-install.hh-copy { background:none; color:var(--red);
  border:1.5px solid currentColor; }
[data-theme="dark"] .hh-install.hh-copy { color:var(--accent); }
.hh-install.hh-big { width:100%; padding:.9rem 1rem; font-size:.82rem;
  margin:.3rem 0 .4rem; }
.hh-note { font-size:.78rem; line-height:1.5; color:var(--muted);
  margin:.8rem 0 0; padding-top:.7rem; border-top:1px solid var(--line-soft); }
.hh-note b { color:var(--ink); }
/* the nudge: a note above the bottom bar on a phone, a label under the
   header at the right on a wide window */
.hh-keep .hh-acts { display:flex; gap:.35rem; justify-content:flex-end;
  flex:1 0 100%; }
.hh-keep .hh-go, .hh-keep .hh-not { border:0; cursor:pointer; border-radius:4px;
  font:700 .72rem Poppins,sans-serif; letter-spacing:.08em;
  text-transform:uppercase; padding:.5rem .8rem; }
.hh-keep .hh-go { background:var(--red); color:#fff; }
.hh-keep .hh-go:hover { background:var(--red-deep); }
.hh-keep .hh-not { background:none; color:rgba(255,255,255,.78); }
.hh-keep .hh-not:hover { color:#fff; }
.hh-keep b { display:block; font-weight:700; font-size:.9rem; }
.hh-keep .hh-sub { display:block; color:rgba(255,255,255,.78); font-size:.78rem;
  margin-top:.12rem; }
.hh-keep .hh-kbd { border-color:rgba(255,255,255,.55); color:#fff; }
.hh-toast.hh-keep { flex-wrap:wrap; row-gap:.45rem; align-items:center; }
.hh-toast.hh-keep .hh-msg { flex:1 1 0; min-width:0; }
.hh-kic { flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.12); }
.hh-kic svg { width:20px; height:20px; }
.hh-tip.hh-keep { bottom:auto; right:16px; flex-wrap:wrap; max-width:320px;
  row-gap:.6rem; }
.hh-tip.hh-keep::after { bottom:auto; top:-7px; right:26px; }
.hh-tip.hh-keep .hh-msg { cursor:default; }
@media print { .keeprow .keepbtn, .hh-keep, .hh-keeplink { display:none; } }
/* How to read in the white bar (2 Oct): after About on a wide window; on a
   narrower one (fitHead's first step) just the question mark */
.howtobtn { display:none; }
body.np-topnav .masthead .howtobtn { display:inline-flex; align-items:center;
  gap:.45rem; }
body.np-topnav .masthead .howtobtn .hh-q { width:18px; height:18px;
  font-size:.64rem; border-width:1.5px; }
body.np-topnav.mh-fit1 .masthead .howtobtn .ht-label { display:none; }