@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-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:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-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:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-normal-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:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-normal-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:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-normal-500-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:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-normal-500-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:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-normal-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:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-normal-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}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-normal-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:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-normal-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-normal-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-normal-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-normal-500-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-normal-500-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:#0B1F3A;--paper:#F4F1EA;--paper-2:#E7E5E0;--accent:#D7263D;--accent-text:#C22237;
--accent-strong:#D7263D;--on-accent:#FFFFFF;--accent-on-ground:#D7263D;
--head:#0B1F3A;--ink:#091930;--ink-2:#566272;--rule:#CFCFCE;--rule-strong:#9299A0;
--on-ground:#F4F1EA;--on-ground-2:#9FB0C8;--ground-line:#3A495D;
--error:#A4161A;--ok:#1E6B3A;
--f-head:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;--f-body:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;--f-mono:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;--f-dek:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--head-weight:700;--head-track:-0.018em;
--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='%23566272' 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; }
.chk + .field-error { margin-top: -12px; padding-left: 26px; }
.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; flex: none; }
.chk span { line-height: 1.45; }
.chk:has(> span) { display: flex; }

@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); }

/* Follow list under Work with us (themes/base.py follow()) */
.foot-follow { margin-top: 22px; }

/* Corridor Signal (cs): "Signal Room".
   An engineered, technical surface: a network operations board crossed with a trade journal. Precise, dense, calm.
   IBM Plex Sans for everything, IBM Plex Mono for data, labels and dates. Navy carries the chrome; signal red is a
   status mark and nothing else. Square corners, 1 px rules, no shadows.
   build.py appends this file after src/site.css; markup lives in themes/cs.py. Mobile first: base rules are for
   phones, min-width queries add the wider layouts. */

/* ------------------------------------------------------------------ tokens */
:root {
  --cs-deep: #071932;        /* the ribbon */
  --cs-panel: #122845;       /* raised navy: article band, page heads */
  --cs-panel-2: #182F4F;     /* hover on navy */
  --cs-hair: #253B59;        /* 1 px rules on navy */
  --cs-hair-2: #3C516E;      /* stronger rules on navy, chip outlines */
  --cs-tick: #495C77;        /* minor ticks of the signal scale */
  --cs-tick-hi: #7A8CA6;     /* major ticks */
  --cs-red-ink: #E57281;     /* red that can be read on navy (5.5:1), for focus rings there */
  --cs-field: #FBFAF6;       /* form fields */
  --cs-linkline: #7B8799;    /* link underlines on paper */
  --cs-gut: 16px;
  --cs-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 720px) { :root { --cs-gut: 28px; } }
@media (min-width: 1280px) { :root { --cs-gut: 40px; } }

/* A navy surface re-maps the shared tokens, so every shared component inside it (chips, labels, the disclosure
   notes, the sponsor lines and whatever the build places there) reads light on dark without its own rule. */
.cs-dark {
  --ink: var(--on-ground);
  --ink-2: var(--on-ground-2);
  --head: var(--on-ground);
  --rule: var(--cs-hair);
  --rule-strong: var(--cs-hair-2);
  --paper-2: var(--cs-panel-2);
  --accent-text: var(--cs-red-ink);
  background: var(--cs-panel);
  color: var(--on-ground);
}

/* ------------------------------------------------------------------ base */
body { background: var(--paper); color: var(--ink); }
.wrap { max-width: 1280px; padding-left: var(--cs-gut); padding-right: var(--cs-gut); }
::selection { background: #CBD6E6; color: #091930; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cs-mast :focus-visible, .cs-dark :focus-visible { outline-color: var(--cs-red-ink); }
h1, h2, h3, h4 { letter-spacing: -0.016em; }

/* The accent bar of the shared stylesheet becomes this site's square marker (the column profile uses it). */
.bar { display: flex; align-items: center; gap: 10px; }
.bar::before { flex: none; width: 8px; height: 8px; margin: 0; background: var(--head); }

/* Preview ribbon: a status line, not an alarm */
.ribbon { background: var(--cs-deep); color: var(--on-ground-2); padding: 7px 16px; font-size: 11px; line-height: 1.5;
  letter-spacing: 0.1em; border-bottom: 1px solid var(--cs-hair); }
.ribbon::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: var(--accent); vertical-align: 1px; }

/* ------------------------------------------------------------------ masthead */
.cs-mast { background: var(--ground); color: var(--on-ground); }
.cs-mast-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 10px; }
.cs-brand { display: block; flex: 0 1 auto; min-width: 0; padding: 9px 0; margin: -9px 0; }
.cs-brand img { width: min(232px, 100%); height: auto; }
.cs-util { display: none; align-items: center; gap: 2px; }
.cs-util a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font: 500 12px/1 var(--f-mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ground-2); text-decoration: none; }
.cs-util a:hover { color: var(--on-ground); }
.cs-util .cs-util-sub { margin-left: 10px; padding: 0 16px; border: 1px solid var(--cs-hair-2); color: var(--on-ground); }
.cs-util .cs-util-sub:hover { border-color: var(--on-ground); }

