@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/playfair-display-italic-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/playfair-display-italic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/playfair-display-normal-400_800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/playfair-display-normal-400_800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-normal-400_700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-normal-400_700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/jetbrains-mono-normal-400_600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/jetbrains-mono-normal-400_600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
--ground:#161210;--paper:#F7F4EC;--paper-2:#EBE8E0;--accent:#1F5C3A;--accent-text:#1F5C3A;
--accent-strong:#1F5C3A;--on-accent:#FFFFFF;--accent-on-ground:#356C4E;
--head:#161210;--ink:#120F0D;--ink-2:#5E5A56;--rule:#D3D0C9;--rule-strong:#999590;
--on-ground:#F7F4EC;--on-ground-2:#B8AE9C;--ground-line:#433F3C;
--error:#A4161A;--ok:#1E6B3A;
--f-head:'Playfair Display', Georgia, 'Times New Roman', serif;--f-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;--f-mono:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;--f-dek:'Playfair Display', Georgia, 'Times New Roman', serif;
--head-weight:700;--head-track:0;
--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235E5A56' stroke-width='2'/%3E%3C/svg%3E");
}
/* Newsroom shared stylesheet. Site tokens (:root) and @font-face rules are prepended by build.py. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  font-kerning: normal;
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only { 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: 16px; top: -60px; z-index: 50; background: var(--paper); color: var(--ink); padding: 8px 14px; font-family: var(--f-mono); font-size: 13px; }
.skip:focus { top: 8px; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 28px; } }

/* Mono metadata: the brand's one uppercase register */
.mono, .kicker, .meta, .ad-label, .ticker-label, .ribbon, .byline-sub, .pager, .crumbs {
  font-family: var(--f-mono);
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kicker { color: var(--accent-text); display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 8px; }
.kicker a { text-decoration: none; color: inherit; }
.kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kicker .label { color: var(--ink-2); padding-left: 12px; border-left: 1px solid var(--rule-strong); }
.meta { color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; }
.meta > * + * { padding-left: 14px; border-left: 1px solid var(--rule-strong); }

/* The accent bar: the device from the wordmark, used to open sections */
.bar::before { content: ""; display: block; width: 56px; height: 4px; background: var(--accent); margin-bottom: 14px; }

h1, h2, h3, h4 { font-family: var(--f-head); color: var(--head); font-weight: var(--head-weight); letter-spacing: var(--head-track); margin: 0; text-wrap: balance; }
h1 { line-height: 1.08; }
h2, h3 { line-height: 1.16; }

/* Preview ribbon */
.ribbon { background: var(--accent-strong); color: var(--on-accent); text-align: center; padding: 7px 16px; font-size: 11.5px; }

/* Masthead */
.mast { background: var(--ground); color: var(--on-ground); }
.mast-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 14px; }
.brand { display: block; flex: 0 1 auto; min-width: 0; }
.brand img { width: min(240px, 100%); height: auto; }
@media (min-width: 720px) { .brand img { height: 46px; width: auto; max-width: none; } .mast-row { padding-top: 24px; padding-bottom: 20px; } }
.mast-util { display: none; align-items: center; gap: 22px; font-family: var(--f-body); font-size: 15px; }
.mast-util a { color: var(--on-ground); text-decoration: none; }
.mast-util a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.mast-util .btn-sub { border: 1px solid var(--on-ground-2); padding: 7px 14px; }
.mast-util .btn-sub:hover { border-color: var(--on-ground); text-decoration: none; }
@media (min-width: 900px) { .mast-util { display: flex; } }
.menu-btn { flex: 0 0 auto; appearance: none; background: transparent; color: var(--on-ground); border: 1px solid var(--on-ground-2); font: 500 14px/1 var(--f-body); padding: 10px 14px; cursor: pointer; display: inline-flex; gap: 10px; align-items: center; }
.menu-btn .bars { width: 16px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; }
.menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid currentColor; }
@media (min-width: 900px) { .menu-btn { display: none; } }

.sections { border-top: 1px solid var(--ground-line); }
.sections ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.sections ul::-webkit-scrollbar { display: none; }
.sections a { display: block; padding: 11px 0 10px; color: var(--on-ground); text-decoration: none; font-size: 15px; border-bottom: 3px solid transparent; }
.sections a:hover, .sections a[aria-current="page"] { border-bottom-color: var(--accent); }

.drawer { display: none; background: var(--ground); color: var(--on-ground); border-top: 1px solid var(--ground-line); }
.drawer.open { display: block; }
.drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; padding-top: 20px; padding-bottom: 26px; }
.drawer h2 { font-family: var(--f-mono); font-weight: 400; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ground-2); margin-bottom: 8px; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer a { color: var(--on-ground); text-decoration: none; display: block; padding: 5px 0; font-size: 15.5px; }
@media (min-width: 900px) { .drawer, .drawer.open { display: none; } }

/* Ticker */
.ticker { background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.ticker-row { display: flex; align-items: center; gap: 14px; min-height: 44px; }
.ticker-label { flex: 0 0 auto; color: var(--head); display: inline-flex; align-items: center; gap: 8px; }
.ticker-label::before { content: ""; width: 8px; height: 8px; background: var(--accent); }
.ticker-track { flex: 1 1 auto; overflow: hidden; position: relative; }
.ticker-move { display: flex; width: max-content; animation: ticker 120s linear infinite; }
.ticker:hover .ticker-move, .ticker:focus-within .ticker-move { animation-play-state: paused; }
.ticker-list { display: flex; list-style: none; margin: 0; padding: 0 0 0 24px; gap: 0; }
.ticker-list li { white-space: nowrap; font-size: 14.5px; padding-right: 30px; }
.ticker-list li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; background: var(--rule-strong); margin-right: 30px; vertical-align: middle; }
.ticker-list a { text-decoration: none; color: var(--ink); }
.ticker-list a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.ticker-list time { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-2); margin-right: 8px; letter-spacing: 0.04em; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-move { animation: none; width: auto; }
  .ticker-track { overflow-x: auto; }
  .ticker-list[aria-hidden="true"] { display: none; }
}

/* Generic layout */
main { display: block; }
.section { padding: 36px 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 20px; }
.section-head h2 { font-size: 24px; }
.section-head .more { font-family: var(--f-body); font-size: 15px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.section-head .more:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }

/* Story units */
.story h3 a, .story h2 a, .lead h2 a, .list-item a.hl { text-decoration: none; color: var(--head); }
.story h3 a:hover, .story h2 a:hover, .lead h2 a:hover, .list-item a.hl:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.story .dek { margin: 8px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.story h3 { font-size: 20px; }
.thumb { display: block; background: var(--ground); aspect-ratio: 16 / 9; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Home: lead */
.lead { display: grid; gap: 18px; padding-top: 26px; padding-bottom: 32px; }
.lead .cover { order: -1; }
.lead h2 { font-size: clamp(30px, 6.4vw, 52px); line-height: 1.06; }
.lead-mid h2 { font-size: clamp(29px, 5.6vw, 44px); }
.lead-long h2 { font-size: clamp(27px, 5vw, 38px); line-height: 1.1; }
.lead .dek { font-size: 18.5px; line-height: 1.5; color: var(--ink-2); margin: 14px 0 0; max-width: 34em; }
.lead .byline { margin-top: 18px; }
@media (min-width: 900px) {
  .lead { grid-template-columns: 5fr 7fr; gap: 44px; align-items: center; padding-top: 40px; padding-bottom: 44px; }
  .lead-long { grid-template-columns: 6fr 6fr; }
  .lead .cover { order: 0; }
}

.home-grid { display: grid; gap: 32px; padding-bottom: 36px; }
.secondary { display: grid; gap: 0; }
.secondary .story { padding: 18px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 112px; column-gap: 14px; row-gap: 0; align-items: start; }
.secondary .story .thumb { grid-column: 2; grid-row: 1 / span 3; }
.secondary .story .dek { display: none; }
@media (min-width: 640px) {
  .secondary { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .secondary .story { display: block; padding: 22px 0; }
  .secondary .story .thumb { margin-bottom: 14px; }
  .secondary .story .dek { display: block; }
}
@media (min-width: 1024px) {
  .home-grid { grid-template-columns: 8fr 4fr; gap: 44px; }
  .secondary { column-gap: 32px; }
  .secondary .story h3 { font-size: 22px; }
}
.rail h2 { font-size: 20px; margin-bottom: 4px; }
.latest-list { list-style: none; margin: 0 0 28px; padding: 0; counter-reset: none; }
.list-item { padding: 13px 0; border-top: 1px solid var(--rule); }
.list-item .hl { font-family: var(--f-head); font-weight: var(--head-weight); font-size: 17px; line-height: 1.25; letter-spacing: var(--head-track); }
.list-item .meta { margin-top: 6px; font-size: 11.5px; }

/* Ads */
.ad { margin: 0 auto; text-align: center; }
.ad-label { display: block; color: var(--ink-2); font-size: 10.5px; margin-bottom: 6px; text-align: left; }
.ad a { display: block; border: 1px solid var(--rule); }
.ad-leader { max-width: 970px; padding: 28px 0; }
.ad-mpu { width: 300px; max-width: 100%; }
.ad-inline { max-width: 728px; margin: 34px 0; }
.ad-sidebar { width: 300px; }
.ad-band { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

/* Columns strip */
.columns-band { background: var(--ground); color: var(--on-ground); padding: 40px 0 44px; }
.columns-band .section-head h2 { color: var(--on-ground); }
.columns-band .section-head .more { color: var(--on-ground-2); }
.columns-band .section-head .more:hover { color: var(--on-ground); }
.col-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.col-strip li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-content: start; padding: 16px 0; border-top: 1px solid var(--ground-line); }
.col-strip img { width: 64px; height: 64px; }
.col-strip .col-name { font-family: var(--f-head); font-weight: var(--head-weight); font-size: 19px; color: var(--on-ground); text-decoration: none; letter-spacing: var(--head-track); }
.col-strip .col-name:hover { text-decoration: underline; text-decoration-color: var(--accent-on-ground); }
.col-strip .col-role { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ground-2); margin: 2px 0 8px; }
.col-strip .col-piece { color: var(--on-ground); font-size: 15.5px; line-height: 1.4; text-decoration: none; }
.col-strip .col-piece:hover { text-decoration: underline; text-decoration-color: var(--accent-on-ground); }
.col-strip .col-beat { color: var(--on-ground-2); font-size: 15px; line-height: 1.45; margin: 0; }
@media (min-width: 720px) { .col-strip { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
@media (min-width: 1100px) {
  .col-strip { grid-template-columns: repeat(var(--col-count, 5), 1fr); column-gap: 28px; }
  .col-strip li { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--ground-line); padding: 0 0 0 20px; }
  .col-strip li:first-child { border-left: 0; padding-left: 0; }
  .col-strip img { width: 80px; height: 80px; margin-bottom: 4px; }
}

/* Category rails */
.cat-rail { display: grid; gap: 18px; padding: 34px 0; border-top: 1px solid var(--rule); }
.cat-rail:first-child { border-top: 0; }
.cat-rail .cat-intro h2 { font-size: 26px; }
.cat-rail .cat-intro h2 a { text-decoration: none; color: var(--head); }
.cat-rail .cat-intro h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.cat-rail .cat-intro p { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.cat-rail .cat-intro .more { display: inline-block; margin-top: 10px; font-size: 15px; color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 4px; }
.cat-stories { display: grid; gap: 0; }
.cat-stories .story { padding: 14px 0; border-top: 1px solid var(--rule); }
.cat-stories .story:first-child { border-top: 0; padding-top: 0; }
.cat-stories .story.first .thumb { margin-bottom: 12px; }
.cat-stories .story.first h3 { font-size: 22px; }
.cat-stories .story h3 { font-size: 18px; }
@media (min-width: 900px) {
  .cat-rail { grid-template-columns: 3fr 9fr; gap: 40px; }
  .cat-stories { grid-template-columns: 5fr 4fr; column-gap: 32px; }
  .cat-stories .story.first { grid-row: 1 / span 3; border-top: 0; padding-top: 0; }
  .cat-stories .story:nth-child(2) { border-top: 0; padding-top: 0; }
}

/* Newsletter block */
.signup { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 40px 0; }
.signup-grid { display: grid; gap: 20px; }
.signup h2 { font-size: clamp(26px, 4vw, 34px); }
.signup p { margin: 10px 0 0; color: var(--ink-2); max-width: 36em; }
@media (min-width: 900px) { .signup-grid { grid-template-columns: 6fr 6fr; gap: 48px; align-items: center; } }

/* Forms */
.form { display: grid; gap: 14px; }
.form .row { display: grid; gap: 14px; }
@media (min-width: 640px) { .form .row.two { grid-template-columns: 1fr 1fr; } }
.field label, .field .legend { display: block; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font: 16px/1.4 var(--f-body); color: var(--ink); background: #fff;
  border: 1px solid var(--rule-strong); border-radius: 0; padding: 11px 12px; appearance: none;
}
.field select { background-image: var(--select-arrow); background-position: calc(100% - 14px) 50%; background-size: 12px 8px; background-repeat: no-repeat; padding-right: 36px; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--head); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--error); }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; }
.inline-form .field { flex: 1 1 240px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.btn { appearance: none; border: 0; border-radius: 0; background: var(--ground); color: var(--on-ground); font: 600 16px/1 var(--f-body); padding: 14px 22px; cursor: pointer; min-height: 46px; }
.btn:hover { background: var(--head); box-shadow: inset 0 -3px 0 var(--accent); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn-line { display: inline-block; border: 1px solid var(--head); color: var(--head); padding: 12px 18px; text-decoration: none; font-weight: 600; }
.btn-line:hover { box-shadow: inset 0 -3px 0 var(--accent); }
.form-note { font-size: 14px; color: var(--ink-2); margin: 0; }
.form-status { font-size: 15.5px; margin: 0; min-height: 1.4em; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--error); }
.field-error { color: var(--error); font-size: 14px; margin: 6px 0 0; }
.inline-form .btn { align-self: flex-end; }

/* Article */
.article-head { padding-top: 30px; max-width: 880px; }
.article-head h1 { font-size: clamp(31px, 5.6vw, 52px); }
.article-head .dek { font-size: clamp(18.5px, 2.4vw, 22px); line-height: 1.45; color: var(--ink-2); margin: 16px 0 0; max-width: 38em; font-family: var(--f-dek); }
.byline { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; margin-top: 22px; }
.byline img { width: 52px; height: 52px; }
.byline-main { font-size: 15.5px; line-height: 1.35; margin: 0; }
.byline-main a { color: var(--head); font-weight: 600; text-decoration: none; }
.byline-main a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.byline-sub { color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 5px; font-size: 11.5px; }
.byline-sub > * + * { padding-left: 12px; border-left: 1px solid var(--rule-strong); }
.byline-sub a { color: inherit; text-decoration: none; }
.byline-sub a:hover { text-decoration: underline; }
.lead .byline { grid-template-columns: 40px 1fr; }
.lead .byline img { width: 40px; height: 40px; }

.article-layout { display: grid; gap: 40px; padding-top: 26px; padding-bottom: 20px; }
@media (min-width: 1080px) { .article-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; } }
.article-main { min-width: 0; max-width: 720px; }
.cover-fig { margin: 0 0 28px; }
.cover-fig figcaption { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; }

.prose { font-size: 18px; line-height: 1.65; }
.prose > * { margin: 0 0 1.05em; }
.prose h2 { font-size: 24px; margin: 1.6em 0 0.6em; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose a:hover { color: var(--accent-text); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin: 0 0 0.45em; }
.prose li::marker { color: var(--accent-text); }
.prose strong { font-weight: 600; color: var(--head); }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; width: 100%; max-width: 100%; font-size: 14.5px; line-height: 1.4; margin: 1.4em 0 1.6em; font-variant-numeric: tabular-nums; -webkit-overflow-scrolling: touch; }
.prose th { text-align: left; font-family: var(--f-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--head); padding: 8px 12px 8px 0; vertical-align: bottom; min-width: 90px; }
.prose td { border-bottom: 1px solid var(--rule); padding: 9px 12px 9px 0; vertical-align: top; min-width: 90px; }
.prose td a { overflow-wrap: normal; }

.sources { margin-top: 40px; padding-top: 22px; border-top: 2px solid var(--head); }
.sources h2 { font-size: 20px; margin-bottom: 12px; }
.sources ol { margin: 0; padding-left: 1.4em; font-size: 15.5px; line-height: 1.45; }
.sources li { margin-bottom: 10px; }
.sources li::marker { font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); }
.sources a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; overflow-wrap: anywhere; }
.sources .src-meta { display: block; color: var(--ink-2); font-size: 14px; }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 30px; padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.share .mono { color: var(--ink-2); }
.share a { font-size: 15.5px; color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 4px; }

