@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/spectral-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:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/spectral-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:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/spectral-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:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/spectral-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:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/spectral-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:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/spectral-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:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/spectral-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:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/spectral-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:'Spectral';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/spectral-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:'Spectral';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/spectral-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:'Work Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/work-sans-normal-400_700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/work-sans-normal-400_700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/jetbrains-mono-normal-400_600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/jetbrains-mono-normal-400_600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
--ground:#1D3B2A;--paper:#F2F1EA;--paper-2:#E6E7DF;--accent:#9A7B2E;--accent-text:#7B6225;
--accent-strong:#8E712A;--on-accent:#FFFFFF;--accent-on-ground:#9A7B2E;
--head:#1D3B2A;--ink:#183022;--ink-2:#55675B;--rule:#D0D4CB;--rule-strong:#99A599;
--on-ground:#F2F1EA;--on-ground-2:#A9B8AE;--ground-line:#485F50;
--error:#A4161A;--ok:#1E6B3A;
--f-head:'Spectral', Georgia, 'Times New Roman', serif;--f-body:'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;--f-mono:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;--f-dek:'Spectral', Georgia, 'Times New Roman', serif;
--head-weight:600;--head-track:0;
--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2355675B' stroke-width='2'/%3E%3C/svg%3E");
}
/* Newsroom shared stylesheet. Site tokens (:root) and @font-face rules are prepended by build.py. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* EM Governance Review (em): "The Gazette".
   A law review crossed with an official gazette: text-led, numbered, exact. Forest green and brass on white paper.
   Spectral carries headlines, reading text and the small-caps labels; Work Sans the interface; JetBrains Mono the dates
   and counts. Section marks are CSS counters: the list-item counter on numbered entries (so <ol start> carries an
   archive page's count on), "sec" on article sections, "csec" on column profiles, "dsec" on the publication's rules.
   Photos (Wikimedia Commons) appear only as captioned exhibits: beside the case note's head and as the plate of the
   docket's first entry; the wordmark signs the footer and heads the 404 page.
   build.py appends this file after src/site.css; markup is themes/em.py; the ornament is em/dial.svg. */

:root {
  --paper: #FBFBF7;           /* white paper, a breath of green */
  --paper-2: #F2F4EE;         /* panels */
  --ground: #1D3B2A;          /* forest green: footer, The Clock, buttons */
  --head: #1D3B2A;
  --ink: #1B261F;             /* 15:1 on paper */
  --ink-2: #4B5B51;           /* 6.9:1 on paper */
  --rule: #DCE1D9;
  --rule-strong: #9AA89E;
  --line: #76857B;            /* form borders: 3.7:1 on paper */
  --brass: #9A7B2E;           /* rules and large marks only (3.9:1) */
  --brass-ink: #7A5E1C;       /* brass for small text (5.9:1) */
  --brass-light: #D4B666;     /* brass on the green (6.2:1) */
  --accent: #9A7B2E;
  --accent-text: #7A5E1C;
  --accent-strong: #1D3B2A;
  --on-accent: #FBFBF7;
  --accent-on-ground: #D4B666;
  --on-ground: #FBFBF7;
  --on-ground-2: #B9C7BD;     /* 7:1 on the green */
  --ground-line: #3A5646;
  --f-text: var(--f-head);
  --f-ui: var(--f-body);
  --measure: 34em;
  --hang: 4.75rem;            /* the margin the section marks hang in on wide screens */
}

/* ------------------------------------------------------------ base */
body { font-family: var(--f-text); font-size: 18px; line-height: 1.6; background: var(--paper); color: var(--ink); }
::selection { background: #E8DDBC; color: var(--ink); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--f-head); color: var(--head); font-weight: 600; letter-spacing: 0; }
.skip { font-family: var(--f-ui); font-size: 15px; line-height: 20px; padding: 12px 16px; background: var(--ground); color: var(--on-ground); }
.bar::before { content: none; }
.g-sc { font-family: var(--f-head); font-weight: 600; font-size: 12.5px; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; }
.g-mono { font-family: var(--f-mono); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ribbon { background: var(--ink); color: var(--brass-light); font-size: 11.5px; letter-spacing: 0.1em; padding: 8px 16px; }

/* ------------------------------------------------------------ masthead: nameplate, brass hairline, week line, sections */
.g-mast { background: var(--paper); border-bottom: 1px solid var(--rule); }
.g-mast-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--brass); }
.g-nameplate { display: inline-block; color: var(--head); text-decoration: none; font-family: var(--f-head); font-weight: 600; font-size: clamp(25px, 7vw, 46px); line-height: 1; letter-spacing: 0.03em; white-space: nowrap; padding: 9px 0; }
.g-np-sc { font-size: 0.77em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.g-nameplate:hover .g-np-cap:first-child { color: var(--brass-ink); }
.g-util { display: none; }
.g-mast-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 28px; }
.g-week { margin: 0; min-height: 46px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; padding-top: 13px; }
.g-week .g-sc { color: var(--brass-ink); font-size: 12px; }
.g-week time { font-family: var(--f-mono); font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.g-menu { appearance: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; margin-right: -2px; background: transparent; color: var(--head); border: 1px solid var(--head); border-radius: 0; font: 500 15px/1 var(--f-ui); cursor: pointer; }
.g-menu-bars { width: 16px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; }
.g-menu-bars::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid currentColor; }
.g-menu[aria-expanded="true"] { background: var(--head); color: var(--on-ground); }
.g-nav { flex: 1 0 calc(100% + 32px); min-width: 0; margin: 0 -16px; border-top: 1px solid var(--rule); }
.g-nav ul { list-style: none; margin: 0; padding: 0 10px; display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.g-nav ul::-webkit-scrollbar { display: none; }
.g-nav a { position: relative; display: block; padding: 12px 6px; font: 500 15px/20px var(--f-ui); color: var(--ink-2); text-decoration: none; }
.g-nav a::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px; background: transparent; }
.g-nav a:hover { color: var(--head); }
.g-nav a:hover::after { background: var(--brass); }
.g-nav a[aria-current="page"] { color: var(--head); font-weight: 600; }
.g-nav a[aria-current="page"]::after { background: var(--head); }
.g-nav a:focus-visible { outline-offset: -2px; }
.g-drawer { display: none; background: var(--paper-2); border-top: 1px solid var(--rule); }
.g-drawer.open { display: block; }
.g-drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 20px; padding-top: 18px; padding-bottom: 24px; }
.g-drawer h2 { font-size: 12px; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-ink); margin: 0 0 2px; }
.g-drawer ul { list-style: none; margin: 0; padding: 0; }
.g-drawer a { display: block; padding: 10px 0; font: 400 16px/24px var(--f-ui); color: var(--ink); text-decoration: none; }
@media (min-width: 720px) {
  .g-nav { flex-basis: calc(100% + 56px); margin: 0 -28px; }
  .g-nav ul { padding: 0 22px; }
}
@media (min-width: 900px) {
  .g-mast-top { padding-top: 24px; padding-bottom: 8px; }
  .g-util { display: flex; align-items: center; gap: 26px; margin-bottom: 2px; }
  .g-util a { font: 500 15px/20px var(--f-ui); color: var(--ink-2); text-decoration: none; padding: 12px 0; }
  .g-util a:hover { color: var(--head); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 5px; }
  .g-util .g-util-nl { color: var(--on-ground); background: var(--head); padding: 11px 18px; }
  .g-util .g-util-nl:hover { color: var(--on-ground); background: var(--ink); text-decoration: none; }
  .g-menu { display: none; }
  .g-drawer, .g-drawer.open { display: none; }
}
@media (min-width: 1180px) {
  .g-mast-row { flex-wrap: nowrap; }
  .g-week { flex: 0 0 auto; padding-top: 0; align-items: center; }
  .g-nav { flex: 0 1 auto; margin: 0; border-top: 0; }
  .g-nav ul { padding: 0; margin-right: -6px; gap: 14px; overflow: visible; }
  .g-nav a { padding: 12px 6px; }
}