/* The menu button wears a signal-strength icon: three bars of four, all four when the menu is open. */
.cs-menu { appearance: none; flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 12px;
  background: transparent; color: var(--on-ground); border: 1px solid var(--cs-hair-2); border-radius: 0;
  font: 500 12px/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.cs-menu-bars { width: 15px; height: 12px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 3px 4px no-repeat,
              linear-gradient(currentColor, currentColor) 4px 100% / 3px 7px no-repeat,
              linear-gradient(currentColor, currentColor) 8px 100% / 3px 10px no-repeat,
              linear-gradient(var(--cs-tick), var(--cs-tick)) 12px 100% / 3px 12px no-repeat; }
.cs-menu:hover { border-color: var(--on-ground); }
.cs-menu[aria-expanded="true"] { background: var(--on-ground); color: var(--ground); border-color: var(--on-ground); }
.cs-menu[aria-expanded="true"] .cs-menu-bars {
  background: linear-gradient(currentColor, currentColor) 0 100% / 3px 4px no-repeat,
              linear-gradient(currentColor, currentColor) 4px 100% / 3px 7px no-repeat,
              linear-gradient(currentColor, currentColor) 8px 100% / 3px 10px no-repeat,
              linear-gradient(currentColor, currentColor) 12px 100% / 3px 12px no-repeat; }

/* The signal scale: a hairline with ticks every 10 px, taller every 50 and 100, centred on the page so the
   major ticks meet the edges of the 1200 px column. The sections sit on it like bands on a frequency scale. */
.cs-dial { border-top: 1px solid var(--cs-hair);
  background: linear-gradient(var(--cs-tick), var(--cs-tick)) 0 100% / 100% 1px no-repeat,
              linear-gradient(to right, var(--cs-tick-hi) 0 1px, transparent 1px) calc(50% + 50px) 100% / 100px 10px repeat-x,
              linear-gradient(to right, var(--cs-tick) 0 1px, transparent 1px) calc(50% + 25px) 100% / 50px 7px repeat-x,
              linear-gradient(to right, var(--cs-tick) 0 1px, transparent 1px) calc(50% + 5px) 100% / 10px 4px repeat-x; }
.cs-dial-list { list-style: none; margin: 0 calc(-1 * var(--cs-gut)); padding: 0 var(--cs-gut); display: flex; gap: 0 22px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.cs-dial-list::-webkit-scrollbar { display: none; }
.cs-dial-list li { flex: none; }
.cs-dial-list a { position: relative; display: flex; align-items: center; min-height: 52px; padding: 4px 0 16px;
  font: 500 12px/1.2 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ground-2);
  text-decoration: none; white-space: nowrap; }
.cs-dial-list a::after { content: ""; position: absolute; left: -5px; right: -5px; bottom: 0; height: 4px; }
.cs-dial-list a:hover { color: var(--on-ground); }
.cs-dial-list a:hover::after { background: var(--cs-tick-hi); }
.cs-dial-list a[aria-current="page"] { color: var(--on-ground); }
.cs-dial-list a[aria-current="page"]::after { background: var(--accent); }
.cs-dial-list a:focus-visible { outline: 2px solid var(--cs-red-ink); outline-offset: -2px; }

/* The menu drawer that src/site.js opens */
.cs-drawer { background: var(--ground); border-top: 1px solid var(--cs-hair); }
.cs-drawer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; padding-top: 12px; padding-bottom: 24px; }
.cs-drawer h2 { margin: 12px 0 2px; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ground-2); }
.cs-drawer ul { list-style: none; margin: 0; padding: 0; }
.cs-drawer a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--cs-hair); color: var(--on-ground);
  text-decoration: none; font-size: 16px; line-height: 1.25; }
.cs-drawer a:hover { color: var(--on-ground-2); }

@media (min-width: 720px) {
  .cs-brand img { width: auto; height: 32px; max-width: none; }
  .cs-mast-row { padding-top: 20px; padding-bottom: 16px; }
}
@media (min-width: 900px) {
  .cs-util { display: flex; }
  .cs-menu, .cs-drawer { display: none; }
}
@media (min-width: 1100px) {
  .cs-brand img { height: 36px; }
  .cs-dial-list { margin: 0; padding: 0; gap: 0 30px; }
}

/* ------------------------------------------------------------------ chips, labels, plates, thumbnails */
.cs-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 4px 8px 4px 7px;
  border: 1px solid var(--rule-strong); font: 500 11.5px/1.2 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap; }
.cs-chip::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--head); }
/* Status words: announced (hollow), laid (half), lit (solid), in signal red */
.cs-st::before { box-sizing: border-box; width: 9px; height: 9px; border: 1.5px solid var(--accent); background: transparent; background-clip: padding-box; }
.cs-st-laid::before { background-image: linear-gradient(to top, var(--accent) 50%, transparent 50%); }
.cs-st-lit::before { background: var(--accent); }
.cs-chip-ed::before { box-sizing: border-box; border: 1.5px solid var(--head); background: transparent; }
a.cs-chip { position: relative; }
a.cs-chip::after { content: ""; position: absolute; inset: -10px -2px; }
a.cs-chip:hover { border-color: var(--head); }
.cs-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.cs-kick-label, .cs-kick-sec { font: 500 11.5px/1.2 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.cs-kick-sec { position: relative; color: var(--ink); text-decoration: none; }
.cs-kick-sec::after { content: ""; position: absolute; inset: -15px -4px; }
.cs-kick-sec:hover { text-decoration: underline; text-underline-offset: 3px; }

.cs-label { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 12.5px/1.3 var(--f-mono); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--head); }
.cs-label::before { content: ""; flex: none; width: 8px; height: 8px; background: currentColor; }

.cs-plate { flex: none; display: block; overflow: hidden; background: var(--ground); line-height: 0; }
.cs-plate img { width: 100%; height: 100%; }
.cs-plate-28 { width: 28px; height: 28px; }
.cs-plate-40 { width: 40px; height: 40px; }
.cs-plate-64 { width: 64px; height: 64px; }
.cs-plate-96 { width: 96px; height: 96px; }

/* The square thumbnail is cut from the right of each cover, where its signal traces run (x 488 to 800 and y 69
   to 381 of the 800 x 450 thumb), so no word of the cover is cut in half. */
.cs-thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 1; background: var(--ground); }
.cs-thumb img { position: absolute; max-width: none; width: 256.4%; height: auto; left: -156.4%; top: -22.1%; }
/* An article's photo has no traces to find: it fills the same square, cropped around its focus (site.css --fx, the
   centre without a class). The square shows 9/16 of the 16:9 file's width, so (fx - 9/32) / (7/16) puts the focus in
   its middle, as far as the file's edges allow. */
.cs-thumb.is-photo img { inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: clamp(0%, (var(--fx, .5) - .28125) / .4375 * 100%, 100%) 50%; }

/* Photo captions: the caption in the body face, the credit under it in mono like every other attribution here. On the
   navy band the shared tokens are re-mapped (.cs-dark), so the same rules read light on dark. */
.photo-cap { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.photo-credit { display: block; margin-top: 4px; font: 400 11.5px/1.5 var(--f-mono); letter-spacing: 0.02em; color: var(--ink-2); }
.photo-credit a { color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.photo-credit a:hover { color: var(--ink); text-decoration-color: var(--accent); }
/* The licence label never breaks at its hyphen ("CC BY-" / "SA 3.0"); the author's name still wraps. */
.photo-credit a[href*="creativecommons.org"] { white-space: nowrap; }

/* Module heads: a mono panel label on a navy rule, the way out on the right */
.cs-mod { padding-top: 40px; }
.cs-mhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; min-height: 44px;
  border-bottom: 1px solid var(--head); }
.cs-mlink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 500 12px/1.2 var(--f-mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.cs-mlink::after { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); }
.cs-mlink:hover { color: var(--head); }

/* The byline: the column's mark on its plate */
.cs-byline { display: flex; align-items: center; gap: 12px; }
.cs-by { margin: 0; font-size: 16px; line-height: 1.4; color: var(--ink); }
.cs-by a { position: relative; font-weight: 600; color: var(--head); text-decoration: none; }
.cs-by a::after { content: ""; position: absolute; inset: -12px -3px; }
.cs-by a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.cs-by-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 4px 0 0; font: 500 11.5px/1.4 var(--f-mono);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.cs-by-meta > * + * { padding-left: 12px; border-left: 1px solid var(--rule-strong); }

/* Buttons and fields, site-wide */
.btn { min-height: 46px; padding: 0 22px; background: var(--ground); color: var(--on-ground); border-radius: 0;
  font: 500 13px/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.btn:hover { background: var(--cs-panel-2); box-shadow: none; }
.btn:active { background: var(--cs-deep); }
.btn-line { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--head); color: var(--head); font: 500 12.5px/1.2 var(--f-mono); letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; }
.btn-line:hover { background: var(--head); color: var(--paper); box-shadow: none; }
.field label, .field .legend { margin-bottom: 7px; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: 0.1em; color: var(--ink-2); }
.field input, .field select, .field textarea { min-height: 46px; background-color: var(--cs-field); border: 1px solid var(--ink-2); }
.field textarea { min-height: 150px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--head); }
.form-note { font-size: 16px; line-height: 1.5; }
.chk { min-height: 44px; }