.col-box { display: grid; grid-template-columns: 72px 1fr; gap: 16px; margin-top: 30px; padding: 20px; background: var(--paper-2); border-left: 4px solid var(--accent); }
.col-box img { width: 72px; height: 72px; }
.col-box h2 { font-size: 19px; }
.col-box h2 a { color: var(--head); text-decoration: none; }
.col-box h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.col-box p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

.aside-sticky { position: sticky; top: 20px; display: grid; gap: 32px; }
.article-aside { display: none; }
@media (min-width: 1080px) { .article-aside { display: block; } }
.aside-list h2 { font-size: 18px; margin-bottom: 6px; }

.related { padding: 34px 0 44px; border-top: 1px solid var(--rule); margin-top: 20px; }
.related-grid { display: grid; gap: 0; }
.related-grid .story { padding: 16px 0; border-top: 1px solid var(--rule); }
.related-grid .story .thumb { margin-bottom: 12px; }
.related-grid .story h3 { font-size: 18.5px; }
@media (min-width: 640px) { .related-grid { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
@media (min-width: 1024px) { .related-grid { grid-template-columns: repeat(4, 1fr); } .related-grid .story { border-top: 0; padding-top: 0; } }

/* Index pages */
.page-head { padding: 34px 0 24px; border-bottom: 1px solid var(--rule); }
.page-head h1 { font-size: clamp(32px, 5.6vw, 50px); }
.page-head .intro { margin: 12px 0 0; font-size: 18.5px; line-height: 1.5; color: var(--ink-2); max-width: 40em; }
.page-head .crumbs { color: var(--ink-2); margin-bottom: 12px; }
.page-head .crumbs a { color: inherit; text-decoration: none; }
.page-head .crumbs a:hover { text-decoration: underline; }
.entity-head { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.entity-head img { width: 120px; height: 120px; }
@media (min-width: 720px) { .entity-head { grid-template-columns: 160px 1fr; gap: 32px; } .entity-head img { width: 160px; height: 160px; } }
.disclosure { margin: 18px 0 0; padding: 14px 16px; border-left: 3px solid var(--accent); background: var(--paper-2); font-size: 15px; line-height: 1.5; color: var(--ink); max-width: 46em; }

.index-list { list-style: none; margin: 0; padding: 0; }
.index-list .story { display: grid; grid-template-columns: 1fr 112px; column-gap: 16px; row-gap: 0; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.index-list .story .thumb { grid-column: 2; grid-row: 1 / span 3; }
.index-list .story h3 { font-size: 19px; }
.index-list .story .dek { display: none; }
@media (min-width: 720px) {
  .index-list .story { grid-template-columns: 240px 1fr; column-gap: 28px; align-content: start; }
  .index-list .story .thumb { grid-column: 1; grid-row: 1 / span 4; }
  .index-list .story h3 { font-size: 23px; }
  .index-list .story .dek { display: block; max-width: 40em; }
}
.index-layout { display: grid; gap: 36px; padding-top: 10px; padding-bottom: 44px; }
@media (min-width: 1080px) { .index-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; } }
.empty { padding: 34px 0; color: var(--ink-2); font-size: 18px; max-width: 38em; }
.pager { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pager a, .pager span { padding: 9px 13px; border: 1px solid var(--rule-strong); text-decoration: none; color: var(--ink); }
.pager span[aria-current] { background: var(--ground); color: var(--on-ground); border-color: var(--ground); }
.pager a:hover { border-color: var(--head); }

.col-cards { list-style: none; margin: 0; padding: 26px 0 10px; display: grid; gap: 0; }
.col-card { display: grid; grid-template-columns: 88px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--rule); }
.col-card img { width: 88px; height: 88px; }
.col-card h2 { font-size: 24px; }
.col-card h2 a { text-decoration: none; color: var(--head); }
.col-card h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.col-card .role { margin: 4px 0 8px; color: var(--accent-text); }
.col-card p { margin: 0 0 8px; font-size: 16px; line-height: 1.5; }
.col-card .latest { font-size: 15px; color: var(--ink-2); }
.col-card .latest a { color: var(--ink); text-decoration-color: var(--accent); }
@media (min-width: 900px) { .col-cards { grid-template-columns: 1fr 1fr; column-gap: 48px; } .col-card { grid-template-columns: 120px 1fr; } .col-card img { width: 120px; height: 120px; } }

/* Static pages */
.doc-layout { display: grid; gap: 30px; padding-top: 34px; padding-bottom: 54px; }
@media (min-width: 960px) { .doc-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 64px; } }
.doc-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
@media (min-width: 960px) { .doc-nav ul { display: block; border-top: 2px solid var(--head); } .doc-nav li { border-bottom: 1px solid var(--rule); } }
.doc-nav a { display: block; padding: 8px 0; font-size: 15.5px; color: var(--ink-2); text-decoration: none; }
.doc-nav a:hover, .doc-nav a[aria-current="page"] { color: var(--head); }
.doc-nav a[aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; }
.doc { max-width: 720px; }
.doc h1 { font-size: clamp(32px, 5.4vw, 48px); margin-bottom: 18px; }
.doc h2 { font-size: 24px; margin: 1.6em 0 0.5em; }
.doc h3 { font-size: 19px; margin: 1.3em 0 0.4em; }
.doc p, .doc ul, .doc ol { margin: 0 0 1em; }
.doc li { margin-bottom: 0.4em; }
.doc li::marker { color: var(--accent-text); }
.doc a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.doc .lede { font-size: 20px; line-height: 1.5; color: var(--ink-2); }
.doc .note { border-left: 3px solid var(--accent); background: var(--paper-2); padding: 14px 16px; font-size: 15.5px; }
.emails { list-style: none; padding: 0; margin: 0 0 1.4em; border-top: 1px solid var(--rule); }
.emails li { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--rule); margin: 0; }
.emails .addr { font-family: var(--f-mono); font-size: 14.5px; color: var(--head); overflow-wrap: anywhere; }
@media (min-width: 640px) { .emails li { grid-template-columns: 220px 1fr; gap: 16px; } }

/* Advertise */
.rate-wrap { margin: 18px 0 8px; }
.launch-tag { display: inline-block; background: var(--ground); color: var(--on-ground); padding: 6px 10px; margin-bottom: 14px; }
.rates { width: 100%; border-collapse: collapse; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.rates th { text-align: left; font-family: var(--f-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--head); padding: 8px 10px 8px 0; }
.rates td { border-bottom: 1px solid var(--rule); padding: 12px 10px 12px 0; vertical-align: top; }
.rates td.price { font-family: var(--f-head); font-weight: var(--head-weight); font-size: 20px; color: var(--head); white-space: nowrap; }
.rates td.place { font-weight: 600; color: var(--head); }
.rates .sub { display: block; font-weight: 400; color: var(--ink-2); font-size: 14px; }
@media (max-width: 639px) {
  .rates thead { display: none; }
  .rates tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .rates td { border: 0; padding: 0; }
  .rates td.place { grid-column: 1; }
  .rates td.price { grid-column: 2; grid-row: 1; text-align: right; }
  .rates td.dims, .rates td.dur { grid-column: 1 / -1; font-size: 14px; color: var(--ink-2); }
}
.placements { display: grid; gap: 26px; margin: 20px 0; }
.placement { border-top: 1px solid var(--rule); padding-top: 18px; display: grid; gap: 12px; }
.placement h3 { font-size: 20px; margin: 0; }
.placement p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.placement .vis { background: var(--paper-2); padding: 14px; display: flex; justify-content: center; align-items: center; }
.placement .vis img { border: 1px solid var(--rule); }
.placement .vis.tall img { width: 150px; }
.placement .vis.mpu img { width: 240px; }
.placement .vis picture { display: block; min-width: 0; }   /* the leaderboard and inline previews, with the phone art */
@media (min-width: 900px) { .placement { grid-template-columns: 1fr 1.25fr; gap: 28px; align-items: center; } }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li { counter-increment: step; position: relative; padding-left: 44px; margin-bottom: 14px; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; background: var(--ground); color: var(--on-ground); font-family: var(--f-mono); font-size: 13px; }
.kit-link { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 22px 0; }

/* Footer */
.foot { background: var(--ground); color: var(--on-ground); padding: 46px 0 30px; margin-top: 0; }
.foot-top { display: grid; gap: 28px; padding-bottom: 30px; border-bottom: 1px solid var(--ground-line); }
.foot-brand img { height: 36px; width: auto; }
.foot-brand p { color: var(--on-ground-2); font-size: 15px; line-height: 1.55; max-width: 30em; margin: 14px 0 0; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; }
.foot h2 { font-family: var(--f-mono); font-weight: 400; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ground-2); margin-bottom: 10px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 0 0 6px; }
.foot a { color: var(--on-ground); text-decoration: none; font-size: 15px; }
.foot a:hover { text-decoration: underline; text-decoration-color: var(--accent-on-ground); text-underline-offset: 4px; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 20px; color: var(--on-ground-2); font-size: 13.5px; }
.foot-base p { margin: 0; }
@media (min-width: 720px) { .foot-cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .foot-top { grid-template-columns: 4fr 8fr; gap: 56px; } .foot-cols { grid-template-columns: repeat(5, 1fr); } }

/* 404 */
.notfound { padding-top: 60px; padding-bottom: 70px; max-width: 816px; margin-left: auto; margin-right: auto; }
.notfound h1 { font-size: clamp(34px, 6vw, 56px); }
.notfound p { font-size: 19px; color: var(--ink-2); }

@media print {
  .mast, .ticker, .ad, .ad-band, .foot, .share, .article-aside, .related, .ribbon, .signup { display: none !important; }
  body { background: #fff; }
}

/* Additions */
.thumb.cover-full { aspect-ratio: 1200 / 630; }
.col-strip.col-n4 { --col-count: 4; }
.col-strip.col-n5 { --col-count: 5; }
.col-header { padding-top: 24px; }
.col-header img { width: 100%; }
/* Paid placements: labels, sponsor lines, partner content (plans/AD-PLAN.md section 1.7) */
.ad picture { display: block; }
.ad picture img { width: 100%; }
/* The house phone art (build.py HOUSE_PHONE, 320 x 100 stored at 3x) in the leaderboard and the inline under 720 px:
   no wider than 480 px, where it is still sharp on a 2x screen and no taller than the 970 x 250 art above 720 px */
@media (max-width: 719px) { aside.ad.has-phone-art { max-width: 480px; } }
.ad .ad-label a { display: inline; border: 0; color: inherit; text-underline-offset: 2px; }
.ad-disclosure { margin: 28px 0 0; padding: 12px 16px; border-left: 3px solid var(--rule-strong); background: var(--paper-2); font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.sponsor-line { margin: 14px 0 0; font-family: var(--f-mono); font-size: 12.5px; line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.sponsor-line a, .supported-by .sponsor-link, .sponsor-about a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.byline.byline-partner { grid-template-columns: 1fr; }
.byline-partner .byline-main { color: var(--head); font-weight: 600; }
.sponsor-about { margin-top: 30px; padding: 18px 20px; background: var(--paper-2); border-left: 4px solid var(--accent); }
.sponsor-about h2 { font-size: 19px; margin: 0 0 8px; }
.sponsor-about p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.supported-by { margin: 16px 0 0; font-size: 15px; color: var(--ink-2); }
.supported-by p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.supported-by .sb-label { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.supported-by img { width: 200px; height: auto; }
.supported-by .sb-how { color: var(--ink-2); font-size: 14px; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.supported-by.sb-foot { margin: 28px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); }
.supported-by .sb-rule { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; }
.sponsored-card { margin: 22px 0; padding: 14px 0 16px; border-top: 2px solid var(--accent); border-bottom: 1px solid var(--rule); }
.sponsored-card h3 { font-size: 18px; margin: 2px 0 6px; }
.sponsored-card h3 a { color: var(--head); text-decoration: none; }
.sponsored-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.partner-list { list-style: none; margin: 0; padding: 10px 0 44px; max-width: 46em; }
.partner-list li { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.partner-list h2 { font-size: 23px; margin: 0 0 6px; }
.partner-list h2 a { color: var(--head); text-decoration: none; }
.partner-list h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.partner-list .dek { margin: 0 0 8px; color: var(--ink-2); }

/* Column pages: character and specialisation, between the disclosure and the column's pieces */
.col-profile { max-width: 46em; padding-top: 4px; }
.col-jump { margin: 0 0 16px; font-size: 15px; }
.col-jump a { color: var(--ink-2); text-decoration-color: var(--accent); text-underline-offset: 4px; }
.col-jump a:hover { color: var(--ink); }
.col-lede { margin: 0; font-family: var(--f-dek); font-size: clamp(19px, 2.3vw, 21px); line-height: 1.5; color: var(--ink); }
.col-q { margin: 26px 0 0; padding: 18px 20px 20px; background: var(--paper-2); border-left: 4px solid var(--accent); }
.col-q h2 { font-family: var(--f-mono); font-weight: 400; font-size: 12.5px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 8px; }
.col-q p { margin: 0; font-family: var(--f-head); font-weight: var(--head-weight); letter-spacing: var(--head-track); font-size: clamp(21px, 3vw, 26px); line-height: 1.25; color: var(--head); text-wrap: balance; }
.col-sec { margin-top: 38px; }
.col-sec h2 { font-size: 22px; margin: 0 0 12px; }
.col-sec h3 { font-size: 18px; margin: 26px 0 8px; }
.col-sec p { margin: 0 0 12px; }
.col-sec a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.col-list { margin: 0; padding-left: 1.2em; }
.col-list li { margin-bottom: 0.55em; line-height: 1.55; }
.col-list li::marker { color: var(--accent-text); }
.col-when { display: block; margin-top: 2px; font-family: var(--f-mono); font-size: 12px; line-height: 1.45; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.col-dl { margin: 0; border-bottom: 1px solid var(--rule); }
.col-dl > div { padding: 12px 0; border-top: 1px solid var(--rule); }
.col-dl dt { font-weight: 600; color: var(--head); line-height: 1.4; }
.col-dl dd { margin: 4px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 720px) {
  .col-dl > div { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); gap: 0 24px; }
  .col-dl dd { margin: 0; }
}
.col-more { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.col-more summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 10px 0; cursor: pointer; list-style: none;
  font-family: var(--f-mono); font-size: 12.5px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.col-more summary::-webkit-details-marker { display: none; }
.col-more summary::after { content: "+"; flex: none; font-size: 20px; line-height: 1; color: var(--head); }
.col-more[open] summary::after { content: "\2212"; }
.col-more[open] summary { border-bottom: 1px solid var(--rule); }
.col-more .col-dl { border-bottom: 0; }
.col-more .col-dl > div:first-child, .col-more .col-list { border-top: 0; }
.col-more .col-list { padding-top: 12px; padding-bottom: 6px; }
.col-dl dd p { margin: 0 0 8px; }
.col-dl dd p:last-child { margin-bottom: 0; }
.col-dl dd .col-topic { color: var(--ink); font-weight: 500; }
.col-left + .col-list { margin-top: 18px; }
.col-never { margin-top: 16px; font-size: 16px; color: var(--ink-2); }
.col-never strong { color: var(--head); }
.col-pieces { margin: 52px 0 0; }
.chk-group { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.chk-group .legend { width: 100%; padding: 0; }
.chk { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; cursor: pointer; }
.chk input { width: 18px; height: 18px; accent-color: var(--ground); margin: 0; }

@media (max-width: 639px) {
  .secondary .story .meta > :nth-child(2), .index-list .story .meta > :nth-child(2) { display: none; }
  .byline-sub { letter-spacing: 0.04em; gap: 2px 9px; }
  .byline-sub > * + * { padding-left: 9px; }
  .ribbon { letter-spacing: 0.04em; }
}
.form-status:empty { min-height: 0; }
.placement .spec { font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); margin: 2px 0 6px; }
.aside-list .list-item .meta > :first-child { display: none; }
.aside-list .list-item .meta > :nth-child(2) { padding-left: 0; border-left: 0; }
@media (min-width: 720px) { .entity-head.no-mark { grid-template-columns: 1fr; } }
.entity-head.no-mark > div { max-width: 46em; }
.col-desc { margin: 12px 0 0; font-size: 17px; line-height: 1.55; max-width: 44em; }
.entity-head.no-mark .col-desc { font-size: 19px; line-height: 1.5; margin-top: 4px; }
/* Related parties and the editor avatar: the footer line on every page and the note under an article's dek */
.foot-disclosure { margin: 22px 0 0; max-width: 64em; color: var(--on-ground-2); font-size: 13.5px; line-height: 1.55; }
.related-party-note { margin: 18px 0 0; padding: 12px 16px; border-left: 3px solid var(--rule-strong); background: var(--paper-2); font-size: 15px; line-height: 1.5; color: var(--ink); max-width: 46em; }
/* The AI line under the byline of every article: the disclosure at first exposure */
.ai-line { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); max-width: 46em; }
.ai-line a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; white-space: nowrap; }
/* Photos (Wikimedia Commons): the caption and credit under a photo shown in full, a photo figure, /photo-credits */
figure.is-photo img { object-fit: cover; }
/* A photo's focus (build.py focus_classes): --fx and --fy, where its subject sits in the 16:9 file, as shares of
   its width and height (0 to 1, steps of .1; no class: .5, the centre). A box of another shape crops the file again
   (object-fit: cover). Here the focus is the object-position, which keeps the subject inside the box but not in its
   middle: a theme that knows its box's shape centres it with
   object-position: clamp(0%, (var(--fx, .5) - v / 2) / (1 - v) * 100%, 100%), v the share of the file's width the
   box shows (cs.css, its square thumbnails: v = 9 / 16), and the same with --fy for a box wider than 16:9. */
img:is([class^="fx-"], [class*=" fx-"], [class^="fy-"], [class*=" fy-"]) { object-position: calc(var(--fx, .5) * 100%) calc(var(--fy, .5) * 100%); }
.fx-0 { --fx: 0; } .fx-10 { --fx: .1; } .fx-20 { --fx: .2; } .fx-30 { --fx: .3; } .fx-40 { --fx: .4; }
.fx-60 { --fx: .6; } .fx-70 { --fx: .7; } .fx-80 { --fx: .8; } .fx-90 { --fx: .9; } .fx-100 { --fx: 1; }
.fy-0 { --fy: 0; } .fy-10 { --fy: .1; } .fy-20 { --fy: .2; } .fy-30 { --fy: .3; } .fy-40 { --fy: .4; }
.fy-60 { --fy: .6; } .fy-70 { --fy: .7; } .fy-80 { --fy: .8; } .fy-90 { --fy: .9; } .fy-100 { --fy: 1; }
.lead figure.cover { margin: 0; }
.photo-cap { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); margin-top: 8px; overflow-wrap: anywhere; }
.photo-credit { font-size: 12.5px; color: var(--ink-2); }
.photo-credit a[href*="creativecommons.org/"] { white-space: nowrap; }   /* the licence, never "CC BY-SA" over "3.0" */
.photo-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
ol.photo-list { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.photo-item { display: grid; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.photo-item img { width: 100%; }
/* the publication pages' side nav where it scrolls sideways (cs, bc): a fade at each edge that has more links */
ul.nav-more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); }
ul.nav-more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
ul.nav-more-l.nav-more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
p.photo-item-cap { margin: 0 0 8px; }
.photo-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.photo-facts dt { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 3px; }
.photo-facts dd { margin: 0; }
@media (min-width: 640px) { .photo-item { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; } }
/* /advertise: the hero under the h1 and the example pictures in the placement boxes, when the kit has them */
.adv-hero { margin: 0 0 22px; }
.adv-hero img { width: 100%; }
.placement .vis picture { display: block; min-width: 0; }
/* 404: the site's wordmark above the copy */
.notfound .nf-mark { width: min(300px, 100%); height: auto; margin-bottom: 30px; }

/* Insight Agent waitlist card (owner request, 24 October 2026; markup build.py insight_agent(), behaviour src/site.js).
   A card at the bottom right on a wide screen, a bottom sheet on a phone. Fixed, so it never moves the page. */
.ia { position: fixed; z-index: 60; right: 20px; bottom: 20px; width: 380px; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); border-top: 4px solid var(--accent);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24); padding: 20px 22px 16px; opacity: 0; transform: translateY(14px);
  transition: opacity 0.25s ease, transform 0.25s ease; }
.ia[hidden] { display: none; }
.ia.ia-open { opacity: 1; transform: none; }
.ia:focus { outline: none; }
.ia-close { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border: 0; background: none; color: var(--ink-2);
  font: 400 26px/1 var(--f-body); cursor: pointer; }
.ia-close:hover { color: var(--head); }
.ia-eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); margin: 0 40px 6px 0; }
.ia-title { font-size: 22px; line-height: 1.15; margin: 0 40px 8px 0; }
.ia-desc { font-size: 15.5px; line-height: 1.5; margin: 0 0 6px; }
.ia-note { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); margin: 0 0 14px; }
.ia-form { gap: 10px; }
.ia-form .field input, .ia-form .field select { width: 100%; }
.ia-form .btn { width: 100%; }
.ia-form .form-note { font-size: 12.5px; line-height: 1.45; }
@media (max-width: 600px) {
  .ia { left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 88vh; border-left: 0; border-right: 0; border-bottom: 0;
    padding: 18px 16px calc(14px + env(safe-area-inset-bottom)); transform: translateY(100%); box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.22); }
  .ia.ia-open { transform: none; }
  .ia-title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .ia { transition: none; } }

