/* ============================================================
   China Research Center — "Vermilion Seal"
   Scholarly editorial system for a 24-year journal + research centre.
   Palette: seal red #e1251b (accent, never large fields)
            scholar blue #416ba9 (structure, links, journal identity)
   Type:    Archivo throughout, tight display weights over airy body copy.
   ============================================================ */

:root{
  --red:#e1251b;      --red-dk:#b31c14;   --red-wash:#fdf1f0;
  --blue:#416ba9;     --blue-dk:#2d4d7d;  --blue-wash:#f2f5fa;
  --ink:#1a1d21;      --body:#41474e;     --muted:#6a7078;
  /* --muted was #767d85 at 4.16:1 on white, which fails WCAG AA for the 12px to
     15px text it is used for (breadcrumbs, bylines, stat labels). #6a7078 clears
     4.5:1 on white and on all three tinted backgrounds. */
  --line:#e3e5e8;     --line-2:#f0f1f3;
  --paper:#ffffff;    --alt:#f7f8f9;      --deep:#181818;   --deeper:#111213;
  --wrap:1220px;      --narrow:760px;
  --shadow:0 1px 3px rgba(20,25,35,.06),0 8px 24px rgba(20,25,35,.05);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--body);background:var(--paper);line-height:1.7;font-size:17px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
/* A lot of the older posts paste bare source URLs into the body text. Left
   alone these are single unbreakable words and push the whole page sideways
   on a phone, so everything that carries prose is allowed to break them. */
