/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE THEME — "cream · navy · rust", all sans-serif
   Matches the Homepage — Desktop 1440 mockup: cream page, white bordered
   cards, navy type and panels, rust accent, rounded filter pills, mono
   figures. Every serif face is replaced with IBM Plex Sans.
   Loaded AFTER styles.css on index.html only; other pages are untouched.
   Presentation only — no content, IDs or JS hooks depend on this file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --t-cream:     #F4F0E8;   /* page background */
  --t-cream-2:   #ECE6DA;   /* tinted band / ad panel */
  --t-card:      #FFFFFF;   /* cards, tables, snapshot */
  --t-line:      #DDD5C6;   /* hairlines, card borders */
  --t-line-2:    #C9BFAD;   /* stronger hairline */
  --t-navy:      #14213D;   /* headings, rules, dark panels */
  --t-navy-2:    #1E2D4D;   /* raised surface on navy */
  --t-navy-3:    #2C3C60;   /* borders on navy */
  --t-text:      #1F2633;   /* body copy */
  --t-muted:     #5E6272;   /* meta, standfirsts */
  --t-subtle:    #7A7568;   /* captions on cream (AA at 12px+) */
  --t-rust:      #B4472A;   /* the accent */
  --t-rust-dk:   #933720;   /* accent hover / pressed */
  --t-rust-lt:   #E07A57;   /* accent on navy */
  --t-up:        #2E7D4F;
  --t-down:      #C0392B;
  --t-r:         4px;       /* card / table radius */
  --t-r-btn:     3px;       /* button / input radius */
  --t-sans:      'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --t-mono:      'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Remap the legacy palette so every rule in styles.css follows the theme */
  --cream:     var(--t-cream);
  --cream2:    var(--t-cream-2);
  --cream3:    var(--t-line);
  --ink:       var(--t-navy);
  --ink2:      var(--t-text);
  --ink3:      var(--t-muted);
  --ink4:      var(--t-subtle);
  --gold:      var(--t-rust);
  --gold2:     var(--t-rust-lt);
  --gold-dark: var(--t-rust-dk);
  --rule:      var(--t-navy);
  --rule-lt:   var(--t-line);
  --red:       var(--t-down);
  --green-ink: var(--t-up);
  --serif:     var(--t-sans);   /* serif → sans-serif everywhere */
  --sans:      var(--t-sans);
  --mono:      var(--t-mono);
}

/* ── 2. Base: sans-serif everywhere, mono for figures ──────────────────────── */
html body {
  font-family: var(--t-sans);
  background: var(--t-cream);
  color: var(--t-text);
  line-height: 1.6;
  padding-top: 44px;                         /* matches the 44px top bar */
}
/* Beats hard-coded 'Libre Baskerville' / 'Roboto' declarations in styles.css */
body *, body *::before, body *::after { font-family: var(--t-sans) !important; }
body .mono, body .wi-val, body .mm-price, body .snapshot-table td.r,
body .paper-table td.r, body .st-ticker, body .st-range-labels,
body .rh-metric-val, body .qt-ts {
  font-family: var(--t-mono) !important;
  font-variant-numeric: tabular-nums;
}
.container { max-width: 1240px; }

/* Serif display weights (900) → a confident sans 700 with tighter tracking */
h1, h2, h3, .story-headline, .sr-label, .heritage-title, .sub-headline,
.ev-featured-title, .fwd-headline, .hc-name, .arc-card-title, .sn-feat-headline,
.sc-card-headline, .ma-card h4, .ev-card-title, .deal-monitor-hl {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--t-navy);
}
/* Former serif italics (standfirsts, mottos, quotes) → sans italic */
.story-standfirst, .masthead-motto, .heritage-intro, .he-text, .footer-motto,
.pq-text, .sub-desc {
  font-style: italic;
  font-weight: 400;
}

