/* The hub. Approved design: docs/design/onlyfinance (Main, Article, Company).
   Lilac paper, ink and aubergine; violet only for accents and focus. Newsreader for headlines and reading text,
   Schibsted Grotesk for everything else. No boxed cards and no rules between items: whitespace, type and solid
   colour plates carry the structure. */

/* Brand fonts, self-hosted (static/fonts, SIL Open Font License; README.md there). One file per family, style and
   subset: latin, and latin-ext for Czech and Slovak letters, chosen by unicode-range. Newsreader is variable in
   weight (200 to 800) and optical size, Schibsted Grotesk in weight (400 to 900). base.html preloads the two latin
   normal files; apps.content.visuals.brand.font_files lists the same files for the rendered images. */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin.f94a697b1650.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: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-ext.2e01db0610b1.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-italic-latin.e97067eb043b.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: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-italic-latin-ext.43736a955d60.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin.ba4038fc5cb5.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: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin-ext.65233324c912.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-italic-latin.0ef3a090f2eb.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: "Schibsted Grotesk";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-italic-latin-ext.8521efe1003b.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #F3EEF8;
  --ink: #1E1230;
  --ink2: #4C3F60;
  --muted: #6E6283;
  --aub: #261738;
  --vio: #AC6AFF;
  --vio-d: #5B23B8;
  --plum: #3D2266;
  --lav: #DCCCF5;
  --lilac: #C9A6FF;
  --soft: #C9BCDC;
  --red: #B3261E;
  --white: #FFFFFF;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; }

a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--vio-d); }

/* Focus ring: deep violet on light ground (3:1 against the paper), violet on the dark units. */
:focus-visible { outline: 3px solid var(--vio-d); outline-offset: 3px; }
.strip :focus-visible, .letter :focus-visible, .inl :focus-visible, .foot :focus-visible,
.co-hero :focus-visible { outline-color: var(--vio); }
main:focus { outline: none; }

h1, h2, h3 { margin: 0; }
figure { margin: 0; }
p { margin: 0 0 1em; }

.w { max-width: 1320px; margin: 0 auto; padding-inline: 40px; }
@media (max-width: 760px) { .w { padding-inline: 16px; } }

.visually-hidden {
  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: -10000px; top: 0; z-index: 10;
  background: var(--ink); color: var(--white); padding: .75rem 1rem; font-weight: 700;
}
.skip:focus { left: 16px; top: 8px; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Buttons and links */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--white);
  font: 700 14px/1 var(--sans); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--vio-d); color: var(--white); }
.btn.light { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.light:hover { background: var(--ink); color: var(--white); }
.btn.vio { background: var(--vio); color: var(--ink); }
.btn.vio:hover { background: var(--white); color: var(--ink); }
.btn.sm { min-height: 38px; padding: 0 16px; font-size: 13px; }
.btn.danger { background: var(--red); }
.btn[hidden] { display: none; }

.text-link { font: 700 14px/1 var(--sans); text-decoration: none; padding: 12px 0; }
.text-link:hover { text-decoration: underline; }

/* Data strip (home) */

.strip { background: var(--aub); color: #E9E0F5; font: 500 13px/1.2 var(--sans); }
.strip ul {
  list-style: none; margin: 0 auto; padding: 0;
  display: flex; gap: 28px; align-items: center; min-height: 38px; overflow-x: auto; white-space: nowrap;
}
/* The hidden "up"/"down" words are positioned absolutely: anchored to their rate so they scroll and clip with the row
   instead of widening the page on a phone. */
.strip li { position: relative; }
.strip b { color: var(--white); font-weight: 700; }
.strip .up { color: var(--lilac); }
.strip .down { color: #F2B8B5; }
.strip .lbl { color: #A898C2; margin-right: 6px; }

/* Masthead (home) */

.masthead .top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-block: 22px 6px; }
.masthead .left { margin: 0; font: 500 13px/1.4 var(--sans); color: var(--ink2); }
.masthead .right { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; align-items: center; }
.masthead .right .lang-switch { margin-right: 6px; }
/* The brand name may be long (ConradReport.com is 16 characters): one column below 1100px, and the wordmark scales
   with the viewport so it never pushes the page wider than the screen (about 1.15em per character pair). */
@media (max-width: 1100px) {
  .masthead .top { grid-template-columns: 1fr; justify-items: center; }
  .masthead .left { display: none; }
  .masthead .right { justify-content: center; }
}
@media (max-width: 760px) {
  .masthead .top { gap: 12px; padding-block: 16px 4px; }
  .masthead .right { gap: 8px; }
  .masthead .right .btn { min-height: 40px; padding: 0 16px; font-size: 13px; }
  .claimline { font-size: 16px; }
}
.brand-big {
  margin: 0; text-align: center; max-width: 100%; white-space: nowrap;
  font-family: var(--serif); font-weight: 800; font-size: clamp(28px, 9.6vw, 76px); line-height: .9;
  letter-spacing: -.04em; font-variation-settings: "opsz" 72;
}
@media (min-width: 1101px) { .brand-big { font-size: clamp(56px, 5.2vw, 76px); } }
.brand-big a, .brand { color: var(--ink); text-decoration: none; }
.brand-big em, .brand em { font-style: italic; font-weight: 500; color: var(--vio-d); letter-spacing: -.02em; }
.claimline { text-align: center; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink2); margin: 6px 0 16px; }
.nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 30px; padding-block: 6px 26px; font: 700 15px/1 var(--sans); }
.nav a { text-decoration: none; padding: 8px 0; }

/* Compact bar (other pages) */

.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-block: 18px; }
.bar .brand { font-family: var(--serif); font-weight: 800; font-size: 40px; letter-spacing: -.04em; line-height: 1; }
.bar .sections { display: flex; flex-wrap: wrap; gap: 4px 26px; flex: 1 1 420px; font: 700 15px/1 var(--sans); }
.bar .sections a { text-decoration: none; padding: 8px 0; }
.bar .sections .on { color: var(--vio-d); }
.bar-acts { display: flex; align-items: center; gap: 18px; margin-left: auto; }
@media (max-width: 760px) {
  .bar { gap: 8px 16px; padding-block: 14px 10px; }
  .bar .brand { font-size: clamp(22px, 7.4vw, 32px); white-space: nowrap; }
  .bar .sections { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 20px; }
  .bar .sections a { white-space: nowrap; }
  .bar-acts { gap: 12px; }
}
.strip ul, .bar .sections { scrollbar-width: none; }

