/*
Theme Name: QCR Newsroom
Theme URI: https://quantumcomputingreport.com/
Author: Global Quantum Intelligence
Description: The QCR publication theme, with editorial feeds and the refined reading experience.
Version: 1.1.5
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: qcr-newsroom
*/

/* Self-hosted editorial headlines and interface typography. */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(assets/fonts/literata-variable.woff2) format('woff2');
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(assets/fonts/source-sans-3-variable.woff2) format('woff2');
}

:root {
  --blue: #2856b6;
  --blue-dark: #173f94;
  --gqi-blue: #0741ad;       /* GQI's own blue, from its logo: the Intelligence Portal button */
  --gqi-blue-dark: #05348c;
  --cyan: #8bc9e6;
  --ink: #303846;
  --ink-soft: #4c5664;
  --muted: #5b6774;
  --paper: #f5f9fb;
  --white: #ffffff;
  --rule: #d7e0e6;
  --rule-strong: #7e8b98;
  --tint-blue: #e9eef9;
  --tint-cyan: #e7f4fa;
  --tint: #edf2f8;           /* the one quiet ground: footer, image frames, newsletter and Portal boxes */
  --tint-rule: #d4dcef;
  --ledger-margin: 112px;    /* left margin of the main column where day markers hang */
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-heading: "Literata", Georgia, "Times New Roman", serif;
  --font-ui: var(--font-body);
  --shell: 1180px;
  --gutter: 24px;
  --mast-top: 74px;          /* full nameplate row */
  --mast-nav: 54px;          /* sections row: stays pinned */
  --mast-h: calc(var(--mast-top) + var(--mast-nav));
  --tab-size: 15px;
  --tab-pad: 12px;
  --tab-gap: 4px;
  --tab-rule: 2px;
  --radius: 3px;
}

* { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--mast-h) + 12px); }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }
img { max-width: 100%; height: auto; display: block; }
button, input { font: inherit; color: inherit; }
ol, ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.shell { width: min(100% - 2 * var(--gutter), var(--shell)); margin-inline: auto; }
.sr-only, .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 8px 12px; background: var(--ink); color: #fff; }
.skip:focus { top: 12px; }
.u-desktop { display: initial; }
.u-mobile { display: none; }

/* The phone menu's way into the Portal, with the same one-line introduction as the desktop button's menu. */
.drawer__portal { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); color: var(--blue-dark); font-weight: 600; }
.drawer__portal img { flex: none; width: 44px; height: auto; }
.drawer__portal small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--muted); }