/* Display units: the label with a hollow square, the creative behind a hairline */
.ad-label { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font: 500 10.5px/1.2 var(--f-mono);
  letter-spacing: 0.12em; color: var(--ink-2); }
.ad-label::before { content: ""; flex: none; box-sizing: border-box; width: 7px; height: 7px; border: 1px solid currentColor; }
.ad a { border-color: var(--rule); }

/* ------------------------------------------------------------------ home: lead and board */
.cs-top { display: grid; gap: 28px; padding-top: 22px; }
.cs-lead { display: grid; gap: 20px; align-content: start; min-width: 0; }
.cs-lead-text { min-width: 0; }
.cs-lead-h { margin: 14px 0 0; font-size: clamp(30px, 1.9vw + 20px, 48px); line-height: 1.06; letter-spacing: -0.024em; }
.cs-lead-mid .cs-lead-h { font-size: clamp(29px, 1.5vw + 20px, 43px); }
.cs-lead-long .cs-lead-h { font-size: clamp(27px, 1.2vw + 19px, 38px); line-height: 1.1; }
.cs-lead-h a { color: var(--head); text-decoration: none; }
.cs-lead-h a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); text-underline-offset: 0.14em; }
.cs-lead-dek { margin: 14px 0 0; max-width: 36em; font-size: 18.5px; line-height: 1.5; color: var(--ink-2); }
.cs-lead .cs-byline { margin-top: 20px; }
.cs-lead-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ground); }
.cs-lead-cover img { width: 100%; height: 100%; object-fit: cover; }
.cs-lead-fig { min-width: 0; margin: 0; }
.cs-launch-cta { margin: 22px 0 0; }
/* What the lead rests on: its own source count and the publishers of its primary documents (wide screens) */
.cs-lead-trail { display: none; }
.cs-lt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; margin: 0;
  border-bottom: 1px solid var(--head); font: 500 11.5px/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.cs-lt-head a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: var(--head); text-decoration: none; }
.cs-lt-head a::before { content: ""; width: 8px; height: 8px; background: var(--head); }
.cs-lt-head a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.cs-lead-trail ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.cs-lead-trail li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 9px; border: 1px solid var(--rule); font-size: 15px; line-height: 1.3; color: var(--ink); }
.cs-lead-trail li::before { content: ""; flex: none; box-sizing: border-box; width: 7px; height: 7px; border: 1px solid var(--head); }
.cs-lead-trail li.cs-lt-p::before { background: var(--head); }
.cs-lead-trail li.cs-lt-more { padding: 5px 2px; border: 0; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.cs-lead-trail li.cs-lt-more::before { display: none; }

/* The board: the next five stories as rows, like a departures board */
.cs-board.cs-dark { background: var(--ground); }
.cs-board { min-width: 0; margin: 0 calc(-1 * var(--cs-gut)); padding: 2px var(--cs-gut) 6px; }
.cs-board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px;
  border-bottom: 1px solid var(--cs-hair-2); }
.cs-board-title { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 12.5px/1 var(--f-mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--on-ground); }
.cs-board-title::before { content: ""; width: 8px; height: 8px; background: var(--accent); }
.cs-board-all { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 500 12px/1 var(--f-mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ground-2); text-decoration: none; }
.cs-board-all::after { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.cs-board-all:hover { color: var(--on-ground); }
.cs-board-rows { list-style: none; margin: 0; padding: 0; }
.cs-brow { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 0 12px; margin: 0 -10px;
  padding: 14px 10px 15px; border-bottom: 1px solid var(--cs-hair); }
.cs-brow:last-child { border-bottom: 0; }
.cs-brow:hover { background: var(--cs-panel-2); }
.cs-brow-date { padding-top: 5px; font: 500 12.5px/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-ground); }
.cs-brow-body { min-width: 0; }
.cs-brow-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; }
.cs-brow-h { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.008em; }
.cs-brow-h a { color: var(--on-ground); text-decoration: none; }
.cs-brow-h a::after { content: ""; position: absolute; inset: 0; }
.cs-brow:hover .cs-brow-h a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.cs-board-empty { margin: 0; padding: 18px 0; font-size: 16px; color: var(--on-ground-2); }

.cs-rail { display: flex; flex-direction: column; align-items: center; gap: 24px; min-width: 0; }
.cs-rail .ad { margin: 0; }
/* on phones the leaderboard band follows the rail, with the same house art: one unit is enough */
@media (max-width: 719px) { .cs-rail .ad-mpu, .cs-rail:not(:has(> :not(.ad-mpu))) { display: none; } }
.sponsored-card { width: 100%; max-width: 300px; margin: 0; padding: 12px 14px 14px; border: 1px solid var(--rule-strong); background: var(--paper); }
.sponsored-card h3 { margin: 6px 0 4px; font-size: 17px; }