/* Body figures (build.py insert_body_figure; owner rule of 25 October 2026: a picture in every piece's body): the top
   of the primary document's first page as published, in a paper frame, or a chart of figures from the documents, as
   bars whose text keeps its size on a phone (the bar is an SVG scaled to its track: no style attribute under the CSP). */
.prose .body-fig { margin: 30px 0 32px; }
.prose .body-doc picture { display: block; border: 1px solid var(--rule-strong); background: #FFFFFF;
  box-shadow: 0 1px 0 var(--rule), 0 12px 26px -16px rgba(0, 0, 0, 0.38); }
.prose .body-doc img { display: block; width: 100%; height: auto; }
.prose .body-doc-link { display: block; text-decoration: none; }
.prose .body-doc-link:hover picture, .prose .body-doc-link:focus-visible picture { border-color: var(--accent); }
.prose .body-fig figcaption { margin-top: 10px; font: 14px/1.5 var(--f-body); letter-spacing: 0; color: var(--ink-2); text-wrap: pretty; }
.prose .body-chart { padding: 16px 0 14px; border-top: 2px solid var(--head); border-bottom: 1px solid var(--rule); }
.prose .body-chart figcaption { margin: 0 0 14px; }
.chart-title { display: block; font: 600 17px/1.35 var(--f-head); color: var(--head); }
.chart-unit { display: block; margin-top: 3px; font: 13px/1.5 var(--f-mono); color: var(--ink-2); }
.chart-rows { display: grid; gap: 9px; }
.chart-row { display: grid; grid-template-columns: minmax(5.5em, 32%) minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.chart-label { font: 14.5px/1.3 var(--f-body); color: var(--ink); overflow-wrap: anywhere; }
.chart-track { display: block; width: 100%; height: 14px; }
.chart-bar { fill: var(--rule-strong); }
.chart-row.is-hl .chart-bar { fill: var(--accent); }
.chart-row.is-hl .chart-label, .chart-row.is-hl .chart-value { color: var(--head); font-weight: 700; }
.chart-value { font: 600 13.5px/1.3 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-source { margin-top: 12px; font: 12.5px/1.5 var(--f-mono); color: var(--ink-2); }

/* Boards and Capital (bc): "The Register". A broadsheet paper of record for boardrooms.
   Appended after src/site.css; markup in themes/bc.py. Ivory paper, near-black ink, deep green used as an accent
   (rules, kickers, current states). Playfair Display large and sparing, Inter for text and interface, JetBrains Mono
   for figures and dates. Phone first: base rules are for 390 px, min-width queries add the broadsheet.
   Contrast (WCAG): ink 17:1, ink-2 8:1, ink-3 6:1 and the green 7.2:1 on the paper; ink-3 stays above 5:1 on the
   tints. No inline styles, no external files. */

:root {
  --paper: #F7F4EC;
  --paper-2: #EFEADF;
  --ink: #15110F;
  --head: #15110F;
  --ink-2: #4F4943;
  --ink-3: #625B53;
  --rule: #D2CABC;
  --rule-strong: #857D71;
  --accent: #1F5C3A;
  --accent-text: #1F5C3A;
  --accent-strong: #1F5C3A;
  --on-accent: #F7F4EC;
  --field: #FFFDF8;
}

body { background: var(--paper); color: var(--ink); }
::selection { background: #CFDFD1; color: var(--ink); }
.wrap { max-width: 1400px; }
a { text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  a, .btn, .btn-line { transition: color 120ms ease-out, background-color 120ms ease-out, text-decoration-color 120ms ease-out; }
}

/* Small caps: the vendored faces carry no smcp, so the small caps are capitals, set small and tracked */
.bc-sh, .bc-label, .bc-nav a, .bc-docnav a, .kicker, .bc-reg-label, .bc-reg-sub, .bc-col-role, .bc-col-latest span,
.bc-foot h2, .bc-drawer h2, .bc-menu, .share .mono, .bc-dec-table th, .sources h2, .bc-more, .col-q h2,
.bc-util a, .col-more summary {
  font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em;
}

/* Headline links: block links with a padded hit area (44 px on one line) and no shift in the layout */
.bc-story h3 a, .bc-lead h2 a, .bc-row h2 a, .bc-row h3 a, .bc-sf-lead h3 a, .bc-reg-feature h3 a,
.bc-related h3 a, .bc-col h3 a, .bc-colcard h2 a {
  display: block; padding: 10px 0; margin: -10px 0; color: var(--head); text-decoration: none;
}
.bc-story h3 a:hover, .bc-lead h2 a:hover, .bc-row h2 a:hover, .bc-row h3 a:hover, .bc-sf-lead h3 a:hover,
.bc-reg-feature h3 a:hover, .bc-related h3 a:hover, .bc-col h3 a:hover, .bc-colcard h2 a:hover {
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px;
}

/* Small standalone links: padding widens the hit area to 44 px and a matching negative margin keeps the layout */
.kicker a { padding: 15px 0; margin: -15px 0; }
.bc-sh a, .byline-sub a { display: inline-block; padding: 14px 0; margin: -14px 0; }
.bc-by a { display: inline-block; padding: 13px 0; margin: -13px 0; }
.byline-main a { display: inline-block; padding: 11px 0; margin: -11px 0; }
.col-dl dt a { display: inline-block; padding: 11px 0; margin: -11px 0; }
.col-box h2 a { display: inline-block; padding: 10px 0; margin: -10px 0; }
.bc-plate-name a, .bc-foot-name a { display: inline-block; padding: 6px 0; margin: -6px 0; }

/* Preview ribbon and skip link */
.ribbon { background: var(--ink); color: var(--paper); letter-spacing: 0.1em; }
.skip { background: var(--ink); color: var(--paper); padding: 14px 16px; }

/* ================================================================ masthead */
.bc-mast { background: var(--paper); color: var(--ink); }
.bc-mast-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.bc-menu {
  appearance: none; background: none; border: 0; border-radius: 0; color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px 0 0; font-size: 12px; line-height: 1;
}
.bc-menu .bars { width: 18px; height: 11px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; }
.bc-menu .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 2.5px; border-top: 2px solid currentColor; }
.bc-menu[aria-expanded="true"] { color: var(--accent); }
.bc-util { display: flex; align-items: center; margin-left: auto; }
.bc-util a { display: none; align-items: center; min-height: 44px; padding: 0 12px; font-size: 11.5px; color: var(--ink); text-decoration: none; }
.bc-util a:hover { color: var(--accent); }
.bc-util .bc-sub { display: inline-flex; border: 1px solid var(--ink); margin-left: 6px; padding: 0 14px; }
.bc-util .bc-sub:hover { background: var(--ink); color: var(--paper); }
@media (min-width: 900px) {
  .bc-menu { display: none; }
  .bc-util a { display: inline-flex; }
  .bc-mast-top { min-height: 58px; }
}

/* The nameplate between double rules: thick over thin above, thin over thick below */
.bc-plate { position: relative; text-align: center; padding: 15px 0 13px; }
.bc-plate::before, .bc-plate::after { content: ""; position: absolute; left: 0; right: 0; height: 7px; }
.bc-plate::before { top: 0; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }
.bc-plate::after { bottom: 0; border-top: 1px solid var(--ink); border-bottom: 3px solid var(--ink); }
.bc-plate-name {
  margin: 0; font-family: var(--f-head); font-weight: 800; color: var(--ink); white-space: nowrap;
  font-size: clamp(30px, calc(10.5vw - 3.5px), 100px); line-height: 1.12; letter-spacing: -0.01em; text-wrap: nowrap;
}
.bc-plate-name a { color: inherit; text-decoration: none; }
.bc-plate-name a:hover { text-decoration: none; color: var(--accent); }
@media (min-width: 900px) { .bc-plate { padding: 20px 0 17px; } }
/* Inside pages carry the same nameplate at a smaller size, so the page itself starts higher */
.bc-plate-inside .bc-plate-name { font-size: clamp(30px, calc(7.5vw - 2px), 66px); }
@media (min-width: 900px) { .bc-plate-inside { padding: 14px 0 12px; } }

/* The date line: the build date, the subject line, the domain */
.bc-dateline { display: grid; justify-items: center; gap: 3px; margin: 0; padding: 10px 0 11px; text-align: center; }
.bc-today { font: 500 11.5px/1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.bc-motto { font-family: var(--f-head); font-style: italic; font-size: 15px; line-height: 1.35; color: var(--ink-2); }
.bc-domain { display: none; }
@media (min-width: 900px) {
  .bc-dateline { grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 16px; padding: 11px 0 12px; }
  .bc-today { justify-self: start; }
  .bc-motto { font-size: 17px; }
  .bc-domain { display: block; justify-self: end; font: 500 11.5px/1.4 var(--f-mono); letter-spacing: 0.06em; color: var(--ink-3); }
}

/* Sections: one line of small caps divided by thin rules */
.bc-nav { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper); }
.bc-nav ul { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.bc-nav ul::-webkit-scrollbar { display: none; }
.bc-nav li { display: flex; align-items: center; flex: none; }
.bc-nav li + li::before { content: ""; width: 1px; height: 13px; background: var(--rule-strong); }
.bc-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 13px; font-size: 11.5px; color: var(--ink); text-decoration: none; }
.bc-nav li:first-child a { padding-left: 0; }
.bc-nav a:hover { color: var(--accent); }
.bc-nav a:focus-visible, .bc-docnav a:focus-visible { outline-offset: -3px; }
.bc-nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (min-width: 900px) {
  /* centred while it fits; when it does not, it scrolls from its first item (auto margins, not justify-content) */
  .bc-nav ul { width: max-content; max-width: 100%; margin: 0 auto; }
  .bc-nav a { padding: 0 9px; font-size: 11px; letter-spacing: 0.1em; min-height: 46px; }
  .bc-nav li:first-child a { padding-left: 9px; }
}
@media (min-width: 1200px) {
  .bc-nav a { padding: 0 15px; font-size: 12px; letter-spacing: 0.13em; }
  .bc-nav li:first-child a { padding-left: 15px; }
}

/* The menu drawer (phones) */
.drawer.bc-drawer { background: var(--paper-2); color: var(--ink); border-top: 0; border-bottom: 1px solid var(--ink); }
.bc-drawer .drawer-grid { gap: 18px 20px; padding-top: 18px; padding-bottom: 22px; }
.bc-drawer h2 { font-size: 11px; color: var(--accent); margin: 0 0 4px; }
.bc-drawer a { display: flex; align-items: center; min-height: 44px; padding: 0; font-size: 16px; color: var(--ink); }
.bc-drawer a:hover { color: var(--accent); }

/* ================================================================ shared pieces */
.bc-sh { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 12px; line-height: 1.3; color: var(--ink); }
.bc-sh::before { content: ""; flex: none; width: 26px; height: 3px; background: var(--accent); }
.bc-sh a { color: inherit; text-decoration: none; }
.bc-sh a:hover { color: var(--accent); }
.bc-sh-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 18px; margin-bottom: 14px; }
.bc-sh-row .bc-sh { margin: 0; }
.bc-more { font-size: 11.5px; margin: 0; }
.bc-more, .bc-more a { color: var(--accent); }
a.bc-more, .bc-more a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
a.bc-more:hover, .bc-more a:hover { text-decoration: underline; }

.bc-label { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 12px; font-size: 11.5px; line-height: 1.3; color: var(--accent); }
.bc-label::before, .bc-label::after { content: ""; flex: 0 1 56px; height: 1px; background: var(--rule-strong); }
.bc-label a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.bc-label a:hover { text-decoration: underline; }
.bc-label-sep { display: inline-flex; align-items: center; gap: 12px; }
.bc-label-sep::before { content: ""; width: 1px; height: 12px; background: var(--rule-strong); }
.bc-label-left { justify-content: flex-start; }
.bc-label-left::before { display: none; }
.bc-label-left::after { flex-basis: 40px; }

.kicker { font-size: 11px; line-height: 1.35; color: var(--accent); gap: 4px 10px; margin: 0 0 7px; }
.kicker .label { color: var(--ink-3); padding-left: 10px; border-left: 1px solid var(--rule-strong); }
.kicker > .label:first-child { padding-left: 0; border-left: 0; }
.meta { font-family: var(--f-mono); font-size: 12px; line-height: 1.4; letter-spacing: 0.02em; text-transform: none; color: var(--ink-3); gap: 2px 10px; margin: 9px 0 0; }
.meta > * + * { padding-left: 10px; border-left: 1px solid var(--rule); }
.bc-dek-s { margin: 7px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }

.btn { background: var(--ink); color: var(--paper); font-weight: 600; letter-spacing: 0.02em; }
.btn:hover { background: var(--accent); box-shadow: none; }
.btn-line { border-color: var(--ink); color: var(--ink); min-height: 44px; }
.btn-line:hover { background: var(--ink); color: var(--paper); box-shadow: none; }
.field input, .field select, .field textarea { background-color: var(--field); border-color: var(--rule-strong); }
.field label, .field .legend { font-family: var(--f-body); font-weight: 600; font-size: 11.5px; letter-spacing: 0.12em; color: var(--ink-2); }
.form-note { color: var(--ink-3); }
.form > .form-status:empty { margin-top: -14px; }
.chk { min-height: 44px; }

/* ================================================================ home: the front page */
.bc-front { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 24px; }
.bc-lead { padding-bottom: 22px; }
.bc-lead h2 { margin-top: 4px; font-size: clamp(31px, calc(1.9vw + 23px), 56px); line-height: 1.05; letter-spacing: -0.012em; font-weight: 700; }
.bc-lead-mid h2 { font-size: clamp(29px, calc(1.6vw + 22px), 50px); }
.bc-lead-long h2 { font-size: clamp(28px, calc(1.3vw + 21px), 44px); line-height: 1.08; }
.bc-dek { margin: 14px 0 0; font-family: var(--f-dek); font-size: clamp(19px, calc(0.4vw + 17px), 23px); line-height: 1.42; color: var(--ink-2); max-width: 36em; }
.bc-by { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 14px 0 0; font: 500 12px/1.5 var(--f-mono); color: var(--ink-3); }
.bc-by > * + * { padding-left: 10px; border-left: 1px solid var(--rule); }
.bc-by a { color: var(--ink); font-weight: 600; text-decoration: none; }
.bc-by a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 639px) {
  .bc-by a { flex-basis: 100%; }
  .bc-by a + * { padding-left: 0; border-left: 0; }
}
.bc-figure { display: block; margin-top: 20px; border: 1px solid var(--rule); background: var(--paper); }
/* Newsprint: covers and photos lose part of their colour, so they sit in the paper; the ad units are never filtered */
.bc-figure img, .bc-cover img { width: 100%; filter: saturate(0.55); }
.bc-thumb img, .photo-item img { filter: saturate(0.55); }
.photo-item img.is-house { filter: none; }   /* /photo-credits: the photo only the house units show, as they show it */
/* /photo-credits: each picture in the hairline frame of the thumbnails; on phones at the full measure */
.photo-item img { border: 1px solid var(--rule); background: var(--paper-2); }
@media (max-width: 639px) { .photo-item img { max-width: none; } }

