/* ============================================================
   Trading Technology — design concept stylesheet
   Palette and logo mark carried over from the live site.
   One accent (brand green), one paid colour (amber), nothing else.
   ============================================================ */

/* ---------- tokens : light (default, un-stamped) ---------- */
:root {
  --ink:        #15101F;
  --ink-2:      #4C4459;
  --ink-3:      #797186;
  --ink-inv:    #FFFFFF;

  --paper:      #FFFFFF;
  --surface:    #F4F2F8;
  --surface-2:  #EAE7F1;
  --band:       #15101F;

  --rule:       #E2DFEA;
  --rule-soft:  #EFEDF4;
  --rule-firm:  #CBC5D8;

  --brand:      #00893D;   /* passes on paper — links, rules, current state */
  --brand-hi:   #00C758;   /* marks and fills on dark */
  --brand-on:   #FFFFFF;

  --up:         #00893D;
  --down:       #C4283C;

  --paid:       #B4740A;   /* paid content only — never editorial */
  --paid-soft:  #FBF2DF;
  --paid-rule:  #E7C37A;

  --focus:      #3C3D9E;
  --shadow-lift: 0 1px 2px rgba(21,16,31,.05), 0 8px 24px -12px rgba(21,16,31,.18);

  --f-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-read: "Spectral", Georgia, "Times New Roman", serif;
  --f-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --wrap: 1300px;
  --gut: clamp(16px, 3.5vw, 44px);
}

/* ---------- tokens : dark (system preference) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:        #EEEBF5;
    --ink-2:      #A79FB8;
    --ink-3:      #7C7489;
    --ink-inv:    #100C1A;

    --paper:      #100C1A;
    --surface:    #181227;
    --surface-2:  #221A35;
    --band:       #070510;

    --rule:       #2C2440;
    --rule-soft:  #221B33;
    --rule-firm:  #453A5E;

    --brand:      #2BD96F;
    --brand-hi:   #00C758;
    --brand-on:   #06210F;

    --up:         #2BD96F;
    --down:       #F2647A;

    --paid:       #E3AE4E;
    --paid-soft:  #251B0F;
    --paid-rule:  #6B5324;

    --focus:      #8C8DF0;
    --shadow-lift: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  }
}

/* ---------- tokens : dark (explicit stamp) ---------- */
:root[data-theme="dark"] {
  --ink:        #EEEBF5;
  --ink-2:      #A79FB8;
  --ink-3:      #7C7489;
  --ink-inv:    #100C1A;

  --paper:      #100C1A;
  --surface:    #181227;
  --surface-2:  #221A35;
  --band:       #070510;

  --rule:       #2C2440;
  --rule-soft:  #221B33;
  --rule-firm:  #453A5E;

  --brand:      #2BD96F;
  --brand-hi:   #00C758;
  --brand-on:   #06210F;

  --up:         #2BD96F;
  --down:       #F2647A;

  --paid:       #E3AE4E;
  --paid-soft:  #251B0F;
  --paid-rule:  #6B5324;

  --focus:      #8C8DF0;
  --shadow-lift: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-read);
  font-size: 17px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

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

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-weight: 700;
  font-stretch: 84%;
  letter-spacing: -0.015em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- shared small parts ---------- */
.label {
  font-family: var(--f-head); font-stretch: 100%; font-weight: 600;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}

.num { font-family: var(--f-data); font-variant-numeric: tabular-nums; }

/* section kicker above a headline — typographic, not colour-coded */
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-head); font-stretch: 100%; font-weight: 600;
  font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
}
.kicker::before { content: ""; width: 13px; height: 2px; background: var(--ink-3); flex: none; }
a.kicker:hover { color: var(--brand); }
a.kicker:hover::before { background: var(--brand); }
.kicker--paid { color: var(--paid); }
.kicker--paid::before { background: var(--paid); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-head); font-stretch: 100%; font-weight: 600;
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 3px 7px; border: 1px solid var(--rule-firm); color: var(--ink-3);
  border-radius: 2px; white-space: nowrap;
}
.chip--paid { color: var(--paid); border-color: var(--paid-rule); background: var(--paid-soft); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-head); font-stretch: 100%; font-weight: 600;
  font-size: 13px; letter-spacing: 0.02em;
  padding: 11px 18px; border-radius: 2px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--ink-inv); text-decoration: none;
  cursor: pointer; transition: opacity .15s ease, background .15s ease;
}
.btn:hover { opacity: .84; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-firm); }
.btn--ghost:hover { background: var(--surface); opacity: 1; }
.btn--brand { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }

/* image slot — stands in for commissioned art */
.media {
  display: block; position: relative; overflow: hidden;
  border: 1px solid var(--rule); background: var(--surface);
  background-image:
    linear-gradient(150deg, var(--surface-2) 0%, var(--surface) 58%),
    repeating-linear-gradient(0deg, var(--rule-soft) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, var(--rule-soft) 0 1px, transparent 1px 22px);
}
.media--wide { aspect-ratio: 16 / 9; }
.media--sq { aspect-ratio: 1; }

/* ============================================================
   Prototype chrome — not part of the production site
   ============================================================ */