@media (min-width: 720px) {
  .cs-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .cs-board { margin: 0; padding: 2px 20px 6px; }
  .cs-brow { grid-template-columns: 62px minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  .cs-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "lead board" "lead rail";
    grid-template-rows: auto 1fr; column-gap: 48px; row-gap: 28px; padding-top: 32px; }
  .cs-lead { grid-area: lead; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cs-lead-trail { display: block; }
  .cs-board { grid-area: board; }
  .cs-rail { grid-area: rail; align-items: flex-start; }
}

/* ------------------------------------------------------------------ home: trackers and calendars */
.cs-fr-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.cs-fr-tile { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 0 14px; border-bottom: 1px solid var(--rule); }
.cs-fr-h { margin: 0; font: inherit; }
.cs-fr-h a { display: flex; flex-direction: column; gap: 8px; color: var(--head); text-decoration: none; }
.cs-fr-h a::after { content: ""; position: absolute; inset: 0; }
.cs-fr-name { display: flex; align-items: center; gap: 9px; font: 500 12px/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.cs-fr-name::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--head); }
.cs-fr-ed { font: 600 18px/1.3 var(--f-head); letter-spacing: -0.01em; text-wrap: balance; }
.cs-fr-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: auto 0 0;
  font: 500 11.5px/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.cs-fr-tile:hover .cs-fr-ed { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
@media (min-width: 640px) {
  .cs-fr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid var(--rule); }
  .cs-fr-tile { padding: 0 18px 16px; border-right: 1px solid var(--rule); }
  /* each tile opens on a short gauge of ticks */
  .cs-fr-tile::before { content: ""; height: 7px; margin: 0 -18px 4px;
    background: linear-gradient(to right, var(--rule-strong) 0 1px, transparent 1px) 17px 0 / 10px 100% repeat-x; }
  .cs-fr-tile:hover { background: var(--paper-2); }
}
@media (min-width: 1100px) {
  .cs-fr-grid.cs-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-fr-grid.cs-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ home: the Leaderboard band */
.cs-adband { margin-top: 40px; background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cs-adband .ad-leader { padding: 20px 0 24px; }

/* ------------------------------------------------------------------ cards: the dense grid and related stories */
.cs-grid4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.cs-grid4 > li { min-width: 0; border-bottom: 1px solid var(--rule); }
.cs-card { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas: "thumb kick" "thumb head" "thumb meta"; align-content: start; column-gap: 14px; padding: 16px 0; }
.cs-card:not(.cs-card-t) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kick" "head" "meta"; }
.cs-card .cs-thumb { grid-area: thumb; align-self: start; }
.cs-card-kick { grid-area: kick; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; }
.cs-card-h { grid-area: head; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.008em; }
.cs-card-h a { color: var(--head); text-decoration: none; }
.cs-card-h a::after { content: ""; position: absolute; inset: 0; }
.cs-card:hover .cs-card-h a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.cs-card-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 8px 0 0; font: 500 11.5px/1.3 var(--f-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.cs-card-meta > * + *, .cs-meta > * + * { padding-left: 10px; border-left: 1px solid var(--rule-strong); }
.cs-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 8px 0 0; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-2); }
.cs-card-meta .cs-kick-label { font: inherit; color: inherit; }
@media (min-width: 640px) {
  .cs-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-grid4 > li { padding: 0 20px; border-left: 1px solid var(--rule); }
  .cs-grid4 > li:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .cs-grid4 > li:nth-child(2n) { padding-right: 0; }
}
@media (min-width: 1100px) {
  .cs-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cs-grid4 > li:nth-child(n) { padding: 0 20px; border-left: 1px solid var(--rule); }
  .cs-grid4 > li:nth-child(4n+1) { padding-left: 0; border-left: 0; }
  .cs-grid4 > li:nth-child(4n) { padding-right: 0; }
  .cs-grid4 > li:nth-child(4n+1):nth-last-child(-n+4), .cs-grid4 > li:nth-child(4n+1):nth-last-child(-n+4) ~ li { border-bottom: 0; }
  .cs-card { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "thumb kick" "thumb meta" "head head"; padding: 18px 0 20px; }
  .cs-card .cs-thumb { margin-bottom: 14px; }
  .cs-card-kick { align-self: start; margin: 0 0 7px; }
  .cs-card-meta { align-self: start; margin: 0; }
}

/* ------------------------------------------------------------------ home: section blocks */
.cs-secs { display: grid; grid-template-columns: minmax(0, 1fr); }
.cs-sec { display: flex; flex-direction: column; min-width: 0; padding: 22px 0 6px; }
.cs-sec-h { margin: 0; font-size: 21px; line-height: 1.2; letter-spacing: -0.014em; }
.cs-sec-desc { margin: 6px 0 14px; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.cs-sec-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--head); }
.cs-sec-item { position: relative; padding: 12px 0 13px; border-bottom: 1px solid var(--rule); }
.cs-sec-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 6px; font: 500 11.5px/1.3 var(--f-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.cs-sec-item > a { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.32; letter-spacing: -0.006em; color: var(--head); text-decoration: none; }
.cs-sec-item > a::after { content: ""; position: absolute; inset: 0; }
.cs-sec-item:hover > a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.cs-sec-more { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px;
  font: 500 12px/1.2 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--cs-linkline); text-underline-offset: 4px; }
.cs-sec-more:hover { text-decoration-color: var(--accent); }
@media (max-width: 719px) { .cs-sec-item:nth-child(n+4) { display: none; } }
@media (min-width: 720px) { .cs-secs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 1100px) {
  .cs-secs.cs-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-secs.cs-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ home: the columns */
.cs-colband.cs-dark { background: var(--ground); }
.cs-colband { margin-top: 48px; padding: 20px 0 36px; }
.cs-colband .cs-mhead { border-bottom-color: var(--cs-hair-2); }
.cs-colx-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.cs-colx { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-content: start; gap: 0 16px; padding: 20px 0;
  border-bottom: 1px solid var(--cs-hair); }
.cs-colx:last-child { border-bottom: 0; }
.cs-colx .cs-plate { width: 56px; height: 56px; }
.cs-colx-body { min-width: 0; }
.cs-colx-h { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -0.012em; }
.cs-colx-h a { color: var(--on-ground); text-decoration: none; }
.cs-colx-h a::after { content: ""; position: absolute; inset: 0; }
.cs-colx:hover .cs-colx-h a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.cs-colx-role { margin: 5px 0 10px; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ground-2); }
.cs-colx-q, .cs-colx-beat { margin: 0; font-size: 17px; line-height: 1.45; color: var(--on-ground); text-wrap: pretty; }
.cs-colx-beat { font-size: 16px; color: var(--on-ground-2); }
@media (min-width: 1100px) {
  .cs-colx-list { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: 26px; }
  .cs-colx { grid-template-columns: minmax(0, 1fr); padding: 0 20px 4px; border-bottom: 0; border-left: 1px solid var(--cs-hair); }
  .cs-colx:first-child { padding-left: 0; border-left: 0; }
  .cs-colx:last-child { padding-right: 0; }
  .cs-colx .cs-plate { width: 64px; height: 64px; margin-bottom: 18px; }
}