/* Launch notice: in document flow under the sticky header, one line until opened. */
.redesign-notice { background: #f3f6fa; border-bottom: 1px solid var(--rule); font-size: 14px; }
.redesign-notice[hidden], .redesign-notice__dismiss[hidden], [data-redesign-reopen][hidden] { display: none; }
.redesign-notice__inner { display: flex; align-items: flex-start; gap: 12px; }
.redesign-notice__details { flex: 1; min-width: 0; }
.redesign-notice__details summary { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 24px; padding: 13px 0; cursor: pointer; list-style: none; }
.redesign-notice__details summary::-webkit-details-marker { display: none; }
.redesign-notice__details summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.redesign-notice strong { font-weight: 600; }
.redesign-notice__intro { color: var(--ink-soft); }
.redesign-notice__intro::before { content: ' — '; white-space: pre; }
.redesign-notice__toggle { display: inline-flex; align-items: center; gap: 3px; color: var(--blue-dark); white-space: nowrap; font-weight: 600; }
.redesign-notice__toggle svg { flex: 0 0 auto; }
.redesign-notice__details[open] .chevron { transform: rotate(180deg); }
.redesign-notice__body { display: grid; gap: 8px; max-width: 720px; margin: 0; padding: 0 0 18px 18px; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.redesign-notice__body strong { color: var(--ink); }
.redesign-notice__body a { color: var(--blue-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.redesign-notice__links { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; margin-left: 4px; }
.redesign-notice__dismiss { flex: 0 0 40px; display: grid; place-items: center; min-height: 44px; margin: 2px -10px 0 0; border: 0; background: transparent; cursor: pointer; color: var(--muted); }
.redesign-notice__dismiss:hover { color: var(--ink); }
@media (max-width: 700px) {
  .redesign-notice__details summary { flex-direction: column; padding-block: 11px; }
  .redesign-notice__line { display: grid; }
  .redesign-notice__intro { font-size: 13.5px; }
  .redesign-notice__intro::before { content: none; }
  .redesign-notice__body { font-size: 14.5px; }
}

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--white); color: var(--ink);
  font-size: 13px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  cursor: pointer;
}
.btn:hover { border-color: var(--blue); color: var(--blue); }
.btn--primary { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.btn--primary:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.text-link { color: var(--blue); font-size: 13px; font-weight: 600; }
.text-link:hover { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 3px; }
.arrow { display: inline-block; transition: transform .15s; }
a:hover > .arrow, a:hover .arrow { transform: translateX(3px); }
.chevron { display: block; flex: none; transition: transform .15s; }
.eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }

/* ------------------------------------------------------------------ masthead
   Two rows: the nameplate with the account links, then the sections with search and
   GQI's Intelligence Portal.
   Both rows remain pinned; the desktop nameplate compacts after scrolling. */
.masthead { position: sticky; top: var(--admin-bar, 0px); z-index: 20; background: var(--white); transition: box-shadow .2s; }
.masthead.is-stuck { box-shadow: 0 8px 18px -10px rgba(48, 56, 70, .22); }
.masthead__inner { position: relative; }
.masthead__top { display: flex; align-items: center; justify-content: space-between; gap: 26px; min-height: var(--mast-top); border-bottom: 1px solid var(--rule); }
.masthead__right { display: flex; align-items: center; gap: 24px; flex: none; }
.masthead__lower { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: var(--mast-nav); border-bottom: 1px solid var(--rule); }

/* ---- nameplate: the globe from the original logo, the name as live type */
.logo { display: inline-flex; min-width: 0; align-items: center; gap: 12px; color: var(--ink); transition: opacity .18s; }
.logo:hover { color: var(--ink); }
.logo__mark { flex: none; width: 44px; }
.logo__type { display: inline-flex; align-items: center; min-width: 0; gap: 20px; }
.logo__wordmark { font: 400 clamp(25px, 2.7vw, 32px)/1.12 var(--font-heading); letter-spacing: -.035em; white-space: nowrap; }
.logo__byline { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--ink-soft); font: 500 14px/1 var(--font-ui); }
.logo__by { display: block; transform: translateY(1px); }
.masthead .logo__byline { transform: translateY(1px); }
/* Reuse the official transparent wordmark without redrawing its geometry. */
.logo__gqi { display: block; width: 40px; height: auto; }

/* ---- account links, in the nameplate row */
.utility, .tabs, .drawer__tabs, .drawer__utility, .drawer__resource { font-family: var(--font-ui); }
.utility { display: flex; align-items: center; gap: 20px; font-size: 13px; white-space: nowrap; transition: opacity .18s; }
.utility a:not(.btn) { color: var(--ink-soft); font-weight: 500; }
.utility a:not(.btn):hover { color: var(--blue); }
.utility .btn { height: 34px; padding: 0 16px; }

/* ---- sections row: QCR's sections and Search, then GQI's Intelligence Portal at the right */
.tabs { display: flex; align-items: stretch; justify-content: space-between; gap: 8px; flex: 1; min-width: 0; transition: opacity .18s; }
.tabs__main { display: flex; gap: var(--tab-gap); height: var(--mast-nav); }
.tab { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 100%; padding: 0 var(--tab-pad); font-size: var(--tab-size); font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.tab::after { content: ""; position: absolute; left: var(--tab-pad); right: var(--tab-pad); bottom: -1px; height: var(--tab-rule); background: var(--blue); transform: scaleX(0); transform-origin: center; transition: transform .15s; }
.tab:hover { color: var(--ink); }
.tab:hover::after { transform: scaleX(1); background: var(--rule-strong); }
.tab.is-active { color: var(--ink); font-weight: 600; }
.tab.is-active::after { transform: scaleX(1); background: var(--blue); }
.tab-resource { position: relative; display: flex; align-items: center; }
.tab-resource__menu { position: relative; display: flex; align-items: center; height: 100%; }
.tab-resource__toggle, .drawer__resource-toggle { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; list-style: none; }
.tab-resource__toggle::-webkit-details-marker, .drawer__resource-toggle::-webkit-details-marker { display: none; }
.tab-resource__toggle:hover, .tab-resource__menu[open] .tab-resource__toggle { color: var(--blue); }
.tab-resource__list { position: absolute; top: calc(100% + 1px); left: 50%; z-index: 35; display: block !important; width: max-content; min-width: 174px; height: auto !important; margin: 0; padding: 7px 0; transform: translateX(-50%); border: 1px solid var(--rule); background: var(--white); box-shadow: 0 14px 26px rgba(48, 56, 70, .14); }
.tab-resource__list a { display: block; padding: 7px 14px; color: var(--ink-soft); font-size: 13px; white-space: nowrap; }
.tab-resource__list a:hover, .tab-resource__list a:focus-visible { color: var(--blue); background: var(--tint-blue); }

/* ---- the Intelligence Portal: the button opens the Portal, its chevron the Portal pages
   (Players, Scorecards) that QCR used to host. The logo uses GQI's original image. */
.portal-menu { display: flex; align-self: center; height: 36px; border-radius: var(--radius); border: 1px solid var(--gqi-blue); background: var(--white); }
.portal-menu__open { font-family: var(--font-ui); display: inline-flex; align-items: center; gap: 10px; padding: 0 14px 0 12px; border-radius: var(--radius) 0 0 var(--radius); color: var(--gqi-blue); font-size: 13.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.portal-menu__logo { flex: none; width: auto; height: 26px; }
.portal-menu__more { position: relative; display: flex; }
.portal-menu__toggle { display: flex; align-items: center; justify-content: center; width: 34px; border-left: 1px solid var(--rule); border-radius: 0 var(--radius) var(--radius) 0; color: var(--gqi-blue); cursor: pointer; list-style: none; }
.portal-menu__toggle::-webkit-details-marker { display: none; }
.portal-menu__open:hover, .portal-menu__toggle:hover, .portal-menu__more[open] .portal-menu__toggle { background: var(--tint-blue); color: var(--gqi-blue-dark); }
.portal-menu__more[open] .chevron { transform: rotate(180deg); }
.portal-menu__sheet { position: absolute; top: calc(100% + 9px); right: 0; z-index: 35; width: 270px; padding: 12px 0 7px; border: 1px solid var(--rule); background: var(--white); box-shadow: 0 14px 26px rgba(48, 56, 70, .14); }
.portal-menu__about { margin: 0 14px 6px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); font-family: var(--font-ui); font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.portal-menu__list { margin: 0; padding: 0; list-style: none; }
.portal-menu__list a { display: block; padding: 8px 14px; color: var(--ink-soft); font-size: 13.5px; white-space: nowrap; }
.portal-menu__list a:hover, .portal-menu__list a:focus-visible { color: var(--blue); background: var(--tint-blue); }

/* ---- search: the Search tab labels the one search field, which lies collapsed at the
   right edge of the sections row and opens across the whole row while it has focus.
   On phones the header's search button drops the field below the header. */
.actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--ink-soft); cursor: pointer; }
.icon-btn:hover { border-color: var(--rule-strong); color: var(--blue); }
.search-toggle, .drawer { display: none; }
html:not(.has-js) .search-toggle, html:not(.has-js) .search__close { display: none; }
.tab--search { gap: 7px; cursor: pointer; }
.tab--search svg { flex: none; }
form.search { position: absolute; right: 0; bottom: calc((var(--mast-nav) - 46px) / 2); z-index: 5; display: flex; align-items: center; gap: 8px; width: 0; height: 46px; padding: 0; overflow: hidden; border: 1px solid transparent; border-radius: var(--radius); background: var(--white); opacity: 0; transition: width .22s cubic-bezier(.2, .7, .2, 1), opacity .15s, box-shadow .2s; }
.search__icon { display: inline-flex; color: var(--muted); }
.search__input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font-family: var(--font-ui); font-size: 19px; }
.search__input::placeholder { color: var(--ink-soft); opacity: 1; }
.search__submit, .search__close { display: none; }
.masthead.is-search-open form.search, .masthead:has(form.search:focus-within) form.search { width: 100%; padding: 0 10px 0 16px; border-color: var(--blue); box-shadow: 0 0 0 4px var(--tint-blue); opacity: 1; }
.masthead.is-search-open .search__submit, .masthead:has(form.search:focus-within) .search__submit { display: inline-flex; height: 34px; }
.masthead.is-search-open .search__close, .masthead:has(form.search:focus-within) .search__close { display: inline-flex; width: 34px; height: 34px; }
.masthead.is-search-open .tabs, .masthead:has(form.search:focus-within) .tabs { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------------ homepage */
.home-edition { padding-top: 30px; }
.home-stories { padding-bottom: 30px; border-bottom: 1px solid var(--rule-strong); }
.home-stories__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.home-stories__head h2 { font: 400 30px/1.1 var(--font-ui); }
.home-stories__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.home-story { min-width: 0; }
.home-story__media { display: block; aspect-ratio: 2 / 1; overflow: hidden; margin-bottom: 18px; }
.home-story__media img, .home-section-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-story-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12px; line-height: 1.25; color: var(--muted); font-variant-numeric: tabular-nums; }
.home-story__title { margin-top: 5px; font: 400 23px/1.25 var(--font-heading); letter-spacing: -.015em; overflow-wrap: anywhere; text-wrap: pretty; }
.home-story__title a:hover, .home-more__title a:hover, .home-section-card h3 a:hover, .home-section-card__more a:hover { color: var(--blue); }
.home-story__brief { margin-top: 12px; color: var(--ink-soft); font: 400 17px/1.46 var(--font-body); text-align: left; }
.home-stories__more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin: 30px 0 0; padding: 0; list-style: none; }
.home-more { min-width: 0; padding: 16px 0 18px; border-top: 1px solid var(--rule); }
.home-more__title { margin-top: 6px; font: 400 19px/1.28 var(--font-heading); letter-spacing: -.015em; overflow-wrap: anywhere; text-wrap: pretty; }
.home-section-card time { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.home__lower { padding-bottom: 72px; }
.home-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(250px, 1.1fr); gap: 0; padding-top: 28px; }
.home-section-card { display: flex; flex-direction: column; min-width: 0; padding: 0 20px; border-right: 1px solid var(--rule); }
.home-section-card:first-child { padding-left: 0; }
.home-section-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.home-section-card__head h2 { font: 400 20px/1.2 var(--font-ui); letter-spacing: -.01em; }
.home-section-card__media { display: block; aspect-ratio: 2 / 1; margin-top: 16px; overflow: hidden; }