p,h1,h2,h3,h4,h5,li,td,th,figcaption,.byline,.when,.t,.d{overflow-wrap:break-word}
.prose a,.row p,.evrow p,.card p{overflow-wrap:anywhere}
h1,h2,h3,h4,h5{font-family:'Archivo',sans-serif;color:var(--ink);line-height:1.18;font-weight:700;letter-spacing:-.018em}
a{color:var(--blue-dk);text-decoration:none}
a:hover{color:var(--red)}
hr{border:0;border-top:1px solid var(--line);margin:34px 0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.narrow{max-width:var(--narrow);margin:0 auto}
.sec{padding:66px 0}
.sec.tight{padding:44px 0}
.sec.alt{background:var(--alt);border-block:1px solid var(--line)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- eyebrow / section headings ---------- */
.eyebrow{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;
  color:var(--red);display:flex;align-items:center;gap:11px;margin-bottom:13px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
.eyebrow.plain::after{display:none}
.eyebrow.blue{color:var(--blue)}
.sech{font-size:clamp(26px,3.1vw,35px);margin-bottom:10px}
.sech + .lede{color:var(--muted);font-size:18px;max-width:62ch;margin-bottom:30px}
.lede{font-size:19px;line-height:1.65}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;background:var(--red);color:#fff;
  font-weight:600;font-size:15px;letter-spacing:.01em;padding:13px 26px;border-radius:2px;
  border:1px solid var(--red);transition:background .18s,border-color .18s,color .18s;cursor:pointer;
  font-family:inherit;line-height:1.2;
}
.btn:hover{background:var(--red-dk);border-color:var(--red-dk);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.blue{background:var(--blue);border-color:var(--blue)}
.btn.blue:hover{background:var(--blue-dk);border-color:var(--blue-dk)}
.btn.sm{padding:9px 18px;font-size:14px}
.btn.onDark{background:var(--red);border-color:var(--red);color:#fff}
.btn.onDark.ghost{background:transparent;border-color:rgba(255,255,255,.32);color:#fff}
.btn.onDark.ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}
.more{
  display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink);
  border-bottom:2px solid var(--red);padding-bottom:2px;transition:color .18s;
}
.more:hover{color:var(--red)}

/* ============================================================
   HEADER
   ============================================================ */
.topbar{background:var(--deep);color:#b9bec5;font-size:13px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:38px;padding-block:6px}
.topbar a{color:#d6dade}
.topbar a:hover{color:#fff}
.topbar .tlinks{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.topbar .tsoc{display:flex;gap:13px;align-items:center}
.topbar .tsoc svg{width:15px;height:15px;fill:#b9bec5;transition:fill .18s}
.topbar .tsoc a:hover svg{fill:#fff}

header.site{position:sticky;top:0;z-index:120;background:#fff;border-bottom:1px solid var(--line)}
header.site .bar{display:flex;align-items:center;gap:28px;min-height:82px}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{height:46px;width:auto}
nav.main{margin-left:auto;display:flex;align-items:center;gap:2px}
nav.main > a,nav.main .drop > a{
  display:block;padding:11px 14px;font-size:15px;font-weight:600;color:var(--ink);
  border-radius:2px;transition:color .18s,background .18s;white-space:nowrap;
}
nav.main > a:hover,nav.main .drop:hover > a,nav.main a.on{color:var(--red)}
nav.main a.on{box-shadow:inset 0 -2px 0 var(--red)}
.drop{position:relative}
.drop > a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;vertical-align:2px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg)}
.drop .menu{
  position:absolute;top:100%;left:0;min-width:232px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow);padding:7px;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s,transform .16s,visibility .16s;
}
.drop:hover .menu,.drop:focus-within .menu{opacity:1;visibility:visible;transform:translateY(0)}
.drop .menu a{display:block;padding:9px 13px;font-size:14.5px;font-weight:500;color:var(--body);border-radius:2px}
.drop .menu a:hover{background:var(--red-wash);color:var(--red-dk)}
.hact{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.iconbtn{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);
  background:#fff;border-radius:2px;cursor:pointer;transition:.18s}
.iconbtn:hover{border-color:var(--red);background:var(--red-wash)}
.iconbtn svg{width:17px;height:17px;fill:var(--ink)}
.menu-btn{display:none}

/* mobile nav */
#mnav{display:none;border-top:1px solid var(--line);background:#fff;padding:10px 0 18px}

/* #mnav sits inside header.site, which is position:sticky. A sticky ancestor pins
   the menu to the viewport, so the 21 links (about 975px tall) overflow past the
   bottom of a 844px screen with no way to reach them: the page behind scrolls
   instead. Give the menu its own scroll area, sized to the space below the bar. */
#mnav.open{
  display:block;
  max-height:calc(100vh - 68px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
@supports (height:100dvh){
  /* dvh accounts for the mobile browser chrome that vh ignores */
  #mnav.open{max-height:calc(100dvh - 68px)}
}
#mnav a{display:block;padding:12px 4px;font-weight:600;font-size:16px;color:var(--ink);border-bottom:1px solid var(--line-2)}
#mnav .sub a{padding-left:20px;font-weight:500;font-size:15px;color:var(--body)}

/* ============================================================
   HERO / PAGE HEADS
   ============================================================ */
.phero{
  background:linear-gradient(102deg,rgba(24,30,40,.94) 0%,rgba(45,77,125,.90) 62%,rgba(65,107,169,.84) 100%),
             var(--phero-img,none) center/cover no-repeat, var(--blue-dk);
  color:#fff;padding:70px 0 66px;position:relative;
}
.phero h1{color:#fff;font-size:clamp(30px,4.4vw,50px);max-width:20ch}
.phero .eyebrow{color:#f6a8a2}
.phero .eyebrow::after{background:rgba(255,255,255,.25)}
.phero p{color:#d6dde8;font-size:18px;max-width:64ch;margin-top:16px}
.phero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

.crumbs{font-size:13px;color:var(--muted);padding:15px 0;border-bottom:1px solid var(--line-2)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--red)}
.crumbs span{margin:0 8px;opacity:.5}

/* home hero — cross-fading photo stack behind the copy */
.hero{
  position:relative;color:#fff;min-height:min(60vh,470px);display:flex;align-items:center;
  background:var(--deep);padding:64px 0;overflow:hidden;
}
.heroslides{position:absolute;inset:0;z-index:0}
.hslide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.4s ease-in-out;
}
.hslide.on{opacity:1}
.hero .wrap{position:relative;z-index:2}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,rgba(15,18,24,.93) 0%,rgba(18,28,45,.86) 52%,rgba(40,68,112,.62) 100%);
}
/* the copy runs wider than the old 17ch measure so the hero is shorter */
.herocopy{max-width:74ch}
.hero h1{color:#fff;font-size:clamp(31px,4.3vw,50px);max-width:26ch;letter-spacing:-.028em}
.hero p{color:#dbe1ea;font-size:18px;max-width:70ch;margin-top:16px}
.hero .cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}
.hero .eyebrow{color:#f6a8a2}
.hero .eyebrow::after{background:rgba(255,255,255,.22)}
.herodots{position:absolute;right:0;bottom:-34px;display:flex;gap:8px;z-index:3}
.herodots button{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.6);background:transparent;transition:.2s}
.herodots button.on{background:var(--red);border-color:var(--red)}

/* stat strip — one divider between cells, and the label tucked to the number */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:var(--alt)}
/* > matters: .n and .l are divs too, and an unscoped ".stats div" gave them the
   cell padding (hence a huge gap under each number) and a second divider. */
.stats > div{padding:26px 22px;text-align:center;position:relative}
.stats > div + div::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:56px;background:var(--line)}
.stats .n{font-family:'Archivo',sans-serif;font-size:38px;font-weight:700;color:var(--red);
  line-height:1;letter-spacing:-.03em}
.stats .l{font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);
  margin-top:6px;font-weight:600}

/* ---------- China Currents identity ---------- */
.journalband{background:var(--alt);border-bottom:1px solid var(--line);
  border-top:3px solid var(--red)}
.jmast{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:22px;align-items:center;
  padding-bottom:24px;border-bottom:1px solid var(--line)}
.jmark img{width:64px;height:64px;object-fit:contain}
.jtitle{font-size:clamp(28px,3.4vw,38px);letter-spacing:-.028em;margin:2px 0 4px}
.jsub{color:var(--muted);font-size:15.5px;max-width:66ch}
.jissue{text-align:right;border-left:1px solid var(--line);padding-left:24px}
.jlabel{display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;color:var(--red)}
.jvol{display:block;font-size:19px;font-weight:700;color:var(--ink);margin-top:5px;white-space:nowrap}
.jyear{display:block;font-size:14px;color:var(--muted)}
.jlist{list-style:none;margin-top:32px;border-top:1px solid var(--line)}
.jlist li{display:flex;gap:20px;align-items:baseline;justify-content:space-between;
  padding:13px 0;border-bottom:1px solid var(--line)}
.jlist li a{font-size:17px;font-weight:600;color:var(--ink);line-height:1.35}
.jlist li a:hover{color:var(--red)}
.jl-by{font-size:14px;color:var(--muted);white-space:nowrap;flex:0 0 auto}

/* ---------- Memoir Series identity ---------- */
.memoirband,.memoirhead{background:var(--deep);color:#fff;padding:58px 0}
.memoirhead{padding:52px 0 58px}

.memoir-id{display:inline-flex;align-items:center;gap:13px;
  border:1px solid rgba(255,255,255,.2);border-left:3px solid var(--red);padding:10px 20px 10px 16px}
.mm-icon svg{width:30px;height:23px;color:var(--red);display:block}
.mm-label{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:#fff}
.memoirband .sech,.memoirhead .sech{color:#fff}

/* sticky in-page section nav, used on the combined Memoir Series page */
.pagenav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:82px;z-index:60}
.pagenav .wrap{display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.pagenav a{padding:15px 16px;font-size:14.5px;font-weight:600;color:var(--body);
  white-space:nowrap;border-bottom:2px solid transparent;transition:.16s}
.pagenav a:hover{color:var(--red);border-bottom-color:var(--red)}
.memoirhead + .pagenav + .sec{padding-top:56px}
section[id]{scroll-margin-top:140px}

/* ---------- article hero + author strip ---------- */
.arthero,.evhero{margin:26px 0 0}
.arthero img,.evhero img{width:100%;max-height:460px;object-fit:cover;border:1px solid var(--line)}
.authorstrip{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:16px;align-items:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin-bottom:30px}
.ac-pic img,.ac-blank{width:60px;height:60px;border-radius:50%;object-fit:cover;display:grid;
  place-items:center;background:var(--blue-wash);color:var(--blue);font-weight:700;font-size:18px}
.ac-name{font-size:16px;font-weight:600;color:var(--ink)}
.ac-name a{color:var(--ink)}
.ac-name a:hover{color:var(--red)}
.ac-role{font-size:14px;color:var(--muted);margin-top:2px;line-height:1.4}
.ac-link{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--red);white-space:nowrap}

/* circle thumbnails in the "also in this issue" rail */
.siblist{list-style:none}
.siblist .sib{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start;
  padding:12px 0;border-bottom:1px solid var(--line-2)}
.sthumb img,.sblank{width:52px;height:52px;border-radius:50%;object-fit:cover;display:block;
  background:var(--blue-wash)}
.siblist .sib a{font-size:14.5px;line-height:1.35}

/* thumbnails on list rows */
.row.has-thumb{grid-template-columns:110px minmax(0,1fr) 132px}
.rthumb img{width:132px;height:88px;object-fit:cover;border:1px solid var(--line)}
.evrow.has-thumb{grid-template-columns:82px minmax(0,1fr) 132px}
.evthumb img{width:132px;height:88px;object-fit:cover;border:1px solid var(--line)}

/* ---------- news layouts ---------- */
.nlead{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:44px;align-items:center}
.nlead-img img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line)}
.nlead h2{font-size:clamp(24px,2.9vw,33px);margin:8px 0 12px}
.nlead h2 a{color:var(--ink)}
.nlead h2 a:hover{color:var(--red)}
.nlead p{color:var(--muted)}
.ntiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:46px;
  padding-top:36px;border-top:1px solid var(--line)}
.ntile{display:flex;flex-direction:column}
.nt-img img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line);margin-bottom:14px}
.ntile h3{font-size:18px;line-height:1.32;margin-bottom:7px}
.ntile h3 a{color:var(--ink)}
.ntile h3 a:hover{color:var(--red)}
.ntile p{font-size:14.5px;color:var(--muted)}
.nmosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px}
.nmini{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line)}
.nmini.has-thumb{grid-template-columns:84px minmax(0,1fr)}
.nm-img img{width:84px;height:64px;object-fit:cover;border:1px solid var(--line)}
.nmini .nm-date{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);margin-bottom:4px}
.nmini h3{font-size:16px;line-height:1.34}
.nmini h3 a{color:var(--ink)}
.nmini h3 a:hover{color:var(--red)}