/* Photos (Wikimedia Commons). Shown in full (the lead, the article hero): the picture in a hairline frame, the caption
   under it in the text face and the credit on its own line in the figures face; the hero's closes with a hairline. */
.bc-lead-fig { margin: 20px 0 0; }
.bc-lead-fig .bc-figure { margin-top: 0; }
.bc-lead-fig .photo-cap, .bc-cover .photo-cap {
  margin: 0; padding: 9px 0 10px; border-bottom: 1px solid var(--rule); font-size: 14px; line-height: 1.45; color: var(--ink-2);
  text-wrap: pretty;
}
.bc-lead-fig .photo-credit, .bc-cover .photo-credit {
  display: block; margin-top: 3px; font: 500 11.5px/1.5 var(--f-mono); letter-spacing: 0.01em; color: var(--ink-3);
  text-wrap: balance;   /* lines of even length: no "and toned" left alone on the last one */
}
.bc-lead-fig .photo-credit a, .bc-cover .photo-credit a { text-decoration-color: var(--rule-strong); }
.bc-lead-fig .photo-credit a:hover, .bc-cover .photo-credit a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.bc-lead-fig .photo-cap { padding-bottom: 0; border-bottom: 0; }   /* the top stories' rule follows on phones */
/* Thumbnails: 16:9 in the same hairline frame. Small, at the right of the headline; the text runs beside it (phones,
   and the top stories up to 899 px) */