.home-section-card h3 { margin-top: 14px; font: 400 20px/1.2 var(--font-heading); letter-spacing: -.015em; overflow-wrap: anywhere; text-wrap: pretty; }
.home-section-card__story--text h3 { margin-top: 16px; }
.home-section-card .badge { margin-top: 8px; }
.home-section-card__more { margin-top: 14px; }
.home-section-card__more li { padding: 10px 0; border-top: 1px solid var(--rule); }
.home-section-card__more a { font: 400 15.5px/1.28 var(--font-heading); letter-spacing: -.015em; }
.home-section-card__more time { margin-top: 4px; }
.home-sections__newsletter { align-self: start; min-width: 0; margin-left: 20px; padding: 125px 24px 24px; background: var(--tint); border: 1px solid var(--tint-rule); border-radius: var(--radius); }
/* Keep the decorative sphere above the copy, inside the panel boundary. */
.home-sections__newsletter, .news-sidebar__newsletter { position: relative; overflow: hidden; }
.home-sections__newsletter::before, .news-sidebar__newsletter::before {
  content: ''; position: absolute; pointer-events: none; right: -38px; top: -45px;
  width: 180px; height: 180px; opacity: .32;
  background: url(assets/images/qubit-sphere.png) center / contain no-repeat;
}
.home-sections__newsletter .signup { display: block; }
.home-sections__newsletter .signup__title { margin-top: 10px; font-size: 26px; line-height: 1.12; }
.home-sections__newsletter .signup__copy { margin-top: 10px; font-size: 14px; line-height: 1.5; }
.home-sections__newsletter .signup__action { height: auto; min-height: 36px; margin-top: 16px; padding: 8px 14px; white-space: normal; text-align: center; }

/* ------------------------------------------------------------------ main column
   main stacks full-width bands and centred columns. Pages with dated lists (home,
   sections) reserve a margin on the left of the main column where the day markers
   hang, so a date never takes a line of text. Every part of the column (page head,
   blocks, the band's contents) shares that left edge. */
main { display: flex; flex-direction: column; }
.column { padding-left: var(--ledger-margin); }   /* a component that is also a .column sets padding-block only */

.section-head { padding: 34px 0 18px; border-bottom: 2px solid var(--ink); }
.section-head--alone { padding-bottom: 64px; border-bottom: 0; }   /* a head with no list under it (not found) */
.section-head__title { font-family: var(--font-ui); font-size: clamp(40px, 5vw, 56px); font-weight: 400; letter-spacing: -.01em; line-height: 1.05; margin: 0 0 10px; }
.search-form { display: flex; gap: 8px; max-width: 580px; margin-top: 18px; }
.search-field { flex: 1; min-width: 0; height: 34px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--white); font-size: 14px; }
.section-head__desc { font-family: var(--font-body); font-size: 19px; color: var(--ink-soft); max-width: 52ch; }
.section-head__desc a { color: var(--blue); }

/* ------------------------------------------------------------------ feed rows
   The section feeds. The list is made of days; a day is its marker and its rows.
   The marker hangs in the ledger margin and sticks below the masthead while the day's
   stories scroll past, until the next day's marker pushes it out. A stronger rule closes
   each day; the rows inside a day share a light one.
   A row is: body (kicker, title, brief) from the top of the row, and a tile centred
   beside it. Tile rule: a frame of fixed size, quiet grey, the image contained and
   centred in it. White logo backgrounds blend into the frame. No image, no frame; the
   grid keeps the column, so every row's text has the same measure. */
