/* Liberty Bell Report — public site */
:root {
  /* Washington at night: midnight navy, broadcast red, bright white, a cold blue glow */
  --night: #0a1424; --night-2: #0f1d33; --night-3: #1c2f4d; --silhouette: #050a14;
  --red: #d0202e; --red-text: #b5121f; --red-light: #ff4b55;
  --glow: #3b7bff; --silver: #c9d2de;
  --breaking: #d0202e;
  --ink: #121821; --ink-2: #333b47; --muted: #5a6473; --rule: #dadde2; --rule-2: #c5cad2;
  --paper: #fff; --panel: #f2f4f7; --accent: var(--red-text); --accent-dark: #6f4e1b; --navy: var(--night);
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --display: 'Barlow Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', Arial, sans-serif;
  --mono: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 17px; line-height: 1.5; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #1d5fbf; outline-offset: 2px; }
img { max-width: 100%; height: auto; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 10px 14px; z-index: 10; }
.skip:focus { left: 8px; color: #fff; }
.inline { display: inline; margin: 0; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.linkbtn:hover { color: var(--accent); text-decoration: underline; }
.strong { font-weight: 600; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  font-family: var(--display); font-weight: 500; font-size: 15px; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; text-decoration: none; }
.btn:hover { text-decoration: none; background: var(--ink); color: #fff; }
.btn--sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-width: 1px; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn--accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn--outline { background: transparent; }
.btn--ghost { border: 1px solid var(--rule-2); font-family: var(--mono); text-transform: none; letter-spacing: 0; font-size: 12px; }
.btn--ghost:hover { background: var(--panel); color: var(--ink); }
.btn--block { width: 100%; }

/* utility bar, masthead, nav */
.util { border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.util__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 20px; padding-top: 8px; padding-bottom: 8px; }
.util__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.util a, .util .linkbtn { color: var(--muted); }
.util .btn { color: #fff; min-height: 30px; font-family: var(--mono); font-size: 12px; letter-spacing: 0; text-transform: none; }
.masthead__in { display: flex; align-items: center; gap: 10px 24px; }
.masthead--home .masthead__in { flex-direction: column; text-align: center; padding-top: 30px; padding-bottom: 22px; }
.masthead--compact .masthead__in { justify-content: space-between; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.logo { display: inline-flex; align-items: center; gap: .25em; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; line-height: .95; color: var(--ink); }
.logo:hover { color: var(--ink); text-decoration: none; }
.logo .bell { width: .8em; height: .8em; color: var(--accent); flex: 0 0 auto; }
.masthead--home .logo { font-size: clamp(38px, 7vw, 88px); }
.masthead--compact .logo { font-size: 34px; }
.tagline { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.search { display: flex; align-items: stretch; }
.search input { width: 220px; min-height: 40px; padding: 0 12px; border: 1px solid var(--rule-2); border-right: 0; font: 15px var(--serif); }
.search button { width: 44px; border: 1px solid var(--rule-2); background: var(--paper); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.search--big { margin-top: 12px; }
.search--big input { flex: 1; min-height: 48px; font-size: 18px; width: auto; }
.search--big .btn { border-width: 1px; }
.nav { border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }
.nav__in { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 26px; font-family: var(--display); font-weight: 500; font-size: 15px; letter-spacing: .07em; text-transform: uppercase; }
.nav__in a { padding: 12px 0; }
.nav__in a[aria-current="page"] { color: var(--accent); }
.ticker { background: var(--navy); color: #fff; font-family: var(--mono); font-size: 13px; }
.ticker__in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; padding-top: 10px; padding-bottom: 10px; }
.ticker a { color: #fff; }
.ticker a:hover { color: #fff; }
.ticker__label { background: var(--accent); padding: 3px 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.flash { font-family: var(--mono); font-size: 14px; padding: 12px 0; }
.flash--ok { background: #e8f3ec; color: #14532d; border-bottom: 1px solid #b7dfc4; }
.flash--error { background: #fdecec; color: #7f1d1d; border-bottom: 1px solid #f3b9b9; }

/* layout */
.page { padding-top: 30px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 40px; }
.page--narrow { max-width: 880px; gap: 24px; }
.page--auth { max-width: 520px; }
.cols3 { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.cols3 > .col { flex: 1 1 300px; min-width: 0; }
.cols3 > .col--wide { flex: 1.4 1 400px; }
.cols2 { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.cols2 > * { flex: 1 1 320px; min-width: 0; }
.cols2 > .col--wide { flex: 1.6 1 440px; }
.col { display: flex; flex-direction: column; }
.colhead { margin: 0 0 4px; padding-top: 10px; border-top: 4px solid var(--ink); font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; }
.colhead--accent { border-top-color: var(--accent); }
.colhead--navy { border-top-color: var(--navy); }
.colhead--thin { border-top-width: 2px; font-size: 18px; }
.colhead--plain { border-top: 0; padding-top: 0; font-size: 18px; }
.colhead a { color: inherit; }
.note { margin: 6px 0 4px; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--muted); }
.note a { color: var(--ink); text-decoration: underline; }
.empty { font-family: var(--mono); font-size: 13px; color: var(--muted); padding: 14px 0; margin: 0; }
.more { padding-top: 14px; font-family: var(--display); font-size: 14px; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.more--navy { color: var(--navy); }
.panel { background: var(--panel); padding: 18px 20px 8px; }

/* meta + headline items */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.meta a { color: var(--muted); }
.meta a.src, .meta .src { color: var(--ink); font-weight: 600; }
.meta--center { justify-content: center; }
.meta--stack { flex-direction: column; align-items: flex-start; gap: 3px; }
.meta__brief { color: var(--accent) !important; font-weight: 600; }
.ico { vertical-align: -2px; margin-right: 3px; }
.hl { padding: 14px 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
.hl__title { font-weight: 600; font-size: 19px; line-height: 1.25; }
.hl--hot .hl__title { color: var(--accent); font-weight: 700; }
.hl--ours .hl__title { font-weight: 700; }
.brief { padding: 20px 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; }
.kicker { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.brief__title { margin: 0; font-weight: 700; font-size: 26px; line-height: 1.15; }
.brief--thumb { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px 18px; align-items: start; }
.brief--thumb .brief__img { grid-column: 2; grid-row: 1; }
.brief--thumb .brief__text { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.brief__img img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--panel); }
.lead__img { display: block; width: 100%; max-width: 900px; }
.lead__img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--panel); }
.article__img img { display: block; width: 100%; height: auto; background: var(--panel); }
.article__img--card img { aspect-ratio: 1200 / 630; }
.brief__dek { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }

/* lead */
.lead { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-bottom: 34px; border-bottom: 1px solid var(--rule); text-align: center; }
.badge { background: var(--ink); color: #fff; font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; padding: 5px 14px; }
.badge--breaking { background: var(--accent); }
.lead__title { margin: 0; max-width: 1060px; font-weight: 700; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -.01em; text-transform: uppercase; }
.lead__dek { margin: 0; max-width: 820px; font-size: 20px; color: var(--ink-2); }

/* lists */
.ranked { list-style: none; margin: 0; padding: 0; }
.ranked li { display: flex; gap: 14px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--rule); }
.ranked li > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ranked a { font-weight: 600; font-size: 16px; line-height: 1.3; }
.rank { font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--accent); min-width: 18px; }
.sources-strip { border: 1px solid var(--rule); padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.sources-strip__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.sources-strip h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; }
.sources-strip p { margin: 0; max-width: 820px; color: var(--ink-2); }
.sources-strip p a { text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px; border: 1px solid var(--rule-2); font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink); }
.chip--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip--dark:hover { color: #fff; }
.chip--sm { min-height: 28px; font-size: 11px; padding: 0 8px; }
.pagehead { display: flex; flex-direction: column; gap: 8px; }
.pagehead h1 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(36px, 4.6vw, 56px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.pagehead p { margin: 0; font-size: 19px; color: var(--ink-2); max-width: 820px; }
.pagehead p a { text-decoration: underline; }
.pagehead--desk { flex-direction: row; align-items: center; gap: 20px; }
.pagehead--wide { max-width: 880px; }
.lede { font-size: 19px; color: var(--ink-2); margin: 0; }
.label { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pager { display: flex; gap: 10px; padding-top: 16px; }
.tag { display: inline-block; padding: 0 6px; border: 1px solid var(--navy); color: var(--navy); font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; line-height: 18px; }

/* article */
.preview-bar { background: #fff4d6; border: 1px solid #f1d58a; padding: 10px 14px; font-family: var(--mono); font-size: 13px; }
.preview-bar a { text-decoration: underline; }
.article-layout { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.article { flex: 999 1 640px; min-width: 0; max-width: 780px; display: flex; flex-direction: column; gap: 22px; }
.rail { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.article__title { margin: -8px 0 0; font-weight: 700; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.08; letter-spacing: -.01em; }
.article__dek { margin: 0; font-size: 21px; line-height: 1.45; color: var(--ink-2); }
.byline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.byline__who { display: flex; align-items: center; gap: 12px; }
.byline__who .strong { color: var(--ink); text-decoration: underline; }
.byline__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.desk-mark { width: 44px; height: 44px; flex: 0 0 auto; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: .04em; }
.desk-mark--lg { width: 72px; height: 72px; font-size: 26px; }
.person { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: var(--navy); }
.person--lg { width: 88px; height: 88px; }
.people { display: flex; flex-wrap: wrap; gap: 16px; }
.person-card { flex: 1 1 240px; min-width: 0; display: flex; gap: 14px; align-items: center; border: 1px solid var(--rule); padding: 16px; }
.person-card h3 { margin: 4px 0 2px; font-size: 20px; }
.person-card .meta { margin: 0; }
.howmade { background: var(--panel); border-top: 3px solid var(--navy); padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; }
.howmade h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.howmade p { margin: 0; font-size: 16px; color: var(--ink-2); }
.howmade .meta a { color: var(--ink); text-decoration: underline; }
.article__img { margin: 0; }
.article__img figcaption { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 6px; }
.keypoints { border: 1px solid var(--rule); padding: 18px 22px; }
.keypoints h2 { margin: 0 0 8px; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.keypoints ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.prose { font-size: 19px; line-height: 1.65; color: #1e2226; }
.prose h2 { font-size: 27px; line-height: 1.2; margin: 1.2em 0 .4em; }
.prose h3 { font-size: 22px; margin: 1.1em 0 .4em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; }
.prose a { text-decoration: underline; }
.prose blockquote { margin: 1em 0; padding: 2px 0 2px 22px; border-left: 4px solid var(--accent); font-style: italic; font-size: 22px; }
.prose blockquote p { margin: 0; }
.prose .cite a { color: var(--accent); font-family: var(--mono); font-size: 13px; text-decoration: none; }
.prose--page h2:first-child { margin-top: 0; font-family: var(--display); font-weight: 700; font-size: 44px; text-transform: uppercase; letter-spacing: .02em; }
.sources { border-top: 4px solid var(--ink); padding-top: 12px; }
.sources__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; }
.sources h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; }
.sources ol { list-style: none; margin: 0; padding: 0; }
.sources li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.sources li:target { background: #fff8e1; }
.sources li > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.sources__n { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent); min-width: 30px; }
.sources__outlet { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.sources li > .meta { white-space: nowrap; }

/* comments */
.comments { border-top: 4px solid var(--accent); padding-top: 14px; margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.comments__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; margin-bottom: 12px; }
.comments h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: .05em; text-transform: uppercase; }
.comments h2 span { color: var(--muted); font-weight: 500; }
.seg { display: flex; border: 1px solid var(--ink); }
.seg a { min-height: 38px; display: inline-flex; align-items: center; padding: 0 14px; font-family: var(--mono); font-size: 12px; }
.seg a[aria-current="true"] { background: var(--ink); color: #fff; }
.composer { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--panel); margin-bottom: 8px; }
.composer label { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.composer textarea { width: 100%; padding: 12px 14px; border: 1px solid #a9acb0; background: #fff; font: 16px/1.5 var(--serif); resize: vertical; }
.composer__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.composer__row .meta a { color: var(--ink); text-decoration: underline; }
.composer--guest p { margin: 0; }
.composer--guest a { text-decoration: underline; font-weight: 600; }
.composer--reply { margin-top: 8px; padding: 12px; }
.cmt { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.cmt:target { background: #fff8e1; }
.cmt--reply { margin-left: 54px; }
.cmt--deleted .cmt__body { color: var(--muted); font-style: italic; }
.avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; font-size: 16px; }
.cmt__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cmt__user { color: var(--ink); }
.cmt__body { font-size: 17px; line-height: 1.55; color: #1e2226; overflow-wrap: anywhere; }
.cmt__body p { margin: 0 0 .6em; }
.cmt__body p:last-child { margin: 0; }
.cmt__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 6px; margin-left: -10px; }
.act { min-height: 36px; padding: 0 10px; border: 0; background: transparent; color: var(--ink-2); font: 12px var(--mono); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.act::-webkit-details-marker { display: none; }
.act:hover { color: var(--accent); }
.act--on { color: var(--accent); font-weight: 600; }
.act--static { cursor: default; }
.act--muted { color: var(--muted); }
.reply[open] { flex-basis: 100%; }

/* rail */
.rail__box { display: flex; flex-direction: column; gap: 8px; border-top: 4px solid var(--ink); padding-top: 10px; }
.rail__box--navy { border-top-color: var(--navy); }
.rail__box.panel { border-top: 0; }
.rail__box h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: .07em; text-transform: uppercase; }
.rail__link { padding: 10px 0; border-bottom: 1px solid var(--rule); font-weight: 600; font-size: 17px; line-height: 1.3; }

/* newsroom */
.desks { display: flex; flex-wrap: wrap; gap: 16px; }
.desk { flex: 1 1 220px; min-width: 0; border: 1px solid var(--rule); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.desk h3 { margin: 0; font-size: 20px; }
.desk p { margin: 0; font-size: 15px; color: var(--ink-2); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.steps li { flex: 1 1 260px; background: var(--panel); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.steps h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
.steps p { margin: 0; font-size: 16px; color: var(--ink-2); }
.steps__n { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--accent); }
.rules { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 18px; }
.rules a { text-decoration: underline; }
.srclist { list-style: none; margin: 0; padding: 0; }
.srclist li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-weight: 600; }

/* forms */
.authbox { border: 1px solid var(--rule); padding: 30px; display: flex; flex-direction: column; gap: 16px; }
.authbox h1 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 32px; text-transform: uppercase; letter-spacing: .03em; }
.authbox .meta a { color: var(--ink); text-decoration: underline; }
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.field input, .field textarea, .field select { min-height: 46px; padding: 0 14px; border: 1px solid #a9acb0; background: #fff; font: 16px var(--serif); color: var(--ink); width: 100%; }
.field textarea { padding: 12px 14px; }
.field--hp { position: absolute; left: -9999px; }
.hint { font-family: var(--mono); font-size: 12px; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.flash-inline { margin: 0; padding: 12px 14px; background: #fdecec; color: #7f1d1d; font-family: var(--mono); font-size: 13px; }
.flash-inline--ok { background: #e8f3ec; color: #14532d; }

/* newsletter & footer */
.newsletter { background: var(--navy); color: #fff; }
.newsletter__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 48px; padding-top: 40px; padding-bottom: 40px; }
.newsletter__copy { flex: 1 1 380px; }
.newsletter h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: .04em; text-transform: uppercase; }
.newsletter p { margin: 0; color: #d5dce4; }
.newsletter__form { flex: 1 1 420px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.newsletter__form .field { flex: 1 1 240px; }
.newsletter__form label { color: #d5dce4; }
.newsletter__form input { border-color: #fff; }
.footer { background: var(--ink); color: #c9cbce; }
.footer__in { display: flex; flex-direction: column; gap: 18px; padding-top: 32px; padding-bottom: 40px; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; font-family: var(--mono); font-size: 12px; }
.footer__logo { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.footer__links { display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: var(--mono); font-size: 13px; }
.footer a { color: #c9cbce; }
.footer a:hover { color: #fff; }

@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .page { padding-top: 20px; gap: 28px; }
  .masthead--compact .logo { font-size: 26px; }
  .search input { width: 150px; }
  .nav__in { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 0 20px; scrollbar-width: none; }
  .nav__in a { white-space: nowrap; }
  .ticker__in { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; }
  .lead__title { font-size: 30px; }
  .brief__title { font-size: 22px; }
  .brief--thumb { grid-template-columns: minmax(0, 1fr) 96px; }
  .sources-strip { padding: 20px 16px; }
  .cmt--reply { margin-left: 24px; }
  .sources li { flex-wrap: wrap; }
  .pagehead--desk { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

.small { font-size: 13px; line-height: 1.45; }

/* our news team strip (front page) and beat anchors (section pages) */
.team-strip { margin-top: 32px; padding: 20px 0 4px; border-top: 3px solid var(--ink, #111); }
.team-strip__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 20px; margin-top: 14px; }
.team-strip__p { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; padding: 6px 0; }
.team-strip__p > span { display: flex; flex-direction: column; min-width: 0; }
.team-strip__p strong { font-size: 15px; line-height: 1.2; }
.team-strip__p:hover strong { text-decoration: underline; }
.team-strip__p .person, .team-strip__p .desk-mark { width: 52px; height: 52px; flex: none; border-radius: 50%; object-fit: cover; }

.ainote { margin: 18px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted, #6b7178); }
.ainote a { color: inherit; }


/* =================== Network theme: Washington at night =================== */
body { font-size: 18px; }
a:hover { color: var(--red-text); }

/* utility bar + masthead + nav form one dark broadcast band */
.util { background: var(--night); border-bottom: 1px solid var(--night-3); color: #aeb8c7; font-family: var(--mono); font-size: 13.5px; letter-spacing: 0; }
.util a, .util .linkbtn { color: #d5dbe4; }
.util a:hover, .util .linkbtn:hover { color: #fff; }
.util__date { display: inline-flex; gap: 14px; }
.util__date > span + span { color: #8f9bad; }
.util .btn { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .02em; min-height: 30px; }
.btn--red { background: var(--red); border-color: var(--red); color: #fff; }
.btn--red:hover { background: #e02a38; border-color: #e02a38; color: #fff; }

.masthead { position: relative; overflow: hidden; color: #fff; isolation: isolate;
  background:
    radial-gradient(60% 90% at 50% 105%, rgba(59, 123, 255, .38), rgba(59, 123, 255, 0) 62%),
    radial-gradient(40% 60% at 8% 30%, rgba(208, 32, 46, .18), rgba(208, 32, 46, 0) 70%),
    linear-gradient(180deg, #050b16 0%, #0a1424 55%, #10223f 100%); }
.masthead--photo { background: linear-gradient(180deg, rgba(5, 11, 22, .80) 0%, rgba(5, 11, 22, .40) 55%, rgba(5, 11, 22, .85) 100%), var(--masthead-img) center 62% / cover no-repeat, var(--night); }
.masthead .skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(110px, 15vw, 300px); z-index: -1; }
.masthead--compact .skyline { height: 100%; opacity: .7; }
.masthead::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, rgba(208,32,46,0), var(--red) 20%, var(--red-light) 50%, var(--red) 80%, rgba(208,32,46,0)); }
.masthead--home .masthead__in { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(70px, 9vw, 120px); gap: 14px; }
.masthead--compact .masthead__in { padding-top: 18px; padding-bottom: 18px; }
.logo { color: #fff; font-family: var(--display); font-weight: 800; letter-spacing: .005em; line-height: .9; gap: .22em; }
.logo > span { background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, var(--silver) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 18px rgba(0, 0, 0, .6)); }
.logo:hover { color: #fff; }
.masthead--home .logo { flex-direction: column; gap: .12em; font-size: clamp(40px, 8.6vw, 128px); white-space: nowrap; }
.masthead--home .logo .bell { width: .52em; height: .52em; }
.masthead--compact .logo { font-size: 36px; }
.logo .bell { width: .74em; height: .74em; color: var(--red); filter: drop-shadow(0 2px 12px rgba(208, 32, 46, .45)); }
.logo__icon { width: .8em; height: .8em; border-radius: 18%; object-fit: cover; flex: none; }
.logo--image img { display: block; max-height: clamp(110px, 16vw, 190px); width: auto; max-width: min(92vw, 760px); filter: drop-shadow(0 6px 28px rgba(0, 0, 0, .45)); }
.tagline { display: flex; align-items: center; gap: 18px; font-family: var(--display); font-weight: 800; font-size: clamp(18px, 2.3vw, 30px); letter-spacing: .03em; text-transform: uppercase; color: var(--red-light); text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.tagline::before, .tagline::after { content: ''; width: clamp(28px, 7vw, 110px); height: 3px; background: var(--red); box-shadow: 0 0 12px rgba(208, 32, 46, .6); }
.masthead .search input { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .22); border-radius: 4px 0 0 4px; font-family: var(--mono); }
.masthead .search input::placeholder { color: #9aa6b8; }
.masthead .search button { background: var(--red); border-color: var(--red); color: #fff; border-radius: 0 4px 4px 0; }

.nav { background: var(--night); border-top: 0; border-bottom: 0; }
.nav__in { gap: 0 4px; font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: .01em; text-transform: none; }
.nav__in a { color: #dfe4eb; padding: 12px 12px 10px; border-bottom: 3px solid transparent; }
.nav__in a:hover { color: #fff; text-decoration: none; border-bottom-color: rgba(208, 32, 46, .6); }
.nav__in a[aria-current="page"] { color: #fff; border-bottom-color: var(--red); }

.ticker { background: var(--night-2); border-top: 1px solid var(--night-3); font-family: var(--display); font-weight: 600; font-size: 16.5px; letter-spacing: .01em; }
.ticker__in { flex-wrap: nowrap; gap: 26px; padding-top: 9px; padding-bottom: 9px; overflow-x: auto; scrollbar-width: none; }
.ticker__in::-webkit-scrollbar { display: none; }
.ticker a { white-space: nowrap; flex: none; }
.ticker__label { flex: none; }
.ticker a { color: #e9edf2; }
.ticker a:hover { color: var(--red-light); text-decoration: none; }
.ticker__label { background: var(--breaking); color: #fff; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .03em; text-transform: none; padding: 3px 10px; border-radius: 2px; }

/* section heads read like broadcast lower-thirds */
.colhead { position: relative; margin: 0 0 6px; padding: 12px 0 0; border-top: 3px solid var(--ink); font-family: var(--display); font-weight: 800; font-size: 27px; letter-spacing: .005em; text-transform: none; line-height: 1.05; }
.colhead::before { content: ''; position: absolute; left: 0; top: -3px; width: 64px; height: 3px; background: var(--red); }
.colhead--accent { border-top-color: var(--ink); }
.colhead--navy { border-top-color: var(--night); }
.colhead--thin { font-size: 23px; border-top-width: 2px; }
.colhead--thin::before { top: -2px; height: 2px; }
.colhead--plain { font-size: 23px; }
.colhead--plain::before { display: none; }

.hl { padding: 13px 0; gap: 5px; }
.hl__title, .hl--ours .hl__title { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.12; letter-spacing: .003em; color: var(--ink); }
.hl--hot .hl__title { color: var(--breaking); }
.hl__title:hover { color: var(--red-text); }
.meta { font-family: var(--mono); font-size: 13.5px; gap: 3px 14px; color: var(--muted); }
.kicker { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .01em; text-transform: none; color: var(--red-text); }
.brief__title { font-family: var(--display); font-weight: 800; font-size: 31px; line-height: 1.02; letter-spacing: .003em; }
.brief__dek, .lead__dek { font-family: var(--serif); }
.more { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .01em; text-transform: none; color: var(--red-text); }
.more--navy { color: var(--night); }
.note, .empty { font-family: var(--mono); font-size: 14.5px; }
.rank { font-family: var(--display); font-weight: 800; color: var(--red); }
.ranked a { font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.15; }

/* lead story */
.lead { gap: 16px; padding-top: 6px; padding-bottom: 38px; }
.badge { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: .04em; text-transform: none; padding: 5px 14px; background: var(--night); color: #fff; border-radius: 2px; }
.badge--breaking { background: var(--breaking); color: #fff; }
.lead__title { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 6vw, 82px); line-height: .96; letter-spacing: -.002em; text-transform: uppercase; }
.lead__title a:hover { color: var(--ink); text-decoration-color: var(--red); text-decoration-thickness: 4px; text-underline-offset: 8px; }
.lead__dek { font-size: 21px; }
.lead__img img { border-radius: 2px; }

/* buttons */
.btn { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .02em; text-transform: none; border-radius: 3px; }
.btn--outline { border-color: var(--ink); }
.btn--outline:hover { background: var(--night); border-color: var(--night); color: #fff; }
.btn--accent { background: var(--red); border-color: var(--red); color: #fff; }
.btn--accent:hover { background: #e02a38; border-color: #e02a38; color: #fff; }

/* page heads + labels */
.pagehead h1, .prose--page h2:first-child { font-family: var(--display); font-weight: 800; text-transform: none; letter-spacing: .003em; }
.label { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .01em; text-transform: none; color: var(--red-text); }
.article__title { font-family: var(--display); font-weight: 800; font-size: clamp(38px, 4.4vw, 60px); line-height: 1; letter-spacing: .002em; }
.sources h2, .keypoints h2, .sources-strip h2 { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: .005em; text-transform: none; }
.sources { border-top-color: var(--ink); }
.prose blockquote { border-left-color: var(--red); }
.prose .cite a { color: var(--red-text); font-family: var(--mono); }
.crumbs, .article__img figcaption, .chip, .flash, .preview-bar { font-family: var(--mono); }
.tag { border-color: var(--night); color: var(--night); font-family: var(--mono); }

/* anchors */
.desk-mark { background: var(--night); color: #fff; font-family: var(--display); font-weight: 800; }
.person, .desk-mark { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--red); }
.team-strip { border-top: 3px solid var(--ink); position: relative; }
.team-strip::before { content: ''; position: absolute; left: 0; top: -3px; width: 64px; height: 3px; background: var(--red); }
.team-strip h2 { font-family: var(--display); font-weight: 800; font-size: 27px; letter-spacing: .005em; text-transform: none; margin: 0; }
.team-strip__p strong { font-family: var(--display); font-weight: 700; font-size: 19px; }
.team-strip__p .person, .team-strip__p .desk-mark { width: 58px; height: 58px; font-size: 20px; }
.person-card { border-radius: 4px; }
.person-card h3 { font-family: var(--display); font-weight: 800; font-size: 24px; }

/* newsletter + footer */
.newsletter { background: var(--night-2); border-top: 3px solid var(--red); }
.newsletter h2 { font-family: var(--display); font-weight: 800; text-transform: none; letter-spacing: .005em; }
.footer { background: var(--silhouette); }
.footer__logo { font-family: var(--display); font-weight: 800; text-transform: none; letter-spacing: .005em; }

@media (max-width: 700px) {
  .wrap { padding: 0 18px; }
  .masthead--home .masthead__in { padding-bottom: 64px; }
  .masthead--compact .logo { font-size: 28px; }
  .nav__in { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav__in a { white-space: nowrap; }
  .hl__title, .hl--ours .hl__title { font-size: 21px; }
  .util__date > span + span { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* private preview */
.private-bar { background: #3d0d12; color: #ffd5d8; font-family: var(--mono); font-size: 13.5px; padding: 7px 0; }
.private-bar a { color: #fff; text-decoration: underline; }
body.gate { min-height: 100vh; margin: 0; display: grid; place-items: center; color: #fff; background-color: #000; position: relative; isolation: isolate; }
body.gate--photo::before { content: ''; position: fixed; inset: 0; z-index: -1; background:
  radial-gradient(75% 70% at 50% 45%, rgba(0, 0, 0, .15), rgba(0, 0, 0, .85) 75%, #000 100%),
  var(--gate-img, none) center 60% / cover no-repeat; filter: grayscale(1) contrast(1.08); }
body.gate .skyline { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 52vh; z-index: -2; filter: grayscale(1); }
body.gate .skyline g { fill: #3a3f48; }
body.gate .skyline > rect { opacity: .7; }
body.gate:not(.gate--photo)::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(90% 60% at 50% 100%, rgba(140,150,165,.22), rgba(0,0,0,0) 70%), linear-gradient(180deg, #000 0%, rgba(0,0,0,.9) 35%, rgba(0,0,0,0) 75%); }
body.gate:not(.gate--photo) .skyline { z-index: 0; }
body.gate .gate__in { position: relative; z-index: 1; }
.gate__in { width: min(92vw, 560px); text-align: center; padding: 48px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gate h1.gate__logo { line-height: 0; margin: 0 0 6px; }
.gate__logo img { display: block; margin: 0 auto; width: min(86vw, 560px); height: auto; filter: drop-shadow(0 10px 40px rgba(0, 0, 0, .7)); }
.gate__bell { width: 58px; height: 58px; color: var(--red); filter: drop-shadow(0 4px 18px rgba(208, 32, 46, .5)); }
.gate h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(46px, 9.5vw, 92px); line-height: .9; text-transform: uppercase; letter-spacing: .005em;
  background: linear-gradient(180deg, #fff 0%, #fff 45%, var(--silver) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 24px rgba(0,0,0,.8)); }
.gate__lede { margin: 0; display: flex; align-items: center; gap: 14px; font-family: var(--display); font-weight: 800; font-size: clamp(18px, 3vw, 24px); letter-spacing: .03em; text-transform: uppercase; color: var(--red-light); }
.gate__lede::before, .gate__lede::after { content: ''; width: 44px; height: 3px; background: var(--red); box-shadow: 0 0 12px rgba(208, 32, 46, .6); }
.gate__sub { margin: 0; font-family: var(--mono); font-size: 16px; color: #c4ccd8; }
.gate__forms { width: 100%; margin-top: 22px; display: grid; gap: 16px; }
.gate__form { width: 100%; display: flex; flex-direction: column; gap: 10px; text-align: left; font-family: var(--mono); background: rgba(5, 10, 20, .72); border: 1px solid rgba(255, 255, 255, .14); border-top: 3px solid var(--red); border-radius: 6px; padding: 18px 18px 16px; backdrop-filter: blur(6px); }
.gate__form h2 { margin: 0 0 2px; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: .01em; }
.gate__form label { font-size: 14px; color: #c7d0dc; }
.gate__row { display: flex; gap: 8px; }
.gate__form input { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07); color: #fff; font: 17px var(--mono); }
.gate__form input:focus-visible { outline: 3px solid var(--glow); outline-offset: 1px; }
.gate__form .btn { min-height: 46px; white-space: nowrap; }
.gate__err { margin: 2px 0 0; color: #ffb4b4; font-size: 14px; }

/* Home banner at one-third of its earlier height (owner request, Nov 2026) */
.masthead--home .masthead__in { padding-top: clamp(12px, 1.6vw, 20px); padding-bottom: clamp(12px, 1.6vw, 20px); gap: 6px; }
.masthead--home .logo--image img { max-height: clamp(56px, 6.4vw, 92px); }
.masthead--home .logo { font-size: clamp(28px, 4vw, 52px); }
.masthead--home .tagline { font-size: clamp(12px, 1.15vw, 15px); gap: 12px; }
.masthead--home .tagline::before, .masthead--home .tagline::after { width: clamp(18px, 3vw, 48px); height: 2px; }
.masthead--home .skyline { height: 100%; }
/* Big glowing emblem on the left of the home banner, hanging over the menu bar; the wordmark stays centered */
.masthead--home { --bh: clamp(150px, 13.5vw, 210px); }
.masthead--home .masthead__in { position: relative; min-height: var(--bh); justify-content: center; }
/* Animated DC backdrop: the photo is sized by the banner's height so the whole Capitol always shows,
   with a slow cinematic push-in and a soft beam of light drifting across the night sky */
.masthead--home.masthead--photo { background: #000; }
.masthead__bg { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.masthead--compact .masthead__bg { display: none; }
.masthead__bg::before { content: ''; position: absolute; inset: 0; background: var(--masthead-img) center 47% / auto 380% no-repeat; transform-origin: 50% 60%; animation: lbr-pushin 28s ease-in-out infinite alternate; will-change: transform; }
.masthead__bg::after { content: ''; position: absolute; inset: 0; background:
    linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(190, 210, 255, .10) 47%, rgba(255, 255, 255, .16) 50%, rgba(190, 210, 255, .10) 53%, rgba(255, 255, 255, 0) 62%) 0 0 / 300% 100% no-repeat,
    linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .06) 45%, rgba(0, 0, 0, .5) 100%),
    linear-gradient(90deg, #000 calc(50% - 2.85 * var(--bh)), rgba(0, 0, 0, 0) calc(50% - 2.3 * var(--bh)), rgba(0, 0, 0, 0) calc(50% + 2.3 * var(--bh)), #000 calc(50% + 2.85 * var(--bh)));
  animation: lbr-beam 11s linear infinite; }
@keyframes lbr-pushin { from { transform: scale(1); } to { transform: scale(1.07) translateX(-1%); } }
@keyframes lbr-beam { 0% { background-position: 100% 0, 0 0, 0 0; } 55%, 100% { background-position: 0% 0, 0 0, 0 0; } }
.logo__mark { position: relative; display: inline-block; flex: none; width: .8em; height: .8em; }
.logo__mark .logo__icon { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; box-shadow: none; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .35)) drop-shadow(0 0 10px rgba(90, 150, 255, .55)); }
/* a glint of light that sweeps across the emblem every few seconds */
.logo__mark::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 58%) no-repeat; background-size: 300% 100%; background-position: 100% 0;
  -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; animation: lbr-shimmer 5s ease-in-out infinite; }
/* soft light radiating behind it */
.masthead--home .logo__mark, .gate__mark { z-index: 2; }
.masthead--home .logo__mark::before, .gate__mark::before { content: ''; position: absolute; inset: -22%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(170, 205, 255, .55), rgba(59, 123, 255, .22) 55%, rgba(59, 123, 255, 0)); animation: lbr-radiate 3.4s ease-in-out infinite alternate; }
.masthead--home .logo__mark .logo__icon, .gate__mark .logo__icon { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .5)) drop-shadow(0 0 20px rgba(90, 150, 255, .75)) drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
.masthead--home .logo__mark { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); width: clamp(96px, 11vw, 150px); height: clamp(96px, 11vw, 150px); }
.gate__mark { display: block; width: 132px; height: 132px; margin: 0 auto 4px; }
@keyframes lbr-shimmer { 0% { background-position: 100% 0; } 32%, 100% { background-position: 0% 0; } }
@keyframes lbr-radiate { from { opacity: .5; transform: scale(.92); } to { opacity: 1; transform: scale(1.08); } }
@media (min-width: 1200px) {
  .masthead--home { overflow: visible; z-index: 3; }
  .masthead--home { --mk: min(calc(var(--bh) + 14px), 190px); }
  .masthead--home .logo__mark { top: calc(var(--bh) + 28px - var(--mk)); transform: none; width: var(--mk); height: var(--mk); }
  .masthead--home .nav .nav__in { padding-left: 150px; }
  .masthead--home .nav .nav__in a { padding-left: 9px; padding-right: 9px; }
}
@media (max-width: 1199px) {
  .masthead--home .logo { flex-direction: column; }
  .masthead--home .logo .logo__mark { position: static; transform: none; width: clamp(64px, 12vw, 110px); height: clamp(64px, 12vw, 110px); }
}
@media (prefers-reduced-motion: reduce) {
  .masthead__bg::before, .masthead__bg::after { animation: none; }
  .logo__mark::after { display: none; }
  .masthead--home .logo__mark::before, .gate__mark::before { animation: none; }
}
}
.masthead--home .tagline { text-shadow: 0 1px 2px #000, 0 0 10px #000, 0 0 18px rgba(0, 0, 0, .9); }

/* ===================== Sponsor ads ===================== */
.ad { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 28px auto; max-width: 100%; }
.ad__label { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8b94a3; }
.ad__link { display: block; line-height: 0; max-width: 100%; }
.ad__link img { display: block; max-width: 100%; height: auto; border-radius: 2px; }
.ad--banner .ad__link img { width: 970px; max-height: 250px; object-fit: contain; }
.ad--box .ad__link img { width: 300px; max-height: 250px; object-fit: contain; }
.ad--tall .ad__link img { width: 300px; max-height: 600px; object-fit: contain; }
/* "Advertise with us" house ad: quiet, on-brand, never louder than the news */
.ad__house { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; color: #fff; text-decoration: none; border-radius: 4px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(59, 123, 255, .22), rgba(59, 123, 255, 0) 55%), linear-gradient(180deg, #0d1626, #05080f); border: 1px solid rgba(201, 210, 222, .18); }
.ad__house:hover { text-decoration: none; color: #fff; border-color: rgba(208, 32, 46, .7); }
.prose .ad a, .prose .ad a:hover { text-decoration: none; color: #fff; }
.ad__mark { width: 46px; height: 46px; object-fit: contain; flex: none; filter: drop-shadow(0 0 10px rgba(90, 150, 255, .5)); }
.ad__copy { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.ad__copy strong { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: .01em; text-transform: uppercase; line-height: 1; }
.ad__copy span { font-family: var(--mono); font-size: 13.5px; color: #c9d2de; }
.ad__cta { flex: none; font-family: var(--display); font-weight: 700; font-size: 15px; background: var(--red); color: #fff; padding: 8px 14px; border-radius: 3px; }
.ad--banner { width: 100%; }
.ad--banner .ad__house { max-width: 970px; min-height: 96px; padding: 14px 22px; }
.ad--box .ad__house, .ad--tall .ad__house { width: 300px; max-width: 100%; height: 250px; flex-direction: column; text-align: center; padding: 22px; gap: 12px; }
.ad--box .ad__copy, .ad--tall .ad__copy { text-align: center; align-items: center; }
.ad--box .ad__mark { width: 64px; height: 64px; }
.adbar { background: #eef0f3; border-bottom: 1px solid var(--rule); }
.adbar .ad { margin: 0 auto; padding: 14px 0; }
.ad--inline { margin: 30px auto; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); width: 100%; }
.ad--end { margin: 34px auto 6px; }
.col--ad .ad { margin: 0 auto; }
.rail .ad { margin: 0 auto; }
.rail__sticky { position: sticky; top: 16px; }

/* ===================== Fox-style article page ===================== */
.article__kicker { display: inline-block; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--red-text, #b5121f); text-decoration: none; }
.article__kicker:hover { text-decoration: underline; }
.share { align-items: center; }
.share__b { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rule); background: #fff; color: var(--ink); cursor: pointer; padding: 0; }
.share__b:hover { background: var(--ink); color: #fff; border-color: var(--ink); text-decoration: none; }
.share__b--fb:hover { background: #1877f2; border-color: #1877f2; }
.share__b--native { display: none; }
.share__c { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 18px; background: var(--night, #0a1424); color: #fff; font-family: var(--display); font-weight: 700; font-size: 15px; }
.share__c:hover { color: #fff; text-decoration: none; background: var(--red); }
.related-inline { font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.3; }
.related-inline span { color: var(--red); text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; }
.related-inline a { color: var(--ink); }
.more-stories { margin-top: 30px; }
.card3-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.card3 { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.card3__img { position: relative; display: block; line-height: 0; border-radius: 3px; overflow: hidden; background: #0a1424; }
.card3__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .4s ease; }
.card3__img:hover img { transform: scale(1.04); }
.card3__tag { position: absolute; left: 8px; bottom: 8px; line-height: 1; background: rgba(10, 20, 36, .88); color: #fff; font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 2px; }
.card3__title { margin: 0; font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.15; }
.card3__title a { color: var(--ink); }

/* ===================== Fox-style lead story on the front page ===================== */
.lead__text { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lead--img { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 30px; align-items: center; text-align: left; }
.lead--img .lead__img { max-width: none; }
.lead--img .lead__text { align-items: flex-start; }
.lead--img .meta--center { justify-content: flex-start; }
.lead--img { align-items: start; }
.lead--img .lead__title { font-size: clamp(30px, 3.3vw, 50px); line-height: 1.02; }
.lead--img .lead__dek { font-size: 18px; }

/* ===================== Advertise page ===================== */
.adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 26px; }
.adv-card { border: 1px solid var(--rule); border-top: 4px solid var(--red); border-radius: 4px; padding: 16px; background: #fff; }
.adv-card h2 { margin: 0 0 4px; font-family: var(--display); font-weight: 800; font-size: 24px; }
.adv-card__size { margin: 0 0 8px; font-family: var(--mono); font-weight: 600; color: var(--red-text, #b5121f); }
.adv-card p { margin: 0; }

/* ===================== Phones and tablets: flows like an app ===================== */
.tabbar { display: none; }
@media (max-width: 1023px) {
  .lead--img { grid-template-columns: 1fr; gap: 18px; }
  .card3-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card3-row .card3:nth-child(3) { display: none; }
  .rail__sticky { position: static; }
}
@media (max-width: 700px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); -webkit-tap-highlight-color: transparent; }
  .util { display: none; }
  .private-bar { font-size: 12.5px; }
  /* front-page banner: emblem, name and tagline stacked, sized for a phone */
  .masthead--home { --bh: 150px; }
  .masthead--home .masthead__in { padding-top: 14px; padding-bottom: 14px; gap: 4px; }
  .masthead--home .logo { font-size: 30px; gap: 6px; }
  .masthead--home .logo .logo__mark { width: 58px; height: 58px; }
  .masthead--home .tagline { font-size: 10.5px; letter-spacing: .03em; gap: 8px; text-align: center; }
  .masthead--home .tagline::before, .masthead--home .tagline::after { width: 12px; }
  .masthead--compact .masthead__in { padding-top: 10px; padding-bottom: 10px; }
  .masthead--compact .search { display: none; }
  /* section menu: a sticky row of swipeable chips */
  .nav { position: sticky; top: 0; z-index: 40; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
  .masthead--home .nav .nav__in { padding-left: 12px; }
  .nav__in { gap: 8px; padding: 9px 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .nav__in::-webkit-scrollbar { display: none; }
  .nav__in a, .masthead--home .nav .nav__in a { flex: none; scroll-snap-align: start; padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 15px; line-height: 1; }
  .nav__in a[aria-current="page"] { background: var(--red); color: #fff; }
  /* cards and article */
  .page { padding-top: 16px; }
  .lead { padding-bottom: 24px; }
  .lead__title { font-size: 29px; line-height: 1.08; }
  .article__title { font-size: 31px; line-height: 1.08; }
  .prose { font-size: 18px; }
  .byline { padding: 12px 0; }
  .share__b--native { display: inline-flex; }
  .card3-row { grid-template-columns: 1fr; gap: 18px; }
  .card3-row .card3:nth-child(3) { display: grid; }
  .card3 { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 12px; align-items: start; }
  .card3__img { grid-row: span 2; }
  .card3__tag { display: none; }
  .card3__title { font-size: 18px; }
  /* ads sized for a phone */
  .adbar .ad { padding: 10px 0; }
  .ad--banner .ad__house { min-height: 74px; padding: 10px 12px; gap: 10px; }
  .ad--banner .ad__mark { width: 34px; height: 34px; }
  .ad--banner .ad__copy strong { font-size: 17px; }
  .ad--banner .ad__copy span { font-size: 12px; }
  .ad--banner .ad__cta { display: none; }
  /* bottom tab bar, like a news app */
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(3, 6, 12, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, .1); }
  .tabbar__a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px; color: #9aa6b8; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-decoration: none; list-style: none; cursor: pointer; position: relative; }
  .tabbar__a::-webkit-details-marker { display: none; }
  .tabbar__a:hover, .tabbar__a[aria-current="page"], .tabbar__more[open] > .tabbar__a { color: #fff; text-decoration: none; }
  .tabbar__a[aria-current="page"]::before { content: ''; position: absolute; top: -6px; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--red); }
  .tabbar__more { display: block; min-width: 0; }
  .tabbar__more > summary { list-style: none; }
  .tabbar__sheet { position: fixed; left: 10px; right: 10px; bottom: calc(70px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px;
    background: #0b1220; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; box-shadow: 0 -10px 40px rgba(0, 0, 0, .55); animation: lbr-sheet .18s ease-out; }
  .tabbar__sheet strong { grid-column: 1 / -1; color: #fff; font-family: var(--display); font-size: 20px; }
  .tabbar__sheet a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: #e6ebf2; font-family: var(--display); font-weight: 600; font-size: 16px; text-decoration: none; }
  .tabbar__sheet a[aria-current="page"] { background: var(--red); color: #fff; }
  @keyframes lbr-sheet { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (max-width: 420px) {
  .masthead--home .tagline::before, .masthead--home .tagline::after { display: none; }
}

/* Coming-soon screen: much bigger emblem, the name on one line, everything raised up */
body.gate { place-items: start center; }
.gate__in { padding: clamp(14px, 3vh, 36px) 0 32px; gap: 10px; width: min(92vw, 600px); }
.gate__mark { width: clamp(190px, 32vh, 300px); height: clamp(190px, 32vh, 300px); margin: 0 auto -4px; }
.gate h1 { white-space: nowrap; font-size: clamp(28px, 6.4vw, 60px); line-height: 1; }
.gate__forms { margin-top: 12px; }

/* =====================================================================
   Big-screen, movie-style front page
   ===================================================================== */
:root { --hot: #ff1f2d; --hot-2: #e0101f; --hot-3: #a3000c; --electric: #2f7bff; --electric-2: #6aa6ff; }

/* top bar sits transparently over the banner photo */
@media (min-width: 701px) {
  .util { position: absolute; top: 0; left: 0; right: 0; z-index: 6; background: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)); border-bottom: 0; color: #dfe5ee; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
  .util a, .util .linkbtn { color: #e8edf4; }
  .util a:hover, .util .linkbtn:hover { color: #fff; }
  .masthead { padding-top: 38px; }
}
/* a line of light between the photo and the menu */
.masthead::after { height: 3px; background: linear-gradient(90deg, rgba(106, 166, 255, 0), var(--electric-2) 18%, #fff 50%, var(--electric-2) 82%, rgba(106, 166, 255, 0)); box-shadow: 0 0 18px rgba(106, 166, 255, .9); }

/* section menu: bright broadcast red */
.nav { background: linear-gradient(180deg, #ff3340 0%, var(--hot-2) 52%, var(--hot-3) 100%); border-bottom: 2px solid #ff6b74; box-shadow: 0 8px 28px rgba(224, 16, 31, .5), inset 0 1px 0 rgba(255, 255, 255, .45); }
.nav__in a { color: #fff; font-weight: 700; text-shadow: 0 1px 1px rgba(80, 0, 6, .5); border-bottom-color: transparent; transition: background .15s, color .15s; }
.nav__in a:hover { color: #fff; background: rgba(255, 255, 255, .16); border-bottom-color: #fff; }
.nav__in a[aria-current="page"] { color: var(--hot-2); background: #fff; border-bottom-color: #fff; text-shadow: none; box-shadow: 0 0 22px rgba(255, 255, 255, .55); }
.ticker { background: #05080f; border-top: 0; }

.page--front { gap: 34px; padding-top: 26px; }
.tag-pill { display: inline-block; align-self: flex-start; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--hot-2); padding: 5px 10px 4px; border-radius: 2px; box-shadow: 0 0 18px rgba(255, 31, 45, .55); }
.tag-pill--live { background: linear-gradient(90deg, var(--hot), var(--hot-3)); animation: lbr-live 2.4s ease-in-out infinite; }
@keyframes lbr-live { 50% { box-shadow: 0 0 30px rgba(255, 31, 45, .95); } }
.sechead { margin: 0 0 12px; font-family: var(--display); font-weight: 800; font-size: clamp(26px, 2.6vw, 38px); line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: var(--ink);
  display: flex; align-items: center; gap: 14px; }
.sechead::before { content: ''; width: 8px; height: 1em; background: linear-gradient(180deg, var(--hot), var(--electric)); box-shadow: 0 0 14px rgba(255, 31, 45, .5); border-radius: 2px; }

/* row 1: main slider + Trending News */
.front-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.front-top--solo { grid-template-columns: 1fr; }
.slider { position: relative; overflow: hidden; border-radius: 6px; background: #000; min-height: 440px; isolation: isolate;
  box-shadow: 0 0 0 2px var(--electric), 0 18px 50px rgba(0, 0, 0, .35), 0 0 40px rgba(47, 123, 255, .35); }
.slider__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.slider__track::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; min-height: 440px; }
.slide__link { position: absolute; inset: 0; display: block; color: #fff; overflow: hidden; }
.slide__link:hover { color: #fff; text-decoration: none; }
.slide__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 40%; animation: lbr-kenburns 22s ease-in-out infinite alternate; }
.slide__link::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.slide__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 10px; padding: 70px 160px 26px 28px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, 0) 100%); }
.slide__cap::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--electric), var(--electric-2) 60%, rgba(106, 166, 255, 0)); box-shadow: 0 0 22px rgba(47, 123, 255, .9); }
.slide__title { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 3.5vw, 58px); line-height: .95; text-transform: uppercase; letter-spacing: .005em; text-shadow: 0 4px 30px rgba(0, 0, 0, .8); max-width: 20ch; }
.slide__link:hover .slide__title { text-decoration: underline; text-decoration-color: var(--hot); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.slide__dek { font-size: 17px; line-height: 1.4; color: #dbe3ee; max-width: 60ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slide__meta, .ocard__meta, .trend__text .meta { font-family: var(--mono); font-size: 13px; color: #b7c2d3; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.slide.is-on .slide__cap > * { animation: lbr-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.slide.is-on .slide__cap > :nth-child(2) { animation-delay: .08s; }
.slide.is-on .slide__cap > :nth-child(3) { animation-delay: .16s; }
.slider__mark { position: absolute; right: 22px; bottom: 18px; z-index: 3; width: clamp(80px, 9vw, 124px); height: auto; pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, .45)) drop-shadow(0 0 22px rgba(90, 150, 255, .85)); }
.slider__btn { position: absolute; top: 42%; z-index: 4; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .45);
  color: #fff; font-size: 30px; line-height: 1; cursor: pointer; backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s, background .2s; }
.slider:hover .slider__btn, .slider__btn:focus-visible { opacity: 1; }
.slider__btn:hover { background: var(--hot-2); border-color: var(--hot-2); }
.slider__btn--prev { left: 14px; } .slider__btn--next { right: 14px; }
.slider__dots { position: absolute; top: 16px; right: 18px; z-index: 4; display: flex; gap: 6px; }
.slider__dot { width: 26px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .4); }
.slider__dot.is-on { background: #fff; box-shadow: 0 0 10px #fff; }
@keyframes lbr-kenburns { from { transform: scale(1.02); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
@keyframes lbr-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.trend { display: flex; flex-direction: column; min-width: 0; background: #070b14; border-radius: 6px; padding: 14px; color: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25); background-image: radial-gradient(90% 60% at 100% 0%, rgba(47, 123, 255, .25), rgba(47, 123, 255, 0) 70%), radial-gradient(70% 50% at 0% 100%, rgba(255, 31, 45, .22), rgba(255, 31, 45, 0) 70%); }
.trend__head { margin: 2px 4px 12px; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: .14em; text-transform: uppercase; color: #fff; display: flex; align-items: center; gap: 10px; }
.trend__head::before { content: ''; flex: none; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fff 0 14%, #ff6a72 30%, #ff1f2d 62%, #c4000f 100%);
  box-shadow: 0 0 0 0 rgba(255, 31, 45, .7), 0 0 10px 2px rgba(255, 31, 45, .95), 0 0 26px 6px rgba(255, 31, 45, .55); animation: lbr-beacon 1.5s ease-out infinite; }
@keyframes lbr-beacon {
  0% { box-shadow: 0 0 0 0 rgba(255, 31, 45, .75), 0 0 10px 2px rgba(255, 31, 45, .95), 0 0 26px 6px rgba(255, 31, 45, .55); }
  55% { box-shadow: 0 0 0 11px rgba(255, 31, 45, 0), 0 0 16px 4px rgba(255, 50, 60, 1), 0 0 40px 12px rgba(255, 31, 45, .7); }
  100% { box-shadow: 0 0 0 0 rgba(255, 31, 45, 0), 0 0 10px 2px rgba(255, 31, 45, .95), 0 0 26px 6px rgba(255, 31, 45, .55); } }
.trend__list { list-style: none; margin: 0; padding: 0 8px 0 0; display: grid; grid-auto-rows: 118px; gap: 10px; flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--hot) rgba(255, 255, 255, .08); }
/* Desktop: four stories fill the box beside the slider; the rest scroll */
@media (min-width: 1024px) { @supports (height: 1cqh) { .front-top > .trend { container-type: size; } .front-top > .trend .trend__list { grid-auto-rows: calc((100cqh - 100px) / 4); } } }
.trend__list::-webkit-scrollbar { width: 6px; }
.trend__list::-webkit-scrollbar-track { background: rgba(255, 255, 255, .06); border-radius: 3px; }
.trend__list::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ff4b55, #c4000f); border-radius: 3px; box-shadow: 0 0 8px rgba(255, 31, 45, .8); }
.trend__item a { display: flex; height: 100%; min-height: 86px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); border-radius: 4px; overflow: hidden; color: #fff; transition: transform .2s, background .2s, box-shadow .2s; }
.trend__item--flip a { flex-direction: row-reverse; }
.trend__item a:hover { text-decoration: none; transform: translateY(-2px); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px var(--hot), 0 8px 26px rgba(255, 31, 45, .3); }
.trend__thumb { position: relative; flex: 0 0 34%; line-height: 0; overflow: hidden; }
.trend__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.trend__item a:hover .trend__thumb img { transform: scale(1.08); }
.trend__n { position: absolute; left: 6px; top: 6px; line-height: 1; font-family: var(--display); font-weight: 800; font-size: 22px; color: #fff; background: var(--hot-2); padding: 3px 8px; border-radius: 2px; }
.trend__text { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 14px; min-width: 0; }
.trend__text strong { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* row 2: Today's Top Stories column, spotlight, Latest Stories */
.front-mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 26px; align-items: stretch; }
.topcol { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.front-mid__main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.vscroll { flex: 1 1 0; min-height: 0; max-height: 1100px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 2px 14px 2px 0;
  scrollbar-width: thin; scrollbar-color: var(--electric) rgba(47, 123, 255, .12); overscroll-behavior: contain; }
.topcol .vscroll { border-right: 4px solid rgba(47, 123, 255, .18); }
.vscroll::-webkit-scrollbar { width: 8px; }
.vscroll::-webkit-scrollbar-track { background: rgba(47, 123, 255, .12); border-radius: 4px; }
.vscroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--electric-2), var(--electric)); border-radius: 4px; }
.ocard { position: relative; flex: none; border-radius: 6px; overflow: hidden; background: #000; isolation: isolate; }
.ocard a { display: block; position: relative; color: #fff; }
.ocard a:hover { color: #fff; text-decoration: none; }
.ocard img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s ease; }
.ocard a:hover img { transform: scale(1.07); }
.ocard__cap { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 7px; padding: 46px 16px 14px; background: linear-gradient(0deg, rgba(0, 0, 0, .92), rgba(0, 0, 0, .5) 60%, rgba(0, 0, 0, 0)); }
.ocard__title { font-family: var(--display); font-weight: 800; font-size: 21px; line-height: 1.02; text-transform: uppercase; text-shadow: 0 2px 16px rgba(0, 0, 0, .8); }
.ocard a:hover .ocard__title { color: #fff; text-decoration: underline; text-decoration-color: var(--hot); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.ocard::after { content: ''; position: absolute; inset: 0; border-radius: 6px; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: box-shadow .2s; }
.ocard:hover::after { box-shadow: inset 0 0 0 2px var(--hot), 0 0 26px rgba(255, 31, 45, .45); }
.ocard--big { box-shadow: 0 0 0 2px var(--electric), 0 0 36px rgba(47, 123, 255, .3); }
.ocard--big img { aspect-ratio: 16 / 9; animation: lbr-kenburns 26s ease-in-out infinite alternate; }
.ocard--big .ocard__cap { padding: 90px 26px 24px; }
.ocard--big .ocard__title { font-size: clamp(28px, 3vw, 48px); line-height: .95; max-width: 22ch; }
.ocard__dek { font-size: 16px; color: #dbe3ee; max-width: 62ch; }
.latest { display: flex; flex-direction: column; min-height: 0; }
.vscroll--list { list-style: none; margin: 0; max-height: 520px; padding: 0 0 0 16px; gap: 10px; border-left: 4px solid var(--electric); box-shadow: -6px 0 18px -8px rgba(47, 123, 255, .6); }
.row { display: flex; gap: 14px; align-items: stretch; min-height: 84px; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: #fff; color: var(--ink); transition: transform .2s, box-shadow .2s, border-color .2s; }
.row:hover { text-decoration: none; transform: translateX(4px); border-color: var(--hot); box-shadow: 0 8px 24px rgba(255, 31, 45, .18); }
.row__thumb { flex: 0 0 132px; line-height: 0; background: #000; }
.row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.row__text { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 12px 8px 0; min-width: 0; }
.row__kicker { font-family: var(--display); font-weight: 800; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--hot-2); }
.row__text strong { font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* anchors band: a dark "cast" strip */
.team-strip--cast { border-top: 0; color: #fff; background: #04070d; box-shadow: 0 0 0 100vmax #04070d; clip-path: inset(0 -100vmax); padding: 34px 0 30px; margin-top: 10px;
  background-image: radial-gradient(60% 120% at 0% 0%, rgba(255, 31, 45, .2), rgba(255, 31, 45, 0) 60%), radial-gradient(60% 120% at 100% 100%, rgba(47, 123, 255, .22), rgba(47, 123, 255, 0) 60%); }
.team-strip--cast::before { display: none; }
.team-strip--cast h2 { color: #fff; font-size: clamp(28px, 3vw, 40px); text-transform: uppercase; }
.team-strip--cast .meta, .team-strip--cast a { color: #cdd6e3; }
.team-strip--cast .team-strip__p strong { color: #fff; }
.team-strip--cast .person, .team-strip--cast .desk-mark { box-shadow: 0 0 0 2px #04070d, 0 0 0 4px var(--hot), 0 0 22px rgba(255, 31, 45, .5); }
.newsletter { background: #04070d radial-gradient(80% 140% at 100% 0%, rgba(47, 123, 255, .28), rgba(47, 123, 255, 0) 60%); border-top: 3px solid var(--hot); }

/* things glide into view as you scroll */
.rv-on .rv { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.rv-on .rv.in { opacity: 1; transform: none; }

@media (max-width: 1023px) {
  .front-top { grid-template-columns: 1fr; }
  .trend__list { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; flex: none; max-height: 640px; }
  .front-mid { grid-template-columns: 1fr; }
  .topcol .vscroll { flex: none; max-height: none; flex-direction: row; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; border-right: 0; padding: 0 0 10px; border-bottom: 4px solid rgba(47, 123, 255, .18); }
  .topcol .ocard { flex: 0 0 min(72%, 340px); scroll-snap-align: start; }
  .vscroll::-webkit-scrollbar { height: 6px; }
}
@media (max-width: 700px) {
  .page--front { padding-top: 14px; gap: 26px; }
  .slider, .slide { min-height: 0; }
  .slide { aspect-ratio: 4 / 5; max-height: 72vh; }
  .slide__cap { padding: 60px 18px 20px; }
  .slide__title { font-size: 30px; }
  .slide__dek { display: none; }
  .slider__mark { width: 64px; top: 14px; left: 14px; right: auto; bottom: auto; }
  .slider__dots { top: auto; bottom: 10px; right: 50%; transform: translateX(50%); }
  .trend__list { grid-template-columns: 1fr; max-height: 452px; }
  .trend__item a { min-height: 92px; }
  .ocard--big .ocard__cap { padding: 60px 16px 16px; }
  .ocard--big .ocard__title { font-size: 26px; }
  .ocard__dek { display: none; }
  .vscroll--list { max-height: none; overflow: visible; padding-left: 12px; }
  .row__thumb { flex-basis: 108px; }
  .row__text strong { font-size: 17px; }
  .nav { background: linear-gradient(180deg, #ff3340, var(--hot-3)); }
  .nav__in a, .masthead--home .nav .nav__in a { background: rgba(255, 255, 255, .18); color: #fff; }
  .nav__in a[aria-current="page"] { background: #fff; color: var(--hot-2); }
}
@media (prefers-reduced-motion: reduce) {
  .slide__img, .ocard--big img { animation: none; }
  .rv-on .rv { opacity: 1; transform: none; transition: none; }
}
.share__b.is-done { background: #1f8f4e; border-color: #1f8f4e; color: #fff; }
.front-mid--solo { grid-template-columns: 1fr; }
.front-mid--solo .front-mid__main { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 1023px) { .front-mid--solo .front-mid__main { grid-template-columns: 1fr; } }
.vscroll--list { flex: none; }

/* Network-style footer with our emblem */
.footer--net { background: #0b1d3a linear-gradient(180deg, #0f2550, #081429); border-top: 3px solid var(--hot, #e0101f); color: #a9bad3; }
.footer__net { display: flex; align-items: flex-start; gap: 22px; padding-top: 26px; padding-bottom: 30px; }
.footer__mark { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; text-decoration: none; }
.footer__mark img, .footer__mark .bell { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(106, 166, 255, .45)); }
.footer__mark span { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #cfdaea; }
.footer__mark:hover { text-decoration: none; color: #fff; }
.footer__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 4px; }
.footer--net .footer__links { display: flex; flex-wrap: wrap; gap: 6px 0; font-family: var(--mono); font-size: 16px; }
.footer--net .footer__links a { color: #fff; padding: 0 12px; border-left: 1px solid rgba(255, 255, 255, .28); line-height: 1.1; }
.footer--net .footer__links a:first-child { padding-left: 0; border-left: 0; }
.footer--net .footer__links a:hover { color: #fff; text-decoration: underline; }
.footer__legal { margin: 0; font-family: var(--mono); font-size: 15px; line-height: 1.55; color: #9fb2cd; max-width: 1100px; }
.footer__legal a { color: #fff; }
@media (max-width: 700px) {
  .footer__net { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .footer--net .footer__links { justify-content: center; font-size: 15px; gap: 10px 0; }
  .footer__legal { font-size: 13.5px; }
}

/* =====================================================================
   Menu bar: dark red glass over the banner photo, with a "More" menu
   ===================================================================== */
.masthead { overflow: visible; }
.masthead::after { display: none; }
.masthead .nav { position: relative; z-index: 1; margin-top: 0;
  background: linear-gradient(180deg, rgba(150, 12, 26, .58) 0%, rgba(105, 6, 17, .70) 55%, rgba(58, 2, 9, .84) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, .22); border-bottom: 1px solid rgba(255, 90, 100, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 30px rgba(0, 0, 0, .35); }
.masthead .nav::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(106, 166, 255, 0), rgba(106, 166, 255, .9) 18%, #fff 50%, rgba(106, 166, 255, .9) 82%, rgba(106, 166, 255, 0)); box-shadow: 0 0 16px rgba(106, 166, 255, .8); }
.masthead--home.masthead--photo { background: #000; }
.masthead--compact.masthead--photo { background-position: 0 0, center 70%; }
.nav__in { display: flex; align-items: stretch; flex-wrap: nowrap; gap: 0; justify-content: center; }
.nav__links { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.nav__links::-webkit-scrollbar { display: none; }
.nav__links a, .nav__more > summary { flex: none; white-space: nowrap; color: #fff; font-family: var(--display); font-weight: 700; font-size: 17px; padding: 12px 11px 10px; border-bottom: 3px solid transparent; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.nav__links a:hover, .nav__more > summary:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, .10); border-bottom-color: rgba(255, 255, 255, .7); }
.nav__links a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .14); border-bottom-color: #fff; text-shadow: 0 0 14px rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.nav__live { display: inline-flex; align-items: center; gap: 7px; }
.nav__dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3b47; box-shadow: 0 0 10px #ff3b47; animation: lbr-live 1.6s ease-in-out infinite; }
.nav__more { position: relative; flex: none; }
.nav__more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; border-left: 1px solid rgba(255, 255, 255, .18); }
.nav__more > summary::-webkit-details-marker { display: none; }
.nav__more[open] > summary { background: rgba(255, 255, 255, .14); border-bottom-color: #fff; }
.nav__mega { position: absolute; right: 0; top: 100%; z-index: 70; width: min(760px, 94vw); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; padding: 14px;
  background: rgba(10, 6, 12, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .12); border-top: 3px solid #d0202e; border-radius: 0 0 10px 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.nav__mega a { color: #e9edf3; font-family: var(--display); font-weight: 600; font-size: 16px; padding: 8px 10px; border-radius: 6px; }
.nav__mega a:hover, .nav__mega a[aria-current="page"] { background: rgba(208, 32, 46, .85); color: #fff; text-decoration: none; }
@media (min-width: 1200px) {
  .masthead--home .nav .nav__in { padding-left: 150px; }
}
/* bigger name on the front-page banner (desktop) */
@media (min-width: 1024px) {
  .masthead--home { --bh: clamp(170px, 15vw, 250px); }
  .masthead--home .logo { font-size: clamp(52px, 5.8vw, 92px); }
  .masthead--home .tagline { font-size: clamp(14px, 1.35vw, 20px); }
}
@media (max-width: 700px) {
  .masthead .nav { position: relative; top: auto; }
  .nav__in { padding: 8px 0 8px 12px; gap: 8px; justify-content: flex-start; }
  .nav__links { gap: 8px; }
  .nav__links a, .nav__more > summary { padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 15px; line-height: 1; }
  .nav__links a[aria-current="page"] { background: #fff; color: #b5121f; text-shadow: none; }
  .nav__more > summary { margin-right: 12px; }
  .nav__mega { position: fixed; left: 8px; right: 8px; top: auto; width: auto; grid-template-columns: 1fr 1fr; border-radius: 12px; max-height: 60vh; overflow-y: auto; }
}
.masthead { z-index: 20; }
.masthead .nav .nav__mega a { border: 0; padding: 8px 10px; border-radius: 6px; background: none; color: #e9edf3; font-size: 16px; line-height: 1.2; text-shadow: none; }
.masthead .nav .nav__mega a:hover, .masthead .nav .nav__mega a[aria-current="page"] { background: rgba(208, 32, 46, .85); color: #fff; box-shadow: none; }
@media (max-width: 700px) {
  .masthead .nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, rgba(150, 12, 26, .92), rgba(70, 3, 11, .96)); }
  .masthead .nav .nav__in { overflow: visible; padding-left: 12px; }
  .nav__more { position: static; }
  .nav__mega { position: absolute; left: 8px; right: 8px; top: 100%; }
}

/* =====================================================================
   Sections, topics, featured, broadcast, search, video and podcasts
   ===================================================================== */
.cinehead { position: relative; color: #fff; background: #05080f; overflow: hidden; isolation: isolate; }
.cinehead::before { content: ''; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(70% 120% at 0% 0%, rgba(224, 16, 31, .38), rgba(224, 16, 31, 0) 60%), radial-gradient(60% 120% at 100% 100%, rgba(47, 123, 255, .32), rgba(47, 123, 255, 0) 60%), linear-gradient(180deg, #0b1220, #04070d); }
.cinehead--opinion::before { background: radial-gradient(70% 120% at 0% 0%, rgba(201, 150, 40, .35), rgba(201, 150, 40, 0) 60%), linear-gradient(180deg, #141008, #050403); }
.cinehead__in { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: clamp(26px, 4vw, 52px); padding-bottom: clamp(22px, 3.4vw, 44px); }
.cinehead h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(40px, 6.4vw, 92px); line-height: .92; text-transform: uppercase; letter-spacing: .005em; text-shadow: 0 6px 40px rgba(0, 0, 0, .6); }
.cinehead p { margin: 0; max-width: 760px; font-size: clamp(16px, 1.5vw, 20px); color: #cdd6e3; }
.cinehead__host, .cinehead__up { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #ff8a92; }
.cinehead__up:hover { color: #fff; }
.topics-bar { background: #0b1220; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.topics-bar__in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; padding-bottom: 12px; }
.topic-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule); background: #fff; color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1.1; white-space: nowrap; }
.topic-chip span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.topic-chip:hover { text-decoration: none; border-color: var(--red); color: var(--red-text, #b5121f); }
.topics-bar .topic-chip { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); color: #e8edf4; }
.topics-bar .topic-chip span { color: #9fb0c6; }
.topics-bar .topic-chip:hover, .topics-bar .topic-chip.is-on { background: #d0202e; border-color: #d0202e; color: #fff; }
.topics-all { position: relative; }
.topics-all > summary { list-style: none; cursor: pointer; color: #fff; font-family: var(--display); font-weight: 700; font-size: 15px; padding: 6px 12px; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, .35); }
.topics-all > summary::-webkit-details-marker { display: none; }
.topics-all__grid { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; width: min(720px, 90vw); display: flex; flex-wrap: wrap; gap: 6px; padding: 14px; background: #0b1220; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.follow .btn { white-space: nowrap; }
.sec-lead { margin-bottom: 6px; }
.sec-lead .ocard--big img { aspect-ratio: 21 / 9; }

.hl-row__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hl-row__head .sechead { margin: 0; }
.hl-row__head .sechead a { color: inherit; }
.hl-row__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hl-row--featured .hl-row__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hl-row--featured .ocard--big { grid-column: span 2; }
.hl-row__grid--one { grid-template-columns: 1fr; }
.tag-pill--opinion { background: linear-gradient(90deg, #c99628, #8a6514); box-shadow: 0 0 16px rgba(201, 150, 40, .5); }
.panel--opinion { border-top: 4px solid #c99628; }

.broadcast { background: #04070d; color: #fff; box-shadow: 0 0 0 100vmax #04070d; clip-path: inset(0 -100vmax); padding: 28px 0; }
.broadcast .sechead { color: #fff; }
.broadcast .more { color: #ff8a92; }
.broadcast__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.broadcast__live { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 170px; padding: 18px; border-radius: 8px; color: #fff;
  background: radial-gradient(80% 80% at 20% 0%, rgba(255, 31, 45, .45), rgba(255, 31, 45, 0) 70%), linear-gradient(160deg, #1a0a12, #05080f); border: 1px solid rgba(255, 31, 45, .4); }
.broadcast__live strong { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; }
.broadcast__live:hover { text-decoration: none; color: #fff; box-shadow: 0 0 30px rgba(255, 31, 45, .35); }
.broadcast__item { display: flex; flex-direction: column; gap: 6px; color: #fff; }
.broadcast__item:hover { color: #fff; text-decoration: none; }
.broadcast__item strong { font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.15; }
.broadcast__item .meta { color: #9fb0c6; }
.broadcast__thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #111a2b; }
.broadcast__thumb img { width: 100%; height: 100%; object-fit: cover; }
.broadcast__play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.cols2--modules > * { flex: 1 1 380px; }

.article__kickers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.article__label { font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--night, #0a1424); padding: 4px 9px; border-radius: 2px; }
.article__label--opinion { background: linear-gradient(90deg, #c99628, #8a6514); }
.article__kicker--also { font-size: 13px; color: var(--muted); }
.prose--opinion { border-left: 4px solid #c99628; padding-left: 20px; }
.article__topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 6px; }
.corrections { margin: 24px 0; padding: 14px 18px; border-left: 4px solid var(--red); background: #fbf3f3; }
.corrections h2 { margin: 0 0 6px; font-family: var(--display); font-size: 20px; }
.corrections p { margin: 0 0 6px; }
.corrections-log article { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.corrections-log p { margin: 4px 0; }
.ticker--breaking .ticker__label { background: linear-gradient(90deg, var(--hot, #ff1f2d), var(--hot-3, #a3000c)); animation: lbr-live 2s ease-in-out infinite; }

.search-form { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.search-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.search-filters label { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.search-filters select { min-height: 42px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 4px; background: #fff; font: 15px var(--mono); color: var(--ink); text-transform: none; letter-spacing: 0; }
.follow-list { display: flex; flex-wrap: wrap; gap: 8px; }
.follow-list .linkbtn { font-size: 16px; line-height: 1; padding: 0 0 0 4px; color: var(--muted); }

.player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 2px var(--electric, #2f7bff), 0 20px 50px rgba(0, 0, 0, .35); }
.player iframe, .player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.livehead { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.livehead h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(36px, 5vw, 72px); line-height: .95; text-transform: uppercase; }
.live-off { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; aspect-ratio: 16 / 9; max-height: 60vh; border-radius: 8px; color: #dfe6f0; text-align: center; padding: 20px;
  background: radial-gradient(60% 60% at 50% 40%, rgba(47, 123, 255, .3), rgba(47, 123, 255, 0) 70%), #04070d; }
.live-off img { width: clamp(90px, 14vw, 160px); filter: drop-shadow(0 0 20px rgba(106, 166, 255, .7)); }
.live-off p { margin: 0; font-size: 18px; max-width: 520px; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.video-card { display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.video-card:hover { text-decoration: none; }
.video-card strong { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.15; }
.video-card__thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #0b1220; }
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.video-card:hover .video-card__thumb img { transform: scale(1.05); }
.video-card__play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.video-card__dur { position: absolute; right: 6px; bottom: 6px; background: rgba(0, 0, 0, .8); color: #fff; font: 600 12px var(--mono); padding: 2px 6px; border-radius: 3px; }
.show-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.show-card { display: flex; gap: 14px; padding: 14px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; color: var(--ink); }
.show-card:hover { text-decoration: none; border-color: var(--red); }
.show-card img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; flex: none; }
.show-card h3 { margin: 0 0 4px; font-family: var(--display); font-size: 21px; }
.show-card p { margin: 0 0 4px; }
.show-head { display: flex; gap: 20px; align-items: flex-start; }
.show-head img { width: 160px; height: 160px; object-fit: cover; border-radius: 8px; }
.show-head h1 { margin: 0 0 6px; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4vw, 50px); }
.episode { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.episode h3 { margin: 2px 0; font-family: var(--display); font-size: 20px; }
.episode audio, .episode-audio { width: min(100%, 420px); }
@media (max-width: 1023px) {
  .hl-row__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-row--featured .ocard--big { grid-column: auto; }
}
@media (max-width: 700px) {
  .hl-row__grid { grid-template-columns: 1fr; }
  .cinehead h1 { font-size: 40px; }
  .topics-bar__in { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .topics-all__grid { position: fixed; left: 8px; right: 8px; top: auto; width: auto; max-height: 55vh; overflow-y: auto; }
  .show-head { flex-direction: column; }
  .prose--opinion { padding-left: 14px; }
}
@media (min-width: 701px) and (max-width: 1599px) {
  .nav__links a, .nav__more > summary { padding-left: 8px; padding-right: 8px; font-size: 16px; }
}
/* Banner photo sized to the banner itself (not the menu below it), so the whole skyline and the
   Capitol always show above the glass menu. */
.masthead--home .masthead__bg::before { background-size: auto calc(var(--bh) * 3.5); background-position: center calc(38px - var(--bh) * 1.135); }
.masthead--home .masthead__bg::after { background:
    linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(190, 210, 255, .10) 47%, rgba(255, 255, 255, .16) 50%, rgba(190, 210, 255, .10) 53%, rgba(255, 255, 255, 0) 62%) 0 0 / 300% 100% no-repeat,
    linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .06) 45%, rgba(0, 0, 0, .5) 100%),
    linear-gradient(90deg, #000 calc(50% - 2.62 * var(--bh)), rgba(0, 0, 0, 0) calc(50% - 2.15 * var(--bh)), rgba(0, 0, 0, 0) calc(50% + 2.15 * var(--bh)), #000 calc(50% + 2.62 * var(--bh))); }
@media (max-width: 700px) {
  .masthead--home .masthead__bg::before { background-position: center calc(0px - var(--bh) * 1.135); }
}

/* ---------- Meet Our Anchors ---------- */
.anchor-initials { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, #0b1a33, #1b0a12); color: #fff; font-family: var(--display); font-weight: 800; font-size: clamp(40px, 6vw, 80px); }

/* portrait card: headshot with the name and title over it */
.anchor-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: #070b14; color: #fff; border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 18px 40px rgba(0, 0, 0, .28); transition: transform .35s ease, box-shadow .35s ease; }
.anchor-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--hot), 0 22px 50px rgba(255, 31, 45, .3); }
.anchor-card__shot { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #04070d; color: #fff; text-decoration: none; }
a.anchor-card, .anchor-card a { text-decoration: none; }
.anchor-card__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.anchor-card:hover .anchor-card__shot img { transform: scale(1.06); }
.anchor-card__shot::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 7, 13, 0) 40%, rgba(4, 7, 13, .7) 70%, rgba(4, 7, 13, .97) 100%); }
.anchor-card__shot::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%) 200% 0 / 250% 100% no-repeat; }
.anchor-card:hover .anchor-card__shot::before { opacity: 1; animation: lbr-sweep 1.1s ease forwards; }
@keyframes lbr-sweep { from { background-position: 200% 0; } to { background-position: -60% 0; } }
.anchor-card__over { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 16px 14px; }
.anchor-card__kicker { padding: 3px 8px; background: var(--hot-2); font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; }
.anchor-card__name { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.1vw, 32px); line-height: .95; text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
.anchor-card__over .anchor-card__beat { font-size: 13.5px; line-height: 1.35; color: #cdd6e3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.anchor-card__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border-top: 3px solid var(--hot-2); }
.anchor-card__body .anchor-card__beat { margin: 0; font-size: 15px; line-height: 1.45; color: #dfe6ef; }
.anchor-card__latest { display: block; font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.15; color: #fff; }
.anchor-card__latest span { display: block; margin-bottom: 2px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #ff8a92; }
.anchor-card__latest:hover { color: #ff8a92; }
.anchor-card__foot { margin: auto 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-family: var(--mono); font-size: 12.5px; color: #9fb0c6; }
.anchor-card__foot a { padding: 3px 10px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; color: #fff; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.anchor-card__foot a:hover { background: var(--hot-2); border-color: var(--hot-2); }
.anchor-card__more { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #ff8a92; }
.anchor-card__more:hover { color: #fff; }
.anchor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 22px; }
.anchor-grid .anchor-card { scroll-margin-top: 90px; }
.anchor-grid .anchor-card:target { box-shadow: 0 0 0 3px var(--hot), 0 0 40px rgba(255, 31, 45, .5); }

/* the page hero: a wall of the anchors' faces with the title over it */
.anchors-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(460px, 46vw, 680px); color: #fff; background: #04070d; }
.anchors-hero__wall { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; animation: lbr-wall 32s ease-in-out infinite alternate; transform-origin: 50% 40%; }
.anchors-hero__wall img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
@keyframes lbr-wall { from { transform: scale(1.02); } to { transform: scale(1.1) translateY(-1.5%); } }
.anchors-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(4, 7, 13, .25) 0%, rgba(4, 7, 13, .45) 38%, rgba(4, 7, 13, .9) 74%, #04070d 100%),
  radial-gradient(70% 90% at 0% 100%, rgba(224, 16, 31, .5), rgba(224, 16, 31, 0) 62%), radial-gradient(60% 90% at 100% 100%, rgba(47, 123, 255, .42), rgba(47, 123, 255, 0) 60%); }
.anchors-hero--plain { min-height: 0; }
.anchors-hero--plain::before { background: radial-gradient(70% 120% at 0% 0%, rgba(224, 16, 31, .38), rgba(224, 16, 31, 0) 60%), linear-gradient(180deg, #0b1220, #04070d); }
.anchors-hero__in { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 120px; padding-bottom: clamp(28px, 4vw, 56px); }
.anchors-hero__label, .anchor-hero__kicker { padding: 5px 12px; background: var(--hot-2); font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; box-shadow: 0 0 24px rgba(255, 31, 45, .45); }
.anchors-hero h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(54px, 9.4vw, 148px); line-height: .84; text-transform: uppercase; letter-spacing: .005em; text-shadow: 0 8px 50px rgba(0, 0, 0, .85); }
.anchors-hero p { margin: 0; max-width: 780px; font-size: clamp(16px, 1.6vw, 21px); line-height: 1.5; color: #e2e8f0; text-shadow: 0 2px 16px rgba(0, 0, 0, .9); }
.anchors-hero__names { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.anchors-hero__names a { padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .02em; }
.anchors-hero__names a:hover { background: var(--hot-2); border-color: var(--hot-2); text-decoration: none; }
.page--anchors { padding-top: 34px; }

/* how they work */
.anchors-how { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px 44px; padding: clamp(22px, 3vw, 38px); border-radius: 6px; border-top: 4px solid var(--hot-2); color: #fff;
  background: #04070d radial-gradient(70% 140% at 100% 0%, rgba(47, 123, 255, .26), rgba(47, 123, 255, 0) 60%); }
.anchors-how h2 { margin: 0 0 10px; font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3vw, 42px); line-height: .95; text-transform: uppercase; }
.anchors-how p { margin: 0; font-size: 17px; line-height: 1.6; color: #cdd6e3; }
.anchors-how ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.anchors-how li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.5; color: #cdd6e3; }
.anchors-how li::before { content: ''; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 12px var(--hot); }
.anchors-how li strong { color: #fff; }
.anchors-how__cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.anchors-how .btn--outline { border-color: rgba(255, 255, 255, .4); color: #fff; }
.anchors-how .btn--outline:hover { background: #fff; color: #04070d; }

/* the homepage band: a swipeable reel of portrait cards */
.anchor-band { position: relative; color: #fff; background: #04070d; box-shadow: 0 0 0 100vmax #04070d; clip-path: inset(0 -100vmax); padding: 40px 0 36px; margin-top: 10px;
  background-image: radial-gradient(60% 120% at 0% 0%, rgba(255, 31, 45, .22), rgba(255, 31, 45, 0) 60%), radial-gradient(60% 120% at 100% 100%, rgba(47, 123, 255, .24), rgba(47, 123, 255, 0) 60%); }
.anchor-band__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; margin-bottom: 20px; }
.anchor-band__label { display: inline-block; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #ff8a92; }
.anchor-band h2 { margin: 4px 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(36px, 4.6vw, 64px); line-height: .88; text-transform: uppercase; color: #fff; text-shadow: 0 0 40px rgba(255, 31, 45, .35); }
.anchor-band__nav { display: flex; align-items: center; gap: 8px; }
.reel-btn { display: grid; place-items: center; width: 42px; height: 42px; padding: 0 0 3px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .06); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.reel-btn:hover { background: var(--hot-2); border-color: var(--hot-2); }
.reel-btn[disabled] { opacity: .35; cursor: default; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .26); }
.anchor-reel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, calc((100% - 64px) / 5.25)); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding: 4px 2px 8px; margin: -4px -2px 0; overscroll-behavior-x: contain; }
.anchor-reel::-webkit-scrollbar { display: none; }
.anchor-reel > * { scroll-snap-align: start; }
.anchor-card--compact .anchor-card__name { font-size: clamp(22px, 1.9vw, 28px); }

/* an anchor's own page */
.anchor-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #04070d; }
.anchor-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(55% 120% at 18% 50%, rgba(224, 16, 31, .36), rgba(224, 16, 31, 0) 62%), radial-gradient(60% 120% at 100% 100%, rgba(47, 123, 255, .32), rgba(47, 123, 255, 0) 60%), linear-gradient(180deg, #0b1220, #04070d); }
.anchor-hero__in { display: grid; grid-template-columns: minmax(240px, 420px) 1fr; align-items: center; gap: clamp(24px, 4.4vw, 64px); padding-top: clamp(28px, 4vw, 60px); padding-bottom: clamp(28px, 4vw, 60px); }
.anchor-hero__shot { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #04070d;
  box-shadow: 0 0 0 3px #04070d, 0 0 0 5px var(--hot), 0 0 70px rgba(255, 31, 45, .45), 0 30px 80px rgba(0, 0, 0, .6); }
.anchor-hero__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.anchor-hero__shot::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .2) 50%, transparent 62%) 200% 0 / 250% 100% no-repeat; animation: lbr-sweep-loop 7s ease-in-out infinite; }
@keyframes lbr-sweep-loop { 0% { background-position: 200% 0; } 28%, 100% { background-position: -60% 0; } }
.anchor-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.anchor-hero h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(50px, 7.6vw, 116px); line-height: .86; text-transform: uppercase; letter-spacing: .005em; text-shadow: 0 6px 40px rgba(0, 0, 0, .6); }
.anchor-hero__beat { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.2; color: #fff; }
.anchor-hero__bio { margin: 0; max-width: 660px; font-size: 17px; line-height: 1.6; color: #cdd6e3; }
.anchor-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 4px; }
.anchor-hero__count { font-family: var(--mono); font-size: 13px; color: #9fb0c6; }
.btn--glass { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .3); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--glass:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.ainote--dark { margin-top: 2px; color: #8796ab; }

@media (prefers-reduced-motion: reduce) {
  .anchors-hero__wall, .anchor-hero__shot::after { animation: none; }
  .anchor-card, .anchor-card__shot img { transition: none; }
  .anchor-card:hover .anchor-card__shot::before { animation: none; opacity: 0; }
}
@media (max-width: 1023px) {
  .anchor-reel { grid-auto-columns: minmax(180px, calc((100% - 48px) / 3.4)); }
  .anchor-hero__in { grid-template-columns: minmax(200px, 300px) 1fr; }
}
@media (max-width: 700px) {
  .anchors-hero { min-height: 0; }
  .anchors-hero__wall { bottom: auto; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; }
  .anchors-hero__wall img { aspect-ratio: 1; height: auto; }
  .anchors-hero__wall img:nth-child(n+10) { display: none; }
  .anchors-hero__in { padding-top: 62vw; gap: 12px; }
  .anchors-hero h1 { font-size: clamp(48px, 15vw, 72px); }
  .anchors-hero__names { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 32px); margin-right: -32px; padding-right: 32px; scrollbar-width: none; }
  .anchors-hero__names::-webkit-scrollbar { display: none; }
  .anchors-hero__names a { flex: none; }
  .anchor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .anchor-grid .anchor-card__over { padding: 10px 10px 10px; gap: 4px; }
  .anchor-grid .anchor-card__kicker { font-size: 10px; padding: 2px 6px; }
  .anchor-grid .anchor-card__name { font-size: 21px; }
  .anchor-grid .anchor-card__body { padding: 10px 10px 12px; gap: 8px; }
  .anchor-grid .anchor-card__body .anchor-card__beat { font-size: 13px; }
  .anchor-grid .anchor-card__foot a { font-size: 11px; padding: 2px 8px; }
  .anchor-grid .anchor-card__more { font-size: 12.5px; }
  .anchors-how { grid-template-columns: 1fr; }
  .anchor-band { padding: 30px 0 28px; }
  .anchor-band__nav .reel-btn { display: none; }
  .anchor-reel { grid-auto-columns: 64%; gap: 12px; }
  .anchor-hero__in { grid-template-columns: 1fr; gap: 22px; }
  .anchor-hero__shot { width: min(100%, 340px); }
}

/* article photo gallery: more original pictures of the places in the story */
.gallery { margin: 30px 0 8px; }
.gallery__h { margin: 0 0 12px; padding-top: 10px; border-top: 4px solid var(--ink); font-family: var(--display); font-weight: 800; font-size: 24px; text-transform: uppercase; letter-spacing: .02em; }
.gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gallery__fig { margin: 0; overflow: hidden; border-radius: 4px; background: #04070d; line-height: 0; }
.gallery__fig--wide { grid-column: 1 / -1; }
.gallery__fig img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.gallery__fig:hover img { transform: scale(1.04); }
.gallery__credit { margin: 8px 0 0; font-family: var(--mono); font-size: 12px; color: var(--muted, #6b7178); }
@media (max-width: 700px) { .gallery__grid { grid-template-columns: 1fr; } }

/* ---------- anchor column posters (each anchor's column, drawn like a network show card) ---------- */
.poster { container-type: inline-size; display: flex; flex-direction: column; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.poster:hover { text-decoration: none; }
.poster__art { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; isolation: isolate; border-radius: 10px; color: #fff;
  background: radial-gradient(90% 70% at 50% 30%, #2f6dff 0%, #1440b8 38%, #08206b 70%, #041140 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 16px 36px rgba(0, 0, 0, .34); transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
.poster:hover .poster__art, .poster:focus-visible .poster__art { transform: translateY(-5px) scale(1.015); box-shadow: 0 0 0 2px var(--hot), 0 26px 54px rgba(255, 31, 45, .32); }
.poster__fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.poster__photo { position: absolute; left: 0; bottom: 0; width: 100%; height: 72%; object-fit: cover; object-position: center 8%; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%); mask-image: linear-gradient(180deg, transparent 0%, #000 20%); transition: transform 1s cubic-bezier(.2, .7, .2, 1); transform-origin: 50% 100%; }
.poster:hover .poster__photo { transform: scale(1.04); }
.poster__photo--none { display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 30cqw; color: rgba(255, 255, 255, .85); }
.poster__art::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .26) 50%, transparent 64%) 220% 0 / 260% 100% no-repeat; }
.poster:hover .poster__art::after { opacity: 1; animation: lbr-sweep 1.1s ease forwards; }
.poster__head { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; padding: 4.5cqw 5cqw 0; text-align: center; }
.poster__brand { display: inline-flex; align-items: center; gap: 1.4cqw; font-family: var(--display); font-weight: 800; font-size: 4.1cqw; letter-spacing: .12em; text-transform: uppercase; line-height: 1; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.poster__brand img { width: 6.4cqw; height: 6.4cqw; object-fit: contain; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .35)); }
.poster__title { display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: .84; letter-spacing: .004em; font-size: 15.5cqw; text-shadow: 0 3px 0 rgba(0, 0, 0, .25), 0 6px 22px rgba(0, 0, 0, .55); }
.poster__title--l { font-size: 12.6cqw; }
.poster__title--xl { font-size: 10.2cqw; }
.poster__title small { display: block; margin-bottom: .6cqw; font-size: 5cqw; letter-spacing: .3em; font-weight: 700; }
.poster__with { display: inline-block; padding: 1cqw 3cqw; background: var(--hot-2); font-family: var(--display); font-weight: 700; font-size: 3.7cqw; letter-spacing: .14em; text-transform: uppercase; line-height: 1.15; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, .35); }
.poster__cap { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.poster__cap strong { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; }
.poster__cap > span { font-size: 13.5px; line-height: 1.3; color: var(--muted, #5b6470); }
.poster__cap .poster__home { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 12px; color: var(--red-text, #b5121f); }
.poster:hover .poster__cap strong { color: var(--red-text, #b5121f); }
.anchor-band .poster__cap strong, .anchor-hero .poster__cap strong { color: #fff; }
.anchor-band .poster__cap > span { color: #a9b6c8; }
.anchor-band .poster__cap .poster__home { color: #ff8a92; }

/* poster looks */
.poster--capitol .poster__art { background: linear-gradient(180deg, rgba(10, 40, 120, .2), rgba(4, 12, 40, .55)), var(--poster-img, none) center 30% / cover no-repeat, linear-gradient(180deg, #5b8fe8, #173f9e); }
.poster--capitol .poster__title { display: inline-block; padding: 1.4cqw 3cqw .6cqw; background: linear-gradient(180deg, #e3101f, #a8000d); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.poster--capitol .poster__with { background: #0b2a7a; }
.poster--blue .poster__fx { background: radial-gradient(circle at 1px 1px, rgba(140, 190, 255, .55) 1px, transparent 1.6px) 0 0 / 3.2cqw 3.2cqw; -webkit-mask-image: radial-gradient(70% 55% at 50% 35%, #000, transparent); mask-image: radial-gradient(70% 55% at 50% 35%, #000, transparent); }
.poster--blue .poster__title { background: linear-gradient(180deg, #fff 30%, #c9d8ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.poster--red .poster__art { background: radial-gradient(90% 70% at 50% 25%, #ff3b45 0%, #c4000f 40%, #6e0008 75%, #2a0003 100%); }
.poster--red .poster__fx { background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0) 0 6cqw, rgba(255, 255, 255, .07) 6cqw 7cqw); }
.poster--red .poster__with { background: #0b1a3e; }
.poster--night .poster__art { background: radial-gradient(80% 60% at 50% 30%, #1c2236 0%, #0a0d18 60%, #000 100%); }
.poster--night .poster__fx { background: linear-gradient(180deg, rgba(212, 164, 55, 0) 40%, rgba(212, 164, 55, .12) 41%, rgba(212, 164, 55, 0) 43%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 5px); }
.poster--night .poster__title { padding: 1.6cqw 3.2cqw .8cqw; border: .7cqw solid #d6a73c; background: linear-gradient(180deg, #19130a, #000); color: #f4d27a; text-shadow: 0 0 12px rgba(244, 210, 122, .35); }
.poster--night .poster__with { background: #d6a73c; color: #0a0a0a; }
.poster--gold .poster__art { background: radial-gradient(90% 70% at 50% 30%, #23366e 0%, #0e1838 60%, #050913 100%); }
.poster--gold .poster__fx { background: conic-gradient(from 200deg at 50% 0%, rgba(255, 214, 120, 0), rgba(255, 214, 120, .18), rgba(255, 214, 120, 0) 30%); }
.poster--gold .poster__title { background: linear-gradient(180deg, #fff3c4 0%, #f2c14e 45%, #b9801b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .6)); }
.poster--flag .poster__art { background: linear-gradient(180deg, rgba(8, 20, 60, .25), rgba(8, 20, 60, .7)), repeating-linear-gradient(170deg, #b3121f 0 7cqw, #f1ece2 7cqw 14cqw); }
.poster--flag .poster__fx { background: linear-gradient(180deg, #0b2161 0 30%, rgba(11, 33, 97, 0) 46%); }
.poster--flag .poster__title { font-family: 'Source Serif 4', Georgia, serif; font-weight: 700; text-transform: none; letter-spacing: -.01em; line-height: .92; }
.poster--flag .poster__title small { font-family: var(--display); }
.poster--flag .poster__with { background: #b3121f; }
.poster--electric .poster__art { background: radial-gradient(90% 70% at 50% 30%, #0a3bd8 0%, #06207e 50%, #020a2e 100%); }
.poster--electric .poster__fx { background: linear-gradient(90deg, rgba(120, 220, 255, .12) 1px, transparent 1px) 0 0 / 8cqw 8cqw, linear-gradient(0deg, rgba(120, 220, 255, .12) 1px, transparent 1px) 0 0 / 8cqw 8cqw;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 60%); mask-image: linear-gradient(180deg, #000, transparent 60%); }
.poster--electric .poster__title { color: #eaf8ff; text-shadow: 0 0 2cqw #39c6ff, 0 0 5cqw #1a7dff, 0 4px 12px rgba(0, 0, 0, .6); }
.poster--electric .poster__with { background: #ff1f2d; }
.poster--studio .poster__art { background: radial-gradient(60% 50% at 20% 0%, rgba(255, 40, 50, .55), transparent 70%), radial-gradient(60% 50% at 80% 0%, rgba(40, 110, 255, .6), transparent 70%), linear-gradient(180deg, #0b0f1d, #030509); }
.poster--studio .poster__fx { background: conic-gradient(from 160deg at 50% -10%, transparent 0 10deg, rgba(255, 255, 255, .1) 14deg, transparent 20deg 34deg, rgba(255, 255, 255, .08) 38deg, transparent 44deg); }
.poster--studio .poster__title { background: linear-gradient(180deg, #ffffff 0%, #d7dde8 48%, #8f9bb0 52%, #f2f5fa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .7)); }
.poster--studio .poster__with { background: transparent; border: .5cqw solid rgba(255, 255, 255, .85); box-shadow: none; }

.poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 28px 20px; }
.desk-group { scroll-margin-top: 80px; }
.desk-group__h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; padding-top: 10px; border-top: 4px solid var(--ink); font-family: var(--display); font-weight: 800; font-size: clamp(26px, 2.8vw, 38px); text-transform: uppercase; letter-spacing: .01em; position: relative; }
.desk-group__h::before { content: ''; position: absolute; left: 0; top: -4px; width: 70px; height: 4px; background: var(--red); }
.desk-group__h span { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--muted, #6b7178); }
.anchors-note { text-align: center; }
.anchor-reel .poster { width: auto; }
.anchor-reel { grid-auto-columns: minmax(200px, calc((100% - 64px) / 5.2)); }

/* the anchor's bio page */
.anchor-hero__in { grid-template-columns: minmax(250px, 380px) 1fr; }
.anchor-hero__poster .poster__art { box-shadow: 0 0 0 3px #04070d, 0 0 0 5px var(--hot), 0 0 70px rgba(255, 31, 45, .4), 0 30px 80px rgba(0, 0, 0, .6); }
.anchor-hero__poster .poster:hover .poster__art { transform: none; }
.anchor-hero__home { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-family: var(--mono); font-size: 15px; color: #ff9aa1; }
.anchor-hero__quote { position: relative; margin: 6px 0 2px; padding: 4px 0 4px 26px; border-left: 4px solid var(--hot-2); max-width: 680px; }
.anchor-hero__quote p { margin: 0; font-family: 'Source Serif 4', Georgia, serif; font-style: italic; font-size: clamp(19px, 1.8vw, 25px); line-height: 1.4; color: #fff; }
.anchor-hero--red::before { background: radial-gradient(55% 120% at 18% 50%, rgba(224, 16, 31, .55), rgba(224, 16, 31, 0) 62%), linear-gradient(180deg, #1b0508, #04070d); }
.anchor-hero--night::before, .anchor-hero--gold::before { background: radial-gradient(55% 120% at 18% 50%, rgba(214, 167, 60, .3), rgba(214, 167, 60, 0) 62%), linear-gradient(180deg, #0d0f18, #030407); }
.bio { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px 48px; align-items: start; }
.bio__h { margin: 0 0 14px; padding-top: 10px; border-top: 4px solid var(--ink); font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3vw, 40px); text-transform: uppercase; }
.bio__story p { margin: 0 0 18px; font-family: 'Source Serif 4', Georgia, serif; font-size: 19px; line-height: 1.7; color: var(--ink-2, #23272e); }
.bio__story .bio__lede::first-letter { float: left; margin: 6px 10px 0 0; font-family: var(--display); font-weight: 800; font-size: 74px; line-height: .8; color: var(--red); }
.bio__side { display: flex; flex-direction: column; gap: 22px; }
.facts { padding: 20px 22px; border-radius: 8px; background: #04070d; color: #fff; border-top: 4px solid var(--hot-2); }
.facts h2 { margin: 0 0 12px; font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: .04em; }
.facts dl { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.facts dt { margin-top: 10px; font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: #ff8a92; }
.facts dt:first-child { margin-top: 0; }
.facts dd { margin: 0; font-size: 15px; line-height: 1.45; color: #e2e8f0; }
.facts .small { margin: 12px 0 0; color: #a9b6c8; }
.beat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.beat-chip { padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); color: #fff; font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; }
.beat-chip:hover { background: var(--hot-2); border-color: var(--hot-2); text-decoration: none; }
.beat-chip--main { background: var(--hot-2); border-color: var(--hot-2); }

/* "On this beat" in section pages: big square portraits, not circles */
.beat-list { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 22px; }
.beat-p { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.beat-p img, .beat-p__none { width: 84px; height: 84px; flex: none; border-radius: 8px; object-fit: cover; object-position: center 15%; background: #04070d; box-shadow: 0 0 0 2px var(--hot), 0 8px 18px rgba(0, 0, 0, .2); }
.beat-p__none { display: grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 800; font-size: 26px; }
.beat-p > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.beat-p strong { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.05; text-transform: uppercase; }
.beat-p:hover strong { color: var(--red-text, #b5121f); }
/* small byline portraits are rounded squares too */
.byline .person { border-radius: 6px; }

@media (max-width: 1023px) {
  .bio { grid-template-columns: 1fr; }
  .anchor-hero__in { grid-template-columns: minmax(220px, 300px) 1fr; }
  .anchor-reel { grid-auto-columns: minmax(180px, calc((100% - 48px) / 3.3)); }
}
@media (max-width: 700px) {
  .poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .poster__cap strong { font-size: 17px; }
  .poster__cap > span { font-size: 12.5px; }
  .anchor-reel { grid-auto-columns: 58%; }
  .anchor-hero__in { grid-template-columns: 1fr; }
  .anchor-hero__poster { width: min(78%, 320px); margin: 0 auto; }
  .bio__story p { font-size: 18px; }
}

/* ---------- section front pages (each main-menu section has its own look) ---------- */
.page--sec { --sec: var(--hot); }
.cinehead--sec::before { background: radial-gradient(70% 130% at 0% 0%, color-mix(in srgb, var(--sec) 55%, transparent), transparent 62%),
  radial-gradient(60% 120% at 100% 100%, rgba(47, 123, 255, .32), rgba(47, 123, 255, 0) 60%), linear-gradient(180deg, #0b1220, #04070d); }
.cinehead--sec h1 { text-shadow: 0 0 40px color-mix(in srgb, var(--sec) 55%, transparent), 0 6px 40px rgba(0, 0, 0, .6); }
.cinehead--sec .cinehead__in { border-left: 6px solid var(--sec); padding-left: 26px; }
.cinehead--breaking::before { background: repeating-linear-gradient(-45deg, rgba(255, 31, 45, .06) 0 18px, transparent 18px 36px), radial-gradient(70% 130% at 0% 0%, rgba(255, 31, 45, .65), transparent 62%), linear-gradient(180deg, #2a0307, #04070d); }
.cinehead--capitol::before { background: linear-gradient(90deg, rgba(4, 7, 13, .95) 30%, rgba(4, 7, 13, .55)), radial-gradient(70% 130% at 0% 0%, rgba(224, 16, 31, .5), transparent 62%), linear-gradient(180deg, #0b1a3e, #04070d); }
.cinehead--money::before { background: repeating-linear-gradient(0deg, rgba(31, 191, 114, .07) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(31, 191, 114, .07) 0 1px, transparent 1px 28px), radial-gradient(70% 130% at 0% 0%, color-mix(in srgb, var(--sec) 45%, transparent), transparent 62%), linear-gradient(180deg, #06140e, #030806); }
.cinehead--magazine::before { background: radial-gradient(50% 120% at 85% 20%, color-mix(in srgb, var(--sec) 40%, transparent), transparent 62%), radial-gradient(70% 130% at 0% 0%, rgba(47, 123, 255, .4), transparent 62%), linear-gradient(180deg, #061322, #03070d); }
.cinehead--arena::before { background: conic-gradient(from 200deg at 50% -20%, transparent 0 20deg, color-mix(in srgb, var(--sec) 35%, transparent) 28deg, transparent 40deg 60deg, rgba(255, 255, 255, .08) 66deg, transparent 74deg), radial-gradient(70% 130% at 0% 100%, color-mix(in srgb, var(--sec) 45%, transparent), transparent 60%), linear-gradient(180deg, #120818, #04070d); }
.cinehead--column::before { background: radial-gradient(70% 130% at 0% 0%, color-mix(in srgb, var(--sec) 40%, transparent), transparent 62%), linear-gradient(180deg, #141008, #050403); }
.topics-bar { border-bottom: 3px solid var(--sec, transparent); }
.page--sec .sechead::before { background: var(--sec); box-shadow: 0 0 14px var(--sec); }
.page--sec .trend { box-shadow: inset 0 3px 0 var(--sec); }
.page--sec .trend__head::before { background: var(--sec); box-shadow: 0 0 12px var(--sec); }
.page--sec .ocard--big { box-shadow: 0 0 0 2px var(--sec), 0 0 36px color-mix(in srgb, var(--sec) 35%, transparent); }
.sec-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.sec-top--capitol, .sec-top--arena { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.sec-top--column { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sec-top--magazine { grid-template-columns: minmax(0, 1fr) 340px; }
.slider--sec { min-height: 480px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--sec) 50%, transparent), 0 20px 50px rgba(0, 0, 0, .3); }
.sec-top--capitol .slider--sec, .sec-top--arena .slider--sec { min-height: 540px; }
.sec-side { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 6px; background: #070b14; box-shadow: inset 0 3px 0 var(--sec); }
.sec-side .ad { margin: 0; }
.liveline { display: flex; flex-direction: column; min-width: 0; padding: 14px; border-radius: 6px; background: #12040a; color: #fff; box-shadow: inset 0 3px 0 var(--sec), 0 0 40px rgba(255, 31, 45, .2); }
.liveline .trend__head::before { display: none; }
.liveline ol { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid rgba(255, 31, 45, .45); display: flex; flex-direction: column; gap: 14px; overflow-y: auto; max-height: 440px; }
.liveline li { position: relative; display: flex; flex-direction: column; gap: 2px; }
.liveline li::before { content: ''; position: absolute; left: -21px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 10px var(--hot); }
.liveline time { font-family: var(--mono); font-size: 12.5px; color: #ff8a92; }
.liveline a { color: #fff; font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.15; }
.sec-cards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sec-cards--capitol .sec-cards__grid > :first-child { grid-column: span 2; grid-row: span 2; }
.sec-cards--magazine .sec-cards__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sec-cards--magazine .sec-cards__grid > :first-child { grid-column: span 2; grid-row: span 2; }
.sec-cards--arena .sec-cards__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sec-cards--arena .ocard img { aspect-ratio: 3 / 4; }
.sec-cards--money .sec-cards__grid, .sec-cards--column .sec-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sec-cards .ocard img { width: 100%; height: 100%; object-fit: cover; }
.topic-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.page--money .topic-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.topic-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 120px; padding: 16px; overflow: hidden; isolation: isolate; border-radius: 8px; color: #fff; text-decoration: none;
  background: radial-gradient(120% 120% at calc(10% + var(--i) * 11%) 0%, color-mix(in srgb, var(--sec) 70%, transparent), transparent 60%), linear-gradient(160deg, #0d1730, #04070d 70%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 10px 24px rgba(0, 0, 0, .25); transition: transform .3s, box-shadow .3s; }
.topic-tile::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .18) 1px, transparent 1.6px) 0 0 / 14px 14px;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%); }
.topic-tile:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--sec), 0 16px 34px color-mix(in srgb, var(--sec) 30%, transparent); text-decoration: none; }
.topic-tile__name { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.topic-tile__n { font-family: var(--mono); font-size: 12px; color: #cdd6e3; }
.page--money .topic-tile { min-height: 84px; padding: 12px; }
.page--money .topic-tile__name { font-size: 17px; }
.sec-latest { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.sec-latest__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.page--column .sec-latest__list { grid-template-columns: 1fr; }
.page--column .sec-latest__list .row__text strong { font-family: 'Source Serif 4', Georgia, serif; font-weight: 700; font-size: 22px; }
.anchor-band--sec { margin-top: 0; }
.page--column > .anchor-band--sec:first-child { margin-top: -30px; }
@media (max-width: 1023px) {
  .sec-top, .sec-top--capitol, .sec-top--arena, .sec-top--column, .sec-top--magazine { grid-template-columns: 1fr; }
  .sec-cards__grid, .sec-cards--magazine .sec-cards__grid, .sec-cards--arena .sec-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-tiles, .page--money .topic-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sec-latest { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .slider--sec, .sec-top--capitol .slider--sec, .sec-top--arena .slider--sec { min-height: 360px; }
  .sec-cards__grid, .sec-cards--magazine .sec-cards__grid { grid-template-columns: 1fr; }
  .sec-cards--capitol .sec-cards__grid > :first-child, .sec-cards--magazine .sec-cards__grid > :first-child { grid-column: auto; grid-row: auto; }
  .sec-cards--arena .sec-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-tiles, .page--money .topic-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .topic-tile { min-height: 96px; padding: 12px; }
  .topic-tile__name { font-size: 18px; }
  .sec-latest__list { grid-template-columns: 1fr; }
  .cinehead--sec .cinehead__in { padding-left: 16px; border-left-width: 4px; }
}

/* ---------- child menus: every main section opens a panel with all of its topics ---------- */
.nav__item { display: flex; flex: none; }
.nav__drop { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 65; padding: 18px 0 22px; color: #fff;
  background: linear-gradient(180deg, rgba(40, 4, 10, .97), rgba(8, 10, 18, .98)); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border-top: 1px solid rgba(255, 90, 100, .35); border-bottom: 3px solid var(--hot-2); box-shadow: 0 24px 50px rgba(0, 0, 0, .5); text-align: left; }
.nav__drop-in { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.masthead .nav .nav__drop a { border: 0; border-radius: 6px; background: none; box-shadow: none; text-shadow: none; }
.masthead .nav .nav__drop-all { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: linear-gradient(160deg, rgba(224, 16, 31, .9), rgba(120, 4, 14, .9)); border-radius: 8px; color: #fff; }
.nav__drop-all span:first-child { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; }
/* Long section names (“Breaking News & Headlines”) wrap inside the red box instead of running out of it. */
.masthead .nav .nav__drop-all, .masthead .nav .nav__drop-all span { white-space: normal; overflow-wrap: anywhere; min-width: 0; letter-spacing: .01em; }
.nav__drop-in > * { min-width: 0; }
.nav__drop-go { font-family: var(--mono); font-size: 13px; font-weight: 500; color: #ffd6d9; }
.nav__drop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 10px; }
.masthead .nav .nav__drop-grid a { display: block; padding: 7px 10px; color: #e9edf3; font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.2; white-space: normal; }
.masthead .nav .nav__drop-grid a:hover, .masthead .nav .nav__drop-all:hover { background: rgba(224, 16, 31, .85); color: #fff; text-decoration: none; }
@media (hover: hover) and (min-width: 701px) {
  .nav__item:hover > .nav__drop, .nav__item:focus-within > .nav__drop { display: block; animation: lbr-drop .18s ease-out; }
  .nav__item:hover > a { background: rgba(255, 255, 255, .12); border-bottom-color: #fff; }
}
@keyframes lbr-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .nav__drop { display: none !important; } }
/* the phone Sections sheet: tap a section to see its topics */
.sheet-sec { grid-column: 1 / -1; border-radius: 10px; background: rgba(255, 255, 255, .06); }
.sheet-sec > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 8px 12px; color: #e6ebf2; font-family: var(--display); font-weight: 700; font-size: 16px; cursor: pointer; }
.sheet-sec > summary::-webkit-details-marker { display: none; }
.sheet-sec > summary::after { content: '▾'; color: #ff8a92; transition: transform .2s; }
.sheet-sec[open] > summary::after { transform: rotate(180deg); }
.sheet-sec > summary[aria-current="page"] { color: #fff; }
.sheet-sec__topics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 8px 10px; }
.tabbar__sheet .sheet-sec__topics a { min-height: 38px; font-size: 14px; font-weight: 500; background: rgba(255, 255, 255, .05); }
.tabbar__sheet .sheet-sec__topics a:first-child { grid-column: 1 / -1; background: var(--hot-2); color: #fff; font-weight: 700; }
.tabbar__sheet { max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; }

/* Inner pages use the same DC skyline as the front page, sized to the shorter banner,
   with the top of the Washington Monument level with the top of the logo. */
.masthead--compact { --bh: 96px; }
.masthead--compact.masthead--photo { background: #000; }
.masthead--compact .masthead__bg { display: block; }
.masthead--compact .masthead__in { min-height: var(--bh); align-items: center; position: relative; }
.masthead--compact .masthead__bg::before { background-size: auto calc(var(--bh) * 4.2); background-position: center calc(var(--bh) * .29 - var(--bh) * 4.2 * .32); }
.masthead--compact .masthead__bg::after { background:
    linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(190, 210, 255, .10) 47%, rgba(255, 255, 255, .16) 50%, rgba(190, 210, 255, .10) 53%, rgba(255, 255, 255, 0) 62%) 0 0 / 300% 100% no-repeat,
    linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .05) 45%, rgba(0, 0, 0, .45) 100%),
    linear-gradient(90deg, #000 calc(50% - 3.35 * var(--bh)), rgba(0, 0, 0, 0) calc(50% - 2.6 * var(--bh)), rgba(0, 0, 0, 0) calc(50% + 2.6 * var(--bh)), #000 calc(50% + 3.35 * var(--bh))); }
@media (max-width: 700px) {
  .masthead--compact { --bh: 60px; }
  .masthead--compact .masthead__in { justify-content: center; }
}

/* Coming-soon page: full color with bright red and blue light */
body.gate--photo::before { filter: saturate(1.45) contrast(1.1) brightness(1.08);
  background: radial-gradient(75% 70% at 50% 45%, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55) 78%, rgba(0, 0, 0, .9) 100%), var(--gate-img, none) center 60% / cover no-repeat; }
body.gate::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(55% 45% at 12% 18%, rgba(255, 31, 45, .55), rgba(255, 31, 45, 0) 70%), radial-gradient(55% 45% at 88% 22%, rgba(47, 123, 255, .6), rgba(47, 123, 255, 0) 70%),
    radial-gradient(70% 40% at 50% 105%, rgba(255, 60, 70, .45), rgba(255, 60, 70, 0) 70%);
  animation: lbr-aurora 12s ease-in-out infinite alternate; }
body.gate:not(.gate--photo)::after { background: radial-gradient(55% 45% at 12% 18%, rgba(255, 31, 45, .55), rgba(255, 31, 45, 0) 70%), radial-gradient(55% 45% at 88% 22%, rgba(47, 123, 255, .6), rgba(47, 123, 255, 0) 70%), linear-gradient(180deg, #04070d, #0a1430); }
body.gate .skyline { filter: none; }
body.gate .skyline g { fill: #0b1a3e; }
@keyframes lbr-aurora { from { opacity: .75; transform: scale(1); } to { opacity: 1; transform: scale(1.06); } }
.gate h1 { background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #ffd1d4 62%, #ff3340 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 26px rgba(255, 31, 45, .55)) drop-shadow(0 4px 24px rgba(0, 0, 0, .8)); }
.gate__lede { color: #ff4b55; text-shadow: 0 0 18px rgba(255, 31, 45, .7); }
.gate__lede::before, .gate__lede::after { background: linear-gradient(90deg, var(--hot), var(--electric-2)); box-shadow: 0 0 14px rgba(255, 31, 45, .8); }
.gate__sub { color: #e2e8f0; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.gate__form { background: linear-gradient(160deg, rgba(20, 30, 70, .78), rgba(40, 4, 12, .78)); border: 1px solid rgba(255, 255, 255, .2); border-top: 3px solid var(--hot);
  box-shadow: 0 0 0 1px rgba(47, 123, 255, .25), 0 0 40px rgba(255, 31, 45, .25), 0 18px 40px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); }
.gate__form .btn { background: linear-gradient(180deg, #ff3340, var(--hot-2)); border-color: #ff3340; color: #fff; box-shadow: 0 0 18px rgba(255, 31, 45, .55); }
.gate__form .btn:hover { background: #ff4b55; }
.gate__mark::before { background: radial-gradient(closest-side, rgba(255, 120, 130, .55), rgba(59, 123, 255, .35) 55%, rgba(59, 123, 255, 0)); }
@media (prefers-reduced-motion: reduce) { body.gate::after { animation: none; } }

/* Live TV stands out in the menu: a black button with the red "on air" light */
.masthead .nav .nav__links a.nav__live, .nav__links a.nav__live { background: #000; color: #fff; border-bottom-color: transparent; margin: 6px 4px; padding-top: 6px; padding-bottom: 6px; border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 4px 14px rgba(0, 0, 0, .45); align-self: center; }
.masthead .nav .nav__links a.nav__live:hover, .nav__links a.nav__live:hover { background: #111; border-bottom-color: transparent; box-shadow: 0 0 0 1px rgba(255, 59, 71, .8), 0 0 18px rgba(255, 31, 45, .45); }
.nav__links a.nav__live[aria-current="page"] { background: #000; box-shadow: 0 0 0 2px #fff; }
@media (max-width: 700px) { .masthead .nav .nav__links a.nav__live, .nav__links a.nav__live { margin: 0; padding: 8px 14px; border-radius: 999px; } }
.page--live { position: relative; color: #fff; background: #000; box-shadow: 0 0 0 100vmax #000; clip-path: inset(0 -100vmax); }
.page--live .sechead, .page--live h1, .page--live h2, .page--live h3 { color: #fff; }
.page--live .meta, .page--live p { color: #c9d2de; }
.page--live .live-off { background: #0a0a0a; border: 1px solid rgba(255, 255, 255, .1); }
.page--live .show-card, .page--live .video-card { background: #0d0d0d; color: #fff; border-color: rgba(255, 255, 255, .1); }
.page--live .more { color: #ff8a92; }

/* Every page has the front-page banner. The menu sticks to the top as you scroll, and the
   emblem then appears in the menu next to Home. */
.masthead--home[data-sticky-head] { position: sticky; top: calc(-1 * var(--head-top, 9999px)); z-index: 60; }
.nav__brand { display: none !important; align-items: center; padding: 0 8px 0 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.nav__brand img, .nav__brand svg { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .45)) drop-shadow(0 0 14px rgba(90, 150, 255, .6)); }
.is-stuck .nav__brand { display: inline-flex !important; animation: lbr-pop .3s ease-out; }
.is-stuck .masthead--home .logo__mark { opacity: 0; transition: opacity .2s; }
@media (min-width: 1200px) { .is-stuck .masthead--home .nav .nav__in { padding-left: 0; } }
@keyframes lbr-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.nav__search { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0 14px; color: #fff; border-left: 1px solid rgba(255, 255, 255, .18); }
.nav__search:hover { background: rgba(255, 255, 255, .1); color: #fff; }
@media (max-width: 700px) { .nav__search { display: none; } }

/* ---------- Weather ---------- */
.wx-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #020611; }
.wx-hero__radar { position: absolute; inset: 0; z-index: -2; opacity: .55; }
.wx-hero__radar img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; filter: saturate(1.3) contrast(1.1); }
.wx-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(2, 6, 17, .96) 0%, rgba(2, 6, 17, .82) 45%, rgba(2, 6, 17, .45) 100%),
  radial-gradient(60% 120% at 10% 100%, rgba(47, 180, 255, .35), transparent 62%), radial-gradient(50% 120% at 100% 0%, rgba(255, 31, 45, .3), transparent 62%); }
.wx-hero__in { display: grid; grid-template-columns: minmax(220px, 330px) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); align-items: center; padding-top: clamp(26px, 4vw, 54px); padding-bottom: clamp(26px, 4vw, 54px); }
.wx-hero__poster .poster__art { box-shadow: 0 0 0 3px #020611, 0 0 0 5px #2fb4ff, 0 0 60px rgba(47, 180, 255, .45), 0 30px 70px rgba(0, 0, 0, .6); }
.wx-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.wx-live { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 31, 45, .18); border: 1px solid rgba(255, 31, 45, .55); font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.wx-hero h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(50px, 7.6vw, 112px); line-height: .86; text-transform: uppercase; text-shadow: 0 0 40px rgba(47, 180, 255, .45), 0 6px 40px rgba(0, 0, 0, .6); }
.wx-hero__by { margin: 0; font-family: var(--display); font-weight: 600; font-size: 20px; color: #cfe8ff; }
.wx-hero__by a { color: #fff; text-decoration: underline; text-decoration-color: rgba(47, 180, 255, .6); }
.wx-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.wx-stat { display: flex; flex-direction: column; min-width: 120px; padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 13px; color: #cdd6e3; }
.wx-stat strong { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; color: #fff; }
.wx-stat--alert strong { color: #ff6b74; }
.wx-stat--hot strong { color: #ffb020; }
.wx-stat--cold strong { color: #7cc7ff; }
.wx-brief { max-width: 760px; padding: 16px 20px; border-radius: 10px; background: rgba(2, 6, 17, .6); border-left: 4px solid #2fb4ff; font-size: 17px; line-height: 1.6; color: #e2e8f0; }
.wx-brief p { margin: 0 0 10px; }
.wx-brief h2 { margin: 12px 0 4px; font-family: var(--display); font-size: 20px; text-transform: uppercase; color: #fff; }
.wx-brief__by { font-family: var(--mono); font-size: 12.5px; color: #9fb0c6; }
.page--weather { --sec: #2fb4ff; }
.page--weather .sechead::before { background: #2fb4ff; box-shadow: 0 0 14px #2fb4ff; }
.wx-map__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.wx-map__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wx-btn { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid #0b1a3e; background: #0b1a3e; color: #fff; font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .04em; cursor: pointer; }
.wx-btn:hover { background: #163a8a; }
.wx-toggle { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 700; font-size: 14px; }
.wx-map__time { font-family: var(--mono); font-size: 13px; color: var(--muted, #5b6470); min-width: 80px; }
.wx-map__box { position: relative; border-radius: 10px; overflow: hidden; background: #0b0f17; box-shadow: 0 0 0 1px rgba(47, 180, 255, .35), 0 20px 50px rgba(0, 0, 0, .3); }
.wx-map__canvas { height: clamp(380px, 58vw, 640px); background: #0b0f17; }
.wx-map__box noscript img { width: 100%; }
.wx-credit { margin: 6px 0 0; font-family: var(--mono); font-size: 11.5px; color: var(--muted, #6b7178); }
.wx-pin { background: none; border: 0; }
.wx-pin span { display: inline-block; padding: 3px 7px; border-radius: 6px; background: rgba(2, 6, 17, .85); border: 1px solid rgba(255, 255, 255, .3); color: #fff; font: 700 13px var(--display); white-space: nowrap; }
.wx-local { padding: 20px; border-radius: 10px; background: linear-gradient(160deg, #0b1a3e, #04070d); color: #fff; }
.wx-local .sechead { color: #fff; }
.wx-local__bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.wx-local__bar select { min-height: 44px; padding: 0 12px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; font: 600 16px var(--display); }
.wx-local__bar select option { color: #111; }
.wx-local__name { margin: 0 0 10px; font-family: var(--display); font-weight: 800; font-size: 26px; text-transform: uppercase; }
.wx-days { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); gap: 10px; overflow-x: auto; scrollbar-width: thin; }
.wx-days li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 10px; background: rgba(255, 255, 255, .07); text-align: center; }
.wx-days li strong { font-family: var(--display); font-size: 15px; }
.wx-days img { border-radius: 8px; }
.wx-days__t { font-family: var(--display); font-weight: 800; font-size: 28px; }
.wx-days em { font-style: normal; font-size: 12.5px; color: #cdd6e3; line-height: 1.3; }
.wx-local__detail { margin: 12px 0 0; color: #cdd6e3; }
.wx-local .muted { color: #a9b6c8; }
.wx-alerts__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.wx-alert { padding: 14px 16px; border-radius: 8px; background: #0b0f17; color: #fff; border-left: 5px solid #cbd5e1; }
.wx-alert strong { font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase; }
.wx-alert p { margin: 6px 0; font-size: 14px; color: #cdd6e3; }
.wx-alert .meta { color: #9fb0c6; }
.wx-alert--red { border-left-color: #ff1f2d; box-shadow: 0 0 24px rgba(255, 31, 45, .2); }
.wx-alert--orange { border-left-color: #ffb020; }
.wx-alert--blue { border-left-color: #60a5fa; }
.wx-alert--amber { border-left-color: #ff7a1a; }
.wx-counts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wx-count { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: #eef2f7; font-family: var(--display); font-weight: 600; font-size: 14px; }
.wx-count b { padding: 1px 8px; border-radius: 999px; background: #0b1a3e; color: #fff; font-size: 12px; }
.wx-count--red b { background: #e0101f; }
.wx-cities__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.wx-city { border-radius: 10px; background: linear-gradient(160deg, #10224d, #060b18); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.wx-city > summary { list-style: none; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name icon" "temp icon" "short short" "hl hl"; gap: 2px 8px; padding: 14px; cursor: pointer; }
.wx-city > summary::-webkit-details-marker { display: none; }
.wx-city[open] { box-shadow: 0 0 0 2px #2fb4ff; }
.wx-city__name { grid-area: name; font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase; }
.wx-city__name small { margin-left: 6px; font-size: 13px; color: #9fb0c6; }
.wx-icon { grid-area: icon; width: 58px; height: 58px; border-radius: 10px; object-fit: cover; }
.wx-city__temp { grid-area: temp; font-family: var(--display); font-weight: 800; font-size: 44px; line-height: 1; }
.wx-city__short { grid-area: short; font-size: 14px; color: #cdd6e3; }
.wx-city__hl { grid-area: hl; font-family: var(--mono); font-size: 12.5px; color: #9fb0c6; }
.wx-week { list-style: none; margin: 0; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.wx-week li { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13.5px; }
.wx-week strong { font-family: var(--display); }
.wx-week span { font-family: var(--display); font-weight: 800; }
.wx-week em { grid-column: 1 / -1; font-style: normal; color: #a9b6c8; }
.wx-maps__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.wx-tab { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid #d3dae3; background: #fff; font: 700 15px var(--display); cursor: pointer; }
.wx-tab.is-on { background: #0b1a3e; border-color: #0b1a3e; color: #fff; }
.wx-pane { display: none; margin: 0; border-radius: 10px; overflow: hidden; background: #000; }
.wx-pane.is-on { display: block; }
.wx-pane img { display: block; width: 100%; height: auto; max-height: 720px; object-fit: contain; background: #000; }
.wx-pane figcaption { padding: 8px 12px; font-family: var(--mono); font-size: 12px; color: #9fb0c6; background: #04070d; }
.prose--dark, .prose--dark p { color: #e2e8f0; }
@media (max-width: 1023px) { .wx-hero__in { grid-template-columns: minmax(180px, 240px) 1fr; } }
@media (max-width: 700px) {
  .wx-hero__in { grid-template-columns: 1fr; }
  .wx-hero__poster { width: min(70%, 260px); }
  .wx-stat { min-width: 0; flex: 1 1 40%; }
  .wx-stat strong { font-size: 28px; }
  .wx-map__canvas { height: 420px; }
  .wx-cities__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wx-city__temp { font-size: 36px; }
  .wx-icon { width: 44px; height: 44px; }
}
.wx-base { filter: brightness(.5) saturate(.8) contrast(1.1); }
.wx-lines { opacity: .6; filter: invert(1) brightness(1.4); }
.wx-map .leaflet-container { background: #0b0f17; font-family: var(--mono); }
.wx-map .leaflet-popup-content-wrapper { border-radius: 8px; }
/* Fit the whole menu, Weather and Live TV included, on one line */
@media (min-width: 1200px) {
  .masthead--home .nav .nav__in a, .masthead--home .nav .nav__more > summary { padding-left: 6px; padding-right: 6px; }
  .masthead .nav .nav__links a.nav__live { margin: 6px 3px; padding-left: 9px; padding-right: 9px; }
}
@media (min-width: 1200px) and (max-width: 1380px) { .masthead--home .nav .nav__in a, .masthead--home .nav .nav__more > summary { font-size: 16px; } }
@media (min-width: 701px) and (max-width: 1199px) { .nav__links a, .nav__more > summary { font-size: 15px; padding-left: 7px; padding-right: 7px; } }

/* ---------- Live markets: a trading-floor board for Business and Markets ---------- */
.mkt { position: relative; isolation: isolate; color: #fff; background: #050a16; box-shadow: 0 0 0 100vmax #050a16; clip-path: inset(0 -100vmax); padding: 22px 0 26px; margin-top: -30px;
  background-image: radial-gradient(60% 120% at 0% 0%, rgba(31, 191, 114, .14), transparent 60%), radial-gradient(60% 120% at 100% 0%, rgba(47, 123, 255, .22), transparent 60%),
  repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 24px); }
.mkt__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.mkt__title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 3.6vw, 48px); line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.mkt__status { font-family: var(--mono); font-size: 13px; color: #9fb0c6; }
.mkt-strip { border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; }
.mkt-strip__tabs { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); overflow-x: auto; scrollbar-width: none; }
.mkt-tab { flex: none; padding: 8px 14px 9px; border: 0; border-bottom: 3px solid transparent; background: none; color: #9fb0c6; font: 800 15px var(--display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.mkt-tab.is-on { color: #fff; border-bottom-color: #1fbf72; }
.mkt-strip__row { display: none; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); overflow-x: auto; scrollbar-width: thin; }
.mkt-strip__row.is-on { display: grid; }
.mkt-q { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name spark" "price spark" "chg chg"; gap: 2px 10px; padding: 12px 16px; border-right: 1px solid rgba(255, 255, 255, .06); }
.mkt-q__name { grid-area: name; font-family: var(--display); font-weight: 700; font-size: 16px; color: #8fc1ff; }
.mkt-q__price { grid-area: price; font-family: var(--mono); font-weight: 600; font-size: 19px; }
.mkt-q__chg { grid-area: chg; font-family: var(--mono); font-size: 14px; }
.mkt-q .spark { grid-area: spark; align-self: center; }
.is-up .mkt-q__chg, .is-up .mv__chg, .is-up .trendq__px span, tr.is-up td:not(.mkt-now__p) { color: #22c55e; }
.is-down .mkt-q__chg, .is-down .mv__chg, .is-down .trendq__px span, tr.is-down td:not(.mkt-now__p) { color: #ff4b55; }
.mkt__floor { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.mkt-now { border-radius: 10px; overflow: hidden; background: linear-gradient(160deg, #0d2a7a, #071640); box-shadow: 0 0 0 1px rgba(47, 123, 255, .4), 0 20px 50px rgba(0, 0, 0, .35); }
.mkt-now__h { margin: 0; padding: 14px 18px 8px; font-family: var(--display); font-weight: 800; font-size: 32px; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.mkt-now__t { width: 100%; border-collapse: collapse; background: rgba(255, 255, 255, .96); color: #0a1430; }
.mkt-now__t th { padding: 10px 18px 0; text-align: left; font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; color: #0b2a7a; }
.mkt-now__t tr { display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-template-areas: "n n n" "p c pc"; border-bottom: 1px solid #dbe3ee; }
.mkt-now__t tr:nth-child(odd) { background: #eef3fa; }
.mkt-now__t th { grid-area: n; }
.mkt-now__t td { padding: 2px 18px 10px; font-family: var(--display); font-weight: 600; font-size: 26px; }
.mkt-now__t td.mkt-now__p { grid-area: p; color: #0a1430; }
.mkt-now__pct { text-align: right; font-weight: 800 !important; }
.mkt-now__pct span { margin-left: 6px; font-size: .7em; }
.movers, .trendq { padding: 14px 16px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.movers__h { margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: .03em; color: #fff; border-top: 4px solid #1fbf72; padding-top: 8px; }
.movers h4 { margin: 10px 0 4px; font-family: var(--display); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #9fb0c6; }
.mv { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mv li { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 7px 10px; border-radius: 6px; background: rgba(255, 255, 255, .05); }
.mv__sym { font-family: var(--display); font-weight: 800; font-size: 17px; }
.mv__price { font-family: var(--mono); font-weight: 600; text-align: right; }
.mv__name { font-size: 12.5px; color: #a9b6c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv__chg { font-family: var(--mono); font-size: 12.5px; text-align: right; white-space: nowrap; }
.trendq ol { list-style: none; margin: 0; padding: 0; }
.trendq li { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.trendq__id { display: flex; flex-direction: column; min-width: 0; }
.trendq__id b { font-family: var(--display); font-size: 16px; color: #8fc1ff; }
.trendq__id span { font-size: 12.5px; color: #a9b6c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trendq__px { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--mono); font-size: 13px; }
.mkt-alert { display: grid; grid-template-columns: auto 1fr; margin-top: 16px; border-radius: 8px; overflow: hidden; color: #0a1430; background: #fff; text-decoration: none; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.mkt-alert:hover { text-decoration: none; }
.mkt-alert__tag { display: grid; place-items: center; padding: 12px 18px; background: linear-gradient(180deg, #1d5cff, #0b2a9a); color: #fff; font-family: var(--display); font-weight: 800; font-size: 20px; line-height: .95; text-transform: uppercase; text-align: center; }
.mkt-alert__text { padding: 14px 20px; font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.6vw, 36px); line-height: 1; text-transform: uppercase; color: #0b1a4a; }
.mkt__credit { margin: 8px 0 0; font-family: var(--mono); font-size: 11.5px; color: #8796ab; }
.mkt--empty { padding-bottom: 18px; }
@media (max-width: 1023px) { .mkt__floor { grid-template-columns: 1fr 1fr; } .mkt-now { grid-column: 1 / -1; } }
@media (max-width: 700px) {
  .mkt { margin-top: -20px; }
  .mkt__floor { grid-template-columns: 1fr; }
  .mkt-strip__row { grid-auto-columns: 74%; }
  .mkt-now__t td { font-size: 20px; padding-left: 12px; padding-right: 12px; }
  .mkt-now__t th { font-size: 17px; padding-left: 12px; }
  .mkt-alert__text { font-size: 20px; }
}

/* ---------- live scores ---------- */
.scores { position: relative; color: #fff; background: #0b0d14; box-shadow: 0 0 0 100vmax #0b0d14; clip-path: inset(0 -100vmax); padding: 20px 0 22px; margin-top: -30px; }
.scores__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 8px; }
.scores__title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3.2vw, 42px); text-transform: uppercase; }
.scores__status { font-family: var(--mono); font-size: 13px; color: #9fb0c6; }
.scores__tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(255, 255, 255, .08); margin-bottom: 12px; }
.scores__tabs .mkt-tab.is-on { border-bottom-color: #ff8a1f; }
.scores__tabs .mkt-tab span { margin-left: 6px; font-family: var(--mono); font-size: 11px; color: #9fb0c6; }
.scores__row { display: none; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.scores__row.is-on { display: grid; }
.game { scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: #161a26; box-shadow: inset 0 3px 0 #334155; }
.game--in { box-shadow: inset 0 3px 0 #ff1f2d, 0 0 24px rgba(255, 31, 45, .2); }
.game--post { opacity: .92; }
.game__top { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 12.5px; color: #cbd5e1; }
.game__time { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.game--in .game__time { color: #ff6b74; }
.game__tv { color: #8796ab; }
.game__team { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; grid-template-areas: "b n s" "b r s"; align-items: center; gap: 0 10px; }
.game__badge { grid-area: b; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--c); color: var(--a); font: 800 14px var(--display); letter-spacing: .02em; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }
.game__name { grid-area: n; font-family: var(--display); font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game__name small { margin-right: 5px; font-size: 12px; color: #9fb0c6; }
.game__rec { grid-area: r; font-family: var(--mono); font-size: 12px; color: #8796ab; }
.game__score { grid-area: s; font-family: var(--display); font-weight: 800; font-size: 26px; }
.game--post .game__team:not(.is-win) .game__score, .game--post .game__team:not(.is-win) .game__name { color: #8796ab; }
@media (max-width: 700px) { .scores { margin-top: -20px; } .scores__row { grid-auto-columns: 78%; } }
/* Phones: the section menu is a plain row of words, no bubbles */
@media (max-width: 700px) {
  .nav__in { padding: 0 0 0 4px; gap: 0; }
  .nav__links { gap: 0; }
  .nav__links a, .masthead--home .nav .nav__in a, .nav__more > summary, .masthead .nav .nav__links a.nav__live, .nav__links a.nav__live {
    background: none !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important;
    padding: 13px 11px 11px !important; border-bottom: 3px solid transparent !important; font-size: 16px; line-height: 1; }
  .nav__links a[aria-current="page"], .masthead--home .nav .nav__in a[aria-current="page"] { background: none !important; color: #fff !important; border-bottom-color: #fff !important; text-shadow: 0 0 12px rgba(255, 255, 255, .6); }
  .nav__more > summary { border-left: 1px solid rgba(255, 255, 255, .18); margin-right: 0 !important; }
}

/* ---------- front page live bands ---------- */
.home-mkt, .home-wx, .home-scores { position: relative; color: #fff; border-radius: 12px; padding: 16px; background: #050a16; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 18px 44px rgba(0, 0, 0, .22); }
.home-wx { background: linear-gradient(160deg, #0a1c44, #04070d); }
.home-scores { background: #0b0d14; }
.home-band__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.home-band__h { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.6vw, 34px); line-height: 1; text-transform: uppercase; }
.more--light { color: #8fc1ff; padding-top: 0; }
.home-mkt .mkt-strip__row { grid-auto-columns: minmax(180px, 1fr); }
.home-mkt .mkt-q { text-decoration: none; color: #fff; }
.home-mkt .mkt-q:hover { background: rgba(255, 255, 255, .05); }
.home-wx__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 14px; }
.home-wx__radar { position: relative; display: block; border-radius: 10px; overflow: hidden; background: #000; }
.home-wx__radar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-wx__radar span { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(224, 16, 31, .9); font: 800 13px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.home-wx__cities { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.home-wx__c { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "i n" "i t" "s s"; gap: 0 8px; align-items: center; padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.home-wx__c:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.home-wx__c img { grid-area: i; border-radius: 8px; }
.home-wx__c strong { grid-area: n; font-family: var(--display); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-wx__c b { grid-area: t; font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; }
.home-wx__c span { grid-area: s; margin-top: 4px; font-size: 12px; color: #cdd6e3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-scores .game { color: #fff; text-decoration: none; }
.home-scores .game:hover { text-decoration: none; box-shadow: inset 0 3px 0 #ff8a1f; }
.explore__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.explore__tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 150px; padding: 18px; overflow: hidden; isolation: isolate; border-radius: 10px; color: #fff; text-decoration: none;
  background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--sec) 75%, transparent), transparent 62%), linear-gradient(160deg, #0d1730, #04070d 75%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 12px 28px rgba(0, 0, 0, .25); transition: transform .3s, box-shadow .3s; }
.explore__tile::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .45; background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .2) 1px, transparent 1.6px) 0 0 / 14px 14px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%); }
.explore__tile:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--sec), 0 18px 38px color-mix(in srgb, var(--sec) 35%, transparent); text-decoration: none; }
.explore__name { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: .95; text-transform: uppercase; }
.explore__desc { font-size: 13.5px; line-height: 1.35; color: #cdd6e3; }
.explore__n { font-family: var(--mono); font-size: 12px; color: color-mix(in srgb, var(--sec) 70%, #fff); }
@media (max-width: 1023px) { .home-wx__grid { grid-template-columns: 1fr; } .home-wx__cities { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .home-mkt, .home-wx, .home-scores { border-radius: 0; margin: 0 -16px; padding: 14px 16px; }
  .home-mkt .mkt-strip__row { grid-auto-columns: 62%; }
  .home-wx__cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .explore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .explore__tile { min-height: 120px; padding: 14px; }
  .explore__name { font-size: 22px; }
  .explore__desc { display: none; }
}
.sec-archive-link { text-align: center; } .arch-day { margin-bottom: 22px; }

/* ---------- free sign-up: header button, pop-up and in-article boxes ---------- */
.util__join { padding: 2px 10px; border-radius: 4px; background: var(--hot-2); color: #fff !important; font-weight: 700; }
.nav__join { display: inline-flex; align-items: center; flex: none; margin: 6px 8px 6px 4px; padding: 0 14px; border-radius: 6px; background: #fff; color: var(--hot-2) !important; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); white-space: nowrap; }
.nav__join:hover { background: #ffe9ea; text-decoration: none; }
@media (max-width: 1199px) { .nav__join { display: none; } }
.join-form { display: flex; gap: 8px; flex-wrap: wrap; }
.join-form input { flex: 1 1 220px; min-height: 48px; padding: 0 14px; border-radius: 6px; border: 1px solid #c9d2de; font: 17px var(--mono); }
.join-form .btn { min-height: 48px; padding: 0 22px; font-weight: 800; font-size: 17px; }
.join-box { display: flex; gap: 18px; align-items: flex-start; margin: 26px 0; padding: 22px; border-radius: 10px; color: #fff; background: linear-gradient(160deg, #0b1a3e, #2a0510); border-left: 5px solid var(--hot); box-shadow: 0 16px 40px rgba(0, 0, 0, .25); }
.join-box img { flex: none; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(90, 150, 255, .6)); }
.join-box__text { flex: 1; min-width: 0; }
.join-box strong { display: block; font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase; }
.join-box p { margin: 8px 0 12px; font-family: var(--mono); font-size: 15px; line-height: 1.5; color: #dfe6ef; }
.join-box .join-box__fine { margin: 8px 0 0; font-size: 12px; color: #9fb0c6; }
.join-box--small { margin: 22px 0; padding: 16px 18px; }
.join-box--small strong { font-size: 21px; }
.join-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(2, 4, 10, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.join-modal[hidden] { display: none; }
.join-modal__box { position: relative; width: min(520px, 100%); padding: 30px 28px 24px; border-radius: 14px; text-align: center; color: #fff; background: radial-gradient(80% 60% at 50% 0%, rgba(255, 31, 45, .35), transparent 70%), linear-gradient(170deg, #0d1f4d, #050914); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 80px rgba(0, 0, 0, .6); animation: lbr-pop .25s ease-out; }
.join-modal__x { position: absolute; right: 10px; top: 8px; width: 40px; height: 40px; border: 0; background: none; color: #cdd6e3; font-size: 30px; line-height: 1; cursor: pointer; }
.join-modal__mark { width: 96px; height: 96px; object-fit: contain; margin: 0 auto 6px; filter: drop-shadow(0 0 16px rgba(90, 150, 255, .7)); }
.join-modal__kicker { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--hot-2); font: 800 13px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.join-modal h2 { margin: 10px 0 6px; font-family: var(--display); font-weight: 800; font-size: clamp(32px, 6vw, 44px); line-height: .95; text-transform: uppercase; }
.join-modal p { margin: 0 0 16px; font-family: var(--mono); font-size: 16px; line-height: 1.5; color: #dfe6ef; }
.join-modal .join-form { justify-content: center; }
.join-modal .join-modal__fine { margin: 12px 0 0; font-size: 12px; color: #9fb0c6; }
@media (max-width: 700px) { .join-box { flex-direction: column; } .join-box img { width: 48px; height: 48px; } }

/* ===================== Market ticker (above everything) ===================== */
.tk { display: flex; align-items: stretch; height: 30px; background: #03060d; border-bottom: 1px solid #17243a; color: #dfe6f0; font-family: var(--mono); font-size: 13px; overflow: hidden; }
.tk__label { display: flex; align-items: center; flex: none; padding: 0 12px; background: var(--red); color: #fff; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.tk__view { position: relative; flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.tk__track { display: flex; align-items: center; height: 100%; width: max-content; animation: lbr-tk var(--tk-speed, 70s) linear infinite; }
.tk__track:hover { animation-play-state: paused; }
.tk__dup { display: contents; }
@keyframes lbr-tk { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tk__i { display: inline-flex; align-items: center; gap: 7px; padding: 0 18px; height: 100%; color: #dfe6f0 !important; white-space: nowrap; border-right: 1px solid #142035; text-decoration: none !important; }
.tk__i:hover { background: #0c1628; }
.tk__n { font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: .03em; }
.tk__p { font-variant-numeric: tabular-nums; }
.tk__c { font-variant-numeric: tabular-nums; font-weight: 600; }
.tk__i.is-up .tk__c { color: #2fd07a; }
.tk__i.is-down .tk__c { color: #ff5a63; }
.tk__i.tk--flash { animation: lbr-tkflash 1.2s ease-out; }
@keyframes lbr-tkflash { from { background: rgba(255, 255, 255, .18); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .tk__track { animation-duration: 240s; } }
@media (max-width: 700px) { .tk { height: 26px; font-size: 12px; } .tk__label { display: none; } }

/* ===================== Account corner (top right, above the menu) ===================== */
.util__in { flex-wrap: nowrap; }
.util__links { margin-left: auto; }
.util__acct { display: flex; align-items: center; gap: 10px; flex: none; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .14); }
.util__acct .util__in, .util a.util__in { padding: 3px 10px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 4px; color: #fff; font-weight: 600; }
.util a.util__in:hover { background: rgba(255, 255, 255, .1); text-decoration: none; }
.util__me { display: inline-flex; align-items: center; gap: 7px; color: #fff !important; font-weight: 600; }
.util__me .mav { border-radius: 5px; }
.util__admin { padding: 2px 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); }
.util__out { padding: 3px 10px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 4px; background: none; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.util__out:hover { background: rgba(255, 255, 255, .1); }
.util__join { padding: 4px 12px; font-family: var(--display); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none !important; }
.util__join:hover { background: #ff3341; }
@media (max-width: 900px) { .util__links { display: none; } }
@media (max-width: 700px) {
  .util__in { gap: 8px; }
  .util__date { font-size: 12px; }
  .util__acct { padding-left: 8px; gap: 6px; border-left: 0; }
  .util__me span, .util__admin { display: none; }
  .util__me .patriot { display: none; }
}

/* ===================== Members: avatars and the Patriot badge ===================== */
.mav { display: inline-block; flex: none; border-radius: 10px; background: #0d2a5c; object-fit: cover; vertical-align: middle; }
.mav--xl { border-radius: 22px; box-shadow: 0 10px 30px rgba(5, 10, 20, .35); }
.patriot { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px 1px 4px; border-radius: 999px; background: linear-gradient(90deg, #0d2a5c, #1f3f8f); color: #fff; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; line-height: 18px; vertical-align: middle; box-shadow: inset 0 -2px 0 #b22234; white-space: nowrap; }
.patriot--sm { font-size: 10.5px; line-height: 16px; padding: 0 6px 0 3px; }
.patriot__icon { flex: none; }
.staff-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 3px; background: #b22234; color: #fff; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 16px; vertical-align: middle; }
.mtag { display: inline-flex; align-items: center; gap: 6px; }
.cmt__av { width: 40px; height: 40px; }
a.cmt__user { font-weight: 700; color: var(--ink); }

/* ===================== Join, verify, welcome ===================== */
.member-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(70% 90% at 85% 10%, rgba(255, 31, 45, .35), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(59, 123, 255, .35), transparent 60%), linear-gradient(160deg, #0b1734, #04070f); }
.member-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, #b22234 0 33%, #fff 33% 66%, #1f3f8f 66%); }
.member-hero__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; padding-top: 56px; padding-bottom: 60px; }
.member-hero h1 { margin: 8px 0 12px; font-family: var(--display); font-weight: 800; font-size: clamp(40px, 5.4vw, 72px); line-height: .95; text-transform: uppercase; letter-spacing: .01em; }
.member-hero p { margin: 0 0 18px; font-size: 19px; color: #d5deeb; max-width: 600px; }
.member-hero__lead { font-size: 20px; }
.label--light { color: #ff8a92; }
.join-form--big input { min-height: 56px; font-size: 18px; border: 0; }
.join-form--big .btn { min-height: 56px; font-size: 19px; padding: 0 28px; border-radius: 6px; }
.member-hero__fine { font-family: var(--mono); font-size: 13px !important; color: #9fb0c6 !important; }
.member-hero__fine a { color: #cfd9e8; text-decoration: underline; }
.member-hero__art { display: flex; flex-direction: column; gap: 18px; align-items: center; }
.av-strip { display: grid; grid-template-columns: repeat(7, 56px); gap: 10px; transform: rotate(-4deg); }
.av-strip .mav { box-shadow: 0 8px 18px rgba(0, 0, 0, .4); }
.member-hero__badge { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 10px; background: rgba(255, 255, 255, .08); font-family: var(--mono); font-size: 14px; color: #dfe6f0; }
.member-hero__badge .patriot { font-size: 15px; line-height: 24px; padding: 2px 12px 2px 6px; }
.join-steps { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 14px; padding: 0; list-style: none; font-family: var(--mono); font-size: 14px; color: inherit; }
.join-steps li { display: inline-flex; align-items: center; gap: 8px; opacity: .7; }
.join-steps li span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid currentColor; font-weight: 700; font-size: 12px; }
.join-steps li[aria-current], .join-steps li.done { opacity: 1; }
.join-steps li[aria-current] span { background: var(--red); border-color: var(--red); color: #fff; }
.join-steps li.done span { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.authbox .join-steps { color: var(--ink-2); }
.benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 14px 0 0; padding: 0; list-style: none; }
.benefits li { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 12px; background: var(--panel); border: 1px solid var(--rule); }
.benefits__icon { display: inline-flex; width: 50px; height: 50px; align-items: center; justify-content: center; border-radius: 12px; background: #0d2a5c; color: #fff; box-shadow: inset 0 -3px 0 #b22234; }
.benefits strong { font-family: var(--display); font-weight: 800; font-size: 21px; text-transform: uppercase; letter-spacing: .02em; }
.benefits span:last-child { color: var(--ink-2); font-size: 16px; }
.join-faq details { border-bottom: 1px solid var(--rule); padding: 12px 0; }
.join-faq summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 20px; }
.join-faq p { margin: 8px 0 0; color: var(--ink-2); }
.authbox--center { text-align: center; align-items: center; }
.inbox-icon { display: inline-flex; width: 96px; height: 96px; align-items: center; justify-content: center; border-radius: 50%; background: #eef3ff; color: #1f3f8f; }
.page--join { max-width: 640px; }
.verified { margin: 0; padding: 8px 12px; border-radius: 6px; background: #e8f3ec; color: #14532d; font-family: var(--mono); font-size: 14px; }
.verified-tag { color: #1f9d55; font-family: var(--mono); font-size: 13px; }
.pw { position: relative; }
.pw input { padding-right: 70px; }
.pw__show { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 6px 10px; border: 0; border-radius: 4px; background: var(--panel); font: 600 12px var(--mono); cursor: pointer; }
.field--zip input { max-width: 180px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.4; }
.check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--red); }
.check a { text-decoration: underline; }
.btn--big { min-height: 56px; font-size: 19px; font-weight: 800; }
.av-pick { margin: 0; padding: 0; border: 0; }
.av-pick legend { margin-bottom: 8px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.av-pick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.av-pick__opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border: 2px solid transparent; border-radius: 12px; cursor: pointer; text-align: center; font-family: var(--mono); font-size: 10.5px; line-height: 1.2; color: var(--muted); }
.av-pick__opt input { position: absolute; opacity: 0; }
.av-pick__opt:hover { background: var(--panel); }
.av-pick__opt:has(input:checked) { border-color: var(--red); background: #fff3f4; color: var(--ink); }
.av-pick__opt:has(input:focus-visible) { outline: 3px solid #1d5fbf; outline-offset: 2px; }
.welcome-card { display: flex; align-items: center; gap: 24px; }
.welcome-card h1 { margin: 6px 0; }
.welcome-card__tag { font-family: var(--mono); font-size: 16px !important; color: #fff !important; }
.member-hero--welcome .member-hero__in { grid-template-columns: 1fr; gap: 10px; }
.welcome-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.welcome-tiles a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 22px; border-radius: 12px; background: #0d1f4d; color: #fff; text-decoration: none; box-shadow: inset 0 -4px 0 #b22234; }
.welcome-tiles a:hover { background: #142a63; color: #fff; }
.welcome-tiles strong { font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; }
.welcome-tiles span { color: #c9d4e5; }
.join-band { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 18px 20px; border-radius: 12px; color: #fff; background: linear-gradient(110deg, #0d1f4d, #3a0a12); }
.join-band strong { font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; }
.join-band span { flex: 1 1 200px; color: #cfd9e8; }
.join-band .btn--sm { color: #fff; border-color: rgba(255, 255, 255, .5); background: transparent; }
.join-modal__perks { margin: 0 auto 16px; padding: 0; list-style: none; display: grid; gap: 6px; max-width: 340px; text-align: left; font-family: var(--mono); font-size: 15px; color: #dfe6f0; }
.join-modal__perks li::before { content: '★'; margin-right: 8px; color: #ff4b55; }

/* ===================== Account and public profiles ===================== */
.profile-head { display: flex; gap: 22px; align-items: center; }
.profile-head h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4vw, 48px); text-transform: uppercase; line-height: 1; }
.profile-head__tags { margin: 8px 0; }
.profile-head__tags .patriot { margin-left: 0; font-size: 14px; line-height: 22px; padding: 1px 10px 1px 5px; }
.profile-head__links { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.profile-head__bio { margin: 10px 0 0; font-size: 18px; color: var(--ink-2); max-width: 640px; }
.master-card { padding: 18px 20px; border-radius: 12px; background: linear-gradient(100deg, #2a0710, #0d1f4d); color: #fff; }
.master-card h2 { margin: 0 0 4px; font-family: var(--display); font-weight: 800; text-transform: uppercase; }
.master-card p { margin: 0 0 12px; color: #dfe6f0; }

/* ===================== Members Lounge ===================== */
.lounge-head .label { color: var(--red); }
.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.rooms a { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; border: 1px solid var(--rule); background: #fff; color: var(--ink); text-decoration: none; }
.rooms a:hover, .rooms a[aria-current] { border-color: var(--red); background: #fff6f7; }
.rooms a > span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rooms strong { font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase; }
.rooms span span { color: var(--muted); font-size: 14px; }
.rooms em { flex: none; font-style: normal; font-family: var(--mono); font-size: 12px; color: #1f9d55; }
.page--lounge { padding-top: 18px; }
.lounge { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; }
.lounge__side .rooms { grid-template-columns: 1fr; gap: 6px; }
.lounge__side .rooms a { padding: 8px 10px; }
.lounge__side .rooms span span { display: none; }
.lounge__back { display: inline-block; margin-bottom: 10px; font-family: var(--mono); font-size: 13px; }
.lounge__main { display: flex; flex-direction: column; min-height: 70vh; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: #fff; }
.lounge__head { padding: 14px 18px; background: linear-gradient(100deg, #0d1f4d, #050914); color: #fff; }
.lounge__head h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 28px; text-transform: uppercase; }
.lounge__head p { margin: 2px 0 0; color: #c9d4e5; font-size: 15px; }
.chat { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px; max-height: 64vh; min-height: 320px; overflow-y: auto; background: #f7f8fb; }
.chat__empty { margin: auto; color: var(--muted); font-family: var(--mono); }
.msg { display: flex; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.msg:hover { background: #eef1f7; }
.msg--mine { background: #fff4f5; }
.msg__main { flex: 1; min-width: 0; }
.msg__head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-family: var(--mono); font-size: 13px; }
.msg__name { font-weight: 700; color: var(--ink); }
.msg__head time { color: var(--muted); font-size: 12px; margin-left: 4px; }
.msg__body { margin: 2px 0 0; font-size: 16px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg__acts { display: flex; gap: 4px; align-items: flex-start; opacity: 0; }
.msg:hover .msg__acts, .msg:focus-within .msg__acts { opacity: 1; }
.msg__acts .act { font-size: 12px; }
.composer--chat { display: flex; gap: 10px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--rule); background: #fff; }
.composer--chat textarea { flex: 1; min-height: 44px; max-height: 160px; padding: 10px 12px; border: 1px solid #a9acb0; border-radius: 10px; font: 16px var(--serif); resize: none; }
.chat__rules { margin: 0; padding: 0 12px 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); background: #fff; }
.lounge-teaser { position: relative; }
.chat--blur { filter: blur(5px); max-height: 360px; border-radius: 14px; pointer-events: none; user-select: none; }
.join-band--over { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(640px, 92%); box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }

/* ===================== Perks and events ===================== */
.perks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 12px; }
.perk { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 12px; border: 1px solid var(--rule); background: #fff; }
.perk h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; }
.perk p { margin: 0; }
.perk__kind { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.perk__deal { font-family: var(--display); font-weight: 800; font-size: 30px; color: #0d2a5c; }
.perk__code { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; }
.perk__code code { padding: 4px 10px; border: 2px dashed #0d2a5c; border-radius: 6px; font-size: 16px; font-weight: 700; letter-spacing: .06em; }
.perk__lock { color: var(--muted); font-family: var(--mono); font-size: 13px; }
.perk--soon { background: var(--panel); border-style: dashed; }
.events { display: flex; flex-direction: column; gap: 12px; }
.event { display: flex; gap: 16px; padding: 18px; border-radius: 12px; border: 1px solid var(--rule); background: #fff; }
.event__date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 76px; height: 76px; border-radius: 12px; background: #0d2a5c; color: #fff; box-shadow: inset 0 -4px 0 #b22234; }
.event__date span { font-family: var(--mono); font-size: 13px; text-transform: uppercase; }
.event__date strong { font-family: var(--display); font-weight: 800; font-size: 32px; line-height: 1; }
.event__body h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 24px; text-transform: uppercase; }
.event__guest { margin: 2px 0; font-weight: 600; color: var(--red-text); }
.event__body p { margin: 4px 0 8px; }

@media (max-width: 980px) {
  .member-hero__in { grid-template-columns: 1fr; gap: 26px; padding-top: 34px; padding-bottom: 40px; }
  .av-strip { grid-template-columns: repeat(7, 40px); gap: 8px; }
  .av-strip .mav { width: 40px; height: 40px; }
  .benefits, .welcome-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lounge { grid-template-columns: 1fr; }
  .lounge__side { display: none; }
}
@media (max-width: 560px) {
  .benefits, .welcome-tiles { grid-template-columns: 1fr; }
  .profile-head, .welcome-card { flex-direction: column; align-items: flex-start; }
  .chat { max-height: 58vh; }
  .msg__acts { opacity: 1; }
}
@media (min-width: 701px) { .tk + .util { top: 30px; } .util { z-index: 70; } }
.nav__overflow { display: contents; }
.nav__overflow:empty { display: none; }
.composer.composer--chat { flex-direction: row; flex-wrap: nowrap; border-radius: 0; margin: 0; }
.composer.composer--chat .mav { width: 36px; height: 36px; }
.composer.composer--chat .btn { flex: none; min-height: 44px; }

/* Back-end buttons on your own profile page */
.admin-panel { padding: 20px; border-radius: 14px; color: #fff; background: radial-gradient(70% 90% at 100% 0%, rgba(255, 31, 45, .28), transparent 60%), linear-gradient(150deg, #0d1f4d, #050914); box-shadow: 0 14px 40px rgba(5, 10, 20, .25); }
.admin-panel--master { box-shadow: 0 0 0 2px #e8b64a inset, 0 14px 40px rgba(5, 10, 20, .3); }
.admin-panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.admin-panel__head h2 { margin: 2px 0 0; font-family: var(--display); font-weight: 800; font-size: 28px; text-transform: uppercase; letter-spacing: .02em; }
.admin-panel__kicker { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #e8b64a; }
.admin-panel__alert { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: rgba(232, 182, 74, .16); color: #ffe7b0; font-family: var(--mono); font-size: 14px; }
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ap-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff !important; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .02em; text-decoration: none !important; }
.ap-btn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); }
.ap-btn em { font-style: normal; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--red); font-family: var(--mono); font-size: 12px; text-align: center; }
.ap-btn--hot { border-color: #e8b64a; box-shadow: 0 0 0 1px #e8b64a inset; }

/* ===================== The Liberty Bell Store ===================== */
.store-hero { position: relative; color: #fff; background: radial-gradient(60% 90% at 90% 20%, rgba(255, 31, 45, .32), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(59, 123, 255, .3), transparent 60%), linear-gradient(160deg, #0b1734, #04070f); }
.store-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, #b22234 0 33%, #fff 33% 66%, #1f3f8f 66%); }
.store-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-top: 48px; padding-bottom: 54px; }
.store-hero h1 { margin: 8px 0 12px; font-family: var(--display); font-weight: 800; font-size: clamp(40px, 5.2vw, 70px); line-height: .95; text-transform: uppercase; }
.store-hero p { margin: 0 0 14px; font-size: 19px; color: #d5deeb; max-width: 560px; }
.store-hero__deal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--mono); font-size: 15px !important; color: #fff !important; }
.store-hero__deal a { color: #ff8a92; text-decoration: underline; }
.store-hero__art { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.store-hero__art a { display: block; border-radius: 14px; overflow: hidden; background: #0d1f4d; aspect-ratio: 1; box-shadow: 0 14px 30px rgba(0, 0, 0, .4); }
.store-hero__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.store-hero__art a:hover img { transform: scale(1.04); }
.store-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.store-cats a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule-2); font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); text-decoration: none; }
.store-cats a:hover, .store-cats a[aria-current] { background: var(--ink); color: #fff; border-color: var(--ink); }
.prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.prods--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prod { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--rule); color: var(--ink); text-decoration: none !important; transition: transform .2s, box-shadow .2s; }
.prod:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(10, 20, 36, .14); color: var(--ink); }
.prod__img { position: relative; display: block; aspect-ratio: 1; background: #f1f3f7; }
.prod__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod__soon, .prod__dl { position: absolute; left: 10px; top: 10px; padding: 4px 9px; border-radius: 6px; background: rgba(5, 9, 20, .82); color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.prod__dl { left: auto; right: 10px; background: #1f3f8f; }
.prod__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.prod__cat { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red-text); }
.prod__title { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.1; text-transform: uppercase; }
.prod__model { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.prod__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: radial-gradient(70% 70% at 50% 40%, #1f3f8f, #0b1530); color: #fff; font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: .06em; }
.price { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; }
.price__now { font-family: var(--display); font-weight: 800; font-size: 22px; }
.price__member { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.price__member .patriot { margin-left: 0; }
.price--big .price__now { font-size: 36px; }
.price--big .price__member { font-size: 14px; }
.sweater-band { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 24px; align-items: center; padding: 22px; border-radius: 16px; background: linear-gradient(120deg, #f7f1e6, #efe4cf); }
.sweater-band h2 { margin: 6px 0 8px; font-family: var(--display); font-weight: 800; font-size: 34px; text-transform: uppercase; }
.sweater-band p { margin: 0 0 14px; color: var(--ink-2); }
.sweater-band__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.store-note { color: var(--muted); font-family: var(--mono); font-size: 13px; }
.crumbs { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: start; }
.product__main { width: 100%; height: auto; border-radius: 16px; background: #f1f3f7; aspect-ratio: 1; object-fit: cover; }
.product__media .prod__ph { aspect-ratio: 1; border-radius: 16px; }
.product__thumbs { display: flex; gap: 8px; margin-top: 10px; }
.product__thumbs img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; }
.product__info h1 { margin: 6px 0 10px; font-family: var(--display); font-weight: 800; font-size: clamp(32px, 3.6vw, 48px); line-height: 1; text-transform: uppercase; }
.product__model { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 14px; }
.product__model img { border-radius: 8px; object-fit: cover; }
.product__desc { font-size: 19px; color: var(--ink-2); }
.product__opts { display: grid; gap: 6px; margin: 0 0 18px; }
.product__opts div { display: flex; gap: 10px; }
.product__opts dt { font-family: var(--mono); font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); min-width: 64px; }
.product__opts dd { margin: 0; }
.product__soon { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 12px; background: #0d1f4d; color: #fff; }
.product__soon strong { font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; }
.product__soon span { color: #c9d4e5; }
.product__soon .btn { align-self: flex-start; }
.product__details, .product__code { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.product__trust { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-family: var(--mono); font-size: 13px; }
.product__trust li::before { content: '★ '; color: var(--red); }
@media (max-width: 980px) {
  .store-hero__in, .product, .sweater-band { grid-template-columns: 1fr; }
  .prods--4, .sweater-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .prods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .prod__title { font-size: 16px; } .prod__body { padding: 10px; } }

/* ===================== The Liberty Vault ===================== */
.vault-hero { position: relative; color: #fff; background: radial-gradient(60% 100% at 15% 50%, rgba(232, 182, 74, .22), transparent 60%), linear-gradient(160deg, #0b1734, #03060d); }
.vault-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, #b22234 0 33%, #fff 33% 66%, #1f3f8f 66%); }
.vault-hero__in { display: flex; align-items: center; gap: 34px; padding-top: 44px; padding-bottom: 48px; }
.vault-hero h1 { margin: 6px 0 10px; font-family: var(--display); font-weight: 800; font-size: clamp(40px, 5vw, 68px); line-height: .95; text-transform: uppercase; }
.vault-hero p { margin: 0 0 10px; font-size: 19px; color: #d5deeb; max-width: 640px; }
.vault-hero__stats { font-family: var(--mono); font-size: 15px !important; color: #e8b64a !important; }
.vault-hero__stats strong { font-size: 22px; color: #fff; }
.vault-door { position: relative; flex: none; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f6dc9a, #b8862e 55%, #6d4c12); box-shadow: 0 0 0 8px #2a2f3d, 0 0 0 12px #8f6a24, 0 20px 50px rgba(0, 0, 0, .55); }
.vault-door__ring { position: absolute; inset: 22px; border-radius: 50%; border: 4px dashed rgba(60, 40, 8, .55); }
.vault-door__bell { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #3b2a08; }
.vault-door__bell .bell { width: 64px; height: 64px; }
.vault-search { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--rule); }
.vault-search__q { display: flex; gap: 8px; }
.vault-search__q input { flex: 1; min-height: 52px; padding: 0 16px; border: 1px solid #a9acb0; border-radius: 8px; font: 18px var(--serif); }
.vault-search__q .btn { min-height: 52px; border-radius: 8px; }
.vault-search__f { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.vault-search__f > label:not(.check) { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vault-search__f select, .vault-search__f input[type=date] { min-height: 40px; padding: 0 10px; border: 1px solid #a9acb0; border-radius: 6px; background: #fff; font: 15px var(--mono); color: var(--ink); }
.vault-search__f .check { font-size: 14px; align-self: center; }
.vault-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vault-chips a { padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--rule-2); font-family: var(--mono); font-size: 13px; color: var(--ink); text-decoration: none; }
.vault-chips a:hover { border-color: var(--red); color: var(--red-text); }
.vault-chips__clear { background: var(--ink) !important; color: #fff !important; }
.vault { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
.vault__count { margin: 0 0 10px; font-family: var(--mono); font-size: 14px; color: var(--muted); }
.vault__side { display: flex; flex-direction: column; gap: 22px; }
.vault-list { margin: 8px 0 0; padding: 0; list-style: none; }
.vault-list li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 14px; }
.vault-list span { color: var(--muted); }
@media (max-width: 980px) { .vault { grid-template-columns: 1fr; } .vault-hero__in { flex-direction: column; align-items: flex-start; } .vault-door { width: 96px; height: 96px; } .vault-door__bell .bell { width: 40px; height: 40px; } }
@media (max-width: 560px) { .vault-search__q { flex-direction: column; } }

/* Breaking and Live Coverage: square, the full height of the menu bar, black with 3-D chrome bars top and bottom */
.masthead .nav .nav__links .nav__item--brk { align-self: stretch; }
.masthead .nav .nav__links .nav__item > a.nav__brk, .masthead .nav .nav__links a.nav__live, .nav__links a.nav__brk, .nav__links a.nav__live {
  position: relative; overflow: hidden; isolation: isolate; align-self: stretch; display: inline-flex !important; align-items: center; gap: 8px;
  margin: 0 4px !important; padding: 0 16px !important; border: 0 !important; border-radius: 0 !important;
  font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .09em; line-height: 1;
  background:
    linear-gradient(180deg, #ffffff 0%, #d9dde3 22%, #8a929c 48%, #5b626b 55%, #c9ced5 80%, #f4f6f8 100%) top / 100% 4px no-repeat,
    linear-gradient(180deg, #f4f6f8 0%, #c9ced5 20%, #5b626b 45%, #8a929c 52%, #d9dde3 78%, #ffffff 100%) bottom / 100% 4px no-repeat,
    linear-gradient(180deg, #23262b 0%, #0b0c0e 18%, #000 50%, #0b0c0e 82%, #1d2024 100%) !important;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .12), inset -1px 0 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(0, 0, 0, .6), 0 6px 16px rgba(0, 0, 0, .55) !important;
  transition: filter .15s ease;
}
.masthead .nav .nav__links .nav__item > a.nav__brk, .nav__links a.nav__brk { color: #ff2b37 !important; text-shadow: 0 0 10px rgba(255, 30, 45, .85), 0 0 22px rgba(255, 30, 45, .45), 0 1px 0 #000 !important; }
.masthead .nav .nav__links a.nav__live, .nav__links a.nav__live { color: #fff !important; text-shadow: 0 0 10px rgba(255, 255, 255, .35), 0 1px 0 #000 !important; }
/* the chrome catches the light */
.nav__links a.nav__brk::before, .nav__links a.nav__live::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 4px; height: 38%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); }
.nav__links a.nav__brk::after, .nav__links a.nav__live::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 38%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .28) 45%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .28) 55%, rgba(255, 255, 255, 0));
  transform: skewX(-22deg); animation: lbr-brk-sweep 3.2s ease-in-out infinite; }
.nav__links a.nav__live::after { animation-delay: 1.6s; }
.masthead .nav .nav__links .nav__item > a.nav__brk:hover, .masthead .nav .nav__links a.nav__live:hover, .nav__item--brk:hover > a.nav__brk { filter: brightness(1.25); text-decoration: none; }
.nav__links a.nav__brk[aria-current="page"], .nav__links a.nav__live[aria-current="page"] { outline: 0; filter: brightness(1.2); }
.nav__links a.nav__brk[aria-current="page"]::before, .nav__links a.nav__live[aria-current="page"]::before { top: auto; bottom: 4px; height: 45%; background: linear-gradient(0deg, rgba(255, 40, 55, .45), rgba(255, 40, 55, 0)); }
.nav__links a.nav__live .nav__dot { width: 9px; height: 9px; border-radius: 50%; background: #ff2b37; box-shadow: 0 0 8px #ff2b37; animation: lbr-onair 1.4s ease-in-out infinite; }
@keyframes lbr-onair { 50% { opacity: .25; box-shadow: none; } }
@keyframes lbr-brk-sweep { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@media (max-width: 700px) {
  .masthead .nav .nav__links .nav__item > a.nav__brk, .masthead .nav .nav__links a.nav__live, .nav__links a.nav__brk, .nav__links a.nav__live { margin: 0 4px !important; padding: 0 12px !important; font-size: 14px !important; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .nav__links a.nav__brk::after, .nav__links a.nav__live::after, .nav__links a.nav__live .nav__dot { animation: none; } }

/* ===================== Voice of the People: Discord-style community ===================== */
.vx-wrap { max-width: 1440px; margin: 18px auto 40px; padding: 0 20px; }
.vx { display: grid; grid-template-columns: 260px minmax(0, 1fr) 290px; gap: 0; min-height: 76vh; border-radius: 16px; overflow: clip; border: 1px solid #1c2a44; background: #fff; box-shadow: 0 24px 60px rgba(5, 10, 20, .18); }
.vx-side { background: linear-gradient(180deg, #0b1830, #070f1f); color: #c9d4e5; padding: 0 0 14px; font-family: var(--mono); overflow-y: auto; max-height: calc(100vh - 140px); position: sticky; top: 120px; align-self: start; }
.vx-side__head { display: flex; flex-direction: column; gap: 2px; padding: 16px 16px 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.vx-side__head a { color: #fff; text-decoration: none; }
.vx-side__head strong { font-family: var(--display); font-weight: 800; font-size: 21px; text-transform: uppercase; letter-spacing: .02em; }
.vx-side__head span { font-size: 12px; color: #4ade80; }
.vx-side__head span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin-right: 6px; box-shadow: 0 0 8px #22c55e; }
.vx-group { padding: 10px 8px 0; }
.vx-group > summary { list-style: none; cursor: pointer; padding: 4px 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8796ab; }
.vx-group > summary::-webkit-details-marker { display: none; }
.vx-group > summary::before { content: '▾'; display: inline-block; margin-right: 6px; transition: transform .15s; }
.vx-group:not([open]) > summary::before { transform: rotate(-90deg); }
.vx-group ul { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.vx-group a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; color: #b8c4d6; text-decoration: none; font-size: 14px; }
.vx-group a:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.vx-group a[aria-current="page"] { background: linear-gradient(90deg, rgba(208, 32, 46, .45), rgba(208, 32, 46, .12)); color: #fff; box-shadow: inset 3px 0 0 #ff4b55; }
.vx-ico { flex: none; width: 22px; text-align: center; font-size: 15px; }
.vx-ico--big { width: auto; font-size: 30px; }
.vx-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-lock { font-size: 11px; opacity: .8; }
.vx-n { flex: none; font-size: 11px; color: #8796ab; }
.vx-hot { flex: none; padding: 1px 6px; border-radius: 4px; background: linear-gradient(180deg, #ff4b55, #c0101c); color: #fff; font: 700 10px var(--mono); letter-spacing: .06em; box-shadow: 0 0 10px rgba(255, 60, 70, .6); animation: vx-hot 1.6s ease-in-out infinite; }
@keyframes vx-hot { 50% { box-shadow: 0 0 2px rgba(255, 60, 70, .2); } }
.vx-main { display: flex; flex-direction: column; min-width: 0; background: #f7f8fb; }
.vx-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 16px; padding: 16px 20px 0; background: #fff; border-bottom: 1px solid var(--rule); }
.vx-head__t { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; min-width: 0; }
.vx-head h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1; text-transform: uppercase; }
.vx-head p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.vx-head--hero { display: block; padding: 28px 24px 24px; color: #fff; border: 0; background: radial-gradient(120% 140% at 0% 0%, #1b3a78 0%, #0b1830 55%, #3a0a12 100%); }
.vx-head--hero h1 { font-size: 44px; margin-top: 4px; }
.vx-head--hero p { color: #cfd9e8; max-width: 640px; font-size: 17px; }
.vx-tabs { display: flex; gap: 2px; }
.vx-tabs a { padding: 10px 16px; font: 700 14px var(--mono); color: var(--muted); border-bottom: 3px solid transparent; text-decoration: none; }
.vx-tabs a:hover { color: var(--ink); text-decoration: none; }
.vx-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--red); }
.vx-dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; padding: 18px; }
.vx-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; border: 1px solid var(--rule); background: #fff; color: var(--ink); text-decoration: none; transition: transform .12s, box-shadow .12s, border-color .12s; }
.vx-card:hover { text-decoration: none; color: var(--ink); border-color: var(--red); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(13, 31, 77, .12); }
.vx-card__t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vx-card__t strong { font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase; }
.vx-card__t span { color: var(--muted); font-size: 14px; line-height: 1.3; }
.vx-card .vx-n { color: #1f9d55; }
.vx-main .chat { max-height: 62vh; }
.vx-main .lounge-teaser { padding: 16px; }
.vx-readonly { margin: 0; padding: 14px 20px; font-family: var(--mono); font-size: 13px; color: var(--muted); background: #fff; border-top: 1px solid var(--rule); }
.vx-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 18px; }
.vx-bar .seg { border-radius: 8px; overflow: hidden; background: #fff; }
.vx-threads { display: flex; flex-direction: column; gap: 8px; padding: 0 18px 18px; }
.vx-threads .empty { padding: 30px 0; text-align: center; }
.vx-thread { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'a t n' 'a t r'; gap: 2px 14px; align-items: start; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.vx-thread:hover { text-decoration: none; color: var(--ink); border-color: #9fb0c6; box-shadow: 0 6px 18px rgba(13, 31, 77, .08); }
.vx-thread.is-pinned { border-color: #e7c66b; background: #fffaf0; }
.vx-thread > .mav { grid-area: a; }
.vx-thread__t { grid-area: t; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vx-thread__t strong { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.15; }
.vx-thread__ex { color: var(--ink-2); font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vx-thread .meta { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.vx-thread__n { grid-area: n; display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 4px 8px; border-radius: 8px; background: var(--panel); }
.vx-thread__n b { font-family: var(--display); font-size: 22px; line-height: 1; }
.vx-thread__n span { font: 11px var(--mono); color: var(--muted); }
.vx-thread__r { grid-area: r; font: 12px var(--mono); color: var(--muted); white-space: nowrap; text-align: center; }
.vx-form { padding: 18px; background: #fff; margin: 16px; border-radius: 12px; border: 1px solid var(--rule); }
.vx-form .field { display: flex; flex-direction: column; gap: 6px; }
.vx-form label { font: 700 13px var(--mono); }
.vx-form input, .vx-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #a9acb0; border-radius: 10px; font: 16px/1.5 var(--serif); }
.vx-form .actions { display: flex; gap: 10px; }
.vx-op { margin: 16px 18px 6px; padding: 18px 20px; background: #fff; border-radius: 14px; border: 1px solid var(--rule); box-shadow: 0 6px 20px rgba(13, 31, 77, .06); }
.vx-op__head { display: flex; gap: 12px; align-items: flex-start; }
.vx-op h2 { margin: 0 0 4px; font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.08; }
.vx-op .meta, .vx-post .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.vx-who { font-weight: 700; color: var(--ink); }
.vx-body { margin-top: 10px; font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
.vx-body p { margin: 0 0 .8em; } .vx-body p:last-child { margin-bottom: 0; }
.vx-body--op { font-size: 18px; }
.vx-body.is-clamped { max-height: 13.5em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.vx-more { margin-top: 4px; padding: 4px 0; border: 0; background: none; color: var(--red-text); font: 700 13px var(--mono); cursor: pointer; }
.vx-more:hover { text-decoration: underline; }
.vx-post__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 10px; }
.vx-post__acts .reply { flex-basis: 100%; order: 9; }
.vx-post__acts .reply > summary { display: inline-flex; }
.vx-post__acts .reply[open] > summary { color: var(--red-text); }
.vx-posts { display: flex; flex-direction: column; padding: 6px 18px 20px; }
.vx-posts__h { margin: 10px 0; font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; }
.vx-posts__list { display: flex; flex-direction: column; gap: 10px; max-height: 120vh; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; }
.vx-post { display: flex; gap: 12px; padding: 14px 16px; background: #fff; border-radius: 12px; border: 1px solid var(--rule); }
.vx-post__main { flex: 1; min-width: 0; }
.vx-post--reply { padding: 10px 0 0; border: 0; border-top: 1px solid #edf0f4; border-radius: 0; margin-top: 10px; }
.vx-post--reply .vx-body { font-size: 16px; }
.vx-post--gone { color: var(--muted); font-style: italic; font-size: 14px; padding: 10px 16px; }
.vx-replies { margin-top: 8px; padding-left: 14px; border-left: 3px solid #e3e8f0; }
.vx-replies > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #eef2f8; font: 700 12.5px var(--mono); color: #0d2a5c; }
.vx-replies > summary::-webkit-details-marker { display: none; }
.vx-replies > summary::before { content: '▸'; transition: transform .15s; }
.vx-replies[open] > summary::before { transform: rotate(90deg); }
.vx-reply { margin-top: 14px; border-radius: 12px; flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
.vx-reply textarea { flex: 1 1 260px; border-radius: 10px; }
.vx-posts .join-band { margin-top: 14px; }
.vx-rail { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: #fff; border-left: 1px solid var(--rule); }
.vx-rail h2 { margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: 18px; text-transform: uppercase; }
.vx-hotthread { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.vx-hotthread:hover { background: var(--panel); text-decoration: none; color: var(--ink); }
.vx-hotthread strong { font-size: 15px; line-height: 1.3; }
.vx-hotthread span { font: 12px var(--mono); color: var(--muted); }
.vx-rules { padding: 12px 14px; border-radius: 12px; background: var(--panel); font-size: 14px; }
.vx-rules ul { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 3px; }
.vx-rules a { font: 700 13px var(--mono); color: var(--red-text); }
.vx-join { padding: 16px; border-radius: 12px; color: #fff; background: linear-gradient(140deg, #0d1f4d, #3a0a12); }
.vx-join strong { font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; }
.vx-join p { margin: 4px 0 12px; color: #cfd9e8; font-size: 15px; }
/* Like / Dislike / Agree */
.reacts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.react { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--rule); background: #fff; color: var(--ink-2); font: 600 13px var(--mono); cursor: pointer; transition: background .12s, border-color .12s, transform .08s; }
.react b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
button.react:hover { border-color: #9fb0c6; background: #f4f7fb; }
button.react:active { transform: scale(.95); }
.react.is-on { background: #0d2a5c; border-color: #0d2a5c; color: #fff; }
.react.is-on b { color: #fff; }
.react[value="dislike"].is-on { background: #6b7280; border-color: #6b7280; }
.react[value="agree"].is-on { background: #b22234; border-color: #b22234; }
.reacts--static .react { cursor: default; }
.react--join { border-style: dashed; color: var(--red-text); text-decoration: none; }
.react--join:hover { text-decoration: none; background: #fff6f7; }
.react.is-pop { animation: vx-pop .3s ease; }
@keyframes vx-pop { 40% { transform: scale(1.15); } }
@media (max-width: 1180px) { .vx { grid-template-columns: 240px minmax(0, 1fr); } .vx-rail { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } }
@media (max-width: 760px) {
  .vx-wrap { padding: 0; margin: 0 0 30px; }
  .vx { display: flex; flex-direction: column; border-radius: 0; border-left: 0; border-right: 0; }
  .vx-side { position: static; max-height: none; display: flex; flex-direction: column; padding: 0; }
  .vx-side__head { flex-direction: row; justify-content: space-between; align-items: center; padding: 12px 14px; }
  .vx-side__head strong { font-size: 18px; }
  .vx-group { padding: 6px 0 0; }
  .vx-group > summary { padding: 2px 14px; }
  .vx-group ul { flex-direction: row; overflow-x: auto; gap: 6px; padding: 4px 14px 8px; scrollbar-width: none; }
  .vx-group ul::-webkit-scrollbar { display: none; }
  .vx-group a { flex: none; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .07); }
  .vx-group a[aria-current="page"] { box-shadow: none; background: #d0202e; }
  .vx-name { overflow: visible; }
  .vx-head { padding: 12px 14px 0; }
  .vx-head h1 { font-size: 24px; }
  .vx-head--hero h1 { font-size: 34px; }
  .vx-tabs { width: 100%; }
  .vx-tabs a { flex: 1; text-align: center; }
  .vx-thread { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'a t' 'a n'; padding: 12px; }
  .vx-thread__n { flex-direction: row; gap: 6px; align-items: baseline; justify-self: start; min-width: 0; background: none; padding: 0; }
  .vx-thread__n b { font-size: 16px; }
  .vx-thread__r { display: none; }
  .vx-op { margin: 12px 10px 4px; padding: 14px; }
  .vx-op h2 { font-size: 24px; }
  .vx-posts { padding: 4px 10px 16px; }
  .vx-post { padding: 12px; gap: 10px; }
  .vx-post > .mav { width: 32px; height: 32px; }
  .vx-replies { padding-left: 8px; }
  .react span { display: none; }
  .vx-main .chat { max-height: 60vh; }
  .msg__acts { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .vx-hot, .react.is-pop { animation: none; } }

/* Article discussion: a scrollable panel, folded long comments, collapsible replies */
.comments__list { max-height: min(1100px, 125vh); overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 0 2px; scrollbar-width: thin; border-bottom: 1px solid var(--rule); }
.comments__list:focus-visible { outline: 3px solid #1d5fbf; outline-offset: 2px; }
.cmt__replies { margin-top: 6px; }
.cmt__replies .cmt--reply { margin-left: 0; padding: 12px 0 4px; border-bottom: 0; border-top: 1px solid #edf0f4; }
.cmt__replies .cmt__av { width: 32px; height: 32px; }
.cmt__body.is-clamped { max-height: 11em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent); mask-image: linear-gradient(180deg, #000 65%, transparent); }
.cmt__actions .reacts { margin-left: 10px; }
.cmt__actions .reply { order: 9; flex-basis: 100%; }
@media (max-width: 760px) { .comments__list { max-height: 80vh; } .cmt__actions .react span { display: none; } }

/* ===================== Down for maintenance / Technical difficulties ===================== */
body.down { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 28px 16px; color: #fff; font-family: var(--mono); background: #050a14; overflow-x: hidden; position: relative; }
.down--maint { background: radial-gradient(120% 90% at 50% 0%, #1b3a78 0%, #0a1424 45%, #050a14 75%), #050a14; }
.down__sky { position: fixed; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 42%, #cfe0ff, transparent), radial-gradient(1.5px 1.5px at 66% 12%, #fff, transparent), radial-gradient(1px 1px at 82% 34%, #cfe0ff, transparent), radial-gradient(1px 1px at 44% 8%, #fff, transparent), radial-gradient(1.5px 1.5px at 90% 70%, #fff, transparent), radial-gradient(1px 1px at 6% 76%, #cfe0ff, transparent);
  animation: down-twinkle 5s ease-in-out infinite alternate; }
@keyframes down-twinkle { to { opacity: .25; } }
.down--trouble { background: #07090f; }
.down__bars { position: fixed; inset: 0 0 auto 0; height: 38vh; display: grid; grid-template-columns: repeat(7, 1fr); opacity: .22; pointer-events: none; filter: saturate(1.2);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
.down__bars i:nth-child(1) { background: #c0c0c0; } .down__bars i:nth-child(2) { background: #c0c000; } .down__bars i:nth-child(3) { background: #00c0c0; } .down__bars i:nth-child(4) { background: #00c000; }
.down__bars i:nth-child(5) { background: #c000c0; } .down__bars i:nth-child(6) { background: #c00000; } .down__bars i:nth-child(7) { background: #0000c0; }
.down__static { position: fixed; inset: -50%; pointer-events: none; opacity: .07; animation: down-noise .35s steps(3) infinite;
  background-image: repeating-radial-gradient(circle at 17% 32%, #fff 0 1px, transparent 1px 3px), repeating-radial-gradient(circle at 73% 61%, #fff 0 1px, transparent 1px 4px); }
@keyframes down-noise { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }
.down__preview { position: fixed; top: 0; left: 0; right: 0; z-index: 3; padding: 8px 14px; text-align: center; background: #f1c35b; color: #111; font-size: 14px; font-weight: 600; }
.down__preview a { color: #111; text-decoration: underline; }
.down__card { position: relative; z-index: 2; width: min(640px, 100%); text-align: center; padding: 34px clamp(20px, 5vw, 44px) 26px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(20, 34, 72, .82), rgba(40, 6, 14, .82)); border: 1px solid rgba(255, 255, 255, .16); border-top: 4px solid #ff2a36;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(255, 31, 45, .18); backdrop-filter: blur(8px); }
.down__brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; color: #dfe6f1; }
.down__mark { width: 44px; height: 44px; object-fit: contain; color: #ff3340; filter: drop-shadow(0 0 14px rgba(255, 40, 52, .55)); }
.down__kicker { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 6px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 42, 54, .14); border: 1px solid rgba(255, 90, 100, .45);
  font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #ff8a92; }
.down__dot { width: 10px; height: 10px; border-radius: 50%; background: #ff2a36; box-shadow: 0 0 0 0 rgba(255, 42, 54, .7); animation: down-ping 1.6s ease-out infinite; }
.down--maint .down__dot { background: #f1c35b; animation-name: down-ping-gold; }
.down--maint .down__kicker { background: rgba(241, 195, 91, .12); border-color: rgba(241, 195, 91, .45); color: #f6d48a; }
@keyframes down-ping { 70% { box-shadow: 0 0 0 10px rgba(255, 42, 54, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 42, 54, 0); } }
@keyframes down-ping-gold { 0% { box-shadow: 0 0 0 0 rgba(241, 195, 91, .7); } 70% { box-shadow: 0 0 0 10px rgba(241, 195, 91, 0); } }
.down h1 { margin: 8px 0 10px; font-family: var(--display); font-weight: 800; font-size: clamp(40px, 9vw, 74px); line-height: .95; text-transform: uppercase;
  background: linear-gradient(180deg, #fff 0%, #fff 45%, #ffd1d4 70%, #ff3340 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgba(255, 31, 45, .45)); }
.down__msg { margin: 0 auto; max-width: 500px; font-size: 18px; line-height: 1.55; color: #dbe3ee; }
.down__progress, .down__meter { height: 8px; margin: 22px auto 8px; max-width: 360px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.down__progress span { display: block; height: 100%; width: 40%; border-radius: 999px; background: linear-gradient(90deg, #b22234, #fff, #2c5ec9); animation: down-slide 1.8s ease-in-out infinite; }
@keyframes down-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
.down__meter span { display: block; height: 100%; width: 100%; background: repeating-linear-gradient(90deg, #ff2a36 0 14px, transparent 14px 22px); animation: down-meter 1s linear infinite; }
@keyframes down-meter { to { background-position: 22px 0; } }
.down__back { margin: 6px 0 0; font-size: 15px; color: #c9d4e5; }
.down__back strong { color: #fff; }
.down__count { color: #f6d48a; font-variant-numeric: tabular-nums; }
.down__note { margin: 6px 0 0; font-size: 13px; color: #9fb0c6; }
.down__bless { margin: 20px 0 0; font-size: 14px; color: #9fb0c6; }
.down__staff { margin-top: 18px; text-align: left; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 12px; }
.down__staff summary { cursor: pointer; text-align: center; font-size: 13px; color: #8796ab; list-style: none; }
.down__staff summary::-webkit-details-marker { display: none; }
.down__staff form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.down__staff label { font-size: 13px; color: #c7d0dc; }
.down__staff input { min-height: 46px; padding: 0 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .07); color: #fff; font: 16px var(--mono); }
.down__staff button { min-height: 46px; margin-top: 4px; border: 0; border-radius: 8px; background: linear-gradient(180deg, #ff3340, #c00813); color: #fff; font: 700 16px var(--mono); cursor: pointer; }
.down__err { margin: 0; color: #ffb4b4; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .down__sky, .down__static, .down__dot, .down__progress span, .down__meter span { animation: none; } }

/* ===================== Advertise / ad orders ===================== */
.adv { background: #f4f6fa; padding-bottom: 50px; }
.adv-hero { color: #fff; padding: 54px 0 46px; background: radial-gradient(120% 140% at 0% 0%, #1b3a78 0%, #0b1830 55%, #3a0a12 100%); }
.adv-hero h1 { margin: 6px 0 10px; max-width: 820px; font-family: var(--display); font-weight: 800; font-size: clamp(34px, 5.6vw, 60px); line-height: 1; text-transform: uppercase; }
.adv-hero p { margin: 0 0 22px; max-width: 680px; font-size: 19px; color: #d4deed; }
.adv-hero__cta { min-height: 52px; padding: 0 26px; font-size: 18px; box-shadow: 0 0 22px rgba(255, 40, 52, .5); }
.adv-body { padding-top: 26px; }
.adv-h { margin: 30px 0 12px; font-family: var(--display); font-weight: 800; font-size: 28px; text-transform: uppercase; }
.adv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.adv-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 14px; background: #fff; border: 1px solid var(--rule); box-shadow: 0 8px 24px rgba(13, 31, 77, .06); }
.adv-card--top { border: 2px solid #d0202e; box-shadow: 0 10px 30px rgba(208, 32, 46, .15); }
.adv-card--top::after { content: 'Premium'; position: absolute; top: 14px; right: 14px; padding: 2px 9px; border-radius: 999px; background: #d0202e; color: #fff; font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.adv-card__ico { font-size: 30px; }
.adv-card h3 { margin: 4px 0 0; font-family: var(--display); font-weight: 800; font-size: 23px; text-transform: uppercase; }
.adv-card p { margin: 0; font-size: 15px; color: var(--ink-2); }
.adv-card__size { font: 600 13px var(--mono); color: var(--muted) !important; }
.adv-card__price { margin-top: auto !important; padding-top: 10px; font-family: var(--mono); }
.adv-card__price strong { font-family: var(--display); font-size: 26px; color: #0d2a5c; }
.adv-dayparts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px; }
.adv-dp { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 12px; background: #fff; border: 1px solid var(--rule); }
.adv-dp > span { font-size: 26px; }
.adv-dp strong { font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; }
.adv-dp small { font: 13px var(--mono); color: var(--muted); }
.adv-dp em { font: 700 12px var(--mono); font-style: normal; color: #b22234; }
.adv-dp--prime { background: linear-gradient(160deg, #0d1f4d, #3a0a12); color: #fff; border: 0; }
.adv-dp--prime small { color: #c9d4e5; } .adv-dp--prime em { color: #ff8a92; }
.adv-durs { display: flex; flex-wrap: wrap; gap: 8px; }
.adv-du { display: flex; flex-direction: column; align-items: center; min-width: 110px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--rule); }
.adv-du strong { font-family: var(--display); font-size: 19px; text-transform: uppercase; }
.adv-du em { font: 700 12px var(--mono); font-style: normal; color: #15803d; }
.adv-du em.adv-du--base { color: var(--muted); }
/* Build-your-campaign: three tiers in red, royal blue and chrome-black, all clickable, priced live */
.adv-build { display: block; }
.adv-tier { margin-top: 26px; padding: 22px 22px 24px; border-radius: 20px; position: relative; overflow: hidden; color: #fff; box-shadow: 0 18px 44px rgba(7, 12, 30, .22); }
.adv-tier::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); }
.adv-tier--spot { background: radial-gradient(90% 120% at 0% 0%, #b3121f 0%, #6e0a14 48%, #2a050b 100%); }
.adv-tier--slot { background: radial-gradient(90% 120% at 100% 0%, #2f63d6 0%, #14348f 45%, #071436 100%); }
.adv-tier--len { background: linear-gradient(180deg, #23262f 0%, #0b0d13 100%); box-shadow: 0 18px 44px rgba(7, 12, 30, .22), inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(255, 255, 255, .12); }
.adv-tier .adv-h { margin: 0 0 14px; color: #fff; display: flex; align-items: center; gap: 12px; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.adv-h__n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #0b1830; font-size: 20px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); }
.adv-tier--spot .adv-h__n { color: #a3000c; } .adv-tier--slot .adv-h__n { color: #14348f; }
/* every choice is a glass card on its tier */
.adv-tier .adv-card, .adv-tier .adv-dp, .adv-tier .adv-du { position: relative; cursor: pointer; color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05)); border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .18s, box-shadow .18s, background .18s, border-color .18s; }
.adv-tier .adv-card:hover, .adv-tier .adv-dp:hover, .adv-tier .adv-du:hover { transform: translateY(-3px); background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08)); }
.adv-tier .adv-card p, .adv-tier .adv-dp small, .adv-tier .adv-card__size { color: rgba(255, 255, 255, .82) !important; }
.adv-tier .adv-card__price strong, .adv-tier .adv-dp b, .adv-tier .adv-du b { color: #fff; }
.adv-tier .adv-card__price small { display: block; margin-top: 2px; font: 12px var(--mono); color: rgba(255, 255, 255, .7); }
.adv-tier .adv-card--top { border: 1px solid rgba(255, 215, 120, .6); }
.adv-tier .adv-card--top::after { background: linear-gradient(180deg, #ffe08a, #e2a91d); color: #3a2400; right: 46px; }
.adv-tier .adv-dp em { color: #ffd166; }
.adv-tier .adv-dp--prime { background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 31, 45, .28)); border-color: rgba(255, 140, 150, .6); }
.adv-tier .adv-dp--prime em { color: #ffb3b8; }
.adv-dp__ico { font-size: 26px; }
.adv-tier .adv-dp b { margin-top: 8px; font: 700 13px var(--mono); }
.adv-tier .adv-dp b span { font-family: var(--display); font-size: 22px; }
.adv-tier .adv-du { min-width: 118px; flex: 1 1 118px; padding: 28px 12px 14px; }
.adv-du .adv-tick { top: 7px; right: 7px; width: 20px; height: 20px; font-size: 12px; border-width: 1.5px; }
.adv-tier .adv-du em { color: #6ee7a0; } .adv-tier .adv-du em.adv-du--base { color: rgba(255, 255, 255, .6); }
.adv-tier .adv-du b { margin-top: 6px; font-family: var(--display); font-size: 21px; }
/* the check mark and the picked state */
.adv-tick { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); color: transparent; font: 800 15px var(--display); transition: all .18s; }
.adv-tier label:has(input:checked) { transform: translateY(-3px); background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .12)); border-color: #fff; box-shadow: 0 0 0 2px #fff, 0 12px 30px rgba(0, 0, 0, .35), 0 0 28px rgba(255, 255, 255, .25); }
.adv-tier--spot label:has(input:checked) { box-shadow: 0 0 0 2px #fff, 0 12px 30px rgba(0, 0, 0, .35), 0 0 30px rgba(255, 60, 70, .55); }
.adv-tier--slot label:has(input:checked) { box-shadow: 0 0 0 2px #fff, 0 12px 30px rgba(0, 0, 0, .35), 0 0 30px rgba(90, 150, 255, .6); }
.adv-tier--len label:has(input:checked) { box-shadow: 0 0 0 2px #e6ebf2, 0 12px 30px rgba(0, 0, 0, .45), 0 0 26px rgba(220, 230, 245, .35); }
.adv-tier label:has(input:checked) .adv-tick { background: #fff; border-color: #fff; color: #0b1830; }
.adv-tier--spot label:has(input:checked) .adv-tick { color: #a3000c; }
.adv-tier label:has(input:focus-visible) { outline: 3px solid #ffd166; outline-offset: 3px; }
/* the running total */
.adv-total { position: sticky; bottom: 12px; z-index: 5; margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 16px 20px; border-radius: 16px; color: #fff;
  background: linear-gradient(90deg, #6e0a14 0%, #0b1022 40%, #0b1022 60%, #14348f 100%); box-shadow: 0 16px 40px rgba(7, 12, 30, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.adv-total__what { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adv-total__what span { font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #ffd166; }
.adv-total__what strong { font-family: var(--display); font-size: 20px; text-transform: uppercase; }
.adv-total__price { display: flex; flex-direction: column; align-items: flex-end; }
.adv-total__price strong { font-family: var(--display); font-size: 38px; line-height: 1; }
.adv-total__price small { font: 13px var(--mono); color: #c9d4e5; }
.adv-total__go { min-height: 48px; padding: 0 22px; font-size: 17px; box-shadow: 0 0 20px rgba(255, 40, 52, .55); }
.adv-total__price strong.is-pop { animation: adv-pop .35s ease; }
@keyframes adv-pop { 40% { transform: scale(1.08); } }
@media (max-width: 700px) { .adv-tier { padding: 18px 14px 20px; border-radius: 16px; } .adv-tier .adv-h { font-size: 24px; } .adv-total { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); flex-wrap: nowrap; gap: 12px; padding: 10px 12px; border-radius: 14px; } .adv-total__what { display: none; } .adv-total__price { flex: 1; align-items: flex-start; } .adv-total__price strong { font-size: 28px; } .adv-total__price small { font-size: 12px; } .adv-total__go { min-height: 44px; padding: 0 16px; font-size: 15px; white-space: nowrap; } }
.adv-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; margin-top: 34px; padding: 26px; border-radius: 16px; background: #fff; border: 1px solid var(--rule); box-shadow: 0 14px 40px rgba(13, 31, 77, .08); scroll-margin-top: 140px; }
.adv-start h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 800; font-size: 32px; text-transform: uppercase; }
.adv-form { display: flex; flex-direction: column; gap: 12px; }
.adv-form label { display: flex; flex-direction: column; gap: 5px; font: 600 14px var(--mono); }
.adv-form input:not([type=radio]):not([type=checkbox]):not([type=file]), .adv-form textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #a9acb0; border-radius: 10px; font: 16px var(--mono); background: #fff; }
.adv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.adv-row--start { align-items: end; }
.adv-hp { position: absolute !important; left: -9999px; }
.adv-fine { margin: 0; font: 13px var(--mono); color: var(--muted); }
.adv-ohead { padding: 26px 0 8px; }
.adv-ohead h1 { margin: 2px 0 14px; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 5vw, 46px); text-transform: uppercase; line-height: 1; }
.adv-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: s; overflow-x: auto; }
.adv-steps li { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 120px; padding: 10px 12px; border-radius: 10px; background: #e8ecf3; font: 600 13px var(--mono); color: var(--muted); }
.adv-steps li span { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #cfd6e2; color: #fff; font-weight: 800; }
.adv-steps li.is-done { background: #e6f4ea; color: #14532d; } .adv-steps li.is-done span { background: #15803d; }
.adv-steps li.is-now { background: #fff; color: var(--ink); box-shadow: 0 0 0 2px #d0202e inset; } .adv-steps li.is-now span { background: #d0202e; }
.adv-ogrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; margin-top: 16px; }
.adv-ogrid > div:only-child { grid-column: 1 / -1; }
.adv-panel { padding: 24px; border-radius: 16px; background: #fff; border: 1px solid var(--rule); box-shadow: 0 10px 30px rgba(13, 31, 77, .06); }
.adv-panel h2 { margin: 6px 0 12px; font-family: var(--display); font-weight: 800; font-size: 26px; text-transform: uppercase; }
.adv-panel--ok { border-color: #9fd3b4; background: #f3fbf6; }
.adv-pick { display: grid; gap: 10px; }
.adv-pick--4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.adv-pick--5 { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.adv-pick--7 { grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); }
.adv-opt { position: relative; cursor: pointer; }
.adv-opt input { position: absolute; opacity: 0; pointer-events: none; }
.adv-opt__box { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 14px; border-radius: 12px; border: 2px solid var(--rule); background: #fff; font-family: var(--mono); transition: border-color .12s, box-shadow .12s, transform .12s; }
.adv-opt__box strong { font-family: var(--display); font-weight: 800; font-size: 18px; line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.adv-opt__box small { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.adv-opt__box em { font-style: normal; font-size: 12px; font-weight: 700; color: #15803d; }
.adv-opt__box b { margin-top: auto; padding-top: 6px; font-family: var(--display); font-size: 22px; color: #0d2a5c; }
.adv-opt__box b small { font-family: var(--mono); font-size: 12px; }
.adv-opt__ico { font-size: 24px; }
.adv-opt__where { line-height: 1.35; }
.adv-opt--du .adv-opt__box { align-items: center; text-align: center; }
.adv-opt:hover .adv-opt__box { border-color: #9fb0c6; }
.adv-opt input:checked + .adv-opt__box { border-color: #d0202e; box-shadow: 0 0 0 3px rgba(208, 32, 46, .15), 0 8px 20px rgba(208, 32, 46, .12); transform: translateY(-1px); }
.adv-opt input:focus-visible + .adv-opt__box { outline: 3px solid #1d5fbf; outline-offset: 2px; }
.adv-quote { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 16px 18px; border-radius: 12px; color: #fff; background: linear-gradient(110deg, #0d1f4d, #3a0a12); }
.adv-quote span { font: 700 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #c9d4e5; }
.adv-quote strong { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; }
.adv-quote strong.is-pop { animation: vx-pop .3s ease; }
.adv-quote small { font: 14px var(--mono); color: #f6d48a; }
.adv-next { min-height: 52px; font-size: 18px; }
.adv-sum { position: sticky; top: 130px; padding: 20px; border-radius: 16px; color: #fff; background: linear-gradient(160deg, #0d1f4d, #0a1424 60%, #3a0a12); box-shadow: 0 14px 40px rgba(5, 10, 20, .25); }
.adv-sum h2 { margin: 0 0 10px; font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; }
.adv-sum dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.adv-sum dt { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8fa3c0; }
.adv-sum dd { margin: 0; font-family: var(--mono); font-size: 15px; font-weight: 600; }
.adv-sum dd small { display: block; font-weight: 400; color: #c9d4e5; font-size: 13px; }
.adv-sum__total { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .15); }
.adv-sum__total dd { font-family: var(--display); font-size: 34px; }
.adv-contract { max-height: 460px; overflow-y: auto; padding: 18px 20px; border: 1px solid var(--rule); border-radius: 12px; background: #fbfcfe; font-family: var(--serif); font-size: 15.5px; line-height: 1.6; }
.adv-contract h2 { font-size: 20px !important; }
.adv-contract p { margin: 0 0 .8em; }
.adv-sign { margin-top: 16px; }
.adv-check { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-weight: 500 !important; line-height: 1.45; }
.adv-check input { width: 20px; height: 20px; margin-top: 1px; flex: none; }
.adv-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.adv-paybtn { min-height: 56px; padding: 0 28px; font-size: 19px; box-shadow: 0 0 22px rgba(255, 40, 52, .4); }
.adv-pay { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 10px; }
.adv-invoice { padding: 16px 18px; border-radius: 12px; background: #f3f6fb; border-left: 4px solid #0d2a5c; }
.adv-invoice h3 { margin: 0 0 6px; font-family: var(--display); font-size: 21px; text-transform: uppercase; }
.adv-file { padding: 18px; border: 2px dashed #9fb0c6; border-radius: 12px; background: #f7f9fc; }
.adv-art { margin: 14px 0; padding: 12px; border-radius: 12px; background: repeating-conic-gradient(#f1f2f4 0% 25%, #fff 0% 50%) 50% / 16px 16px; border: 1px solid var(--rule); text-align: center; }
.adv-art img { max-height: 320px; }
.adv-live { text-align: center; }
.adv-live__badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; background: #e6f4ea; color: #14532d; }
.adv-live__badge--live { background: #d0202e; color: #fff; box-shadow: 0 0 14px rgba(208, 32, 46, .5); }
.adv-timer { display: inline-grid; grid-template-columns: repeat(4, auto auto); align-items: baseline; gap: 4px 6px; margin: 10px auto 2px; padding: 14px 20px; border-radius: 14px; color: #fff; background: #0a1424; }
.adv-timer span { font-family: var(--display); font-weight: 800; font-size: 40px; font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: right; }
.adv-timer b { font: 600 12px var(--mono); color: #9fb0c6; margin-right: 10px; }
.adv-print { background: #fff; padding: 30px 16px; }
.adv-contract--print { max-width: 760px; max-height: none; margin: 0 auto; border: 0; }
.adv-sigline { margin-top: 24px !important; padding-top: 14px; border-top: 1px solid #000; font-family: var(--mono); font-size: 14px; }
@media print { .adv-print { padding: 0; } }
@media (max-width: 900px) { .adv-ogrid, .adv-start { grid-template-columns: 1fr; } .adv-sum { position: static; order: -1; } }
@media (max-width: 600px) { .adv-row { grid-template-columns: 1fr; } .adv-panel { padding: 16px; } .adv-quote strong { font-size: 34px; } .adv-timer span { font-size: 30px; } .adv-timer { grid-template-columns: repeat(2, auto auto); } }

/* ===================== Polls ===================== */
.poll { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 16px; color: #fff; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, #3a0a12 0%, #0d1f4d 55%, #0a1424 100%); box-shadow: 0 16px 40px rgba(5, 10, 20, .22); }
.poll::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #b22234 0 33%, #fff 33% 66%, #2c5ec9 66%); }
.poll__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.poll__kicker { color: #ff8a92; }
.poll__closes { color: #9fb0c6; letter-spacing: .02em; text-transform: none; font-weight: 500; }
.poll__q { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.08; text-transform: uppercase; }
.poll__d { margin: -4px 0 0; color: #c9d4e5; font-size: 15px; }
.poll__form { display: grid; gap: 8px; }
.poll__opt { min-height: 48px; padding: 10px 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; font: 600 16px var(--mono); text-align: left; cursor: pointer; transition: background .12s, border-color .12s, transform .08s; }
.poll__opt:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .55); }
.poll__opt:active, .poll__opt.is-picked { transform: scale(.98); background: #d0202e; border-color: #ff6b73; }
.poll__opt:disabled { cursor: default; }
.poll__opts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.poll__opts li { padding: 12px 16px; border-radius: 10px; border: 1px dashed rgba(255, 255, 255, .3); color: #dbe3ee; font: 500 15px var(--mono); }
.poll__join { align-self: flex-start; margin-top: 4px; }
.poll__results { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.poll__results li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .07); font: 600 15px var(--mono); }
.poll__bar { position: absolute; inset: 0 auto 0 0; width: var(--w); background: rgba(255, 255, 255, .16); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.poll__results li.is-lead .poll__bar { background: linear-gradient(90deg, #b22234, #e0101f); }
.poll__label, .poll__results b { position: relative; }
.poll__label em { font-style: normal; font-size: 11px; padding: 1px 6px; margin-left: 6px; border-radius: 999px; background: #fff; color: #0d1f4d; vertical-align: 1px; }
.poll__results b { font-family: var(--display); font-size: 20px; }
.poll__foot { margin: 2px 0 0; font: 13px var(--mono); color: #9fb0c6; }
.poll__foot a { color: #dbe3ee; text-decoration: underline; }
.front-poll { max-width: 860px; margin: 26px auto; }
.poll--article { margin: 24px 0; }
.poll--rail { padding: 16px; border-radius: 12px; }
.poll--rail .poll__q { font-size: 20px; }
.poll--rail .poll__opt { min-height: 42px; font-size: 14px; }
.poll--big .poll__q { font-size: clamp(28px, 4vw, 42px); }
.poll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 16px; align-items: start; }
.vx-rail .poll::before { display: none; }
@media (prefers-reduced-motion: reduce) { .poll__bar { transition: none; } }

/* ===================== Coming soon: the cinematic scene ===================== */
body.gate--scene { background: #02040c; overflow-x: hidden; }
body.gate--scene::before, body.gate--scene::after { display: none !important; }
.gs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* The sky: deep blue pouring down the right side and into red along the horizon and the water */
.gs-sky { position: absolute; inset: -6%; animation: gs-in 2.6s cubic-bezier(.16, 1, .3, 1) both, gs-drift 26s ease-in-out 2.6s infinite alternate;
  background:
    radial-gradient(70% 85% at 100% 0%, rgba(54, 110, 255, .95) 0%, rgba(34, 78, 230, .7) 28%, rgba(20, 44, 160, .25) 55%, rgba(10, 20, 80, 0) 75%),
    radial-gradient(60% 110% at 104% 60%, rgba(40, 90, 255, .55) 0%, rgba(30, 60, 200, 0) 65%),
    radial-gradient(90% 55% at 70% 100%, rgba(230, 22, 48, .85) 0%, rgba(170, 12, 40, .45) 40%, rgba(90, 0, 30, 0) 75%),
    radial-gradient(80% 60% at 0% 100%, rgba(200, 16, 40, .7) 0%, rgba(120, 8, 32, 0) 70%),
    linear-gradient(195deg, #0c2a9c 0%, #0a1a66 22%, #0a0f3a 42%, #1a0828 62%, #4a0618 82%, #7a0a1c 100%); }
@keyframes gs-drift { to { transform: translate3d(-1.5%, 1%, 0) scale(1.03); filter: hue-rotate(-6deg); } }
/* Stars: only in the upper sky, fading out toward the horizon */
.gs-stars { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 70%); mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 70%); animation: gs-fade 2.4s ease-out .6s both; }
.gs-star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: var(--o); box-shadow: 0 0 4px rgba(255, 255, 255, .8); animation: gs-twinkle var(--d) ease-in-out var(--w) infinite; }
.gs-star--big { width: 3px; height: 3px; box-shadow: 0 0 6px #fff, 0 0 14px rgba(150, 190, 255, .9); }
.gs-star--big::before, .gs-star--big::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; transform: translate(-50%, -50%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); }
.gs-star--big::after { transform: translate(-50%, -50%) rotate(90deg); }
@keyframes gs-twinkle { 0%, 100% { opacity: var(--o); transform: scale(1); } 50% { opacity: .15; transform: scale(.6); } }
.gs-shoot { position: absolute; top: 12%; left: 70%; width: 180px; height: 2px; border-radius: 2px; opacity: 0; transform: rotate(-24deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95)); filter: drop-shadow(0 0 6px #fff); animation: gs-shoot 11s ease-in 4s infinite; }
.gs-shoot--2 { top: 24%; left: 30%; width: 130px; animation-duration: 17s; animation-delay: 9s; }
@keyframes gs-shoot { 0% { opacity: 0; translate: 0 0; } 1% { opacity: 1; } 6% { opacity: 0; translate: -340px 150px; } 100% { opacity: 0; translate: -340px 150px; } }
/* The skyline photo, enlarged a little and anchored left so the Capitol sits on the right of the sign-in box.
   Its black sky turns into the colored sky behind it (screen blend). */
.gs-frame { position: absolute; left: 0; bottom: 0; width: max(118vw, 179.8vh); aspect-ratio: 1250 / 820; mix-blend-mode: screen; animation: gs-in 2.6s cubic-bezier(.16, 1, .3, 1) both; }
.gs-frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: contrast(1.15) brightness(1.02); }
/* The Washington Monument: a soft glow, a shimmer climbing the shaft, red beacons and searchlights */
.gs-mon { position: absolute; left: calc(var(--mx) - 3%); width: 6%; top: calc(var(--mtop) - 3%); bottom: calc(100% - var(--mbot)); mix-blend-mode: screen;
  background: radial-gradient(50% 55% at 50% 55%, rgba(255, 244, 222, .55), rgba(255, 200, 160, .18) 55%, rgba(255, 160, 120, 0) 75%); animation: gs-glow 4.5s ease-in-out 2.2s infinite; }
@keyframes gs-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.gs-shimmer { position: absolute; left: calc(var(--mx) - .8%); width: 1.6%; top: var(--mtop); bottom: calc(100% - var(--mbot)); mix-blend-mode: screen; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
.gs-shimmer::before { content: ''; position: absolute; left: 0; right: 0; height: 22%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .85), transparent); animation: gs-climb 6s ease-in-out 2.6s infinite; }
@keyframes gs-climb { 0% { top: 100%; opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 85%, 100% { top: -25%; opacity: 0; } }
.gs-beacon { position: absolute; left: var(--mx); top: calc(var(--mtop) + 2.2%); width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #ff2a2a;
  box-shadow: 0 0 6px 2px rgba(255, 40, 40, .95), 0 0 22px 8px rgba(255, 30, 30, .45); animation: gs-beacon 2s steps(1) infinite; }
@keyframes gs-beacon { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .12; } }
.gs-beam { position: absolute; left: var(--mx); bottom: calc(100% - var(--mbot) + 1%); width: 6vmax; height: 95vh; margin-left: -3vmax; transform-origin: 50% 100%; opacity: 0;
  background: linear-gradient(0deg, rgba(210, 225, 255, .22), rgba(170, 195, 255, .06) 65%, transparent); clip-path: polygon(47% 100%, 53% 100%, 100% 0, 0 0); animation: gs-beam-in 1.5s ease-out 2.4s forwards, gs-sweep 14s ease-in-out 2.4s infinite alternate; }
.gs-beam--r { animation-name: gs-beam-in, gs-sweep-r; animation-duration: 1.5s, 17s; }
@keyframes gs-beam-in { to { opacity: 1; } }
@keyframes gs-sweep { from { transform: rotate(-24deg); } to { transform: rotate(10deg); } }
@keyframes gs-sweep-r { from { transform: rotate(22deg); } to { transform: rotate(-8deg); } }
.gs-dome { position: absolute; left: calc(var(--cx) - 6%); width: 12%; top: calc(var(--ctop) - 4%); bottom: calc(100% - var(--cbot)); mix-blend-mode: screen;
  background: radial-gradient(50% 55% at 50% 55%, rgba(255, 240, 220, .45), rgba(120, 160, 255, .18) 55%, rgba(0, 0, 0, 0) 75%); animation: gs-glow 6s ease-in-out 3s infinite; }
/* Haze along the water, and a cinematic vignette */
.gs-haze { position: absolute; left: 0; right: 0; bottom: 0; height: 32vh; background: linear-gradient(0deg, rgba(120, 6, 24, .55), rgba(60, 4, 30, .2) 55%, transparent); mix-blend-mode: screen; }
.gs-vignette { position: absolute; inset: 0; background: radial-gradient(120% 95% at 50% 42%, transparent 52%, rgba(0, 0, 0, .55) 85%, rgba(0, 0, 0, .85) 100%), linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 18%, transparent 80%, rgba(0, 0, 0, .55)); }
/* The warp: star streaks rush past as the page opens, then the scene settles */
.gs-warp { position: absolute; left: 50%; top: 42%; width: 0; height: 0; }
.gs-warp i { position: absolute; left: 0; top: 0; width: var(--l); height: 2px; transform-origin: 0 50%; transform: rotate(var(--a)) translateX(2vmax) scaleX(.05); opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(190, 215, 255, .95)); border-radius: 2px; animation: gs-streak 1.25s cubic-bezier(.55, 0, .9, .4) var(--t) forwards; }
.gs-warp i:nth-child(3n) { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 120, 130, .9)); }
@keyframes gs-streak { 0% { opacity: 0; transform: rotate(var(--a)) translateX(1vmax) scaleX(.05); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(70vmax) scaleX(1); } }
@keyframes gs-in { 0% { transform: scale(1.45); filter: blur(10px) brightness(2.2); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1); filter: blur(0) brightness(1); opacity: 1; } }
@keyframes gs-fade { from { opacity: 0; } to { opacity: 1; } }
body.gate--scene .gate__in { animation: gs-rise 1.1s cubic-bezier(.16, 1, .3, 1) 1.2s both; }
@keyframes gs-rise { from { opacity: 0; transform: translateY(26px) scale(.97); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
/* No more spotlight behind the emblem: just a clean glow */
body.gate--scene .gate__mark::before { background: radial-gradient(closest-side, rgba(120, 160, 255, .28), rgba(120, 160, 255, 0)); inset: -6%; }
body.gate--scene .gate__form { background: linear-gradient(160deg, rgba(10, 20, 60, .72), rgba(40, 4, 16, .72)); backdrop-filter: blur(10px) saturate(1.2); }
/* Phones: center on the Capitol */
@media (max-aspect-ratio: 1/1) { .gs-frame { width: 175vh; left: 50%; transform: translateX(-62%); animation: none; } .gs-beam { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .gs-sky, .gs-frame, .gs-stars, body.gate--scene .gate__in { animation: none !important; }
  .gs-warp, .gs-shoot, .gs-shimmer { display: none; }
  .gs-star, .gs-mon, .gs-dome, .gs-beacon, .gs-beam { animation: none !important; } .gs-beam { opacity: .6; transform: rotate(-8deg); }
}
/* A faint Milky Way across the sky */
.gs-stars::before { content: ''; position: absolute; left: -20%; right: -20%; top: 6%; height: 34%; transform: rotate(-14deg); opacity: .55; filter: blur(14px);
  background: radial-gradient(60% 40% at 30% 50%, rgba(200, 215, 255, .22), transparent 70%), radial-gradient(45% 35% at 62% 45%, rgba(255, 190, 220, .14), transparent 70%), radial-gradient(70% 30% at 50% 55%, rgba(170, 200, 255, .12), transparent 75%);
  animation: gs-glow 9s ease-in-out infinite; }
.gs-stars::after { content: ''; position: absolute; left: -20%; right: -20%; top: 10%; height: 26%; transform: rotate(-14deg); opacity: .5;
  background-image: radial-gradient(1px 1px at 12% 40%, #fff, transparent), radial-gradient(1px 1px at 22% 62%, #dfe8ff, transparent), radial-gradient(1px 1px at 31% 35%, #fff, transparent), radial-gradient(1px 1px at 38% 58%, #fff, transparent), radial-gradient(1px 1px at 47% 44%, #ffe4ef, transparent), radial-gradient(1px 1px at 55% 66%, #fff, transparent), radial-gradient(1px 1px at 63% 38%, #dfe8ff, transparent), radial-gradient(1px 1px at 71% 55%, #fff, transparent), radial-gradient(1px 1px at 79% 42%, #fff, transparent), radial-gradient(1px 1px at 88% 60%, #dfe8ff, transparent);
  background-size: 240px 120px; }

/* Topic pills: one drifting row on desktop */
.topics-marquee { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.topics-marquee::-webkit-scrollbar { display: none; }
.topics-marquee__track { display: flex; flex-wrap: nowrap; gap: 8px; width: max-content; padding: 2px 2px; }
.topics-marquee .topic-chip { flex: none; white-space: nowrap; user-select: none; -webkit-user-drag: none; }
.topics-marquee.is-looping { cursor: grab; }
.topics-marquee.is-dragging { cursor: grabbing; }
.topics-marquee.is-dragging .topic-chip { pointer-events: none; }
.topics-bar__in { flex-wrap: nowrap !important; }
.topic-chip--all, .topics-bar .topics-all { flex: none; }

/* ===================== The anchor's show line, the dateline, Live coverage ===================== */
.showline { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 600 15px var(--mono); color: #b5121f; letter-spacing: .01em; }
.showline img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #b5121f; }
.showline em { font-style: normal; font-family: var(--display); font-weight: 800; font-size: 1.12em; text-transform: uppercase; letter-spacing: .03em; color: #0d1f4d; }
.showline strong { color: var(--ink); }
.showline--card { margin: 4px 0 2px; font-size: 13px; line-height: 1.35; display: block; }
.showline--card em { font-size: 1.05em; }
.dateline { margin: 0 0 12px; font: 13px var(--mono); color: var(--muted); }
.dateline__place { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.dateline__place:hover { color: #b5121f; text-decoration: underline; }
.page--live { color: inherit; background: none; box-shadow: none; clip-path: none; }
.page--live .sechead, .page--live h1, .page--live h2, .page--live h3 { color: inherit; }
.livehead--coverage { position: relative; margin: 20px 0 18px; padding: 26px 24px; border-radius: 16px; color: #fff; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, #1b3a78 0%, #0b1830 50%, #3a0a12 100%); }
.livehead--coverage h1 { margin: 10px 0 4px; font-family: var(--display); font-weight: 800; font-size: clamp(34px, 5vw, 54px); text-transform: uppercase; line-height: 1; color: #fff; }
.livehead--coverage p { margin: 0; color: #cfd9e8; font-size: 17px; }
.lv-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 4px; font: 800 14px var(--display); letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, #23262b, #000 50%, #1d2024); box-shadow: inset 0 3px 0 #c9ced5, inset 0 -3px 0 #c9ced5; }
.lv-badge .nav__dot { width: 9px; height: 9px; border-radius: 50%; background: #ff2b37; box-shadow: 0 0 8px #ff2b37; animation: lbr-onair 1.4s ease-in-out infinite; }
.lv-status { margin-top: 10px !important; font: 13px var(--mono) !important; color: #9fb0c6 !important; }
.lv-list { list-style: none; margin: 0 0 40px; padding: 0 0 0 4px; position: relative; }
.lv-list::before { content: ''; position: absolute; left: 76px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, #d0202e, #e3e7ee 30%); }
.lv { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; padding: 14px 0; }
.lv::before { content: ''; position: absolute; left: 69px; top: 21px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #9fb0c6; }
.lv--ours::before, .lv--hot::before { background: #d0202e; box-shadow: 0 0 0 3px rgba(208, 32, 46, .25), 0 0 10px rgba(208, 32, 46, .6); }
.lv time { padding-top: 14px; font: 700 13px var(--mono); color: var(--muted); text-align: right; padding-right: 14px; }
.lv__body { padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--rule); }
.lv--ours .lv__body { border-color: rgba(208, 32, 46, .35); box-shadow: 0 6px 18px rgba(208, 32, 46, .08); }
.lv__tag { font: 800 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6b7486; }
.lv--ours .lv__tag, .lv--hot .lv__tag { color: #d0202e; }
.lv h3 { margin: 4px 0; font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; }
.lv h3 a { color: var(--ink); }
.lv__body > p:not(.showline):not(.dateline):not(.lv__meta) { margin: 2px 0 6px; color: var(--ink-2); font-size: 16px; }
.lv__meta { margin: 0; font: 13px var(--mono); color: var(--muted); }
.showline--live { margin: 6px 0 2px; font-size: 13px; }
.showline--live img { width: 28px; height: 28px; }
.lv .dateline { margin: 4px 0 0; }
.lv--new .lv__body { animation: lv-new 2.4s ease-out; }
@keyframes lv-new { 0% { background: #fff1c2; transform: translateY(-6px); } 100% { background: #fff; transform: none; } }
.lv--empty { padding: 30px 0 30px 92px; color: var(--muted); font-family: var(--mono); }
@media (max-width: 600px) { .lv { grid-template-columns: 54px minmax(0, 1fr); gap: 12px; } .lv-list::before { left: 58px; } .lv::before { left: 51px; } .lv time { font-size: 12px; padding-right: 8px; } .lv h3 { font-size: 18px; } }
/* A black gradient behind the logo and sign-in: it comes down to the waterline and stops, so the water shows */
.gs-col { position: absolute; left: 50%; top: 0; bottom: 0; width: min(980px, 92vw); transform: translateX(-50%);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 17%, rgba(0, 0, 0, .3) 26%, rgba(0, 0, 0, .6) 44%, rgba(0, 0, 0, .8) 72%, rgba(0, 0, 0, .9) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
  animation: gs-fade 2.2s ease-out .4s both; }
@media (max-aspect-ratio: 1/1) { .gs-col { width: 100vw; -webkit-mask-image: none; mask-image: none; } }
/* Coming soon: the logo and title in the site's own white (no blue tint) */
body.gate--scene .gate__mark::before { background: radial-gradient(closest-side, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0)); inset: -4%; animation: none; }
body.gate--scene .gate__mark .logo__icon { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .9)) drop-shadow(0 0 14px rgba(255, 255, 255, .35)) drop-shadow(0 12px 22px rgba(0, 0, 0, .7)) !important; }
body.gate--scene h1 { background: linear-gradient(180deg, #ffffff 0%, #ffffff 58%, #dfe4ec 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 18px rgba(255, 255, 255, .25)) drop-shadow(0 6px 24px rgba(0, 0, 0, .85)); }
body.gate--scene .gate__lede { color: #fff; text-shadow: 0 0 14px rgba(255, 255, 255, .45), 0 2px 10px rgba(0, 0, 0, .8); }
body.gate--scene .gate__lede::before, body.gate--scene .gate__lede::after { background: linear-gradient(90deg, #ffffff, #c9d2de); box-shadow: 0 0 10px rgba(255, 255, 255, .6); }

/* ===================== Local news (/local): hero, search, results and the state tile map ===================== */
.local-hero { color: #fff; padding: 34px 0 30px; background: radial-gradient(90% 140% at 0% 0%, #1b3a78 0%, #0b1830 55%, #3a0a12 100%); }
.local-hero__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 40px; align-items: end; }
.local-hero h1 { margin: 6px 0 8px; font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4.6vw, 52px); line-height: 1; text-transform: uppercase; }
.local-hero p { margin: 0; max-width: 620px; color: #cdd6e3; font-size: 17px; }
.local-search { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.local-search input, .local-search select { min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .95); color: #0b1830; font: 600 16px var(--mono); }
.local-search input { flex: 0 1 150px; width: 150px; letter-spacing: .08em; }
.local-search select { flex: 1 1 180px; min-width: 0; }
.local-search .btn { min-height: 48px; padding: 0 22px; font-size: 17px; }
.local-mine { flex-basis: 100%; color: #ffd166; font: 600 14px var(--mono); }
.local-hero .flash-inline { grid-column: 1 / -1; }
.local-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 32px; align-items: start; }
.local-count { margin: 0 0 14px; font: 700 14px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.local-tier + .local-tier { margin-top: 28px; }
.local-heads { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.local-heads li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.local-heads a { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--ink); }
.local-heads .meta { display: block; margin-top: 4px; }
.local-side { position: sticky; top: 90px; padding: 18px; border-radius: 16px; background: linear-gradient(170deg, #0b1830, #050a16); color: #fff; box-shadow: 0 18px 44px rgba(7, 12, 30, .22); }
.local-side .sechead { color: #fff; font-size: 22px; margin-bottom: 14px; }
.local-side .hint { margin: 12px 0 0; color: #a9b6c8; font-size: 13px; }
/* 11 columns x 8 rows, like a U.S. map */
.tilemap { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); gap: 4px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; min-width: 0; border-radius: 6px; text-decoration: none; color: #fff; line-height: 1;
  background: linear-gradient(160deg, rgba(255, 70, 80, calc(var(--heat, 0) * 1)), rgba(160, 0, 16, calc(var(--heat, 0) * 1))), #1c2a48; border: 1px solid rgba(255, 255, 255, .12); transition: transform .15s, box-shadow .15s; }
.tile b { font: 800 clamp(9px, 1vw, 13px) var(--display); letter-spacing: .02em; }
.tile small { margin-top: 2px; font: 600 clamp(8px, .8vw, 10px) var(--mono); color: rgba(255, 255, 255, .85); }
.tile--zero { background: #16213a; color: #6f7f99; }
.tile:hover { transform: scale(1.12); z-index: 2; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 0 2px #fff; }
.tile.is-on { box-shadow: 0 0 0 2px #ffd166, 0 0 16px rgba(255, 209, 102, .6); z-index: 1; }
@media (max-width: 960px) { .local-hero__in, .local-grid { grid-template-columns: 1fr; } .local-side { position: static; } }
@media (max-width: 520px) { .local-search input { flex: 1 1 100%; width: 100%; } .local-search select { flex: 1 1 100%; } .local-search .btn { flex: 1 1 100%; } .tilemap { gap: 3px; } .tile { border-radius: 4px; } .tile small { display: none; } }

/* ===================== Search page: a real search button, room to breathe, and something to read before you search ===================== */
.search--big { border-radius: 10px; box-shadow: 0 6px 20px rgba(13, 31, 77, .08); }
.search--big input { border-radius: 10px 0 0 10px; border: 1px solid var(--rule-2); border-right: 0; background: #fff; min-width: 0; }
.search--big button, .search--big .btn { width: auto; flex: none; gap: 8px; padding: 0 20px; background: var(--red); border: 1px solid var(--red); border-radius: 0 10px 10px 0; color: #fff; font: 700 17px var(--display); letter-spacing: .02em; }
.search--big button:hover { background: #a3000c; border-color: #a3000c; color: #fff; }
.search--big button svg { width: 18px; height: 18px; }
.search-filters { margin-top: 4px; }
.page--search { padding-bottom: 48px; }
.search-start { margin-top: 26px; }
.search-start h2 { margin: 0 0 12px; font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: .04em; }
.search-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.search-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #eef2f8; border: 1px solid var(--rule); color: var(--ink); font: 600 15px var(--display); text-decoration: none; }
.search-chips a:hover { background: var(--red); border-color: var(--red); color: #fff; }
@media (max-width: 600px) { .search--big button span { display: none; } .search--big button { padding: 0 16px; } .search-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .search-filters select { width: 100%; min-width: 0; } }

/* ===================== Phones: newsletter, footer links, bottom tab bar ===================== */
@media (max-width: 700px) {
  .newsletter__in { padding-top: 30px; padding-bottom: 40px; gap: 16px; }
  .newsletter__form { flex-direction: column; align-items: stretch; gap: 10px; }
  .newsletter__form .field, .newsletter__form > * { flex: none; width: 100%; }
  .newsletter__form input, .newsletter__form .btn, .newsletter__form button { width: 100%; min-height: 50px; box-sizing: border-box; }
  .footer--net .footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; justify-items: center; }
  .footer--net .footer__links a, .footer--net .footer__links a:first-child { padding: 8px 4px; border-left: 0; min-height: 40px; display: inline-flex; align-items: center; }
  .tabbar__a { justify-content: flex-end; padding-top: 4px; }
  .tabbar__a svg { width: 22px; height: 22px; flex: none; display: block; }
  .tabbar__a span { display: block; line-height: 1.1; }
  .tabbar__a[aria-current="page"]::before { top: -7px; }
  .footer { padding-bottom: 12px; }
}

/* ===================== The Archive: a plain library of links ===================== */
.lib-hero { color: #fff; padding: 30px 0 26px; background: linear-gradient(160deg, #0b1830 0%, #050a16 70%, #2a050b 100%); }
.lib-hero h1 { margin: 6px 0 6px; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4.4vw, 48px); line-height: 1; text-transform: uppercase; }
.lib-hero p { margin: 0 0 16px; color: #c9d4e5; max-width: 760px; }
.lib-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lib-filter input, .lib-filter select { min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .25); background: #fff; color: #0b1830; font: 600 15px var(--mono); min-width: 0; }
.lib-filter input { flex: 1 1 220px; }
.lib-filter select { flex: 0 1 200px; }
.lib-filter .btn { min-height: 44px; }
.lib-clear { color: #ffd166; font: 600 14px var(--mono); }
.lib__cols, .lib__row a { display: grid; grid-template-columns: 72px 112px minmax(0, 1fr) 190px 220px; gap: 14px; align-items: center; }
.lib__cols { padding: 0 8px 8px; border-bottom: 2px solid var(--ink); font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lib__list { list-style: none; margin: 0; padding: 0; }
.lib__day { padding: 18px 8px 6px; font: 800 13px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--red); border-bottom: 1px solid var(--rule); }
.lib__row a { padding: 8px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.lib__row a:hover { background: #f3f6fb; text-decoration: none; }
.lib__row a:hover .lib__title { color: var(--red); }
.lib__th { width: 72px; height: 48px; object-fit: cover; border-radius: 4px; background: #e8edf5; }
.lib__date { font: 600 13px var(--mono); color: var(--muted); white-space: nowrap; }
.lib__title { font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.2; }
.lib__anchor, .lib__place { display: flex; flex-direction: column; gap: 1px; min-width: 0; font: 600 13px var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib__anchor small, .lib__place small { font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.lib .pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
@media (max-width: 900px) {
  .lib__cols { display: none; }
  .lib__row a { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "th title" "th meta"; gap: 4px 12px; align-items: start; }
  .lib__th { grid-area: th; }
  .lib__title { grid-area: title; font-size: 16px; }
  .lib__date { display: none; }
  .lib__anchor, .lib__place { grid-column: 2; flex-direction: row; flex-wrap: wrap; gap: 0 6px; font-size: 12px; white-space: normal; }
  .lib__anchor small, .lib__place small { display: none; }
  .lib-filter select { flex: 1 1 45%; }
}

/* Section pages: "Have your say" poll deck */
.sec-polls { margin: 8px 0 4px; }
.sec-polls__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sec-polls__head .sechead { margin: 0; }
.sec-polls .poll { max-width: none; }
.sec-polls__card[hidden] { display: none; }

/* ===================== Every section in its own color ===================== */
.tag-pill--cat { background: var(--cat, var(--hot-2)); color: var(--cat-ink, #fff); box-shadow: 0 0 18px color-mix(in srgb, var(--cat, #ff1f2d) 55%, transparent); }
.card3__tag[style] { background: var(--cat); color: var(--cat-ink, #fff); }
.row__kicker[style], .kicker[style], .article__kicker[style] { color: color-mix(in srgb, var(--cat) 82%, #000); }
.page--dark .row__kicker[style], .trend .row__kicker[style] { color: var(--cat); }
.ocard[style] { box-shadow: inset 0 3px 0 var(--cat); }
.ocard[style] a::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--cat); z-index: 3; }
.card3[style] .card3__img { box-shadow: inset 0 -3px 0 var(--cat); }
.trend__item[style] a { border-left: 4px solid var(--cat); }
.trend__item[style] .trend__n { background: var(--cat); color: var(--cat-ink, #fff); }

/* Anchor rows: a looping carousel with big side arrows */
.reel-wrap { position: relative; }
.reel-side { position: absolute; top: 38%; z-index: 4; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(4, 7, 13, .72); color: #fff; font: 700 30px/1 var(--display); cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); transition: transform .15s, background .15s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.reel-side:hover { background: var(--sec, var(--hot)); transform: scale(1.08); }
.reel-side--prev { left: -18px; } .reel-side--next { right: -18px; }
.reel-side[hidden] { display: none; }
@media (max-width: 700px) { .reel-side { width: 38px; height: 38px; font-size: 24px; } .reel-side--prev { left: -6px; } .reel-side--next { right: -6px; } }
/* Colors on the lists and section rows too */
li[style] > .row { border-left: 4px solid var(--cat); }
.brief[style] { border-left: 4px solid var(--cat); padding-left: 12px; }
.brief[style] .kicker { color: color-mix(in srgb, var(--cat) 82%, #000); }
.hl--ours[style] { border-left: 4px solid var(--cat); }
.hl-row__head[style] .sechead--cat::before { background: var(--cat); box-shadow: 0 0 14px color-mix(in srgb, var(--cat) 60%, transparent); }
.hl-row__head[style] .more { color: color-mix(in srgb, var(--cat) 85%, #000); }
.hl-row__head[style] { border-bottom: 3px solid var(--cat); padding-bottom: 6px; }
/* Every story box carries its section's color down both sides, and its tag wears the same color. */
.trend__item[style] a { border-left: 5px solid var(--cat); border-right: 5px solid var(--cat); }
li[style] > .row { border-left: 5px solid var(--cat); border-right: 5px solid var(--cat); }
.hl--ours[style] { border-left: 5px solid var(--cat); border-right: 5px solid var(--cat); padding-right: 12px; }
.brief[style] { border-left: 5px solid var(--cat); border-right: 5px solid var(--cat); padding-right: 12px; }
.card3[style] { border-left: 5px solid var(--cat); border-right: 5px solid var(--cat); border-radius: 4px; padding-bottom: 10px; }
.card3[style] > :not(.card3__img) { padding-inline: 10px; }
.card3[style] .card3__img { border-radius: 0; }
.ocard[style] a::after { top: 0; bottom: 0; left: 0; right: 0; height: auto; background: none; border: 0 solid var(--cat); border-width: 4px 5px 0; pointer-events: none; }
.trend__item[style] .trend__n, .card3__tag[style], .tag-pill--cat[style] { background: var(--cat); color: var(--cat-ink, #fff); }
/* Story tracker: a breaking story's live timeline */
.tracker { margin: 22px 0; border: 1px solid color-mix(in srgb, var(--hot, #e11d2e) 40%, var(--rule, #ddd)); border-left: 5px solid var(--hot, #e11d2e); border-radius: 6px; background: color-mix(in srgb, var(--hot, #e11d2e) 4%, #fff); padding: 16px 18px; }
.tracker__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; }
.tracker__head h2 { margin: 0; font-family: var(--display); font-size: 24px; text-transform: uppercase; letter-spacing: .03em; }
.tracker__live { display: inline-flex; align-items: center; gap: 7px; background: var(--hot, #e11d2e); color: #fff; font: 800 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px; border-radius: 2px; }
.tracker__live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: lbr-beacon 1.6s ease-in-out infinite; }
.tracker__live.is-done { background: #475569; } .tracker__live.is-done::before { animation: none; opacity: .6; }
.tracker__meta { color: var(--muted, #555); font-size: 14px; }
.tracker__list { list-style: none; margin: 0; padding: 0; }
.tracker__i { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--rule, #e5e5e5); position: relative; }
.tracker__i time { font: 700 14px/1.3 var(--display); color: var(--hot, #e11d2e); }
.tracker__i p { margin: 4px 0 0; }
.tracker__by { display: block; font-weight: 700; font-size: 14px; color: var(--ink, #111); }
.tracker__story { font: 700 19px/1.2 var(--display); }
.tracker__src { font-size: 13px; color: var(--muted, #555); }
.tracker__empty { margin: 0; color: var(--muted, #555); }
.tracker-up { margin: 14px 0; padding: 10px 14px; border-left: 4px solid var(--hot, #e11d2e); background: #f8fafc; font-size: 15px; }
@media (max-width: 640px) { .tracker__i { grid-template-columns: 1fr; gap: 4px; } }
.tstrip { margin: 18px 0; background: #0b1220; color: #fff; border-radius: 8px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .08); }
.tstrip__h { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 800 22px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.tstrip__dot { width: 12px; height: 12px; border-radius: 50%; background: #ff1f2d; box-shadow: 0 0 14px #ff1f2d; animation: lbr-beacon 1.6s ease-in-out infinite; }
.tstrip__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.tstrip__list li a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 12px 14px; border-radius: 4px; background: rgba(255, 255, 255, .06); border-left: 5px solid var(--cat, #ff1f2d); border-right: 5px solid var(--cat, #ff1f2d); color: #fff; }
.tstrip__list strong { font: 700 18px/1.2 var(--display); }
.tstrip__list span { font-size: 13px; color: rgba(255, 255, 255, .7); }
/* Coming Up calendar */
.cal-kind { display: inline-block; background: var(--k, #be123c); color: #fff; font: 800 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px; border-radius: 2px; }
.cal-tent { margin-left: 6px; font-size: 12px; color: #b45309; font-weight: 700; }
.cal-big { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 10px 0 22px; }
.cal-big__i { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 8px; background: #0b1220; color: #fff; border-left: 5px solid var(--k); border-right: 5px solid var(--k); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.cal-big__i strong { font: 700 20px/1.15 var(--display); } .cal-big__i span { font-size: 13px; color: rgba(255, 255, 255, .75); } .cal-big__i b { color: var(--k); filter: brightness(1.5); font: 800 15px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.cal-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.cal-tabs a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule, #ddd); font-size: 14px; color: var(--ink, #111); }
.cal-tabs a[aria-current] { background: var(--ink, #111); color: #fff; border-color: var(--ink, #111); }
.cal-month { margin-bottom: 26px; }
.cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cal-item { display: grid; grid-template-columns: 74px 1fr; gap: 16px; padding: 14px 16px; background: #fff; border: 1px solid var(--rule, #e5e5e5); border-left: 5px solid var(--k); border-right: 5px solid var(--k); border-radius: 6px; }
.cal-item--big { box-shadow: 0 0 0 2px color-mix(in srgb, var(--k) 35%, transparent); }
.cal-date { display: flex; flex-direction: column; align-items: center; justify-content: center; background: color-mix(in srgb, var(--k) 12%, #fff); border-radius: 6px; padding: 6px 0; }
.cal-mon { font: 800 13px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--k); } .cal-d { font: 800 32px/1 var(--display); color: var(--ink, #111); }
.cal-body h3 { margin: 6px 0 4px; font: 700 21px/1.2 var(--display); } .cal-body p { margin: 4px 0; } .cal-when { font-size: 14px; color: var(--muted, #555); } .cal-when b { color: var(--k); }
.cal-link { font-weight: 700; }
.cal-strip { margin: 22px 0; }
.cal-strip__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cal-strip__list a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 12px 14px; border-radius: 6px; background: #fff; border: 1px solid var(--rule, #e5e5e5); border-left: 5px solid var(--k); border-right: 5px solid var(--k); color: var(--ink, #111); }
.cal-strip__list strong { font: 700 17px/1.2 var(--display); } .cal-strip__d { font: 800 13px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #555); } .cal-strip__c { font-size: 13px; font-weight: 700; color: var(--k); }
.cal-strip .cal-kind { align-self: flex-start; }
@media (max-width: 560px) { .cal-item { grid-template-columns: 58px 1fr; gap: 10px; } .cal-d { font-size: 26px; } }
/* Footer: a night skyline of Washington that rises out of the page and settles into the footer (desktop and phone) */
.footer--sky { --sky-h: clamp(320px, 36vw, 620px); position: relative; isolation: isolate; overflow: hidden; background: var(--night-2, #0a0f1c); border-top: 0; padding-top: calc(var(--sky-h) * .62); }
.footer--sky::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--sky-h); z-index: -1; background: var(--footer-img) center 42% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 12%, #000 30%, #000 68%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 12%, #000 30%, #000 68%, transparent 100%); }
.footer--sky::after { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--sky-h) * .5); bottom: 0; z-index: -2; background: linear-gradient(180deg, rgba(8, 20, 41, 0), #0a1a36 26%, #081429); }
.footer--sky .footer__mark, .footer--sky .footer__links a { text-shadow: 0 2px 14px rgba(0, 0, 0, .85); }
.footer--sky .footer__mark img { filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .7)); }
@media (max-width: 700px) { .footer--sky { --sky-h: 74vw; padding-top: calc(var(--sky-h) * .72); } .footer--sky::before { background-position: 66% 60%; } }
/* Live Updates feed: longer, scrolls inside its box; on the front page near the top */
.liveline ol { max-height: 620px; scrollbar-width: thin; scrollbar-color: rgba(255, 31, 45, .6) transparent; }
.liveline li { padding-right: 6px; }
.liveline__cat { margin-left: 6px; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cat, #ff8a92); filter: brightness(1.35); }
.liveline__brk { margin-left: 6px; background: var(--hot, #e11d2e); color: #fff; font: 800 10.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; padding: 3px 6px; border-radius: 2px; }
.liveline--home { margin: 22px 0; }
.liveline--home .liveline__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.liveline--home .trend__head { margin: 0; } .liveline--home .trend__head a { color: #fff; display: inline-flex; align-items: center; gap: 10px; }
.liveline__more { color: #ff8a92; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.liveline--home ol { max-height: 560px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
@media (max-width: 860px) { .liveline--home ol { display: flex; max-height: 66vh; } .liveline ol { max-height: 70vh; } }
.liveline--home ol { border-left: 0; padding-left: 4px; }
.liveline--home li { border-left: 2px solid rgba(255, 31, 45, .45); padding-left: 16px; }
.liveline--home li::before { left: -6px; }

/* ===================== Trending bar: seamless leftward loop, like the market ticker ===================== */
.ticker--loop .ticker__in { overflow: hidden; gap: 0; }
.ticker--loop .ticker__label { position: relative; z-index: 1; margin-right: 6px; }
.ticker__view { position: relative; flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 28px), transparent); }
.ticker__track { display: flex; align-items: center; width: max-content; animation: lbr-tk var(--tr-speed, 60s) linear infinite; will-change: transform; }
.ticker__track:hover, .ticker__track.is-held, .ticker__track:focus-within { animation-play-state: paused; }
.ticker--loop .ticker__track a { flex: none; white-space: nowrap; padding: 0 22px; position: relative; }
.ticker--loop .ticker__track a::after { content: ''; position: absolute; right: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation-duration: 240s; } }

/* Masthead tagline in white (red rules either side stay) */
.masthead .tagline, .masthead--home .tagline { color: #fff; }

/* ===================== Weather ticker above Trending News (left-to-right, with a ZIP box) ===================== */
.wxt { display: flex; align-items: center; gap: 8px; height: 30px; margin: 0 0 12px; padding: 0 0 0 8px; border-radius: 4px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); font-family: var(--mono); font-size: 12px; color: #dfe6f0; overflow: hidden; }
.wxt__loc { flex: none; display: inline-flex; align-items: center; gap: 4px; max-width: 45%; padding: 0 8px 0 0; border: 0; border-right: 1px solid rgba(255, 255, 255, .14); background: none; color: #fff; font: inherit; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.wxt__loc:hover { color: var(--red-light, #ff6a72); }
.wxt__loc[hidden], .wxt__form[hidden] { display: none; }
.wxt__form { flex: none; display: flex; align-items: center; gap: 5px; padding-right: 8px; border-right: 1px solid rgba(255, 255, 255, .14); }
.wxt__form label { color: #b9c6d8; white-space: nowrap; }
.wxt__form input { width: 58px; height: 22px; padding: 0 6px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 3px; background: rgba(0, 0, 0, .35); color: #fff; font: inherit; }
.wxt__form input:focus { outline: 2px solid var(--hot, #ff1f2d); outline-offset: 0; }
.wxt__form button { height: 22px; padding: 0 9px; border: 0; border-radius: 3px; background: var(--hot-2, #d0202e); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.wxt__view { position: relative; flex: 1; min-width: 0; height: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
.wxt__track { display: flex; align-items: center; height: 100%; width: max-content; animation: lbr-tk-r var(--wx-speed, 60s) linear infinite; }
.wxt__track:hover, .wxt__track.is-held { animation-play-state: paused; }
@keyframes lbr-tk-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.wxt__i { flex: none; white-space: nowrap; padding: 0 12px; border-right: 1px solid rgba(255, 255, 255, .1); }
.wxt__i b { color: #fff; font-size: 13px; }
.wxt__i--now b { color: #ffd166; }
.wxt__i--alert { color: #ffb4b8; font-weight: 700; }
.wxt__i--upd { color: #8a9ab0; }
.wxt__err { color: #ffb4b8; }
@media (max-width: 700px) { .wxt__form label { display: none; } .wxt { font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) { .wxt__track { animation-duration: 240s; } }

/* Category labels are links to their sections */
[data-cat] { cursor: pointer; position: relative; z-index: 2; }
[data-cat]:hover { text-decoration: underline; text-underline-offset: 2px; filter: brightness(1.15); }
a.liveline__cat, a.liveline__brk { text-decoration: none; }
a.liveline__cat:hover, a.liveline__brk:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Tickers driven by script (grab, drag and flick): no CSS animation, no text selection while dragging */
.ticker__track.is-js, .wxt__track.is-js { animation: none !important; will-change: transform; }
.ticker__view, .wxt__view { cursor: grab; -webkit-user-select: none; user-select: none; }
.ticker__view:active, .wxt__view:active { cursor: grabbing; }
.ticker__view a, .wxt__view a { -webkit-user-drag: none; }

/* Join pop-up: email-only, or a full free account */
.join-modal .join-modal__lede { margin: 0 0 14px; }
.join-modal__or { display: flex; align-items: center; gap: 10px; margin: 16px auto 12px; max-width: 360px; color: #9fb0c6; font: 700 12px var(--display); letter-spacing: .14em; text-transform: uppercase; }
.join-modal__or::before, .join-modal__or::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .2); }
.join-modal__full { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 14px; padding: 11px 22px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 6px; color: #fff !important; font: 800 17px var(--display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none !important; transition: background .2s, border-color .2s; }
.join-modal__full:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }

/* About › Leadership */
.leaders { margin: 34px 0 10px; padding-top: 20px; border-top: 3px solid var(--ink, #0b1020); }
.leaders h2 { margin: 0 0 14px; font-family: var(--display); font-size: 30px; text-transform: uppercase; letter-spacing: .04em; }
.leaders__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 14px; }
.leaders__card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 18px; border-radius: 10px; background: linear-gradient(160deg, #0d1f4d, #050914); color: #fff; box-shadow: inset 0 -3px 0 var(--red, #b22234); }
.leaders__mark { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 8px; border-radius: 50%; background: #fff; color: #0d1f4d; font: 800 20px var(--display); letter-spacing: .04em; }
.leaders__card strong { font-family: var(--display); font-size: 22px; letter-spacing: .02em; }
.leaders__card span:last-child { font-family: var(--mono); font-size: 14px; color: #c9d4e4; }
.leaders p { font-size: 16px; line-height: 1.6; }

/* Homepage banner: Read today's Newspaper (black ink on newsprint, no other color) */
.np-promo { margin: 28px auto; }
.np-promo__a { position: relative; display: grid; grid-template-columns: minmax(200px, 300px) 1fr; align-items: center; gap: 28px; padding: 22px 28px; border: 1px solid #17140f; background: #efe7d2; color: #17140f !important; text-decoration: none !important; box-shadow: 0 12px 34px rgba(30, 22, 10, .28); overflow: hidden; }
.np-promo__a::before { content: ''; position: absolute; inset: 6px; border: 3px double #17140f; pointer-events: none; }
.np-promo__a:hover .np-promo__paper { transform: rotate(-4deg) translateY(-4px) scale(1.02); }
.np-promo__paper { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 18px; background: #f6efdc; border: 1px solid rgba(23, 20, 15, .35); box-shadow: 8px 10px 0 rgba(23, 20, 15, .12), 0 6px 18px rgba(30, 22, 10, .3); transform: rotate(-3deg); transition: transform .35s ease; }
.np-promo__name { font-family: 'UnifrakturMaguntia', 'Old English Text MT', 'Bodoni 72', 'Times New Roman', serif; font-size: 25px; line-height: 1; text-align: center; padding-bottom: 5px; border-bottom: 3px double #17140f; }
.np-promo__date { font: 700 8.5px Georgia, serif; letter-spacing: .14em; text-transform: uppercase; text-align: center; padding-bottom: 4px; border-bottom: 1px solid #17140f; }
.np-promo__hed { font: 900 16px/1.05 'Bodoni 72', Didot, 'Times New Roman', serif; text-transform: uppercase; text-align: center; }
.np-promo__lines { height: 54px; background: repeating-linear-gradient(180deg, rgba(23, 20, 15, .55) 0 2px, transparent 2px 7px); -webkit-mask-image: linear-gradient(90deg, #000 0 31%, transparent 31% 34.5%, #000 34.5% 65.5%, transparent 65.5% 69%, #000 69%); mask-image: linear-gradient(90deg, #000 0 31%, transparent 31% 34.5%, #000 34.5% 65.5%, transparent 65.5% 69%, #000 69%); opacity: .55; }
.np-promo__text { position: relative; display: flex; flex-direction: column; gap: 6px; font-family: Georgia, 'Times New Roman', serif; }
.np-promo__kicker { font: 700 12px Georgia, serif; letter-spacing: .34em; text-transform: uppercase; }
.np-promo__text strong { font: 900 clamp(30px, 4.2vw, 52px)/.95 'Bodoni 72', Didot, 'Times New Roman', serif; text-transform: uppercase; letter-spacing: -.01em; }
.np-promo__text > span:not(.np-promo__kicker):not(.np-promo__go) { font-size: 16.5px; line-height: 1.45; font-style: italic; max-width: 560px; }
.np-promo__go { align-self: flex-start; margin-top: 6px; padding: 9px 18px; background: #17140f; color: #efe7d2; font: 700 13px Georgia, serif; letter-spacing: .2em; text-transform: uppercase; }
@media (max-width: 700px) {
  .np-promo__a { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .np-promo__paper { max-width: 280px; margin: 0 auto; }
}

/* The weather ticker as its own slim, quiet strip above the top stories */
.wxt-band { margin: 0 0 12px; }
.wxt-band .wxt { margin: 0; height: 28px; border-radius: 3px; background: #0b1222; border: 1px solid #16223b; font-size: 11.5px; color: #c3cedd; }
.wxt-band .wxt__i b { font-size: 12px; color: #e8edf4; }
.wxt-band .wxt__i--now b { color: #ffd166; }
.wxt-band .wxt__form label { color: #93a3b8; }
.wxt-band .wxt__form input { height: 20px; width: 56px; }
.wxt-band .wxt__form button { height: 20px; padding: 0 8px; }

/* "Were you there?" */
.eyebtn { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 12px; padding: 7px 14px; border-radius: 999px; background: #0d1f4d; color: #fff !important; font: 700 14px var(--display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none !important; box-shadow: inset 0 -2px 0 var(--red, #b22234); }
.eyebtn:hover { background: #142c6b; }
.eye { margin: 30px 0; padding: 22px 24px; border-radius: 12px; background: linear-gradient(170deg, #0d1f4d, #060b18); color: #e9eef6; box-shadow: inset 0 3px 0 var(--red, #b22234); }
.eye__head h2 { margin: 0 0 4px; font-family: var(--display); font-size: 30px; text-transform: uppercase; letter-spacing: .03em; color: #fff; }
.eye__head p { margin: 0 0 14px; color: #c3cedd; }
.eye__gate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.eye__gate p { margin: 0; }
.eye__btns { display: flex; gap: 8px; }
.eye__btns .btn--ghost { border: 1px solid rgba(255, 255, 255, .5); color: #fff; background: transparent; }
.eye__form textarea { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .3); color: #fff; font: inherit; }
.eye__choice { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 10px; padding: 0; border: 0; }
.eye__choice label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.eye__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.eye__row .meta { color: #9fb0c6; font-size: 13px; }
.eye__done { margin: 0; padding: 12px 14px; border-radius: 8px; background: rgba(47, 208, 122, .12); border: 1px solid rgba(47, 208, 122, .35); }
.eye__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.eye__item { padding: 12px 14px; border-radius: 8px; background: rgba(255, 255, 255, .05); border-left: 3px solid var(--red, #b22234); }
.eye__who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.eye__who time { margin-left: auto; color: #8a9ab0; font-size: 12.5px; }
.eye__tag { padding: 2px 8px; border-radius: 999px; background: var(--red, #b22234); color: #fff; font: 700 11px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.eye__tag--share { background: #2a4a8f; }
.eye__item p { margin: 0; line-height: 1.55; }

/* Front page: Important Dates to Remember (a simple list in a scrolling window) */
.dates { margin: 26px 0; padding: 16px 18px; border-radius: 10px; background: #fff; border: 1px solid #dfe3ea; box-shadow: 0 6px 20px rgba(10, 20, 40, .06); }
.dates__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.dates__head h2 { margin: 0; font-family: var(--display); font-size: 22px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink, #0b1020); }
.dates__head a { font: 600 14px var(--mono); color: var(--red, #b22234); }
.dates__list { list-style: none; margin: 0; padding: 0 6px 0 0; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.dates__list li a { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 8px 2px; border-bottom: 1px solid #edf0f4; color: var(--ink, #0b1020) !important; text-decoration: none !important; }
.dates__list li a:hover span { text-decoration: underline; }
.dates__list time { font: 700 13px var(--mono); color: #4a5568; white-space: nowrap; }
.dates__list span { font-weight: 600; line-height: 1.3; }
.dates__list em { font: normal 12.5px var(--mono); color: #6b7a90; white-space: nowrap; }
@media (max-width: 600px) { .dates__list li a { grid-template-columns: 88px minmax(0, 1fr); } .dates__list em { grid-column: 2; } }

/* The "Advertisement" label over every ad opens the advertising page too */
a.ad__label { display: block; text-decoration: none !important; color: inherit; }
a.ad__label:hover { text-decoration: underline !important; }
.ad--house .ad__house { cursor: pointer; }

/* Weather strip directly under the header and the Trending bar */
.wxt-band--top { margin: 0; padding: 4px 0; background: #070b14; border-bottom: 1px solid #141e33; }
.wxt-band--top .wxt { height: 26px; background: transparent; border: 0; border-radius: 0; padding-left: 0; }
.wxt-band--top .wxt__form, .wxt-band--top .wxt__loc { border-right-color: rgba(255, 255, 255, .12); }

/* Homepage pop-up: try the vintage Newspaper (black ink on newsprint) */
.np-pop { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 16px; background: rgba(10, 8, 4, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.np-pop[hidden] { display: none; }
.np-pop__paper { position: relative; width: min(520px, 100%); padding: 30px 30px 22px; background: #efe7d2; color: #17140f; text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); transform: rotate(-1.2deg); animation: lbr-np-in .45s cubic-bezier(.2, .9, .3, 1.2); font-family: Georgia, 'Times New Roman', serif; }
.np-pop__paper::before { content: ''; position: absolute; inset: 8px; border: 3px double #17140f; pointer-events: none; }
@keyframes lbr-np-in { from { transform: rotate(-12deg) scale(.6); opacity: 0; } to { transform: rotate(-1.2deg) scale(1); opacity: 1; } }
.np-pop__x { position: absolute; right: 14px; top: 10px; z-index: 1; width: 36px; height: 36px; border: 0; background: none; color: #17140f; font-size: 28px; cursor: pointer; }
.np-pop__kicker { display: block; font: 700 12px Georgia, serif; letter-spacing: .36em; text-transform: uppercase; margin-bottom: 6px; }
.np-pop h2 { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid #17140f; font: 900 clamp(30px, 6vw, 42px)/1 'Bodoni 72', Didot, 'Times New Roman', serif; text-transform: uppercase; letter-spacing: -.01em; color: #17140f; }
.np-pop__deck { margin: 0 0 18px; font-size: 17px; line-height: 1.45; font-style: italic; color: #3b352d; }
.np-pop__btns { position: relative; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.np-pop__go { display: inline-block; padding: 12px 24px; background: #17140f; color: #efe7d2 !important; font: 700 14px Georgia, serif; letter-spacing: .2em; text-transform: uppercase; text-decoration: none !important; }
.np-pop__go:hover { background: #3b352d; }
.np-pop__stay { border: 0; background: none; color: #3b352d; font: italic 15px Georgia, serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.np-pop__fine { margin: 14px 0 0; font-size: 12px; color: #6a6155; }

/* ---------- More menu: solid panel, grouped, scrolls inside itself (iPad and phones too) ---------- */
.nav__mega { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 18px; width: min(900px, calc(100vw - 24px)); max-height: min(72vh, 660px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 16px 18px 18px; background: #100c13; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid #2b2530; border-top: 3px solid #d0202e; border-radius: 0 0 12px 12px; box-shadow: 0 28px 70px rgba(0, 0, 0, .7); text-align: left; }
.mega__h { margin: 0 0 6px; padding: 0 10px 6px; border-bottom: 1px solid #2b2530; font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #ff8a92; }
.mega__side .mega__h:not(:first-child) { margin-top: 14px; }
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.mega__side { display: flex; flex-direction: column; min-width: 0; padding-left: 18px; border-left: 1px solid #2b2530; }
.masthead .nav .nav__mega a, .nav__mega a { display: block; padding: 6px 10px; font-size: 15px; line-height: 1.25; letter-spacing: .01em; text-transform: none; white-space: normal; overflow-wrap: anywhere; border-radius: 6px; }
@media (max-width: 1199px) {
  .nav__more { position: static; }
  .nav__mega, .masthead .nav .nav__mega { position: absolute; left: 12px; right: 12px; top: 100%; width: auto; }
}
@media (max-width: 760px) {
  .nav__mega { grid-template-columns: 1fr; max-height: 70vh; padding: 12px; }
  .mega__side { padding-left: 0; border-left: 0; margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
  .mega__side .mega__h { grid-column: 1 / -1; margin-top: 12px; }
  .mega__side .mega__h:first-child { margin-top: 0; }
  .nav__mega, .masthead .nav .nav__mega { left: 6px; right: 6px; }
}

/* Newspaper edition: a slim banner that turns up now and then around the site */
.np-mini { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 18px auto; padding: 7px 14px; border-radius: 4px; background: #efe7d2; color: #17140f; text-decoration: none; font-family: Georgia, 'Times New Roman', serif; font-size: 14px; line-height: 1.3; box-shadow: inset 0 0 0 1px rgba(23, 20, 15, .3), 0 4px 14px rgba(0, 0, 0, .08); }
.np-mini:hover { background: #f6efdc; color: #17140f; text-decoration: none; }
.np-mini__k { flex: none; padding: 2px 7px; background: #17140f; color: #efe7d2; font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.np-mini__t { flex: 1; min-width: 0; }
.np-mini__go { flex: none; font-size: 20px; line-height: 1; }
@media (max-width: 560px) { .np-mini { font-size: 13px; margin: 14px 0; } }

/* ---------- Markets: News tab, the crypto market, and "Across the Markets" ---------- */
.mkt-tab--news { color: #ffd166; }
.mkt-tab span { margin-left: 6px; font-size: 11px; color: #9fb0c6; }
.mkt-strip__row--news { grid-auto-columns: minmax(280px, 1fr); }
.mkt-news { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px 14px; border-right: 1px solid rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.mkt-news:hover { background: rgba(255, 255, 255, .05); color: #fff; text-decoration: none; }
.mkt-news__img img { display: block; width: 96px; height: 54px; object-fit: cover; border-radius: 5px; }
.mkt-news__t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1.2; }
.mkt-news__t small { display: block; margin-top: 3px; font-family: var(--mono); font-weight: 400; font-size: 11px; color: #9fb0c6; }
.crypto { position: relative; isolation: isolate; color: #fff; background: #0b0716; box-shadow: 0 0 0 100vmax #0b0716; clip-path: inset(0 -100vmax); padding: 24px 0 22px; margin: 0 0 28px;
  background-image: radial-gradient(55% 120% at 0% 0%, rgba(247, 147, 26, .2), transparent 60%), radial-gradient(55% 120% at 100% 0%, rgba(130, 71, 229, .28), transparent 60%); border-top: 1px solid rgba(255, 255, 255, .06); }
.crypto__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.crypto__h { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3.2vw, 42px); line-height: 1; text-transform: uppercase; }
.crypto__note { font-family: var(--mono); font-size: 12.5px; color: #b9a8d8; }
.ctk { border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; }
.ctk__view { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); cursor: grab; -webkit-user-select: none; user-select: none; touch-action: pan-y; }
.ctk__track { display: flex; width: max-content; animation: lbr-tk 50s linear infinite; }
.ctk__track.is-js { animation: none !important; will-change: transform; }
.ctk__i { flex: none; padding: 10px 20px; font-family: var(--mono); font-size: 14px; white-space: nowrap; border-right: 1px solid rgba(255, 255, 255, .07); }
.ctk__i b { font-family: var(--display); font-size: 16px; color: #f7b955; margin-right: 6px; }
.ctk__i i { font-style: normal; margin-left: 6px; }
.ctk__i.is-up i, .coin.is-up .coin__chg, .desk-q.is-up i { color: #22c55e; }
.ctk__i.is-down i, .coin.is-down .coin__chg, .desk-q.is-down i { color: #ff4b55; }
.coins { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.coin { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "sym chg" "name name" "px px" "spark spark"; gap: 2px 8px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.coin__sym { grid-area: sym; font-family: var(--display); font-weight: 800; font-size: 20px; color: #f7b955; }
.coin__name { grid-area: name; font-size: 12.5px; color: #b9a8d8; }
.coin__px { grid-area: px; font-family: var(--mono); font-weight: 600; font-size: 18px; }
.coin__chg { grid-area: chg; align-self: center; font-family: var(--mono); font-size: 13px; font-weight: 700; }
.coin .spark { grid-area: spark; width: 100%; margin-top: 4px; }
.crypto .mkt__credit a { color: #f7b955; }
.desk-a { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.desk-a a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; color: inherit; text-decoration: none; }
.desk-a a:hover .desk-a__t { text-decoration: underline; }
.desk-a__img img { display: block; width: 96px; height: 54px; object-fit: cover; border-radius: 6px; }
.desk-a__t { font-family: var(--display); font-weight: 700; font-size: 15.5px; line-height: 1.22; }
.desk-a__t small { display: block; margin-top: 3px; font-family: var(--mono); font-weight: 400; font-size: 11px; opacity: .65; }
.desk-a--row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.desk-a--row a { grid-template-columns: 1fr; }
.desk-a--row .desk-a__img img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.desk { margin: 0 0 30px; }
.desk__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.desk-card { padding: 14px 16px 16px; border-radius: 10px; background: #fff; border: 1px solid #e3e6ec; border-top: 4px solid #16a34a; box-shadow: 0 10px 30px rgba(10, 20, 40, .06); }
.desk-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.desk-card h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: .02em; }
.desk-card header a { font-family: var(--display); font-weight: 700; font-size: 14px; color: #15803d; }
.desk-q-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.desk-q { padding: 4px 8px; border-radius: 6px; background: #0b1220; color: #e6edf7; font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.desk-q b { font-family: var(--display); font-weight: 700; color: #8fc1ff; margin-right: 4px; }
.desk-q i { font-style: normal; margin-left: 4px; }
.desk-none { margin: 0; font-size: 13px; color: #6b7280; }
@media (max-width: 1100px) { .coins { grid-template-columns: repeat(3, minmax(0, 1fr)); } .desk-a--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .coins { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mkt-strip__row--news { grid-auto-columns: 86%; } .desk-a--row { grid-template-columns: 1fr; } .desk-a--row a { grid-template-columns: 96px minmax(0, 1fr); } .desk-a--row .desk-a__img img { width: 96px; height: 54px; } }

/* =====================================================================
   Liberty Bell Fantasy
   ===================================================================== */
.fx-hero { position: relative; color: #fff; background: #07101f; box-shadow: 0 0 0 100vmax #07101f; clip-path: inset(0 -100vmax); margin-top: -30px; padding: 34px 0 26px;
  background-image: radial-gradient(60% 140% at 0% 0%, rgba(224, 16, 31, .32), transparent 60%), radial-gradient(60% 140% at 100% 0%, rgba(37, 99, 235, .35), transparent 60%),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 80px); }
.fx-hero__kick { margin: 0 0 6px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: #ffb4ba; }
.fx-hero__h { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(38px, 5.4vw, 70px); line-height: .95; text-transform: uppercase; letter-spacing: .01em; }
.fx-hero__h span { color: #ff3341; }
.fx-hero__sub { max-width: 680px; margin: 10px 0 0; font-size: 17px; color: #d5dceb; }
.fx-hero__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fx-hero__nav a { padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-family: var(--display); font-weight: 700; font-size: 15px; text-decoration: none; }
.fx-hero__nav a:hover { background: #e0101f; color: #fff; text-decoration: none; }
.fx-page { padding-top: 22px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 22px; }
.fx-sec__h { margin: 0 0 10px; font-family: var(--display); font-weight: 800; font-size: 26px; text-transform: uppercase; }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 14px; }
.fx-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(160deg, #0d1a33, #08101f); color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 12px 30px rgba(5, 10, 25, .25); transition: transform .15s; }
.fx-card:hover { transform: translateY(-2px); color: #fff; text-decoration: none; }
.fx-card--pickem { background: linear-gradient(160deg, #3a0a12, #14060a); }
.fx-card.is-final { opacity: .85; }
.fx-card__top { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 12px; color: #aab6cc; }
.fx-card__state { display: inline-flex; align-items: center; gap: 6px; }
.fx-card.is-live .fx-card__state { color: #ff8a92; font-weight: 700; }
.fx-card__kind { margin-top: 6px; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #ffb4ba; }
.fx-card--lineup .fx-card__kind { color: #8fc1ff; }
.fx-card__t { font-family: var(--display); font-weight: 800; font-size: 21px; line-height: 1.1; }
.fx-card__meta { font-size: 13px; color: #aab6cc; }
.fx-card__me { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .1); font-family: var(--display); font-weight: 700; font-size: 15px; color: #ffd166; }
.fx-box { padding: 16px 18px; border-radius: 12px; background: #fff; border: 1px solid #e3e6ec; box-shadow: 0 10px 30px rgba(10, 20, 40, .05); }
.fx-box h2 { margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; }
.fx-box__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fx-box__head a { font-family: var(--display); font-weight: 700; }
.fx-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 18px; }
.fx-mini { list-style: none; margin: 0; padding: 0; }
.fx-mini li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #eef0f3; }
.fx-mini__r { width: 22px; font-family: var(--display); font-weight: 800; color: #b5121f; }
.fx-mini__n { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-mini__p { font-family: var(--mono); font-size: 13px; }
.fx-empty { margin: 0; color: #6b7280; }
.fx-fine { margin: 8px 0 0; font-size: 13px; color: #6b7280; }
.fx-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.fx-groups { list-style: none; margin: 0 0 12px; padding: 0; }
.fx-groups li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid #eef0f3; }
.fx-groups li a { font-weight: 700; }
.fx-groups li span { font-size: 13px; color: #6b7280; }
.fx-groups__forms { display: grid; gap: 8px; }
.fx-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.fx-inline input { flex: 1; min-width: 180px; min-height: 40px; padding: 0 12px; border: 1px solid #c9cbce; border-radius: 6px; font: inherit; }
.fx-code { font-family: var(--mono); font-size: 15px; letter-spacing: .1em; padding: 1px 6px; background: #f3f4f6; border-radius: 4px; }
.fx-who { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.fx-who .mav { border-radius: 6px; }
.fx-head { color: #fff; background: #07101f; box-shadow: 0 0 0 100vmax #07101f; clip-path: inset(0 -100vmax); margin-top: -30px; padding: 22px 0 0;
  background-image: radial-gradient(60% 140% at 100% 0%, rgba(37, 99, 235, .3), transparent 60%); }
.fx-head__crumb { margin: 0; font-size: 13px; color: #aab6cc; }
.fx-head__crumb a { color: #8fc1ff; }
.fx-head__h { margin: 4px 0 6px; font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3.6vw, 44px); line-height: 1; text-transform: uppercase; }
.fx-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; font-size: 14px; color: #c8d1e0; }
.fx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-weight: 700; }
.fx-pill.is-live { background: #b5121f; }
.fx-tabs { display: flex; gap: 4px; margin-top: 14px; }
.fx-tabs a { padding: 10px 16px; border-bottom: 3px solid transparent; color: #c8d1e0; font-family: var(--display); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
.fx-tabs a[aria-current="page"] { color: #fff; border-bottom-color: #ff3341; }
.fx-tabs--light { margin: 0 0 8px; border-bottom: 1px solid #e3e6ec; }
.fx-tabs--light a { color: #4b5563; }
.fx-tabs--light a[aria-current="page"] { color: #111827; }
.fx-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fx-subtabs a { padding: 4px 12px; border-radius: 999px; background: #f1f3f6; color: #111827; font-size: 13px; font-weight: 600; text-decoration: none; }
.fx-subtabs a[aria-current="page"] { background: #111827; color: #fff; }
.fx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fx-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; padding: 8px 10px; border-bottom: 2px solid #111827; }
.fx-table td { padding: 9px 10px; border-bottom: 1px solid #eef0f3; vertical-align: middle; }
.fx-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fx-board tr.is-me td { background: #fff7d6; }
.fx-board__r { width: 40px; font-family: var(--display); font-weight: 800; font-size: 18px; color: #b5121f; }
.fx-big { font-family: var(--display); font-weight: 800; font-size: 26px; }
.fx-q { display: inline-block; padding: 0 5px; border-radius: 3px; background: #fde68a; color: #92400e; font-size: 10px; font-weight: 800; vertical-align: middle; }
.fx-gate { padding: 18px; border-radius: 12px; background: #0d1a33; color: #fff; }
.fx-gate h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 800; text-transform: uppercase; }
.fx-gate a:not(.btn) { color: #8fc1ff; }
.fx-scoring { margin-top: 10px; font-size: 13px; }
.fx-scoring summary { cursor: pointer; font-weight: 700; }
.fx-scoring table { width: 100%; margin-top: 6px; border-collapse: collapse; }
.fx-scoring th, .fx-scoring td { padding: 4px 6px; border-bottom: 1px solid #eef0f3; text-align: left; font-weight: 400; }
.fx-scoring td { text-align: right; font-family: var(--mono); white-space: nowrap; }
/* lineup builder */
.fx-build { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.fx-build__team { position: sticky; top: 70px; }
.fx-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fx-chip { padding: 6px 14px; border: 1px solid #c9cbce; border-radius: 999px; background: #fff; font: 700 14px var(--display); letter-spacing: .04em; cursor: pointer; }
.fx-chip.is-on { background: #111827; border-color: #111827; color: #fff; }
.fx-tools { display: flex; gap: 8px; margin-bottom: 10px; }
.fx-tools input { flex: 1; min-height: 40px; padding: 0 12px; border: 1px solid #c9cbce; border-radius: 6px; font: inherit; }
.fx-tools select { min-height: 40px; padding: 0 10px; border: 1px solid #c9cbce; border-radius: 6px; font: inherit; background: #fff; }
.fx-pool { max-height: 70vh; overflow-y: auto; border: 1px solid #e3e6ec; border-radius: 10px; background: #fff; }
.fx-pool--static { max-height: none; margin-top: 14px; }
.fx-prow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #eef0f3; }
.fx-prow.is-in { background: #ecfdf3; }
.fx-prow.is-off { opacity: .45; }
.fx-prow__add { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #111827; color: #fff; font: 800 18px/1 var(--ui); cursor: pointer; }
.fx-prow.is-in .fx-prow__add { background: #b5121f; }
.fx-prow__add:disabled { background: #c9cbce; cursor: not-allowed; }
.fx-prow__n { min-width: 0; }
.fx-prow__n b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-prow__n span { font-size: 12.5px; color: #6b7280; }
.fx-prow__f { font-family: var(--mono); font-size: 13px; color: #374151; text-align: right; }
.fx-prow__f small { display: block; font-size: 10px; color: #9ca3af; }
.fx-prow__s { font-family: var(--display); font-weight: 800; font-size: 16px; text-align: right; min-width: 70px; }
.fx-team { padding: 14px 16px; border-radius: 12px; background: #0d1a33; color: #fff; box-shadow: 0 14px 34px rgba(5, 10, 25, .3); }
.fx-team__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fx-team__head h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; }
.fx-team__head span { font-family: var(--mono); font-size: 13px; }
.fx-team__head span.is-over { color: #ff6b75; font-weight: 700; }
.fx-meter { height: 6px; margin: 8px 0 10px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.fx-meter span { display: block; height: 100%; width: 0; background: #22c55e; transition: width .2s; }
.fx-meter span.is-over { background: #ff3341; }
.fx-slots { list-style: none; margin: 0; padding: 0; }
.fx-slot { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 26px; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.fx-slot__pos { font-family: var(--display); font-weight: 800; font-size: 14px; color: #8fc1ff; }
.fx-slot__n { min-width: 0; }
.fx-slot__n b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-slot__n span { font-size: 12px; color: #aab6cc; }
.fx-slot__n em { font-style: normal; color: #6b7a93; }
.fx-slot__s { font-family: var(--mono); font-size: 13px; }
.fx-slot__x { width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.fx-slot__x:disabled { visibility: hidden; }
.fx-team__avg { margin: 8px 0 0; font-size: 12.5px; color: #aab6cc; }
.fx-team__go { display: flex; gap: 8px; margin-top: 12px; }
.fx-team__go .btn { flex: 1; }
.fx-team .fx-fine { color: #aab6cc; }
.fx-team .btn--outline { color: #fff; border-color: rgba(255, 255, 255, .4); }
/* pick'em */
.fx-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px; }
.fx-game { margin: 0; padding: 10px 12px 12px; border: 1px solid #e3e6ec; border-radius: 12px; background: #fff; }
.fx-game legend { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 0 4px; font-size: 12.5px; color: #6b7280; }
.fx-game legend > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.fx-lock { color: #92400e; font-weight: 700; }
.fx-res { font-weight: 800; }
.fx-res--ok { color: #15803d; } .fx-res--no { color: #b91c1c; }
.fx-team-btn { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 8px; padding: 9px 10px; border: 2px solid #e3e6ec; border-radius: 10px; cursor: pointer; transition: border-color .12s, background .12s; }
.fx-team-btn input { position: absolute; opacity: 0; pointer-events: none; }
.fx-team-btn:hover { border-color: var(--tc); }
.fx-team-btn.is-picked, .fx-team-btn:has(input:checked) { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 10%, #fff); box-shadow: inset 4px 0 0 var(--tc); }
.fx-team-btn.is-locked { cursor: default; }
.fx-team-btn.is-won .fx-team-btn__score { color: #15803d; }
.fx-team-btn__badge { display: grid; place-items: center; height: 36px; border-radius: 8px; background: var(--tc); color: #fff; font-family: var(--display); font-weight: 800; font-size: 15px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.fx-team-btn__name { min-width: 0; font-family: var(--display); font-weight: 800; font-size: 18px; line-height: 1.1; }
.fx-team-btn__name small { color: #b5121f; font-size: 13px; }
.fx-team-btn__name em { display: block; font-family: var(--ui); font-style: normal; font-weight: 400; font-size: 12.5px; color: #6b7280; }
.fx-team-btn__score { font-family: var(--display); font-weight: 800; font-size: 24px; }
.fx-team-btn:focus-within { outline: 2px solid #2563eb; outline-offset: 2px; }
.fx-picks__foot { position: sticky; bottom: 0; z-index: 5; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #0d1a33; color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.fx-picks__foot .fx-fine { color: #aab6cc; flex-basis: 100%; }
.fx-picks__foot .fx-scoring summary { color: #fff; }
.fx-picks__foot .fx-scoring th, .fx-picks__foot .fx-scoring td { color: #dfe5ee; border-color: rgba(255, 255, 255, .1); }
.fx-tb { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 240px; font-size: 14px; }
.fx-tb input { width: 90px; min-height: 40px; padding: 0 10px; border-radius: 6px; border: 0; font: inherit; }
.fx-scoreboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.fx-sb { padding: 10px 12px; border-radius: 10px; background: #0b0d14; color: #fff; }
.fx-sb.is-live { box-shadow: inset 0 0 0 2px #b5121f; }
.fx-sb__t { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; color: #aab6cc; }
.fx-sb__row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--display); font-weight: 700; font-size: 16px; }
.fx-sb__row b { display: grid; place-items: center; height: 26px; border-radius: 5px; background: var(--tc); font-size: 12px; }
.fx-sb__row i { font-style: normal; font-family: var(--mono); color: #c8d1e0; }
.fx-sb__row.is-won { color: #ffd166; }
.fx-promo { margin: 20px 0 6px; }
.fx-promo__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px 20px; border-radius: 14px; color: #fff;
  background: linear-gradient(120deg, #3a0a12, #0d1a33); box-shadow: 0 16px 40px rgba(5, 10, 25, .3); }
.fx-promo__k { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #ffb4ba; }
.fx-promo h2 { margin: 2px 0 4px; font-family: var(--display); font-weight: 800; font-size: 30px; text-transform: uppercase; }
.fx-promo p { margin: 0 0 10px; color: #d5dceb; }
.fx-promo__go { display: inline-block; padding: 8px 16px; border-radius: 8px; background: #e0101f; color: #fff; font-family: var(--display); font-weight: 800; text-decoration: none; }
.fx-promo__go:hover { background: #ff3341; color: #fff; text-decoration: none; }
.fx-promo__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fx-promo__list a { display: block; padding: 8px 12px; border-radius: 8px; background: rgba(255, 255, 255, .08); color: #fff; font-family: var(--display); font-weight: 700; text-decoration: none; }
.fx-promo__list a:hover { background: rgba(255, 255, 255, .16); color: #fff; text-decoration: none; }
@media (max-width: 900px) {
  .fx-build { grid-template-columns: 1fr; }
  .fx-build__team { position: static; order: -1; }
  .fx-pool { max-height: 60vh; }
  .fx-promo__in { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fx-prow { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .fx-prow__f { display: none; }
  .fx-tabs a { padding: 10px 10px; font-size: 14px; }
}

/* ---------- UFC Fight Center ---------- */
.ufc-hero { color: #fff; background: #0a0708; box-shadow: 0 0 0 100vmax #0a0708; clip-path: inset(0 -100vmax); margin-top: -30px; padding: 26px 0 24px;
  background-image: radial-gradient(70% 140% at 50% 0%, rgba(210, 10, 10, .35), transparent 65%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 22px); }
.ufc-hero__crumb { margin: 0; font-size: 13px; color: #c9b9b9; } .ufc-hero__crumb a { color: #ff8a92; }
.ufc-hero__h { margin: 4px 0 12px; font-family: var(--display); font-weight: 800; font-size: clamp(36px, 5vw, 64px); line-height: .95; text-transform: uppercase; }
.ufc-hero__h span { color: #e0101f; }
.ufc-next { padding: 14px 18px; border-left: 5px solid #e0101f; background: rgba(255, 255, 255, .05); border-radius: 0 10px 10px 0; max-width: 820px; }
.ufc-next__k { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: #ffb4ba; }
.ufc-next__name { margin: 4px 0; font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3vw, 38px); text-transform: uppercase; line-height: 1.05; }
.ufc-next__meta { margin: 0; color: #e3d6d6; }
.ufc-count { margin: 8px 0 0; font-family: var(--mono); font-size: 15px; color: #ffd166; }
.ufc-page { padding-top: 22px; padding-bottom: 36px; display: flex; flex-direction: column; gap: 24px; }
.ufc-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 22px; align-items: start; }
.ufc-h { margin: 0 0 10px; font-family: var(--display); font-weight: 800; font-size: 24px; text-transform: uppercase; border-bottom: 3px solid #e0101f; padding-bottom: 6px; }
.ufc-sub { margin: -4px 0 10px; color: #6b7280; font-size: 13.5px; }
.ufc-bouts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ufc-bout { display: grid; grid-template-columns: 120px minmax(0, 1fr) 130px; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: #fff; border: 1px solid #e3e6ec; }
.ufc-bout.is-main { background: #120b0c; color: #fff; border-color: #120b0c; }
.ufc-bout.is-live { box-shadow: inset 0 0 0 2px #e0101f; }
.ufc-bout__w { font-family: var(--display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.ufc-bout.is-main .ufc-bout__w { color: #ffb4ba; }
.ufc-bout__w em { display: block; font-style: normal; color: #e0101f; }
.ufc-bout__pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.ufc-vs { font-family: var(--display); font-weight: 800; color: #e0101f; text-transform: uppercase; }
.ufc-f { display: flex; flex-direction: column; min-width: 0; }
.ufc-f:last-child { text-align: right; align-items: flex-end; }
.ufc-f b { font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1.1; }
.ufc-f small { font-size: 12px; color: #6b7280; }
.ufc-bout.is-main .ufc-f small { color: #c9b9b9; }
.ufc-f i { font-style: normal; font-family: var(--display); font-weight: 800; font-size: 12px; color: #15803d; text-transform: uppercase; }
.ufc-f.is-loss b { opacity: .55; }
.ufc-bout__s { text-align: right; font-size: 13px; }
.ufc-live { display: inline-flex; align-items: center; gap: 6px; color: #e0101f; font-weight: 800; }
.ufc-final { color: #6b7280; font-weight: 700; } .ufc-time { color: #6b7280; }
.ufc-tape { padding: 14px 16px; border-radius: 12px; background: #120b0c; color: #fff; }
.ufc-tape .ufc-h { color: #fff; }
.ufc-tape__names { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-bottom: 8px; font-family: var(--display); font-size: 17px; }
.ufc-tape__names b:last-child { text-align: right; } .ufc-tape__names span { color: #e0101f; font-weight: 800; text-transform: uppercase; }
.ufc-tape__t { width: 100%; border-collapse: collapse; }
.ufc-tape__t td, .ufc-tape__t th { padding: 6px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 14px; }
.ufc-tape__t th { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #c9b9b9; text-align: center; }
.ufc-tape__t td:first-child { text-align: left; font-weight: 700; } .ufc-tape__t td:last-child { text-align: right; font-weight: 700; }
.ufc-sched { list-style: none; margin: 0; padding: 0; }
.ufc-sched li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid #eef0f3; }
.ufc-sched span { font-family: var(--mono); font-size: 13px; color: #6b7280; } .ufc-sched b { font-family: var(--display); }
.ufc-fighters__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; }
.ufc-card { padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #e3e6ec; border-top: 4px solid #e0101f; }
.ufc-card h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 19px; }
.ufc-card__k { margin: 2px 0 8px; font-size: 12.5px; color: #6b7280; }
.ufc-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.ufc-card dt { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; color: #6b7280; } .ufc-card dd { margin: 0; font-weight: 700; }
.ufc-band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin: 18px 0 0; padding: 14px 18px; border-radius: 12px; color: #fff; text-decoration: none;
  background: linear-gradient(110deg, #1a0507, #4a0a10); box-shadow: 0 14px 34px rgba(20, 5, 5, .3); }
.ufc-band:hover { color: #fff; text-decoration: none; filter: brightness(1.1); }
.ufc-band__k { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; background: #e0101f; font-family: var(--display); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.ufc-band__t b { display: block; font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; }
.ufc-band__t small { color: #e3d6d6; }
.ufc-band__go { font-family: var(--display); font-weight: 800; }
@media (max-width: 900px) { .ufc-cols { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .ufc-bout { grid-template-columns: 1fr; gap: 6px; }
  .ufc-bout__s { text-align: left; }
  .ufc-band { grid-template-columns: 1fr; }
}

/* Slider headlines: long ones get a little smaller, and none ever runs past three lines */
.slide__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; padding-bottom: .04em; }
.slide__title--l { font-size: clamp(26px, 2.9vw, 48px); max-width: 24ch; }
.slide__title--xl { font-size: clamp(24px, 2.5vw, 42px); max-width: 26ch; }
@media (max-width: 700px) { .slide__title--l { font-size: 26px; } .slide__title--xl { font-size: 23px; } }
.np-pop__desk { margin: 12px 0 0; padding: 8px 12px; border: 1px dashed rgba(23, 20, 15, .35); font-size: 14px; line-height: 1.4; color: #2b261d; }
/* Live Updates on the homepage: one column on desktop too, scrolling inside its box */
.liveline--home ol { display: flex; flex-direction: column; grid-template-columns: none; gap: 12px; max-height: 520px; overflow-y: auto; }

/* reel arrows: really hidden when there's nothing to scroll */
.reel-btn[hidden], .reel-side[hidden] { display: none !important; }
.adv-results { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.adv-results h3 { margin: 0 0 8px; font-family: var(--display); text-transform: uppercase; }
.adv-results dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0; }
.adv-results dt { font-size: 12px; opacity: .75; } .adv-results dd { margin: 0; font-family: var(--display); font-weight: 800; font-size: 24px; }

/* ---------- Store: section tiles and creative banners ---------- */
.page--store { display: grid; gap: 26px; }
.store-grid { display: grid; gap: 26px; }
.stiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stiles--sm { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stile { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; color: #fff; text-decoration: none !important; background: radial-gradient(80% 90% at 80% 10%, rgba(208, 32, 46, .5), transparent 60%), linear-gradient(150deg, #1f3f8f, #0a1424); box-shadow: 0 8px 22px rgba(10, 20, 36, .18); }
.stile:first-child { grid-column: span 2; aspect-ratio: auto; }
.stiles--sm .stile:first-child { grid-column: auto; aspect-ratio: 4 / 3; }
.stile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.stile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(5, 10, 20, .85)); }
.stile:hover img { transform: scale(1.06); }
.stile__txt { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: grid; gap: 2px; }
.stile__txt strong { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.stile:first-child .stile__txt strong { font-size: 30px; }
.stiles--sm .stile .stile__txt strong { font-size: 17px; }
.stile__txt span { font-size: 13px; color: #d5deeb; }
.stile:hover .stile__txt strong { text-decoration: underline; text-decoration-color: var(--red-light); text-underline-offset: 4px; }

.sbn { position: relative; display: grid; min-height: 280px; border-radius: 18px; overflow: hidden; color: #fff; text-decoration: none !important; background: #0a1424; isolation: isolate; box-shadow: 0 14px 34px rgba(10, 20, 36, .22); }
.sbn__pic { position: absolute; inset: 0; z-index: -2; }
.sbn__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
a.sbn:hover .sbn__pic img { transform: scale(1.04); }
.sbn__copy { position: relative; display: grid; align-content: center; gap: 8px; max-width: 520px; padding: 34px 38px; }
.sbn__kick { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ff8a92; }
.sbn__title { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4vw, 54px); line-height: .95; text-transform: uppercase; }
.sbn__text { font-size: 17px; line-height: 1.45; color: #e3e9f2; }
.sbn__cta { justify-self: start; margin-top: 6px; padding: 10px 18px; border-radius: 999px; background: var(--red); font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .03em; text-transform: uppercase; transition: background .2s, transform .2s; }
a.sbn:hover .sbn__cta { background: #e62a38; transform: translateX(3px); }
.sbn--noimg .sbn__pic { background: radial-gradient(60% 90% at 85% 30%, rgba(59, 123, 255, .35), transparent 60%), linear-gradient(130deg, #0f1d33, #0a1424); }
/* Old Glory: stripes down the left edge, a navy wash behind the words */
.sbn--flag { padding-left: 22px; }
.sbn--flag::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 22px; background: repeating-linear-gradient(180deg, #b22234 0 22px, #fff 22px 44px); }
.sbn--flag .sbn__pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 20, 36, .94) 0%, rgba(10, 20, 36, .75) 38%, rgba(10, 20, 36, 0) 70%); }
/* Split: a red panel beside the picture */
.sbn--split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); background: #b22234; }
.sbn--split .sbn__pic { position: relative; inset: auto; z-index: 0; grid-column: 2; grid-row: 1; clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%); }
.sbn--split .sbn__copy { grid-column: 1; grid-row: 1; }
.sbn--split .sbn__kick { color: #ffd7da; }
.sbn--split .sbn__cta { background: #0a1424; }
.sbn--split::after { content: '★ ★ ★'; position: absolute; left: 38px; bottom: 14px; font-size: 14px; letter-spacing: .4em; color: rgba(255, 255, 255, .45); }
/* Paper: cream stationery, ink lettering, a torn edge on the picture */
.sbn--paper { color: var(--ink); background: #f5eedf repeating-linear-gradient(0deg, transparent 0 31px, rgba(31, 63, 143, .09) 31px 32px); }
.sbn--paper .sbn__pic { left: 46%; clip-path: polygon(6% 0, 100% 0, 100% 100%, 2% 100%, 7% 88%, 1% 76%, 6% 63%, 0 50%, 5% 37%, 1% 25%, 6% 12%); }
.sbn--paper .sbn__copy { max-width: 50%; }
.sbn--paper .sbn__kick { color: var(--red-text); }
.sbn--paper .sbn__title { font-family: var(--serif); font-style: italic; font-weight: 700; text-transform: none; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.02; }
.sbn--paper .sbn__text { color: var(--ink-2); }
.sbn--paper .sbn__cta { background: var(--ink); }
/* Stamp: a postage-stamp frame and a seal */
.sbn--stamp .sbn__pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 20, 36, .92), rgba(10, 20, 36, .25) 70%); }
.sbn--stamp::before { content: ''; position: absolute; inset: 12px; border: 2px dashed rgba(255, 255, 255, .55); border-radius: 10px; pointer-events: none; z-index: 1; }
.sbn--stamp .sbn__copy { align-content: end; }
.sbn__seal { position: absolute; top: 22px; right: 22px; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; border: 3px double #f3d58a; color: #f3d58a; background: rgba(10, 20, 36, .7); font-family: var(--display); font-weight: 800; font-size: 14px; line-height: 1; text-align: center; text-transform: uppercase; letter-spacing: .08em; transform: rotate(-12deg); }
.sbn__seal b { display: block; font-size: 18px; margin-bottom: 2px; }
/* Night: a starry navy sky, the picture fading in from the right */
.sbn--night { background: radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 30% 70%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 44% 34%, #cfe0ff 50%, transparent 51%), radial-gradient(1px 1px at 8% 84%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 52% 12%, #fff 50%, transparent 51%), radial-gradient(70% 120% at 0% 100%, rgba(59, 123, 255, .35), transparent 60%), #071022; }
.sbn--night .sbn__pic { left: 38%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.sbn--night .sbn__kick { color: #9fc0ff; }
/* Overlay: the picture full bleed, words along the bottom */
.sbn--overlay .sbn__pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 20, 36, .1) 20%, rgba(10, 20, 36, .9)); }
.sbn--overlay .sbn__copy { align-content: end; max-width: 640px; }
/* Members: no picture, a big red "bell" with the discount */
.sbn--member { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; background: radial-gradient(60% 140% at 100% 50%, rgba(208, 32, 46, .5), transparent 60%), linear-gradient(120deg, #0f1d33, #0a1424); }
.sbn--member .sbn__copy { max-width: 720px; padding: 28px 34px; }
.sbn--member .sbn__title { font-size: clamp(28px, 3.2vw, 42px); }
.sbn__bell { display: grid; place-items: center; align-content: center; width: 130px; height: 130px; margin: 0 34px 0 0; border-radius: 50% 50% 18px 18px; background: linear-gradient(160deg, #e62a38, #8e0f19); font-family: var(--display); font-weight: 800; font-size: 46px; line-height: .9; box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .2), 0 10px 24px rgba(0, 0, 0, .35); }
.sbn__bell small { font-size: 18px; letter-spacing: .12em; text-transform: uppercase; }
/* Two banners side by side */
.sbn-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sbn--half { min-height: 320px; }
.sbn--half .sbn__copy { padding: 28px 30px; }
.sbn--half .sbn__title { font-size: clamp(28px, 2.8vw, 40px); }
.sbn--half.sbn--paper .sbn__pic { left: 52%; }
.sbn--half.sbn--paper .sbn__copy { max-width: 56%; }
.sbn--half.sbn--night .sbn__pic { left: 30%; }
/* Section page header */
div.sbn { min-height: 300px; }
div.sbn .sbn__title { font-size: clamp(38px, 5vw, 66px); }
@media (max-width: 900px) {
  .stiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stiles--sm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stile:first-child { aspect-ratio: 2 / 1; }
  .sbn-pair { grid-template-columns: 1fr; }
  .sbn--split { grid-template-columns: 1fr; }
  .sbn--split .sbn__pic { grid-column: 1; grid-row: 1; height: 200px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%); }
  .sbn--split .sbn__copy { grid-row: 2; }
  .sbn--paper .sbn__pic, .sbn--half.sbn--paper .sbn__pic { position: relative; inset: auto; left: auto; height: 190px; z-index: 0; clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 100%, 72% 93%, 55% 100%, 38% 92%, 20% 100%, 0 93%); }
  .sbn--paper .sbn__copy, .sbn--half.sbn--paper .sbn__copy { max-width: none; }
  .sbn--night .sbn__pic, .sbn--half.sbn--night .sbn__pic { left: 0; opacity: .45; -webkit-mask-image: none; mask-image: none; }
  .sbn--flag .sbn__pic::after { background: linear-gradient(90deg, rgba(10, 20, 36, .92), rgba(10, 20, 36, .55)); }
}
@media (max-width: 560px) {
  .sbn { min-height: 240px; }
  .sbn__copy, .sbn--half .sbn__copy { padding: 24px 22px; }
  .sbn__text { font-size: 15px; }
  .stiles--sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stile__txt strong, .stile:first-child .stile__txt strong { font-size: 19px; }
  .sbn--member { grid-template-columns: 1fr; }
  .sbn__bell { width: 96px; height: 96px; font-size: 34px; margin: 0 0 22px 22px; }
  .sbn__seal { width: 66px; height: 66px; font-size: 11px; top: 18px; right: 18px; }
}
/* Menu items never squeeze: Live TV and Breaking keep their full size, and the sections that don't fit move into More. */
.nav__links > *, .nav__links > .nav__item > a, .nav__links a.nav__live, .nav__links a.nav__brk { flex-shrink: 0; }
.nav__links a.nav__live, .nav__links a.nav__brk { white-space: nowrap; min-width: max-content; }

/* ---------- Live coverage: three columns and a desk for every section ---------- */
.lvx { padding-top: 18px; }
.lvx-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px 28px; align-items: center; margin: 0 0 20px; padding: 28px 28px 22px; border-radius: 18px; color: #fff; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 140% at 100% 0%, rgba(59, 123, 255, .35), transparent 60%), radial-gradient(60% 120% at 0% 100%, rgba(208, 32, 46, .45), transparent 60%), linear-gradient(160deg, #0b1830, #050a14); }
.lvx-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px); pointer-events: none; }
.lvx-hero h1 { margin: 10px 0 6px; font-family: var(--display); font-weight: 800; font-size: clamp(38px, 5.4vw, 66px); line-height: .92; text-transform: uppercase; color: #fff; }
.lvx-hero p { margin: 0; color: #cfd9e8; font-size: 17px; max-width: 560px; }
.lvx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.lvx-stats div { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.lvx-stats dt { font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #9fb0c6; }
.lvx-stats dd { margin: 2px 0 0; font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; color: #fff; }
.lvx-jump { grid-column: 1 / -1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding: 4px 0 2px; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.lvx-jump a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font: 700 14px var(--display); letter-spacing: .03em; text-decoration: none; white-space: nowrap; }
.lvx-jump a::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cat, #d0202e); box-shadow: 0 0 8px var(--cat, #d0202e); }
.lvx-jump a:hover { background: var(--cat, #d0202e); color: var(--cat-ink, #fff); }

.lvx-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 34px; }
.lvx-col { min-width: 0; border-radius: 16px; background: #fff; border: 1px solid var(--rule); box-shadow: 0 10px 28px rgba(10, 20, 36, .07); overflow: hidden; }
.lvx-col--side { display: grid; gap: 18px; background: none; border: 0; box-shadow: none; overflow: visible; }
.lvx-col--side > section { border-radius: 16px; background: #fff; border: 1px solid var(--rule); box-shadow: 0 10px 28px rgba(10, 20, 36, .07); overflow: hidden; }
.lvx-col__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; color: #fff; background: linear-gradient(180deg, #16243d, #0a1424); border-bottom: 3px solid #d0202e; }
.lvx-col__head h2 { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; color: #fff !important; }
.lvx-col__head > span { font: 12px var(--mono); color: #9fb0c6; }
.lvx-col__head .nav__dot { width: 9px; height: 9px; border-radius: 50%; background: #ff2b37; box-shadow: 0 0 8px #ff2b37; animation: lbr-onair 1.4s ease-in-out infinite; }
.lvx-col__head--hot { background: linear-gradient(180deg, #b3121f, #7c0b14); border-bottom-color: #ffb3b8; }
.lvx-scroll { list-style: none; margin: 0; padding: 6px 12px 10px; max-height: 760px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c5cad2 transparent; }
.lvx-scroll--short { max-height: 420px; }
/* the wire, tightened for the middle column */
.lvx .lv-list { margin: 0; padding: 4px 12px 10px 4px; }
.lvx .lv-list::before { left: 62px; }
.lvx .lv { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 8px 0; }
.lvx .lv::before { left: 55px; top: 15px; }
.lvx .lv time { padding-top: 10px; padding-right: 8px; font-size: 12px; }
.lvx .lv__body { padding: 10px 14px; border-left: 3px solid var(--cat, var(--rule)); }
.lvx .lv h3 { font-size: 19px; }
.lvx .lv__cat { color: var(--cat, #6b7486); }
.lvx .lv--empty { padding: 30px 16px; }
/* the compact line used in Our newsroom, Breaking now and every desk */
.dk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px 2px; border-bottom: 1px solid #edf0f4; }
.dk:last-child { border-bottom: 0; }
.dk--ours { grid-template-columns: 88px minmax(0, 1fr); }
.dk__img { display: block; width: 88px; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: #e8ebf0; }
.dk__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk time { margin-right: 8px; font: 700 12px var(--mono); color: var(--muted); }
.dk__tag { font: 800 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #d0202e; }
.dk__t { display: block; margin-top: 2px; font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.18; color: var(--ink); text-decoration: none; }
.dk__t:hover { color: var(--red-text); text-decoration: underline; }
.dk__by { display: block; margin-top: 3px; font: 12px var(--mono); color: var(--muted); }
.dk--hot .dk__t { color: #9b0d18; }
.dk--empty { display: block; padding: 22px 4px; color: var(--muted); font-family: var(--mono); font-size: 14px; }
.dk--new { animation: dk-new 2.4s ease-out; }
@keyframes dk-new { 0% { background: #fff1c2; } 100% { background: transparent; } }
.lvx-most { list-style: none; margin: 0; padding: 4px 14px 10px; counter-reset: m; }
.lvx-most li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid #edf0f4; }
.lvx-most li:last-child { border-bottom: 0; }
.lvx-most b { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; color: var(--cat, #d0202e); }
.lvx-most a { font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--ink); text-decoration: none; }
.lvx-most a:hover { text-decoration: underline; }
/* every desk: a colored card with its own scroll */
.lvx-desks { margin-bottom: 40px; }
.lvx-desk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lvd { display: flex; flex-direction: column; min-width: 0; height: 440px; border-radius: 14px; background: #fff; border: 1px solid var(--rule); border-top: 4px solid var(--cat, #d0202e); box-shadow: 0 8px 22px rgba(10, 20, 36, .06); overflow: hidden; scroll-margin-top: 80px; }
.lvd__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--cat, #d0202e) 12%, #fff), #fff); border-bottom: 1px solid #edf0f4; }
.lvd__head h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: .03em; text-transform: uppercase; }
.lvd__head h3::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--cat, #d0202e); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat, #d0202e) 25%, transparent); }
.lvd__head h3 a { color: var(--ink); text-decoration: none; }
.lvd__head h3 a:hover { color: var(--cat, #d0202e); }
.lvd__n { font: 12px var(--mono); color: var(--muted); white-space: nowrap; }
.lvd__list { flex: 1; list-style: none; margin: 0; padding: 2px 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--cat, #c5cad2) 55%, #fff) transparent; }
.lvd__list .dk--ours { grid-template-columns: 72px minmax(0, 1fr); }
.lvd__list .dk__img { width: 72px; }
.lvd__list .dk__t { font-size: 16px; }
.lvd__list .dk__tag { color: var(--cat, #d0202e); }
.lvd__more { padding: 9px 14px; border-top: 1px solid #edf0f4; font: 700 14px var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--cat, #d0202e); text-decoration: none; background: #fafbfc; }
.lvd__more:hover { background: var(--cat, #d0202e); color: var(--cat-ink, #fff); }
@media (max-width: 1100px) {
  .lvx-cols { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .lvx-col--wire { grid-column: 1; grid-row: 1 / span 2; }
  .lvx-col--ours { grid-column: 2; grid-row: 1; }
  .lvx-col--side { grid-column: 2; grid-row: 2; }
  .lvx-desk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .lvx-hero { grid-template-columns: 1fr; padding: 22px 18px 18px; }
  .lvx-stats dd { font-size: 28px; }
  .lvx-cols { grid-template-columns: 1fr; }
  .lvx-col--wire, .lvx-col--ours, .lvx-col--side { grid-column: auto; grid-row: auto; }
  .lvx-col--wire { order: 1; } .lvx-col--side { order: 2; } .lvx-col--ours { order: 3; }
  .lvx-scroll { max-height: 560px; }
  .lvx-desk-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .lvd { flex: 0 0 86%; scroll-snap-align: start; height: 420px; }
}
.lvx-col--side > section:only-child .lvx-scroll { max-height: 760px; }

/* ---------- Liberty Bell Fantasy Games: the banner artwork, epic ---------- */
.fx-hero--art { padding: 0 0 26px; overflow: hidden; isolation: isolate; background: #050b16; box-shadow: 0 0 0 100vmax #050b16; }
.fx-hero--art::before { content: ''; position: absolute; inset: -40px -10vw; z-index: -2; background: var(--fx-art) center / cover no-repeat; filter: blur(38px) saturate(1.4) brightness(.45); transform: scale(1.1); }
.fx-hero--art::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 30%, transparent, rgba(5, 11, 22, .55) 70%), linear-gradient(180deg, transparent 55%, #050b16 100%); }
.fx-hero__stage { position: relative; max-width: 1360px; margin: 0 auto; overflow: hidden; border-radius: 0 0 22px 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .08), 0 0 90px rgba(224, 16, 31, .28); }
.fx-hero__img { display: block; width: 100%; height: auto; max-height: 620px; object-fit: cover; animation: fx-zoom 18s ease-in-out infinite alternate; }
.fx-hero__stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, #b22234 0 33%, #fff 33% 66%, #1f3f8f 66%); }
.fx-hero__shine { position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none; transform: skewX(-20deg);
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22) 45%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .22) 55%, rgba(255, 255, 255, 0)); animation: fx-shine 5.5s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes fx-zoom { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes fx-shine { 0% { left: -40%; } 45%, 100% { left: 130%; } }
.fx-hero__in--art { display: grid; justify-items: center; text-align: center; padding-top: 22px; }
.fx-hero__in--art .fx-hero__kick { margin: 0; }
.fx-hero__in--art .fx-hero__sub { margin: 8px auto 0; font-size: 19px; color: #e3e9f2; }
.fx-hero__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin-top: 16px; }
.fx-hero__row .fx-hero__nav { margin: 0; justify-content: center; }
.fx-hero--art .fx-hero__nav a { padding: 9px 18px; font-size: 17px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); }
.fx-hero--art .fx-hero__nav a:first-child { background: linear-gradient(180deg, #ff2b37, #b3101c); border-color: #ff6b74; box-shadow: 0 8px 22px rgba(224, 16, 31, .45); }
.fx-hero__stats { font: 14px var(--mono); color: #cbd6e6; }
.fx-hero__stats b { font-family: var(--display); font-size: 22px; color: #fff; }
.fx-hero__stats i { font-style: normal; color: #ff8a92; margin: 0 4px; }

/* Sports page promo */
.fx-promo--art .fx-promo__in { position: relative; isolation: isolate; overflow: hidden; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 0; padding: 0; border-radius: 18px; background: #050b16;
  box-shadow: 0 24px 60px rgba(5, 10, 25, .45), 0 0 0 1px rgba(255, 255, 255, .06), 0 0 70px rgba(224, 16, 31, .2); }
.fx-promo--art .fx-promo__in::before { content: ''; position: absolute; inset: -30px; z-index: -1; background: var(--fx-art) right center / cover no-repeat; filter: blur(30px) saturate(1.3) brightness(.35); }
.fx-promo__art { position: relative; display: block; align-self: stretch; overflow: hidden; }
.fx-promo__art img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; transition: transform .6s ease; }
.fx-promo__art:hover img { transform: scale(1.04); }
.fx-promo__art::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 18%; background: linear-gradient(90deg, transparent, #050b16); pointer-events: none; }
.fx-promo__side { display: grid; align-content: center; gap: 10px; padding: 20px 22px; }
.fx-promo--art .fx-promo__k { color: #ffb4ba; }
.fxp-chip { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: #fff !important; text-decoration: none !important;
  background: linear-gradient(90deg, rgba(31, 63, 143, .45), rgba(255, 255, 255, .06)); border: 1px solid rgba(255, 255, 255, .12); transition: transform .15s, background .15s; }
.fxp-chip--pickem { background: linear-gradient(90deg, rgba(178, 34, 52, .5), rgba(255, 255, 255, .06)); }
.fxp-chip:hover { transform: translateX(3px); background: rgba(255, 255, 255, .16); }
.fxp-chip__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: rgba(0, 0, 0, .35); font-size: 18px; }
.fxp-chip__t { font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.15; }
.fxp-chip__t small { display: block; margin-top: 2px; font: 12px var(--mono); color: #b9c6d8; }
.fxp-chip__live { display: inline-flex; align-items: center; gap: 5px; color: #ff8a92; }
.fxp-chip__live .nav__dot { width: 7px; height: 7px; border-radius: 50%; background: #ff2b37; box-shadow: 0 0 6px #ff2b37; animation: lbr-onair 1.4s ease-in-out infinite; }
.fxp-chip__go { padding: 5px 11px; border-radius: 999px; background: #e0101f; font: 800 13px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.fx-promo--art .fx-promo__go { justify-self: start; padding: 11px 22px; border-radius: 999px; font-size: 18px; letter-spacing: .03em; text-transform: uppercase; background: linear-gradient(180deg, #ff2b37, #b3101c); box-shadow: 0 10px 24px rgba(224, 16, 31, .45); }
@media (max-width: 900px) {
  .fx-promo--art .fx-promo__in { grid-template-columns: 1fr; }
  .fx-promo__art::after { top: auto; left: 0; width: auto; height: 30%; background: linear-gradient(180deg, transparent, #050b16); }
  .fx-promo__art img { min-height: 0; aspect-ratio: 16 / 9; }
  .fx-hero__stage { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .fx-hero__img, .fx-hero__shine { animation: none; } }

/* ---------- Front page: the live row (tracker + dates | Live Updates) ---------- */
.front-live { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; margin: 22px 0; }
.front-live__left { display: grid; gap: 18px; min-width: 0; }
.front-live__left .dates { margin: 0; }
.front-live__right { min-width: 0; position: sticky; top: 70px; }
.front-live .liveline--home { margin: 0; }
.front-live .liveline--home ol { display: flex; flex-direction: column; gap: 12px; max-height: 760px; grid-template-columns: none; }
.tpanel { border-radius: 14px; background: #0b1220; color: #fff; border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; box-shadow: 0 14px 32px rgba(5, 10, 25, .2); }
.tpanel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 3px solid #d0202e; background: linear-gradient(180deg, #16243d, #0b1220); }
.tpanel__head h2 { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--display); font-weight: 800; font-size: 24px; text-transform: uppercase; letter-spacing: .03em; color: #fff; }
.tpanel__head > span { font: 12px var(--mono); color: #9fb0c6; }
.tpanel__list { list-style: none; margin: 0; padding: 4px 16px 10px; }
.tpanel__list > li { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.tpanel__list > li:last-child { border-bottom: 0; }
.tpanel__story { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; color: #fff; text-decoration: none; }
.tpanel__img { display: block; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; border-left: 3px solid var(--cat, #d0202e); }
.tpanel__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpanel__kick { display: block; font: 800 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #ff8a92; }
.tpanel__story strong { display: block; margin: 3px 0 2px; font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.15; }
.tpanel__story:hover strong { text-decoration: underline; }
.tpanel__story .meta { color: #9fb0c6; }
.tpanel__ups { list-style: none; margin: 8px 0 0 132px; padding: 0; display: grid; gap: 6px; }
.tpanel__ups li { position: relative; padding-left: 14px; font-size: 14px; line-height: 1.35; color: #cfd9e8; }
.tpanel__ups li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #ff2b37; }
.tpanel__ups time { margin-right: 6px; font: 700 12px var(--mono); color: #fff; }
/* sponsor bars between sections */
.adbar { margin: 22px 0; }
.adbar .ad { margin: 0 auto; }
/* Every Section: even cards */
.desks { margin: 26px 0; }
.desks__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.dcard { display: flex; flex-direction: column; min-width: 0; border-radius: 14px; background: #fff; border: 1px solid var(--rule); border-top: 4px solid var(--cat, #d0202e); box-shadow: 0 8px 22px rgba(10, 20, 36, .06); overflow: hidden; }
.dcard__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #edf0f4; background: linear-gradient(180deg, color-mix(in srgb, var(--cat, #d0202e) 10%, #fff), #fff); }
.dcard__head h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: .02em; text-transform: uppercase; }
.dcard__head h2 a { color: var(--ink); text-decoration: none; }
.dcard__head h2 a:hover { color: var(--cat, #d0202e); }
.dcard__head > span { font: 12px var(--mono); color: var(--muted); }
.dcard__lead { display: grid; gap: 6px; padding: 12px 14px 8px; color: var(--ink); text-decoration: none; }
.dcard__img { display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #e8ebf0; }
.dcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.dcard__lead:hover .dcard__img img { transform: scale(1.04); }
.dcard__lead strong { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.15; }
.dcard__lead:hover strong { color: var(--red-text); }
.dcard__list { flex: 1; list-style: none; margin: 0; padding: 0 14px; }
.dcard__list li { padding: 8px 0; border-top: 1px solid #edf0f4; }
.dcard__list a { display: block; font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.2; color: var(--ink); text-decoration: none; }
.dcard__list a:hover { color: var(--red-text); text-decoration: underline; }
.dcard__more { padding: 9px 14px; border-top: 1px solid #edf0f4; background: #fafbfc; font: 700 14px var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--cat, #d0202e); text-decoration: none; }
.dcard__more:hover { background: var(--cat, #d0202e); color: var(--cat-ink, #fff); }
.desks__ad { grid-column: 1 / -1; }
.dcard--ad { align-items: center; justify-content: center; padding: 14px; border-top-color: var(--rule); }
.dcard--disc .ranked { margin: 0; padding: 10px 14px; }
@media (max-width: 1000px) { .front-live { grid-template-columns: 1fr; } .front-live__right { position: static; } .desks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .desks__grid { grid-template-columns: 1fr; } .tpanel__story { grid-template-columns: 92px minmax(0, 1fr); } .tpanel__ups { margin-left: 0; } }
.lvx-desk-ad { grid-column: 1 / -1; } @media (max-width: 760px) { .lvx-desk-ad { flex: 0 0 86%; } }
/* A short divider line between menu items (not beside the Breaking and Live buttons) */
.nav__links > .nav__item:not(.nav__item--brk) { background: linear-gradient(rgba(255, 255, 255, .32), rgba(255, 255, 255, .32)) left center / 1px 16px no-repeat; }
.fx-hero__nav a.fx-arena-go { background: linear-gradient(180deg, #2bff98, #00b863) !important; color: #02140a !important; border-color: #8dffc8 !important; box-shadow: 0 0 22px rgba(25, 255, 140, .55) !important; }

/* The newspaper banner and the live weather card, side by side */
.np-wx-row { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: stretch; margin: 22px 0; }
.np-wx-row .np-promo { margin: 0; position: relative; }
.np-promo__oldies { position: absolute; right: 16px; bottom: 14px; padding: 6px 14px; border-radius: 999px; background: #2b2418; color: #f4ead2 !important; font: 700 13px Georgia, serif; letter-spacing: .08em; text-decoration: none !important; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.np-promo__oldies:hover { background: #8b1a1a; }
.np-pop__go--music { background: #8b1a1a !important; }
.wxcard { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; color: #fff; background: radial-gradient(80% 100% at 100% 0%, rgba(59, 123, 255, .45), transparent 60%), linear-gradient(160deg, #0a1c44, #04070d); box-shadow: 0 14px 32px rgba(5, 10, 25, .25); }
.wxcard__top { display: flex; align-items: center; justify-content: space-between; }
.wxcard__top h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.wxcard__top a { font: 600 13px var(--mono); color: #8fc1ff; }
.wxcard__now { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; }
.wxcard__now img { width: 56px; height: 56px; border-radius: 10px; }
.wxcard__ico { font-size: 42px; line-height: 1; }
.wxcard__now > b { font-family: var(--display); font-weight: 800; font-size: 52px; line-height: 1; }
.wxcard__now span { font-size: 14px; color: #cfd9e8; line-height: 1.3; }
.wxcard__now strong { display: block; font-family: var(--display); font-size: 18px; color: #fff; }
.wxcard__hours { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.wxcard__hours span { flex: 1 0 auto; display: grid; justify-items: center; gap: 2px; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .07); font-size: 15px; }
.wxcard__hours small { font: 11px var(--mono); color: #9fb0c6; } .wxcard__hours b { font-family: var(--display); }
.wxcard__hours .wxcard__alert { flex-basis: 100%; display: block; background: rgba(208, 32, 46, .35); font-size: 13px; }
.wxcard__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-top: auto; }
.wxcard__form label { grid-column: 1 / -1; font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #9fb0c6; }
.wxcard__form input { min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .3); color: #fff; font: inherit; }
.wxcard__form button { padding: 8px 14px; border-radius: 8px; border: 0; background: #d0202e; color: #fff; font: 800 14px var(--display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 900px) { .np-wx-row { grid-template-columns: 1fr; } }
/* Ad spot IDs: fine print in the top-right corner of every ad */
.ad { position: relative; }
.ad__spot { position: absolute; top: 2px; right: 6px; z-index: 2; font: 600 10px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(90, 100, 115, .9); background: rgba(255, 255, 255, .75); padding: 1px 5px; border-radius: 4px; pointer-events: auto; }
.adv-spotid { display: grid; gap: 6px; margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: #f6f8fb; border: 1px dashed #c5cad2; }
.adv-spotid label { font-weight: 700; } .adv-spotid label span { display: block; font-weight: 400; font-size: 14px; color: var(--muted); }
.adv-spotid input { max-width: 260px; padding: 8px 10px; border: 1px solid #c5cad2; border-radius: 8px; font: inherit; text-transform: uppercase; }
/* Sports page fantasy promo: the whole banner, uncropped, with the games in a row beneath it */
.fx-promo--art .fx-promo__in { grid-template-columns: 1fr !important; }
.fx-promo--art .fx-promo__art img { width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: auto; object-fit: contain; }
.fx-promo--art .fx-promo__art::after { top: auto; left: 0; right: 0; width: auto; height: 22%; background: linear-gradient(180deg, transparent, #050b16); }
.fx-promo--art .fx-promo__side { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); align-items: stretch; padding: 4px 18px 18px; }
.fx-promo--art .fx-promo__side .fx-promo__k { grid-column: 1 / -1; }
.fx-promo--art .fx-promo__list { display: contents; }
.fx-promo--art .fx-promo__list li { min-width: 0; }
.fx-promo--art .fxp-chip { height: 100%; }
.fx-promo--art .fx-promo__go { grid-column: 1 / -1; justify-self: center; }
/* The simple menu's More panel: six labeled columns */
.nav__mega.nav__mega--groups { width: min(1080px, 96vw); grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 14px; padding: 18px; }
.nav__mega--groups .mega__col { display: flex; flex-direction: column; min-width: 0; padding-left: 12px; border-left: 1px solid #2b2530; }
.nav__mega--groups .mega__col:first-child { padding-left: 0; border-left: 0; }
.nav__mega--groups .mega__grid { display: flex; flex-direction: column; }
.nav__mega--groups .mega__h { margin: 0 0 6px; }
@media (max-width: 1100px) { .nav__mega.nav__mega--groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .nav__mega--groups .mega__col:nth-child(4) { padding-left: 0; border-left: 0; } }
@media (max-width: 700px) { .nav__mega.nav__mega--groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nav__mega--groups .mega__col { padding-left: 0; border-left: 0; } }
/* keep the six-column panel on screen: it hangs from the whole menu bar, centered */
.nav--simple .nav__in { position: relative; }
.nav--simple .nav__more { position: static; }
.nav--simple .nav__mega.nav__mega--groups, .masthead .nav--simple .nav__mega.nav__mega--groups { left: 0; right: 0; margin: 0 auto; width: min(1080px, calc(100vw - 24px)); }
.nav--simple .nav__links { justify-content: center; }
.ad__spot { right: max(6px, calc(50% - 485px)); }
/* The simple menu breathes: roomier items on desktop, a tidy swipeable row on phones */
@media (min-width: 1200px) {
  .masthead .nav.nav--simple .nav__links > .nav__item > a, .nav.nav--simple .nav__links > .nav__item > a { padding-left: 16px; padding-right: 16px; font-size: 18px; letter-spacing: .02em; }
  .nav.nav--simple .nav__links a.nav__live, .masthead .nav.nav--simple .nav__links a.nav__live { margin: 0 10px !important; padding: 0 20px !important; }
  .nav.nav--simple .nav__links .nav__item--brk { margin-right: 8px; }
}
@media (min-width: 701px) and (max-width: 1199px) {
  .nav.nav--simple .nav__links > .nav__item > a { padding-left: 11px; padding-right: 11px; font-size: 16px; }
}
@media (max-width: 700px) {
  .nav.nav--simple .nav__links { scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 18px; }
  .nav.nav--simple .nav__links > * { scroll-snap-align: start; }
  .nav.nav--simple .nav__links > .nav__item > a { padding: 14px 13px 12px !important; font-size: 17px; }
  .nav.nav--simple .nav__links > .nav__item:not(.nav__item--brk) { background-size: 1px 14px; }
  .nav.nav--simple .nav__links .nav__drop { display: none !important; }
}

/* ---------- Savannah Reed's weather pop-up ---------- */
.wxgirl { position: fixed; right: 0; bottom: 0; z-index: 80; display: flex; align-items: flex-end; gap: 0; pointer-events: none; }
.wxgirl[hidden] { display: none; }
.wxgirl__fig { position: relative; order: 2; height: min(62vh, 560px); aspect-ratio: 423 / 816; margin-right: 10px; transform: translateX(130%); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); }
.wxgirl__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; backface-visibility: hidden; }
.wxgirl__pose { opacity: 0; transform: perspective(900px) rotateY(-80deg); }
.wxgirl.is-walking .wxgirl__fig { animation: wxg-walk 2.3s cubic-bezier(.25, .7, .3, 1) forwards; }
.wxgirl.is-walking .wxgirl__walk { animation: wxg-bob .46s ease-in-out 5; }
.wxgirl.is-posed .wxgirl__walk { opacity: 0; transform: perspective(900px) rotateY(80deg); transition: transform .32s ease-in, opacity .32s ease-in; }
.wxgirl.is-posed .wxgirl__pose { opacity: 1; transform: none; transition: transform .38s cubic-bezier(.2, .8, .3, 1.2) .26s, opacity .2s ease .26s; }
.wxgirl:not(:has(.wxgirl__pose)).is-posed .wxgirl__walk { opacity: 1; transform: none; }
@keyframes wxg-walk { 0% { transform: translateX(130%); } 100% { transform: translateX(0); } }
@keyframes wxg-bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 25% { translate: 0 -6px; rotate: -1.2deg; } 75% { translate: 0 -6px; rotate: 1.2deg; } }
.wxgirl__bubble { position: relative; order: 1; align-self: center; margin-bottom: 18vh; width: min(320px, 70vw); padding: 16px 16px 14px; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 20px 50px rgba(5, 10, 25, .35), 0 0 0 1px rgba(10, 20, 36, .08); pointer-events: auto;
  opacity: 0; transform: translateY(14px) scale(.7); transform-origin: right center; transition: opacity .3s ease, transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.wxgirl__bubble::after { content: ''; position: absolute; right: -10px; top: 46%; border: 10px solid transparent; border-left-color: #fff; border-right: 0; }
.wxgirl.is-talking .wxgirl__bubble { opacity: 1; transform: none; }
.wxgirl__x { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #eef1f5; color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.wxgirl__hi { margin: 0 24px 10px 0; font-size: 16px; line-height: 1.35; }
.wxgirl__hi b { display: block; font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; color: #1f3f8f; }
.wxgirl__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.wxgirl__form[hidden] { display: none; }
.wxgirl__form input { min-width: 0; padding: 10px 12px; border: 2px solid #c5cad2; border-radius: 10px; font: inherit; font-size: 17px; }
.wxgirl__form input:focus { outline: 0; border-color: #1f3f8f; }
.wxgirl__form button { padding: 10px 14px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #e62a38, #b3101c); color: #fff; font: 800 15px var(--display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.wxgirl__now { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px; margin: 4px 0 8px; }
.wxgirl__now span { font-size: 38px; } .wxgirl__now b { font-family: var(--display); font-weight: 800; font-size: 50px; line-height: 1; color: #0a1424; } .wxgirl__now em { font-style: normal; font-size: 14px; color: var(--ink-2); }
.wxgirl__hrs { display: flex; gap: 6px; } .wxgirl__hrs span { flex: 1; display: grid; justify-items: center; padding: 6px 4px; border-radius: 8px; background: #f2f4f7; font-size: 15px; } .wxgirl__hrs small { font-size: 11px; color: var(--muted); } .wxgirl__hrs b { font-family: var(--display); }
.wxgirl__alert { margin: 0 0 8px; padding: 6px 8px; border-radius: 8px; background: #fde8ea; color: #9b0d18; font-size: 13px; font-weight: 600; }
.wxgirl__more { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 0; font-size: 14px; } .wxgirl__more a { font-weight: 700; color: #1f3f8f; }
.wxgirl__chg { border: 0; background: none; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; }
.wxgirl__err { margin: 8px 0 0; color: #9b0d18; font-size: 14px; }
.wxgirl.is-leaving .wxgirl__fig { animation: none; transform: translateX(130%); transition: transform .6s ease-in; }
.wxgirl.is-leaving .wxgirl__bubble { opacity: 0; transform: scale(.8); }
@media (max-width: 700px) {
  .wxgirl { flex-direction: column; align-items: flex-end; }
  .wxgirl__fig { order: 2; height: 42vh; }
  .wxgirl__bubble { order: 1; align-self: flex-end; margin: 0 12px 8px 12px; width: calc(100vw - 24px); transform-origin: bottom right; }
  .wxgirl__bubble::after { right: 40px; top: auto; bottom: -10px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .wxgirl.is-walking .wxgirl__fig { animation: none; transform: none; } .wxgirl.is-walking .wxgirl__walk { animation: none; } }

/* ---------- The Ad Seller program ---------- */
.sl-hero { color: #fff; background: radial-gradient(60% 120% at 100% 0%, rgba(59, 123, 255, .35), transparent 60%), radial-gradient(60% 120% at 0% 100%, rgba(208, 32, 46, .4), transparent 60%), linear-gradient(160deg, #0b1734, #04070f); }
.sl-hero__in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 30px; align-items: center; padding-top: 46px; padding-bottom: 50px; }
.sl-hero h1 { margin: 8px 0 12px; font-family: var(--display); font-weight: 800; font-size: clamp(40px, 5.4vw, 72px); line-height: .95; text-transform: uppercase; }
.sl-hero h1 b { color: #ff3341; }
.sl-hero p { max-width: 620px; font-size: 19px; color: #d5deeb; margin: 0 0 18px; }
.sl-hero__card { display: grid; gap: 4px; padding: 24px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); text-align: center; }
.sl-hero__card span { font: 700 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #9fb0c6; }
.sl-hero__card b { font-family: var(--display); font-weight: 800; font-size: 64px; line-height: 1; color: #fff; }
.sl-hero__card small { color: #cfd9e8; }
.sl-body { display: grid; gap: 30px; }
.sl-ladder { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sl-tier { position: relative; display: grid; gap: 4px; padding: 18px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--rule); border-top: 5px solid var(--t, #b08d57); box-shadow: 0 8px 22px rgba(10, 20, 36, .06); }
.sl-tier--bronze { --t: #b0703c; } .sl-tier--silver { --t: #9aa3af; } .sl-tier--gold { --t: #d4a017; } .sl-tier--platinum { --t: #1f3f8f; }
.sl-tier__name { font: 800 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t); }
.sl-tier b { font-family: var(--display); font-weight: 800; font-size: 52px; line-height: 1; color: var(--ink); }
.sl-tier > span:last-of-type { font-size: 14px; color: var(--ink-2); }
.sl-tier em { position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: 999px; background: var(--t); color: #fff; font: 800 11px var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.sl-tier.is-on { box-shadow: 0 0 0 2px var(--t), 0 14px 30px rgba(10, 20, 36, .15); }
.sl-tier.is-done { opacity: .7; }
.sl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: s; }
.sl-steps li { counter-increment: s; display: grid; gap: 4px; padding: 16px; border-radius: 12px; background: #f6f8fb; }
.sl-steps li::before { content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #d0202e; color: #fff; font: 800 16px var(--display); }
.sl-steps b { font-family: var(--display); font-size: 20px; } .sl-steps span { font-size: 15px; color: var(--ink-2); }
.sl-apply { max-width: 860px; }
.sl-form, .sl-gate { padding: 22px; border-radius: 16px; background: #fff; border: 1px solid var(--rule); box-shadow: 0 10px 28px rgba(10, 20, 36, .06); }
.sl-form h2, .sl-gate h2 { margin: 0 0 12px; font-family: var(--display); font-weight: 800; font-size: 30px; text-transform: uppercase; }
.sl-dash { display: grid; gap: 18px; }
.sl-dash__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sl-dash__head h1 { margin: 4px 0; font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4vw, 48px); text-transform: uppercase; }
.sl-top { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 14px; }
.sl-top__tier { display: grid; align-content: center; gap: 6px; padding: 18px; border-radius: 14px; color: #fff; background: linear-gradient(160deg, #0b1734, #04070f); border-top: 5px solid var(--t); }
.sl-top__tier span { font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #9fb0c6; }
.sl-top__tier b { font-family: var(--display); font-weight: 800; font-size: 30px; }
.sl-top__tier small { color: #cfd9e8; }
.sl-prog { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .12); overflow: hidden; } .sl-prog i { display: block; height: 100%; background: var(--t); }
.sl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sl-stat { display: grid; gap: 2px; padding: 14px; border-radius: 12px; background: #fff; border: 1px solid var(--rule); }
.sl-stat span { font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sl-stat b { font-family: var(--display); font-weight: 800; font-size: 28px; color: var(--ink); } .sl-stat small { font-size: 12px; color: var(--muted); }
.sl-link { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .sl-link input { flex: 1 1 260px; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: 8px; font: inherit; }
.sl-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #eef1f5; font-size: 12px; font-weight: 700; }
.sl-pill--live, .sl-pill--paid { background: #e3f6ea; color: #1f7a4a; } .sl-pill--requested, .sl-pill--review, .sl-pill--signed { background: #fff4d6; color: #8a6100; } .sl-pill--declined, .sl-pill--canceled, .sl-pill--cancelled { background: #fde8ea; color: #9b0d18; }
.sl-pos { color: #1f7a4a; } .sl-neg { color: #9b0d18; }
.sl-rep { max-width: 720px; } .sl-rep__card { padding: 30px; border-radius: 18px; background: #fff; border: 1px solid var(--rule); box-shadow: 0 14px 34px rgba(10, 20, 36, .08); }
.sl-rep__card h1 { margin: 6px 0; font-family: var(--display); font-weight: 800; font-size: 44px; text-transform: uppercase; }
@media (max-width: 900px) { .sl-hero__in, .sl-top { grid-template-columns: 1fr; } .sl-ladder, .sl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Raffles ---------- */
:root { --gold: #f2c14e; --gold-2: #ffd977; }
.rfl-kicker { display: inline-block; font-family: var(--mono); font-weight: 800; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.rfl-go { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 50px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, #ff2d3d 0%, #c8102e 60%, #9e0c24 100%); box-shadow: 0 0 0 3px rgba(242,193,78,.28), 0 12px 28px rgba(200,16,46,.42); transition: transform .15s, box-shadow .15s; }
.rfl-go:hover { color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(242,193,78,.45), 0 16px 34px rgba(200,16,46,.5); }
.rfl-go:disabled { opacity: .7; cursor: wait; }
.rfl-go--sm { min-height: 42px; padding: 0 20px; font-size: 16px; white-space: nowrap; }
.rfl-fine { margin: 10px 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--muted); }
.rfl-fine a { color: inherit; text-decoration: underline; }
.rfl-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rfl-empty { font-family: var(--mono); color: var(--muted); }

.rfl-page { max-width: 1180px; margin: 0 auto; padding: 22px 32px 50px; }
.rfl-hero { position: relative; overflow: hidden; text-align: center; padding: 64px 28px 56px; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, #1c3a7a 0%, #0d1f4d 45%, #060b16 100%); box-shadow: 0 30px 60px rgba(6,11,22,.35), inset 0 0 0 1px rgba(242,193,78,.25); }
.rfl-hero__stars { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(2px 2px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 72% 16%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 86% 64%, var(--gold) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 30% 78%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 54% 40%, var(--gold) 50%, transparent 51%), radial-gradient(1px 1px at 8% 60%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 94% 30%, #fff 50%, transparent 51%); }
.rfl-hero h1 { position: relative; margin: 12px auto 14px; max-width: 820px; font-family: var(--display); font-weight: 700; font-size: clamp(36px, 6vw, 68px); line-height: .98; letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 6px 30px rgba(59,123,255,.45); }
.rfl-hero p { position: relative; margin: 0 auto 26px; max-width: 640px; font-size: 18px; line-height: 1.6; color: #cdd6e6; }
.rfl-steps { list-style: none; margin: 28px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rfl-steps li { position: relative; padding: 20px 18px 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--rule); }
.rfl-steps b { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--night); color: var(--gold); font-family: var(--display); font-size: 19px; box-shadow: 0 0 0 3px rgba(242,193,78,.35); }
.rfl-steps h3 { margin: 10px 0 4px; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .03em; text-transform: uppercase; }
.rfl-steps p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.rfl-h2 { display: flex; align-items: center; gap: 10px; margin: 34px 0 14px; font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: .04em; text-transform: uppercase; }
.rfl-h2 span { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--red); color: #fff; font-size: 16px; }
.rfl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px; }
.rfl-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid var(--rule); box-shadow: 0 14px 34px rgba(10,20,36,.08); transition: transform .2s, box-shadow .2s; }
.rfl-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(10,20,36,.16); }
.rfl-card.is-in { border-color: rgba(43,212,107,.6); }
.rfl-card__pic { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: radial-gradient(circle at 50% 40%, #1c3a7a, #060b16); overflow: hidden; }
.rfl-card__pic img { width: 100%; height: 100%; object-fit: cover; }
.rfl-card__tix { font-size: 80px; filter: drop-shadow(0 10px 24px rgba(242,193,78,.5)); }
.rfl-card__in { position: absolute; left: 12px; top: 12px; padding: 5px 12px; border-radius: 999px; background: #15803d; color: #fff; font-family: var(--mono); font-size: 12px; font-weight: 800; }
.rfl-card__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; flex: 1; }
.rfl-card__body .rfl-kicker { color: var(--red-text); }
.rfl-card h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.02; text-transform: uppercase; }
.rfl-card__prize { margin: 0; font-weight: 600; }
.rfl-card__when { margin: 0 0 8px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.rfl-card .rfl-go { margin-top: auto; align-self: flex-start; }
.rfl-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.rfl-box .rfl-h2 { margin-top: 30px; }
.rfl-rules { margin: 0; font-family: var(--mono); font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.rfl-winners { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rfl-winners li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--panel); font-family: var(--mono); font-size: 14px; }
.rfl-winners li span:last-child { margin-left: auto; color: var(--muted); font-size: 12.5px; text-align: right; }
.rfl-crumb { margin: 0 0 14px; font-family: var(--mono); font-size: 13px; }
.rfl-one { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 34px; align-items: start; padding: 26px; border-radius: 24px; color: #fff;
  background: radial-gradient(120% 100% at 0% 0%, #1c3a7a 0%, #0d1f4d 40%, #060b16 100%); box-shadow: 0 30px 60px rgba(6,11,22,.35), inset 0 0 0 1px rgba(242,193,78,.25); }
.rfl-one__pic { position: relative; display: grid; place-items: center; min-height: 320px; border-radius: 18px; overflow: hidden; background: #060b16; box-shadow: 0 0 0 2px rgba(242,193,78,.5), 0 0 60px rgba(242,193,78,.25); }
.rfl-one__pic img { width: 100%; height: 100%; object-fit: cover; }
.rfl-ribbon { position: absolute; top: 30px; right: -62px; transform: rotate(35deg); padding: 7px 72px; background: var(--gold); color: #1a1205; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.rfl-one__main .rfl-kicker { color: var(--gold); }
.rfl-one h1 { margin: 8px 0 8px; font-family: var(--display); font-weight: 700; font-size: clamp(34px, 4.5vw, 54px); line-height: .98; text-transform: uppercase; }
.rfl-one__prize { margin: 0 0 10px; font-size: 20px; font-weight: 600; color: var(--gold-2); }
.rfl-one__desc { margin: 0 0 16px; color: #cdd6e6; line-height: 1.6; }
.rfl-one__n { margin: 10px 0 16px; font-family: var(--mono); font-size: 13px; color: #93a2bd; }
.rfl-clock { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 16px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(242,193,78,.35); font-family: var(--mono); }
.rfl-clock span { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: #93a2bd; }
.rfl-clock b { font-family: var(--display); font-size: 22px; letter-spacing: .03em; color: #fff; }
.rfl-clock em { font-style: normal; color: var(--gold); font-weight: 700; font-size: 14px; }
.rfl-form { display: grid; gap: 12px; }
.rfl-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rfl-form .field { margin: 0; }
.rfl-form label { color: #dfe6f2; font-family: var(--mono); font-size: 13px; font-weight: 700; }
.rfl-form label small { font-weight: 500; color: #93a2bd; }
.rfl-form input[type=email], .rfl-form input:not([type]), .rfl-form input[type=text] { width: 100%; min-height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.96); color: var(--ink); font: 16px/1.3 var(--mono); }
.rfl-form .rfl-go { width: 100%; }
.rfl-one .rfl-fine, .rflpop .rfl-fine { color: #93a2bd; }
.rfl-sent, .rfl-unlock { padding: 24px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); text-align: center; }
.rfl-sent > span { font-size: 54px; }
.rfl-sent h2, .rfl-unlock h2 { margin: 6px 0 8px; font-family: var(--display); font-weight: 700; font-size: 34px; text-transform: uppercase; }
.rfl-sent p, .rfl-unlock p { margin: 0 0 10px; color: #cdd6e6; line-height: 1.55; }
.rfl-sent--won { border-color: rgba(242,193,78,.6); background: rgba(242,193,78,.12); margin-bottom: 14px; }
.rfl-unlock { border-color: rgba(43,212,107,.55); background: linear-gradient(180deg, rgba(43,212,107,.14), rgba(255,255,255,.04)); }
.rfl-unlock.is-new { animation: rfl-glow 2.4s ease-in-out 3; }
.rfl-unlock__lock { display: block; font-size: 58px; line-height: 1; filter: drop-shadow(0 8px 22px rgba(43,212,107,.6)); }
.rfl-unlock.is-new .rfl-unlock__lock { animation: rfl-pop .8s cubic-bezier(.2,1.6,.4,1) both; }
.rfl-unlock .rfl-kicker { color: #2bd46b; }
.rfl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 16px; }
.rfl-stats div { padding: 12px 6px; border-radius: 14px; background: rgba(6,11,22,.45); }
.rfl-stats b { display: block; font-family: var(--display); font-size: 32px; line-height: 1; color: #fff; }
.rfl-stats span { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #93a2bd; }
.rfl-unlock__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 0 !important; }
.rfl-unlock__links .btn--ghost { color: #fff; border-color: rgba(255,255,255,.35); min-height: 42px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; }
@keyframes rfl-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(43,212,107,0); } 50% { box-shadow: 0 0 0 6px rgba(43,212,107,.25), 0 0 50px rgba(43,212,107,.35); } }
@keyframes rfl-pop { from { transform: scale(.3) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* confetti */
.rfl-confetti { position: fixed; inset: 0; z-index: 120; pointer-events: none; overflow: hidden; }
.rfl-confetti i { position: absolute; top: -20px; width: 9px; height: 15px; border-radius: 2px; animation: rfl-fall linear forwards; }
@keyframes rfl-fall { to { transform: translate(var(--x), 110vh) rotate(var(--r)); opacity: .9; } }

/* the pop-up */
.rflpop { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; }
.rflpop__bg { position: absolute; inset: 0; background: rgba(4,8,16,.72); backdrop-filter: blur(4px); opacity: 0; transition: opacity .35s; }
.rflpop__card { position: relative; width: min(470px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 24px; color: #fff; text-align: center; padding: 22px 26px 22px;
  background: radial-gradient(120% 80% at 50% 0%, #1c3a7a 0%, #0d1f4d 45%, #060b16 100%); box-shadow: 0 40px 90px rgba(0,0,0,.55), inset 0 0 0 1px rgba(242,193,78,.4);
  opacity: 0; transform: translateY(30px) scale(.94); transition: opacity .35s, transform .45s cubic-bezier(.2,1.3,.4,1); }
.rflpop.is-on .rflpop__bg { opacity: 1; }
.rflpop.is-on .rflpop__card { opacity: 1; transform: none; }
.rflpop__x { position: absolute; top: 10px; right: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.rflpop__x:hover { background: rgba(255,255,255,.2); }
.rflpop__stars { color: var(--gold); letter-spacing: .3em; font-size: 13px; }
.rflpop__pic { position: relative; margin: 12px auto 14px; width: min(250px, 70%); aspect-ratio: 1; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 2px rgba(242,193,78,.55), 0 0 50px rgba(242,193,78,.35); animation: rfl-float 4s ease-in-out infinite; }
.rflpop__pic img { width: 100%; height: 100%; object-fit: cover; }
.rflpop__pic span { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: var(--gold); color: #1a1205; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.rflpop__tix { margin: 8px 0 4px; font-size: 76px; line-height: 1.1; animation: rfl-float 4s ease-in-out infinite; filter: drop-shadow(0 10px 24px rgba(242,193,78,.5)); }
.rflpop h2 { margin: 8px 0 8px; font-family: var(--display); font-weight: 700; font-size: clamp(28px, 7vw, 38px); line-height: 1; text-transform: uppercase; }
.rflpop__body > p { margin: 0 0 16px; color: #cdd6e6; font-size: 16px; line-height: 1.55; }
.rflpop .rfl-form input { min-height: 48px; }
.rfl-err { margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(208,32,46,.2); color: #ffd1d4; font-family: var(--mono); font-size: 13px; }
.rfl-no { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
.rflpop__done { padding: 8px 0 4px; }
.rflpop__big { display: block; font-size: 64px; line-height: 1.1; animation: rfl-pop .8s cubic-bezier(.2,1.6,.4,1) both; }
.rflpop__done p { color: #cdd6e6; line-height: 1.55; margin: 0 0 16px; }
@keyframes rfl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* banners scattered around the site */
.rfl-slot { margin: 26px 0; }
.rfl-slot--inline { margin: 26px 0; }
.rflb__lab { margin: 0 0 4px; text-align: right; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rflb { position: relative; display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 18px; color: #fff; overflow: hidden; text-decoration: none;
  background: radial-gradient(120% 140% at 0% 0%, #1c3a7a 0%, #0d1f4d 45%, #060b16 100%); box-shadow: 0 16px 40px rgba(6,11,22,.25), inset 0 0 0 1px rgba(242,193,78,.35); }
.rflb:hover { color: #fff; text-decoration: none; }
.rflb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.12) 45%, transparent 60%); transform: translateX(-100%); animation: rfl-shine 5s ease-in-out infinite; pointer-events: none; }
@keyframes rfl-shine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.rflb__txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.rflb__txt b { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.02; text-transform: uppercase; }
.rflb__txt em { font-style: normal; font-family: var(--mono); font-size: 13.5px; color: #cdd6e6; }
.rflb__stars { color: var(--gold); font-size: 26px; letter-spacing: .1em; text-shadow: 0 0 18px rgba(242,193,78,.6); }
.rflb--split { padding: 0 22px 0 0; }
.rflb__pic { flex: 0 0 auto; display: grid; place-items: center; width: 170px; align-self: stretch; min-height: 130px; background: #060b16; }
.rflb__pic img { width: 100%; height: 100%; object-fit: cover; }
.rflb__tix { font-size: 56px; }
.rflb--ticket { background: linear-gradient(110deg, #f6d47a 0%, #f2c14e 40%, #d99a1e 100%); color: #1a1205; box-shadow: 0 16px 40px rgba(217,154,30,.35); padding-left: 0; }
.rflb--ticket .rfl-kicker { color: #7a2b00; }
.rflb--ticket .rflb__txt em { color: #4a3305; }
.rflb__stub { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: stretch; width: 86px; border-right: 3px dashed rgba(26,18,5,.45); font-family: var(--display); font-size: 20px; letter-spacing: .14em; color: #7a2b00; }
.rflb--in { background: linear-gradient(100deg, #0d3b23 0%, #0d1f4d 100%); box-shadow: inset 0 0 0 1px rgba(43,212,107,.45); padding: 14px 20px; }
.rflb--in .rflb__txt b { font-size: 20px; }
.rflb__ico { font-size: 34px; }
.rflb__cta { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: #2bd46b; white-space: nowrap; }

@media (max-width: 900px) {
  .rfl-steps { grid-template-columns: 1fr 1fr; }
  .rfl-one { grid-template-columns: 1fr; padding: 18px; gap: 20px; }
  .rfl-one__pic { min-height: 0; aspect-ratio: 4 / 3; }
  .rfl-two { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 640px) {
  .rfl-page { padding: 14px 16px 40px; }
  .rfl-hero { padding: 44px 18px 40px; border-radius: 18px; }
  .rfl-steps { grid-template-columns: 1fr; }
  .rfl-form__row { grid-template-columns: 1fr; }
  .rflpop .rfl-form__row { grid-template-columns: 1fr 1fr; }
  .rflpop { place-items: end center; padding: 0; }
  .rflpop__card { border-radius: 22px 22px 0 0; max-height: 92vh; padding: 18px 18px 22px; }
  .rflpop__pic { width: 46%; margin: 8px auto 10px; }
  .rflb { flex-wrap: wrap; gap: 10px 14px; padding: 16px; }
  .rflb .rfl-go { width: 100%; }
  .rflb--split { padding: 0 0 16px; }
  .rflb--split .rflb__pic { width: 100%; min-height: 150px; aspect-ratio: 16 / 9; }
  .rflb--split .rflb__txt, .rflb--split .rfl-go { margin: 0 16px; }
  .rflb--split .rfl-go { width: calc(100% - 32px); }
  .rflb--ticket .rflb__stub { width: 64px; font-size: 16px; }
  .rflb--ticket .rfl-go { margin-left: 0; }
  .rflb--in .rflb__cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .rflb::after, .rflpop__pic, .rflpop__tix { animation: none; } .rflpop__card { transition: opacity .2s; } }

/* ---------- Phones: bigger titles and text ---------- */
@media (max-width: 700px) {
  body { font-size: 18px; }
  .slide__title, .slide__title--l, .slide__title--xl { max-width: none; -webkit-line-clamp: 4; line-clamp: 4; line-height: .98; }
  .slide__title { font-size: 36px; }
  .slide__title--l { font-size: 33px; }
  .slide__title--xl { font-size: 30px; }
  .slide__meta { font-size: 15px; }
  .slide__dek { font-size: 17px; }
  .meta { font-size: 14.5px; }
  .hl__title, .hl--ours .hl__title { font-size: 24px; line-height: 1.12; }
  .lead__title { font-size: 34px; }
  .article__title { font-size: 36px; }
  .prose { font-size: 19.5px; line-height: 1.65; }
  .card3__title { font-size: 22px; }
  .trend__text strong { font-size: 21px; }
  .ocard__title, .ocard--big .ocard__title { font-size: 26px; }
  .ranked a { font-size: 21px; }
  .row__text strong { font-size: 19px; }
  .sechead { font-size: 32px; }
  .colhead { font-size: 23px; }
  .dcard__head h2 { font-size: 23px; }
  .dcard__lead strong { font-size: 23px; }
  .dcard__list a { font-size: 19px; line-height: 1.22; }
  .lvx-most a { font-size: 19px; }
  .lvx-col__head h2 { font-size: 23px; }
  .tracker__head h2 { font-size: 26px; }
  .tracker__meta, .tracker__by { font-size: 15.5px; }
  .tracker-up { font-size: 16.5px; }
  .bio__story p { font-size: 20px; }
}

/* ---------- The welcome window ---------- */
.wlc { z-index: 200; background: rgba(2, 4, 10, .78); }
.wlc .wlc__box { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 0; border-radius: 22px; text-align: center; animation: none;
  background: radial-gradient(90% 55% at 50% 0%, rgba(255, 31, 45, .38), transparent 70%), radial-gradient(70% 50% at 50% 100%, rgba(47, 123, 255, .35), transparent 70%), linear-gradient(175deg, #0d1f4d 0%, #071029 55%, #03060f 100%);
  box-shadow: 0 0 0 1px rgba(242, 193, 78, .45), 0 0 0 6px rgba(208, 32, 46, .18), 0 40px 100px rgba(0, 0, 0, .7), 0 0 80px rgba(47, 123, 255, .25);
  opacity: 0; transform: translateY(24px) scale(.94); transition: opacity .4s, transform .55s cubic-bezier(.2, 1.3, .4, 1); }
.wlc.is-on .wlc__box { opacity: 1; transform: none; }
.wlc__box::before { content: ''; position: absolute; inset: 0; background: var(--wlc-img) center bottom / cover no-repeat; opacity: .22; mix-blend-mode: screen; pointer-events: none; }
.wlc__box::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #b22234 0 33%, #fff 33% 66%, #1f3f8f 66%); }
.wlc__sky { position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: radial-gradient(1.6px 1.6px at 10% 18%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 78% 12%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 88% 40%, #f2c14e 50%, transparent 51%), radial-gradient(1.2px 1.2px at 24% 52%, #fff 50%, transparent 51%), radial-gradient(1.6px 1.6px at 62% 30%, #f2c14e 50%, transparent 51%), radial-gradient(1px 1px at 40% 8%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 94% 70%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 6% 78%, #fff 50%, transparent 51%); }
.wlc__beam { position: absolute; left: 50%; bottom: -40%; width: 140%; height: 140%; transform: translateX(-50%); pointer-events: none; opacity: .5;
  background: conic-gradient(from 180deg at 50% 100%, transparent 0deg 158deg, rgba(160, 200, 255, .22) 166deg, transparent 174deg 186deg, rgba(160, 200, 255, .22) 194deg, transparent 202deg); animation: wlc-sweep 9s ease-in-out infinite alternate; }
@keyframes wlc-sweep { from { transform: translateX(-50%) rotate(-7deg); } to { transform: translateX(-50%) rotate(7deg); } }
.wlc .join-modal__x { z-index: 3; color: #fff; top: 12px; right: 12px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.wlc__in { position: relative; z-index: 2; padding: 30px 32px 22px; }
.wlc .wlc__mark { width: 104px; height: 104px; margin: 0 auto 4px; filter: drop-shadow(0 0 22px rgba(90, 150, 255, .85)) drop-shadow(0 0 4px rgba(242, 193, 78, .6)); animation: wlc-ring 3.2s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes wlc-ring { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-7deg); } 84% { transform: rotate(6deg); } 92% { transform: rotate(-3deg); } }
.wlc__verse { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 12px !important; font-family: 'Source Serif 4', Georgia, serif !important; font-style: italic; font-size: 15px !important; letter-spacing: .02em; color: #f2c14e !important; }
.wlc__verse::before, .wlc__verse::after { content: ''; flex: 0 0 34px; height: 1px; background: linear-gradient(90deg, transparent, #f2c14e); }
.wlc__verse::after { transform: scaleX(-1); }
.wlc__kicker { display: inline-block; padding: 5px 14px; border-radius: 999px; background: linear-gradient(180deg, #ff2d3d, #c8102e); box-shadow: 0 6px 18px rgba(200, 16, 46, .45); font: 800 13px var(--display); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.wlc h2 { margin: 12px 0 10px; font-family: var(--display); font-weight: 800; font-size: clamp(36px, 8vw, 50px); line-height: .94; text-transform: uppercase; letter-spacing: .005em; color: #fff; text-shadow: 0 0 30px rgba(59, 123, 255, .55), 0 3px 0 rgba(0, 0, 0, .4); }
.wlc .wlc__lede { max-width: 420px; margin: 0 auto 18px; font-size: 16.5px; line-height: 1.55; color: #dfe6f2; }
.wlc .wlc__lede b { color: #fff; }
.wlc__form { display: flex; gap: 8px; max-width: 440px; margin: 0 auto; }
.wlc__form input { flex: 1; min-width: 0; min-height: 54px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .97); color: var(--ink); font: 16px var(--mono); }
.wlc__go { flex: none; min-height: 54px; padding: 0 22px; border: 0; border-radius: 12px; cursor: pointer; font: 800 19px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, #ff2d3d 0%, #c8102e 60%, #9e0c24 100%); box-shadow: 0 0 0 3px rgba(242, 193, 78, .3), 0 12px 28px rgba(200, 16, 46, .5); transition: transform .15s, box-shadow .15s; }
.wlc__go:hover { transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(242, 193, 78, .5), 0 16px 34px rgba(200, 16, 46, .6); }
.wlc__later { display: inline-block; margin: 12px auto 0; padding: 10px 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .04); color: #e6ebf2; cursor: pointer; font: 700 15px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.wlc__later:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.wlc__perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.wlc__perks li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); font: 13.5px var(--mono); color: #dfe6f2; }
.wlc .wlc__fine { margin: 14px 0 0; font-size: 12px; color: #93a2bd; }
@media (max-width: 640px) {
  .wlc { place-items: end center; padding: 0; }
  .wlc .wlc__box { border-radius: 22px 22px 0 0; max-height: 94vh; }
  .wlc__in { padding: 24px 18px calc(18px + env(safe-area-inset-bottom)); }
  .wlc .wlc__mark { width: 78px; height: 78px; }
  .wlc__form { flex-direction: column; }
  .wlc__go { width: 100%; }
  .wlc__later { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .wlc__beam, .wlc .wlc__mark { animation: none; } }

/* ---------- The raffle entry window (opens when a reader taps the raffle banner) ---------- */
.rflpop__card { overflow: hidden auto; background: radial-gradient(90% 60% at 50% 0%, rgba(242, 193, 78, .28), transparent 65%), radial-gradient(80% 50% at 50% 100%, rgba(208, 32, 46, .3), transparent 70%), linear-gradient(175deg, #0d1f4d 0%, #071029 60%, #03060f 100%);
  box-shadow: 0 0 0 1px rgba(242, 193, 78, .6), 0 0 0 6px rgba(242, 193, 78, .14), 0 40px 100px rgba(0, 0, 0, .65), 0 0 90px rgba(242, 193, 78, .22); }
.rflpop__card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #b22234 0 33%, #fff 33% 66%, #1f3f8f 66%); }
.rflpop__sky { position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: radial-gradient(1.6px 1.6px at 12% 20%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 80% 10%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 90% 44%, #f2c14e 50%, transparent 51%), radial-gradient(1.2px 1.2px at 20% 60%, #fff 50%, transparent 51%), radial-gradient(1.6px 1.6px at 60% 26%, #f2c14e 50%, transparent 51%), radial-gradient(1px 1px at 44% 6%, #fff 50%, transparent 51%); }
.rflpop__card > *:not(.rflpop__sky) { position: relative; }
.rflpop__x { position: absolute !important; z-index: 3; }
.rflpop__verse { margin: 8px 0 6px; font-family: 'Source Serif 4', Georgia, serif; font-style: italic; font-size: 14px; color: var(--gold); }
.rflpop__ticket { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin: 10px auto 14px; width: 220px; height: 104px; border-radius: 12px;
  background: linear-gradient(110deg, #f6d47a 0%, #f2c14e 45%, #d99a1e 100%); color: #5a2a00; box-shadow: 0 16px 40px rgba(217, 154, 30, .45), inset 0 0 0 3px rgba(255, 255, 255, .35), inset 0 0 0 6px rgba(122, 43, 0, .25);
  -webkit-mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; animation: rfl-float 4s ease-in-out infinite; }
.rflpop__ticket b { font: 800 34px/1 var(--display); letter-spacing: .14em; }
.rflpop__ticket i { font: 700 13px var(--display); font-style: normal; letter-spacing: .24em; }
.rflpop h2 { font-size: clamp(34px, 8vw, 46px); text-shadow: 0 0 30px rgba(242, 193, 78, .45); }
.rflpop__prize { margin: 0 0 10px !important; font-family: var(--display); font-weight: 700; font-size: 22px !important; letter-spacing: .03em; text-transform: uppercase; color: var(--gold-2) !important; }
.rflpop .rfl-kicker { color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .rflpop__ticket { animation: none; } }

/* ---------- The small raffle banner (one per page) ---------- */
.rfl-slot { margin: 18px 0; }
.rflx { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 8px 6px 12px; border-radius: 12px; background: linear-gradient(90deg, #0d1f4d, #0a1424); border: 1px solid rgba(242, 193, 78, .45); color: #dfe6f2; font-family: var(--mono); font-size: 14px; line-height: 1.35; box-shadow: 0 6px 18px rgba(10, 20, 36, .12); }
.rflx__tix { font-size: 20px; flex: none; }
.rflx__txt { flex: 1; min-width: 0; }
.rflx__txt b { color: #fff; font-weight: 700; }
.rflx__go { flex: none; padding: 7px 14px; border-radius: 999px; background: linear-gradient(180deg, #ff2d3d, #c8102e); color: #fff !important; font: 700 14px var(--display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; }
.rflx__go:hover { filter: brightness(1.1); }
.rflx--in { border-color: rgba(43, 212, 107, .5); }
.rflx--in .rflx__go { background: none; border: 1px solid rgba(43, 212, 107, .6); color: #2bd46b !important; }
.rflx__x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #93a2bd; font-size: 18px; line-height: 1; cursor: pointer; }
.rflx__x:hover { background: rgba(255, 255, 255, .1); color: #fff; }
@media (max-width: 640px) { .rflx { font-size: 13.5px; flex-wrap: wrap; padding: 8px 8px 8px 12px; } .rflx__txt { flex-basis: calc(100% - 70px); } .rflx__go { margin-left: 30px; } }

/* ---------- Anchor live chat ---------- */
.acx-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff2d3d; box-shadow: 0 0 0 0 rgba(255, 45, 61, .7); animation: acx-pulse 1.6s infinite; }
@keyframes acx-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 45, 61, .7); } 70% { box-shadow: 0 0 0 9px rgba(255, 45, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 45, 61, 0); } }
.acx-ini { display: grid; place-items: center; background: linear-gradient(160deg, #1f3f8f, #0a1424); color: #fff; font: 800 18px var(--display); }
.acx-face { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.acx-onair { display: inline-flex; align-items: center; gap: 6px; font: 800 11.5px var(--display); letter-spacing: .18em; text-transform: uppercase; color: #ff4b55; }
.acx-launch { position: fixed; left: 16px; bottom: 16px; z-index: 75; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 0; border-radius: 999px; cursor: pointer; text-align: left; color: #fff;
  background: linear-gradient(180deg, #0f1d3a, #060b16); box-shadow: 0 0 0 1px rgba(255, 75, 85, .55), 0 14px 34px rgba(0, 0, 0, .4); opacity: 0; transform: translateY(20px); transition: opacity .4s, transform .4s, box-shadow .2s; }
.acx-launch.is-on { opacity: 1; transform: none; }
.acx-launch.is-hidden { opacity: 0; pointer-events: none; transform: translateY(20px); }
.acx-launch:hover { box-shadow: 0 0 0 2px rgba(255, 75, 85, .8), 0 16px 40px rgba(0, 0, 0, .45); }
.acx-launch__face { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 2px #ff2d3d; }
.acx-launch__face .acx-ini { width: 100%; height: 100%; border-radius: 50%; }
.acx-launch__face .acx-dot { position: absolute; right: -1px; bottom: 1px; width: 12px; height: 12px; border: 2px solid #060b16; }
.acx-launch__txt { display: flex; flex-direction: column; line-height: 1.1; }
.acx-launch__txt b { font: 800 11.5px var(--display); letter-spacing: .2em; text-transform: uppercase; color: #ff4b55; }
.acx-launch__txt span { font: 700 16px var(--display); letter-spacing: .02em; }
.acx-launch__cta { margin-left: 4px; padding: 6px 12px; border-radius: 999px; background: linear-gradient(180deg, #ff2d3d, #c8102e); font: 800 13px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.acx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; color: #fff !important; text-decoration: none !important;
  background: linear-gradient(180deg, #ff2d3d 0%, #c8102e 60%, #9e0c24 100%); box-shadow: 0 8px 20px rgba(200, 16, 46, .45); font: 800 15px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.acx-link { background: none; border: 0; color: #b7c2d3; cursor: pointer; font: 600 14px var(--mono); text-decoration: underline; }
/* the "hey" */
.acx-hey { position: fixed; left: 16px; bottom: 20px; z-index: 76; width: min(340px, calc(100vw - 32px)); padding: 16px 16px 14px; border-radius: 18px 18px 18px 4px; color: #fff;
  background: radial-gradient(90% 60% at 0% 0%, rgba(255, 31, 45, .3), transparent 70%), linear-gradient(170deg, #0d1f4d, #050914); box-shadow: 0 0 0 1px rgba(255, 75, 85, .5), 0 24px 60px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(16px) scale(.95); transform-origin: 0 100%; transition: opacity .35s, transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.acx-hey.is-on { opacity: 1; transform: none; }
.acx-hey__x { position: absolute; top: 6px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #b7c2d3; font-size: 20px; cursor: pointer; }
.acx-hey__top { display: flex; align-items: center; gap: 12px; }
.acx-hey__face { flex: none; width: 58px; height: 58px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #ff2d3d, 0 0 20px rgba(255, 45, 61, .5); }
.acx-hey__name { display: block; font: 800 20px/1.05 var(--display); text-transform: uppercase; }
.acx-hey__show { font: 13px var(--mono); color: #b7c2d3; }
.acx-hey__say { margin: 12px 0 12px; font: 16px/1.5 var(--mono); color: #e6ebf2; }
.acx-hey__go { display: flex; align-items: center; gap: 14px; }
/* the chat */
.acx-panel { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; width: min(390px, calc(100vw - 32px)); height: min(600px, calc(100vh - 32px)); border-radius: 20px; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, #0a1424, #050914); box-shadow: 0 0 0 1px rgba(255, 75, 85, .45), 0 30px 80px rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transform: translateY(24px) scale(.97); transform-origin: 0 100%; transition: opacity .3s, transform .4s cubic-bezier(.2, 1.3, .4, 1); }
.acx-panel.is-open { opacity: 1; pointer-events: auto; transform: none; }
.acx-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 14px 14px; background: radial-gradient(100% 120% at 0% 0%, rgba(255, 31, 45, .45), transparent 60%), linear-gradient(170deg, #13285c, #0a1424); }
.acx-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #b22234 0 33%, #fff 33% 66%, #1f3f8f 66%); }
.acx-head__face { position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 2px #ff2d3d, 0 0 22px rgba(255, 45, 61, .5); }
.acx-head__face .acx-ini { width: 100%; height: 100%; border-radius: 50%; }
.acx-head__face .acx-dot { position: absolute; right: 0; bottom: 2px; width: 13px; height: 13px; border: 2px solid #0a1424; }
.acx-head__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.acx-head__who a { color: #fff; text-decoration: none; }
.acx-head__who b { font: 800 22px/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.acx-head__who > span:last-child { font: 12.5px var(--mono); color: #b7c2d3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acx-close { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 22px; cursor: pointer; }
.acx-label { margin: 0; padding: 6px 14px; background: rgba(242, 193, 78, .1); border-bottom: 1px solid rgba(242, 193, 78, .25); font: 12px var(--mono); color: #f2c14e; text-align: center; }
.acx-log { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.acx-m { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }
.acx-m p { margin: 0; padding: 10px 13px; border-radius: 16px; font: 15.5px/1.45 var(--mono); }
.acx-m--anchor p { background: #16264a; border-bottom-left-radius: 4px; color: #eef2f8; }
.acx-m--reader { align-self: flex-end; }
.acx-m--reader p { background: linear-gradient(180deg, #e0101f, #b50d1c); border-bottom-right-radius: 4px; color: #fff; }
.acx-m.is-new { animation: acx-in .35s ease-out; }
.acx-m.is-err p { background: #3a1a22; }
@keyframes acx-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.acx-m__face { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; font-size: 11px; }
.acx-typing p { display: inline-flex; gap: 4px; padding: 13px 14px; }
.acx-typing i { width: 7px; height: 7px; border-radius: 50%; background: #93a2bd; animation: acx-dots 1.2s infinite; }
.acx-typing i:nth-child(2) { animation-delay: .15s; } .acx-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes acx-dots { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.acx-cta { align-self: center; }
.acx-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 10px 6px; border-top: 1px solid rgba(255, 255, 255, .08); }
.acx-form textarea { flex: 1; min-height: 44px; max-height: 110px; padding: 11px 14px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff; font: 16px/1.35 var(--mono); resize: none; }
.acx-form textarea::placeholder { color: #8391a8; }
.acx-send { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; color: #fff; font-size: 17px; background: linear-gradient(180deg, #ff2d3d, #c8102e); box-shadow: 0 6px 16px rgba(200, 16, 46, .45); }
.acx-fine { margin: 0; padding: 0 14px 10px; font: 11px/1.4 var(--mono); color: #7d8aa1; }
@media (max-width: 700px) {
  .acx-launch { left: 10px; bottom: calc(74px + env(safe-area-inset-bottom)); padding: 4px 6px 4px 4px; gap: 8px; }
  .acx-launch__face { width: 42px; height: 42px; }
  .acx-launch__txt span { font-size: 15px; }
  .acx-launch__cta { display: none; }
  .acx-hey { left: 10px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  .acx-panel { left: 0; right: 0; bottom: 0; width: 100%; height: 88vh; height: 88dvh; border-radius: 20px 20px 0 0; }
  .acx-fine { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .acx-dot { animation: none; } }
@media (max-width: 700px) {
  .acx-launch__txt span { display: none; }
  .acx-launch { padding-right: 12px; }
  .wlc__verse { font-size: 13px !important; }
  .wlc__verse::before, .wlc__verse::after { flex-basis: 18px; }
}

/* Weather page on phones: Savannah's poster small beside the title, the stats underneath */
@media (max-width: 700px) {
  .wx-hero__in { grid-template-columns: 108px minmax(0, 1fr); grid-auto-rows: auto; gap: 8px 16px; align-items: center; padding-top: 18px; padding-bottom: 22px; }
  .wx-hero__poster { width: 108px; grid-column: 1; grid-row: 1 / span 3; align-self: center; }
  .wx-hero__poster .poster__art { box-shadow: 0 0 0 2px #020611, 0 0 0 3px #2fb4ff, 0 0 24px rgba(47, 180, 255, .4); }
  .wx-hero__text { display: contents; }
  .wx-hero__text > * { grid-column: 1 / -1; }
  .wx-hero__text > .wx-live { grid-column: 2; grid-row: 1; justify-self: start; align-self: end; font-size: 11px; padding: 4px 10px; }
  .wx-hero__text > h1 { grid-column: 2; grid-row: 2; font-size: 40px; }
  .wx-hero__text > .wx-hero__by { grid-column: 2; grid-row: 3; align-self: start; font-size: 15px; }
  .wx-hero__text > .wx-stats { margin-top: 8px; }
  .wx-stats { gap: 8px; }
  .wx-stat { padding: 8px 12px; }
  .wx-stat strong { font-size: 26px; }
}

/* ---------- Sponsor slideshows: every ad spot rotates up to 24 paid sponsors ---------- */
.ad__label { color: #6b7486; }
.ad__deck { display: grid; max-width: 100%; }
.ad__deck > .ad__link { grid-area: 1 / 1; }
.ad--rot .ad__slide { opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.ad--rot .ad__slide.is-on { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; }
.ad__dots { display: flex; justify-content: center; gap: 5px; margin-top: 2px; }
.ad__dots i { width: 5px; height: 5px; border-radius: 50%; background: #c5cad2; transition: background .3s, transform .3s; }
.ad__dots i.is-on { background: var(--red); transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) { .ad--rot .ad__slide, .ad--rot .ad__slide.is-on { transition: none; } }

/* ---------- Advertise: sizes with specs and the spot menu ---------- */
.adv-tier--spot .adv-spec { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 5px; font-family: var(--mono); font-size: 13.5px; line-height: 1.4; text-align: left; }
.adv-spec li { display: grid; grid-template-columns: 52px 1fr; gap: 6px; }
.adv-spec b { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; padding-top: 1px; }
.adv-spec--art { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: rgba(13, 31, 77, .06); border: 1px solid rgba(13, 31, 77, .14); font-size: 14.5px; }
.adv-spec--art li { grid-template-columns: 64px 1fr; }
.adv-shape { display: flex; align-items: center; justify-content: center; height: 62px; margin: 8px 0 2px; }
.adv-shape i { display: block; border: 2px dashed currentColor; border-radius: 4px; opacity: .55; background: rgba(255, 255, 255, .08); }
.adv-shape--banner i { width: 100%; max-width: 220px; aspect-ratio: 970 / 250; }
.adv-shape--box i { height: 56px; aspect-ratio: 300 / 250; }
.adv-shape--tall i { height: 60px; aspect-ratio: 300 / 600; }
.adv-where { margin: 18px 0 0; padding: 18px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.adv-where__h { display: block; margin: 0 0 10px; font-family: var(--display); font-weight: 800; font-size: 24px; text-transform: uppercase; color: var(--ink) !important; }
.adv-where__h span { display: block; margin-top: 2px; font-family: var(--mono); font-weight: 400; font-size: 14.5px; text-transform: none; color: var(--muted); }
.adv-where__pick select { width: 100%; min-height: 54px; padding: 0 44px 0 14px; border-radius: 12px; border: 2px solid var(--night); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%230a1424' stroke-width='2.4' fill='none'/%3E%3C/svg%3E") no-repeat right 16px center; -webkit-appearance: none; appearance: none; font: 600 16px var(--mono); color: var(--ink); cursor: pointer; }
.adv-where__info { margin: 12px 0 0; padding: 12px 14px; border-left: 4px solid var(--red); border-radius: 8px; background: var(--panel); }
.adv-where__info b { display: block; font-family: var(--display); font-size: 19px; text-transform: uppercase; }
.adv-where__info p { margin: 4px 0 0; font-family: var(--mono); font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.adv-where__info .adv-where__note { color: var(--muted); font-style: italic; }
.adv-seats { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: #e7f6ec; color: #15803d; font: 700 12.5px var(--mono); }
.adv-where .adv-fine { margin: 10px 0 0; color: var(--muted); }
@media (max-width: 640px) { .adv-where { padding: 14px; } .adv-where__h { font-size: 21px; } .adv-where__pick select { font-size: 15px; } }

/* Live page on phones: compact, small lists */
@media (max-width: 700px) {
  .lvx .lv-list { padding: 2px 8px 8px 0; }
  .lvx .lv-list::before { left: 47px; }
  .lvx .lv { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 5px 0; }
  .lvx .lv::before { left: 42px; top: 13px; width: 10px; height: 10px; }
  .lvx .lv time { padding-top: 8px; padding-right: 4px; font-size: 11px; line-height: 1.2; }
  .lvx .lv__body { padding: 8px 11px; border-radius: 10px; }
  .lvx .lv__tag { font-size: 10px; letter-spacing: .08em; }
  .lvx .lv h3, .lv h3 { margin: 2px 0 3px; font-size: 17px; line-height: 1.18; }
  .lvx .lv__body > p:not(.showline):not(.dateline):not(.lv__meta) { font-size: 14.5px; margin: 2px 0 4px; }
  .lvx .lv__meta, .lv__meta { font-size: 12px; }
  .lvx .lv .dateline { font-size: 12px; }
  .lvx-most a { font-size: 16px; }
  .lvx-most b { font-size: 20px; }
  .lvd { height: 380px; }
  .lvd__list .dk__t { font-size: 15px; }
  .dk { padding: 8px 2px; gap: 8px; }
}

/* ---------- The menu once it sticks: the emblem at its left; the On air button beside More ---------- */
@media (max-width: 700px) {
  .is-stuck .nav__brand { display: none !important; }
  .is-stuck .nav__pin { display: inline-flex; }
}
.nav__onair { flex: none; display: inline-flex; align-items: center; gap: 7px; align-self: center; margin: 0 6px; padding: 3px 12px 3px 3px; border: 0; border-radius: 999px; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, #11214a, #060b16); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 4px 14px rgba(0, 0, 0, .35); transition: box-shadow .2s, transform .15s; }
.nav__onair[hidden] { display: none; }
.nav__onair:hover { box-shadow: 0 0 0 2px #fff, 0 6px 18px rgba(0, 0, 0, .4); transform: translateY(-1px); }
.nav__onair-face { position: relative; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #ff2d3d; flex: none; }
.nav__onair-face .acx-face, .nav__onair-face .acx-ini { width: 100%; height: 100%; border-radius: 50%; font-size: 12px; }
.nav__onair-txt { display: inline-flex; align-items: center; gap: 6px; font: 800 13px var(--display); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 700px) {
  .nav__onair { margin: 0 4px 0 2px; padding: 2px 9px 2px 2px; gap: 5px; }
  .nav__onair-face { width: 28px; height: 28px; }
  .nav__onair-txt { font-size: 11.5px; letter-spacing: .1em; }
  .nav__onair-txt .acx-dot { width: 7px; height: 7px; }
}

/* ---------- The phone tab bar: night sky, flag stripe, glowing active tab ---------- */
@media (max-width: 700px) {
  .tabbar { padding: 7px 6px calc(7px + env(safe-area-inset-bottom)); border-top: 0; overflow: visible;
    background: radial-gradient(60% 140% at 50% 120%, rgba(47, 123, 255, .28), transparent 70%), linear-gradient(180deg, rgba(13, 24, 52, .97), rgba(3, 6, 12, .98));
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .45); }
  .tabbar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #b22234 0 33.3%, #fff 33.3% 66.6%, #1f3f8f 66.6%); box-shadow: 0 0 14px rgba(255, 45, 61, .55); }
  .tabbar__a { position: relative; gap: 4px; min-height: 52px; color: #8fa0b8; font-family: var(--display); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: color .2s, transform .15s; }
  .tabbar__a svg { width: 25px; height: 25px; transition: transform .2s, filter .2s; }
  .tabbar__a:active { transform: scale(.92); }
  .tabbar__a[aria-current="page"], .tabbar__more[open] > .tabbar__a { color: #fff; }
  .tabbar__a[aria-current="page"] svg, .tabbar__more[open] > .tabbar__a svg { color: #ff3b47; filter: drop-shadow(0 0 8px rgba(255, 45, 61, .8)); transform: translateY(-1px); }
  .tabbar__a[aria-current="page"]::before { top: -7px; left: 26%; right: 26%; height: 4px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, #ff2d3d, #ff6b74); box-shadow: 0 0 14px rgba(255, 45, 61, .9); }
  .tabbar__a::after { content: ''; position: absolute; inset: 4px 10%; border-radius: 14px; background: radial-gradient(circle at 50% 35%, rgba(255, 45, 61, .22), transparent 70%); opacity: 0; transition: opacity .2s; pointer-events: none; }
  .tabbar__a[aria-current="page"]::after { opacity: 1; }
}

.nav__pin { display: none; flex: none; align-items: center; align-self: stretch; padding: 0 8px 0 2px; animation: lbr-pop .3s ease-out; }
.nav__pin img, .nav__pin svg { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .45)) drop-shadow(0 0 12px rgba(90, 150, 255, .6)); }

/* The More button: a black block the full height of the menu bar */
.nav .nav__in > .nav__more { align-self: stretch; display: flex; align-items: stretch; }
.nav .nav__more > summary, .masthead .nav .nav__more > summary { height: 100%; display: flex; align-items: center; margin: 0 !important; padding: 0 20px !important; border: 0 !important; border-radius: 0 !important; color: #fff;
  background: #000 !important; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .14), inset -1px 0 0 rgba(255, 255, 255, .06); line-height: 1; }
.nav .nav__more > summary:hover, .nav .nav__more[open] > summary { background: #111 !important; box-shadow: inset 0 -3px 0 #ff2d3d, inset 1px 0 0 rgba(255, 255, 255, .14); border-bottom-color: transparent !important; }
@media (max-width: 700px) { .nav .nav__more > summary, .masthead .nav .nav__more > summary { padding: 0 14px !important; font-size: 15px; } }

/* Live markets: a quick glow when a quote ticks up or down (the board itself is unchanged) */
.q-tick-up { animation: q-tick-up 1.4s ease-out; }
.q-tick-down { animation: q-tick-down 1.4s ease-out; }
@keyframes q-tick-up { 0% { box-shadow: inset 0 0 0 999px rgba(43, 212, 107, .22); } 100% { box-shadow: inset 0 0 0 999px rgba(43, 212, 107, 0); } }
@keyframes q-tick-down { 0% { box-shadow: inset 0 0 0 999px rgba(255, 59, 71, .22); } 100% { box-shadow: inset 0 0 0 999px rgba(255, 59, 71, 0); } }
@media (prefers-reduced-motion: reduce) { .q-tick-up, .q-tick-down { animation: none; } }

/* The main menu bar in a brighter red */
.masthead .nav { background: linear-gradient(180deg, #ff2e3c 0%, #e8121f 52%, #b80b1a 100%); border-top: 1px solid rgba(255, 255, 255, .3); border-bottom: 1px solid #ff6b74;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 28px rgba(224, 16, 31, .45); }
@media (max-width: 700px) { .masthead .nav { background: linear-gradient(180deg, #ff2e3c 0%, #e8121f 55%, #b80b1a 100%); } }

/* "Trending" in blue (Breaking stays red) */
.ticker--loop:not(.ticker--breaking) .ticker__label { background: linear-gradient(180deg, #3b7bff 0%, #1f3f8f 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 4px 14px rgba(31, 63, 143, .45); }

/* Phones: the tab bar stays pinned to the bottom of the screen. iPhone Safari can let a fixed bar with a
   backdrop blur drift while scrolling, so it gets its own layer and a solid background instead. */
@media (max-width: 700px) {
  .tabbar { position: fixed !important; left: 0; right: 0; bottom: 0; top: auto; z-index: 70; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden;
    background: linear-gradient(180deg, #0d1834, #03060c) !important; }
}

/* Phones: no sticky header (iPhone Safari pushes the bottom tab bar up the screen with one). The menu bar pins to the
   top with position: fixed once it reaches it, and the header keeps its space so nothing jumps. */
@media (max-width: 700px) {
  .masthead--home[data-sticky-head] { position: relative !important; top: auto !important; }
  .is-stuck .masthead--home[data-sticky-head] { padding-bottom: var(--nav-h, 59px); }
  .is-stuck .masthead .nav { position: fixed !important; top: 0; left: 0; right: 0; z-index: 65; }
  .tabbar { will-change: auto; }
}

/* Savannah's speech bubble always sits on top: the radar map keeps its own layers (Leaflet uses z-index 400-1000) to itself */
.leaflet-container { isolation: isolate; z-index: 0; }
.wxgirl { z-index: 95; }

/* The Archive as a grid of cards, 40 at a time */
.lib__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 18px; }
.lib__card a { display: flex; flex-direction: column; height: 100%; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--rule); color: var(--ink); text-decoration: none; box-shadow: 0 6px 18px rgba(10, 20, 36, .06); transition: transform .15s, box-shadow .15s; }
.lib__card a:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(10, 20, 36, .14); text-decoration: none; }
.lib__pic { display: block; aspect-ratio: 3 / 2; background: #0b1830; overflow: hidden; }
.lib__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib__meta { padding: 10px 12px 0; font: 600 12.5px var(--mono); color: var(--red-text); letter-spacing: .02em; }
.lib__title { padding: 4px 12px 0; font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lib__by { margin-top: auto; padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 1px; font: 13px var(--mono); color: var(--ink-2); }
.lib__by small { color: var(--muted); font-size: 12px; }
.lib__more { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 28px 0 10px; }
.lib__more-btn { min-width: 240px; min-height: 50px; justify-content: center; font-size: 17px; }
.lib__end { text-align: center; margin: 26px 0 8px; }
.lib__back { text-align: center; font-family: var(--mono); }
@media (max-width: 700px) {
  .lib__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lib__meta { padding: 8px 9px 0; font-size: 11px; }
  .lib__title { padding: 3px 9px 0; font-size: 16px; -webkit-line-clamp: 4; }
  .lib__by { padding: 6px 9px 10px; font-size: 12px; }
  .lib__by small { font-size: 11px; }
}

/* Front page: the top sponsor banner sits right under the main slideshow. On wide screens it spans the full
   width under the slideshow and Trending; on phones it comes straight after the slideshow, before Trending. */
.front-top > .adbar--under { grid-column: 1 / -1; order: 3; margin: 4px 0 6px; background: none; border: 0; }
.adbar--under .ad { padding: 0; margin: 0 auto; }
@media (max-width: 1023px) { .front-top > .adbar--under { order: 0; margin: 0; } }
@media (max-width: 700px) { .adbar--under .ad { padding-top: 18px; } .adbar--under .ad__spot { top: 0; } }

/* Sales are off: "Coming soon" on anything that takes money */
.adv-soon { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(135deg, #0f2147, #1b3a7a); color: #fff; border: 1px solid rgba(255, 255, 255, .15); }
.adv-soon strong { font-family: var(--display); font-size: 22px; letter-spacing: .04em; text-transform: uppercase; color: #ffd166; }
.adv-soon span { font-size: 15px; line-height: 1.45; }
.adv-soon + .btn[disabled] { opacity: .55; cursor: not-allowed; }
.adv-hero__soon { display: inline-block; margin: 6px 0 14px; padding: 8px 14px; border-radius: 99px; background: rgba(255, 209, 102, .16); border: 1px solid rgba(255, 209, 102, .5); color: #ffe39b; font-weight: 700; }

/* The menu row never hides its first buttons: it centers when there's room and starts at the left when it
   doesn't (centering an overflowing row used to push Breaking, U.S. and Politics off the left edge). */
.nav--simple .nav__links { justify-content: flex-start; }
.nav--simple .nav__links::before, .nav--simple .nav__links::after { content: ''; flex: 1 0 0; min-width: 0; }
/* Phones: a Home button pinned at the left of the menu, always visible (the row of sections swipes beside it) */
.nav__home { display: none; }
@media (max-width: 700px) {
  .nav .nav__in > .nav__home, .masthead .nav .nav__in > .nav__home { display: inline-flex; flex: none; align-items: center; gap: 5px; align-self: stretch; margin: 0 !important;
    padding: 0 10px 0 8px !important; color: #fff; text-decoration: none; font: 800 15px/1 var(--display); letter-spacing: .04em; text-transform: uppercase;
    background: rgba(0, 0, 0, .22) !important; border: 0 !important; border-radius: 0 !important; box-shadow: inset -1px 0 0 rgba(255, 255, 255, .2) !important; }
  .nav__home svg { width: 18px; height: 18px; flex: none; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .35)); }
  .nav .nav__in > .nav__home[aria-current="page"], .masthead .nav .nav__in > .nav__home[aria-current="page"] { background: rgba(0, 0, 0, .38) !important; box-shadow: inset 0 -3px 0 #fff, inset -1px 0 0 rgba(255, 255, 255, .2) !important; }
  .is-stuck .nav__pin, .nav__pin { display: none !important; }
}