/* Wordmark, caps-rule style (HUB_BRAND_WORDMARK_STYLE=caps-rule, apps.hub.brand.wordmark_html): Schibsted Grotesk
   800 in capitals tracked .14em, a violet rule under the name only (not under the trailing tracking), and the domain
   ending small (.3 of the name, never under 10px), weight 500, in a quiet colour (3.5:1 on the paper, 4.6:1 on
   aubergine) on the baseline. The capitals are CSS, so the text keeps its spelling. Sizes come from the container. */
.wm-caps {
  font-family: var(--sans); font-style: normal; font-weight: 800; letter-spacing: .14em; line-height: 1;
  text-transform: uppercase; white-space: nowrap; font-variation-settings: normal;
}
.wm-caps .wm-name {
  display: inline-block; padding-bottom: .2em;
  background: linear-gradient(var(--vio), var(--vio)) 0 100% / calc(100% - .14em) max(2px, .11em) no-repeat;
}
.wm-caps .wm-end { font-size: max(.3em, 10px); font-weight: 500; letter-spacing: .06em; color: #857A99; margin-left: .15em; }
.bar .brand .wm-caps { font-size: 26px; }
.brand-big .wm-caps { font-size: clamp(30px, 4.2vw, 54px); }
.foot .brand .wm-caps { font-size: 22px; }
.foot .bm .wm-caps { font-size: 30px; }
.foot .wm-caps .wm-end { color: #8E80A8; }
@media (max-width: 760px) { .bar .brand .wm-caps { font-size: 20px; } }
@media (max-width: 400px) { .bar .brand .wm-caps { font-size: 17px; } }
.strip ul::-webkit-scrollbar, .bar .sections::-webkit-scrollbar { display: none; }

/* Data plates */

.plate {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 3 / 2; max-width: 100%; padding: 22px 24px; overflow: clip; text-decoration: none;
  container-type: inline-size; --pl-size: clamp(48px, 4.6vw, 66px);
}
/* overflow: clip (not hidden) keeps the 3:2 shape as a minimum: a plate whose text needs more room grows instead of
   cutting the label off. The figure fits the plate's own width (cqi) by its character count (--chars, set by the
   template; bold serif digits run about .56em), never larger than the plate's size for that context (--pl-size). */
/* Plates keep their own text colour in every state. The global a:hover turns links deep violet, which would make
   the text vanish on the dark plates, so each tone restates its colour for hover and focus; the plate signals the
   hover by brightening its ground and a ring instead. */
.plate.wide { aspect-ratio: 16 / 9; }
.aub, a.aub:hover, a.aub:focus-visible { background: var(--aub); color: var(--paper); }
.plum, a.plum:hover, a.plum:focus-visible { background: var(--plum); color: var(--paper); }
.lav, a.lav:hover, a.lav:focus-visible { background: var(--lav); color: var(--ink); }
.vio, a.vio:hover, a.vio:focus-visible { background: var(--vio); color: var(--ink); }
a.plate:hover, a.plate:focus-visible { box-shadow: inset 0 0 0 4px var(--vio); }
a.plate.vio:hover, a.plate.vio:focus-visible { box-shadow: inset 0 0 0 4px var(--ink); }
.pl-k { font: 700 12px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.pl-n {
  font-family: var(--serif); font-weight: 700; line-height: .9; letter-spacing: -.04em;
  font-size: min(var(--pl-size), calc(100cqi / (var(--chars, 6) * .56))); white-space: nowrap;
  font-variation-settings: "opsz" 72; font-variant-numeric: lining-nums;
}
.pl-n.pl-word { font-size: clamp(36px, 3.4vw, 50px); letter-spacing: -.03em; white-space: normal; }
.pl-l { display: block; font: 500 14px/1.35 var(--sans); opacity: .9; max-width: 34ch; position: relative; z-index: 1; }
.pl-k, .pl-n, .pl-row { position: relative; z-index: 1; }
.plate svg { position: absolute; right: 0; bottom: 0; width: 62%; height: 70%; opacity: .95; }
.pl-main { display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; }
/* The company the plate is about, above the figure: bold sans, large enough to read at tile size, in the plate's
   own text colour (so the tone's contrast holds). */
.pl-co { display: block; font: 800 16px/1.2 var(--sans); letter-spacing: .01em; overflow-wrap: anywhere; }
.lead .pl-co, .hero .pl-co { font-size: clamp(18px, 1.8vw, 24px); }
.sec-lead .pl-co { font-size: 18px; }
.pl-row { display: flex; flex-wrap: wrap; gap: 24px 72px; align-items: flex-end; }
.pl-n.small { color: var(--lilac); }

/* Key-figure chips under the lead, each with its provenance box */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 14px; border: 0; border-radius: 999px;
  background: var(--white); color: var(--ink2); font: 500 13px/1.2 var(--sans); cursor: pointer; text-align: left;
}
.chip b { font: 800 15px/1 var(--sans); color: var(--ink); white-space: nowrap; }
.chip b.neg { color: var(--red); }
.chip:hover, .chip[aria-expanded="true"] { background: var(--lav); }
.prov { margin: 12px 0 0; background: var(--ink); color: #E9E0F5; padding: 16px 18px; font: 400 14px/1.6 var(--sans); max-width: 560px; }
.prov strong { color: var(--white); }
.prov a { color: var(--white); }
.prov[hidden] { display: none; }

/* Front page */

.front { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 56px; padding-block: 18px 64px; }
@media (max-width: 1000px) { .front { grid-template-columns: 1fr; } }
.lead .plate { padding: 26px 28px; }
.lead .plate { --pl-size: clamp(84px, 11vw, 168px); }
.lead .pl-n.pl-word { font-size: clamp(56px, 7vw, 104px); }
.lead .pl-l { font-size: 15px; max-width: 40ch; }
.kick { font: 700 13px/1.3 var(--sans); color: var(--vio-d); letter-spacing: .02em; margin: 22px 0 6px; }
.kick a { text-decoration: none; }
.kick a:hover { text-decoration: underline; }
.lead-title {
  font-family: var(--serif); font-weight: 700; font-size: clamp(38px, 4.6vw, 62px); line-height: 1.03;
  letter-spacing: -.03em; margin: 6px 0 14px; text-wrap: balance; font-variation-settings: "opsz" 72;
}
.lead-title a { text-decoration: none; }
.lead .stand { font-family: var(--serif); font-size: clamp(19px, 2vw, 22px); line-height: 1.42; color: var(--ink2); margin: 0 0 16px; max-width: 44ch; }
.lead-empty { padding-top: 24px; }
.by { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font: 500 14px/1.3 var(--sans); color: var(--ink2); }
.by img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.by b { color: var(--ink); }

.river h2, .sec h2, .rel h2, .sec-block h2, .month-h {
  font: 900 26px/1 var(--sans); letter-spacing: -.02em; margin: 0 0 18px;
}
.river h2 span, .sec h2 span, .rel h2 span, .sec-block h2 span, .month-h span, .page-head .dot { color: var(--vio-d); }
.sec h2 a { text-decoration: none; }
.river ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.river li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
.river time { font: 700 13px/1.5 var(--sans); color: var(--vio-d); font-variant-numeric: tabular-nums; white-space: nowrap; }
.river h3 { font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 1.22; margin: 0 0 4px; letter-spacing: -.01em; }
.river h3 a, .tile h3 a, .tile h2 a, .sec-lead h3 a, .sec-list h3 a, .list-item h3 a, .tl h3 a { text-decoration: none; }
.river p { margin: 0; font-size: 13px; color: var(--muted); }

/* Newsletter units */

.letter {
  margin-top: 36px; background: var(--aub); color: #E9E0F5; padding: 26px 24px 24px;
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px;
}
.letter img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.letter h2 { font-family: var(--serif); font-weight: 700; font-size: 28px; line-height: 1; margin: 2px 0 8px; color: var(--white); letter-spacing: -.02em; }
.letter p { margin: 0 0 14px; font-size: 15px; line-height: 1.45; }
.letter .letter-sub { margin: 0 0 6px; font-size: 13px; color: #BBADD2; }
.letter-page { margin-top: 0; }

.sub-form { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
@media (max-width: 420px) { .sub-form { grid-template-columns: 1fr; } }
.sub-form input[type=email] {
  min-height: 46px; border: 0; border-radius: 999px; padding: 0 18px; min-width: 0;
  font: 400 16px var(--sans); color: var(--ink); background: var(--white);
}
.sub-form input[type=email]::placeholder { color: var(--muted); }
.sub-form small { grid-column: 1 / -1; font-size: 12px; line-height: 1.45; color: #BBADD2; }

.inl {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px;
  background: var(--aub); color: #E9E0F5; padding: 24px 26px; margin: 2.4em 0; font-family: var(--sans);
}
.inl img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.inl .inl-h { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1.15; color: var(--white); margin: 0 0 6px; letter-spacing: -.01em; }
.inl p { margin: 0 0 14px; font-size: 15px; line-height: 1.45; }

/* Tiles and section blocks */

.row4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; padding-block: 8px 72px; }
@media (max-width: 1000px) { .row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .row4 { grid-template-columns: 1fr; } }
/* Cards in one row share their row tracks (subgrid): plate, kicker, headline, perex and date each start on the
   same line across the row, whatever the length of the headline or the perex. Without subgrid support the card
   simply stacks its parts as before. */
:is(.row4, .rel-g, .arts, .grid3) > .tile {
  display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; align-content: start;
  grid-template-columns: minmax(0, 1fr);
}
.tile .plate { padding: 18px; }
.tile h3, .tile h2 {
  font-family: var(--serif); font-weight: 700; font-size: 23px; line-height: 1.14; margin: 14px 0 8px;
  letter-spacing: -.015em; text-wrap: balance;
}
.tile p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink2); }
/* Section and industry above a tile's headline (owner decision 2026-10-19); violet ink on paper is 7:1. */
.tile .tile-kick { margin: 14px 0 -6px; font: 700 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--vio-d); }
.tile-kick a { text-decoration: none; }
.tile-kick a:hover, .tile-kick a:focus-visible { text-decoration: underline; }
.tile .meta { margin-top: 10px; font-size: 13px; color: var(--muted); }

.sec { padding-block: 0 72px; }
.sec-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
@media (max-width: 1000px) { .sec-grid { grid-template-columns: 1fr; } }
.sec-lead .plate { --pl-size: clamp(64px, 7vw, 96px); }
.sec-lead h3 { font-family: var(--serif); font-weight: 700; font-size: 32px; line-height: 1.08; margin: 16px 0 10px; letter-spacing: -.02em; }
.sec-lead p { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.45; color: var(--ink2); }
.sec-list { display: grid; gap: 26px; align-content: start; }
.sec-list h3 { font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.2; margin: 0 0 6px; }
.sec-list p { margin: 0; font-size: 13px; color: var(--muted); }

/* "Published by Symfio" house unit */

.house-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; padding-block: 56px; }
@media (max-width: 900px) { .house-in { grid-template-columns: 1fr; } }
.house-home .house-in { padding-block: 72px; }
.house-article, .house-company { background: var(--lav); }
.house-company { margin-top: 72px; }
.house-tag { font: 700 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); margin: 0 0 14px; }
.house h2 {
  font-family: var(--serif); font-weight: 700; font-size: clamp(32px, 4vw, 54px); line-height: 1.03;
  letter-spacing: -.03em; margin: 0 0 14px; max-width: 22ch; text-wrap: balance;
}
.house .q { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--vio-d); margin: 0; }
.house .acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* Footer */