.ledger { --tile-w: 320px; --tile-h: 200px; --tile-pad: 16px; --row-gap: 40px; --row-pad: 24px; }
.day { display: grid; grid-template-columns: var(--ledger-margin) minmax(0, 1fr); margin-left: calc(-1 * var(--ledger-margin)); }
.day__marker {
  position: sticky; top: calc(var(--mast-h) + var(--admin-bar, 0px)); align-self: start;
  width: calc(var(--ledger-margin) - 16px); padding-top: 30px;
  font-size: 13px; line-height: 1.3; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums;
}
.day__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.day__rows { border-bottom: 1px solid var(--rule-strong); }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--tile-w);
  grid-template-areas: "body tile"; gap: 0 var(--row-gap); align-items: center;
  padding: var(--row-pad) 0; border-bottom: 1px solid var(--rule);
}
.day__rows > .row:last-child { border-bottom: 0; }
.row__date { display: none; }
.row__day-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.row__body { grid-area: body; align-self: start; min-width: 0; }
.row__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.chip {
  display: inline-flex; align-items: center; height: 19px; padding: 0 7px;
  border-radius: var(--radius); background: var(--tint-blue); color: var(--blue-dark);
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.chip--podcasts { background: var(--tint-cyan); }
.chip:hover { background: var(--blue-dark); color: #fff; }
.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 7px;
  border-radius: var(--radius); background: var(--blue-dark); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.row__podcast { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.row__title { font-family: var(--font-heading); font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -.015em; overflow-wrap: break-word; }
.row__title a:hover { color: var(--blue); }
.row__brief { margin-top: 9px; font-family: var(--font-body); font-size: 17.5px; line-height: 1.58; color: var(--ink-soft); }
.row__tile {
  grid-area: tile; display: block; width: var(--tile-w); height: var(--tile-h);
  padding: var(--tile-pad); background: var(--tint); border-radius: var(--radius); overflow: hidden;
}
.row__tile img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* News has a compact reading column and complementary specialist coverage. */
body:has(.news-layout) .shell { --shell: 1280px; }
.news-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start; padding-bottom: 56px; }
.news-layout__main { min-width: 0; }
.news-layout .ledger { --tile-w: clamp(160px, 16vw, 220px); --tile-h: calc(var(--tile-w) * 9 / 16); --row-gap: 24px; --row-pad: 22px; }
.news-layout .day { display: block; margin-left: 0; }
.news-layout .day + .day { border-top: 1px solid #aeb9c7; padding-top: 12px; }
.news-layout .day__marker { display: none; }
.news-layout .row__date { display: block; grid-area: date; margin-bottom: 6px; font: 500 14px/1.3 var(--font-ui); color: var(--blue-dark); }
.news-layout .day__rows { border-bottom: 0; }
.news-layout .row { grid-template-columns: var(--tile-w) minmax(0, 1fr); grid-template-areas: ". date" "tile body"; grid-template-rows: auto 1fr; align-items: start; }
.news-layout .row:not(:has(.row__tile)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "date" "body"; }
.news-layout .row__tile { display: flex; align-items: center; height: auto; min-height: var(--tile-h); margin-top: 0; padding: 0; background: #f4f6f8; border-radius: 0; }
.news-layout .row__tile img { display: block; width: 100%; height: auto; object-fit: contain; mix-blend-mode: normal; }
.news-layout .row__title { font-size: 20px; font-weight: 450; line-height: 1.28; }
.news-layout .row__brief { font-family: var(--font-body); font-size: 17px; line-height: 1.46; display: block; overflow: visible; -webkit-line-clamp: unset; }
.news-sidebar { min-width: 0; padding-top: 38px; }
.news-sidebar__newsletter { padding: 125px 24px 24px; border: 1px solid var(--tint-rule); background: var(--tint); }
.news-sidebar__newsletter .signup { display: block; }
.news-sidebar__newsletter .signup__title { margin-top: 10px; font-size: 27px; }
.news-sidebar__newsletter .signup__copy { margin-top: 12px; line-height: 1.5; }
.news-sidebar__newsletter .signup__action { margin-top: 18px; height: auto; min-height: 38px; white-space: normal; text-align: center; }
.news-sidebar__section { margin-top: 30px; }
.news-sidebar__section h2 { padding-bottom: 9px; border-bottom: 1px solid var(--ink); font: 400 23px/1.1 var(--font-ui); }
.news-sidebar__section li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.news-sidebar__section time { display: block; color: var(--muted); font-size: 11px; margin-bottom: 6px; }
.news-sidebar__section h3 { font: 400 18px/1.25 var(--font-heading); letter-spacing: -.015em; }
.news-sidebar__section h3 a:hover { color: var(--blue); }
.news-sidebar__section .badge { margin-top: 6px; }
.news-sidebar__section > .text-link { display: inline-block; margin-top: 14px; }
/* Preserve extreme proportions without requiring editorial labels. */
.home-story__media img.card-image--contained, .home-section-card__media img.card-image--contained { object-fit: contain; padding: 0; background: linear-gradient(145deg, #fff, #f4f6f8); mix-blend-mode: normal; }

/* ------------------------------------------------------------------ signup + section feed band
   The same signup module links to the hosted QCR Alerts form on the homepage's
   front, in section feeds and at article end. A section band is the module in a
   quiet box at a day boundary, kept to the text measure of the rows, clear of the
   tile column, so it reads as part of the list; it never exceeds a quarter of a
   phone screen. */
.signup { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; }
.signup__text { flex: 1 1 320px; min-width: 0; }
.signup__title { margin-top: 4px; font-family: var(--font-ui); font-size: 20px; font-weight: 500; line-height: 1.2; }
.signup__copy { margin-top: 4px; color: var(--ink-soft); font-size: 13.5px; max-width: 52ch; }
.signup__action { flex: none; }
.band { --reserve: 360px; margin-top: 40px; }
.band + .column { padding-top: 32px; }
.band__inner { padding-block: 0; }
.band .signup { max-width: calc(100% - var(--reserve)); padding: 18px 22px; background: var(--tint); border: 1px solid var(--tint-rule); border-radius: var(--radius); }

/* ------------------------------------------------------------------ pagination */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 30px 0 60px; font-size: 13px; font-weight: 600; }
.pg { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink-soft); }
.pg:hover { border-color: var(--blue); color: var(--blue); }
.pg.is-current { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.pg.is-disabled { opacity: .4; pointer-events: none; }
.pg--gap { border: 0; min-width: 20px; }
.empty-state { padding: 22px 0 40px; font-family: var(--font-ui); font-size: 17px; color: var(--ink-soft); }

/* ------------------------------------------------------------------ article
   Reading column: 19px/1.62 with a 720px desktop measure,
   justified, never hyphenated. The grid column is the measure, so the sidebar sits
   30px from the last character instead of 30px from the end of an empty column. */
.article {
  --measure: 720px;
  --side: 240px;
  --side-gap: 30px;
  --body: 19px;
  --lead: 20px;
  --fig-h: 360px;
  width: min(100%, calc(var(--measure) + var(--side-gap) + var(--side)));
  margin-inline: auto;
  padding-top: 30px;
}
.article__head { max-width: none; }
.article--page { padding-bottom: 44px; }
.page__body { padding-top: 28px; }
.article__kicker, .article__title { max-width: calc(var(--measure) + 128px); }
.article__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.article__title {
  margin-top: 14px; font-family: var(--font-heading); font-size: clamp(30px, 3.5vw, 42px);
  font-weight: 400; line-height: 1.14; letter-spacing: -.012em; text-wrap: pretty;
}

/* article metadata and sharing tools */
.article-meta {
  display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule);
}
.article-meta__text { margin-top: 2px; flex: 1 1 340px; min-width: 0; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.article-meta__dot { margin: 0 6px; }
.tools { display: flex; gap: 6px; flex-wrap: wrap; }
.tool {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white);
  font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
}
.tool svg { flex: none; opacity: .7; }
.tool:hover { border-color: var(--blue); color: var(--blue); }
.tool:hover svg { opacity: 1; }

.article__layout {
  display: grid; grid-template-columns: minmax(0, var(--measure)) var(--side);
  gap: var(--side-gap); padding: 28px 0 44px;
}

/* ---- reading column */
.prose { font-family: var(--font-body); font-size: var(--body); line-height: 1.62; }
.prose p {
  margin: 0 0 1.25em; text-align: justify;
}
.prose > p:first-of-type { font-size: var(--lead); line-height: 1.55; color: var(--ink); }
:where(.prose) :where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-heading); }
.prose h2 {
  margin: 1.55em 0 .42em; font-size: 25px; font-weight: 600;
  line-height: 1.2; letter-spacing: -.012em; text-wrap: balance;
}
.prose h2 strong, .prose h3 strong { font-weight: inherit; }
.prose h3 { margin: 1.35em 0 .35em; font-size: 20.5px; font-weight: 600; line-height: 1.25; }
.prose ul, .prose ol { margin: 0 0 1.35em; padding-left: 1.2em; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .5em; text-align: justify; }
.prose li::marker { color: var(--rule-strong); }
.prose a:not(.btn) { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--cyan); text-underline-offset: 3px; }
.prose a:not(.btn):hover { text-decoration-color: var(--blue); }
.prose em { color: inherit; }
.prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--cyan); color: var(--ink-soft); }
.prose blockquote p { text-align: left; }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose pre { margin: 0 0 1.5em; max-width: 100%; font-size: 13px; line-height: 1.45; padding: 14px; background: var(--paper); border: 1px solid var(--rule); overflow-x: auto; white-space: pre; }
.prose pre code { white-space: pre; overflow-wrap: normal; word-break: normal; }
.prose .wp-block-cover, .prose .wp-block-media-text { margin-bottom: 1.7em; }
.prose .wp-block-media-text p, .prose .wp-block-media-text li { text-align: left; }