/* ============================================================
   CARDS
   ============================================================ */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .18s,box-shadow .18s;min-width:0}
.card:hover{border-color:#cfd4da;box-shadow:var(--shadow)}
.card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--blue-wash);flex:0 0 auto}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .thumb img{transform:scale(1.035)}
.card .body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:19px;line-height:1.3;margin-bottom:9px}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--red)}
.card p{font-size:15px;color:var(--muted);line-height:1.62}
.card .foot{margin-top:auto;padding-top:15px}

.kicker{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:var(--red);margin-bottom:9px}
.kicker.blue{color:var(--blue)}
.byline{font-size:13.5px;color:var(--muted);margin-top:10px}
.byline b{color:var(--body);font-weight:600}

.tagrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.tag{
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  padding:4px 10px;background:var(--blue-wash);color:var(--blue-dk);border-radius:2px;
}
a.tag:hover{background:var(--blue);color:#fff}
.tag.red{background:var(--red-wash);color:var(--red-dk)}
a.tag.red:hover{background:var(--red);color:#fff}

/* list-style rows (archives, search results) */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:26px;padding:22px 0;border-bottom:1px solid var(--line)}
.row .date{font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.03em;padding-top:3px}
.row h3{font-size:19px;line-height:1.32;margin-bottom:6px}
.row h3 a{color:var(--ink)}
.row h3 a:hover{color:var(--red)}
.row p{font-size:15px;color:var(--muted)}
.row.hide{display:none}

/* editor's note: a full-width band at the head of an issue. It never has a
   featured image, so it is given typography instead of art. */
.ednote{background:var(--alt);border-block:1px solid var(--line);
  border-left:4px solid var(--red);padding:38px 0}
.ednote-in{display:grid;grid-template-columns:210px minmax(0,1fr);gap:40px;align-items:start}
.ednote-lab{display:flex;flex-direction:column;gap:6px;padding-top:4px}
.ednote-lab .eyebrow{margin-bottom:0}
.ednote-by{font-size:15px;font-weight:600;color:var(--ink)}
.ednote-body h2{font-size:clamp(22px,2.5vw,29px);line-height:1.22;margin-bottom:12px}
.ednote-body h2 a{color:var(--ink)}
.ednote-body h2 a:hover{color:var(--red)}
.ednote-body p{color:var(--body);font-size:16.5px;max-width:78ch}

/* feature (lead article) */
.feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px;align-items:center}
.feature .fimg{aspect-ratio:16/11;overflow:hidden;background:var(--blue-wash)}
.feature .fimg img{width:100%;height:100%;object-fit:cover}
.feature h2{font-size:clamp(25px,3vw,34px);margin-bottom:12px}
.feature h2 a{color:var(--ink)}
.feature h2 a:hover{color:var(--red)}

/* ============================================================
   ARTICLE / PROSE
   ============================================================ */
.artwrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:60px;align-items:start;padding:52px 0 72px}
.arthead{padding:44px 0 8px;border-bottom:1px solid var(--line-2)}
.arthead h1{font-size:clamp(29px,3.8vw,43px);max-width:26ch;margin-bottom:16px}
.artmeta{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;font-size:14px;color:var(--muted);padding-bottom:26px}
.artmeta .au{font-weight:600;color:var(--ink)}
.artmeta .sep{opacity:.4}

/* break-word on the container too: some posts leave bare text inside a plain
   <div>, which no p/li rule would reach. */
.prose{font-size:18px;line-height:1.78;color:var(--body);max-width:74ch;overflow-wrap:break-word}
.prose > * + *{margin-top:20px}
.prose h2{font-size:26px;margin-top:44px;margin-bottom:-2px}
.prose h3{font-size:21px;margin-top:34px;margin-bottom:-4px}
.prose h4{font-size:18px;margin-top:28px;color:var(--blue-dk)}
.prose a{color:var(--blue-dk);border-bottom:1px solid rgba(65,107,169,.35);transition:.18s}
.prose a:hover{color:var(--red);border-bottom-color:var(--red)}
.prose ul,.prose ol{padding-left:24px}
.prose li + li{margin-top:8px}
.prose blockquote{
  border-left:3px solid var(--red);padding:4px 0 4px 24px;margin:30px 0;
  font-size:19px;line-height:1.65;color:var(--ink);font-style:italic;
}
.prose blockquote p + p{margin-top:14px}
.prose img{margin:30px auto;border:1px solid var(--line)}
.prose figure{margin:30px 0}
.prose figcaption,.prose .wp-caption-text{font-size:13.5px;color:var(--muted);margin-top:9px;line-height:1.5;font-style:italic}
.prose .tablewrap{overflow-x:auto;margin:28px 0;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:2px}
.prose .tablewrap table{margin:0;border:0;min-width:100%;width:auto}
.prose .tablewrap th:first-child,.prose .tablewrap td:first-child{border-left:0}
.prose .tablewrap th:last-child,.prose .tablewrap td:last-child{border-right:0}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin:28px 0}
.prose th,.prose td{border:1px solid var(--line);padding:10px 13px;text-align:left;vertical-align:top}
.prose th{background:var(--alt);font-weight:700;color:var(--ink)}
.prose hr{margin:38px 0}
.prose sup{font-size:.72em;line-height:0}
/* ---------- footnotes (from the WordPress [N. ...] shortcodes) ---------- */
.prose sup.fnref{font-size:.68em;line-height:0;vertical-align:super;margin-left:1px}
.prose sup.fnref a{
  color:var(--red);font-weight:700;border-bottom:0;padding:0 2px;
  text-decoration:none;scroll-margin-top:110px;
}
.prose sup.fnref a:hover{color:var(--red-dk);text-decoration:underline}
.prose sup.fnref:target a,.prose sup.fnref a:focus-visible{background:var(--red-wash);outline:2px solid var(--red);outline-offset:1px}