.foot { background: var(--aub); color: var(--soft); font-size: 14px; }
.foot a { color: #E9E0F5; text-decoration: none; }
.foot a:hover { color: var(--white); text-decoration: underline; }
.foot .brand { color: var(--white); font-family: var(--serif); font-weight: 800; font-size: 32px; letter-spacing: -.04em; line-height: 1; }
.foot .brand em, .foot .bm em { color: var(--lilac); }
.foot-row { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: center; padding-block: 30px 10px; }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-note { margin: 0; padding-block: 10px 30px; font-size: 13px; color: #A898C2; max-width: 90ch; }
.foot-big .w { padding-block: 52px 36px; }
.foot-g { display: grid; grid-template-columns: 2fr repeat(5, minmax(0, 1fr)); gap: 36px; }
@media (max-width: 900px) { .foot-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .foot-g { grid-template-columns: 1fr; } }
.foot .bm { font-family: var(--serif); font-weight: 800; font-size: clamp(28px, 8.6vw, 44px); white-space: nowrap; color: var(--white); letter-spacing: -.04em; margin: 0 0 10px; line-height: 1; }
.foot-about { margin: 0; max-width: 42ch; }
.foot-big h2 { font: 800 13px/1 var(--sans); color: var(--white); margin: 4px 0 14px; }
.foot-big ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-big .foot-note { margin-top: 40px; padding: 0; }

/* Article */

.head { padding-block: 40px 0; }
.head-in { max-width: 900px; }
.head .kick { font-size: 14px; margin: 0 0 18px; }
.head h1 {
  font-family: var(--serif); font-weight: 700; font-size: clamp(42px, 5.6vw, 76px); line-height: 1;
  letter-spacing: -.035em; margin: 0 0 22px; text-wrap: balance; font-variation-settings: "opsz" 72;
}
.head .stand { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 25px); line-height: 1.4; color: var(--ink2); margin: 0 0 28px; max-width: 42ch; }
.head .by { gap: 14px 24px; }
.who { display: flex; align-items: center; gap: 12px; font: 500 14px/1.35 var(--sans); color: var(--ink2); }
.who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.who p { margin: 0; }
.who b { display: block; color: var(--ink); font-size: 15px; }
.who b a { text-decoration: none; }
.who b a:hover { text-decoration: underline; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; }
.head .ai { font: 400 14px/1.5 var(--sans); color: var(--muted); margin: 16px 0 0; }
.hero { margin-block: 40px 0; }
.hero .plate { aspect-ratio: 21 / 8; min-height: 260px; padding: 32px 36px; container-type: inline-size; }
.hero .pl-k { font-size: 13px; }
/* The figures scale with the plate as well as the window, so a long value ("96,2 mld. USD") fits a phone. */
.hero .pl-n { font-size: max(36px, min(clamp(72px, 9vw, 140px), 19cqi)); white-space: normal; line-height: .85; letter-spacing: -.045em; overflow-wrap: anywhere; }
.hero .pl-l { font-size: 15px; max-width: 30ch; margin-top: 8px; }
.hero .pl-n.small { font-size: max(28px, min(clamp(52px, 6vw, 88px), 14cqi)); }
.hero svg { width: 48%; height: 100%; opacity: .9; }
@media (max-width: 760px) { .hero .plate { aspect-ratio: auto; min-height: 220px; padding: 22px; } }

.body { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 680px) minmax(0, 1fr); gap: 56px; padding-block: 52px 72px; }
.body.no-rail { grid-template-columns: minmax(0, 680px) minmax(0, 1fr); }
@media (max-width: 1100px) {
  .body { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); }
  .body .rail { grid-column: 1 / -1; }
}
@media (max-width: 760px) { .body, .body.no-rail { grid-template-columns: 1fr; } }