.bc-thumb { background: var(--paper-2); border: 1px solid var(--rule); float: right; width: 120px; margin: 3px 0 8px 14px; }
.bc-story-photo, .bc-has-thumb { display: flow-root; }
/* A front-page story without a photo shows its cover card (owner request of 25 October 2026), in a square cut to the
   report sheet at the card's right (x 465 to 795 and y 50 to 380 of the 800 x 450 thumb), so no word of the cover is
   cut in half; where the top stories head their story with the picture (900 px and wider), the whole card at 16:9. */
.bc-thumb.is-card { position: relative; display: block; overflow: hidden; aspect-ratio: 1; }
.bc-thumb.is-card img { position: absolute; max-width: none; width: 242.42%; height: auto; left: -140.91%; top: -15.15%; }
@media (max-width: 719px) {
  /* a story with a photo on phones (a ledger row on /latest and the sections, a home story): the headline at the full
     measure, the thumbnail beside the dek */
  .bc-row-body.bc-has-thumb, .bc-story-photo { display: grid; grid-template-columns: minmax(0, 1fr) 120px; column-gap: 14px; align-content: start; }
  .bc-row-body.bc-has-thumb > *, .bc-story-photo > * { grid-column: 1 / -1; }
  .bc-row-body.bc-has-thumb > .bc-dek-s, .bc-story-photo > .bc-dek-s { grid-column: 1; grid-row: 3; }
  .bc-row-body.bc-has-thumb > .bc-thumb, .bc-story-photo > .bc-thumb { grid-column: 2; grid-row: 3; float: none; width: auto; margin: 4px 0 0; align-self: start; }
  .bc-row-body.bc-has-thumb > .bc-row-meta, .bc-story-photo > .meta { grid-row: 4; }
}

.bc-top { border-top: 1px solid var(--ink); }
.bc-story { padding: 16px 0 18px; border-bottom: 1px solid var(--rule); }
.bc-story h3 { font-size: 21px; line-height: 1.18; font-weight: 700; }
.bc-top-col:last-child .bc-story:last-child { border-bottom: 0; }