/* ------------------------------------------------------------ shared: section heads, entries, type labels, dates */
.g-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; padding-bottom: 9px; border-bottom: 2px solid var(--head); }
.g-h { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--head); }
.g-more { font: 500 15px/20px var(--f-ui); color: var(--ink-2); text-decoration: none; padding: 12px 0; margin: -12px 0; }
.g-more:hover { color: var(--head); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }
.g-sub { margin: 14px 0 0; font-size: 17px; color: var(--ink-2); font-style: italic; }

.g-type { margin: 0; font-family: var(--f-head); font-weight: 600; font-size: 12px; line-height: 1.6; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-ink); }
.g-type span + span::before { content: "\00B7"; margin: 0 0.5em; color: var(--ink-2); }
.g-date { font-family: var(--f-mono); font-size: 12.5px; line-height: 1.6; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-meta { display: flex; flex-wrap: wrap; gap: 0 14px; margin: 8px 0 0; font: 14px/1.5 var(--f-ui); color: var(--ink-2); }

.g-entries { list-style: none; margin: 0; padding: 0; }
.g-entry { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 8px; padding: 16px 0 18px; border-top: 1px solid var(--rule); counter-increment: list-item; }
.g-entry::before { content: "\00A7\00A0" counter(list-item); grid-column: 1; grid-row: 1 / span 4; font: 600 16px/1.5 var(--f-head); color: var(--brass-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-entry > * { grid-column: 2; min-width: 0; }
.g-entry-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 16px; }
.g-entry-h { margin: 4px 0 0; font-size: 20px; line-height: 1.28; font-weight: 600; text-wrap: pretty; }
.g-entry-h a { color: var(--head); text-decoration: none; }
.g-entry-h a::after { content: ""; position: absolute; inset: 0; }
.g-entry:hover .g-entry-h a, .g-entry-h a:focus-visible { text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.g-dek { display: none; margin: 6px 0 0; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); max-width: 40em; }
.g-by { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0 14px; margin: 10px 0 0; font: 14.5px/1.5 var(--f-ui); color: var(--ink-2); }
.g-by a { color: var(--head); font-weight: 600; text-decoration: none; padding: 12px 0; margin: -12px 0; }
.g-by a:hover { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }
.g-single { border-bottom: 1px solid var(--rule); }

/* the lead entry: § 1 larger, its dek and column always shown */
.g-entry-lead { padding: 20px 0 26px; border-top: 0; }
.g-entry-lead::before { font-size: 26px; line-height: 1.1; color: var(--brass); }
.g-entry-lead .g-entry-h { margin-top: 8px; font-size: clamp(25px, 2.7vw, 31px); line-height: 1.14; text-wrap: balance; }
.g-entry-lead .g-dek { display: block; margin-top: 12px; font-size: 18.5px; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 720px) {
  .g-entry { grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 10px; }
  .g-entry-lead::before { font-size: 28px; }
  .g-listing .g-dek { display: block; }
  .g-entry-h { font-size: 21px; }
}
@media (min-width: 1180px) { .g-docket .g-dek { display: block; } }

/* the lead's photo, a captioned plate: after the dek and the column (up to 600 px wide; 360 px where The Clock shares
   the row but the docket is too narrow for a side plate, 1,024 to 1,179 px), and beside the dek and the column wherever
   the docket is wide enough for both (900 to 1,023 px, before The Clock takes its column, and from 1,180 px).
   The headline's link covers the row (the picture and the caption too); the credit's links sit above it. */
.g-plate { margin: 16px 0 4px; max-width: 600px; }
@media (min-width: 1024px) and (max-width: 1179px) { .g-plate { max-width: 360px; } }
.g-plate img { width: 100%; }
.g-plate:not(.is-photo) img { border: 1px solid var(--rule); }   /* the cover card, when the lead has no photo */

/* An entry's square thumbnail at the row's right (entry_thumb). A cover card is cut to its report sheet (x 465 to 795
   and y 50 to 380 of the 800 x 450 thumb), so no word of the cover is cut in half; a photo fills the square around its
   focus (site.css --fx: the square shows 9/16 of the 16:9 file's width, so (fx - 9/32) / (7/16) centres it). */
.g-thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border: 1px solid var(--rule); background: var(--paper-2); }
.g-thumb img { position: absolute; max-width: none; width: 242.42%; height: auto; left: -140.91%; top: -15.15%; }
.g-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%; }
.g-entry-thumb { grid-template-columns: 2.5rem minmax(0, 1fr) 98px; }
.g-entry > .g-thumb { grid-column: 3; grid-row: 1 / span 4; align-self: start; justify-self: end; width: 84px; margin-top: 3px; }
@media (min-width: 720px) {
  .g-entry-thumb { grid-template-columns: 3.25rem minmax(0, 1fr) 144px; }
  .g-entry > .g-thumb { width: 120px; }
}
.g-plate .photo-cap a { position: relative; z-index: 1; }
@media (min-width: 900px) and (max-width: 1023px), (min-width: 1180px) {
  .g-entry-plate { grid-template-columns: 3.25rem minmax(0, 1fr) 328px; grid-template-rows: auto auto auto auto 1fr; }
  .g-entry-plate > .g-entry-top, .g-entry-plate > .g-entry-h { grid-column: 2 / -1; }
  .g-entry-plate > .g-dek { grid-column: 2; grid-row: 3; }
  .g-entry-plate > .g-by { grid-column: 2; grid-row: 4; }
  .g-entry-plate > .g-plate { grid-column: 3; grid-row: 3 / -1; margin: 18px 0 0 28px; max-width: none; }
}
@media (max-width: 719px) {
  .g-entry-top { display: contents; }
  .g-entry-top > * { grid-column: 2; }
  .g-entry-top > .g-date { order: 1; margin-top: 4px; }
  .g-entry > .g-by { order: 2; }
  .g-entry > .g-plate { order: 3; }
  .prose th, .prose td { min-width: 8.5em; }
}