/* ---- figures: the frame is the measure, the image is centred inside it, so a
   3.9:1 logo lock-up and an 800×800 slide both sit on the same block. */
.prose figure {
  margin: 6px 0 1.7em; padding: 16px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white);
}
.prose figure.wp-block-image { width: 100%; display: block; }
.prose figure.wp-block-image > figcaption { display: block; }
.prose figure img { max-height: var(--fig-h); width: auto; max-width: 100%; margin-inline: auto; }
.prose figcaption {
  margin: 14px -16px -2px; padding: 11px 16px 0; border-top: 1px solid var(--rule);
  font-family: var(--font-ui); font-size: 12.5px; line-height: 1.45; color: var(--muted);
}

/* ---- tables: honor authored column layout and cell alignment */
.table-scroll { width: 100%; max-width: 100%; min-width: 0; margin: 2px 0 1.5em; overflow-x: auto; }
.prose figure.table-scroll { display: block; width: 100%; padding: 0; border: 0; background: none; margin: 2px 0 1.5em; overflow-x: auto; }
.prose figure.table-scroll figcaption { display: block; margin: 12px 0 0; padding: 0; border: 0; }
.prose .article-scroll-hint { margin: 0 0 7px; font: 500 12px/1.45 var(--font-ui); color: var(--muted); text-align: left; }
.prose .table-scroll:focus-visible, .prose pre:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.prose table {
  width: 100%; min-width: var(--qcr-table-min-width, 0px); table-layout: auto; border: 0; border-collapse: collapse; font-family: var(--font-ui);
  font-size: 13.5px; line-height: 1.35; font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
}
.prose table.has-fixed-layout { table-layout: fixed; }
.prose table th, .prose table td { border: 0; padding: 9px 12px; text-align: left; vertical-align: top; white-space: normal; overflow-wrap: break-word; }
.prose table th:first-child, .prose table td:first-child { padding-left: 0; }
.prose table th:last-child, .prose table td:last-child { padding-right: 0; }
.prose thead th {
  padding-top: 0; padding-bottom: 9px; font-size: 12.5px; font-weight: 600;
  color: var(--ink); border-bottom: 2px solid var(--ink);
}
.prose tbody td, .prose tbody th { border-bottom: 1px solid var(--rule); }
.prose tbody tr:last-child td, .prose tbody tr:last-child th { border-bottom: 1.5px solid var(--rule-strong); }
.prose .has-text-align-left { text-align: left; }
.prose .has-text-align-center { text-align: center; }
.prose .has-text-align-right { text-align: right; }
.prose tbody td:first-child strong { font-weight: 500; }
.prose .prose-note {
  margin: -.6em 0 1.7em; font-family: var(--font-ui); font-size: 12.5px; line-height: 1.5;
  color: var(--muted); max-width: 62ch; text-align: left;
}
.prose .prose-note em { font-style: normal; }

/* ---- continue: where the reading ends, the two Portal destinations, then the signup.
   Each destination is its name as the link and one line of what it is. */