.bc-register { margin: 6px 0 4px; padding: 18px 16px 6px; background: var(--paper-2); border-top: 3px solid var(--ink); position: relative; }
.bc-register::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 1px solid var(--paper); border-bottom: 1px solid var(--ink); height: 4px; }
.bc-register h2 { font-size: 27px; line-height: 1.1; font-weight: 800; font-style: italic; letter-spacing: -0.005em; margin-top: 6px; }
.bc-reg-sub { margin: 4px 0 0; font-size: 10.5px; color: var(--ink-3); }
.bc-reg-feature { margin-top: 14px; padding: 12px 0 14px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.bc-reg-label { margin: 0 0 6px; font-size: 10.5px; color: var(--accent); }
.bc-reg-feature h3 { font-size: 20px; line-height: 1.2; font-weight: 700; }
.bc-reg-list { list-style: none; margin: 0; padding: 0; }
.bc-reg-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.bc-reg-list li:last-child { border-bottom: 0; }
.bc-reg-list time { font: 500 12px/1.6 var(--f-mono); color: var(--ink-3); }
.bc-reg-list a { display: block; padding: 6px 0; margin: -6px 0; font-size: 15.5px; line-height: 1.4; font-weight: 600; color: var(--ink); text-decoration: none; }
.bc-reg-list a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.bc-register .bc-more { border-top: 1px solid var(--ink); }

@media (min-width: 640px) {
  /* the top stories are two columns: the thumbnail stays small, beside the headline */
  .bc-story .bc-thumb { width: clamp(120px, 40%, 160px); }
  .bc-top { display: grid; grid-template-columns: 1fr 1fr; }
  .bc-top-col + .bc-top-col { border-left: 1px solid var(--rule); padding-left: 20px; }
  .bc-top-col:first-child { padding-right: 20px; }
  .bc-top-col .bc-story:last-child { border-bottom: 0; }
  .bc-register { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; padding: 18px 22px 8px; margin-top: 12px; }
  .bc-register > h2, .bc-register > .bc-reg-sub { grid-column: 1 / -1; }
  .bc-reg-feature { grid-column: 1; }
  .bc-reg-list { grid-column: 2; grid-row: 3 / span 2; margin-top: 8px; }
  .bc-register .bc-more { grid-column: 1; border-top: 0; }
}
@media (min-width: 900px) {
  /* the top stories are narrow columns beside the lead: the thumbnail heads its story at the column's width */
  .bc-story .bc-thumb { float: none; width: auto; margin: 0 0 12px; }
  .bc-story .bc-thumb.is-card { aspect-ratio: auto; }
  .bc-story .bc-thumb.is-card img { position: static; width: 100%; height: auto; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  /* with photos, the first stories hang from the lead's first line (as from 1280 px) */
  .bc-top:has(.bc-story-photo) .bc-top-col > .bc-story:first-child { padding-top: 0; }
  .bc-front { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bc-lead { grid-column: 1 / span 2; padding-right: 24px; }
  .bc-top { grid-column: 3 / span 2; grid-template-columns: 1fr 1fr; border-top: 0; border-left: 1px solid var(--rule); padding-left: 20px; }
  .bc-register { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .bc-front { grid-template-columns: repeat(6, minmax(0, 1fr)); padding-top: 26px; }
  .bc-lead { grid-column: 1 / span 3; padding-right: 26px; padding-bottom: 30px; }
  .bc-top { grid-column: 4 / span 2; border-top: 0; border-left: 1px solid var(--rule); padding-left: 20px; }
  .bc-top-col:first-child { padding-right: 18px; }
  .bc-top-col + .bc-top-col { padding-left: 18px; }
  .bc-story { padding-top: 0; margin-bottom: 18px; }
  .bc-story + .bc-story { padding-top: 16px; }
  .bc-story h3 { font-size: 19px; }
  .bc-register { grid-column: 6; display: block; margin: 0 0 30px 20px; padding: 16px 14px 4px; align-self: start; }
  .bc-reg-list { margin-top: 0; }
  .bc-reg-list li { grid-template-columns: 1fr; row-gap: 2px; }
  .bc-reg-list a { font-size: 15px; }
  .bc-register .bc-more { border-top: 1px solid var(--ink); }
}

/* Decisions: the table beside the Homepage MPU */
.bc-dec { display: grid; gap: 26px; padding-top: 26px; padding-bottom: 34px; position: relative; }
/* the rule above the Decisions spans the text width, not the wrap's side padding */
.bc-dec::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; border-top: 2px solid var(--ink); }
.bc-dec-solo { justify-items: center; }
.bc-dec-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.bc-dec-table caption { caption-side: top; text-align: left; padding: 0 0 10px; font-family: var(--f-head); font-style: italic; font-size: 16px; color: var(--ink-2); }
.bc-dec-table th { text-align: left; font-size: 10.5px; line-height: 1.3; color: var(--ink-3); padding: 8px 18px 8px 0; border-bottom: 2px solid var(--ink); }
.bc-dec-table td { padding: 12px 18px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.bc-dec-table tr:last-child td { border-bottom: 1px solid var(--ink); }
.bc-dec-date { font: 500 13px/1.4 var(--f-mono); color: var(--ink-2); white-space: nowrap; }
.bc-dec-body { font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.bc-dec-hl a { display: block; padding: 6px 0; margin: -6px 0; font-family: var(--f-head); font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--head); text-decoration: none; }
.bc-dec-hl a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.bc-rail { display: grid; justify-items: center; gap: 22px; align-content: start; }
.bc-rail .ad-mpu { margin: 0; }
.bc-rail .sponsored-card { width: 300px; max-width: 100%; margin: 0; }
@media (max-width: 719px) {
  .bc-dec-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bc-dec-table, .bc-dec-table tbody { display: block; }
  .bc-dec-table caption { display: block; }
  .bc-dec-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .bc-dec-table tbody { border-top: 2px solid var(--ink); }
  .bc-dec-table td, .bc-dec-table tr:last-child td { display: block; padding: 0; border: 0; }
  .bc-dec-hl { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .bc-dec { grid-template-columns: minmax(0, 1fr) 333px; column-gap: 0; }
  .bc-dec-main { padding-right: 32px; }
  .bc-dec-main + .bc-rail { justify-items: start; border-left: 1px solid var(--rule); padding-left: 32px; }
  .bc-dec.bc-dec-solo { grid-template-columns: 1fr; }
}
@media (min-width: 1280px) {
  .bc-dec { grid-template-columns: minmax(0, 4fr) minmax(0, 2fr); }
  .bc-dec-main { padding-right: 26px; }
  .bc-dec-main + .bc-rail { padding-left: 26px; justify-items: center; }
  .bc-dec-date { width: 1%; }
}
@media (min-width: 720px) { .bc-dec::before { left: 28px; right: 28px; } }

/* The Leaderboard band */
.bc-leader { background: var(--paper-2); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.bc-leader .ad-leader { padding: 20px 0 24px; }

/* The section front: four text-led columns with rules */
.bc-sf { padding-top: 32px; padding-bottom: 30px; }
.bc-sf-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.bc-sf-col { padding: 0 0 22px; }
.bc-sf-col + .bc-sf-col { padding-top: 22px; border-top: 1px solid var(--ink); }
.bc-sf-lead h3 { font-size: 22px; line-height: 1.18; font-weight: 700; }
.bc-sf-list { list-style: none; margin: 14px 0 0; padding: 0; }
.bc-sf-list li { padding: 11px 0; border-top: 1px solid var(--rule); }
.bc-sf-list a { display: block; padding: 6px 0; margin: -6px 0; font-size: 16px; line-height: 1.38; font-weight: 600; color: var(--ink); text-decoration: none; }
.bc-sf-list a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.bc-sf-list time { display: block; margin-top: 4px; font: 500 12px/1.4 var(--f-mono); color: var(--ink-3); }
@media (min-width: 640px) {
  .bc-sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bc-sf-col, .bc-sf-col + .bc-sf-col { padding: 0 0 26px; border-top: 0; }
  .bc-sf-col:nth-child(2n) { border-left: 1px solid var(--rule); padding-left: 24px; }
  .bc-sf-col:nth-child(2n+1) { padding-right: 24px; }
  .bc-sf-col:nth-child(n+3) { border-top: 1px solid var(--ink); padding-top: 22px; }
}
@media (min-width: 1100px) {
  .bc-sf-grid.bc-sf-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bc-sf-n4 .bc-sf-col, .bc-sf-n4 .bc-sf-col:nth-child(n) { padding: 0 22px 8px; border-top: 0; border-left: 1px solid var(--rule); }
  .bc-sf-n4 .bc-sf-col:first-child { padding-left: 0; border-left: 0; }
  .bc-sf-n4 .bc-sf-col:last-child { padding-right: 0; }
}

/* From the columns */
.bc-cols { border-top: 1px solid var(--ink); padding: 26px 0 30px; }
.bc-cols-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.bc-col { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; align-content: start; padding: 18px 0; border-top: 1px solid var(--rule); }
.bc-col img { width: 56px; height: 56px; }
.bc-col h3 { font-size: 22px; line-height: 1.15; font-weight: 700; }
.bc-col-role { margin: 5px 0 0; font-size: 10.5px; color: var(--ink-3); }
.bc-col-q { margin: 10px 0 0; font-family: var(--f-head); font-style: italic; font-size: 18px; line-height: 1.38; color: var(--ink); }
.bc-col-beat { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.bc-col-latest { margin: 12px 0 0; font-size: 15px; line-height: 1.45; }
.bc-col-latest span { display: block; margin-bottom: 3px; font-size: 10.5px; color: var(--ink-3); }
.bc-col-latest a { display: block; padding: 4px 0; margin: -4px 0; font-weight: 600; color: var(--ink); text-decoration: none; }
.bc-col-latest a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
@media (min-width: 640px) {
  .bc-cols-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
  .bc-col:nth-child(2n) { border-left: 1px solid var(--rule); padding-left: 24px; }
  .bc-col:nth-child(2n+1) { padding-right: 24px; }
}
@media (min-width: 1100px) {
  .bc-cols-row.bc-cols-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bc-cols-n4 .bc-col { grid-template-columns: 1fr; row-gap: 12px; padding: 4px 22px 6px; border-top: 0; border-left: 1px solid var(--rule); }
  .bc-cols-n4 .bc-col:first-child { padding-left: 0; border-left: 0; }
  .bc-cols-n4 .bc-col:last-child { padding-right: 0; }
}

/* The Monday digest: a notice box with a double rule */
.bc-signup { padding: 6px 0 52px; }
.bc-signup-box { border: 1px solid var(--ink); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--ink); margin: 5px; padding: 22px 18px; display: grid; gap: 18px; background: var(--paper); }
.bc-signup h2 { font-size: clamp(27px, calc(1.2vw + 22px), 38px); line-height: 1.08; font-weight: 800; }
.bc-signup p { margin: 10px 0 0; color: var(--ink-2); max-width: 34em; }
.bc-signup .bc-label { margin: 0 0 10px; }
.bc-signup .form-note, .bc-signup .form-status { margin: 0; }
@media (min-width: 900px) { .bc-signup-box { grid-template-columns: 5fr 6fr; gap: 44px; align-items: center; padding: 30px 36px; } }

/* Launch state */
.bc-launch { display: grid; gap: 28px; padding-top: 34px; padding-bottom: 34px; }
.bc-launch-note { text-align: center; max-width: 760px; margin: 0 auto; }
.bc-launch-note h2 { font-size: clamp(32px, calc(2vw + 24px), 54px); line-height: 1.06; }
.bc-launch-note .bc-dek { margin: 14px auto 0; }
.bc-launch .bc-rail { justify-items: center; }

/* ================================================================ article */
.bc-head { max-width: 1040px; margin: 0 auto; padding-top: 30px; text-align: center; }
.bc-head .kicker { justify-content: center; }
.bc-head h1 { margin: 6px auto 0; max-width: 24ch; font-size: clamp(32px, calc(2.4vw + 23px), 60px); line-height: 1.05; letter-spacing: -0.012em; font-weight: 700; }
.bc-head .dek { margin: 16px auto 0; max-width: 36em; font-family: var(--f-dek); font-size: clamp(19px, calc(0.45vw + 17px), 23px); line-height: 1.45; color: var(--ink-2); }
.article-head .byline { display: block; margin: 22px auto 0; padding: 10px 0 11px; max-width: 760px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); text-align: center; }
.article-head .byline-main { font-size: 15px; line-height: 1.45; text-wrap: balance; }
.article-head .byline-main a { color: var(--ink); font-weight: 600; }
.article-head .byline-main a:hover { color: var(--accent); text-decoration: underline; }
.article-head .byline-sub { justify-content: center; margin: 4px 0 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.02em; text-transform: none; color: var(--ink-3); }
.article-head .byline-sub > * + * { border-left-color: var(--rule); }
.bc-head .supported-by p, .bc-head .sponsor-line { justify-content: center; }
.bc-head > p:not(.kicker):not(.dek), .bc-head > div:not(.byline):not(.supported-by) { margin-left: auto; margin-right: auto; max-width: 760px; }

.bc-layout { display: block; padding-top: 26px; padding-bottom: 34px; }
.bc-layout .article-main, .bc-notes, .bc-after { max-width: 680px; margin-left: auto; margin-right: auto; }
.bc-cover { margin: 0 0 28px; border: 1px solid var(--rule); background: var(--paper-2); }
/* a photo: the frame goes round the picture, the caption sits under it on the paper */
.bc-cover.is-photo { border: 0; background: none; }
.bc-cover.is-photo picture { display: block; border: 1px solid var(--rule); background: var(--paper-2); }
.prose { font-size: 18px; line-height: 1.66; }
.prose p { text-wrap: pretty; }
.prose h2 { font-size: clamp(22px, calc(0.5vw + 20px), 26px); font-weight: 700; line-height: 1.2; margin: 1.7em 0 0.55em; }
.prose a { text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent); text-decoration-thickness: 2px; }
.prose > p:last-child::after { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-left: 0.4em; background: var(--accent); vertical-align: 0.05em; }
.prose blockquote { margin: 1.4em 0; padding: 0 0 0 1.1em; border-left: 1px solid var(--ink); font-family: var(--f-head); font-style: italic; font-size: 1.1em; }

/* Tables in financial style: tabular figures, hairline rules, numbers in mono */
.prose table { font-size: 14.5px; font-variant-numeric: tabular-nums lining-nums; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.prose th { font-family: var(--f-body); font-weight: 600; font-size: 10.5px; letter-spacing: 0.12em; color: var(--ink-3); border-bottom: 1px solid var(--ink); padding: 9px 14px 8px 0; }
.prose td { border-bottom: 1px solid var(--rule); padding: 9px 14px 9px 0; }
.prose tr:last-child td { border-bottom: 0; }
.prose td:first-child { font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); min-width: 0; padding-right: 16px; }
.prose th.num, .prose td.num { text-align: right; font-family: var(--f-mono); font-size: 13.5px; white-space: nowrap; }
/* Phones: a wide table scrolls inside its own box rather than squeezing its text columns, with a shadow at the edge
   that still has rows to show (backgrounds that scroll with the content cover the shadows at either end) */
@media (max-width: 719px) {
  .prose th, .prose td { min-width: 11em; }
  .prose th:first-child, .prose td:first-child { min-width: 0; }
  .prose table {
    background:
      linear-gradient(to right, var(--paper) 40%, rgba(247, 244, 236, 0)) left center / 28px 100% no-repeat local,
      linear-gradient(to left, var(--paper) 40%, rgba(247, 244, 236, 0)) right center / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(21, 17, 15, 0.2), rgba(21, 17, 15, 0)) left center / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(21, 17, 15, 0.2), rgba(21, 17, 15, 0)) right center / 12px 100% no-repeat scroll;
    background-color: var(--paper);
  }
}

/* Margin notes: the numbered Sources (and the disclosure note above them) */
.bc-notes:empty { display: none; }
.bc-notes { padding-top: 6px; }
.sources { margin-top: 36px; padding-top: 0; border-top: 0; }
.sources h2 { display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.3; color: var(--ink); margin: 0 0 10px; }
.sources h2::before { content: ""; flex: none; width: 26px; height: 3px; background: var(--accent); }
.sources ol { list-style: none; margin: 0; padding: 0; counter-reset: src; border-top: 1px solid var(--ink); font-size: 16px; line-height: 1.45; }
.sources li { counter-increment: src; position: relative; margin: 0; padding: 11px 0 12px 34px; border-bottom: 1px solid var(--rule); }
.sources li::before { content: counter(src); position: absolute; left: 0; top: 12px; min-width: 22px; font: 600 12.5px/1.4 var(--f-mono); color: var(--accent); }
.sources a { color: var(--ink); text-decoration-color: var(--rule); text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.sources a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.sources .src-meta { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }
.ad-disclosure { margin: 28px 0 0; padding: 12px 14px; border: 1px solid var(--rule-strong); background: var(--paper-2); font-size: 15px; }
.bc-notes .ad-disclosure { margin-top: 0; }
.bc-notes .ad-disclosure + .sources { margin-top: 22px; }

.share { gap: 0; margin-top: 26px; padding: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.share .mono { font-size: 11px; color: var(--ink-3); margin-right: 6px; }
.share a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 15px; color: var(--ink); text-decoration: none; }
.share a + a { border-left: 1px solid var(--rule); }
.share a:hover { color: var(--accent); text-decoration: underline; }
.col-box { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; margin-top: 26px; padding: 18px; background: var(--paper-2); border: 1px solid var(--rule); }
.col-box img { width: 56px; height: 56px; }
.col-box h2 { font-size: 20px; font-weight: 700; }
.col-box p { color: var(--ink-2); }

@media (min-width: 1080px) {
  .bc-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 48px; row-gap: 0; align-items: start;
    grid-template-areas: "main notes" "main ad" "after ad"; grid-template-rows: auto 1fr auto;
  }
  .bc-layout .article-main { grid-area: main; margin: 0; max-width: 700px; }
  .bc-notes { grid-area: notes; margin: 0; padding-top: 0; }
  .bc-after { grid-area: after; margin: 0; max-width: 700px; }
  .bc-aside { grid-area: ad; align-self: stretch; }
  .bc-notes .sources { margin-top: 0; }
  .bc-notes .sources ol { font-size: 15px; line-height: 1.42; }
  .bc-notes .sources li { padding: 9px 0 10px 28px; }
  .bc-notes .sources li::before { top: 10px; font-size: 12px; }
  .bc-notes .sources .src-meta { font-size: 13px; }
  .bc-notes { padding-bottom: 28px; }
  .bc-aside .aside-sticky { top: 16px; }
}
@media (min-width: 1280px) {
  .bc-layout { grid-template-columns: minmax(0, 1fr) 250px 300px; column-gap: 40px; grid-template-areas: "main notes ad" "after notes ad"; grid-template-rows: auto 1fr; }
  .bc-layout .article-main, .bc-after { max-width: 720px; }
  .bc-notes { padding-bottom: 0; border-left: 1px solid var(--rule); padding-left: 20px; margin-left: -21px; align-self: stretch; }
  .bc-notes .sources ol { font-size: 14.5px; }
  .bc-notes .sources li { padding-left: 24px; }
}

/* Related stories: text-led columns with rules */
.bc-related { border-top: 2px solid var(--ink); padding: 26px 0 40px; }
.bc-rel-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.bc-rel-grid li { padding: 16px 0 18px; border-top: 1px solid var(--rule); }
.bc-rel-grid h3 { font-size: 20px; line-height: 1.2; font-weight: 700; }
@media (min-width: 640px) {
  .bc-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bc-rel-grid li:nth-child(2n) { border-left: 1px solid var(--rule); padding-left: 22px; }
  .bc-rel-grid li:nth-child(2n+1) { padding-right: 22px; }
}
@media (min-width: 1100px) {
  .bc-rel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bc-rel-grid li, .bc-rel-grid li:nth-child(n) { border-top: 0; padding: 0 22px 4px; border-left: 1px solid var(--rule); }
  .bc-rel-grid li:first-child { padding-left: 0; border-left: 0; }
  .bc-rel-grid li:last-child { padding-right: 0; }
}

/* Partner content keeps the base article classes: give its head the same centred anatomy */
.sponsored-article .article-head { max-width: 1040px; margin: 0 auto; padding-top: 30px; text-align: center; }
.sponsored-article .article-head .kicker { justify-content: center; }
.sponsored-article .article-head h1 { font-size: clamp(32px, calc(2.4vw + 23px), 60px); line-height: 1.05; max-width: 24ch; margin: 6px auto 0; }
.sponsored-article .article-head .dek { margin: 16px auto 0; max-width: 36em; font-size: clamp(19px, calc(0.45vw + 17px), 23px); }
.sponsored-article .sources { margin-top: 40px; }
.sponsor-about { border: 1px solid var(--rule); }
.sponsored-card { border-top: 3px solid var(--ink); }

/* ================================================================ listings: the ledger */
.bc-page-head { padding: 30px 0 0; border-bottom: 0; text-align: center; }
.bc-page-head .wrap::after { content: ""; display: block; height: 7px; margin-top: 26px; border-top: 1px solid var(--ink); border-bottom: 3px solid var(--ink); }
.bc-page-head h1 { font-size: clamp(36px, calc(3vw + 24px), 70px); line-height: 1.04; font-weight: 800; letter-spacing: -0.012em; }
.bc-page-head .intro { margin: 12px auto 0; max-width: 34em; font-family: var(--f-head); font-style: italic; font-size: clamp(18px, calc(0.4vw + 16.5px), 22px); line-height: 1.45; color: var(--ink-2); }
.bc-page-head .intro.bc-intro-long { max-width: 40em; font-style: normal; font-size: clamp(17px, calc(0.25vw + 16px), 19px); line-height: 1.55; }
.bc-head-note { margin: 12px auto 0; max-width: 44em; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.bc-page-head .col-desc { margin: 16px auto 0; max-width: 40em; font-size: 16px; line-height: 1.6; color: var(--ink-2); text-align: left; }
.bc-head-note a { color: var(--ink); text-decoration-color: var(--accent); }
.bc-page-head .disclosure { margin: 18px auto 0; text-align: left; }
.disclosure { border: 1px solid var(--rule); background: var(--paper-2); padding: 12px 16px; font-size: 15px; color: var(--ink); max-width: 46em; }

.bc-index { padding-top: 6px; }
.bc-ledger { list-style: none; margin: 0; padding: 0; }
.bc-row { display: grid; grid-template-columns: minmax(0, 1fr); padding: 18px 0 20px; border-bottom: 1px solid var(--rule); }
.bc-row-date { margin: 0 0 6px; font: 500 12px/1.4 var(--f-mono); color: var(--ink-3); }
.bc-d-mark { display: none; }
.bc-row h2, .bc-row h3 { font-size: clamp(21px, calc(0.5vw + 19px), 25px); line-height: 1.18; font-weight: 700; }
.bc-row .bc-dek-s { max-width: 44em; }
.bc-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 8px 0 0; font: 500 12px/1.4 var(--f-mono); color: var(--ink-3); }
.bc-row-meta > * + * { padding-left: 10px; border-left: 1px solid var(--rule); }
.bc-row-meta a { display: inline-block; padding: 14px 0; margin: -14px 0; color: var(--ink-2); text-decoration: none; font-weight: 600; }
.bc-row-meta a:hover { color: var(--accent); text-decoration: underline; }
.bc-empty { padding: 30px 0; }
@media (min-width: 720px) {
  .bc-row { grid-template-columns: 112px minmax(0, 1fr); column-gap: 24px; }
  /* a row with a photo: the thumbnail in its own column at the right of the text */
  .bc-row-body.bc-has-thumb { display: grid; grid-template-columns: minmax(0, 1fr) 168px; column-gap: 24px; align-content: start; }
  .bc-has-thumb > * { grid-column: 1; }
  .bc-has-thumb > .bc-thumb { grid-column: 2; grid-row: 1 / span 4; align-self: start; float: none; width: auto; margin: 3px 0 0; }
  .bc-row-date { margin: 3px 0 0; padding-right: 12px; border-right: 1px solid var(--rule); align-self: stretch; }
  .bc-ditto .bc-d-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bc-ditto .bc-d-mark { display: inline; font-size: 17px; line-height: 1; color: var(--ink-3); padding-left: 2.2em; }
}
@media (min-width: 1080px) {
  .index-layout.bc-index { grid-template-columns: minmax(0, 1fr) 333px; gap: 0; }
  .bc-row-body.bc-has-thumb { grid-template-columns: minmax(0, 1fr) 152px; }
  .bc-index-main { padding-right: 40px; }
  .bc-index-aside { border-left: 1px solid var(--rule); padding-left: 32px; padding-top: 18px; }
}
.aside-list .bc-sh { margin-bottom: 8px; font-size: 12px; }
.latest-list { margin-bottom: 20px; }
.list-item { padding: 11px 0; border-top: 1px solid var(--rule); }
.list-item .hl { display: block; padding: 4px 0; margin: -4px 0; font-family: var(--f-body); font-weight: 600; font-size: 15.5px; line-height: 1.38; color: var(--ink); }
.list-item .hl:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.list-item .meta { margin-top: 6px; font-size: 11.5px; }

.pager.bc-pager { gap: 0; margin-top: 26px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.bc-pager a, .bc-pager span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.04em; text-transform: none; color: var(--ink); }
.bc-pager > * + * { border-left: 1px solid var(--rule); }
.bc-pager span[aria-current] { background: var(--ink); color: var(--paper); }
.bc-pager a:hover { color: var(--accent); text-decoration: underline; }

@media (min-width: 1280px) { .bc-row-body.bc-has-thumb { grid-template-columns: minmax(0, 1fr) 200px; column-gap: 28px; } }

/* Column pages */
.bc-colhead-mark { display: block; width: 96px; height: 96px; margin: 4px auto 14px; }
.bc-colhead .bc-col-role { margin: 8px 0 0; font-size: 11px; color: var(--ink-3); }
.bc-colhead .disclosure { margin-top: 16px; }
.col-profile { max-width: 46em; padding-top: 22px; }
.col-jump a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); }
.col-lede { font-family: var(--f-dek); font-size: clamp(19px, calc(0.4vw + 17px), 22px); }
.col-q { border-left: 0; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); background: none; padding: 14px 0 16px; }
.col-q h2 { font-size: 11px; color: var(--accent); }
.col-q p { font-style: italic; font-weight: 700; }
.col-sec h2 { display: flex; align-items: center; gap: 10px; font-family: var(--f-body); font-weight: 600; font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink); }
.col-sec h2.bar::before { flex: none; width: 26px; height: 3px; margin: 0; background: var(--accent); }
.col-dl > div { border-top-color: var(--rule); }
.col-more summary { font-size: 11.5px; color: var(--accent); }
.col-pieces { margin-top: 44px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }

/* /columns */
.bc-colcards { list-style: none; margin: 0; padding: 26px 0 40px; display: grid; grid-template-columns: minmax(0, 1fr); }
.bc-colcard { padding: 22px 0; border-top: 1px solid var(--rule); text-align: center; }
.bc-colcard:first-child { border-top: 0; }
.bc-colcard img { width: 88px; height: 88px; margin: 0 auto 12px; }
.bc-colcard h2 { font-size: 28px; line-height: 1.1; font-weight: 800; }
.bc-colcard .bc-col-role { margin-top: 6px; }
.bc-colcard .bc-col-q { font-size: 19px; }
.bc-colcard .bc-col-latest { text-align: left; border-top: 1px solid var(--rule); padding-top: 10px; }
@media (min-width: 640px) {
  .bc-colcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bc-colcard:nth-child(2n) { border-left: 1px solid var(--rule); padding-left: 24px; }
  .bc-colcard:nth-child(2n+1) { padding-right: 24px; }
  .bc-colcard:nth-child(2) { border-top: 0; }
}
@media (min-width: 1100px) {
  .bc-colcards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bc-colcard, .bc-colcard:nth-child(n) { border-top: 0; padding: 0 22px; border-left: 1px solid var(--rule); }
  .bc-colcard:first-child { padding-left: 0; border-left: 0; }
  .bc-colcard:last-child { padding-right: 0; }
}