/* ------------------------------------------------------------ home: the docket beside The Clock */
.g-home { display: grid; gap: 36px; padding-top: 24px; padding-bottom: 44px; }
.g-docket .g-head { border-bottom-width: 3px; }
.g-rail { display: grid; gap: 28px; align-content: start; justify-items: center; min-width: 0; }
.g-rail > * { width: 100%; }
.g-rail > .ad-mpu { width: 300px; max-width: 100%; }
@media (min-width: 1024px) {
  .g-home { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; padding-top: 36px; padding-bottom: 52px; }
}
@media (min-width: 1024px) and (min-height: 760px) { .g-home > .g-rail { position: sticky; top: 24px; } }

/* The Clock */
.g-clock { background: var(--ground); color: var(--on-ground); padding: 18px 22px 8px; }
.g-clock :focus-visible { outline-color: var(--brass-light); }
.g-clock-h { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; padding-bottom: 14px; border-bottom: 1px solid var(--brass-light); font-size: 15px; line-height: 1.3; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-ground); }
.g-clock-h::before { content: ""; flex: none; width: 22px; height: 22px; background: url("/assets/theme/dial.svg?v=80b3f194") center / contain no-repeat; }
.g-clock-part { padding: 14px 0 12px; }
.g-clock-part + .g-clock-part { border-top: 1px solid var(--ground-line); }
.g-clock-k { margin: 0; font-family: var(--f-head); font-weight: 600; font-size: 12px; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-light); }
.g-clock-d { display: block; margin-top: 2px; font-family: var(--f-mono); font-size: 12.5px; color: var(--on-ground-2); font-variant-numeric: tabular-nums; }
.g-clock-pub .g-clock-d { display: inline; margin: 0; }
.g-clock-list { list-style: none; margin: 10px 0 2px; padding: 0; }
.g-clock-list li { position: relative; padding: 5px 0 5px 20px; font-size: 18px; line-height: 1.35; font-weight: 500; color: var(--on-ground); }
.g-clock-list li::before { content: ""; position: absolute; left: 1px; top: 0.78em; width: 7px; height: 7px; border: 1.5px solid var(--brass-light); border-radius: 50%; }
.g-clock-go { margin: 4px 0 0; }
.g-clock-go a, .g-clock-led a { display: inline-block; padding: 12px 0; color: var(--on-ground); font: 500 15px/1.4 var(--f-ui); text-decoration: underline; text-decoration-color: var(--brass-light); text-underline-offset: 4px; }
.g-clock-go a:hover, .g-clock-led a:hover { text-decoration-thickness: 2px; }
.g-clock-led { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
.g-clock-led a { font: 500 19px/1.3 var(--f-head); padding: 10px 0; }
.g-clock-no { font-family: var(--f-mono); font-size: 13px; color: var(--brass-light); }
.g-clock-pub { margin: 0 0 4px; font: 14px/1.5 var(--f-ui); color: var(--on-ground-2); }

/* the Leaderboard band, under the docket */
.g-leader { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.g-leader .ad-leader { padding: 22px 0 26px; }

/* Chambers */
.g-chambers { padding: 52px 0 56px; }
.g-ch { margin: 18px 0 0; border-bottom: 1px solid var(--rule); }
.g-ch > div { display: grid; gap: 6px; padding: 18px 0 20px; border-top: 1px solid var(--rule); }
.g-ch > div:first-child { border-top: 0; }
.g-ch dt a { font-size: 23px; line-height: 1.2; font-weight: 600; color: var(--head); text-decoration: none; display: inline-block; padding: 9px 0; margin: -9px 0; }
.g-ch dt a:hover { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 5px; }
.g-ch-role { display: block; margin-top: 4px; font-family: var(--f-head); font-weight: 600; font-size: 12px; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-ink); }
.g-ch dd { margin: 0; font-size: 19px; line-height: 1.5; color: var(--ink); max-width: 38em; }
.g-ch dd.g-q { font-style: italic; font-size: 20.5px; line-height: 1.45; }
@media (min-width: 900px) {
  .g-ch > div { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 0 40px; align-items: baseline; }
}

/* the sections, as a two-column index */
.g-index { padding: 8px 0 56px; }
.g-index > .wrap > .g-head { border-bottom: 0; }
.g-ix-grid { display: grid; gap: 0 56px; }
.g-ix { padding: 18px 0 22px; border-top: 2px solid var(--head); }
.g-ix h3 { font-size: 25px; line-height: 1.2; margin: 0; }
.g-ix h3 a { color: var(--head); text-decoration: none; display: inline-block; padding: 8px 0; margin: -8px 0; }
.g-ix h3 a:hover { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 5px; }
.g-ix-desc { margin: 6px 0 10px; font: 16px/1.5 var(--f-ui); color: var(--ink-2); }
.g-ix-list, .g-li-list { list-style: none; margin: 0; padding: 0; }
.g-li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 11px 0 12px; border-top: 1px solid var(--rule); }
.g-li a { font-size: 17.5px; line-height: 1.35; font-weight: 500; color: var(--ink); text-decoration: none; }
.g-li a::after { content: ""; position: absolute; inset: 0; }
.g-li:hover a, .g-li a:focus-visible { color: var(--head); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }
@media (min-width: 900px) {
  .g-ix-grid { grid-template-columns: 1fr 1fr; }
  .g-li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: baseline; }
}