/* ------------------------------------------------------------------ the Monday digest */
.cs-signup { padding: 32px 0 36px; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.cs-signup-grid { display: grid; gap: 18px; }
.cs-signup-k { margin-bottom: 12px; color: var(--ink-2); }
.cs-signup-h { margin: 0; font-size: clamp(25px, 1vw + 20px, 32px); letter-spacing: -0.02em; }
.cs-signup-grid > div > p:last-child { margin: 10px 0 0; max-width: 36em; color: var(--ink-2); }
.cs-signup .form-note { color: var(--ink-2); }
@media (min-width: 900px) { .cs-signup { padding: 40px 0 44px; } .cs-signup-grid { grid-template-columns: 5fr 7fr; gap: 56px; align-items: end; } }

/* ------------------------------------------------------------------ article: the dark header band */
.cs-ahead { padding: 24px 0 28px; }
.cs-ahead-grid { display: grid; gap: 24px; }
.cs-ahead-main { min-width: 0; }
.cs-ahead h1 { margin: 16px 0 0; max-width: 21em; font-size: clamp(31px, 1.9vw + 22px, 52px); line-height: 1.07; letter-spacing: -0.024em; }
.cs-dek { margin: 16px 0 0; max-width: 38em; font-size: clamp(18px, 0.3vw + 17px, 21px); line-height: 1.5; color: var(--on-ground-2); }
.cs-ahead-by { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--cs-hair); }
/* The cover is the picture on the monitor and shows at every width (owner request of 25 October 2026): on phones it
   closes the band under the byline. A photo is framed the same way; its caption and credit sit under the frame. */
.cs-ahead-cover { display: block; margin: 0; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--cs-hair-2); background: var(--ground); }
.cs-ahead-cover img { width: 100%; height: 100%; object-fit: cover; }
.cs-ahead-cover.is-photo { aspect-ratio: auto; overflow: visible; border: 0; background: none; }
.cs-ahead-cover.is-photo picture { display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--cs-hair-2); background: var(--ground); }
.cs-ahead-cover.is-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Beside a photo the dek does not end on a lone word (same line count; cover-card articles set as they always have) */
.cs-ahead-photo .cs-dek { text-wrap: pretty; }
@media (min-width: 960px) {
  .cs-ahead { padding: 36px 0 40px; }
  .cs-ahead-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); column-gap: 56px; align-items: end; }
}

/* ------------------------------------------------------------------ article: spec rail, body, sidebar */
.cs-art-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "spec" "body" "named"; row-gap: 28px;
  padding-top: 20px; padding-bottom: 44px; }
.cs-art-grid > .cs-spec { grid-area: spec; min-width: 0; }
.cs-art-grid > .cs-abody { grid-area: body; min-width: 0; max-width: 680px; }
.cs-art-grid > .cs-named { grid-area: named; min-width: 0; }
.cs-art-grid > .cs-aside { grid-area: aside; }
.cs-aside { display: none; min-width: 0; }

.cs-spec-title { margin: 0 0 8px; font: 500 11px/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.cs-spec dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; margin: 0; border-top: 1px solid var(--head); }
.cs-spec dl > div { min-width: 0; padding: 10px 0 11px; border-bottom: 1px solid var(--rule); }
.cs-spec dt { margin: 0 0 3px; font: 500 11px/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.cs-spec dd { margin: 0; font-size: 15.5px; line-height: 1.35; color: var(--ink); }
.cs-spec dd a { position: relative; color: var(--head); text-decoration: underline; text-decoration-color: var(--cs-linkline); text-underline-offset: 3px; }
.cs-spec dd a::after { content: ""; position: absolute; inset: -12px -4px; }
.cs-spec dd a:hover { text-decoration-color: var(--accent); }
.cs-spec .cs-spec-col { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; text-decoration: none; }
.cs-spec .cs-spec-col:hover span { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.cs-spec .cs-spec-col::after { inset: -8px -4px; }

.cs-named .cs-label { margin-bottom: 12px; font-size: 11.5px; }
.cs-named ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cs-named li { padding: 5px 9px; border: 1px solid var(--rule); background: var(--paper); font-size: 15px; line-height: 1.3; color: var(--ink); }

.cs-abody .prose { font-size: 18px; line-height: 1.68; }
.prose > * { margin: 0 0 1.1em; }
.prose p { text-wrap: pretty; }
.prose h2 { position: relative; margin: 1.9em 0 0.65em; padding-top: 16px; font-size: 23px; line-height: 1.25; letter-spacing: -0.014em; }
/* a short length of the signal scale over every section of a piece */
.prose h2::before { content: ""; position: absolute; left: 0; top: 0; width: 41px; height: 7px;
  background: linear-gradient(var(--head), var(--head)) 0 0 / 100% 1px no-repeat,
              linear-gradient(to right, var(--head) 0 1px, transparent 1px) 0 0 / 10px 100% repeat-x; }
.prose h3 { margin: 1.5em 0 0.5em; font-size: 19px; }
.prose a { color: var(--ink); text-decoration-color: var(--cs-linkline); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--head); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.prose li::marker { color: var(--ink-2); }
.prose strong { font-weight: 600; }
.prose table { font-size: 15px; }
/* A table wider than the column scrolls inside its own box (site.css). The edge that still has columns to show carries
   a navy hairline and a short fade, like a reading running off the scale; backgrounds that scroll with the content
   (local) cover them at either end, so the cue shows only where there is more, and never outside the table. */
.prose table {
  background:
    linear-gradient(to right, var(--paper) 45%, rgba(244, 241, 234, 0)) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--paper) 45%, rgba(244, 241, 234, 0)) right center / 28px 100% no-repeat local,
    linear-gradient(var(--head), var(--head)) left center / 1px 100% no-repeat scroll,
    linear-gradient(var(--head), var(--head)) right center / 1px 100% no-repeat scroll,
    linear-gradient(to right, rgba(11, 31, 58, 0.16), rgba(11, 31, 58, 0)) left center / 14px 100% no-repeat scroll,
    linear-gradient(to left, rgba(11, 31, 58, 0.16), rgba(11, 31, 58, 0)) right center / 14px 100% no-repeat scroll;
  background-color: var(--paper);
}
.prose th { font: 500 11px/1.35 var(--f-mono); letter-spacing: 0.08em; border-bottom: 1px solid var(--head); }
.prose blockquote { margin: 1.4em 0; padding: 2px 0 2px 20px; border-left: 1px solid var(--head); color: var(--ink); }
.prose .ad-inline { margin: 2em 0; }