.rail-h { font: 900 15px/1 var(--sans); margin: 0 0 16px; }
.facts { display: grid; gap: 22px; margin: 18px 0 14px; }
.facts div { margin: 0; }
.fact-l { font-size: 13px; color: var(--ink2); margin: 0 0 4px; }
.facts > div { container-type: inline-size; min-width: 0; }
.fact-v { font-family: var(--serif); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -.03em; margin: 0; overflow-wrap: anywhere; font-variant-numeric: lining-nums; }
@supports (font-size: 1cqi) { .fact-v { font-size: clamp(22px, 13cqi, 34px); } }
.fact-v.neg { color: var(--red); }
.fact-s { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.fact-spark { margin: 10px 0 0; }
.fact-spark svg { display: block; width: 100%; max-width: 220px; height: auto; }
.toc { margin-top: 40px; }
.toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; font: 600 15px/1.35 var(--sans); }
.toc a { text-decoration: none; color: var(--ink2); }
.toc a:hover { color: var(--vio-d); }

.finding p { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.28; letter-spacing: -.015em; margin: 0 0 36px; color: var(--ink); }
.prose { font-family: var(--serif); font-size: clamp(19px, 1.8vw, 21px); line-height: 1.66; font-variation-settings: "opsz" 16; }
.prose p { margin: 0 0 1.15em; }
.prose h2 { font: 900 27px/1.15 var(--sans); letter-spacing: -.02em; margin: 1.9em 0 .55em; }
.prose h3 { font: 800 20px/1.25 var(--sans); margin: 1.6em 0 .5em; }
.prose h4 { font: 800 17px/1.3 var(--sans); margin: 1.4em 0 .4em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.15em; }
.prose li { margin-bottom: .35em; }
.prose blockquote { margin: 1.4em 0; padding-left: 20px; box-shadow: inset 3px 0 0 var(--vio); color: var(--ink2); font-style: italic; }
.prose a { color: var(--vio-d); }
.prose strong { font-weight: 700; }
.table-scroll { overflow-x: auto; margin: 1.6em 0 2em; }
.prose table { border-collapse: collapse; width: 100%; font: 400 16px/1.4 var(--sans); font-variant-numeric: tabular-nums; }
.prose th, .prose td { text-align: right; padding: 12px 0 12px 20px; }
.prose th:first-child, .prose td:first-child { text-align: left; padding-left: 12px; }
.prose thead th { font: 800 13px/1.2 var(--sans); color: var(--muted); }
.prose tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, .55); }
.chart { margin: 2.2em 0; }
.chart svg { display: block; width: 100%; height: auto; background: var(--white); }
.chart figcaption, .cap { font: 400 13px/1.5 var(--sans); color: var(--muted); margin: 10px 0 0; }