/* the Monday digest: a notice in a double rule */
.g-signup { padding: 4px 0 64px; }
.g-signup-box { display: grid; gap: 22px; padding: 30px 22px 26px; border: 1px solid var(--head); outline: 1px solid var(--brass); outline-offset: -7px; background: var(--paper); }
.g-signup h2 { font-size: clamp(27px, 3.2vw, 34px); line-height: 1.1; margin: 0; }
.g-signup p { margin: 10px 0 0; color: var(--ink-2); max-width: 32em; }
.g-signup .g-signup-k { margin: 0 0 6px; color: var(--brass-ink); font-size: 12px; }
@media (min-width: 900px) { .g-signup-box { grid-template-columns: 5fr 6fr; gap: 56px; padding: 44px 52px 40px; align-items: center; } }

/* ------------------------------------------------------------ forms and buttons */
.field label, .field .legend { font-family: var(--f-head); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; color: var(--ink-2); }
.field input, .field select, .field textarea { background-color: #FEFEFB; border: 1px solid var(--line); font-family: var(--f-ui); min-height: 46px; color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brass); outline-offset: 1px; border-color: var(--head); }
.btn { background: var(--head); color: var(--on-ground); font: 600 15.5px/1 var(--f-ui); letter-spacing: 0.02em; min-height: 46px; padding: 15px 24px; }
.btn:hover { background: var(--ink); box-shadow: inset 0 -3px 0 var(--brass-light); }
.btn-line, .g-btn-line { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border: 1px solid var(--head); color: var(--head); font: 600 15.5px/1.2 var(--f-ui); text-decoration: none; background: transparent; }
.btn-line:hover, .g-btn-line:hover { background: var(--head); color: var(--on-ground); box-shadow: none; }
.form-note { font-family: var(--f-ui); font-size: 14px; }
.form-note a { color: var(--head); text-decoration-color: var(--brass); }
.form-status { font-family: var(--f-ui); }
.field .chk { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font: 400 15.5px/1.35 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--ink); }
.field .chk input { appearance: auto; width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0; border: 0; accent-color: var(--head); flex: none; }

/* ------------------------------------------------------------ display units */
.ad-label { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.12em; color: var(--ink-2); }
.ad a { border-color: var(--rule); }
.prose > .ad-inline { max-width: min(728px, 100%); margin: 2em 0 2.1em; }