/* The document trail: every source numbered in mono on one line; primary documents are solid stations */
.sources { margin-top: 44px; padding-top: 0; border-top: 0; }
.cs-trail-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--head); }
.sources h2 { margin: 0; font-size: 22px; line-height: 1.2; }
.cs-trail-count { margin: 0; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.cs-trail { list-style: none; margin: 0; padding: 0; }
.cs-src { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; padding: 12px 0; }
.cs-src::before { content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 1px; background: var(--rule-strong); }
.cs-src:first-child::before { top: 24px; }
.cs-src:last-child::before { bottom: auto; height: 24px; }
.cs-src:only-child::before { display: none; }
.cs-src-n { position: relative; z-index: 1; align-self: start; display: grid; place-items: center; width: 40px; height: 24px;
  border: 1px solid var(--head); background: var(--paper); font: 500 12px/1 var(--f-mono); color: var(--head); }
.cs-src-p .cs-src-n { background: var(--head); color: var(--paper); }
.cs-src-body { min-width: 0; padding-top: 2px; }
.cs-src-body a { font-size: 16px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; text-decoration-color: var(--cs-linkline); text-underline-offset: 3px; }
.cs-src-body a::after { content: ""; position: absolute; inset: 0; }
.cs-src:hover .cs-src-body a { text-decoration-color: var(--accent); }
.cs-src-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 4px 0 0; font-size: 16px; line-height: 1.4; color: var(--ink-2); }
.cs-src-meta time, .cs-src-type { font: 500 11px/1.9 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; }

.cs-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 32px; padding: 14px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cs-share-k { margin: 0; font: 500 11.5px/1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.cs-share ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cs-share a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--rule-strong);
  font: 500 12.5px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.cs-share a:hover { border-color: var(--head); background: var(--paper-2); }

/* The column's identification plate */
.cs-idplate { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; margin-top: 28px; padding: 18px; border: 1px solid var(--head); }
.cs-idplate-role { margin: 0; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.cs-idplate h2 { margin: 4px 0 0; font-size: 20px; }
.cs-idplate h2 a { position: relative; color: var(--head); text-decoration: none; }
.cs-idplate h2 a::after { content: ""; position: absolute; inset: -10px -4px; }
.cs-idplate h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.cs-idplate-text { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }

/* Sidebars: the small board, then the unit */
.cs-aside-list { margin-bottom: 32px; }
.cs-aside-list .cs-label { min-height: 40px; border-bottom: 1px solid var(--head); }
.cs-aside-unit { position: sticky; top: 24px; }
.cs-aside-index .cs-aside-unit { position: static; margin: 0 0 32px; }
.cs-minis { list-style: none; margin: 0; padding: 0; }
.cs-mini { position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 0 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.cs-mini time { padding-top: 4px; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.cs-mini > div { min-width: 0; }
.cs-mini .cs-chip { margin-bottom: 7px; }
.cs-mini-h { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--head); text-decoration: none; }
.cs-mini-h::after { content: ""; position: absolute; inset: 0; }
.cs-mini:hover .cs-mini-h { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

.cs-related { padding: 24px 0 44px; background: var(--paper-2); border-top: 1px solid var(--rule); }
.cs-related .cs-grid4 > li { border-bottom-color: var(--rule); }

@media (min-width: 720px) and (max-width: 1279px) {
  .cs-spec dl { display: flex; flex-wrap: wrap; column-gap: 32px; border-bottom: 1px solid var(--rule); }
  .cs-spec dl > div { border-bottom: 0; }
}
@media (min-width: 1080px) {
  .cs-art-grid { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "spec aside" "body aside" "named aside"; column-gap: 56px; }
  .cs-aside { display: block; }
}
@media (min-width: 1280px) {
  .cs-art-grid { grid-template-columns: 184px minmax(0, 1fr) 300px; grid-template-areas: "spec body aside" "named body aside";
    grid-template-rows: auto 1fr; column-gap: 40px; padding-top: 32px; }
  .cs-spec dl { grid-template-columns: minmax(0, 1fr); }
  .cs-named { align-self: start; }
  .cs-named .cs-label { min-height: 0; padding-top: 10px; border-top: 1px solid var(--head); color: var(--ink-2); font-size: 11px; }
  .cs-named .cs-label::before { display: none; }
  .cs-named ul { display: block; }
  .cs-named li { position: relative; padding: 6px 0 7px 15px; border: 0; border-bottom: 1px solid var(--rule); background: none; font-size: 14.5px; }
  .cs-named li::before { content: ""; position: absolute; left: 0; top: 13px; width: 5px; height: 5px; background: var(--rule-strong); }
}

/* ------------------------------------------------------------------ listings: page heads, the ledger, the pager */
.cs-phead { padding: 6px 0 30px; }
.cs-crumbs { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; margin-bottom: 6px; min-height: 44px;
  font: 500 11.5px/1.2 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ground-2); }
.cs-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-ground); text-decoration: none; }
.cs-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cs-crumbs > span[aria-hidden="true"] { color: var(--cs-tick-hi); }
.cs-phead h1 { font-size: clamp(34px, 2.2vw + 24px, 56px); line-height: 1.04; letter-spacing: -0.026em; }
.cs-intro { margin: 14px 0 0; max-width: 42em; font-size: 18.5px; line-height: 1.5; color: var(--on-ground-2); }
.cs-intro a { position: relative; color: var(--on-ground); text-decoration-color: var(--cs-tick-hi); text-underline-offset: 3px; }
.cs-intro a::after { content: ""; position: absolute; inset: -12px -3px; }
.cs-phead .disclosure { margin-top: 22px; }

.cs-deskhead-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; }
.cs-deskimg { width: 80px; height: 80px; margin-top: 18px; border: 1px solid var(--cs-hair-2); }
@media (min-width: 720px) {
  .cs-deskhead-grid { grid-template-columns: 120px minmax(0, 1fr); align-items: start; }
  .cs-deskimg { width: 120px; height: 120px; margin-top: 56px; }
}