.footnotes{margin-top:52px;padding-top:26px;border-top:2px solid var(--line)}
.footnotes h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--red);margin:0 0 18px}
.footnotes ol{padding-left:26px;margin:0}
.footnotes li{
  font-size:14.5px;line-height:1.62;color:var(--muted);
  padding:7px 0 7px 4px;scroll-margin-top:110px;overflow-wrap:anywhere;
}
.footnotes li::marker{color:var(--red);font-weight:600}
.footnotes li:target{background:var(--red-wash);border-radius:2px;
  box-shadow:-8px 0 0 var(--red-wash),8px 0 0 var(--red-wash)}
.footnotes li a{color:var(--blue-dk);border-bottom:1px solid rgba(65,107,169,.3)}
.footnotes li a:hover{color:var(--red);border-bottom-color:var(--red)}
.footnotes a.fnback{border-bottom:0;color:var(--red);font-size:15px;
  text-decoration:none;margin-left:3px}
.footnotes a.fnback:hover{color:var(--red-dk)}
@media(max-width:640px){
  .footnotes{margin-top:40px}
  .footnotes ol{padding-left:20px}
  .footnotes li{font-size:14px}
}

/* endnotes / footnote blocks arrive from WordPress as small trailing paragraphs */
.prose .notes,.prose .footnotes{font-size:14.5px;line-height:1.6;color:var(--muted);
  border-top:1px solid var(--line);padding-top:20px;margin-top:40px}
.prose .alignleft{float:left;margin:6px 28px 18px 0}
.prose .alignright{float:right;margin:6px 0 18px 28px}
.prose .aligncenter{margin-inline:auto}
.prose iframe{max-width:100%;margin:28px 0}

/* article sidebar */
.aside{position:sticky;top:104px;font-size:15px}
.aside .blk + .blk{margin-top:34px}
.aside h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--red);
  margin-bottom:14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.aside ul{list-style:none}
.aside li{padding:9px 0;border-bottom:1px solid var(--line-2);line-height:1.45}
.aside li a{color:var(--ink);font-weight:500;font-size:15px}
.aside li a:hover{color:var(--red)}
.aside .sm{font-size:13px;color:var(--muted);display:block;margin-top:3px}

.authorbox{display:grid;grid-template-columns:88px minmax(0,1fr);gap:22px;align-items:start;
  background:var(--alt);border:1px solid var(--line);padding:26px;margin-top:48px}
.authorbox img{width:88px;height:88px;object-fit:cover;border-radius:50%}
.authorbox h4{font-size:18px;color:var(--ink);margin-bottom:6px}
.authorbox p{font-size:15px;color:var(--muted);line-height:1.6}

.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}
.prevnext a{display:block;padding:18px 20px;border:1px solid var(--line);transition:.18s}
.prevnext a:hover{border-color:var(--red);background:var(--red-wash)}
.prevnext .l{font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700;margin-bottom:6px}
.prevnext .t{font-size:16px;font-weight:600;color:var(--ink);line-height:1.35}
.prevnext .nx{text-align:right}

/* ============================================================
   FILTER BAR (archive, topics, calendar)
   ============================================================ */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.chip{
  font-size:13.5px;font-weight:600;padding:7px 15px;border:1px solid var(--line);background:#fff;
  color:var(--body);border-radius:2px;cursor:pointer;font-family:inherit;transition:.16s;white-space:nowrap;
}
.chip:hover{border-color:var(--red);color:var(--red)}
.chip.on{background:var(--red);border-color:var(--red);color:#fff}
.fsearch{flex:1 1 210px;min-width:180px;padding:9px 14px;border:1px solid var(--line);
  font-family:inherit;font-size:15px;color:var(--ink);border-radius:2px;background:#fff}
.fsearch:focus{outline:none;border-color:var(--blue)}
.fcount{font-size:14px;color:var(--muted);padding:16px 0;font-weight:500}
select.fsel{padding:9px 32px 9px 13px;border:1px solid var(--line);font-family:inherit;font-size:14.5px;
  color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23767d85' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center/11px;
  border-radius:2px;appearance:none;cursor:pointer}
select.fsel:focus{outline:none;border-color:var(--blue)}

/* issue / volume listing — each card carries the issue's lead artwork */
.issuegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:18px}
.issue{border:1px solid var(--line);background:#fff;transition:.18s;display:flex;
  flex-direction:column;overflow:hidden}
.issue:hover{border-color:var(--red)}
.issue .icover{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--blue-wash)}
.issue .icover img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.issue:hover .icover img{transform:scale(1.04)}
.issue .icover-blank{background:linear-gradient(135deg,var(--blue-wash),var(--red-wash))}
.issue .ibody{padding:16px 20px 18px;display:block}
.issue:hover .ibody{background:var(--red-wash)}
.issue .v{display:block;font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--red)}
.issue .y{display:block;font-size:24px;font-weight:700;color:var(--ink);line-height:1.1;margin-top:4px;letter-spacing:-.02em}
.issue .c{display:block;font-size:13.5px;color:var(--muted);margin-top:5px}

/* event rows */
.evrow{display:grid;grid-template-columns:82px minmax(0,1fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.evrow.hide{display:none}
.evdate{background:var(--red-wash);border:1px solid rgba(225,37,27,.2);text-align:center;padding:11px 6px}
.evdate .m{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--red)}
.evdate .d{font-size:26px;font-weight:700;color:var(--ink);line-height:1.1}
.evdate .yy{font-size:12px;color:var(--muted);margin-top:1px}
.evrow h3{font-size:18.5px;line-height:1.32;margin-bottom:5px}
.evrow h3 a{color:var(--ink)}
.evrow h3 a:hover{color:var(--red)}
.evrow .when{font-size:13.5px;color:var(--muted);margin-bottom:7px}
.evrow p{font-size:15px;color:var(--muted)}

/* people / profiles */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:30px 26px}
.person{text-align:left}
.person img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--blue-wash);margin-bottom:14px}
.person h3{font-size:17px;margin-bottom:3px}
.person .role{font-size:13.5px;color:var(--muted);line-height:1.45}