/* ── 3. Top bar → navy utility bar ─────────────────────────────────────────── */
.mf-topbar {
  height: 44px;
  padding: 0 24px;
  background: var(--t-navy);
  border-bottom: none;
  box-shadow: none;
}
.mf-topbar-lockup { flex-direction: row; align-items: center; gap: 14px; }
.mf-topbar-brand { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .02em; }
.mf-topbar-brand .brand-word { color: #fff; }
.mf-topbar .brand-word > span { color: var(--t-rust-lt) !important; }
.mf-topbar-date {
  font-size: 12px; font-weight: 400; color: rgba(255,255,255,.72);
  padding-left: 0; border-left: none;
}
.mf-menu-btn {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.35); border-radius: var(--t-r-btn);
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  height: 30px; padding: 0 12px;
}
.mf-menu-btn:hover { background: rgba(255,255,255,.08); }
html body .mf-menu-btn .mf-bars span { background: #fff; }
html body .mf-menu-btn:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Slide-out menu */
.mf-drawer { background: var(--t-cream); }
.mf-brand { color: var(--t-navy); font-weight: 700; }
.mf-heading { color: var(--t-rust); }
.mf-menu a { color: var(--t-navy); font-weight: 600; border-bottom: 1px solid var(--t-line); }
.mf-menu a:hover { color: var(--t-rust); }
.mf-contact strong { color: var(--t-navy) !important; }

/* ── 4. Masthead (centred wordmark, rust .GR, italic tagline) ──────────────── */
.masthead { background: var(--t-cream); border-bottom: none; }
.masthead-ornament, .masthead-rule-top { display: none; }
.masthead-title-wrap { padding: 36px 24px 22px; text-align: center; }
.masthead-title {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--t-navy);
}
.masthead-title .brand-word { font-weight: 700; }
.masthead-gr, .brand-word > span, .logo-gr, .tb-gr { color: var(--t-rust) !important; }
.masthead-motto {
  font-size: 17px;
  color: var(--t-muted);
  margin-top: 12px;
  letter-spacing: 0;
}
.masthead-rule-bottom { display: block; max-width: 1240px; margin: 0 auto; border: none; border-top: 2px solid var(--t-navy); height: 0; }

/* Section links live in the navy top bar, right after the date.
   Wide screens show every link inline; narrower screens and phones use the
   Menu button, which opens the same links in the slide-out drawer. */
.mf-topbar { justify-content: flex-start; gap: 16px; }
.mf-topbar-lockup { flex-shrink: 0; }
.mf-menu-btn { margin-left: auto; }
@media (min-width: 1320px) {
  html body .mf-topbar .masthead-nav {
    display: flex;
    flex-wrap: nowrap;
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 0 0 0 20px;
    max-width: none;
    min-height: 0;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255,255,255,.2);
  }
  html body .mf-topbar .mf-menu-btn { display: none; }
  .mnav-sep, .mnav-toggle { display: none !important; }
  html body .mf-topbar .mnav-link {
    font-size: 13px; font-weight: 500; letter-spacing: 0;
    color: rgba(255,255,255,.85);
    padding: 0 8px;
    line-height: 44px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  html body .mf-topbar .mnav-link:hover,
  html body .mf-topbar .mnav-link.active { color: #fff; border-bottom-color: var(--t-rust-lt); }
  html body .mf-topbar .mnav-link--sub {
    margin-left: auto;
    background: var(--t-rust); color: #fff !important;
    border-radius: var(--t-r-btn);
    line-height: 1; padding: 8px 14px; border-bottom: none;
    font-weight: 600; text-transform: none;
  }
  html body .mf-topbar .mnav-link--sub:hover { background: var(--t-rust-dk); }
}
@media (max-width: 1319px) {
  html body .mf-topbar .masthead-nav { display: none; }
}

/* ── 5. Market wire ────────────────────────────────────────────────────────── */
.wire-bar {
  background: var(--t-card);
  border-top: none;
  border-bottom: 1px solid var(--t-line);
}
.wire-label {
  background: var(--t-navy); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
}
.wire-item { color: var(--t-navy); background: none; border: none; }
.wi-name { font-weight: 700; color: var(--t-navy); }
.wi-val  { color: var(--t-text); }
.wire-sep { color: var(--t-line-2); }
.wi-up, .up-text, .mm-chg.up, .mm-adv { color: var(--t-up) !important; }
.wi-dn, .dn-text, .mm-chg.dn, .mm-dec { color: var(--t-down) !important; }
.wi-neutral { color: var(--t-muted) !important; }
/* Chart panels stay dark: their ApexCharts are drawn in dark mode with white labels */
.wire-panel { background: var(--t-navy); border-bottom: 1px solid var(--t-navy-3); }
.wp-range { border-radius: 999px; }
.wp-range.active { background: var(--t-rust); color: #fff; }

/* ── 6. Section headings: rust eyebrow + bold navy title, left-aligned ────── */
html body section.paper-section, html body section.paper-section[id] {
  background: var(--t-cream);
  border-top: 1px solid var(--t-line) !important;
}
.paper-section--tinted { background: var(--t-cream) !important; }
.front-page { background: var(--t-cream); }
.section-rule { justify-content: flex-start; text-align: left; margin-bottom: 8px; }
.section-rule .sr-line { display: none !important; }
.section-rule[data-eyebrow]::before {
  text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--t-rust);
  margin-bottom: 6px;
}
.sr-label {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--t-navy);
  text-align: left;
  padding: 0;
  background: none;
}
html body .section-deck {
  font-size: 16px;
  font-style: normal;
  color: var(--t-muted);
  text-align: left;
  padding: 0 0 20px;
  margin-bottom: 24px;
  border: none;
  border-bottom: 2px solid var(--t-navy);
  max-width: none;
}