/* ------------------------------------------------------------ article: the case note */
.g-note-head { display: grid; gap: 28px; padding: 26px 0 30px; border-bottom: 1px solid var(--rule); }
.g-note-head .g-type { font-size: 12.5px; margin-bottom: 12px; }
.g-note-head h1 { font-size: clamp(31px, 4.5vw, 52px); line-height: 1.08; text-wrap: balance; }
.g-note-dek { margin: 16px 0 0; font-size: clamp(19px, 2.1vw, 22.5px); line-height: 1.45; color: var(--ink-2); max-width: 36em; }
.g-record { margin: 24px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--head); }
.g-record > div { padding: 9px 14px 10px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.g-record dt { font-family: var(--f-head); font-weight: 600; font-size: 12px; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.g-record dd { margin: 1px 0 0; font: 500 15.5px/1.45 var(--f-ui); color: var(--ink); overflow-wrap: anywhere; }
.g-record dd a { display: inline-block; padding: 11px 0; margin: -11px 0; color: var(--head); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }
.g-record dd .g-mono { font-weight: 400; font-size: 13.5px; }
/* the cover card shows at every width (owner request of 25 October 2026): under the record at the column's width, at
   most 720 px, below 1,000 px; small and to one side from 1,000 px */
.g-exhibit { display: block; margin: 0; max-width: 720px; }
.g-exhibit img { width: 100%; border: 1px solid var(--rule); }
@media (min-width: 720px) { .g-record { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .g-note-head { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; padding: 42px 0 38px; align-items: start; }
  .g-exhibit { margin-top: 30px; }
}
/* a photo is the exhibit at every width: under the dek and its notes on a phone or a tablet (the record follows it),
   to one side from 1,000 px, where the head's column runs on past the photo's two rows */
.g-note-head-photo { row-gap: 0; }
.g-note-head-photo .g-note-headmain, .g-note-head-photo .g-note-headmeta { min-width: 0; }
.g-exhibit.is-photo { display: block; margin: 26px 0 0; max-width: 720px; }
.g-exhibit.is-photo img { border: 0; }
@media (min-width: 1000px) {
  .g-note-head-photo { grid-template-rows: auto 1fr; row-gap: 0; }
  .g-note-head-photo .g-note-headmain { grid-area: 1 / 1; }
  .g-note-head-photo .g-note-headmeta { grid-area: 2 / 1; }
  .g-note-head-photo .g-exhibit { grid-area: 1 / 2 / 3 / 3; margin-top: 30px; }
}

/* captions: the photo's own words in the reading face, the credit under them in the interface face */
.photo-cap { margin-top: 10px; font-family: var(--f-text); font-size: 15px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.photo-credit { display: block; margin-top: 3px; font: 12.5px/1.5 var(--f-ui); color: var(--ink-2); }
.photo-credit a { text-decoration-color: var(--brass); text-underline-offset: 3px; }
.photo-credit a:hover { color: var(--head); text-decoration-thickness: 2px; }

.g-note-layout { display: grid; gap: 40px; padding: 30px 0 16px; }
.g-note-main { min-width: 0; }
.g-note-aside { display: none; }
.g-sticky { position: sticky; top: 24px; }
@media (min-width: 1080px) {
  .g-note-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; padding-top: 42px; }
  .g-note-aside { display: block; }
}
@media (min-width: 1180px) { .g-note-main, .sponsored-article .article-main { padding-left: var(--hang); } }

.prose { font-size: 18px; line-height: 1.7; counter-reset: sec; }
.prose > * { margin: 0 0 1.05em; max-width: var(--measure); }
.prose > table { max-width: 100%; }
.prose p, .prose li { text-wrap: pretty; }
.prose h2 { position: relative; font-size: 23px; line-height: 1.25; margin: 1.9em 0 0.65em; counter-increment: sec; }
.prose h2::before { content: "\00A7\00A0" counter(sec); display: block; margin-bottom: 4px; font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: 0.04em; color: var(--brass-ink); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose a:hover { color: var(--head); text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin: 0 0 0.5em; padding-left: 0.15em; }
.prose li::marker { color: var(--brass-ink); }
.prose strong { font-weight: 600; color: var(--head); }
.prose blockquote { margin: 1.7em 0; padding: 16px 0 18px; border-top: 1px solid var(--brass); border-bottom: 1px solid var(--brass); font-style: italic; font-size: 1.08em; line-height: 1.55; color: var(--head); }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose table { font-family: var(--f-ui); font-size: 14.5px; line-height: 1.45; }
.prose th { font-family: var(--f-head); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; color: var(--ink-2); border-bottom: 2px solid var(--head); }
.prose td { border-bottom-color: var(--rule); }
/* a table wider than the column scrolls in its own box: a green shadow, edged in brass, marks the side that still has
   columns to show, at the same strength from the header row to the last (the paper layers scroll with the table and
   cover it at either end); all of it is the table's own background, so nothing reaches past the table. On a phone the
   text columns keep a readable width and the table scrolls, rather than squeezing them into a narrow strip. */
.prose table:not(.hub-table) {
  background:
    linear-gradient(to right, var(--paper) 40%, rgba(251, 251, 247, 0)) left center / 36px 100% no-repeat local,
    linear-gradient(to left, var(--paper) 40%, rgba(251, 251, 247, 0)) right center / 36px 100% no-repeat local,
    linear-gradient(var(--brass), var(--brass)) left center / 1px 100% no-repeat scroll,
    linear-gradient(var(--brass), var(--brass)) right center / 1px 100% no-repeat scroll,
    linear-gradient(to right, rgba(29, 59, 42, 0.3), rgba(29, 59, 42, 0)) left center / 18px 100% no-repeat scroll,
    linear-gradient(to left, rgba(29, 59, 42, 0.3), rgba(29, 59, 42, 0)) right center / 18px 100% no-repeat scroll;
  background-color: var(--paper);
}
@media (max-width: 719px) { .prose table:not(.hub-table) :is(th, td):not(:first-child) { min-width: 11em; } }
@media (min-width: 720px) { .prose { font-size: 19px; line-height: 1.75; } }
@media (min-width: 1180px) {
  .prose h2::before { position: absolute; left: calc(-1 * var(--hang)); top: 0.16em; width: 3.6rem; margin: 0; font-size: 19px; }
}

/* Authorities */
.g-auth { margin-top: 48px; max-width: 40em; }
.g-auth-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; padding-bottom: 9px; border-bottom: 2px solid var(--head); }
.g-auth h2 { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.g-auth-count { margin: 0; font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); }
.g-auth ol { list-style: none; margin: 0; padding: 0; counter-reset: auth; }
.g-auth li { position: relative; counter-increment: auth; padding: 11px 0 12px 2.75rem; border-bottom: 1px solid var(--rule); font-size: 16.5px; line-height: 1.45; }
.g-auth li::before { content: counter(auth, decimal-leading-zero); position: absolute; left: 0; top: 14px; font-family: var(--f-mono); font-size: 12.5px; line-height: 1.4; color: var(--brass-ink); font-variant-numeric: tabular-nums; }
.g-auth a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; overflow-wrap: anywhere; }
.g-auth a::after { content: ""; position: absolute; inset: 0; }
.g-auth li:hover a, .g-auth a:focus-visible { color: var(--head); text-decoration-thickness: 2px; }
.g-auth-meta { display: block; margin-top: 3px; font: 14px/1.45 var(--f-ui); color: var(--ink-2); }
@media (min-width: 1180px) {
  .g-auth li { padding-left: 0; }
  .g-auth li::before { left: calc(-1 * var(--hang)); width: 3.6rem; }
}

.g-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: 30px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); max-width: 40em; }
.g-share .g-sc { color: var(--ink-2); font-size: 12px; }
.g-share a { display: inline-flex; justify-content: center; min-width: 44px; padding: 12px 0; font: 500 15px/20px var(--f-ui); color: var(--head); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }
.g-colbox { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; margin-top: 30px; padding: 20px 20px 22px; background: var(--paper-2); border: 1px solid var(--rule); max-width: 40em; }
.g-colbox img { width: 56px; height: 56px; }
.g-colbox-k { margin: 0; color: var(--brass-ink); font-size: 12px; }
.g-colbox h2 { font-size: 21px; margin: 2px 0 0; }
.g-colbox h2 a { display: inline-block; padding: 10px 0; margin: -10px 0; color: var(--head); text-decoration: none; }
.g-colbox h2 a:hover { text-decoration: underline; text-decoration-color: var(--brass); }
.g-colbox p:last-child { margin: 6px 0 0; font: 16px/1.55 var(--f-ui); color: var(--ink-2); }