.cs-index { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 8px; padding-bottom: 48px; }
.cs-index-main { min-width: 0; }
.cs-ledger { list-style: none; margin: 0; padding: 0; }
.cs-lrow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 72px; grid-template-areas: "kick thumb" "head thumb" "date thumb";
  align-content: start; column-gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.cs-lrow-date { grid-area: date; margin-top: 8px; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.cs-lrow-kick { grid-area: kick; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 9px; }
.cs-lrow-kick:empty { display: none; }
.cs-lrow-h { grid-area: head; margin: 0; font-size: 19px; font-weight: 600; line-height: 1.28; letter-spacing: -0.01em; }
.cs-lrow-h a { color: var(--head); text-decoration: none; }
.cs-lrow-h a::after { content: ""; position: absolute; inset: 0; }
.cs-lrow:hover .cs-lrow-h a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.cs-lrow-dek { grid-area: dek; display: none; }
.cs-lrow .cs-thumb { grid-area: thumb; align-self: start; }
.cs-empty { max-width: 38em; padding: 32px 0; font-size: 18px; color: var(--ink-2); }

.cs-pager { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.cs-pager a, .cs-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--rule-strong); font: 500 12.5px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.cs-pager a:hover { border-color: var(--head); }
.cs-pager span[aria-current] { background: var(--head); border-color: var(--head); color: var(--paper); }

@media (min-width: 720px) {
  .cs-lrow { grid-template-columns: 112px minmax(0, 1fr) 104px; grid-template-areas: "date kick thumb" "date head thumb" "date dek thumb";
    column-gap: 24px; padding: 22px 0; }
  .cs-lrow-date { margin-top: 4px; font-size: 12px; color: var(--ink); }
  .cs-lrow-h { font-size: 22px; line-height: 1.24; }
  .cs-lrow-dek { display: block; max-width: 44em; margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
}
@media (min-width: 1080px) {
  .cs-index { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 56px; padding-top: 12px; }
  .cs-aside-index { padding-top: 16px; }
}

/* ------------------------------------------------------------------ columns */
.cs-colbanner { margin: 4px 0 22px; border: 1px solid var(--cs-hair-2); background: var(--ground); }
.cs-colbanner img { width: 100%; height: auto; }
.cs-colid { display: flex; align-items: center; gap: 20px; margin: 8px 0 18px; }
.cs-colid .cs-intro { margin-top: 6px; }
.cs-coldesc { margin: 0; max-width: 46em; font-size: 18px; line-height: 1.55; color: var(--on-ground); }

/* The disclosures: a bordered note with a hollow square, no side stripe */
.disclosure { position: relative; margin: 20px 0 0; max-width: 46em; padding: 14px 16px 14px 38px; border: 1px solid var(--rule-strong);
  background: var(--paper-2); color: var(--ink); font-size: 16px; line-height: 1.5; }
.disclosure::before { content: ""; position: absolute; left: 16px; top: 21px; box-sizing: border-box; width: 8px; height: 8px; border: 1.5px solid currentColor; }

/* The column profile, rendered by build.py */
.col-profile { max-width: 46em; padding-top: 6px; }
.col-jump { margin: 6px 0 16px; }
.col-jump a { display: inline-flex; align-items: center; min-height: 44px; font: 500 12px/1.2 var(--f-mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink); text-decoration: underline; text-decoration-color: var(--cs-linkline); text-underline-offset: 4px; }
.col-lede { font-size: clamp(19px, 0.4vw + 17.5px, 21px); line-height: 1.52; }
.col-q { margin: 28px 0 0; padding: 20px 22px 24px; border: 0; background: var(--ground); }
.col-q h2 { display: flex; align-items: center; gap: 10px; color: var(--on-ground-2); }
.col-q h2::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--on-ground-2); }
.col-q p { color: var(--on-ground); font-size: clamp(21px, 0.8vw + 18px, 26px); line-height: 1.3; }
.col-sec { margin-top: 40px; }
.col-sec h2 { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--head); font: 500 12.5px/1.3 var(--f-mono);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--head); }
.col-sec h2 + .col-dl > div:first-child, .col-sec h2 + details { border-top: 0; }
.col-sec h2 + p, .col-sec h2 + .col-list { margin-top: 14px; }
.col-dl > div { padding: 12px 0; }
.col-dl dt { color: var(--head); }
.col-dl dt a { display: inline-block; padding: 11px 0; margin: -11px 0; }
.col-list li::marker, .doc li::marker { color: var(--ink-2); }
.col-sec a, .col-dl a { text-decoration-color: var(--cs-linkline); }
.col-more summary { color: var(--head); }
.col-when { color: var(--ink-2); }
.cs-pieces { margin-top: 52px; }

/* /columns: a plate per column */
.cs-colcards { list-style: none; margin: 0; padding: 8px 0 48px; display: grid; grid-template-columns: minmax(0, 1fr); }
.cs-cc { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-content: start; gap: 0 18px; padding: 24px 0;
  border-bottom: 1px solid var(--rule); }
.cs-cc .cs-plate { width: 72px; height: 72px; }
.cs-cc-body { min-width: 0; }
.cs-cc-role { margin: 0 0 4px; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.cs-cc-h { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }
.cs-cc-h a { color: var(--head); text-decoration: none; }
.cs-cc-h a::after { content: ""; position: absolute; inset: 0; }
.cs-cc:hover .cs-cc-h a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.cs-cc-beat { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
.cs-cc-q { margin: 12px 0 0; font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--head); text-wrap: pretty; }
.cs-cc-latest { display: grid; gap: 4px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.4; color: var(--ink-2); }
.cs-cc-k { font: 500 11px/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.cs-cc-latest a { position: relative; z-index: 1; display: inline-block; padding: 11px 0; margin: -11px 0; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--cs-linkline); text-underline-offset: 3px; }
.cs-cc-latest a:hover { text-decoration-color: var(--accent); }
.cs-colid .cs-cc-role { color: var(--on-ground-2); }
@media (min-width: 900px) {
  .cs-colcards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
  .cs-cc { grid-template-columns: 96px minmax(0, 1fr); gap: 0 22px; }
  .cs-cc .cs-plate { width: 96px; height: 96px; }
}

/* ------------------------------------------------------------------ publication pages */
.cs-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 16px; padding-bottom: 56px; }
.cs-docnav ul { list-style: none; margin: 0 calc(-1 * var(--cs-gut)); padding: 0 var(--cs-gut); display: flex; gap: 0 22px;
  overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rule); }