/* Shared card treatment: white, 1px warm border, 4px radius, no shadow */
.market-snapshot, .brief-box, .sub-box, .sc-card, .arc-card, .ev-card, .ma-card,
.heritage-card, .rh-panel, .rh-cta-panel, .mm-item, .paper-table-wrap,
.sn-feat, .ev-featured-banner, .heritage-pillars, .heritage-editorial, .sub-delivery {
  background: var(--t-card);
  border: 1px solid var(--t-line) !important;
  border-radius: var(--t-r);
  box-shadow: none !important;
}

/* Rust uppercase kickers (mockup: "MARKET ANALYSIS", "FINANCE MONITOR") */
.story-kicker, .bi-kicker, .hc-category, .heritage-eyebrow, .ev-featured-eyebrow,
.fwd-eyebrow, .sub-kicker, .arc-card-cat, .fnews-eyebrow, .sn-feed-eyebrow {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: var(--t-rust) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
/* Navy uppercase panel labels (mockup: "MARKET SNAPSHOT", "IN BRIEF") */
.snapshot-label, .brief-label, .rh-panel-title, .sub-box-title, .mm-label,
.sn-sub-label, .ev-grid-title, .arc-pub-label, .mah-dealbar-hd {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: var(--t-navy) !important;
  background: none !important;
}

/* ── 7. Front page ─────────────────────────────────────────────────────────── */
/* Section rule for the front page has no bottom rule under the heading */
.front-page .section-rule { margin-top: 8px; }
.col-rule { background: var(--t-line); width: 1px; }
.stack-rule, .brief-rule, .story-rule { background: var(--t-line); border-color: var(--t-line); }

.story--lead .story-headline, .lead-story-hl-link {
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--t-navy);
}
.story-headline--md, .story--secondary .story-headline { font-size: 24px; line-height: 1.2; }
.story-headline--sm { font-size: 20px; line-height: 1.25; }
.story-stack .story-headline, .story-stack .story-headline a { font-size: 26px; line-height: 1.15; }
.story-headline a:hover, .lead-story-hl-link:hover { color: var(--t-rust); }
.story-standfirst {
  font-size: 18px;
  line-height: 1.5;
  color: var(--t-muted);
  border-left: none;
  padding-left: 0;
}
.story-body, .story-body p { font-size: 15px; line-height: 1.65; color: var(--t-text); }
.story-stack .story-body, .story-stack .story-body p { line-height: 1.6 !important; }
.dropcap { font-weight: 700 !important; color: var(--t-rust) !important; }
.story-meta-bar, .story-meta-date, .story-meta-time { font-size: 11px; color: var(--t-subtle); letter-spacing: .06em; }
.story-meta-source { color: var(--t-navy); font-weight: 700; }
.story-continued, .lead-story-read, .sc-card-read-more, .ma-read-link, .arc-card-view, .ev-card-link {
  color: var(--t-rust);
  font-weight: 700;
  font-size: 13px;
  font-style: normal;
}
.story-share-row { border-top: 1px solid var(--t-line); border-bottom: none; }
.story-share-lbl { color: var(--t-subtle); }
.story-share-link { color: var(--t-muted) !important; font-size: 13px !important; font-weight: 500; text-transform: none; letter-spacing: 0; }
.story-share-link:hover { color: var(--t-rust) !important; }