/* See also */
.g-seealso { margin-top: 28px; padding: 34px 0 56px; border-top: 1px solid var(--rule); }
.g-see-list { list-style: none; margin: 0; padding: 0; display: grid; }
.g-see { position: relative; padding: 16px 0 18px; border-bottom: 1px solid var(--rule); }
.g-see h3 { margin: 6px 0 8px; font-size: 19px; line-height: 1.3; font-weight: 600; }
.g-see h3 a { color: var(--head); text-decoration: none; }
.g-see h3 a::after { content: ""; position: absolute; inset: 0; }
.g-see:hover h3 a, .g-see h3 a:focus-visible { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }
@media (min-width: 720px) { .g-see-list { grid-template-columns: 1fr 1fr; column-gap: 36px; } }
@media (min-width: 1080px) { .g-see-list { grid-template-columns: repeat(4, 1fr); } .g-see { border-bottom: 0; } }

/* ------------------------------------------------------------ section, desk, column and archive pages */
.g-page-head { padding: 34px 0 28px; border-bottom: 3px solid var(--head); }
.g-crumb { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 0 0 12px; font-family: var(--f-head); font-weight: 600; font-size: 12px; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-ink); }
.g-crumb a { color: var(--ink-2); text-decoration: none; display: inline-block; padding: 13px 0; margin: -13px 0; }
.g-crumb a:hover { color: var(--head); text-decoration: underline; text-decoration-color: var(--brass); }
.g-crumb > span::before { content: "/"; margin-right: 10px; color: var(--rule-strong); }
.g-page-head h1 { font-size: clamp(36px, 5.6vw, 58px); line-height: 1.04; }
.g-intro { margin: 14px 0 0; font-size: clamp(18.5px, 2vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 38em; }
.g-count { margin: 16px 0 0; font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); }
.g-index-layout { display: grid; gap: 36px; padding-top: 6px; padding-bottom: 56px; }
.g-index-main { min-width: 0; }
.g-index-main > .g-entries > .g-entry:first-child { border-top: 0; }
.g-rail-index { display: none; }
@media (min-width: 1080px) {
  .g-index-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; padding-top: 28px; }
  .g-rail-index { display: grid; gap: 32px; }
}
.g-empty { padding: 30px 0; max-width: 38em; font-size: 18.5px; color: var(--ink-2); }
.g-empty-h { font-size: 24px; font-weight: 600; color: var(--head); margin: 0 0 10px; }
.g-pager { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.g-pager a, .g-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule-strong); font: 500 15px/1 var(--f-ui); color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.g-pager a:hover { border-color: var(--head); color: var(--head); }
.g-pager span[aria-current] { background: var(--head); border-color: var(--head); color: var(--on-ground); }

.g-ent { display: grid; gap: 18px; align-items: start; }
.g-ent img { width: 72px; height: 72px; }
.g-desk-cols { margin: 14px 0 0; font: 16px/1.6 var(--f-ui); color: var(--ink-2); }
.g-desk-cols .g-sc { display: block; color: var(--brass-ink); font-size: 12px; }
.g-desk-cols a { display: inline-block; padding: 11px 0; margin: -11px 0; color: var(--head); text-decoration-color: var(--brass); text-underline-offset: 3px; }
@media (min-width: 720px) { .g-ent { grid-template-columns: 88px minmax(0, 1fr); gap: 28px; } .g-ent img { width: 88px; height: 88px; margin-top: 30px; } }

/* /columns */
.g-cols { list-style: none; margin: 0; padding: 8px 0 48px; }
.g-col { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; padding: 24px 0 26px; border-bottom: 1px solid var(--rule); }
.g-col img { width: 56px; height: 56px; grid-row: 1 / span 2; }
.g-col-id h2 { margin: 0; font-size: 26px; line-height: 1.15; }
.g-col-id h2 a { display: inline-block; padding: 7px 0; margin: -7px 0; color: var(--head); text-decoration: none; }
.g-col-id h2 a:hover { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 5px; }
.g-col-role { margin: 4px 0 0; font-family: var(--f-head); font-weight: 600; font-size: 12px; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-ink); }
.g-col-text { grid-column: 2; }
.g-col-beat { margin: 6px 0 0; font-size: 18px; line-height: 1.5; }
.g-col-q { margin: 8px 0 0; font-size: 18px; line-height: 1.45; font-style: italic; color: var(--head); }
.g-col-latest { margin: 10px 0 0; font: 15px/1.5 var(--f-ui); color: var(--ink-2); }
.g-col-latest .g-sc { font-size: 12px; color: var(--brass-ink); margin-right: 6px; }
.g-col-latest a { display: inline-block; padding: 11px 0; margin: -11px 0; color: var(--head); text-decoration-color: var(--brass); text-underline-offset: 3px; }
.g-col-latest .g-date { margin-left: 6px; }
@media (min-width: 900px) {
  .g-col { grid-template-columns: 72px minmax(0, 15rem) minmax(0, 1fr); gap: 0 32px; align-items: start; }
  .g-col img { width: 72px; height: 72px; grid-row: auto; }
  .g-col-text { grid-column: 3; }
  .g-col-beat { margin-top: 2px; }
}

/* a column's page */
.g-colhead-id { display: flex; align-items: center; gap: 18px; }
.g-colhead-id img { width: 72px; height: 72px; flex: none; }
.g-colhead-id h1 { margin: 0; }
.g-colhead .g-col-role { margin-top: 6px; font-size: 12px; }
.g-colhead .g-intro { margin-top: 18px; font-style: italic; color: var(--head); }
.col-desc { font-size: 17.5px; line-height: 1.6; color: var(--ink); }
@media (min-width: 720px) { .g-colhead-id { gap: 26px; } .g-colhead-id img { width: 104px; height: 104px; } }