.after { font-family: var(--sans); margin-top: 48px; display: grid; gap: 36px; }
.after h2 { font: 900 15px/1 var(--sans); margin: 0 0 12px; }
.sources ol { margin: 0; padding-left: 22px; font-size: 15px; line-height: 1.55; display: grid; gap: 8px; color: var(--ink2); }
.corr p, .corr li { font-size: 15px; color: var(--ink2); }
.corr ul { margin: 0 0 12px; padding-left: 20px; }
.corr p { margin: 0 0 12px; }
.companies { display: grid; gap: 12px; }
.co { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: rgba(255, 255, 255, .6); padding: 22px 24px; }
.co .nm { font-family: var(--serif); font-weight: 700; font-size: 26px; letter-spacing: -.02em; margin: 0 0 4px; }
.co .nm a { text-decoration: none; }
.co .id { font-size: 13px; color: var(--muted); margin: 0; }
.co .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.other-lang { margin: 0; font-weight: 700; }

.side { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink2); display: grid; gap: 36px; align-content: start; padding-top: 90px; }
.side p { margin: 0; }
.side b { display: block; font: 900 14px/1.2 var(--sans); color: var(--ink); margin-bottom: 6px; }
@media (max-width: 1100px) { .side { padding-top: 0; } }

.author-box {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center;
  font-family: var(--sans);
}
.author-portrait {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
}
.author-text p { margin: 0; }
.author-name { font: 800 16px/1.3 var(--sans); }
.author-name a { text-decoration: none; }
.author-name a:hover { text-decoration: underline; }
.author-disclosure {
  font-size: 14px; color: var(--ink2); margin-top: 4px;
}