.person .pph{display:block;margin-bottom:14px}
.person .pph img{transition:filter .25s}
.person:hover .pph img{filter:saturate(1.08)}
.person h3 a{color:var(--ink)}
.person h3 a:hover{color:var(--red)}
/* initials stand in when a profile has no photograph */
.ph-blank{width:100%;aspect-ratio:1/1;background:var(--blue-wash);color:var(--blue);
  display:grid;place-items:center;font-size:30px;font-weight:700;letter-spacing:.04em}

/* profile detail */
.profhead{display:grid;grid-template-columns:216px minmax(0,1fr);gap:44px;align-items:start}
.profpic img,.profpic .ph-blank{width:216px;height:216px;object-fit:cover;border:1px solid var(--line)}
.pmeta{list-style:none;margin-top:24px;border-top:1px solid var(--line)}
.pmeta li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line-2);font-size:15px}
.pmeta .k{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  color:var(--muted);padding-top:2px}
.pmeta .v{color:var(--body);overflow-wrap:anywhere}

/* the profile teaser injected at the top of a matching author page */
.profcard{display:grid;grid-template-columns:96px minmax(0,1fr);gap:22px;align-items:center;
  background:var(--alt);border:1px solid var(--line);padding:20px 24px;margin:22px 0 6px}
.profcard .pph img,.profcard .ph-blank{width:96px;height:96px;object-fit:cover;border-radius:50%;font-size:24px}
.profcard p{font-size:15px;color:var(--muted)}

/* books */
.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:34px 26px}
.book img{width:100%;aspect-ratio:2/3;object-fit:cover;background:var(--alt);border:1px solid var(--line);margin-bottom:13px}
.book h3{font-size:15.5px;line-height:1.32;margin-bottom:4px}
.book h3 a{color:var(--ink)}
.book h3 a:hover{color:var(--red)}
.book .au{font-size:13.5px;color:var(--muted)}
.book.hide{display:none}
.bookhead{display:grid;grid-template-columns:250px minmax(0,1fr);gap:48px;align-items:start}
.bookcover img{width:250px;border:1px solid var(--line);box-shadow:var(--shadow)}