.portal-links { display: grid; gap: 10px; margin-top: 14px; }
.portal-links li { display: grid; gap: 2px; font-family: var(--font-ui); }
.portal-links a { font-size: 14.5px; font-weight: 600; color: var(--blue); }
.portal-links a:hover { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 3px; }
.portal-links span { font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.continue {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px;
  margin-top: 40px; padding: 20px 22px 22px; font-family: var(--font-ui);
  background: var(--tint); border: 1px solid var(--tint-rule); border-radius: var(--radius);
}
.continue p { margin: 0; text-align: left; }
.continue a { text-decoration: none; }
.continue .btn { color: #fff; }
.continue__title { margin-top: 4px; font-family: var(--font-ui); font-size: 21px; font-weight: 500; line-height: 1.2; }
.continue__copy { margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); max-width: 62ch; }
.continue .portal-links { margin-top: 16px; }
.continue .signup { padding-top: 18px; border-top: 1px solid var(--tint-rule); }
.continue + .comments-area { margin-top: 44px; }

/* ---- sidebar: more from the article's section */
.side { position: sticky; top: calc(var(--mast-h) + 22px + var(--admin-bar, 0px)); align-self: start; }
.side__title {
  padding-bottom: 9px; border-bottom: 1px solid var(--ink);
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.side__item {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "date" "title";
  align-content: start; padding: 11px 0; border-bottom: 1px solid var(--rule);
}
.side__item time { grid-area: date; font-size: 11.5px; letter-spacing: .01em; color: var(--muted); font-variant-numeric: tabular-nums; }
.side__item > a { grid-area: title; margin-top: 3px; font-family: var(--font-heading); font-size: 15.5px; font-weight: 400; line-height: 1.3; letter-spacing: -.015em; }
.side__item > a:hover { color: var(--blue); }
.side .text-link { display: inline-block; margin-top: 14px; }

/* ---- members-only */
.teaser__fade { position: relative; max-height: 5em; overflow: hidden; }
.teaser__fade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255, 255, 255, 0) 8%, #fff 88%); }
.paywall {
  margin-top: 2px; padding: 24px 26px 20px;
  border: 1px solid var(--rule); border-top: 3px solid var(--blue-dark); border-radius: var(--radius);
  background: var(--paper); font-family: var(--font-ui);
}
.paywall p { margin: 0; text-align: left; }
.paywall a, .prose .paywall a { text-decoration: none; }
.prose .tier, .prose .tier:hover { color: var(--ink-soft); }
.prose .tier__price { font-family: var(--font-heading); font-size: 22px; font-weight: 500; color: var(--ink); line-height: 1.1; }
.tier strong { color: var(--ink); }
.prose .tier__cta { color: var(--blue); }
.prose .paywall__signin a { color: var(--blue); }
.paywall__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--blue-dark); }
.prose .paywall__title, .paywall__title { margin: 10px 0 0; font-family: var(--font-heading); font-size: 27px; font-weight: 500; line-height: 1.18; letter-spacing: -.01em; }
.paywall__copy { margin-top: 8px !important; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); max-width: 56ch; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.tier {
  display: flex; flex-direction: column; gap: 5px; padding: 13px 14px 12px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white);
  font-size: 12.5px; line-height: 1.45; color: var(--ink-soft);
}
.tier:hover { border-color: var(--blue); color: var(--ink-soft); }
.tier strong { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.tier__cta { margin-top: auto; padding-top: 8px; color: var(--blue); font-weight: 600; }
.paywall__signin { margin-top: 18px !important; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-soft); }
.paywall__signin a { color: var(--blue); font-weight: 600; }
.paywall__signin a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ drawer (mobile) */
.drawer { position: static; }
.drawer > summary { list-style: none; }
.drawer > summary::-webkit-details-marker { display: none; }
.drawer__panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  background: var(--white); border-bottom: 1px solid var(--rule); box-shadow: 0 16px 32px rgba(48, 56, 70, .12);
  max-height: calc(100dvh - 60px - var(--admin-bar, 0px)); overflow-y: auto; overscroll-behavior: contain;
  padding: 12px var(--gutter) 22px; display: flex; flex-direction: column; gap: 14px;
}
.drawer__tabs a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 16px; font-weight: 500; }
.drawer__tabs a[aria-current="page"] { color: var(--blue-dark); box-shadow: inset 3px 0 0 var(--blue); padding-left: 12px; }
.drawer__note { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.drawer__resource-menu { position: static; border-bottom: 1px solid var(--rule); }
.drawer .drawer__resource-toggle { display: block; width: 100%; box-sizing: border-box; text-align: left; min-height: 46px; padding: 12px 0; color: var(--ink); font-size: 16px; font-weight: 500; }
.drawer__resource-toggle:hover, .drawer__resource-menu[open] .drawer__resource-toggle { color: var(--blue); }
.drawer__resource-toggle.is-active { color: var(--blue-dark); box-shadow: inset 3px 0 0 var(--blue); padding-left: 12px; }
.drawer__resource-list { padding: 3px 0 8px 16px; }
.drawer__resource-list a { padding: 9px 0; border-bottom: 0; color: var(--ink-soft); font-size: 14px; }
.drawer__utility { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-size: 15px; }
.drawer__owner { display: flex; align-items: center; gap: 9px; margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--muted); }
.drawer__owner img { flex: none; width: auto; height: 14px; }

/* ------------------------------------------------------------------ footer
   Where the ownership is said in words: the nameplate at half size with the byline
   beneath it (so it never outgrows its column) and the sign-in disclosure, the
   links, then the two network columns, GQI and Nexus, each a logo, one sentence and
   its site. Four columns need the full shell; narrower layouts are below. */
.footer { background: var(--tint); border-top: 1px solid var(--rule); }
.footer__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) 130px minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: stretch; padding: 40px 0 30px; }
.footer .logo { gap: 8px; }
.footer .logo__mark { width: 30px; }
.footer .logo__type { flex-direction: column; align-items: flex-start; gap: 2px; }
.footer .logo__wordmark { font-size: 20px; }
.footer .logo__byline { font-size: 11px; }
.footer .logo__gqi { width: 27px; }
.footer__brand p { margin-top: 14px; max-width: 40ch; color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; }
.footer__links { display: flex; flex-wrap: wrap; flex-direction: column; gap: 11px; font-size: 13.5px; font-weight: 500; }
.footer__links a:hover { color: var(--blue); }
.footer__partner { border-left: 1px solid var(--rule); padding-left: 28px; }
.footer__partner-logo { display: inline-block; height: 40px; }
.footer__partner-logo img { display: block; width: auto; height: 34px; margin-top: 3px; }
.footer__partner-logo--nexus img { height: 40px; margin-top: 0; padding: 6px 10px; box-sizing: border-box; background: var(--ink); border-radius: var(--radius); }
.footer__partner p { margin: 14px 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.footer__legal { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0 26px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-soft); }
.footer__legal-links a { margin-left: 18px; }
.footer__legal-links a:hover { color: var(--blue); }