.cs-docnav ul::-webkit-scrollbar { display: none; }
.cs-docnav li { flex: none; }
.cs-docnav a { display: flex; align-items: center; min-height: 48px; border-bottom: 3px solid transparent; font: 500 12px/1.2 var(--f-mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.cs-docnav a:hover { color: var(--head); }
.cs-docnav a[aria-current="page"] { color: var(--head); border-bottom-color: var(--accent); }
.cs-docnav a:focus-visible { outline-offset: -3px; }
@media (min-width: 960px) {
  .cs-doc { grid-template-columns: 220px minmax(0, 1fr); gap: 64px; padding-top: 44px; }
  .cs-docnav ul { display: block; position: sticky; top: 24px; margin: 0; padding: 0; overflow: visible; border-top: 1px solid var(--head); border-bottom: 0; }
  .cs-docnav li { border-bottom: 1px solid var(--rule); }
  .cs-docnav a { gap: 12px; min-height: 42px; border-bottom: 0; white-space: normal; }
  .cs-docnav a::before { content: ""; flex: none; box-sizing: border-box; width: 8px; height: 8px; border: 1px solid var(--rule-strong); }
  .cs-docnav a[aria-current="page"]::before { background: var(--accent); border-color: var(--accent); }
}
.doc { max-width: 700px; }
.doc h1 { margin-bottom: 20px; font-size: clamp(32px, 2vw + 24px, 50px); line-height: 1.06; letter-spacing: -0.024em; }
.doc h2 { position: relative; margin: 1.8em 0 0.55em; padding-top: 16px; font-size: 23px; letter-spacing: -0.014em; }
.doc h2::before { content: ""; position: absolute; left: 0; top: 0; width: 41px; height: 7px;
  background: linear-gradient(var(--head), var(--head)) 0 0 / 100% 1px no-repeat,
              linear-gradient(to right, var(--head) 0 1px, transparent 1px) 0 0 / 10px 100% repeat-x; }
.doc h3 { font-size: 19px; }
.doc .lede { font-size: 20px; line-height: 1.5; color: var(--ink-2); }
.doc a { text-decoration-color: var(--cs-linkline); text-underline-offset: 3px; }
.doc a:hover { text-decoration-color: var(--accent); }
.doc .note { padding: 18px; border: 1px solid var(--rule-strong); background: var(--paper-2); }
.kit-link a:not(.btn-line) { display: inline-flex; align-items: center; min-height: 44px; }
.launch-tag { padding: 7px 10px; background: var(--ground); color: var(--on-ground); }
.rates th { border-bottom: 1px solid var(--head); }
.rates td.price { font: 500 18px/1.2 var(--f-mono); letter-spacing: 0; }
.placement .vis { border: 1px solid var(--rule); }
.placement .vis .mono { font-size: 12px; text-align: center; }
/* /photo-credits: on phones each photo takes the column's full width rather than stopping short of it */
.photo-item img { max-width: 100%; }
.placement p { font-size: 16px; }
.rates .sub { font-size: 15px; }
.steps li::before { font-weight: 500; }
.emails .addr { color: var(--head); }
.ad-disclosure, .sponsor-about { border: 1px solid var(--rule-strong); }
.supported-by .sb-label, .sponsor-line { letter-spacing: 0.1em; }

/* Partner content pages keep the shared article classes (build.py renders them); give them this site's measure. */
.sponsored-article .article-head { padding-top: 32px; }
.sponsored-article .article-head h1 { font-size: clamp(31px, 1.9vw + 22px, 52px); letter-spacing: -0.024em; }
.partner-list h2 a, .sponsored-card h3 a { color: var(--head); }

/* ------------------------------------------------------------------ 404: no signal */
.cs-404 { max-width: 880px; padding-top: 48px; padding-bottom: 72px; }
/* The station's ident over the flat scale: small, so it reads as an ident and not as a second masthead */
.cs-404 .nf-mark { width: auto; height: 18px; max-width: 100%; margin: 0 0 8px; }
@media (min-width: 720px) { .cs-404 .nf-mark { height: 20px; } }
.cs-404-scale { height: 30px; margin-bottom: 28px; border-bottom: 1px solid var(--head);
  background: linear-gradient(to right, var(--head) 0 1px, transparent 1px) 0 100% / 50px 12px repeat-x,
              linear-gradient(to right, var(--rule-strong) 0 1px, transparent 1px) 0 100% / 10px 5px repeat-x; }
.cs-404 h1 { font-size: clamp(34px, 2.6vw + 24px, 56px); line-height: 1.05; letter-spacing: -0.026em; }
.cs-404 p { max-width: 36em; font-size: 19px; color: var(--ink-2); }
.cs-404-secs { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.cs-404-secs .cs-chip { min-height: 44px; padding: 0 12px; }

/* ------------------------------------------------------------------ footer: the scale again, then the index */
.foot { margin: 0; padding: 0; background: var(--ground); color: var(--on-ground); }
.cs-foot-in.cs-dark { background: var(--ground); padding-bottom: 28px; }
.cs-foot-scale { height: 12px;
  background: linear-gradient(var(--cs-tick), var(--cs-tick)) 0 0 / 100% 1px no-repeat,
              linear-gradient(to right, var(--cs-tick-hi) 0 1px, transparent 1px) calc(50% + 50px) 0 / 100px 10px repeat-x,
              linear-gradient(to right, var(--cs-tick) 0 1px, transparent 1px) calc(50% + 25px) 0 / 50px 7px repeat-x,
              linear-gradient(to right, var(--cs-tick) 0 1px, transparent 1px) calc(50% + 5px) 0 / 10px 4px repeat-x; }
.cs-foot-top { display: grid; gap: 28px; padding: 28px 0 28px; border-bottom: 1px solid var(--cs-hair); }
.cs-foot-brand img { width: auto; height: 28px; max-width: 100%; }
.cs-foot-brand p { margin: 16px 0 0; max-width: 32em; font-size: 16px; line-height: 1.55; color: var(--on-ground-2); }
.cs-foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
.foot h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--on-ground-2); }
.foot h2::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--cs-tick-hi); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 0; }
.foot a { display: flex; align-items: center; min-height: 44px; font-size: 16px; line-height: 1.3; color: var(--on-ground); text-decoration: none; }
.foot a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.cs-foot-brand a { display: inline-block; min-height: 0; padding: 8px 0; margin: -8px 0; }
.cs-foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 18px; font: 500 11.5px/1.5 var(--f-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ground-2); }
.cs-foot-base p { margin: 0; }
@media (min-width: 720px) { .cs-foot-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .cs-foot-top { grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); gap: 56px; padding-top: 36px; }
  .cs-foot-nav { grid-template-columns: repeat(5, max-content); justify-content: space-between; column-gap: 24px; }
  .foot a { min-height: 34px; font-size: 15px; }
}
@media (pointer: coarse) { .foot a { min-height: 44px; } }

/* ------------------------------------------------------------------ motion and print */
@media (prefers-reduced-motion: no-preference) {
  .cs-brow, .cs-fr-tile, .cs-share a, .cs-pager a, .btn, .btn-line, .cs-menu, .cs-util a, .cs-dial-list a, .cs-dial-list a::after, a.cs-chip {
    transition: background-color 160ms var(--cs-ease), color 160ms var(--cs-ease), border-color 160ms var(--cs-ease); }
  html { scroll-behavior: smooth; }
}
@media print {
  .cs-mast, .cs-aside, .cs-related, .cs-share, .cs-adband, .cs-signup, .cs-rail, .cs-board, .cs-colband, .cs-ahead-cover { display: none !important; }
  .cs-dark { --ink: #091930; --ink-2: #566272; --head: #0B1F3A; --rule: #CFCFCE; --rule-strong: #9299A0; background: none; color: #091930; }
  .cs-art-grid { display: block; }
}