/* memoir series volumes */
.memvols{display:grid;gap:34px;margin-top:26px}
.memvol{display:grid;grid-template-columns:190px minmax(0,1fr);gap:36px;align-items:start;
  border:1px solid var(--line);background:#fff;padding:28px 32px}
.mv-cover img{width:190px;border:1px solid var(--line);box-shadow:var(--shadow)}
.memvol h3{font-size:23px;line-height:1.24;margin:6px 0 8px}
.memvol h3 a{color:var(--ink)}
.memvol h3 a:hover{color:var(--red)}
.mv-by{font-size:15px;color:var(--muted);margin-bottom:14px}
.mv-desc{font-size:15.5px;line-height:1.68;color:var(--body)}
.mv-desc > * + *{margin-top:12px}
.mv-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

/* people grids: six across on a wide desktop so a section of six fills one row */
.people.six{grid-template-columns:repeat(6,minmax(0,1fr));gap:26px 20px}
.people.six .person h3{font-size:15.5px}
.people.six .role{font-size:12.5px}
/* editorial team reads as one tight block, not three airy sections */
.edgroup{margin-top:26px}
.edgroup + .edgroup{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.edgroup .people{margin-top:18px}
.edgroup .people.six{gap:22px 20px}

/* sponsor logo wall — all four sit on one row */
.logowall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:18px}
.logotile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;
  border:1px solid var(--line);background:#fff;padding:26px 20px 20px;min-height:196px;transition:.18s}
.logotile:hover{border-color:var(--red);box-shadow:var(--shadow)}
.logotile img{max-height:70px;width:auto;max-width:100%;object-fit:contain;margin-bottom:auto}
.lt-name{font-size:13.5px;font-weight:600;color:var(--body);text-align:center;line-height:1.35}
.logotile:hover .lt-name{color:var(--red)}
.lt-tier{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  color:var(--red);text-align:center}
.sponsorlogo img{max-height:120px;width:auto}

/* pagination */
.pager{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:44px 0 0}
.pager a,.pager span{min-width:40px;height:40px;display:grid;place-items:center;padding:0 12px;
  border:1px solid var(--line);font-size:15px;font-weight:600;color:var(--body);border-radius:2px}
.pager a:hover{border-color:var(--red);color:var(--red)}
.pager .cur{background:var(--red);border-color:var(--red);color:#fff}

/* callouts */
.callout{background:var(--blue-wash);border-left:3px solid var(--blue);padding:26px 30px;margin:34px 0}
.callout h3{font-size:19px;margin-bottom:8px}
.callout p{font-size:15.5px;color:var(--body)}
.note{background:var(--red-wash);border-left:3px solid var(--red);padding:22px 26px;font-size:15.5px}

/* accordion */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{padding:19px 40px 19px 0;font-weight:600;font-size:17px;color:var(--ink);
  cursor:pointer;list-style:none;position:relative}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";position:absolute;right:8px;top:26px;width:9px;height:9px;
  border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(45deg);transition:transform .2s}
.acc details[open] summary::after{transform:rotate(-135deg);top:30px}
.acc .ab{padding:0 0 22px;font-size:16px;color:var(--body);line-height:1.72}
.acc .ab > * + *{margin-top:14px}

/* forms */
form.f label{display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink);margin:18px 0 7px}
form.f input,form.f textarea,form.f select{
  width:100%;padding:12px 14px;border:1px solid var(--line);font-family:inherit;font-size:16px;
  color:var(--ink);background:#fff;border-radius:2px;
}
form.f input:focus,form.f textarea:focus{outline:none;border-color:var(--blue)}
form.f textarea{min-height:150px;resize:vertical}
form.f .hp{position:absolute;left:-9999px}
form.f .fstat{margin-top:14px;font-weight:600;font-size:15px}
form.f .fstat.ok{color:#1f7a44}
form.f .fstat.err{color:var(--red-dk)}
form.f .frow{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}

/* newsletter band — deliberately NOT the footer's near-black, so the signup
   reads as its own invitation rather than more footer */
.nlband{background:var(--blue-dk);color:#fff;padding:46px 0;
  border-top:3px solid var(--red)}
.nlband h2{color:#fff;font-size:clamp(23px,2.6vw,30px);margin-top:2px}
.nlband p{color:#cfdaea;margin-top:10px;font-size:16px;max-width:52ch}
.nlband .eyebrow{color:#f6a8a2;margin-bottom:8px}
/* the two columns are balanced and top-aligned, so neither leaves a well of
   empty blue underneath it */
.nlgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);
  gap:56px;align-items:start}
.nlformwrap{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  padding:24px 26px}
/* three short facts fill the left column instead of dead space */
.nlfacts{list-style:none;display:flex;gap:34px;margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.18);flex-wrap:wrap}
.nlfacts li{display:flex;flex-direction:column}
.nlfacts b{font-size:21px;font-weight:700;color:#fff;line-height:1.1}
.nlfacts span{font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;
  color:#a8bad4;margin-top:5px}
.nlnote a{color:#cfdaea;border-bottom:1px solid rgba(207,218,234,.5)}
.nlnote a:hover{color:#fff;border-bottom-color:#fff}
.nlform{display:flex;gap:9px;flex-wrap:wrap}
.nlform input{flex:1 1 220px;padding:13px 15px;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);color:#fff;font-family:inherit;font-size:15px;border-radius:2px}
.nlform input::placeholder{color:#a8bad4}
.nlform input:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.14)}
.nlnote{font-size:12.5px;color:#a8bad4;margin-top:11px}
/* which list(s) do you want.
   Selectors are qualified with form.f because the generic "form.f label" rule
   (uppercase, display:block) otherwise outranks a bare ".nlpick label" and
   stacks these as shouty block labels. */
form.f fieldset.nlpick{border:0;margin-bottom:16px;padding:0}
form.f fieldset.nlpick legend{font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:#cfdaea;margin-bottom:10px;padding:0}
/* the two options sit side by side, which halves the height of the form */
form.f fieldset.nlpick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
form.f fieldset.nlpick legend{grid-column:1/-1}
form.f fieldset.nlpick label{
  display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;
  cursor:pointer;padding:12px 13px;margin:0;text-transform:none;letter-spacing:0;
  color:#fff;font-weight:400;font-size:14.5px;
  border:1px solid rgba(255,255,255,.2);transition:.16s;
}
form.f fieldset.nlpick label:hover{border-color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.06)}
form.f fieldset.nlpick label:has(input:checked){border-color:var(--red);
  background:rgba(225,37,27,.12)}
form.f fieldset.nlpick input[type=checkbox]{
  width:18px;height:18px;margin:2px 0 0;padding:0;accent-color:var(--red);cursor:pointer}
form.f fieldset.nlpick span{font-size:13.5px;line-height:1.45;color:#a8bad4;
  text-transform:none;letter-spacing:0}
form.f fieldset.nlpick span b{display:block;color:#fff;font-weight:600;font-size:14.5px;
  text-transform:none;letter-spacing:0;margin-bottom:2px;line-height:1.25}

/* About page intro with a photograph alongside */
.abouthead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
.aboutpic img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line)}

/* news: one compact list with a thumbnail per row */
.nrows{margin-top:44px;padding-top:34px;border-top:1px solid var(--line)}
.nrow{display:grid;grid-template-columns:132px minmax(0,1fr);gap:24px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--line)}
.nl-img img{width:132px;height:88px;object-fit:cover;border:1px solid var(--line)}
.nl-blank{display:block;width:132px;height:88px;background:var(--blue-wash);border:1px solid var(--line)}
.nl-date{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);margin-bottom:5px}
.nrow h3{font-size:18px;line-height:1.32;margin-bottom:5px}
.nrow h3 a{color:var(--ink)}
.nrow h3 a:hover{color:var(--red)}
.nrow p{font-size:14.5px;color:var(--muted)}

/* ============================================================
   FOOTER
   ============================================================ */
footer.site{background:var(--deep);color:#a8aeb6;padding:56px 0 0;font-size:15px}
footer.site .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:44px}
footer.site h4{color:#fff;font-size:12.5px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:17px}
footer.site ul{list-style:none}
footer.site li{padding:5px 0}
footer.site a{color:#a8aeb6}
footer.site a:hover{color:#fff}
footer.site .flogo img{height:44px;width:auto;margin-bottom:18px}
footer.site .fabout{font-size:14.5px;line-height:1.65;max-width:40ch}
footer.site .fsoc{display:flex;gap:14px;margin-top:20px}
footer.site .fsoc svg{width:19px;height:19px;fill:#a8aeb6;transition:fill .18s}
footer.site .fsoc a:hover svg{fill:#fff}
footer.site .subfoot{background:var(--deeper);padding:19px 0;font-size:13.5px;color:#7e858d}
footer.site .subfoot .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
footer.site .subfoot a{color:#7e858d}

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
#searchwrap{position:fixed;inset:0;z-index:300;background:rgba(17,19,22,.62);
  display:none;padding:9vh 20px 20px;backdrop-filter:blur(3px)}
#searchwrap.open{display:block}
#searchwrap .sbox{max-width:660px;margin:0 auto;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.3)}
#searchwrap .sin{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
#searchwrap .sin svg{width:19px;height:19px;fill:var(--muted);flex:0 0 auto}
#searchwrap input{flex:1;border:0;font-family:inherit;font-size:19px;color:var(--ink);outline:none;background:none}
#searchwrap .x{border:0;background:none;font-size:13px;color:var(--muted);cursor:pointer;
  font-family:inherit;padding:5px 9px;border:1px solid var(--line);border-radius:2px}
#searchwrap .sresults{max-height:58vh;overflow-y:auto}
#searchwrap .sresults a{display:block;padding:14px 20px;border-bottom:1px solid var(--line-2)}
#searchwrap .sresults a:hover,#searchwrap .sresults a.sel{background:var(--red-wash)}
#searchwrap .sresults .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--red)}
#searchwrap .sresults .t{font-size:16px;font-weight:600;color:var(--ink);line-height:1.35;margin-top:3px}
#searchwrap .sresults .d{font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.45}
#searchwrap .empty{padding:30px 20px;text-align:center;color:var(--muted);font-size:15px}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1180px){
  .people.six{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:1080px){
  .artwrap{grid-template-columns:minmax(0,1fr);gap:44px}
  .aside{position:static}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  footer.site .fgrid{grid-template-columns:1fr 1fr;gap:34px}
  .jmast{grid-template-columns:52px minmax(0,1fr);gap:18px}
  .jmark img{width:52px;height:52px}
  .jissue{grid-column:1/-1;text-align:left;border-left:0;padding-left:0;
    border-top:1px solid var(--line);padding-top:14px}
  .jvol{display:inline;margin-right:8px}
  .jyear{display:inline;color:var(--muted)}
}
@media(max-width:900px){
  nav.main,.topbar .tlinks{display:none}
  .menu-btn{display:grid}
  header.site .bar{min-height:68px;gap:14px}
  .hact{margin-left:auto}
  .logo img{height:38px}
  .g3,.g2,.feature,.nlgrid,.nlead{grid-template-columns:minmax(0,1fr)}
  .feature,.nlead{gap:24px}
  .stats{grid-template-columns:1fr 1fr}
  .stats > div:nth-child(2n)::before{display:none}
  .stats > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .stats > div:nth-child(3)::before{display:none}
  .abouthead{grid-template-columns:minmax(0,1fr);gap:26px}
  .ednote-in{grid-template-columns:minmax(0,1fr);gap:14px}
  .ednote{padding:30px 0}
  .people.six{grid-template-columns:repeat(3,minmax(0,1fr))}
  .logowall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .herodots{bottom:-28px}
}
@media(max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  /* the wordmark is 8:1, so at 38px it is 304px wide and shoves the search and
     menu buttons off a 390px screen. Shrink it and tighten the gaps to fit. */
  header.site .bar{min-height:60px;gap:8px}
  #mnav.open{max-height:calc(100vh - 60px)}
  .logo img{height:27px}
  .hact{gap:6px}
  .iconbtn{width:34px;height:34px}
  footer.site .flogo img{height:34px}
  .sec{padding:46px 0}
  .hero{min-height:0;padding:56px 0}
  .phero{padding:48px 0 46px}
  .prose{font-size:17px}
  .row,.row.has-thumb{grid-template-columns:minmax(0,1fr);gap:6px}
  .nrow{grid-template-columns:96px minmax(0,1fr);gap:16px}
  .nl-img img,.nl-blank{width:96px;height:70px}
  form.f fieldset.nlpick{grid-template-columns:1fr}
  .nlfacts{gap:22px}
  .nlformwrap{padding:20px 18px}
  .row .date{padding-top:0}
  .rthumb{display:none}
  .evrow.has-thumb{grid-template-columns:82px minmax(0,1fr)}
  .evthumb{display:none}
  .people.six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jlist li{flex-direction:column;gap:4px}
  .jl-by{white-space:normal}
  .authorstrip{grid-template-columns:52px minmax(0,1fr);gap:14px}
  .ac-pic img,.ac-blank{width:52px;height:52px}
  .ac-link{grid-column:1/-1;margin-top:4px}
  .arthero img,.evhero img{max-height:260px}
  .memoirband,.memoirhead{padding:44px 0}
  .g4{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:1fr}
  .stats > div{border-bottom:1px solid var(--line);padding:22px 16px}
  .stats > div::before{display:none}
  .stats .n{font-size:33px}
  .prevnext{grid-template-columns:1fr}
  .prevnext .nx{text-align:left}
  .authorbox{grid-template-columns:1fr;gap:16px}
  .authorbox img{width:76px;height:76px}
  form.f .frow{grid-template-columns:1fr;gap:0}
  footer.site .fgrid{grid-template-columns:1fr;gap:30px}
  .people,.books{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profhead,.bookhead,.memvol{grid-template-columns:minmax(0,1fr);gap:24px}
  .mv-cover img{width:150px}
  .memvol{padding:22px 20px}
  .profpic img,.profpic .ph-blank{width:160px;height:160px}
  .bookcover img{width:180px}
  .pmeta li{grid-template-columns:minmax(0,1fr);gap:2px;padding:10px 0}
  .profcard{grid-template-columns:72px minmax(0,1fr);gap:16px;padding:16px 18px}
  .profcard .pph img,.profcard .ph-blank{width:72px;height:72px;font-size:20px}
  .logowall{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .logotile{min-height:140px;padding:20px 14px}
  .prose .alignleft,.prose .alignright{float:none;margin:24px auto}
  .topbar .wrap{justify-content:center}
}
/* center sponsor logo wall regardless of count (2026-07) */
.logowall{display:flex!important;flex-wrap:wrap;justify-content:center}
.logowall .logotile{flex:0 1 300px;max-width:340px}

/* dvh accounts for the mobile browser chrome that vh ignores. This block must come
   AFTER the max-width:640px rules it overrides: equal specificity, so source order
   decides, and an earlier @supports would silently lose to the later vh value. */
@supports (height:100dvh){
  @media(max-width:640px){ #mnav.open{max-height:calc(100dvh - 60px)} }
}

/* The menu button only exists below 901px, but .open persists across a resize, so
   opening the menu on a phone and then widening the window left the mobile list
   showing next to the desktop nav. */
@media(min-width:901px){ #mnav.open{display:none} }

/* ---------------------------------------------------------------- article actions */
.artactions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.artactions .btn.sm{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;font-size:14px;
  border-radius:3px;line-height:1;cursor:pointer;font-family:inherit;font-weight:600;
}
.artactions .btn.sm.ghost{color:var(--body);border-color:var(--line)}
.artactions .btn.sm.ghost:hover{background:var(--alt);border-color:var(--muted);color:var(--ink)}
@media(max-width:480px){ .artactions .btn.sm{flex:1 1 auto;justify-content:center} }
.artactions .btn.sm svg{flex:0 0 auto}
.artactions .shared{font-size:13px;color:var(--muted);opacity:0;transition:opacity .2s}
.artactions .shared.on{opacity:1}

/* print-only furniture: present in the markup, invisible on screen */
.printhead,.printfoot,.printtopics{display:none}
/* The print frame is a table so that <thead>/<tfoot> repeat on every printed page.
   On screen it must have no layout effect whatsoever. */
table.printdoc,table.printdoc>tbody,table.printdoc>tbody>tr,table.printdoc>tbody>tr>td{
  display:block;width:auto;margin:0;padding:0;border:0;
}
table.printdoc>thead,table.printdoc>tfoot{display:none}

/* ================================================================== print / PDF
   "Download PDF" runs window.print() against these rules. The browser's own PDF
   engine does the rendering, so the file always matches the live article and
   nothing has to be stored or regenerated.

   print-color-adjust is required: without it browsers drop background fills and
   the red rules, and the page comes out as plain black text.
   ============================================================================ */
@media print{
  /* The frame is drawn by the table, which lives inside the text box, so the page
     margin is uniform and the rules sit a comfortable distance from the paper edge. */
  @page{ size:A4; margin:13mm 12mm; }

  html,body{background:#fff!important;font-size:10.5pt;line-height:1.55;color:#111}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}

  /* site chrome has no place in a document */
  .topbar,header.site,footer.site,.crumbs,.aside,.prevnext,.nlband,#searchwrap,
  .artactions,.menu-btn,.herodots,.authorstrip .ac-link,.skip,#mnav,
  .siblist,.blk,script,noscript{display:none!important}

  .wrap,.artwrap{max-width:none!important;padding:0!important;margin:0!important;
    display:block!important;grid-template-columns:none!important}

  /* --- the frame that repeats on every page ---------------------------------
     Browsers repeat <thead> at the top of each printed page and <tfoot> at the
     bottom; they do NOT repeat position:fixed. So the whole article lives in a
     one-column table and the rules ride on the header and footer cells. */
  table.printdoc{display:table!important;width:100%;border-collapse:collapse;
    table-layout:fixed;margin:0}
  table.printdoc>thead{display:table-header-group!important}
  table.printdoc>tfoot{display:table-footer-group!important}
  table.printdoc>tbody{display:table-row-group!important}
  /* No left/right rules. WebKit and Blink do not paint a cell's side borders on
     the fragments of a cell that spans a page break, so the verticals appeared on
     page one and vanished afterwards. The header and footer bands DO repeat, so
     the frame is horizontal by design rather than a box that only half draws. */
  table.printdoc>*>tr>td{display:table-cell!important;padding:0;border:0}
  table.printdoc>thead>tr>td{padding:0 0 2pt}
  table.printdoc>tfoot>tr>td{padding:2pt 0 0}
  table.printdoc>tbody>tr>td{padding:0}

  /* --- page-one masthead --------------------------------------------------- */
  .printhead{
    display:flex!important;align-items:flex-end;justify-content:space-between;gap:16pt;
    padding:0 0 6pt;margin-bottom:13pt;
    border-top:3pt solid #e1251b;border-bottom:.75pt solid #e1251b;
    padding-top:8pt;
  }
  .printhead .pm-logo{height:30pt;width:auto}
  .printhead .pm-meta{
    display:flex;flex-direction:column;align-items:flex-end;gap:1pt;
    font-size:8.5pt;color:#5b6169;text-align:right;
  }
  .printhead .pm-meta b{font-size:9.5pt;color:#e1251b;letter-spacing:.06em;text-transform:uppercase}

  /* --- title block --------------------------------------------------------- */
  .arthead{margin:0 0 12pt}
  .arthead .eyebrow{font-size:8pt;letter-spacing:.14em;text-transform:uppercase;color:#767d85;margin-bottom:5pt}
  .arthead h1{font-size:21pt;line-height:1.18;margin:0;color:#12151a;letter-spacing:-.01em}
  .artmeta{margin-top:7pt;font-size:9.5pt;color:#41474e}
  .artmeta a{color:#41474e;text-decoration:none}

  /* categories, printed as outlined pills under the byline */
  .printtopics{display:flex!important;flex-wrap:wrap;gap:4pt;margin:8pt 0 0}
  .printtopics span{
    border:.5pt solid #c8ccd2;border-radius:20pt;padding:1.5pt 7pt;
    font-size:7.5pt;letter-spacing:.05em;text-transform:uppercase;color:#5b6169;
  }

  /* --- featured image ------------------------------------------------------ */
  figure.arthero{margin:13pt 0 15pt;break-inside:avoid}
  figure.arthero img{width:100%;height:auto;max-height:78mm;object-fit:cover;border-radius:2pt}

  /* --- author ------------------------------------------------------------- */
  .authorstrip{
    display:flex!important;align-items:center;gap:9pt;break-inside:avoid;
    background:#f7f8f9;border-left:2pt solid #e1251b;
    padding:8pt 10pt;margin:0 0 14pt;
  }
  .authorstrip .ac-pic img{width:34pt;height:34pt;border-radius:50%;object-fit:cover;display:block}
  .authorstrip .ac-name{font-size:10.5pt;font-weight:700;color:#12151a}
  .authorstrip .ac-name a{color:#12151a;text-decoration:none}
  .authorstrip .ac-role{font-size:8.5pt;color:#5b6169;margin-top:1pt}

  /* --- body ---------------------------------------------------------------- */
  .prose{font-size:10.5pt;line-height:1.6;color:#1c2026;text-align:justify;hyphens:auto}
  .prose p{margin:0 0 7pt;orphans:3;widows:3}
  .prose h2,.prose h3{
    break-after:avoid;page-break-after:avoid;color:#12151a;
    font-size:12pt;margin:14pt 0 5pt;
  }
  .prose h3{font-size:11pt}
  .prose a{color:#1c2026;text-decoration:none;border-bottom:.4pt solid #c8ccd2}
  .prose img{max-width:100%;height:auto;break-inside:avoid}
  .prose figure,.prose table,.prose blockquote{break-inside:avoid}
  .prose blockquote{
    border-left:1.5pt solid #e1251b;padding-left:9pt;margin:9pt 0;color:#41474e;font-style:italic;
  }
  .prose table{width:100%;border-collapse:collapse;font-size:8.5pt}
  .prose th,.prose td{border:.4pt solid #d8dbe0;padding:3pt 5pt;text-align:left}
  .tablewrap{overflow:visible!important}

  /* --- footnotes ----------------------------------------------------------- */
  .footnotes{
    margin-top:16pt;padding-top:8pt;border-top:.6pt solid #d8dbe0;
    font-size:8.5pt;line-height:1.45;color:#41474e;break-before:auto;
  }
  .footnotes h2{font-size:9pt;letter-spacing:.12em;text-transform:uppercase;color:#767d85;margin:0 0 5pt}
  .footnotes ol{padding-left:12pt;margin:0}
  .footnotes li{margin-bottom:3pt}
  .footnotes a{color:#1c2026;text-decoration:none;border-bottom:.4pt solid #c8ccd2}
  .footnotes li::marker{color:#e1251b;font-weight:700}
  .fnback{display:none}

  /* --- footer, repeated on every page in the bottom margin ----------------- */
  .printfoot{
    display:flex!important;justify-content:space-between;align-items:baseline;gap:10pt;
    padding:5pt 0 0;margin-top:12pt;
    border-top:.75pt solid #e1251b;
    font-size:7pt;color:#767d85;letter-spacing:.02em;
  }
  .printfoot span:last-child{color:#a0a6ad;word-break:break-all;text-align:right}
}