.deal-monitor-item { border-left: none; padding-left: 0; border-bottom: 1px solid var(--t-line); padding-bottom: 12px; }
.deal-monitor-hl { font-size: 16px; line-height: 1.3; }
.deal-monitor-date { color: var(--t-subtle); }

/* Market snapshot */
.snapshot-label { padding: 14px 16px; border-bottom: 1px solid var(--t-line); }
.snapshot-live-dot { background: var(--t-up); }
.snapshot-table thead tr, .snapshot-table tbody tr:last-child { border-bottom: 1px solid var(--t-line); background: transparent; }
.snapshot-table th {
  background: transparent;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  color: var(--t-subtle);
  padding: 10px 16px;
}
.snapshot-table td { padding: 10px 16px; font-size: 13px; color: var(--t-text); border-bottom: 1px solid var(--t-line); }
.snapshot-table td.r { white-space: nowrap; }
.snapshot-note { font-size: 11px; color: var(--t-subtle); padding: 10px 16px; background: transparent; }

/* In Brief / Industry News column */
.brief-label { padding: 14px 16px; border-bottom: 1px solid var(--t-line); }
.brief-item { padding: 14px 16px; }
.bi-kicker { margin-bottom: 4px; }
.bi-news-link, .brief-item p { font-size: 14px; line-height: 1.45; color: var(--t-text); }
.bi-news-link:hover { color: var(--t-rust); }
.bi-time { color: var(--t-subtle); }

/* Sidebar subscribe */
.sub-box { padding: 20px; }
.sub-box-title { padding: 0 0 12px; border: none; }

