@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/playfair400.woff2) format('woff2')}@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/playfair700.woff2) format('woff2')}@font-face{font-family:'Playfair Display';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/playfair900.woff2) format('woff2')}@font-face{font-family:'Playfair Display';font-style:italic;font-weight:700;font-display:swap;src:url(/assets/fonts/playfairi700.woff2) format('woff2')}@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/sourceserif400.woff2) format('woff2')}@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/sourceserif600.woff2) format('woff2')}@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/sourceserifi400.woff2) format('woff2')}@font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/oswald400.woff2) format('woff2')}@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/oswald500.woff2) format('woff2')}@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/oswald600.woff2) format('woff2')}
:root{
  --paper:#F7F5EF; --paper-white:#FFFDF8; --ink:#1A1A1A; --ink-soft:#3D3D3D;
  /* warm paper is lighter than white by luminance, so the greys that cleared
     AA on #FFF do not clear it here. #6B6B6B lands at 4.31:1 on #F7F5EF.
     #63615C is 4.99:1 and reads the same. */
  --soft-ink:#595959; --n-ink:#63615C; --muted:#63615C;
  --line:#D9D6CF; --line-strong:#111111; --wash:#EFEBE1;
  --red:#EC3535; --red-ink:#B81C1C; --red-deep:#8A1C1C; --gold:#B98A2E;
  --up:#0F6B3F; --down:#A62121;
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --cond:'Oswald','Arial Narrow',Arial,sans-serif;
  --wrap:1280px;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#131211;--paper-white:#1A1918;--ink:#F5F2EA;--ink-soft:#DAD5C9;
    --soft-ink:#B4AEA1;--n-ink:#A79F92;--muted:#A79F92;--line:#332F2A;
    --line-strong:#4A443C;--wash:#211F1C;--red-ink:#FF8B7A;--red-deep:#C1462F;
    --up:#4FBF85;--down:#FF7B6B}
}
:root[data-theme="dark"]{--paper:#131211;--paper-white:#1A1918;--ink:#F5F2EA;
  --ink-soft:#DAD5C9;--soft-ink:#B4AEA1;--n-ink:#A79F92;--muted:#A79F92;
  --line:#332F2A;--line-strong:#4A443C;--wash:#211F1C;--red-ink:#FF8B7A;
  --red-deep:#C1462F;--up:#4FBF85;--down:#FF7B6B}
:root[data-theme="light"]{--paper:#F7F5EF;--paper-white:#FFFDF8;--ink:#1A1A1A;
  --ink-soft:#3D3D3D;--soft-ink:#595959;--n-ink:#63615C;--muted:#63615C;
  --line:#D9D6CF;--line-strong:#111111;--wash:#EFEBE1;--red-ink:#B81C1C;
  --red-deep:#8A1C1C;--up:#0F6B3F;--down:#A62121}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:17px/1.55 var(--serif);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{margin:0;font-family:var(--display);font-weight:700;
  line-height:1.14;color:var(--ink);text-wrap:balance}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--red-ink);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:11px 18px;z-index:300;font-family:var(--cond)}