/* ================================================================ publication pages */
.bc-docnav { border-bottom: 1px solid var(--rule); background: var(--paper); }
.bc-docnav ul { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.bc-docnav ul::-webkit-scrollbar { display: none; }
.bc-docnav li { display: flex; align-items: center; flex: none; }
.bc-docnav li + li::before { content: ""; width: 1px; height: 12px; background: var(--rule); }
.bc-docnav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 10.5px; color: var(--ink-2); text-decoration: none; }
.bc-docnav li:first-child a { padding-left: 0; }
.bc-docnav a:hover, .bc-docnav a[aria-current="page"] { color: var(--accent); }
.bc-docnav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (min-width: 900px) { .bc-docnav ul { width: max-content; max-width: 100%; margin: 0 auto; } .bc-docnav li:first-child a { padding-left: 12px; } }
.bc-docwrap { padding-top: 34px; padding-bottom: 56px; }
.doc { max-width: 720px; margin: 0 auto; }
.doc h1 { font-size: clamp(34px, calc(2.4vw + 25px), 58px); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; text-align: center; margin-bottom: 0; padding-bottom: 22px; position: relative; }
.doc h1::after { content: ""; display: block; height: 7px; margin: 22px auto 0; max-width: 720px; border-top: 1px solid var(--ink); border-bottom: 3px solid var(--ink); }
.doc .lede { margin-top: 4px; font-family: var(--f-dek); font-size: clamp(19px, calc(0.4vw + 17px), 22px); line-height: 1.5; color: var(--ink-2); }
.doc h2 { font-size: 25px; font-weight: 700; margin: 1.7em 0 0.5em; }
.doc h3 { font-size: 20px; }
.doc .note { border: 1px solid var(--rule); background: var(--paper-2); padding: 16px 18px; }
.doc a { text-decoration-color: var(--accent); }
.emails { border-top: 1px solid var(--ink); }
.launch-tag { background: var(--accent); color: var(--paper); font-family: var(--f-mono); }
.rates { border-top: 2px solid var(--ink); }
.rates th { font-family: var(--f-body); font-weight: 600; font-size: 10.5px; letter-spacing: 0.12em; color: var(--ink-3); border-bottom: 1px solid var(--ink); }
.rates td.price { font-family: var(--f-mono); font-weight: 600; font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.rates th:last-child { text-align: right; }
.placement { border-top-color: var(--ink); }
.placement .vis { background: var(--paper-2); border: 1px solid var(--rule); }
.steps li::before { background: var(--ink); color: var(--paper); font-weight: 600; }
.kit-link a:not(.btn-line) { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 639px) { .rates td.price { text-align: right; } }
@media (min-width: 640px) { .rates td.dims { white-space: nowrap; } }

/* 404 */
.bc-404 { max-width: 760px; padding-top: 48px; padding-bottom: 64px; text-align: center; }
.bc-404 h1 { font-size: clamp(36px, calc(3vw + 24px), 64px); font-weight: 800; }
.bc-404 > p:not(.bc-label) { font-size: 19px; color: var(--ink-2); }
.bc-404 ul { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 8px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.bc-404 li { display: flex; align-items: center; }
.bc-404 ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font: 600 11.5px/1 var(--f-body); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.bc-404 ul a:hover { color: var(--accent); }

/* ================================================================ footer: the imprint */
.bc-foot { background: var(--paper-2); color: var(--ink); border-top: 3px solid var(--ink); padding: 30px 0 26px; }
.bc-foot-head { text-align: center; padding-bottom: 22px; border-bottom: 1px solid var(--ink); }
.bc-foot-name { margin: 0; font-family: var(--f-head); font-weight: 800; font-size: clamp(28px, calc(2vw + 20px), 44px); line-height: 1.1; letter-spacing: -0.01em; }
.bc-foot-name a { color: var(--ink); text-decoration: none; }
.bc-foot-name a:hover { color: var(--accent); }
/* the wordmark signs off the paper: a little under half the nameplate's measure */
.bc-foot-mark { width: clamp(236px, calc(9vw + 200px), 336px); height: auto; }
.bc-foot-name + .bc-foot-mission { margin-top: 14px; }
.bc-foot-mission { margin: 10px auto 0; max-width: 44em; font-family: var(--f-head); font-style: italic; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.bc-foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; padding: 24px 0 18px; }
.bc-foot h2 { font-size: 10.5px; color: var(--accent); margin: 0 0 4px; }
.bc-foot ul { list-style: none; margin: 0; padding: 0; }
.bc-foot li { margin: 0; }
.bc-foot-cols a { display: flex; align-items: center; min-height: 40px; font-size: 15px; color: var(--ink); text-decoration: none; }
.bc-foot-cols a:hover { color: var(--accent); text-decoration: underline; }
.bc-foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 14px; border-top: 1px solid var(--rule-strong); font: 500 12px/1.5 var(--f-mono); color: var(--ink-3); }
.bc-foot-base p { margin: 0; }
/* The related-party line: the shared rule's --on-ground-2 (text on a dark ground) is 1.8:1 on this paper; darkened toward the ink, 4.5:1 */
.bc-foot .foot-disclosure { color: #70695E; }
@media (pointer: coarse), (max-width: 1079px) { .bc-foot-cols a { min-height: 44px; } }
@media (min-width: 720px) { .bc-foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) {
  .bc-foot-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .bc-foot-cols > div { padding: 0 20px; border-left: 1px solid var(--rule); }
  .bc-foot-cols > div:first-child { padding-left: 0; border-left: 0; }
}

/* Phones: reading text in the modules at 16 px */
@media (max-width: 719px) {
  .bc-reg-list a, .list-item .hl, .bc-col-latest, .col-box p, .disclosure, .ad-disclosure, .bc-dec-body { font-size: 16px; }
}

/* Trackers (build.py's hub pages): "Last updated", the answer box, the notes under the tables, the latest coverage
   and the footer's Trackers list */
.hub-updated { margin: 12px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.prose .hub-answer { margin: 0 0 1.6em; padding: 16px 20px; background: var(--paper-2); border-left: 4px solid var(--accent); }
.hub-answer p { margin: 0; }
.prose .hub-answer .hub-asof { margin-top: 10px; }
.prose .hub-answer .hub-asof + p { margin-top: 14px; }
.prose .hub-asof, .prose .hub-note { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.hub-coverage { margin-top: 36px; }
.hub-coverage h2 { font-size: 20px; margin-bottom: 8px; }
.hub-none { color: var(--ink-2); }
.foot-trackers { margin-top: 22px; }
/* a tracker table takes the full width of the column, so the rules of every table end at the same point */
.prose table.hub-table { display: table; width: 100%; }
/* Phones: each row in two columns, the label (or the date of an event) beside the value and the "As of" date under the
   value, so no date runs past the edge of the screen */
@media (max-width: 719px) {
  .prose table.hub-table { display: block; }
  .hub-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hub-table tbody { display: block; }
  .hub-table tr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 14px; row-gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .hub-table tr:last-child { border-bottom: 0; }
  .prose .hub-table td { display: block; min-width: 0; padding: 0; border: 0; }
  .hub-table td:first-child { grid-row: span 2; }
  .hub-table td + td { grid-column: 2; }
  .hub-table td:empty { display: none; }
  .hub-table td.hub-val + td.hub-date { font-size: 13.5px; color: var(--ink-2); }
  .hub-table td.hub-val + td.hub-date::before { content: "As of "; }
}
/* Wider screens: a timeline's value (its third column, "39.5 per cent") stays on one line */
@media (min-width: 720px) { .hub-table td + td + td.hub-val { white-space: nowrap; } }
/* The latest coverage follows the body on the body's measure; on wide screens the article's grid, the coverage taking
   the column of the article's sidebar unit (a tracker carries no units) */
.bc-cov { max-width: 680px; margin-left: auto; margin-right: auto; }
@media (min-width: 1080px) {
  .hub .bc-layout { grid-template-areas: "main notes" "cov notes" "after notes"; grid-template-rows: auto auto 1fr; }
  .bc-cov { grid-area: cov; margin: 0; max-width: 700px; }
}
@media (min-width: 1280px) {
  .hub .bc-layout { grid-template-columns: minmax(0, 1fr) 250px 300px; grid-template-areas: "main notes cov" "after notes cov"; grid-template-rows: auto 1fr; }
  .bc-cov { max-width: none; }
  .bc-cov .hub-coverage { margin-top: 0; }
  .bc-cov .hub-coverage h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--f-body); font-weight: 600;
    font-size: 12px; line-height: 1.3; letter-spacing: 0.13em; text-transform: uppercase; }
  .bc-cov .hub-coverage h2::before { content: ""; flex: none; width: 26px; height: 3px; background: var(--accent); }
  .bc-cov .latest-list { border-top: 1px solid var(--ink); }
  .bc-cov .list-item:first-child { border-top: 0; }
}

@media print {
  .bc-mast-top, .bc-nav, .bc-drawer, .bc-leader, .bc-rail, .bc-foot, .share, .bc-aside, .bc-related, .bc-signup, .bc-docnav { display: none !important; }
  .bc-figure img, .bc-cover img, .bc-thumb img, .photo-item img { filter: none; }
}