/* ── 8. Buttons, pills, inputs ─────────────────────────────────────────────── */
.sub-box-form button, .sub-btn, .rh-cta-btn, .ev-btn--primary, .cg-retry-btn,
.tb-promo-cta, .ad-midstrip-cta, .fwd-btn {
  background: var(--t-rust) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--t-r-btn);
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 11px 18px;
}
.sub-box-form button:hover, .sub-btn:hover, .rh-cta-btn:hover, .ev-btn--primary:hover,
.tb-promo-cta:hover, .ad-midstrip-cta:hover, .fwd-btn:hover { background: var(--t-rust-dk) !important; }
.ev-btn:not(.ev-btn--primary), .fnews-load-more, .sub-social-btn, .st-news-btn {
  background: transparent !important;
  color: var(--t-navy) !important;
  border: 1px solid var(--t-navy) !important;
  border-radius: var(--t-r-btn);
  font-size: 13px !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
.ev-btn:not(.ev-btn--primary):hover, .fnews-load-more:hover, .sub-social-btn:hover, .st-news-btn:hover {
  background: var(--t-navy) !important; color: #fff !important;
}

/* Filter pills (mockup: rounded, navy fill when active) */
.filter-row, .fnews-filters, .arc-filter-row { gap: 8px !important; border: none; }
.fpill, .fnews-pill, .arc-pill, .tpill, .ppill {
  background: var(--t-card) !important;
  color: var(--t-navy) !important;
  border: 1px solid var(--t-line-2) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 6px 14px !important;
}
.fpill:hover, .fnews-pill:hover, .arc-pill:hover { border-color: var(--t-navy) !important; }
.fpill.active, .fnews-pill.active, .arc-pill.active, .tpill.active, .ppill.active {
  background: var(--t-navy) !important;
  color: #fff !important;
  border-color: var(--t-navy) !important;
}
.filter-label { font-size: 12px; font-weight: 500; color: var(--t-muted); text-transform: none; letter-spacing: 0; }
.arc-sort-sel { background: var(--t-card); border: 1px solid var(--t-line-2); border-radius: var(--t-r-btn); color: var(--t-navy); }

body input[type="email"], body input[type="text"]:not([name="website"]), body select, body textarea {
  background: var(--t-card);
  color: var(--t-text);
  border: 1px solid var(--t-line-2);
  border-radius: var(--t-r-btn);
}
body input::placeholder, body .sub-form input::placeholder, body .sub-box input::placeholder { color: var(--t-subtle) !important; opacity: 1; }
body input:focus, body select:focus, body textarea:focus { outline: 2px solid var(--t-rust); outline-offset: 1px; border-color: var(--t-rust); }
body a:focus-visible, body button:focus-visible { outline: 2px solid var(--t-rust); outline-offset: 2px; }
body input[type="checkbox"] { accent-color: var(--t-rust); }

/* ── 9. Greek stocks ───────────────────────────────────────────────────────── */
.market-movers-bar { background: transparent; border: none !important; gap: 12px; }
.mm-item { padding: 14px 16px; border-left: 1px solid var(--t-line) !important; }
.mm-label { margin-bottom: 6px; }
.mm-ticker { font-size: 24px; font-weight: 700; color: var(--t-navy); font-family: var(--t-sans) !important; letter-spacing: -0.02em; }
.mm-price { font-size: 12px; color: var(--t-subtle); font-weight: 400; }
.mm-chg { font-size: 13px; }
#mmFleetAvg, .mm-adv, .mm-dec, .mm-sep-sm { font-size: 24px; font-weight: 700; }
.mm-meta { font-size: 11px; color: var(--t-subtle); }

.paper-table-wrap { overflow: hidden; }
.paper-table thead tr { border-top: none; border-bottom: 1px solid var(--t-line); }
.paper-table th {
  background: var(--t-card);
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  color: var(--t-subtle);
  padding: 12px 14px;
  text-align: left;
}
.paper-table th.r, .snapshot-table th.r { text-align: right; }
.paper-table td { font-size: 13px; color: var(--t-text); border-bottom: 1px solid var(--t-line); padding: 12px 14px; }
.paper-table tbody tr:hover td { background: #FBF8F3; }
.st-company { font-weight: 700; color: var(--t-navy); }
.st-ticker { background: transparent !important; color: var(--t-navy); font-weight: 500; padding-left: 0 !important; }
.st-seg, .seg-dry, .seg-tank, .seg-cont, .seg-gas, .seg-fin {
  background: transparent !important; border: none !important;
  color: var(--t-muted) !important;
  font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none !important; padding: 0 !important;
}
.st-exchange { color: var(--t-subtle); }
.st-sparkline line { stroke: var(--t-line-2); }
.st-sparkline circle { fill: var(--t-rust); }
.st-news-row td { background: #FBF8F3 !important; }
.st-chart-panel, .st-chart-td, html body .st-news-row td.st-chart-td { background: var(--t-navy) !important; }
.table-note { font-size: 11px; color: var(--t-subtle); }
.qt-badge { border-radius: 999px; }

/* News hubs (stocks + M&A) */
.sn-ticker-wrap { background: var(--t-card); border: 1px solid var(--t-line); border-radius: var(--t-r); }
.sn-ticker-label { background: var(--t-navy); color: #fff; }
.sn-tk-link { color: var(--t-navy); }
.sn-feat-headline { font-size: 26px; line-height: 1.2; }
.sn-ni { border-bottom: 1px solid var(--t-line); }
.sn-ni-num { color: var(--t-rust); font-weight: 700; }
.sn-ni-hl { font-weight: 600; color: var(--t-navy); }
.sn-ni-hl:hover, .sn-sub-hl:hover { color: var(--t-rust); }
.sn-sub-hd { border-bottom: 2px solid var(--t-navy); }
.sn-trend-bar { background: var(--t-rust); }

/* ── 10. News cards, analyst, M&A, heritage, events ────────────────────────── */
.fnews-section { border-top: 2px solid var(--t-navy); }
.sc-card-headline { font-size: 17px; line-height: 1.3; }
.sc-card-headline a, .arc-card-title a, .sn-feat-headline a, .ev-card-title a, .deal-monitor-hl a { color: var(--t-navy); }
.sc-card-headline a:hover, .arc-card-title a:hover, .ev-card-title a:hover { color: var(--t-rust); }
.sc-card-excerpt, .arc-card-excerpt, .ma-desc, .ev-card-desc, .hc-desc { color: var(--t-muted); }
.sc-card-date, .sc-card-meta, .ma-date, .arc-card-date, .ev-card-org, .ev-card-location { color: var(--t-subtle); }
.fnews-src, .sc-ticker, .ma-type, .mah-type, .ev-tag, .ev-featured-tag, .rh-area-tag, .sn-sub-tag {
  background: var(--t-cream-2) !important;
  color: var(--t-navy) !important;
  border: none !important;
  border-radius: 2px;
}
.ma-type { display: inline-block; align-self: flex-start; }
.sc-badge, .sc-badge--latest { background: var(--t-rust) !important; color: #fff !important; border-radius: 2px; }
.share-btn { border-radius: var(--t-r-btn); border-color: var(--t-line-2); color: var(--t-navy); }
.ma-deals-grid { border-top: none !important; gap: 16px; }
.ma-card { padding: 20px !important; }
.ma-card h4 { font-size: 18px; line-height: 1.3; }
.arc-card--featured { border-top: 3px solid var(--t-navy) !important; }
.arc-card-featured-label { background: var(--t-navy) !important; color: #fff !important; border-radius: 2px; }
.arc-author-avatar { background: var(--t-navy) !important; color: #fff !important; }
.arc-card-date-label { color: var(--t-rust); }
.rh-metric { background: var(--t-cream); border-radius: var(--t-r-btn); }
.rh-metric-val { color: var(--t-navy); font-weight: 600; }

.heritage-masthead { text-align: left; max-width: 800px; margin: 0 0 28px; }
.heritage-masthead > * { margin-left: 0; margin-right: 0; }
.heritage-title { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }
.heritage-grid { gap: 16px; border: none; background: transparent; }
.heritage-card { overflow: hidden; }
.hc-portrait { background: var(--t-card); border-bottom: 1px solid var(--t-line); }
.hc-portrait-inner { background: var(--t-cream); }
.hc-name { font-size: 20px; }
.hc-role { font-style: normal; color: var(--t-navy); font-weight: 600; font-size: 13px; }
.hc-rule { border-top-color: var(--t-line); }
.hc-more { color: var(--t-rust); font-weight: 700; }
.heritage-editorial { text-align: left; border-left: 3px solid var(--t-rust) !important; }
.he-ornament { display: none; }
.hp-numeral { color: var(--t-rust); font-style: normal; font-weight: 700; }
.hp-vr { background: var(--t-line); }

.ev-featured-banner { border-left: 3px solid var(--t-rust) !important; }
.ev-featured-title { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; }
.ev-card-date-col { background: var(--t-navy); color: #fff; border-radius: var(--t-r) 0 0 var(--t-r); }
.ev-date-day { color: #fff; font-weight: 700; }
.ev-date-month, .ev-date-year { color: rgba(255,255,255,.75); }

/* ── 11. Forward strip (light band) and Subscribe (navy panel) ─────────────── */
.forward-strip {
  background: var(--t-card);
  border-top: 1px solid var(--t-line);
  border-bottom: 1px solid var(--t-line);
  color: var(--t-text);
}
.fwd-headline { font-size: 26px; color: var(--t-navy); }
.fwd-sub { color: var(--t-muted); }
.fwd-btn--linkedin { background: var(--t-navy) !important; }
.fwd-btn--linkedin:hover { background: var(--t-navy-2) !important; }

.paper-section--dark, html body section.paper-section--dark[id] {
  background: var(--t-navy) !important;
  color: #fff;
  border-top: none !important;
  border-bottom: none !important;
}
.section-rule--light[data-eyebrow]::before { color: var(--t-rust-lt) !important; }
.section-rule--light .sr-label, .sub-headline { color: #fff !important; }
.sub-kicker { color: var(--t-rust-lt) !important; }
.sub-desc { color: rgba(255,255,255,.78); }
.sub-contents { border-top: 1px solid var(--t-navy-3); }
.sub-ci { border-bottom: 1px solid var(--t-navy-3); background: transparent; }
.sub-ci-key { color: #fff; }
.sub-ci-val { color: rgba(255,255,255,.72); }
.sub-delivery { background: var(--t-navy-2) !important; border-color: var(--t-navy-3) !important; }
.sub-delivery-badge { background: var(--t-rust); color: #fff; border-radius: var(--t-r-btn); border: none; width: auto; height: auto; padding: 10px 12px; font-size: 18px; font-weight: 700; line-height: 1; flex-shrink: 0; }
.sub-delivery-label { color: #fff; }
.sub-delivery-sub { color: rgba(255,255,255,.7); }
.sub-social-lbl { color: rgba(255,255,255,.7); }
.paper-section--dark .sub-social-btn { color: #fff !important; border-color: rgba(255,255,255,.45) !important; }
.paper-section--dark .sub-social-btn:hover { background: #fff !important; color: var(--t-navy) !important; }
.sub-form { background: var(--t-navy-2); border: 1px solid var(--t-navy-3); border-radius: var(--t-r); }
.sub-form-group label { color: rgba(255,255,255,.75); }
.sub-form input, .sub-form select {
  background: var(--t-navy) !important; color: #fff !important;
  border: 1px solid var(--t-navy-3) !important;
}
.sub-form input::placeholder { color: rgba(255,255,255,.5) !important; }
.sub-gdpr-label, .sub-gdpr-label span { color: rgba(255,255,255,.72) !important; }
.sub-gdpr-link { color: var(--t-rust-lt); }
.sub-note { color: rgba(255,255,255,.55); }
.sub-confirm { background: var(--t-navy-2); border: 1px solid var(--t-navy-3); border-radius: var(--t-r); color: #fff; }

/* ── 12. Footer (navy) ─────────────────────────────────────────────────────── */
.site-footer { background: var(--t-navy); color: rgba(255,255,255,.72); border-top: none; }
.site-footer .footer-rule { border: 0 !important; height: 1px; background: var(--t-navy-3) !important; }
.footer-title { color: #fff; }
.footer-title .brand-word { font-weight: 700; }
.site-footer .logo-gr { color: var(--t-rust-lt) !important; }
.footer-tagline { color: rgba(255,255,255,.6); }
.footer-motto { color: rgba(255,255,255,.72); }
.site-footer a { color: rgba(255,255,255,.8); }
.site-footer a:hover { color: #fff; }
.footer-sponsors-label { color: rgba(255,255,255,.55); }
.footer-sponsors, .footer-sponsors-row { border-color: var(--t-navy-3) !important; }
.footer-bottom { color: rgba(255,255,255,.6); border-top-color: var(--t-navy-3) !important; }
.footer-sources { color: rgba(255,255,255,.55); border-color: var(--t-navy-3) !important; }

/* ── 13. Ad slots — restyled only; sizes, positions and labels unchanged.
   Flat tinted panels with a small label so they never read as white content cards. */
.top-banner { background: var(--t-cream); }
.tb-promo { background: var(--t-navy); color: #fff; border: none !important; border-radius: var(--t-r); }
.tb-promo-eyebrow { color: rgba(255,255,255,.6); }
.tb-promo-title { color: #fff; font-weight: 700; }
.tb-promo-sub { color: rgba(255,255,255,.72); }
.tb-promo-cta .tb-gr { color: #fff !important; }
.ad-leaderboard, .ad-midstrip { background: var(--t-cream-2); border-color: var(--t-line); }
.ad-label, .sc-ad-label, .sidebar-ad-label, .section-ad-label { color: var(--t-subtle); }
.sc-ad-box, .sidebar-ad-box, .section-ad-box { background: var(--t-cream-2); border: none !important; border-radius: var(--t-r); }
.ad-cta-pulse { color: var(--t-rust) !important; }
.sc-card--sponsored { background: var(--t-cream-2); border-style: dashed !important; }
.sc-sponsored-label { background: var(--t-navy) !important; color: #fff !important; }
.ad-midstrip-headline { color: var(--t-navy); }

/* Consent banner & scroll-top */
.sf-consent-banner { background: var(--t-navy); }
.sf-consent-btn { border-radius: var(--t-r-btn); }
.sf-consent-btn--accept { background: var(--t-rust); border-color: var(--t-rust); }
.sf-consent-text a { color: var(--t-rust-lt); }
.scroll-top-btn { background: var(--t-navy); color: #fff; }

/* Skeletons */
.sc-skel, .fnews-skel, .rh-skel { background: var(--t-cream-2) !important; }

/* ── 14. Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .mf-topbar { padding: 0 12px 0 16px; }
  .masthead-title-wrap { padding: 26px 16px 18px; }
  .masthead-rule-bottom { margin: 0 16px; }
}
@media (max-width: 640px) {
  html body .masthead-title { font-size: clamp(22px, 7vw, 40px); letter-spacing: -0.03em; }
  .masthead-title .brand-lockup { gap: 8px; }
  .masthead-title .brand-icon { width: 1.1em; height: 1.1em; }
  .masthead-motto { font-size: 15px; }
  .story--lead .story-headline, .lead-story-hl-link { font-size: 28px; }
  .market-movers-bar { gap: 8px; }
}

/* Visually hidden, still read by search engines and screen readers */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Compact logo that follows the page: hidden at the top, fades into the
   navy bar once the big masthead logo has scrolled out of view. */
.mf-topbar-lockup { gap: 0; }
.mf-scroll-logo {
  display: inline-flex; align-items: center;
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transition: max-width .3s ease, opacity .25s ease, margin .3s ease;
}
.mf-scroll-logo .brand-word { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.mf-scroll-logo .brand-word > span { color: var(--t-rust-lt) !important; }
.mf-scroll-logo .brand-icon { width: 22px; height: 22px; margin-right: 8px; }
body.logo-docked .mf-scroll-logo { max-width: 240px; opacity: 1; margin-right: 16px; }
body.logo-docked .mf-topbar-date { padding-left: 16px; border-left: 1px solid rgba(255,255,255,.2); }
@media (max-width: 640px) {
  body.logo-docked .mf-topbar-date { display: none; }   /* phones: logo replaces the date while scrolled */
}
@media (prefers-reduced-motion: reduce) { .mf-scroll-logo { transition: none; } }

/* Date removed from the top bar: links start at the left edge; the divider
   only appears once the compact logo has docked in front of them. */
.mf-topbar { gap: 0; }
@media (min-width: 1320px) {
  html body .mf-topbar .masthead-nav { border-left: none; padding-left: 0; margin-left: -8px; }
  html body.logo-docked .mf-topbar .masthead-nav {
    border-left: 1px solid rgba(255,255,255,.2);
    padding-left: 12px; margin-left: 0;
  }
}

/* Spread the top-bar menu links evenly across the bar (Subscribe stays last) */
@media (min-width: 1320px) {
  html body .mf-topbar .masthead-nav { justify-content: space-between; padding-right: 0; }
  html body .mf-topbar .masthead-nav .mnav-link { padding: 0 6px; }
  html body .mf-topbar .masthead-nav .mnav-link--sub { margin-left: 24px; padding: 8px 14px; }
  html body .mf-topbar .masthead-nav .mnav-link:first-child { margin-left: 18px; }
}

/* Pinch-zoom is allowed, so keep form fields at 16px on phones: below that,
   iOS Safari zooms the page in whenever a field is tapped. */
@media (max-width: 640px) {
  html body input, html body select, html body textarea { font-size: 16px !important; }
}

/* ── Brand (logo #51): bronze drachma + lowercase light wordmark ──────────────
   The HTML keeps "SHIPFINANCE.GR" for search engines and screen readers;
   the lowercase "shipfinance.gr" is purely visual. */
.brand-word { text-transform: lowercase; }
.brand-icon { border-radius: 0 !important; }
html body .masthead-title .brand-lockup { gap: 0.28em; }
html body .masthead-title .brand-word { font-weight: 300; letter-spacing: -0.03em; }
html body .masthead-title .brand-icon { width: 1.25em; height: 1.25em; }
html body .footer-title .brand-word { font-weight: 300; letter-spacing: -0.02em; }
html body .footer-title .brand-icon { width: 1.3em; height: 1.3em; }
html body .mf-brand .brand-word { font-weight: 400; }
html body .mf-scroll-logo .brand-word { font-size: 18px; font-weight: 400; letter-spacing: -0.01em; }
html body .mf-scroll-logo .brand-icon { width: 28px; height: 28px; }

/* The `hidden` attribute must win over component display rules (.sc-card,
   .sidebar-ad, .sc-ad-slot set display:flex/grid), or unsold ad slots that
   should collapse to nothing render as empty boxes. */
[hidden] { display: none !important; }

/* Stock price charts "coming soon" (STOCK_CHARTS_LIVE=false in app.js) */
.st-chart-panel:has(.st-soon) .wp-ranges,
.st-chart-panel:has(.st-soon) .wp-price-col,
.st-chart-panel:has(.st-soon) .wp-stats { display: none !important; }
.wp-no-data.st-soon.visible {
  position: static; inset: auto; transform: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 150px; padding: 22px 16px; text-align: center;
  background: transparent; color: rgba(255,255,255,.75);
}
.st-soon .st-soon-k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t-rust-lt); }
.st-soon .st-soon-t { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.st-soon .st-soon-s { font-size: 13px; max-width: 46ch; color: rgba(255,255,255,.7); }
.st-chart-panel:has(.st-soon) .wp-body { display: block !important; }
.st-chart-panel:has(.st-soon) .wp-chart-col,
.st-chart-panel:has(.st-soon) .wp-chart-wrap { width: 100% !important; height: auto !important; min-height: 0 !important; max-width: none !important; overflow: visible !important; }