@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

/* Crystal Ball News modern edition: a clear, image-led European news layout. */
:root {
  --ink: #17191d;
  --ink-soft: #363b42;
  --red: #315fe2;
  --red-dark: #244bc0;
  --green: #1f6b69;
  --gold: #8ee2df;
  --paper: #fff;
  --soft: #f6f8fa;
  --soft-blue: #edf3ff;
  --line: #e4e8ec;
  --muted: #68717a;
  --serif: Inter, "Arial size-adjust", Arial, sans-serif;
  --sans: Inter, "Arial size-adjust", Arial, sans-serif;
  --mono: Inter, "Arial size-adjust", Arial, sans-serif;
}
body { color: var(--ink); }
/* The complete morning cohort chooses the opening palette from its publication date. */
body[data-edition-look="0"] { --edition-accent: #315fe2; --edition-deep: #162c70; --edition-wash: #eaf0ff; }
body[data-edition-look="1"] { --edition-accent: #a63a38; --edition-deep: #541e26; --edition-wash: #fff0ed; }
body[data-edition-look="2"] { --edition-accent: #147775; --edition-deep: #104846; --edition-wash: #e6f6f3; }
body[data-edition-look="3"] { --edition-accent: #7946a4; --edition-deep: #382456; --edition-wash: #f4edfc; }
body[data-edition-look="4"] { --edition-accent: #b06a17; --edition-deep: #563712; --edition-wash: #fff4df; }
body[data-edition-look="5"] { --edition-accent: #344c69; --edition-deep: #152a44; --edition-wash: #e8f0f7; }
body[data-edition-look="6"] { --edition-accent: #a3315d; --edition-deep: #57203c; --edition-wash: #ffedf4; }
body[data-edition-look] .brand-symbol, body[data-edition-look] .wire-label { background-color: var(--edition-accent); }
body[data-edition-look] .brand-word em, body[data-edition-look] .masthead-eyebrow,
body[data-edition-look] .lead-kicker, body[data-edition-look] .frontpage .red-dot { color: var(--edition-accent); }
body[data-edition-look] .frontpage { padding-inline: 18px; border-top: 5px solid var(--edition-accent); background: linear-gradient(130deg, var(--edition-wash), #fff 42%); }
body[data-edition-look] .frontpage .overline { color: var(--edition-accent); }
body[data-edition-look] .lead-story { border-bottom-color: var(--edition-accent); }
body[data-edition-look] .lead-copy { padding-left: 18px; }
body[data-edition-look] .lead-copy h2 { color: var(--edition-deep); }
body[data-edition-look] .lead-link { background: var(--edition-accent); }
body[data-edition-look] .lead-graphic { border-bottom: 5px solid var(--edition-accent); }
body[data-edition-look] .lead-side { border-top-color: var(--edition-deep); }
body[data-edition-look] .side-prob { color: var(--edition-accent); }
.container { width: min(100% - 48px, 1280px); }
.topline { background: #f2f4f5; color: #4d555d; border-bottom: 1px solid var(--line); }
.topline-inner { min-height: 33px; font: 500 11px/1.2 var(--sans); letter-spacing: 0; text-transform: none; }
.topline-status { font-weight: 700; }
.status-dot { width: 6px; height: 6px; background: var(--red); box-shadow: none; }
.topline-right { color: #6a737b; }
.masthead { min-height: 93px; gap: 25px; }
.brand { gap: 11px; }
.brand-symbol { width: 56px; height: 56px; background-color: var(--red); background-image: url("crystal-ball-modern.svg"); }
.brand-word { font: 900 clamp(25px, 2.6vw, 34px)/.94 var(--sans); letter-spacing: -.075em; }
.brand-word em { color: var(--red); }
.brand-word small { margin-top: 8px; color: #69737c; font: 700 9px/1.2 var(--sans); letter-spacing: .08em; }
.masthead-right { gap: 4px; font: 500 11px/1.3 var(--sans); }
.masthead-right strong { font: 700 14px/1.25 var(--sans); }
.masthead-eyebrow { color: var(--red); font: 800 10px var(--sans); letter-spacing: .04em; }
.section-nav { position: sticky; top: 0; z-index: 8; background: #fff; color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 2px 8px #151c2609; }
.nav-inner { min-height: 50px; }
.nav-button, .nav-about { position: relative; padding-inline: 12px; border: 0; color: #232830; font: 800 12px/1 var(--sans); letter-spacing: -.01em; }
.nav-button:first-child { padding-left: 0; }
.nav-button:hover, .nav-button.active, .nav-about:hover { color: var(--red); }
.nav-button.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; background: #72d2ce; }
.nav-button:first-child.active::after { left: 0; }
.nav-about { color: #4f5964; }
.theme-toggle { margin-left: 8px; color: var(--red); font-weight: 700; }
.news-wire { background: #f8fafc; }
.wire-inner { min-height: 42px; }
.wire-label { padding-inline: 12px; background: var(--red); font: 800 10px var(--sans); letter-spacing: .02em; }
.wire-story { color: #343a42; font: 500 11px/1.4 var(--sans); }
.wire-end { font: 700 9px var(--sans); }
.frontpage { padding-top: 38px; }
.block-heading { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 24px; }
.block-heading h1, .block-heading h2, .health-briefing-head h2 { font: 900 clamp(34px, 4vw, 51px)/1.02 var(--sans); letter-spacing: -.055em; }
.overline { font: 800 10px var(--sans); letter-spacing: .08em; }
.red-dot { color: var(--red); }
.heading-aside strong { font: 700 12px var(--sans); }
.heading-aside span { font: 500 10px var(--sans); letter-spacing: .01em; text-transform: none; }
.lead-layout { grid-template-columns: minmax(0, 1.6fr) minmax(280px, .65fr); gap: 23px; }
.lead-story { min-height: 430px; background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); }
.lead-article { min-height: 430px; grid-template-columns: 1fr 1.1fr; }
.lead-copy { justify-content: center; padding: 26px 26px 26px 0; }
.lead-kicker { color: var(--red); font: 800 11px var(--sans); letter-spacing: .03em; }
.lead-kicker::before { display: none; }
.lead-copy h2 { margin: 15px 0 16px; font: 900 clamp(29px, 2.8vw, 43px)/1.07 var(--sans); letter-spacing: -.055em; }
.lead-copy p { color: #5b646d; font: 500 14px/1.5 var(--sans); }
.lead-meta { color: #5d6670; font: 600 10px var(--sans); letter-spacing: 0; }
.lead-prob { background: #e8f5f6; color: #176965; border-radius: 2px; }
.lead-link { padding: 11px 14px; margin-top: 20px; border-radius: 2px; background: var(--red); font: 800 11px var(--sans); letter-spacing: 0; text-transform: none; }
.lead-graphic { background: #e8ecf0; }
.lead-graphic::after { background: linear-gradient(0deg, #10182062, transparent 45%); }
.graphic-prob { right: 15px; bottom: 23px; color: #fff; font: 900 52px/.95 var(--sans); letter-spacing: -.06em; }
.graphic-prob small { margin-top: 3px; font: 700 9px var(--sans); }
.graphic-stamp, .graphic-caption { font: 700 9px var(--sans); letter-spacing: 0; }
.lead-side { border-top: 3px solid var(--ink); }
.lead-side-title span { font: 800 18px var(--sans); }
.lead-side-title small { font: 700 10px var(--sans); }
.side-story { grid-template-columns: 50px minmax(0,1fr) 76px; gap: 10px; padding: 13px 0; }
.side-prob { color: var(--green); font: 800 19px var(--sans); }
.side-prob small { font: 600 8px var(--sans); }
.side-story h3 { font: 800 15px/1.25 var(--sans); letter-spacing: -.025em; }
.side-story p { font: 500 9px/1.3 var(--sans); letter-spacing: 0; }
.side-thumb { width: 76px; height: 62px; }
.lead-side-link { font: 800 11px var(--sans); letter-spacing: 0; text-transform: none; }
.editor-note { background: #f3f7ff; border-left-color: var(--red); color: #35445f; font: 500 11px/1.55 var(--sans); }
.editor-note strong { color: #233a6b; }
.pulse { margin-top: 28px; background: #f4f7fa; }
.pulse-label { color: var(--red); font: 800 11px var(--sans); letter-spacing: 0; }
.pulse-label span { font-size: 10px; }
.pulse-metric strong { font: 800 24px var(--sans); }
.pulse-metric span { font: 600 9px var(--sans); }
.scenario-section, .health-briefing { padding-top: 57px; }
.scenario-lead { background: #172f3f; }
.scenario-intro h3 { font: 800 clamp(27px, 2.8vw, 40px)/1.08 var(--sans); letter-spacing: -.04em; }
.scenario-intro p { font-size: 13px; }
.scenario-trigger strong { font: 900 42px var(--sans); }
.scenario-trigger span { font: 600 10px var(--sans); }
.scenario-label { background: var(--red); font: 800 10px var(--sans); }
.scenario-intro a { font: 700 11px var(--sans); text-transform: none; }
.scenario-rule { background: #eef5fa; border-left-color: var(--red); }
.scenario-rule strong { font: 800 10px var(--sans); }
.scenario-card { border-color: var(--line); }
.scenario-card-image { height: 165px; }
.scenario-card h3 { font: 800 20px/1.2 var(--sans); letter-spacing: -.03em; }
.scenario-card-kicker, .scenario-read { font: 800 10px var(--sans); }
.scenario-card-content > p { font: 500 12px/1.48 var(--sans); }
.scenario-card-odds strong { font: 800 26px var(--sans); }
.health-briefing-head { border-bottom: 1px solid var(--line); }
.health-briefing-head button { font: 700 11px var(--sans); text-transform: none; }
.health-highlight-prob { font: 800 23px var(--sans); }
.health-highlight-copy strong { font: 800 18px/1.2 var(--sans); letter-spacing: -.025em; }
.health-highlight-copy small { font: 800 10px var(--sans); }
.desk-heading { margin-bottom: 19px; }
.desk-filter-indicator span:first-child { font: 800 16px var(--sans); }
.desk-filter-indicator span:last-child { font: 700 10px var(--sans); }
.search-wrap input, .sort-wrap select { font: 500 11px var(--sans); }
.sort-wrap { font: 600 10px var(--sans); }
.desk-group-heading { border-bottom: 1px solid var(--line); }
.desk-group-heading h3 { font: 800 24px var(--sans); letter-spacing: -.04em; }
.desk-group-heading small { font: 600 10px var(--sans); }
.cards-grid { gap: 24px 17px; }
.desk-rotation-note { margin: 8px 0 22px; color: var(--muted); font: 12px/1.45 var(--sans); }
.forecast-card { min-height: 420px; border: 0; border-bottom: 1px solid var(--line); }
.forecast-card[data-desk] { border-top: 0; }
.forecast-card:hover { box-shadow: none; border-bottom-color: var(--red); }
.card-media { height: 190px; }
.card-body { padding: 14px 0 17px; }
.card-kicker { font: 800 10px var(--sans); letter-spacing: .03em; }
.card-status { font: 700 9px var(--sans); }
.forecast-card h4 { font: 800 23px/1.16 var(--sans); letter-spacing: -.035em; }
.forecast-card .card-deck { font: 500 12px/1.52 var(--sans); }
.card-read { font: 700 11px var(--sans); text-transform: none; }
.prob-row strong { font: 800 27px var(--sans); }
.prob-row strong small, .deadline { font: 600 9px/1.35 var(--sans); }
.card-media span, .scenario-card-image span, .health-image span { font: 700 9px var(--sans); }
.record-panel { background: #17375b; }
.panel-overline, .record-stats span, .record-footer { font-family: var(--sans); }
.record-panel h3 { font: 800 22px/1.14 var(--sans); }
.record-stats strong { font: 800 23px var(--sans); }
.calendar-panel h3 { font: 800 20px var(--sans); }
.calendar-date { font: 800 13px var(--sans); }
.calendar-item strong { font: 700 12px/1.28 var(--sans); }
.method-section { background: #f5f8fa; }
.method-grid h3 { font: 800 17px var(--sans); }
.footer { background: #171c26; }
.footer strong { font: 900 23px var(--sans); letter-spacing: -.04em; }
.footer p, .footer-links a { font-family: var(--sans); }

/* Archive, disclaimer, and article pages share the news typography. */
.archive-heading h1, .disclaimer-header h1 { font: 900 clamp(40px, 4.7vw, 65px)/1.02 var(--sans); letter-spacing: -.055em; }
.archive-heading p, .disclaimer-header p { font-family: var(--sans); }
.archive-toolbar { border-block-width: 1px; }
.archive-count strong { font: 800 25px var(--sans); }
.archive-count span, .archive-toolbar label, .archive-result { font-family: var(--sans); }
.archive-card { border: 0; border-bottom: 1px solid var(--line); }
.archive-card:hover { border-bottom-color: var(--red); border-top-color: transparent; box-shadow: none; }
.archive-card h2 { font: 800 22px/1.18 var(--sans); letter-spacing: -.035em; }
.archive-card-bottom strong { font: 800 24px var(--sans); }
.article-breadcrumb, .article-eyebrow, .article-byline { font-family: var(--sans); }
.article-header h1 { font: 900 clamp(39px, 4.2vw, 58px)/1.08 var(--sans); letter-spacing: -.055em; }
.article-standfirst { font: 500 19px/1.5 var(--sans); }
.article-disclosure { background: #eef4ff; border-left-color: var(--red); color: #334460; }
.article-disclosure strong { color: #2647a0; font-family: var(--sans); }
.article-figure { background: #f4f6f8; }
.article-figure figcaption { color: #626d76; font: 500 10px var(--sans); letter-spacing: 0; text-transform: none; }
.article-body > .article-opening { font: 700 19px/1.6 var(--sans); }
.article-section-intro { border-top-width: 1px; }
.article-section-intro span { font: 800 10px var(--sans); }
.article-section-intro h2 { font: 800 29px/1.16 var(--sans); letter-spacing: -.04em; }
.article-body > p { font: 400 16px/1.72 var(--sans); }
.article-odds { background: #eaf2ff; color: #17243c; }
.article-odds > strong { color: var(--red); font: 900 68px/.9 var(--sans); }
.article-odds-label, .article-odds dt, .article-odds p { color: #52657d; font-family: var(--sans); }
.article-odds-track { background: #cfdbec; }
.article-odds-track i { background: var(--red); }
.article-odds dl div { border-top-color: #cbd8e8; }
.article-odds dd { color: #1b2d47; }
.article-odds-explainer { color: var(--red); }
.article-odds-explainer:hover { color: var(--red-dark); }
.article-sources h2, .article-side-link h3, .article-related-heading h2 { font-family: var(--sans); font-weight: 800; }
.article-related-grid strong { font: 800 19px/1.2 var(--sans); }
.article-related-grid b { font: 800 23px var(--sans); }
.disclaimer-header { border-bottom-width: 1px; }
.disclaimer-copy h2 { font: 800 29px/1.15 var(--sans); }
.disclaimer-copy p { font: 400 16px/1.72 var(--sans); }
.disclaimer-aside { background: #eaf2ff; color: #17243c; }
.disclaimer-aside span, .disclaimer-aside a { color: var(--red); }
.disclaimer-aside strong { font: 800 27px/1.15 var(--sans); }
.disclaimer-aside p { color: #51647a; }

@media (max-width: 1100px) {
  .lead-layout { grid-template-columns: 1fr; }
  .lead-side { display: grid; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .nav-inner { min-height: 48px; }
  .lead-article { grid-template-columns: 1fr .9fr; }
  .masthead-right { display: none; }
}
@media (max-width: 620px) {
  .container { width: min(100% - 28px, 1280px); }
  .masthead { min-height: 76px; }
  .brand-symbol { width: 43px; height: 43px; }
  .brand-word { font-size: 22px; }
  .brand-word small { font-size: 7px; }
  .nav-button, .nav-about { font-size: 11px; }
  .frontpage { padding-top: 28px; }
  body[data-edition-look] .frontpage { padding-inline: 12px; }
  .lead-article { grid-template-columns: 1fr; }
  .lead-copy { padding: 22px 0; }
  .lead-copy h2 { font-size: 35px; }
  .lead-graphic { min-height: 260px; }
  .lead-side { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr; }
  .card-media { height: 205px; }
  .article-header h1 { font-size: clamp(36px, 9vw, 49px); }
  .article-section-intro h2 { font-size: 27px; }
}