.skip:focus{left:12px;top:12px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================ utility bar ============================ */
.util{background:var(--line-strong);color:#E9E6DE;font-family:var(--cond);
  font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
:root[data-theme="dark"] .util{background:#000}
.util .wrap{display:flex;justify-content:space-between;align-items:center;
  gap:16px;min-height:38px;flex-wrap:wrap}
.util-left{display:flex;align-items:center;gap:10px;color:#CFCCC3;flex-wrap:wrap}
/* WCAG 2.2 asks for a 24px target. These were 19px tall. */
.util a,.util button,.util select{display:inline-flex;align-items:center;min-height:26px}
.util .dot{opacity:.45}
.util-right{display:flex;align-items:center;gap:16px}
.util a:hover,.util button:hover{color:#fff}
.util .sub{color:var(--gold)}
.wx{display:inline-flex;align-items:center;gap:7px}
.wx select{font:inherit;font-family:var(--cond);text-transform:uppercase;
  background:transparent;color:#CFCCC3;border:0;border-bottom:1px dotted #6C6862;
  padding:1px 2px;cursor:pointer}
.wx select option{background:#1A1A1A;color:#EDEDED}
.wx b{color:#fff;font-weight:500}
.wx[hidden]{display:none}
.wx-precise{color:#9A968E;min-height:26px;border-bottom:1px dotted #6C6862;font-size:11px;
  letter-spacing:.06em}
.wx-precise:hover{color:#fff}
.wx-precise[hidden]{display:none}
.theme-btn{color:#CFCCC3;display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 4px}

/* ============================== masthead ============================== */
.mast{background:var(--paper-white);border-bottom:1px solid var(--line)}
.mast .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:14px;padding-top:20px;padding-bottom:14px}
.mast-edition{justify-self:start;font-family:var(--cond);text-transform:uppercase;
  font-size:12px;letter-spacing:.05em;color:var(--muted);line-height:1.5}
.mast-edition b{display:block;color:var(--ink-soft);font-weight:500}
/* the edition block that used to hold column 1 is gone, so the wordmark and the
   actions are pinned to their columns explicitly. Without this the wordmark
   falls into column 1 and stops being centred. */
.wordmark{grid-column:2;text-align:center;font-family:var(--display);font-weight:900;
  font-size:clamp(1.75rem,1rem + 3.4vw,3.75rem);line-height:.96;letter-spacing:-.005em;
  color:var(--ink)}
.wordmark .vjp-mark{color:var(--red-deep)}
.mast-strap{grid-column:1/-1;text-align:center;font-family:var(--cond);
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  margin-top:9px}
.mast-actions{grid-column:3;justify-self:end;display:flex;align-items:center;gap:12px}
.icon-btn{width:38px;height:38px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--line);border-radius:50%;color:var(--ink)}
.icon-btn:hover{background:var(--red-deep);border-color:var(--red-deep);color:#fff}
.btn-sub{background:var(--red-deep);color:#fff;font-family:var(--cond);
  text-transform:uppercase;letter-spacing:.06em;font-size:13px;font-weight:600;
  padding:10px 20px}
.btn-sub:hover{background:var(--ink);color:#fff}
.burger{display:none}

/* ============================== mega menu ============================= */
.nav{position:relative;background:var(--paper-white);
  border-top:3px double var(--line-strong);border-bottom:1px solid var(--line-strong);
  z-index:60}
.nav>.wrap{display:flex;justify-content:center;flex-wrap:wrap}
.nav-item>a{display:block;font-family:var(--cond);text-transform:uppercase;
  font-weight:500;font-size:14px;letter-spacing:.06em;padding:13px 16px;color:var(--ink)}
.nav-item>a i{font-style:normal;font-size:10.5px;color:var(--muted);margin-left:5px;
  vertical-align:super}
.nav-item>a:hover,.nav-item:focus-within>a{color:var(--red-ink)}
.nav-item.is-here>a{color:var(--red-ink);box-shadow:inset 0 -3px 0 var(--red-deep)}

.mm{position:absolute;left:0;right:0;top:100%;background:var(--paper-white);
  border-bottom:3px solid var(--line-strong);box-shadow:0 22px 44px rgba(20,16,10,.16);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
:root[data-theme="dark"] .mm{box-shadow:0 22px 44px rgba(0,0,0,.6)}
.nav-item:hover .mm,.nav-item:focus-within .mm{opacity:1;visibility:visible;
  transform:none;transition-delay:.09s,.09s,0s}
.mm-inner{display:grid;grid-template-columns:210px 1fr 220px;gap:34px;
  padding:26px 24px 30px;max-width:var(--wrap);margin:0 auto}
.mm-eyebrow{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;color:var(--red-ink);margin:0 0 12px;font-weight:600}
.mm-rail a{display:flex;justify-content:space-between;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line);font-family:var(--cond);font-size:14px;
  letter-spacing:.03em;color:var(--ink-soft)}
.mm-rail a:hover{color:var(--red-ink)}
.mm-rail a span{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.mm-stories{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mm-card .mm-thumb{aspect-ratio:16/9;margin-bottom:9px}
.mm-h{display:block;font-family:var(--display);font-weight:700;font-size:16.5px;line-height:1.2;margin:0 0 5px}
.mm-card:hover .mm-h{color:var(--red-ink)}
.mm-card p{margin:0;font-family:var(--cond);font-size:12px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);font-variant-numeric:tabular-nums}
.mm-aside{border-left:1px solid var(--line);padding-left:24px}
.mm-empty{font-family:var(--serif);font-size:15px;line-height:1.55;
  color:var(--soft-ink);margin:0;max-width:46ch}
.mm-figure{font-family:var(--display);font-weight:900;font-size:36px;line-height:1;
  color:var(--ink);display:block}
.mm-note{font-family:var(--cond);text-transform:uppercase;letter-spacing:.06em;
  font-size:11.5px;color:var(--muted);margin:2px 0 18px}
.mm-all{display:inline-block;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.06em;font-size:13px;font-weight:600;color:#fff;
  background:var(--red-deep);padding:9px 16px}
.mm-all:hover{background:var(--ink)}

/* the drawer is <details>, so a phone menu needs no script at all */
.drawer{display:none;background:var(--paper-white);border-bottom:1px solid var(--line-strong)}
.drawer summary{list-style:none;cursor:pointer}
.drawer summary::-webkit-details-marker{display:none}
.drawer>summary{font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;
  font-size:13px;font-weight:600;padding:13px 24px;display:flex;
  justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.drawer>summary::after{content:"+";font-size:19px;line-height:1}
.drawer[open]>summary::after{content:"\2212"}
.drawer-sec{border-bottom:1px solid var(--line)}
.drawer-sec>summary{font-family:var(--cond);text-transform:uppercase;font-size:14px;
  letter-spacing:.05em;padding:12px 24px;display:flex;justify-content:space-between}
.drawer-sec>summary i{font-style:normal;color:var(--muted);font-size:11px}
.drawer-sec .sub{padding:0 24px 12px}
.drawer-sec .sub a{display:block;padding:10px 0;min-height:26px;font-family:var(--serif);
  font-size:15px;color:var(--ink-soft);border-bottom:1px solid var(--line)}

/* =============================== search =============================== */
.search{display:none;background:var(--line-strong);padding:20px 0}
.search.open{display:block}
.search .wrap{display:flex;gap:14px;align-items:center}
.search form{display:flex;flex:1;gap:10px}
.search input{flex:1;font:19px var(--serif);padding:13px 15px;border:0;
  background:#fff;color:#1A1A1A}
.search .go{font-family:var(--cond);text-transform:uppercase;letter-spacing:.06em;
  background:var(--red-deep);color:#fff;padding:0 24px;font-size:14px;font-weight:600}
.search .go:hover{background:#fff;color:var(--red-deep)}
.search .close{color:#fff;font-size:24px;line-height:1;padding:0 6px}
.results{max-width:var(--wrap);margin:14px auto 0;padding:0 24px}
.results a{display:block;padding:10px 0;border-top:1px solid #3A3630;color:#EDEAE2}
.results a:hover{color:#fff}
.results .k{font-family:var(--cond);text-transform:uppercase;font-size:11px;
  letter-spacing:.08em;color:var(--gold);display:block}
.results .none{color:#B7B2A8;font-family:var(--cond);text-transform:uppercase;
  font-size:12.5px;letter-spacing:.06em;padding:12px 0}

/* =============================== ticker =============================== */
.ticker{background:var(--red-deep);color:#fff;overflow:hidden}
.ticker .wrap{display:flex;align-items:center;height:42px;padding-right:0;position:relative}
/* the label has to sit above the track and be opaque, or the headlines scroll
   straight through it, which is what a translucent black did */
.ticker-tag{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
  font-weight:600;font-size:13px;background:#5E1010;padding:0 16px;height:42px;
  display:flex;align-items:center;flex-shrink:0;margin-left:-24px;
  position:relative;z-index:2}
:root[data-theme="dark"] .ticker-tag{background:#7A2A1C}
.ticker-view{flex:1;overflow:hidden;height:42px;display:flex;align-items:center}
.ticker-track{display:flex;gap:52px;white-space:nowrap;padding-left:26px;
  animation:tick 46s linear infinite;font-size:14.5px}
.ticker-track b{font-weight:400}
.ticker-track b::before{content:"\25C6";color:var(--gold);margin-right:11px;
  font-size:9px;vertical-align:middle}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================ market strip ============================ */
.strip{background:var(--paper-white);border-bottom:1px solid var(--line);
  font-family:var(--cond)}
.strip .wrap{display:flex;align-items:center;gap:0;overflow-x:auto;
  scrollbar-width:none;min-height:44px}
.strip .wrap::-webkit-scrollbar{display:none}
.strip-tag{text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:600;
  color:var(--red-ink);padding-right:18px;border-right:1px solid var(--line);
  flex-shrink:0;align-self:stretch;display:flex;align-items:center}
.quote{display:flex;align-items:baseline;gap:7px;padding:0 13px;
  border-right:1px solid var(--line);flex-shrink:0;font-size:12.5px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.quote .n{text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-size:11px}
.quote .v{color:var(--ink);font-weight:500}
.quote .d.up{color:var(--up)}
.quote .d.down{color:var(--down)}
.quote .d.flat{color:var(--muted)}
.quote.pending .v{color:var(--muted);font-style:italic}
.strip-src{margin-left:auto;padding-left:14px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);flex-shrink:0}

/* ============================ section bands =========================== */
main{padding-bottom:8px}
.ledger{font:15px/1.5 var(--serif);color:var(--ink-soft);padding:16px 0 18px;
  border-bottom:1px solid var(--line);margin:0 0 26px;
  font-variant-numeric:tabular-nums;display:flex;gap:18px;flex-wrap:wrap;
  align-items:baseline}
.ledger b{font-family:var(--display);font-weight:900;font-size:21px;color:var(--ink)}

/* ============================= newsletter ============================= */
.news-sign{background:var(--line-strong);color:#EDEAE2;padding:48px 0;margin-top:44px}
:root[data-theme="dark"] .news-sign{background:#000}
.news-sign .wrap{display:grid;grid-template-columns:1fr auto;
  grid-template-areas:"copy form" "copy note";gap:6px 40px;align-items:center}
.news-sign .news-copy{grid-area:copy}
.news-form{grid-area:form;align-self:end}
.news-note{grid-area:note;align-self:start}
.news-sign h2{color:#fff;font-size:32px;margin:0 0 7px}
.news-sign p{margin:0;color:#BFBAB0;font-size:16.5px;max-width:52ch}
.news-form{display:flex;gap:10px;width:min(470px,100%)}
.news-form input{flex:1;padding:14px 16px;border:0;font:16px var(--serif)}
.news-form button{font-family:var(--cond);text-transform:uppercase;letter-spacing:.06em;
  font-weight:600;background:var(--red-deep);color:#fff;padding:0 26px;font-size:15px}
.news-form button:hover{background:#fff;color:var(--red-deep)}
.news-note{margin:0;font-family:var(--cond);font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;color:#8E8981;text-align:right}

/* =============================== footer ===============================
   Three movements: a full bleed statement, the list of publishers the
   reporting rests on, then the ordinary business of links and legals. */
.foot{background:#12110F;color:#C9C4BA;font-family:var(--serif)}
.foot-hero{border-bottom:1px solid #26231F;padding:56px 0 44px}
.foot-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:48px;align-items:start}
.foot-mark{font-family:var(--display);font-weight:900;
  font-size:clamp(1.75rem,1.1rem + 2.2vw,2.75rem);color:#fff;line-height:1.02;
  letter-spacing:-.015em}
.foot-mark span{color:#E2705C}
.foot-say{font-size:clamp(1.0625rem,1rem + .4vw,1.375rem);line-height:1.55;
  color:#B4AFA5;margin:0;border-left:3px solid var(--red-deep);padding-left:22px;
  max-width:56ch;text-wrap:pretty}

/* the part no other masthead can print */
.foot-relied{padding:40px 0 38px;border-bottom:1px solid #26231F}
.foot-relied h2{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:12px;color:#E2705C;margin:0 0 8px;font-weight:600}
.foot-relied__note{font-size:14px;line-height:1.5;color:#8E8981;margin:0 0 20px;
  max-width:62ch}
.foot-relied ul{display:flex;flex-wrap:wrap;gap:7px 0;margin:0 0 22px}
.foot-relied li{font-family:var(--cond);font-size:12.5px;letter-spacing:.04em;
  text-transform:uppercase;color:#B4AFA5;padding:0 14px;border-right:1px solid #33302B;
  line-height:1.25}
.foot-relied li:last-child{border-right:0}
.foot-relied li:first-child{padding-left:0}
.foot-relied__all{display:inline-block;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.06em;font-size:12.5px;font-weight:600;color:#fff;
  border-bottom:2px solid var(--red-deep);padding-bottom:3px}
.foot-relied__all:hover{color:#E2705C}

.foot-top{padding:42px 0 36px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:48px}
.social{display:flex;gap:10px;margin:0 0 26px}
.social a{width:40px;height:40px;border:1px solid #33302B;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#C9C4BA}
.social a:hover{background:var(--red-deep);border-color:var(--red-deep);color:#fff}
.colophon{margin:0;font-size:13.5px;line-height:1.5}
.colophon dt{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:10.5px;color:#E2705C;margin:0 0 2px}
.colophon dd{margin:0 0 14px;color:#B4AFA5}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.foot-col h2{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:12px;color:#fff;margin:0 0 14px;padding-bottom:9px;
  border-bottom:1px solid #2C2925}
.foot-col a{display:block;font-size:14.5px;padding:6px 0;color:#B4AFA5}
.foot-col a:hover{color:#fff}
.foot-legal{border-top:1px solid #2C2925;padding:20px 24px;max-width:var(--wrap);
  margin:0 auto;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.05em;
  font-size:11.5px;color:#8E8981}
.foot-legal a{margin-left:18px;color:#8E8981}
.foot-legal a:hover{color:#fff}
.foot-legal .abn{letter-spacing:.04em}

/* ============================= responsive ============================= */
@media (max-width:1080px){
  .mm-inner{grid-template-columns:190px 1fr;gap:26px}
  .mm-aside{display:none}
  .mm-stories{grid-template-columns:repeat(2,1fr)}
  .mm-stories .mm-card:nth-child(3){display:none}
  .foot-grid,.foot-hero .wrap{grid-template-columns:1fr;gap:30px}
}
@media (max-width:900px){
  .nav{display:none}
  .drawer{display:block}
  .burger{display:inline-flex}
  .mast .wrap{grid-template-columns:auto 1fr auto;padding-top:14px}
  .mast-edition{display:none}
  .btn-sub{display:none}
  .util-left .wx-city{display:none}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
  .news-sign .wrap{grid-template-columns:1fr;
    grid-template-areas:"copy" "form" "note";gap:16px}
  .news-note{text-align:left}
}
@media (max-width:520px){
  .util-right a:not(.sub){display:none}
  .foot-cols{grid-template-columns:1fr}
  .ticker-tag{margin-left:-24px}
}

/* pictures ---------------------------------------------------------------- */
.thumb{background:linear-gradient(135deg,rgba(138,28,28,.06),var(--wash));
  border:1px solid var(--line);display:block;position:relative}
.thumb::after{content:"PICTURE";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);text-align:center;font-family:var(--cond);font-size:9.5px;
  letter-spacing:.2em;color:var(--muted)}
.thumb--bare::after{content:""}
.pic{width:100%;height:100%;object-fit:cover;background:var(--wash);display:block}
.r21x9{aspect-ratio:21/9}.r3x2{aspect-ratio:3/2}.r1x1{aspect-ratio:1}.r16x9{aspect-ratio:16/9}
.figure{margin:0}
.credit{font-family:var(--cond);font-size:11.5px;letter-spacing:.03em;color:var(--muted);
  margin-top:7px;line-height:1.45}
/* .fp a is display:block, which stretched this licence link the full width of
   the page as an 18px tall target. It is a run of text and must stay inline. */
.credit a,.fp .credit a{display:inline;border-bottom:1px solid var(--line)}
.credit a:hover{color:var(--red-ink)}
.fp-also .pic{margin-bottom:12px}
.mm-thumb.pic{margin-bottom:9px}

/* article ----------------------------------------------------------------- */
.art{max-width:760px;margin:0 auto;padding:30px 0 0}
.art h1{font-family:var(--display);font-weight:900;font-size:clamp(2rem,1.2rem + 2.6vw,3rem);
  line-height:1.07;letter-spacing:-.008em;margin:0 0 16px}
.art .stand{font-size:1.1875rem;line-height:1.5;color:var(--ink-soft);margin:0 0 20px}
.art .byline{font-family:var(--cond);text-transform:uppercase;letter-spacing:.07em;
  font-size:12px;color:var(--muted);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:11px 0;margin:0 0 24px;
  display:flex;gap:16px;flex-wrap:wrap}
.art .byline b{color:var(--ink-soft);font-weight:500}
.art .hero{margin:0 0 26px}
.art .body p{font-size:1.0625rem;line-height:1.72;margin:0 0 20px}
.art .body p:first-of-type::first-letter{font-family:var(--display);font-weight:900;
  font-size:3.3em;line-height:.82;float:left;padding:8px 10px 0 0;color:var(--red-deep)}
.sources{border-top:3px double var(--line-strong);margin:36px 0 0;padding-top:18px}
.sources h2{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:12.5px;color:var(--red-ink);margin:0 0 6px}
.sources .lede{font-size:14.5px;color:var(--soft-ink);margin:0 0 16px}
.sources ol{counter-reset:s}
.sources li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--line)}
.sources li::before{content:counter(s);font-family:var(--display);font-weight:900;
  font-size:17px;color:var(--muted)}
.sources .pub{font-family:var(--cond);text-transform:uppercase;letter-spacing:.05em;
  font-size:11.5px;color:var(--red-ink);display:block;margin-bottom:3px}
.sources a{font-size:15.5px;line-height:1.4}
.sources a:hover{color:var(--red-ink)}
.sources time{font-family:var(--cond);font-size:11.5px;color:var(--muted);
  display:block;margin-top:3px;letter-spacing:.04em}
.nosources{border-left:3px solid var(--red-deep);padding:4px 0 4px 16px;margin:32px 0 0;
  font-size:15px;color:var(--soft-ink)}
.related{border-top:2px solid var(--line-strong);margin:44px 0 0;padding-top:16px}
.related h2{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:12px;color:var(--red-ink);margin:0 0 16px}
.related ul{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* An inline <a> wrapping a block <h3> lets the heading escape the inline box, so
   the grid item never sizes to it and the text spills under the next section.
   Every card link that wraps block content has to be a block itself. */
.related a,.sec-grid a{display:block}
.related li,.sec-grid li{min-width:0}
.related h3{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.22;
  margin:9px 0 5px}
.related a:hover h3{color:var(--red-ink)}

/* section fronts and the index ------------------------------------------- */
.sec-head{border-bottom:3px double var(--line-strong);padding:26px 0 14px;margin:0 0 26px}
.sec-head h1{font-family:var(--display);font-weight:900;
  font-size:clamp(2rem,1.3rem + 2.4vw,3rem);margin:0 0 8px}
.sec-head p{margin:0;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.08em;font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 32px}
.sec-grid .card-h{font-family:var(--display);font-weight:700;font-size:1.25rem;
  line-height:1.2;margin:10px 0 7px}
.sec-grid p{font-size:15.5px;line-height:1.5;color:var(--ink-soft);margin:0}
.sec-grid a:hover .card-h{color:var(--red-ink)}

/* a wide table scrolls inside its own box rather than taking the page
   sideways with it */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-family:var(--serif)}
.tbl th{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:11px;color:var(--muted);text-align:left;padding:11px 10px;
  border-bottom:2px solid var(--line-strong)}
.tbl th:last-child{text-align:right}
.tbl td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:hover td{background:var(--paper-white)}
.tbl .sec{font-family:var(--cond);text-transform:uppercase;font-size:11px;
  letter-spacing:.06em;color:var(--red-ink);white-space:nowrap}
.tbl .n{text-align:right;font-family:var(--cond);font-variant-numeric:tabular-nums;
  color:var(--n-ink);white-space:nowrap}
.tbl a:hover{color:var(--red-ink)}
.sortbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:0 0 16px;
  font-family:var(--cond);font-size:12.5px}
.sortbar a{border:1px solid var(--line);padding:6px 13px;border-radius:99px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.sortbar a[aria-current="true"]{background:var(--ink);color:var(--paper);
  border-color:var(--ink)}

/* the evidence page ------------------------------------------------------- */
.prose-lede{font-size:1.125rem;line-height:1.6;color:var(--ink);max-width:70ch;
  border-left:3px solid var(--red-deep);padding-left:16px;margin:0 0 34px}
.tier-h{font-family:var(--display);font-weight:900;font-size:1.75rem;
  border-top:2px solid var(--line-strong);padding-top:14px;margin:44px 0 8px;
  scroll-margin-top:20px}
.tier-note{font-size:15px;line-height:1.6;color:var(--soft-ink);max-width:74ch;
  margin:0 0 20px}
.tier{margin:0 0 26px}
.tier>header{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  border-bottom:1px solid var(--line-strong);padding-bottom:8px;margin:0 0 6px}
.tier h3{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:12.5px;color:var(--red-ink);margin:0}
.tier>header span{font-family:var(--cond);font-size:12px;color:var(--muted);
  letter-spacing:.04em;margin-left:auto}
.tier li a{display:grid;grid-template-columns:1fr minmax(52px,auto);gap:14px;
  align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.tier .hl{font-size:16.5px;line-height:1.35;color:var(--ink-soft);overflow-wrap:anywhere}
.tier a:hover .hl{color:var(--red-ink)}
.tier .n{font-family:var(--cond);font-size:13px;text-align:right;color:var(--n-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* editorial static pages -------------------------------------------------- */
.prose{max-width:720px;margin:0 auto;padding:30px 0 10px}
.prose h1{font-family:var(--display);font-weight:900;
  font-size:clamp(2rem,1.3rem + 2.2vw,2.75rem);margin:0 0 18px}
.prose h2{font-family:var(--display);font-weight:700;font-size:1.375rem;margin:34px 0 12px}
.prose p,.prose li{font-size:1.0625rem;line-height:1.7;color:var(--ink-soft)}
.prose p{margin:0 0 18px}
.prose ul{list-style:disc;padding-left:22px;margin:0 0 18px}
.prose li{margin:0 0 9px}
.prose .lede{font-size:1.1875rem;color:var(--ink);border-left:3px solid var(--red-deep);
  padding-left:16px}
.crumb{font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;
  font-size:11.5px;color:var(--muted);padding:16px 0 0}
.crumb a:hover{color:var(--red-ink)}

@media(max-width:64em){.sec-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:43.6875em){
  .sec-grid,.related ul{grid-template-columns:1fr}
  .art .body p:first-of-type::first-letter{font-size:2.8em}
  .tbl .hidecol{display:none}
}

.fp{
  --fp-lead:2.125rem; --fp-lead-lh:1.12;
  --fp-second:1.25rem;
  --fp-rail:1.0625rem;
  --fp-index:0.9375rem;
  --fp-standfirst:1.0625rem; --fp-standfirst-lh:1.55;
}
@media(min-width:43.75em){
  .fp{--fp-lead:2.625rem; --fp-lead-lh:1.08; --fp-second:1.5rem;
      --fp-rail:1.1875rem; --fp-index:1rem; --fp-standfirst:1.125rem}
}
@media(min-width:64em){
  .fp{--fp-lead:3.25rem; --fp-lead-lh:1.05; --fp-second:1.625rem;
      --fp-rail:1.25rem; --fp-index:1.03125rem;
      --fp-standfirst:1.1875rem; --fp-standfirst-lh:1.5}
}

.fp a{display:block}
.fp a:hover h3,.fp a:hover .hl,.fp a:hover .lead__headline{color:var(--red-ink)}
/* a grid track defaults to min-width:auto, so one long token in a headline can
   push a column wider than the viewport and put a sideways scrollbar on the
   whole page. These two lines are the fix, and a gate checks it stays fixed. */
.fp h3,.fp .hl,.fp .lead__headline,.fp p{overflow-wrap:anywhere}
.fp-also>li,.fp-more>li,.fp-rest>div,.fp-more a>*,.fp-also a>*,.fp-rest a>*,
.fp-comment>li{min-width:0}

.fp-band{margin:0 0 46px}
.fp-band__label{border-top:2px solid var(--line-strong);padding-top:10px;margin:0 0 18px;
  font-family:var(--cond);font-weight:600;font-size:12px;line-height:1;
  letter-spacing:.12em;text-transform:uppercase;color:var(--red-ink);
  display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.fp-band__label em{font-style:normal;color:var(--muted);font-weight:400;
  letter-spacing:.06em;font-variant-numeric:tabular-nums}
.fp-band__note{font:13.5px/1.5 var(--serif);color:var(--soft-ink);margin:-8px 0 18px;
  max-width:78ch}

.kicker{font-family:var(--cond);font-weight:500;font-size:12px;line-height:1;
  letter-spacing:.12em;text-transform:uppercase;color:var(--red-ink);
  margin:0 0 10px;font-variant-numeric:tabular-nums}
.kicker--sm{font-size:11px;margin-bottom:8px}
.srcline{font-family:var(--cond);font-size:12.5px;line-height:1.4;color:var(--n-ink);
  letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:tabular-nums;
  margin:7px 0 0}

/* ---- band 1, the lead ---- */
.fp-lead{display:flex;flex-direction:column}
.lead__headline{font-family:var(--display);font-weight:900;font-size:var(--fp-lead);
  line-height:var(--fp-lead-lh);letter-spacing:-.006em;text-wrap:balance;margin:0 0 14px}
.lead__standfirst{font-family:var(--serif);font-size:var(--fp-standfirst);
  line-height:var(--fp-standfirst-lh);color:var(--ink-soft);max-width:62ch;margin:0 0 20px}
.lead__figure{margin:0}
.lead__figure .pic-link,.lead__figure .figure{display:block}
.lead__figure .pic{aspect-ratio:21/9}
.lead__text{margin:0}
.lead__figure .thumb{width:100%;height:100%}

/* ---- band 2, also reporting ---- */
.fp-also{display:grid;grid-template-columns:repeat(6,1fr);gap:30px 32px}
.fp-also>li{grid-column:span 2}
.fp-also>li:nth-child(-n+2){grid-column:span 3}
.fp-also .thumb{aspect-ratio:3/2;margin:0 0 12px}
.fp-also h3{font-family:var(--display);font-weight:700;font-size:var(--fp-second);
  line-height:1.18;margin:0 0 7px}
.fp-also p{font-family:var(--serif);font-size:16px;line-height:1.5;color:var(--ink-soft);
  margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---- band 3, more reporting ---- */
.fp-more{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 36px}
.fp-more a{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:start}
.fp-more .thumb{aspect-ratio:1}
.fp-more h3{font-family:var(--display);font-weight:700;font-size:var(--fp-rail);
  line-height:1.22;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---- band 4, everything else ---- */
.fp-rest{display:grid;grid-template-columns:repeat(3,1fr);column-gap:40px}
.fp-rest a{display:grid;grid-template-columns:1fr minmax(44px,auto);gap:12px;
  align-items:baseline;border-bottom:1px solid var(--line);padding:11px 0}
.fp-rest .hl{font-family:var(--serif);font-size:var(--fp-index);line-height:1.34;
  color:var(--ink-soft)}
.fp-rest .n{font-family:var(--cond);font-size:13px;line-height:1.4;
  font-variant-numeric:tabular-nums;text-align:right;color:var(--n-ink);white-space:nowrap}

/* ---- band 5, comment and notices ----------------------------------------
   Set in italic display, the way an op-ed page has been set for a century, so
   a reader can tell at a glance that they have left the reporting. ------- */
.fp-comment{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.fp-comment>li{border-top:1px solid var(--line);padding-top:16px}
.fp-comment .mono{font-family:var(--display);font-weight:900;font-size:30px;
  line-height:1;color:var(--line-strong);opacity:.4;display:block;margin-bottom:8px}
.fp-comment h3{font-family:var(--display);font-style:italic;font-weight:700;
  font-size:1.25rem;line-height:1.24;margin:0 0 9px}
.fp-comment p{font-family:var(--serif);font-size:15px;line-height:1.5;
  color:var(--ink-soft);margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.fp-comment .mark{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:11px;color:var(--muted)}

/* ---- the short rung -------------------------------------------------------
   A 1366x638 laptop has 638px of height, and the desktop lead package plus the
   masthead, nav, ledger and band label does not fit in it. Rather than pretend
   otherwise, a short viewport gets its own rung: tighter furniture, the lead
   one step down, and a wider standfirst measure so the same words take three
   lines instead of five. Lead to second is still 1.75. Nothing is clamped or
   hidden; the whole standfirst is on the page.
   Keyed on height AND width so a phone, which is narrow and short, is untouched.
--------------------------------------------------------------------------- */
@media (max-height:44em) and (min-width:64em){
  .util,.strip{display:none}
  /* "The lead" sits immediately above the lead story and, on a screen this
     short, says nothing the page has not already said with size. It stays in
     the document for a screen reader and gives its 32px to the picture. */
  .fp-band:first-of-type>.fp-band__label{position:absolute;width:1px;height:1px;
    padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .mast .wrap{padding-top:7px;padding-bottom:6px}
  /* the strapline is the masthead's proposition, and on a screen this short the
     ledger states the same proposition in numbers one line below it. One of
     them can go, and the numbers are the more useful of the two. */
  .mast-strap{display:none}
  .wordmark{font-size:1.875rem}
  .nav-item>a{padding:7px 13px;font-size:13px}
  main{padding-top:9px}
  .ledger{padding:6px 0 7px;margin-bottom:11px;font-size:13.5px;gap:14px}
  .ledger b{font-size:15px}
  .fp-band__label{padding-top:7px;margin-bottom:11px}
  .fp-band{margin-bottom:34px}
  .fp{--fp-lead:2.625rem; --fp-lead-lh:1.04; --fp-second:1.5rem;
      --fp-standfirst:1.0625rem; --fp-standfirst-lh:1.5}
  .kicker{margin-bottom:7px}
  .lead__headline{margin-bottom:10px}
  /* a wider measure, not a smaller face: the same words in fewer lines */
  .lead__standfirst{max-width:108ch;margin-bottom:12px}
}

/* ---- the narrow rung. The lead is the only full width picture on a phone. ---- */
@media(max-width:43.6875em){
  .fp-band{margin-bottom:34px}
  .lead__figure{aspect-ratio:16/9}
  .fp-also{grid-template-columns:1fr;gap:22px}
  .fp-also>li,.fp-also>li:nth-child(-n+2){grid-column:auto}
  .fp-also a{display:grid;grid-template-columns:34% 1fr;gap:14px;align-items:start}
  .fp-also .thumb{aspect-ratio:3/2;margin:0}
  .fp-also p{display:none}
  .fp-more{grid-template-columns:1fr;gap:18px}
  .fp-rest{grid-template-columns:1fr}
  .fp-comment{grid-template-columns:1fr;gap:22px}
}
@media(min-width:43.75em) and (max-width:64em){
  .fp-comment{grid-template-columns:repeat(2,1fr)}
}