.disclosure { margin: 20px 0 0; padding: 14px 18px 16px; border: 1px solid var(--rule-strong); background: var(--paper-2); font: 16px/1.55 var(--f-ui); color: var(--ink); max-width: 46em; }
.disclosure::before { content: "Disclosure"; display: block; margin-bottom: 4px; font-family: var(--f-head); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-ink); }

.col-profile { counter-reset: csec; padding-top: 26px; }
.col-jump a { color: var(--ink-2); font-family: var(--f-ui); display: inline-block; padding: 12px 0; margin: -12px 0; }
.col-lede { font-family: var(--f-head); font-size: clamp(19px, 2.2vw, 22px); line-height: 1.5; }
.col-q { margin: 28px 0 0; padding: 18px 0 20px; background: none; border: 0; border-top: 1px solid var(--brass); border-bottom: 1px solid var(--brass); }
.col-q h2 { font-family: var(--f-head); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; color: var(--brass-ink); }
.col-q p { font-style: italic; font-weight: 500; font-size: clamp(22px, 3vw, 28px); line-height: 1.3; }
.col-sec { margin-top: 40px; }
.col-sec h2 { font-size: 23px; counter-increment: csec; }
.col-sec h2::before { content: "\00A7\00A0" counter(csec); display: block; width: auto; height: auto; background: none; margin: 0 0 4px; font-size: 15px; line-height: 1.3; letter-spacing: 0.04em; color: var(--brass-ink); }
.col-sec p, .col-list li, .col-dl dd { font-size: 17.5px; }
.col-list li::marker { color: var(--brass-ink); }
.col-dl dt { color: var(--head); }
.col-dl dt a { display: inline-block; padding: 10px 0; margin: -10px 0; color: var(--head); text-decoration-color: var(--brass); text-underline-offset: 3px; }
.col-more summary { min-height: 44px; font-family: var(--f-head); font-weight: 600; font-size: 12.5px; letter-spacing: 0.1em; color: var(--brass-ink); }
.col-when { font-size: 12px; letter-spacing: 0.04em; text-transform: none; }
.col-pieces { margin: 52px 0 0; }
.col-pieces + .g-entries .g-entry:first-child { border-top: 0; }

/* ------------------------------------------------------------ the publication's pages */
.g-doc-layout { display: grid; gap: 26px; padding-top: 28px; padding-bottom: 64px; }
.g-docnav .g-sc { margin: 0 0 6px; color: var(--brass-ink); font-size: 12px; }
.g-docnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.g-docnav a { display: block; padding: 12px 0; font: 500 15px/20px var(--f-ui); color: var(--ink-2); text-decoration: none; }
.g-docnav a:hover { color: var(--head); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }
.g-docnav a[aria-current="page"] { color: var(--head); font-weight: 600; }
.g-docnav a[aria-current="page"]::before { content: "\00A7"; margin-right: 8px; color: var(--brass-ink); }
@media (min-width: 960px) {
  .g-doc-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 72px; padding-top: 48px; }
  .g-docnav { position: sticky; top: 24px; align-self: start; }
  .g-docnav ul { display: block; border-top: 2px solid var(--head); }
  .g-docnav li { border-bottom: 1px solid var(--rule); }
  .g-docnav a { padding: 11px 0; }
}
.doc { max-width: 720px; font-size: 18px; line-height: 1.7; }
.doc h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.06; margin-bottom: 20px; }
.doc h2 { font-size: 24px; line-height: 1.25; margin: 1.8em 0 0.55em; }
.doc h3 { font-size: 20px; }
.doc a { color: var(--head); text-decoration-color: var(--brass); text-underline-offset: 3px; }
.doc .lede { font-size: clamp(19px, 2.2vw, 22px); line-height: 1.5; color: var(--ink-2); }
.doc .note { border: 1px solid var(--head); outline: 1px solid var(--brass); outline-offset: -7px; background: var(--paper); padding: 24px 22px 18px; }
.doc li::marker { color: var(--brass-ink); }
.g-doc-rules { counter-reset: dsec; }
.g-doc-rules h2 { position: relative; counter-increment: dsec; }
.g-doc-rules h2::before { content: "\00A7\00A0" counter(dsec); display: block; margin-bottom: 2px; font-size: 14.5px; line-height: 1.3; letter-spacing: 0.04em; color: var(--brass-ink); }
.emails .addr { color: var(--head); }
.emails li { border-bottom-color: var(--rule); }
/* /photo-credits (build.py's list): the facts labelled as the case note's record is */
.photo-facts dt { font-family: var(--f-head); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; color: var(--ink-2); padding-top: 4px; }
.photo-facts dd { font: 15px/1.5 var(--f-ui); color: var(--ink); }

/* /advertise */
.launch-tag { background: var(--paper-2); color: var(--brass-ink); border: 1px solid var(--rule-strong); font-family: var(--f-head); font-weight: 600; letter-spacing: 0.1em; }
.rates { font-family: var(--f-ui); }
.rates th { font-family: var(--f-head); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; border-bottom: 2px solid var(--head); }
.rates td.price { font-family: var(--f-mono); font-weight: 500; font-size: 17px; }
.rates td.place { font-family: var(--f-head); font-size: 17.5px; }
.rates .sub { font-family: var(--f-ui); }
.placement { border-top-color: var(--rule); }
.placement .vis { background: var(--paper-2); }
.placement .spec { font-size: 12.5px; }
.placement p { font-family: var(--f-ui); }
.steps li::before { content: counter(step) "."; background: none; color: var(--brass-ink); font-family: var(--f-head); font-weight: 600; font-size: 19px; width: auto; height: auto; display: block; place-items: initial; top: -0.1em; }
.steps li { padding-left: 36px; }

.kit-link a:not(.btn-line) { display: inline-flex; align-items: center; min-height: 44px; color: var(--head); }