.proto {
  background: #15101F; color: #EDEAF4;
  border-bottom: 1px solid rgba(237, 234, 244, .14);
  font-family: var(--f-data); font-size: 11.5px; position: relative; z-index: 60;
}
.proto__in {
  max-width: var(--wrap); margin-inline: auto; padding: 0 var(--gut);
  display: flex; align-items: center; gap: 16px; min-height: 38px; flex-wrap: wrap;
}
.proto__mark { color: #00C758; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.proto__note { color: #9A92AB; }
.proto__nav { display: flex; gap: 2px; margin-inline-start: auto; flex-wrap: wrap; }
.proto__nav a { color: #9A92AB; text-decoration: none; padding: 5px 10px; border-radius: 2px; }
.proto__nav a:hover { color: #EDEAF4; background: rgba(237, 234, 244, .1); }
.proto__nav a[aria-current="page"] { color: #0B0813; background: #00C758; }
.proto__theme {
  background: none; border: 1px solid rgba(237, 234, 244, .22);
  color: #9A92AB; font: inherit; padding: 4px 10px; border-radius: 2px; cursor: pointer;
}
.proto__theme:hover { color: #EDEAF4; }

/* ============================================================
   Masthead
   ============================================================ */
.mast { border-bottom: 1px solid var(--rule); background: var(--paper); }
.mast__top { display: flex; align-items: center; gap: 20px; padding-block: 18px 14px; }
.mast__logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.mast__logo svg { width: 34px; height: 34px; flex: none; }
.mast__name {
  font-family: var(--f-head); font-stretch: 88%; font-weight: 800;
  font-size: clamp(19px, 2.4vw, 25px); letter-spacing: -0.025em; line-height: 1;
  text-transform: uppercase; color: var(--ink);
}
.mast__name small {
  display: block; font-size: 9.5px; font-weight: 600; font-stretch: 100%;
  letter-spacing: .18em; color: var(--ink-3); margin-top: 4px;
}
.mast__meta { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mast__clock {
  font-family: var(--f-data); font-size: 11.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; text-align: right; line-height: 1.45;
}
.mast__clock b { color: var(--ink); font-weight: 600; }

.mast__nav { border-top: 1px solid var(--rule-soft); }
.mast__nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
}
.mast__nav ul::-webkit-scrollbar { display: none; }
.mast__nav a {
  display: block; text-decoration: none; white-space: nowrap;
  font-family: var(--f-head); font-stretch: 100%; font-weight: 600;
  font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-2); padding: 12px 15px 11px; border-bottom: 3px solid transparent;
}
.mast__nav li:first-child a { padding-inline-start: 0; }
.mast__nav a:hover,
.mast__nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); }
.mast__nav .sep { width: 1px; background: var(--rule); margin: 12px 14px; flex: none; }

/* ============================================================
   Ticker strip
   ============================================================ */
.ticker { background: var(--band); color: #EDEAF4; }
.ticker__in {
  max-width: var(--wrap); margin-inline: auto; padding: 0 var(--gut);
  display: flex; align-items: center; gap: 0; min-height: 44px; overflow-x: auto; scrollbar-width: none;
}
.ticker__in::-webkit-scrollbar { display: none; }
.tick {
  display: flex; align-items: baseline; gap: 9px; white-space: nowrap;
  padding: 6px 16px; border-inline-start: 1px solid rgba(237, 234, 244, .13);
}
.tick:first-child { border-inline-start: 0; padding-inline-start: 0; }
.tick__sym {
  font-family: var(--f-head); font-stretch: 100%; font-weight: 600;
  font-size: 11px; letter-spacing: .06em; color: #C8C2D4;
}
.tick__px { font-family: var(--f-data); font-size: 12.5px; font-variant-numeric: tabular-nums; color: #EDEAF4; }
.tick__ch { font-family: var(--f-data); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.tick[data-dir="up"]   .tick__ch { color: #6FE49C; }
.tick[data-dir="down"] .tick__ch { color: #FF8FA0; }
.ticker__status {
  margin-inline-start: auto; padding-inline-start: 22px; white-space: nowrap;
  font-family: var(--f-data); font-size: 11.5px; color: #9A92AB;
}
.ticker__status b { color: #6FE49C; font-weight: 500; }

/* ============================================================
   Front page
   ============================================================ */
.section { padding-block: clamp(30px, 4.5vw, 52px); }
.section + .section { border-top: 1px solid var(--rule); }

.shead {
  display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
  border-bottom: 2px solid var(--ink); padding-bottom: 9px; flex-wrap: wrap;
}
.shead h2 {
  font-size: clamp(18px, 2.1vw, 23px); font-stretch: 90%; letter-spacing: 0;
  text-transform: uppercase;
}
.shead p {
  font-family: var(--f-data); font-size: 11.5px; color: var(--ink-3);
  flex-basis: 100%; line-height: 1.6; margin-top: -2px;
}
.shead__more {
  margin-inline-start: auto; font-family: var(--f-head); font-stretch: 100%;
  font-weight: 600; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none;
}
.shead__more:hover { color: var(--brand); }

.front { display: grid; gap: 30px; padding-block: clamp(26px, 3.4vw, 40px); }
@media (min-width: 900px)  { .front { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.05fr); gap: 0; } }
@media (min-width: 1180px) { .front { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1.1fr) minmax(258px, 0.82fr); } }
@media (min-width: 900px) {
  .front__col + .front__col {
    border-inline-start: 1px solid var(--rule);
    margin-inline-start: clamp(22px, 2.4vw, 34px);
    padding-inline-start: clamp(22px, 2.4vw, 34px);
  }
}

/* lead */
.story--top .media { margin-bottom: 18px; }
.story--top h2 {
  font-size: clamp(29px, 4.4vw, 46px); font-stretch: 78%; letter-spacing: -0.026em;
  line-height: 1.0; margin-block: 11px 13px;
}
.story--top h2 a { text-decoration: none; }
.story--top h2 a:hover { color: var(--brand); }
.story--top .stand { font-size: 18.5px; line-height: 1.52; color: var(--ink-2); max-width: 52ch; }

.byline {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 15px;
  font-family: var(--f-data); font-size: 11.5px; color: var(--ink-3);
}
.byline b { font-weight: 500; color: var(--ink-2); }
.byline span::before { content: "·"; margin-inline-end: 9px; color: var(--rule-firm); }

/* secondary column */
.story--mid { padding-block: 20px; border-top: 1px solid var(--rule-soft); }
.front__col > .story--mid:first-child,
.front__col > .story--txt:first-child { border-top: 0; padding-top: 0; }
.story--mid .media { margin-bottom: 12px; }
.story--mid h3 { font-size: clamp(17px, 1.8vw, 19.5px); font-stretch: 86%; line-height: 1.14; margin-block: 8px 7px; }
.story--mid h3 a { text-decoration: none; }
.story--mid h3 a:hover { color: var(--brand); }
.story--mid p { font-size: 15px; color: var(--ink-2); line-height: 1.5; }

.story--txt { padding-block: 16px; border-top: 1px solid var(--rule-soft); }
.story--txt h3 { font-size: 16.5px; font-stretch: 88%; line-height: 1.18; margin-block: 7px 0; }
.story--txt h3 a { text-decoration: none; }
.story--txt h3 a:hover { color: var(--brand); }

/* latest column */
.latest__head {
  display: flex; align-items: center; gap: 9px; padding-bottom: 10px;
  border-bottom: 2px solid var(--ink); flex-wrap: wrap;
}
.latest ol { list-style: none; margin: 0; padding: 0; }
.latest li { padding-block: 13px; border-top: 1px solid var(--rule-soft); }
.latest li:first-child { border-top: 0; }
.latest time {
  font-family: var(--f-data); font-size: 11px; color: var(--brand); display: block;
  margin-bottom: 4px; font-variant-numeric: tabular-nums;
}
.latest a {
  font-family: var(--f-head); font-stretch: 88%; font-weight: 600; font-size: 15px;
  line-height: 1.24; letter-spacing: -0.005em; text-decoration: none; display: block; color: var(--ink);
}
.latest a:hover { color: var(--brand); }

/* ============================================================
   Data modules — Prop Firm Index, Platform directory
   ============================================================ */
.tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper); }
table.data { border-collapse: collapse; width: 100%; min-width: 880px; }
table.data th, table.data td { text-align: start; padding: 12px 14px; border-bottom: 1px solid var(--rule-soft); }
table.data thead th {
  background: var(--surface-2);
  font-family: var(--f-head); font-stretch: 100%; font-weight: 600;
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 1px solid var(--rule-firm); white-space: nowrap;
}
table.data tbody tr:hover { background: var(--surface); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td { font-family: var(--f-data); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
table.data td.firm {
  font-family: var(--f-head); font-stretch: 88%; font-weight: 600; font-size: 15.5px;
  color: var(--ink); letter-spacing: -0.005em;
}
table.data td.firm small {
  display: block; font-family: var(--f-data); font-weight: 400; font-size: 10.5px;
  color: var(--ink-3); letter-spacing: 0; margin-top: 3px; font-stretch: 100%;
}
table.data td.wrapcell { font-family: var(--f-read); font-size: 14px; white-space: normal; min-width: 190px; line-height: 1.45; }
table.data a { color: var(--brand); text-decoration: none; }
table.data a:hover { text-decoration: underline; }
.delta { font-weight: 500; }
.delta[data-dir="up"] { color: var(--up); }
.delta[data-dir="down"] { color: var(--down); }
.delta[data-dir="flat"] { color: var(--ink-3); }
.bar { display: block; height: 5px; background: var(--surface-2); border-radius: 1px; margin-top: 6px; width: 92px; }
.bar i { display: block; height: 100%; background: var(--brand); border-radius: 1px; }

/* ============================================================
   Desk grids
   ============================================================ */
.grid3, .grid4 { display: grid; gap: clamp(24px, 3vw, 38px); }
@media (min-width: 820px)  { .grid3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px)  { .grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .grid4 { grid-template-columns: repeat(4, 1fr); } }

.deck { display: grid; gap: 0; align-content: start; }
.deck__head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 4px;
}
.deck__head h3 { font-size: 15px; font-stretch: 100%; letter-spacing: .09em; text-transform: uppercase; }
.deck__head a {
  margin-inline-start: auto; font-family: var(--f-head); font-stretch: 100%; font-weight: 600;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-decoration: none;
}
.deck__head a:hover { color: var(--brand); }

.story--deck { padding-block: 16px; border-top: 1px solid var(--rule-soft); }
.deck .story--deck:first-of-type { border-top: 0; }
.story--deck .media { margin-bottom: 11px; }
.story--deck h4 {
  font-size: 16.5px; font-stretch: 88%; font-weight: 600; line-height: 1.2; margin-bottom: 6px;
}
.story--deck h4 a { text-decoration: none; }
.story--deck h4 a:hover { color: var(--brand); }
.story--deck p { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }

/* ============================================================
   Press releases — visually fenced from editorial
   ============================================================ */
.paidzone { background: var(--paid-soft); border-block: 1px solid var(--paid-rule); }
.paidzone .shead { border-bottom-color: var(--paid); }
.paid-disclosure {
  font-family: var(--f-data); font-size: 11.5px; line-height: 1.65; color: var(--ink-2);
  max-width: 80ch; margin-bottom: 20px;
}
.paid-disclosure a { color: var(--paid); }
.prgrid { display: grid; gap: 16px; }
@media (min-width: 720px)  { .prgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .prgrid { grid-template-columns: repeat(3, 1fr); } }
.pr {
  background: var(--paper); border: 1px solid var(--paid-rule); border-top: 3px solid var(--paid);
  border-radius: 2px; padding: 18px; display: flex; flex-direction: column; gap: 10px;
}
.pr h3 { font-size: 17px; font-stretch: 88%; line-height: 1.18; }
.pr h3 a { text-decoration: none; }
.pr h3 a:hover { color: var(--paid); }
.pr p { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.pr__foot {
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rule-soft);
  font-family: var(--f-data); font-size: 11px; color: var(--ink-3);
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.pr__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--paid-rule);
}
.pr__cta p { font-size: 15px; color: var(--ink-2); max-width: 54ch; line-height: 1.55; }

/* ============================================================
   Newsletter
   ============================================================ */
.brief { background: var(--band); color: #EDEAF4; }
.brief__in { display: grid; gap: 26px; align-items: center; padding-block: clamp(32px, 4vw, 50px); }
@media (min-width: 880px) { .brief__in { grid-template-columns: 1.2fr 1fr; gap: 48px; } }
.brief h2 { font-size: clamp(24px, 3.4vw, 34px); font-stretch: 80%; color: #EDEAF4; }
.brief p { color: #9A92AB; font-size: 16px; margin-top: 12px; max-width: 52ch; line-height: 1.55; }
.brief__form { display: flex; gap: 8px; flex-wrap: wrap; }
.brief__form input {
  flex: 1 1 220px; min-width: 0; padding: 12px 14px; border-radius: 2px;
  border: 1px solid rgba(237, 234, 244, .26); background: rgba(237, 234, 244, .07);
  color: #EDEAF4; font-family: var(--f-data); font-size: 13px;
}
.brief__form input::placeholder { color: #857D96; }
.brief__form .btn { background: #00C758; border-color: #00C758; color: #06210F; }
.brief__small { font-family: var(--f-data); font-size: 10.5px; color: #857D96; margin-top: 10px; line-height: 1.6; }

/* ============================================================
   Footer
   ============================================================ */
.foot { background: var(--surface); border-top: 1px solid var(--rule); }
.foot__in { padding-block: clamp(32px, 4vw, 48px) 26px; display: grid; gap: 30px; }
.foot__cols { display: grid; gap: 28px; }
@media (min-width: 820px) { .foot__cols { grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; } }
.foot h4 {
  font-size: 12px; font-stretch: 100%; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 12px;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { text-decoration: none; font-size: 14.5px; color: var(--ink-2); }
.foot a:hover { color: var(--brand); }
.foot__about p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; max-width: 46ch; margin-top: 12px; }
.foot__legal {
  border-top: 1px solid var(--rule); padding-top: 18px;
  font-family: var(--f-data); font-size: 11px; color: var(--ink-3); line-height: 1.7;
  display: grid; gap: 8px;
}
.foot__legal a { font-family: var(--f-data); font-size: 11px; }

/* ============================================================
   Article page
   ============================================================ */
.progress {
  position: fixed; inset-block-start: 0; inset-inline-start: 0; height: 3px; width: 0;
  background: var(--brand-hi); z-index: 90;
}
.crumbs {
  font-family: var(--f-data); font-size: 11.5px; color: var(--ink-3);
  padding-block: 16px 0; display: flex; gap: 8px; flex-wrap: wrap;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--brand); }
.crumbs span::before { content: "/"; margin-inline-end: 8px; color: var(--rule-firm); }

.artgrid { display: grid; gap: clamp(28px, 4vw, 56px); padding-block: 22px clamp(40px, 5vw, 70px); }
@media (min-width: 1020px) { .artgrid { grid-template-columns: minmax(0, 1fr) 316px; } }

.arthead h1 {
  font-size: clamp(31px, 4.8vw, 52px); font-stretch: 78%; letter-spacing: -0.028em;
  line-height: 1.0; margin-block: 14px 18px; max-width: 21ch;
}
.arthead .stand {
  font-size: clamp(18px, 2vw, 21px); line-height: 1.5; color: var(--ink-2);
  max-width: 48ch; font-weight: 300;
}
.artmeta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 22px; padding-block: 14px; border-block: 1px solid var(--rule);
}
.author { display: flex; align-items: center; gap: 11px; }
.author__av {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--surface-2); border: 1px solid var(--rule);
  display: grid; place-items: center;
  font-family: var(--f-head); font-stretch: 100%; font-weight: 700; font-size: 13px; color: var(--ink-2);
}
.author__t { font-family: var(--f-data); font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.author__t b { display: block; font-size: 13px; font-weight: 500; color: var(--ink); }
.author__t a { color: var(--brand); }
.artmeta__r { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.iconbtn {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 2px;
  border: 1px solid var(--rule-firm); background: transparent; color: var(--ink-2); cursor: pointer;
}
.iconbtn:hover { background: var(--surface); color: var(--ink); }
.iconbtn svg { width: 15px; height: 15px; fill: currentColor; }

.prose { max-width: 65ch; margin-top: 30px; }
.prose > * + * { margin-top: 1.15em; }
.prose p { font-size: 19px; line-height: 1.72; }
.prose > p.opener::first-letter {
  float: inline-start; font-family: var(--f-head); font-stretch: 78%; font-weight: 700;
  font-size: 4em; line-height: .82; margin: .05em .08em 0 0; color: var(--ink);
}
.prose h2 { font-size: 26px; font-stretch: 86%; margin-top: 2em; padding-top: .55em; border-top: 1px solid var(--rule); }
.prose h3 { font-size: 20px; font-stretch: 90%; margin-top: 1.7em; }
.prose a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose ul, .prose ol { padding-inline-start: 1.2em; margin-block: 0; }
.prose li { font-size: 18px; line-height: 1.65; margin-top: .5em; }
.prose blockquote { margin: 1.9em 0; padding-inline-start: 20px; border-inline-start: 3px solid var(--brand); }
.prose blockquote p { font-size: 23px; line-height: 1.38; font-weight: 300; font-style: italic; color: var(--ink); }
.prose blockquote cite {
  display: block; margin-top: 10px; font-family: var(--f-data); font-style: normal;
  font-size: 11.5px; color: var(--ink-3); line-height: 1.55;
}
.keyfacts {
  background: var(--surface); border: 1px solid var(--rule); border-inline-start: 3px solid var(--brand);
  border-radius: 2px; padding: 18px 20px; margin-block: 1.9em;
}
.keyfacts h4 {
  font-size: 11px; font-stretch: 100%; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 12px;
}
.keyfacts dl { margin: 0; display: grid; gap: 10px; }
@media (min-width: 620px) { .keyfacts dl { grid-template-columns: 1fr 1fr; gap: 14px 26px; } }
.keyfacts div { border-top: 1px solid var(--rule); padding-top: 9px; }
.keyfacts dt { font-family: var(--f-data); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.keyfacts dd {
  margin: 3px 0 0; font-family: var(--f-data); font-size: 20px; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.figure { margin-block: 2em; }
.figure__box { border: 1px solid var(--rule); border-radius: 2px; background: var(--surface); padding: 18px 16px 12px; }
.figure__box svg { display: block; width: 100%; height: auto; }
.figure figcaption { font-family: var(--f-data); font-size: 11.5px; color: var(--ink-3); margin-top: 10px; line-height: 1.6; }

.disclosure {
  border: 1px solid var(--paid-rule); border-top: 3px solid var(--paid); background: var(--paid-soft);
  border-radius: 2px; padding: 16px 18px; margin-top: 26px;
}
.disclosure h4 {
  font-size: 11px; font-stretch: 100%; letter-spacing: .1em; text-transform: uppercase;
  color: var(--paid); margin-bottom: 8px;
}
.disclosure p { font-family: var(--f-data); font-size: 12px; line-height: 1.7; color: var(--ink-2); max-width: 74ch; }
.disclosure a { color: var(--paid); }

.authorbox {
  display: flex; gap: 16px; align-items: flex-start; margin-top: 42px; padding-top: 22px;
  border-top: 2px solid var(--ink); max-width: 65ch;
}
.authorbox .author__av { width: 54px; height: 54px; font-size: 17px; }
.authorbox p { font-size: 15px; color: var(--ink-2); line-height: 1.6; margin-top: 7px; }
.authorbox b { font-family: var(--f-head); font-stretch: 88%; font-size: 18px; font-weight: 700; }

.rail { display: grid; gap: 26px; align-content: start; }
@media (min-width: 1020px) { .rail { position: sticky; top: 22px; } }
.railbox { border-top: 2px solid var(--ink); padding-top: 12px; }
.railbox h3 { font-size: 13px; font-stretch: 100%; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.railbox ol { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.railbox ol li {
  counter-increment: r; display: grid; grid-template-columns: 26px 1fr; gap: 10px;
  padding-block: 13px; border-top: 1px solid var(--rule-soft);
}
.railbox ol li::before { content: counter(r, decimal-leading-zero); font-family: var(--f-data); font-size: 12px; color: var(--brand); }
.railbox a { text-decoration: none; font-family: var(--f-head); font-stretch: 88%; font-weight: 600; font-size: 14.5px; line-height: 1.25; }
.railbox a:hover { color: var(--brand); }
.adslot {
  border: 1px dashed var(--rule-firm); border-radius: 2px; background: var(--surface);
  aspect-ratio: 300 / 250; display: grid; place-content: center; gap: 6px; text-align: center;
  font-family: var(--f-data); font-size: 11px; color: var(--ink-3); padding: 14px; line-height: 1.6;
}
.adslot b { font-size: 12px; color: var(--ink-2); font-weight: 500; }

/* ============================================================
   Advertise page
   ============================================================ */
.adhero { padding-block: clamp(38px, 5vw, 60px) clamp(30px, 4vw, 44px); }
.adhero h1 {
  font-size: clamp(33px, 5.4vw, 60px); font-stretch: 76%; letter-spacing: -0.03em;
  line-height: 0.98; max-width: 17ch; margin-block: 16px 20px;
}
.adhero .stand { font-size: clamp(17px, 2vw, 20px); color: var(--ink-2); max-width: 60ch; line-height: 1.55; }
.adhero__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

.stats { display: grid; gap: 0; border-block: 1px solid var(--rule); margin-top: clamp(32px, 4vw, 48px); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: 20px 22px; border-inline-start: 1px solid var(--rule-soft); }
.stat:first-child { border-inline-start: 0; }
@media (max-width: 859px) {
  .stat:nth-child(odd) { border-inline-start: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }
}
.stat b {
  display: block; font-family: var(--f-data); font-size: clamp(26px, 3.4vw, 36px); font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1;
}
.stat span {
  display: block; font-family: var(--f-head); font-stretch: 100%; font-weight: 600; font-size: 10.5px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-top: 7px;
}
.stat small { display: block; font-family: var(--f-data); font-size: 11px; color: var(--ink-3); margin-top: 8px; line-height: 1.5; }

.tiers { display: grid; gap: 18px; }
@media (min-width: 920px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
  border: 1px solid var(--rule); border-radius: 2px; padding: 24px 22px 26px; background: var(--paper);
  display: flex; flex-direction: column; gap: 14px;
}
.tier--pick { border-color: var(--ink); box-shadow: var(--shadow-lift); }
.tier__top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tier h3 { font-size: 21px; font-stretch: 88%; }
.tier__price {
  font-family: var(--f-data); font-size: 34px; font-weight: 500; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1;
}
.tier__price small { font-size: 12px; color: var(--ink-3); margin-inline-start: 7px; letter-spacing: 0; }
.tier > p { font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.tier li { display: grid; grid-template-columns: 16px 1fr; gap: 9px; align-items: start; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.tier li::before { content: ""; width: 9px; height: 9px; margin-top: 7px; background: var(--brand); border-radius: 1px; }
.tier li[data-no]::before { background: var(--rule-firm); }
.tier .btn { margin-top: auto; }

.steps { counter-reset: s; display: grid; gap: 0; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { counter-increment: s; padding: 22px 22px 24px; border-top: 2px solid var(--rule); }
@media (min-width: 900px) {
  .step { border-inline-start: 1px solid var(--rule-soft); }
  .step:first-child { border-inline-start: 0; padding-inline-start: 0; }
}
.step::before {
  content: counter(s, decimal-leading-zero); display: block; font-family: var(--f-data);
  font-size: 12px; color: var(--brand); margin-bottom: 12px; letter-spacing: .06em;
}
.step h3 { font-size: 18px; font-stretch: 88%; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.step time { display: block; font-family: var(--f-data); font-size: 11px; color: var(--ink-3); margin-top: 10px; }

.rules { display: grid; gap: 24px; }
@media (min-width: 860px) { .rules { grid-template-columns: 1fr 1fr; gap: 36px; } }
.rulebox { border-top: 3px solid var(--tone, var(--rule-firm)); padding-top: 16px; }
.rulebox--yes { --tone: var(--brand); }
.rulebox--no  { --tone: var(--down); }
.rulebox h3 { font-size: 17px; font-stretch: 88%; margin-bottom: 12px; }
.rulebox ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rulebox li { font-size: 15px; color: var(--ink-2); line-height: 1.55; padding-inline-start: 22px; position: relative; }
.rulebox li::before { position: absolute; inset-inline-start: 0; top: 0; font-family: var(--f-data); font-size: 14px; color: var(--tone); }
.rulebox--yes li::before { content: "+"; }
.rulebox--no li::before { content: "\2212"; }

.form { display: grid; gap: 16px; max-width: 660px; }
.form__row { display: grid; gap: 16px; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--f-head); font-stretch: 100%; font-weight: 600; font-size: 10.5px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2);
}
.field input, .field select, .field textarea {
  font-family: var(--f-read); font-size: 15.5px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-firm); border-radius: 2px;
  padding: 11px 13px; width: 100%;
}
.field textarea { min-height: 110px; resize: vertical; font-size: 15px; line-height: 1.55; }
.field select { font-family: var(--f-head); font-stretch: 100%; font-size: 14px; }
.form__note { font-family: var(--f-data); font-size: 11.5px; color: var(--ink-3); line-height: 1.65; }
.form__note a { color: var(--brand); }

.faq { display: grid; gap: 0; max-width: 80ch; }
.faq details { border-top: 1px solid var(--rule); padding-block: 16px; }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; gap: 14px; align-items: baseline;
  font-family: var(--f-head); font-stretch: 88%; font-weight: 600; font-size: 17.5px; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-inline-start: auto; font-family: var(--f-data); color: var(--brand); font-size: 18px; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { font-size: 15.5px; color: var(--ink-2); line-height: 1.62; margin-top: 11px; max-width: 68ch; }

.splitwrap { display: grid; gap: clamp(26px, 3.5vw, 46px); }
@media (min-width: 980px) { .splitwrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

.callout { background: var(--surface); border: 1px solid var(--rule); border-radius: 2px; padding: 22px 24px; }
.callout h3 { font-size: 18px; font-stretch: 88%; margin-bottom: 10px; }
.callout p { font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.callout p + p { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   Mobile fixes (added 2026-09-14)
   The masthead used flex:none on the logo, so its max-content
   width (name + full tagline on one line) plus the meta column
   forced a 486px layout viewport on a 390px phone.
   ============================================================ */
@media (max-width: 719px) {
  .mast__top { flex-wrap: wrap; gap: 12px; padding-block: 14px 12px; }
  .mast__logo { flex: 1 1 100%; min-width: 0; }
  .mast__name { min-width: 0; }
  .mast__name small { letter-spacing: .12em; font-size: 9px; }

  .mast__meta { margin-inline-start: 0; width: 100%; gap: 10px; }
  .mast__clock { text-align: start; flex: 1 0 100%; }
  .mast__meta .btn { flex: 1 1 0; }

  /* full-bleed scrollable section nav */
  .mast__nav ul { margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .mast__nav a { padding: 13px 13px 12px; }

  /* ticker keeps its own scroller but should bleed to the edges */
  .ticker__in { scroll-padding-inline: var(--gut); }

  /* touch targets */
  .btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
  .proto__in { min-height: 44px; padding-block: 6px; }
  .proto__nav a { padding: 9px 11px; }
  .proto__theme { padding: 9px 11px; }
}

@media (max-width: 719px) {
  /* section "more" links and kickers were 17-18px tall */
  .shead__more { display: inline-flex; align-items: center; min-height: 40px; }
  .kicker { min-height: 34px; }
}

@media (max-width: 719px) {
  .deck__head a { display: inline-flex; align-items: center; min-height: 40px; }
}

@media (max-width: 560px) {
  /* the concept bar stacked into four rows and ate the top of the screen */
  .proto__in { gap: 4px 12px; padding-block: 4px; min-height: 0; }
  .proto__nav { margin-inline-start: 0; }
  .proto__nav a { padding: 8px 10px; }
  .proto__theme { padding: 8px 10px; margin-inline-start: auto; }
}

/* ──────────────────────────────────────────────────────────────────────
   Blog module (Admin Hub) theme. blog-hub.css ships neutral and is driven
   by --blog-* variables; these map them onto this site's tokens, so the
   blog follows the palette AND the dark theme automatically (--brand is
   already redefined to #2BD96F under prefers-color-scheme: dark above).
   "body .blog" beats the kit's own ".blog" block, which loads after this.
   ────────────────────────────────────────────────────────────────────── */
body .blog{
  --blog-text:var(--ink);
  --blog-muted:var(--ink-2);
  --blog-bg:transparent;
  --blog-surface:var(--paper);
  --blog-border:var(--rule);
  --blog-accent:var(--brand);
  --blog-accent-contrast:var(--brand-on);
  --blog-radius:4px;
  --blog-width:var(--wrap);
  --blog-gutter:var(--gut);
}
body .blog .blog-hero__title,
body .blog .post-header h1,
body .blog .post-card__title{font-family:var(--f-head)}


/* ── brand logo ───────────────────────────────────────────────────────
   The supplied lockup, mark and wordmark together. Two copies: the dark
   theme needs the wordmark light and the mark lightened, because the brand
   teal is only 3.19:1 on the dark ground. The swap covers the OS preference
   and the site's own theme toggle, same pattern as the colour tokens above.
   The source PNG carries stray pixels at ~0.4% alpha, so both files were cut
   to the alpha-thresholded bounding box rather than a plain trim, which
   otherwise leaves the artwork floating in a box almost twice its height. */
.mast__logo{flex-direction:column;align-items:flex-start;gap:5px}
.mast__logoimg{height:30px;width:auto;max-width:100%;display:block}
.mast__tagline{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.logo-dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-light{display:none}
  :root:not([data-theme="light"]) .logo-dark{display:block}
}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}
@media (max-width:560px){
  .mast__logoimg{height:25px}
  .mast__tagline{font-size:9px;letter-spacing:.1em;white-space:normal}
}

/* ──────────────────────────────────────────────────────────────────────
   Newsroom chrome
   Added when the front page stopped being a design concept and started
   printing the posts written in the hub.
   ────────────────────────────────────────────────────────────────────── */

/* ── session strip ────────────────────────────────────────────────────
   What the .ticker band used to be. The quotes in it were sample data and
   contradicted our own reporting, so only the part site.js actually
   computes is left: which centres are trading. */
.sessions{background:var(--band);color:#EDEAF4}
.sessions__in{display:flex;align-items:center;gap:18px;min-height:40px;flex-wrap:wrap}
.sessions__status{font-family:var(--f-data);font-size:12.5px;color:#D7D2E0;margin:0}
.sessions__status b{color:#6FE49C;font-weight:500}
.sessions__note{margin:0 0 0 auto;font-family:var(--f-data);font-size:11px;
  letter-spacing:.04em;color:#9A92AB;white-space:nowrap}

/* ── a real photograph in a card ──────────────────────────────────────
   .media is a drawn placeholder: the gradients have to go when there is
   something to show. */
.media--img{background-image:none;background:var(--surface-2)}
.media--img img{width:100%;height:100%;object-fit:cover;display:block}
a.media{text-decoration:none}

/* ── masthead: theme button and the burger ───────────────────────────── */
.mast__theme{font-family:var(--f-data);font-size:11.5px;letter-spacing:.03em}
.mast__burger{display:none;flex:none;width:44px;height:44px;margin-inline-start:auto;
  background:none;border:1px solid var(--rule-firm);border-radius:3px;cursor:pointer;
  padding:0;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.mast__burger span{display:block;width:19px;height:2px;background:var(--ink);transition:transform .18s,opacity .18s}
.mast__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mast__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.mast__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── front page fallbacks ─────────────────────────────────────────────
   The page has to be right on a thin day as well as a full one. */
.front--empty{padding-block:clamp(40px,7vw,90px);font-family:var(--f-body);
  font-size:17px;color:var(--ink-2);max-width:56ch}
.latest__empty{font-size:14px;color:var(--ink-3);padding-block:14px;margin:0}
.pr__none{font-family:var(--f-data);font-size:13px;color:var(--ink-3);
  padding-block:18px;margin:0}
.latest .chip{text-decoration:none}
.latest .chip:hover{color:var(--brand)}

/* ── section nav as a drawer on a phone ───────────────────────────────
   The nav used to be four items and scrolled sideways. It is now one per
   published section plus the fenced paid one, which is too many to find by
   swiping, so below 820px it collapses behind the burger. */
@media (max-width:819px){
  .mast__burger{display:flex}
  .mast__top{flex-wrap:wrap;gap:12px}
  .mast__logo{flex:1 1 auto;min-width:0}
  .mast__meta{order:3;margin-inline-start:0;width:100%;gap:10px}
  .mast__nav{display:none;border-top:1px solid var(--rule)}
  .mast__nav.is-open{display:block}
  .mast__nav ul{flex-direction:column;overflow:visible;margin-inline:0;padding-inline:0}
  .mast__nav li{border-top:1px solid var(--rule-soft)}
  .mast__nav li:first-child{border-top:0}
  .mast__nav a{display:block;padding:14px 2px;border-bottom:0;font-size:15px}
  .mast__nav a[aria-current="page"]{color:var(--brand)}
  .mast__nav .sep{display:none}
}

@media (max-width:719px){
  .sessions__in{min-height:44px;padding-block:7px}
  .sessions__note{margin-inline-start:0;flex:1 0 100%}
}

@media (max-width:719px){
  /* three buttons in the meta row is one too many to stretch: the theme
     switch is a utility, Advertise and Get the brief are the calls */
  .mast__meta .mast__theme{flex:0 0 auto;min-height:38px;padding-inline:10px}
  .mast__clock{flex:1 0 100%;display:flex;gap:10px;align-items:baseline}
  .mast__clock br{display:none}
}

/* ── section nav between the drawer and a wide desktop ────────────────
   Nine links plus two rules do not fit a 1280px window at the full
   padding, and the strip is a hidden-scrollbar overflow, so the last item
   was simply cut in half. Tighten the spacing instead of hiding it. */
@media (min-width:820px) and (max-width:1300px){
  .mast__nav a{padding-inline:10px;font-size:12.5px;letter-spacing:.055em}
  .mast__nav .sep{margin-inline:7px}
}
@media (min-width:820px) and (max-width:1060px){
  .mast__nav a{padding-inline:7px;font-size:11.5px;letter-spacing:.04em}
  .mast__nav .sep{margin-inline:4px}
  .mast__clock{display:none}
}

/* a rate card does not state audience numbers the newsroom has not measured */
.stats--pending .stat b{color:var(--ink-3)}
.stats__note{font-family:var(--f-data);font-size:12px;line-height:1.6;
  color:var(--ink-3);margin-top:14px;max-width:72ch}

/* ---------- front page h1 ----------
   A news front page still needs one heading that names the publication's
   subject. It sits above the lead as a dateline rule, so it reads as part of
   the furniture rather than as a headline competing with the lead. */
.frontbar{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px;
  padding:18px 0 13px; border-bottom:2px solid var(--ink);
}
.frontbar h1{
  margin:0; font-family:var(--f-head); font-size:16px; font-stretch:105%;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
}
.frontbar p{ margin:0; font-size:14px; color:var(--ink-3); }
@media (max-width:620px){
  .frontbar{ padding:14px 0 11px; }
  .frontbar h1{ font-size:14px; }
  .frontbar p{ font-size:12.5px; }
}

/* ---------- language switcher ----------
   A <details> rather than a script: it opens before the JavaScript has loaded
   and with JavaScript off, and every entry is a real link to the same page in
   that language, which is what a crawler following hreflang expects. */
.lang { position: relative; }
.lang > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  list-style: none; padding: 10px 12px; border: 1px solid var(--rule-firm);
  border-radius: 2px; font-family: var(--f-data); font-size: 11.5px;
  letter-spacing: .06em; color: var(--ink); background: transparent;
  transition: background .15s ease;
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary::after {
  content: ""; width: 0; height: 0; margin-top: 1px;
  border-inline: 3.5px solid transparent; border-top: 4px solid currentColor;
  opacity: .65;
}
.lang > summary:hover { background: var(--surface); }
.lang[open] > summary { background: var(--surface); }
.lang > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.lang__menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 170px; margin: 0; padding: 4px; list-style: none;
  background: var(--paper); border: 1px solid var(--rule-firm); border-radius: 2px;
  box-shadow: var(--shadow-lift);
}
.lang__menu a {
  display: block; padding: 9px 12px; text-decoration: none; border-radius: 2px;
  font-family: var(--f-head); font-size: 13.5px; color: var(--ink);
}
.lang__menu a:hover { background: var(--surface); }
.lang__menu a[aria-current="true"] { color: var(--brand); font-weight: 600; }
/* a drawn dot, not a tick character: the masthead font has no checkmark
   glyph and the browser substituted a tofu box */
.lang__menu a[aria-current="true"]::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  margin-inline-end: 7px; border-radius: 50%; background: currentColor;
  vertical-align: middle;
}

@media (max-width: 819px) {
  .lang__menu { inset-inline-end: auto; inset-inline-start: 0; }
}

/* ── section nav in the longer languages ──────────────────────────────
   The same nine links are wider in Spanish and Portuguese ("Comunicados
   de prensa" against "Press Releases"), so they need the tighter spacing
   at a width where the English still has room. The strip is a
   hidden-scrollbar overflow, and without this the last item is cut in half
   on a 1440px window. */
@media (min-width: 1301px) {
  html:not([lang="en"]) .mast__nav a { padding-inline: 10px; font-size: 11.5px; letter-spacing: .05em; }
  html:not([lang="en"]) .mast__nav .sep { margin-inline: 7px; }
}
@media (min-width: 820px) and (max-width: 1300px) {
  html:not([lang="en"]) .mast__nav a { padding-inline: 7px; font-size: 11px; letter-spacing: .035em; }
  html:not([lang="en"]) .mast__nav .sep { margin-inline: 4px; }
}