/* ------------------------------------------------------------------ responsive */
@media (min-width: 900px) {
  .utility { font-size: 14px; }
  .home-edition .text-link { font-family: var(--font-heading); font-size: 16px; font-weight: 400; }
  .home-story-meta, .home-section-card time { font-size: 16px; }
  .home-stories__head { justify-content: flex-start; gap: 24px; }
  .masthead__right .actions { display: none; }
  .tabs__main > li:first-child .tab { padding-left: 0; }
  .tabs__main > li:first-child .tab::after { left: 0; }
  :root { --mast-top: calc(74px - 22px * var(--header-progress, 0)); }
  /* Preserve document height while the sticky chrome contracts. */
  .masthead { margin-bottom: calc(22px * var(--header-progress, 0)); }
  .masthead .logo__mark { width: calc(var(--header-mark-start, 44px) + (32px - var(--header-mark-start, 44px)) * var(--header-progress, 0)); }
  .masthead .logo__wordmark { font-size: calc(var(--header-title-start, clamp(25px, 2.7vw, 32px)) + (25px - var(--header-title-start, clamp(25px, 2.7vw, 32px))) * var(--header-progress, 0)); }

}

@media (max-width: 1220px) and (min-width: 900px) {
  /* below the shell's full width the tabs and the nameplate tighten */
  :root { --tab-size: 14px; --tab-pad: 9px; --tab-gap: 2px; }
}
@media (max-width: 1000px) and (min-width: 900px) {
  :root { --tab-pad: 7px; --tab-size: 13.5px; }
  .masthead { --header-mark-start: 36px; --header-title-start: 25px; }
  .logo__mark { width: 36px; }
  .masthead .logo__wordmark { font-size: 25px; }
  .logo__byline { font-size: 13px; }
  .utility { gap: 12px; }
  .utility .btn { padding: 0 12px; }
}
@media (max-width: 1150px) {
  .home-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
  .home-section-card:nth-child(2) { border-right: 0; }
  .home-section-card:nth-child(3) { padding-left: 0; }
  .home-sections__newsletter { margin-left: 20px; }
  .ledger { --tile-w: 280px; --tile-h: 176px; --row-gap: 32px; }
  .band { --reserve: 312px; }
  .article { --side: 220px; --side-gap: 28px; }
  /* the lock-up and the links share a row above the two network columns */
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 26px 36px; }
  .footer__links { flex-direction: row; gap: 10px 20px; align-content: flex-start; }
  .footer__partner { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 22px; }
}
@media (max-width: 1024px) {
  .news-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .news-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-top: 0; }
  .news-sidebar__section { margin-top: 0; }
}
@media (max-width: 899px) {
  .home-stories__grid { gap: 20px; }
  .home-stories__more { column-gap: 20px; }

  /* one 60px row, pinned whole: nameplate on one line, then search and menu */
  :root { --mast-top: 60px; --mast-nav: 0px; --mast-h: 60px; }
  .masthead { top: var(--admin-bar, 0px); }
  .masthead__top { min-height: var(--mast-top); gap: 12px; border-bottom: 0; }
  .masthead__lower, .utility { display: none; }
  .logo { gap: 7px; }
  .logo__mark { width: 29px; }
  .logo__type { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
  .masthead .logo__wordmark { font-size: 17px; letter-spacing: -.045em; }
  .logo__gqi { width: 30px; }
  .logo__byline { font-size: 11px; gap: 4px; }
  .masthead .logo__byline { transform: none; }
  .actions .search-toggle, .drawer { display: block; }
  form.search { display: none; }
  .masthead.is-search-open form.search { display: flex; top: 100%; bottom: auto; margin-top: 8px; width: 100%; height: 46px; }
  /* In the standard ledgers, each row now carries its date line. */
  .column { padding-left: 0; }
  .day { display: block; margin-left: 0; }
  .day__marker { display: none; }
  .row { grid-template-areas: "date date" "body tile"; }
  .row__date { position: static; grid-area: date; width: auto; margin-bottom: 6px; display: block; }
  .day__rows > .row:first-child { padding-top: 6px; }
  .band { --reserve: 0px; }
  .article { width: 100%; }
  .article__layout { grid-template-columns: minmax(0, var(--measure)); gap: 30px; }
  .side { position: static; max-width: var(--measure); }
  .tiers { grid-template-columns: 1fr; }
  .footer__brand, .footer__links { grid-column: 1 / -1; }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer__legal-links a { margin: 0 18px 0 0; }
}

@media (max-width: 767px) {
  .home-stories__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .home-story + .home-story { padding-top: 24px; border-top: 1px solid var(--rule); }
  .home-stories__more { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .home-more { padding: 14px 0 15px; }
  .home-more__title { font-size: 19px; }
  .home-stories__head h2 { font-size: 27px; }
  .news-layout .ledger { --tile-w: 112px; --tile-h: 63px; --row-pad: 18px; }
  .news-layout .row { display: block; }
  .news-sidebar { grid-template-columns: minmax(0, 1fr); }

  :root { --gutter: 16px; }
  .home-edition { padding-top: 18px; }
  .home-sections { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 12px; }
  .home-section-card, .home-section-card:first-child, .home-section-card:nth-child(3) { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .home-section-card__story { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 11px; }
  .home-section-card__story--text { grid-template-columns: minmax(0, 1fr); }
  .home-section-card__media { width: 94px; height: 62px; margin: 0; }
  .home-section-card__head { padding-bottom: 6px; }

  .home-section-card h3 { margin-top: 0; font-size: 19px; }
  .home-section-card time { margin-top: 5px; }
  .home-section-card__more { margin-top: 10px; }
  .home-sections__newsletter { margin: 22px 0 0; padding: 125px 22px 22px; }
  .home__lower { padding-bottom: 48px; }
  /* rows: both forms become one block with the tile floated right, so a long title
     wraps under it, and the date line runs across the top */
  .ledger { --row-pad: 15px; --tile-w: 112px; --tile-h: 70px; --tile-pad: 7px; }
  .row { display: block; }
  .row::after { content: ""; display: block; clear: both; }
  .row__kicker { margin-bottom: 4px; }
  .row__tile { float: right; margin: 2px 0 8px 16px; }
  .row__title { font-size: 20px; }
  .row__brief {
    margin-top: 7px; font-size: 15.5px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .section-head__desc { font-size: 17px; }
  .pagination .pg--prev, .pagination .pg--next { flex-basis: 100%; justify-content: center; }
  .signup__text { flex-basis: 100%; }
  .signup__action { width: 100%; height: 40px; justify-content: center; }
  .band .signup { padding: 16px 16px 18px; }
  .continue { padding: 18px 16px 18px; }
  .footer__inner { grid-template-columns: 1fr; }
  .article { --body: 17.5px; --lead: 18.5px; --fig-h: 300px; }
  .article__title { font-size: 29px; letter-spacing: -.012em; }
  .prose p, .prose li { text-align: left; }
  .prose h2 { font-size: 22px; }
  .prose h3 { font-size: 19px; }
  .prose figure { padding: 10px; }
  .prose table { font-size: 12.5px; }
  .prose table th, .prose table td { padding: 7px 8px; }
  .prose figcaption { margin: 10px -10px -2px; padding: 9px 10px 0; }
  .article-meta { gap: 12px 14px; }
  .article-meta__text { flex: 1 1 0; }
  .tools { width: 100%; }
  .paywall { padding: 20px 18px 18px; }
  .paywall__title { font-size: 23px; }
}

/* WordPress integration and progressive enhancement. */
[hidden] { display: none !important; }
.admin-bar { --admin-bar: 32px; }
.drawer__search { display: flex; gap: 8px; }
.drawer__search input[type="search"] { width: 100%; min-width: 0; padding: 7px 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.has-js .drawer__search { display: none; }
@media (max-width: 782px) { .admin-bar { --admin-bar: 46px; } }
@media (max-width: 600px) {
  .admin-bar { --admin-bar: 0px; }
  .prose .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { padding-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Retained WordPress and membership forms use the publication controls. */
.prose form { font-family: var(--font-ui); font-size: 15px; line-height: 1.5; }
.prose form p { text-align: left; }
.prose form label { display: block; margin-bottom: 5px; font-weight: 500; }
.prose form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.prose form textarea, .prose form select {
  max-width: 100%; padding: 9px 12px; border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--white); font: inherit; color: var(--ink);
}
.prose form input[type="submit"], .prose form button[type="submit"] {
  padding: 9px 16px; border: 1px solid var(--blue-dark); border-radius: var(--radius);
  background: var(--blue-dark); color: var(--white); font: 600 14px var(--font-ui); cursor: pointer;
}
.prose form input[type="submit"]:hover, .prose form button[type="submit"]:hover { background: var(--blue); border-color: var(--blue); }
.prose form fieldset { min-width: 0; margin: 0 0 22px; padding: 18px; border: 1px solid var(--rule); }
.prose form legend { padding-inline: 6px; font-weight: 600; }
.prose form label:has(input[type="checkbox"]), .prose form label:has(input[type="radio"]) { display: flex; align-items: baseline; gap: 8px; font-weight: 400; }
.prose form input[type="checkbox"], .prose form input[type="radio"] { accent-color: var(--blue-dark); }

/* ------------------------------------------------------------------ comments
   Under the Portal box, still in the reading column: the count as a label over a
   rule (the sidebar's title style), each comment as name and dated permalink over
   its text a step below the article size, a thread closed by a hairline with its
   replies indented behind one, then the form: the comment first, name and email
   side by side, in the retained-form controls. The column's element rules are
   reset first. */
.comments-area { font-family: var(--font-ui); }
.comments-area h2 { margin: 0; padding-bottom: 9px; border-bottom: 1px solid var(--ink); font: 700 11.5px/1.4 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.comments-area ol { margin: 0; padding: 0; list-style: none; }
.comments-area li { margin: 0; text-align: left; }
.comments-area p { margin: 0; text-align: left; }
.comment { padding-top: 18px; }
.comment--thread { padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.comment--reply { padding-left: clamp(12px, 3vw, 20px); border-left: 1px solid var(--rule); }
.comment__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.comment__meta a { color: inherit; text-decoration: none; }
.comment__meta a:hover { color: var(--blue); }
.comment__author { font-weight: 600; color: var(--ink); }
.comment__pending { padding-top: 4px; font-size: 12.5px; font-style: italic; color: var(--muted); }
.comment__text { margin-top: 6px; font-family: var(--font-body); font-size: calc(var(--body) - 1.5px); line-height: 1.55; }
.comment__text p { margin: 0 0 .8em; }
.comment__text p:last-child { margin-bottom: 0; }
.comment__reply { margin-top: 8px; font-size: 12.5px; font-weight: 600; }
.comment__reply a { color: var(--blue); text-decoration: none; }
.comment__reply a:hover { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 3px; }
.comments-area__closed { padding-top: 14px; font-size: 12.5px; color: var(--muted); }
.respond { margin-top: 32px; }
.respond:first-child { margin-top: 0; }
.respond__title a { color: var(--blue); text-decoration: none; }
.respond__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.respond__cancel a { margin-left: 12px; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.respond__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 16px; }
.respond__form label { font-size: 13px; }
.respond__note, .respond__comment, .respond__submit { grid-column: 1 / -1; }
.respond__note { font-size: 12.5px; color: var(--muted); }
.respond__comment textarea { width: 100%; min-height: 150px; resize: vertical; }
.respond__field input { width: 100%; }
@media (max-width: 767px) {
  .respond__form { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .utility, .masthead, .footer, .band, .continue, .side, .tools, .comments-area, #wpadminbar, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .shell, .article { width: 100%; max-width: none; margin: 0; padding: 0; }
  .article__layout { display: block; }
  .article__title { max-width: none; }
  .prose { font-size: 12pt; }
  .prose a { color: inherit; text-decoration: underline; }
  .prose figure { break-inside: avoid; }
  .table-scroll, .prose figure.table-scroll { overflow: visible; }
  .prose table { min-width: 0; }
  .prose pre, .prose pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
  .article-scroll-hint { display: none; }
}


@media (max-width: 380px) {
  .logo { gap: 6px; }
  .logo__mark { width: 26px; }
  .masthead .logo__wordmark { font-size: clamp(13px, calc(8vw - 12.6px), 17px); }
  .footer .logo__wordmark { font-size: 18px; }
}