/* 404 */
.g-404 { padding-top: 40px; padding-bottom: 72px; }
.g-404 > * { max-width: 42rem; }
.g-404 .g-404-mark { margin: 0; font-size: 104px; line-height: 1; color: var(--brass); font-weight: 400; }
.g-404 .nf-mark { display: block; width: min(200px, 100%); height: auto; margin: 0 0 22px; }
.g-404 h1 { font-size: clamp(34px, 6vw, 56px); margin: 6px 0 12px; }
.g-404 p { font-size: 19px; color: var(--ink-2); }
.g-404-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 22px; }
.g-404-list a { display: inline-block; padding: 12px 0; font: 500 15px/20px var(--f-ui); color: var(--head); text-decoration-color: var(--brass); }

/* ------------------------------------------------------------ paid placements and partner content (build.py markup) */
.kicker { font-family: var(--f-head); font-weight: 600; font-size: 12.5px; letter-spacing: 0.1em; color: var(--brass-ink); }
.kicker .label { border-left-color: var(--rule-strong); }
.meta { font-family: var(--f-ui); font-size: 13.5px; letter-spacing: 0; text-transform: none; }
.sponsored-card { width: 100%; margin: 0; padding: 16px 18px 18px; border: 1px solid var(--rule-strong); border-top: 3px solid var(--brass); background: var(--paper); }
.sponsored-card h3 { font-size: 19px; }
.ad-disclosure { border: 1px solid var(--rule-strong); background: var(--paper-2); font-family: var(--f-ui); font-size: 16px; max-width: 40em; }
.sponsor-line { font-family: var(--f-head); font-weight: 600; letter-spacing: 0.08em; color: var(--brass-ink); }
.supported-by { font-family: var(--f-ui); }
.supported-by .sb-label { font-family: var(--f-head); font-weight: 600; color: var(--brass-ink); }
.sponsor-about { border: 1px solid var(--rule-strong); background: var(--paper-2); }
.sponsored-article .article-head { padding-top: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--rule); }
.sponsored-article .article-head h1 { font-size: clamp(31px, 4.5vw, 50px); }
.sponsored-article .article-head .dek { font-family: var(--f-head); }
.sponsored-article .prose { max-width: var(--measure); }
.partner-list h2 a { color: var(--head); }

/* ------------------------------------------------------------ footer */
.g-foot { background: var(--ground); color: var(--on-ground); padding: 52px 0 28px; }
.g-foot :focus-visible { outline-color: var(--brass-light); }
.g-foot-top { display: grid; gap: 32px; padding-bottom: 30px; border-bottom: 1px solid var(--ground-line); }
.g-foot-brand { padding-top: 12px; border-top: 1px solid var(--brass-light); }
.g-foot-mark { display: inline-block; padding: 10px 0 6px; }
.g-foot-mark img { width: min(352px, 100%); height: auto; }
.g-foot-brand p { margin: 14px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--on-ground-2); max-width: 30em; }
.g-foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; }
.g-foot h2 { margin: 0 0 4px; font-size: 12px; line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-light); }
.g-foot ul { list-style: none; margin: 0; padding: 0; }
.g-foot li a { display: block; padding: 10px 0; font: 400 15px/24px var(--f-ui); color: var(--on-ground); text-decoration: none; }
.g-foot li a:hover { text-decoration: underline; text-decoration-color: var(--brass-light); text-underline-offset: 4px; }
.g-foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; font: 13.5px/1.5 var(--f-ui); color: var(--on-ground-2); }
.g-foot-base p { margin: 0; }
.g-foot-base p:last-child { font-family: var(--f-mono); font-size: 12.5px; }
@media (min-width: 720px) { .g-foot-cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) {
  .g-foot-top { grid-template-columns: 4fr 8fr; gap: 64px; }
  .g-foot-cols { grid-template-columns: repeat(5, 1fr); }
  .g-foot li a { padding: 4px 0; }
}

/* ------------------------------------------------------------ motion and print */
.g-nav a, .g-nav a::after, .g-util a, .btn, .btn-line, .g-btn-line, .g-pager a { transition: color 160ms cubic-bezier(0.25, 1, 0.5, 1), background-color 160ms cubic-bezier(0.25, 1, 0.5, 1), border-color 160ms cubic-bezier(0.25, 1, 0.5, 1); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Trackers (build.py's hub pages): "Last updated", the answer box, the notes under the tables, the latest coverage
   and the footer's Trackers list */
.hub-updated { margin: 12px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.prose .hub-answer { margin: 0 0 1.6em; padding: 16px 20px; background: var(--paper-2); border-left: 4px solid var(--accent); }
.hub-answer p { margin: 0; }
.prose .hub-answer .hub-asof { margin-top: 10px; }
.prose .hub-answer .hub-asof + p { margin-top: 14px; }
.prose .hub-asof, .prose .hub-note { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.hub-coverage { margin-top: 36px; }
.hub-coverage h2 { font-size: 20px; margin-bottom: 8px; }
.hub-none { color: var(--ink-2); }
.foot-trackers { margin-top: 22px; }
/* a tracker table takes the full width of the column, so the rules of every table end at the same point */
.prose table.hub-table { display: table; width: 100%; }
/* Phones: each row in two columns, the label (or the date of an event) beside the value and the "As of" date under the
   value, so no date runs past the edge of the screen */
@media (max-width: 719px) {
  .prose table.hub-table { display: block; border-top: 2px solid var(--head); }
  .hub-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hub-table tbody { display: block; }
  .hub-table tr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 14px; row-gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .prose .hub-table td { display: block; min-width: 0; padding: 0; border: 0; }
  .hub-table td:first-child { grid-row: span 2; }
  .hub-table td + td { grid-column: 2; }
  .hub-table td:empty { display: none; }
  .hub-table td.hub-val + td.hub-date { font-size: 13.5px; color: var(--ink-2); }
  .hub-table td.hub-val + td.hub-date::before { content: "As of "; }
}

@media print {
  .g-mast, .g-foot, .g-rail, .g-note-aside, .g-seealso, .g-share, .g-signup, .g-leader, .g-exhibit, .ad { display: none !important; }
  body { background: #fff; }
  .g-note-main { padding-left: 0; }
}