.rel { padding-block: 64px 80px; }
.rel-g, .arts, .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
@media (max-width: 900px) { .rel-g, .arts, .grid3 { grid-template-columns: 1fr; } }
@media (min-width: 561px) and (max-width: 900px) { .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Company */

.co-hero { background: var(--aub); color: #E9E0F5; }
.co-hero-in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px 64px; padding-block: 52px 56px; align-items: end; }
@media (max-width: 1000px) { .co-hero-in { grid-template-columns: 1fr; } }
.crumb { font: 700 14px/1.3 var(--sans); color: var(--lilac); margin: 0 0 18px; }
.co-hero h1 {
  font-family: var(--serif); font-weight: 700; font-size: clamp(46px, 6vw, 84px); line-height: .98;
  letter-spacing: -.04em; margin: 0 0 18px; color: var(--white); font-variation-settings: "opsz" 72;
}
.ids { display: flex; flex-wrap: wrap; gap: 8px 24px; font: 500 15px/1.4 var(--sans); color: var(--soft); margin: 0; }
.ids b { color: var(--white); font-weight: 700; }
.follow { background: rgba(255, 255, 255, .06); padding: 24px; scroll-margin-top: 16px; }
.follow h2 { font-family: var(--serif); font-weight: 700; font-size: 26px; color: var(--white); margin: 0 0 8px; letter-spacing: -.02em; }
.follow p { margin: 0 0 14px; font-size: 15px; line-height: 1.45; }
.follow .sub-form small { margin-top: 2px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 30px; padding-block: 22px 0; font: 700 15px/1 var(--sans); }
.tabs a { text-decoration: none; padding: 8px 0; color: var(--ink2); }
.tabs a:hover { color: var(--vio-d); }
.sec-block { padding-block: 48px 0; }
.sec-block h2 { margin-bottom: 8px; }
.lede { margin: 0 0 28px; font-size: 15px; color: var(--ink2); max-width: 70ch; }
/* Company key figures: a grid of cells, label above the value. Long values ("96,2 mld. USD") are joined by no-break
   spaces, so the value scales with its own cell (container query units) instead of running into the next one. */
.numbers {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 32px 40px; margin: 0;
}
.numbers .kpi { container-type: inline-size; min-width: 0; padding-top: 4px; }
.numbers dt { font: 600 14px/1.3 var(--sans); color: var(--ink2); margin: 0 0 8px; }
.numbers dd {
  margin: 0; font-family: var(--serif); font-weight: 700; font-size: 34px; line-height: 1.02;
  letter-spacing: -.03em; font-variation-settings: "opsz" 72; font-variant-numeric: lining-nums;
  overflow-wrap: anywhere;
}
@supports (font-size: 1cqi) { .numbers dd { font-size: clamp(22px, 13cqi, 46px); } }
.numbers dd.neg { color: var(--red); }
.note { font-size: 13px; color: var(--muted); margin: 24px 0 0; }
.two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; }
@media (max-width: 1000px) { .two { grid-template-columns: 1fr; gap: 40px; } }
.sub-h { font: 800 15px/1.2 var(--sans); margin: 0 0 14px; }
.tree-text { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tree-text .node {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 20px; background: rgba(255, 255, 255, .65);
}
.tree-text .d1 { margin-left: 28px; }
.tree-text .d2 { margin-left: 56px; }
.tree-text .d3, .tree-text .d4, .tree-text .d5 { margin-left: 84px; }
@media (max-width: 560px) { .tree-text .d1 { margin-left: 14px; } .tree-text .d2 { margin-left: 28px; } .tree-text .d3, .tree-text .d4, .tree-text .d5 { margin-left: 42px; } }
.node-name { font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.node-name a { text-decoration: none; }
.node .pct { font: 800 18px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--vio-d); white-space: nowrap; }
.node.self { background: var(--aub); color: var(--white); }
.node.self .pct { color: var(--lilac); }
.tree-chart { margin-top: 18px; }
.tree-chart summary { cursor: pointer; font: 700 14px/1.4 var(--sans); color: var(--vio-d); }
.tree-scroll { overflow-x: auto; margin-top: 12px; background: var(--white); padding: 12px; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.people li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.people b { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.people span { display: block; font-size: 14px; color: var(--ink2); }
.people .since { font: 600 13px/1 var(--sans); color: var(--muted); white-space: nowrap; }
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.tl li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; }
@media (max-width: 560px) { .tl li { grid-template-columns: 1fr; gap: 4px; } }
.tl time { font: 800 14px/1.5 var(--sans); color: var(--vio-d); }
.tl h3 { font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.25; margin: 0; }
.tag { display: inline-block; font: 700 12px/1 var(--sans); padding: 5px 10px; border-radius: 999px; background: var(--lav); color: var(--ink); vertical-align: 3px; }
.srcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 36px; font-size: 14px; color: var(--ink2); }
@media (max-width: 900px) { .srcs { grid-template-columns: 1fr; } }
.srcs b { display: block; font: 800 15px/1.3 var(--sans); color: var(--ink); margin-bottom: 4px; }
.srcs p { margin: 0; }

/* Plain pages: archive, search, section, about, forms */

.page-body { padding-block: 40px 80px; }
.page-body.narrow { max-width: calc(760px + 80px); }
.page-head { margin-bottom: 36px; max-width: 900px; }
.page-head .kick { margin: 0 0 14px; font-size: 14px; }
.page-head h1 {
  font-family: var(--serif); font-weight: 700; font-size: clamp(40px, 5vw, 68px); line-height: 1;
  letter-spacing: -.035em; margin: 0 0 18px; font-variation-settings: "opsz" 72; text-wrap: balance;
}
.page-head .stand { font-family: var(--serif); font-size: 23px; line-height: 1.42; color: var(--ink2); margin: 0; max-width: 46ch; }
.page-head .meta { color: var(--ink2); }
.about-head { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 560px) { .about-head { grid-template-columns: 1fr; } }
.about-portrait { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.narrow-prose { max-width: 680px; }
.narrow-prose section { scroll-margin-top: 16px; }
.empty { font-family: var(--serif); font-size: 22px; color: var(--ink2); }
.month { margin-bottom: 48px; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.list-item { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; }
@media (max-width: 560px) { .list-item { grid-template-columns: 1fr; gap: 4px; } }
.list-item time { font: 800 14px/1.6 var(--sans); color: var(--vio-d); }
.list-item h3 { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1.18; margin: 0 0 6px; letter-spacing: -.015em; }
.list-item p { margin: 0; color: var(--ink2); }
.list-kick { font: 700 12px/1.2 var(--sans) !important; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px !important; }
.list-kick a { text-decoration: none; color: var(--muted); }

.filters { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: end; margin-bottom: 48px; }
.field { display: grid; gap: 6px; min-width: 0; }
/* A long option (a company or industry name) must not widen the filter row past the screen. */
.filters .field { max-width: 100%; }
.filters .field select { width: 100%; text-overflow: ellipsis; }
.field label, .search-form label { font: 700 13px/1.2 var(--sans); color: var(--ink2); }
.field select, .field input, .form textarea, .form input[type=email], .form input[type=text], .search-row input {
  min-height: 44px; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 0; background: var(--white);
  color: var(--ink); font: 400 16px var(--sans); max-width: 100%;
}
.form textarea { width: 100%; min-height: 10em; }
.form .field { margin-bottom: 20px; }
.field.actions { grid-auto-flow: column; align-items: center; gap: 16px; }
.field-invalid input, .field-invalid select, .field-invalid textarea { border-color: var(--red); }
.errorlist { list-style: none; margin: 4px 0 0; padding: 0; color: var(--red); font-weight: 700; font-size: 14px; }
.help { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }
.search-form { margin-bottom: 48px; max-width: 680px; }
.search-row { display: flex; gap: 8px; margin-top: 6px; }
.search-row input { flex: 1 1 auto; min-width: 0; }
.notice { background: var(--white); padding: 18px 22px; margin: 0 0 28px; box-shadow: inset 4px 0 0 var(--vio); }
.notice p:last-child { margin-bottom: 0; }
.notice-error { box-shadow: inset 4px 0 0 var(--red); }
.link-row { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 48px; }
.pagination .meta { margin: 0; color: var(--muted); }

.sub-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .sub-page { grid-template-columns: 1fr; } }
.sub-notes { font-size: 19px; }
.sub-notes h2 { margin-top: 0; }
.check-list { font-family: var(--serif); font-size: 21px; line-height: 1.5; margin: 0 0 24px; padding-left: 1.2em; }
.manage-block { padding-block: 0 36px; }
.manage-block h2 { font: 900 20px/1.2 var(--sans); margin: 0 0 10px; }
.manage-block form { margin: 0; }
.manage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.manage-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; background: rgba(255, 255, 255, .6); padding: 12px 16px; }
.delete-form p { margin: 12px 0; }
.delete-form input[type=checkbox] { width: 20px; height: 20px; vertical-align: -4px; accent-color: var(--red); }

@media print {
  .strip, .bar, .masthead .right, .nav, .letter, .inl, .house, .tools, .foot, .side, .rel, .chips { display: none; }
  body { background: var(--white); }
}

/* Countries overview: regions in columns, each a plain list of countries with their article count. */
.regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 32px 48px; margin-top: 8px; }
.region h2 { font: 700 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--vio-d); margin: 0 0 12px; }
.region ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.region a { font: 700 22px/1.2 var(--serif); text-decoration: none; }
.region a:hover, .region a:focus-visible { text-decoration: underline; }
.region .count { font: 400 14px/1 var(--sans); color: var(--muted); margin-left: 6px; }

/* Shorts (Krátce / In brief, docs/market-coverage.md section 7): compact cards without plates, and a narrow page.
   The perex shows two lines on the cards; the page shows it whole. */
.briefs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 40px; }
@media (max-width: 1000px) { .briefs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .briefs { grid-template-columns: 1fr; gap: 28px; } }
.brief-kick { margin: 0 0 6px; font: 700 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--vio-d); }
.brief-kick a { text-decoration: none; }
.brief-kick a:hover, .brief-kick a:focus-visible { text-decoration: underline; }
.brief h2, .brief h3 { font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.16; margin: 0 0 6px; letter-spacing: -.015em; text-wrap: balance; }
.brief h2 a, .brief h3 a { text-decoration: none; }
.brief h2 a:hover, .brief h3 a:hover { text-decoration: underline; }
.brief-co { margin: 0 0 6px; font: 600 13px/1.4 var(--sans); color: var(--ink2); }
.brief-co b, .short-by b { font-weight: 800; color: var(--ink); white-space: nowrap; }
.brief-co b.neg, .short-by b.neg { color: var(--red); }
.brief-perex {
  margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.brief .meta { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.short { max-width: calc(760px + 80px); padding-block: 40px 72px; }
.short-head h1 {
  font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04;
  letter-spacing: -.03em; margin: 0 0 18px; text-wrap: balance;
}
.short-head .kick { margin: 0 0 16px; font-size: 14px; }
.short-head .stand { font-family: var(--serif); font-size: clamp(19px, 2.2vw, 23px); line-height: 1.4; color: var(--ink2); margin: 0 0 18px; }
.short-by { font: 500 14px/1.5 var(--sans); color: var(--ink2); margin: 0 0 28px; }
.short-by a { text-decoration: none; font-weight: 700; }
.short-by a:hover { text-decoration: underline; }
.short-full { margin: 28px 0 0; }
.short .after { margin-top: 36px; }
.short .after .ai { font: 400 14px/1.5 var(--sans); color: var(--muted); }

/* Shorts ribbon under the front section (owner decision 2026-10-21). Without the script, and for readers who ask for
   reduced motion, it is a row of cards that scrolls sideways. hub.js doubles the lane and moves it slowly; it stops on
   hover and keyboard focus, and the pause button stops it for good (WCAG 2.2.2). */
.ribbon { background: var(--aub); color: #E9E0F5; padding-block: 18px 22px; margin-block: 8px 40px; }
.ribbon-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.ribbon-head h2 { font-family: var(--serif); font-weight: 700; font-size: 26px; letter-spacing: -.015em; margin: 0; }
.ribbon-head h2 a { color: var(--paper); text-decoration: none; }
.ribbon-head h2 a:hover, .ribbon-head h2 a:focus-visible { text-decoration: underline; }
.ribbon-head h2 span { color: var(--vio); }
.ribbon-all { margin-left: auto; font: 700 13px/1.2 var(--sans); color: var(--paper); }
.ribbon-toggle {
  font: 700 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--paper);
  background: transparent; border: 1px solid rgba(233, 224, 245, .5); padding: 7px 12px; cursor: pointer;
}
.ribbon-toggle:hover, .ribbon-toggle:focus-visible { border-color: var(--paper); }
.ribbon-view { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; margin-top: 14px; }
.ribbon-lane { display: flex; list-style: none; margin: 0; padding: 0 0 6px max(40px, calc((100vw - 1320px) / 2 + 40px)); }
.rb {
  flex: 0 0 auto; width: 300px; padding: 4px 22px 4px 0; margin-right: 22px;
  border-right: 1px solid rgba(233, 224, 245, .22);
}
.rb-kick { margin: 0 0 6px; font: 700 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--vio); }
.rb h3 { font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 1.22; margin: 0 0 8px; text-wrap: balance; }
.rb h3 a { color: var(--paper); text-decoration: none; }
.rb h3 a:hover, .rb h3 a:focus-visible { text-decoration: underline; }
.rb-co { margin: 0; font: 600 13px/1.4 var(--sans); color: #CFC2E3; }
.rb-co b { font-weight: 800; color: var(--paper); white-space: nowrap; }
.rb-co b.neg { color: #FFB4B4; }
/* Moving: the script doubles the lane (the copy is hidden from assistive technology and the tab order) and sets the
   duration from the lane's width, so the speed stays the same whatever the number of shorts. */
.ribbon.is-moving .ribbon-view { overflow: hidden; }
.ribbon.is-moving .ribbon-track { display: flex; width: max-content; animation: ribbon-move var(--ribbon-duration, 60s) linear infinite; }
.ribbon.is-moving .ribbon-lane { padding-left: 0; }
.ribbon.is-moving .ribbon-view:hover .ribbon-track,
.ribbon.is-moving .ribbon-view:focus-within .ribbon-track,
.ribbon.is-paused .ribbon-track { animation-play-state: paused; }
@keyframes ribbon-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ribbon .ribbon-track { animation: none !important; } }
@media (max-width: 560px) {
  .ribbon-lane { padding-left: 16px; }
  .rb { width: 250px; }
}
.more-all { margin: -40px auto 64px; }
.more-all a { font: 700 15px/1.3 var(--sans); }
.more-all a::after { content: " \2192"; }

/* Editor line under the byline, LinkedIn icon, transparency pages (docs/seo.md) */
.editor-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; font: 500 14px/1.4 var(--sans); color: var(--ink2); }
.editor-line a { color: var(--ink); font-weight: 700; text-decoration: none; }
.editor-line a:hover { text-decoration: underline; }
.short-head .editor-line { margin: -16px 0 24px; }
/* Conflict-of-interest note (apps.hub.disclosures) */
.coi { margin: 12px 0 0; padding-left: 10px; border-left: 3px solid var(--vio); font: 400 14px/1.5 var(--sans); color: var(--ink2); }
.coi b { color: var(--ink); }
.short-head .coi { margin: -12px 0 24px; }
.co-hero .coi { margin-top: 16px; color: #E9E0F5; }
.co-hero .coi b { color: var(--white); }
a.social { display: inline-flex; width: 18px; height: 18px; color: var(--ink2); line-height: 0; }
a.social:hover, a.social:focus-visible { color: var(--vio-d); }
a.social svg { width: 18px; height: 18px; }
.person-head { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 28px; align-items: start; }
.person-head.no-photo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 560px) { .person-head { grid-template-columns: 1fr; } }
.person-photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; aspect-ratio: 1 / 1; }
.person-links { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font: 500 15px/1.4 var(--sans); }
.facts-list { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; }
.facts-list dt { font-weight: 700; }
.facts-list dd { margin: 0; }
@media (max-width: 560px) { .facts-list { grid-template-columns: 1fr; } .facts-list dd { margin-bottom: 8px; } }
.corr-list { list-style: none; margin: 0; padding: 0; }
.corr-list li { padding: 14px 0; border-top: 1px solid var(--lav); }
.corr-list time { display: block; font: 600 13px/1.4 var(--sans); color: var(--muted); }

/* Consent bar (apps.hub.tracking): only while Google Tag Manager is on and the reader has not chosen yet. */
.consent { position: fixed; inset: auto 0 0 0; z-index: 50; background: var(--aub); color: #E9E0F5; box-shadow: 0 -6px 24px rgba(0, 0, 0, .18); }
.consent[hidden] { display: none; }
.consent-row { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; }
.consent-text { flex: 1 1 420px; min-width: 0; }
.consent h2 { margin: 0 0 6px; font: 700 15px/1.3 var(--sans); color: #fff; }
.consent p { margin: 0; font: 400 14px/1.5 var(--sans); }
.consent-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.consent .btn { background: var(--vio); color: var(--ink); }
.consent .btn:hover { background: #fff; color: var(--ink); }
.consent .btn.light { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #E9E0F5; }
.consent .btn.light:hover { background: #fff; color: var(--ink); }
.link-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }