/* BTC Daily Wire site styles.
   A carbon page, stories as cards with large pictures, numbers set in mono,
   one highlighter yellow. Every part of a page is a block with its own
   heading, and blocks stand well apart (--block). Dark is the default and
   light is the reader's choice. Flat colour only: no gradients, glows,
   shadows or movement. Up and down are never told by colour alone; the text
   carries an arrow and a sign. */

/* Manrope and JetBrains Mono, served from this site (SIL Open Font License;
   see /assets/fonts/LICENSE.txt). The two "fallback" faces are Arial and a
   system mono resized to the same width, so the page does not shift when the
   real fonts arrive. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/assets/fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/assets/fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope fallback"; src: local("Arial"); size-adjust: 103%; ascent-override: 103%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: "Mono fallback"; src: local("Consolas"), local("Menlo"), local("DejaVu Sans Mono"); size-adjust: 109%; }

:root {
  --bg: #101113;
  --panel: #17191c;
  --panel-2: #1f2226;
  --ink: #ecebe6;
  --ink-2: #c6c7c9;
  --mute: #9a9da3;
  --line: #2a2d31;
  --hi: #f5d90a;
  --hi-ink: #111214;
  --up: #3ecf8e;
  --down: #ff6b6b;
  --focus: #f5d90a;
  --sans: "Manrope", "Manrope fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", "Mono fallback", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  --r: 6px;
  --r-lg: 12px;
  --bar-h: 60px;
  --tape-h: 45px;
  --rail-w: 256px;
  --tab-h: 58px;
  /* The three measures of space: the page edge, between cards, and between
     one block of a page and the next. They grow with the screen. */
  --gutter: 16px;
  --gap: 16px;
  --block: 44px;
  color-scheme: dark;
}
@media (min-width: 600px) { :root { --gutter: 24px; --gap: 20px; --block: 56px; } }
@media (min-width: 1000px) { :root { --gutter: 36px; --gap: 24px; --block: 72px; } }
:root[data-theme="light"] {
  --bg: #ffffff;
  --panel: #f4f4f2;
  --panel-2: #e9e9e6;
  --ink: #111214;
  --ink-2: #33363b;
  --mute: #5c6066;
  --line: #dcddda;
  --up: #0f7a4d;
  --down: #c0392b;
  --focus: #111214;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--tape-h) + 8px); scroll-padding-bottom: calc(var(--tab-h) + 8px); }
body {
  margin: 0;
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  color: var(--ink);
  font: 500 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
img { display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--hi); text-decoration-thickness: 2px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--hi); color: var(--hi-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 800; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }

.num, time, kbd { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
main > .wrap:last-child { padding-bottom: var(--block); }
.narrow { max-width: 720px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--hi); color: var(--hi-ink); padding: 12px 14px; font-weight: 700; }
.skip:focus { left: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
body.is-locked { overflow: hidden; }

/* ---------- bar: one thin strip ---------- */
.bar { display: flex; align-items: center; gap: 8px; height: var(--bar-h); padding: 0 8px 0 var(--gutter); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; font: 800 19px/1 var(--sans); letter-spacing: -0.015em; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand__mark { width: 15px; height: 15px; background: var(--hi); border-radius: 2px; box-shadow: inset 0 0 0 4px var(--hi), inset 0 0 0 15px var(--hi-ink); }
.brand__name b { font-weight: 800; background: var(--hi); color: var(--hi-ink); padding: 2px 5px 3px; border-radius: 2px; }
.bar__btn { display: inline-grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; border-radius: var(--r); color: var(--ink-2); cursor: pointer; }
.bar__btn:hover { background: var(--panel); color: var(--ink); }
.bar__search { display: none; height: 46px; align-items: center; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.bar__search:focus-within { border-color: var(--ink-2); }
.bar__search input { width: 280px; height: 100%; border: 0; background: none; padding: 0 0 0 14px; font-size: 16px; }
.bar__search input::placeholder { color: var(--mute); opacity: 1; }
.bar__search kbd { display: none; margin-right: 2px; }
@media (hover: hover) { .bar__search kbd { display: inline-block; } .bar__search:focus-within kbd { display: none; } }
.bar__btn[aria-pressed="true"] { color: var(--ink); }
.bar__search input:focus { outline: none; }
.bar__search button { width: 42px; height: 100%; display: grid; place-items: center; background: none; border: 0; color: var(--mute); cursor: pointer; }
@media (min-width: 760px) { .bar__search { display: flex; } .bar__find { display: none; } }

/* ---------- tape: the live numbers, stuck to the top ---------- */
.tape { position: sticky; top: 0; z-index: 20; height: var(--tape-h); background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tape::-webkit-scrollbar { display: none; }
.tape__row { display: flex; align-items: center; height: 100%; min-width: max-content; padding: 0 var(--gutter); }
.tape__row:hover { text-decoration: none; }
.tape__row:hover .tape__k { color: var(--ink-2); }
.tape__row:focus-visible { outline-offset: -3px; }
.tape__i { display: inline-flex; align-items: baseline; gap: 7px; padding: 0 14px; border-left: 1px solid var(--line); }
.tape__i:first-child { padding-left: 0; border-left: 0; }
.tape__k { color: var(--mute); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }
b.tape__k { color: var(--ink); font-weight: 700; }
.tape__px { font-size: 14px; font-weight: 700; }
.tape__u { color: var(--mute); font-size: 12px; }
.tape__stale { background: var(--hi); color: var(--hi-ink); padding: 3px 7px; border: 0; border-radius: 2px; margin-left: 4px; align-self: center; }
.tape__stale:empty { display: none; }
.chg { white-space: nowrap; }
.chg[data-pulse-dir="up"] { color: var(--up); }
.chg[data-pulse-dir="down"] { color: var(--down); }

/* ---------- rail (desktop) and tab bar (phone) ---------- */
.rail { display: none; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--panel); border-top: 1px solid var(--line); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; font: 600 12px/1 var(--sans); color: var(--mute); }
.tabbar a:hover { text-decoration: none; color: var(--ink); }
.tabbar a[aria-current], .tabbar a[aria-expanded="true"] { color: var(--ink); box-shadow: inset 0 2px 0 var(--hi); }
.sheet { display: none; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .62); }
.sheet:target, .sheet.is-open { display: block; }
.sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow-y: auto; background: var(--panel); border-top: 1px solid var(--line); padding: 4px var(--gutter) calc(14px + env(safe-area-inset-bottom, 0px)); }
.sheet__top { display: flex; align-items: center; justify-content: space-between; }
.sheet__h { margin: 0; font: 800 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.sheet__list + .sheet__h { padding: 22px 0 12px; }
.sheet__list--site { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.sheet__a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; border-top: 1px solid var(--line); font-weight: 600; }
.sheet__a[aria-current] { box-shadow: inset 3px 0 0 var(--hi); padding-left: 10px; }
.rail__n { font-size: 12px; color: var(--mute); }
.sheet__panel:focus { outline: none; }

@media (min-width: 1000px) {
  body { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; min-height: 100vh; padding-bottom: 0; }
  .bar, .tape, .footer { grid-column: 1 / -1; }
  main { grid-column: 2; grid-row: 3; min-width: 0; }
  .tabbar, .sheet, .sheet:target, .sheet.is-open { display: none; }
  /* The rail stays beside the page as it scrolls. Its last links sit under
     the fold until the bar has scrolled away, which keeps it from needing a
     scroll bar of its own on a laptop. */
  .rail { grid-column: 1; grid-row: 3; display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--tape-h); align-self: start; height: calc(100vh - var(--tape-h)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding: 22px 14px 0; border-right: 1px solid var(--line); }
  .rail__a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: var(--r); font-size: 15px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
  .rail__a:hover { background: var(--panel); color: var(--ink); text-decoration: none; }
  .rail__a[aria-current] { background: var(--panel); color: var(--ink); box-shadow: inset 3px 0 0 var(--hi); }
  .rail__a--gap { margin-top: 16px; padding-top: 0; }
  .rail__foot { margin-top: auto; padding: 10px 14px 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--mute); }
  .rail__foot a { display: flex; align-items: center; min-height: 44px; }
  .rail__foot a[data-acct-state="in"] { color: var(--ink); }
  .rail__live { font-size: 12px; }
  .rail__live time { margin-left: 6px; }
}

/* ---------- shared small pieces ---------- */
.tag { display: inline-block; font: 700 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
a.tag { position: relative; padding: 4px 6px; border: 1px solid var(--line); border-radius: 2px; color: var(--ink); }
a.tag:hover { border-color: var(--mute); text-decoration: none; }
a.tag::after { content: ""; position: absolute; inset: -12px -8px; }
.badge { font: 700 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--mute); color: var(--ink-2); padding: 2px 5px; border-radius: 2px; }
.kicker { display: block; margin: 0 0 8px; font: 700 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.side-h, .rule-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 8px; font: 800 13px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .06em; }
.side-h small, .rule-h small { font: 500 12px/1.2 var(--mono); text-transform: none; letter-spacing: 0; color: var(--mute); }
.more { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--hi); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.empty { color: var(--mute); padding: 14px 0; }
.empty--cta { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.empty--cta p { margin: 0; }
.src { margin: 8px 0 6px; font-size: 12px; color: var(--mute); }

/* ---------- blocks: every part of a page has a heading and room around it ---------- */
.block { margin-top: var(--block); }
.block--first { margin-top: 28px; }
.block__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 20px; margin: 0 0 22px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.block__h { display: flex; align-items: center; gap: 12px; font: 800 clamp(21px, 2.3vw, 26px)/1.2 var(--sans); letter-spacing: -0.02em; }
.block__h::before { content: ""; flex: none; width: 6px; height: .95em; background: var(--hi); border-radius: 2px; }
.block__h a { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0; }
.block__note { grid-column: 1; margin: 0; max-width: 72ch; font-size: 14.5px; line-height: 1.5; color: var(--mute); }
.block__more { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px 0 16px; border: 1px solid var(--line); border-radius: var(--r); font: 700 14px/1 var(--sans); white-space: nowrap; }
.block__more:hover { border-color: var(--mute); text-decoration: none; }
@media (max-width: 599px) {
  .block__head { grid-template-columns: minmax(0, 1fr); margin-bottom: 16px; padding-bottom: 14px; }
  .block__more { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
}

/* ---------- cards: one story, with its picture ---------- */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.card:hover { border-color: var(--mute); }
.card:has(.card__h a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The picture's frame is 16:9 whatever the picture is. The shape comes from
   the ::after, so the frame can still grow taller beside a long text. */
.card__media { position: relative; flex: none; background: var(--panel-2); }
.card__media::after { content: ""; display: block; padding-top: 56.25%; }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__media.is-empty::before { content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; font: 700 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--mute); }
.card__b { display: flex; flex: 1; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px 16px; }
.card__k { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 12.5px; line-height: 1.3; color: var(--mute); }
.card__k time { font-size: 12.5px; }
.card__h { font: 700 17px/1.36 var(--sans); letter-spacing: -0.006em; }
.card__h a::after { content: ""; position: absolute; inset: 0; }
.card__h a:visited { color: var(--ink-2); }
.card__h a:focus-visible { outline: none; }
.card:hover .card__h a { text-decoration: underline; text-decoration-color: var(--hi); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.card__dek { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.card__m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: auto 0 0; padding-top: 4px; font-size: 13px; line-height: 1.3; color: var(--mute); }
.card__src { color: var(--ink-2); font-weight: 600; }
.card__px { margin-left: auto; font-size: 12px; white-space: nowrap; }
/* "+2 outlets": a quiet mark. Yellow is kept for what the reader has chosen,
   what is new, the main button and the mark beside a block's heading. */
.row__n { padding: 3px 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; font-size: 12px; font-weight: 700; line-height: 1.1; color: var(--ink); white-space: nowrap; }
/* A story that arrived since the reader's last visit carries a yellow "New"
   on the corner of its picture. It lies over the card, so nothing moves when
   the marks are set; screen readers hear "New:" before the headline. */
.card.is-new::before { content: "New"; position: absolute; left: 10px; top: 10px; z-index: 1; padding: 5px 8px; background: var(--hi); border-radius: 3px; font: 700 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--hi-ink); }

/* The large card of a block: bigger headline, the excerpt, more room. */
.card--lead .card__b { gap: 12px; padding: 20px 20px 20px; }
.card--lead .card__h { font: 800 clamp(21px, 2.7vw, 32px)/1.2 var(--sans); letter-spacing: -0.022em; }
.card--lead .card__m { padding-top: 6px; font-size: 13.5px; }

/* A phone shows one card to a row: the large card keeps its wide picture and
   the rest put a smaller picture beside the text, so a list stays short. */
@media (max-width: 599px) {
  .card { display: grid; grid-template-columns: 116px minmax(0, 1fr); }
  .card__media::after { padding-top: 0; }
  .card__media { min-height: 112px; }
  .card__b { gap: 8px; padding: 12px 14px 12px; }
  .card__h { font-size: 16px; line-height: 1.34; }
  .card__px { margin-left: 0; }
  .card--lead, .cards--four > .card:first-child { display: flex; }
  .card--lead .card__media::after, .cards--four > .card:first-child .card__media::after { padding-top: 56.25%; }
  .card--lead .card__media, .cards--four > .card:first-child .card__media { min-height: 0; }
  .card--lead .card__b { padding: 16px 16px 16px; }
  .cards--four > .card:first-child .card__b { padding: 14px 16px 14px; }
  .cards--four > .card:first-child .card__h { font-size: 18px; }
  .card.is-new::before { left: 8px; top: 8px; }
  /* A section's block on the front page shows three stories on a phone; the
     fourth is one tap away, behind the block's "All ..." link. */
  .front .cards--four > .card:nth-child(n + 4) { display: none; }
}
@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card--lead { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) { .cards--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* The large card of a section page lies on its side on a wide screen:
   picture on the left, text on the right. */
@media (min-width: 900px) {
  .cards:not(.cards--top) > .card--lead { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .cards:not(.cards--top) > .card--lead .card__b { justify-content: center; padding: 28px 32px; }
  .cards:not(.cards--top) > .card--lead .card__m { margin-top: 0; }
}
/* "Top stories": the large card takes two thirds of the width and the other
   two stand in a column beside it. Its picture takes up any height left. */
@media (min-width: 1100px) {
  .cards--top { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .cards--top > .card--lead { grid-column: 1; grid-row: 1 / span 2; }
  .cards--top > .card--lead .card__media { flex: 1 1 auto; }
  .cards--top > .card--lead .card__b { flex: none; padding: 24px 26px; }
}

/* ---------- rows: one story as a line, in the short lists ---------- */
.row { position: relative; min-height: 56px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rows > .row:last-child { border-bottom: 0; }
.row__t { font-size: 12.5px; line-height: 1.3; color: var(--mute); white-space: nowrap; }
.row__h { font: 700 16px/1.4 var(--sans); letter-spacing: -0.005em; }
.row__h a::after { content: ""; position: absolute; inset: 0; }
.row__h a:visited { color: var(--ink-2); }
.row:hover .row__h a, .row__h a:focus-visible { text-decoration: underline; text-decoration-color: var(--hi); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.row__h a:focus-visible { outline: none; }
.row:has(.row__h a:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 2px; }
.row__m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 0; font-size: 13px; line-height: 1.3; color: var(--mute); }
.row__src { color: var(--ink-2); font-weight: 600; }
.row__dek, .list__dek { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
/* A line with a picture beside it (search results). */
.row--media { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 16px; align-items: start; padding: 18px 0; }
.row--media .card__media { border-radius: var(--r); overflow: hidden; }
@media (min-width: 600px) { .row--media { grid-template-columns: 220px minmax(0, 1fr); gap: 0 24px; padding: 22px 0; } .row--media .row__h { font-size: 19px; line-height: 1.3; } }
@media (max-width: 599px) { .row--media .card__media::after { padding-top: 75%; } .row--media .row__dek { display: none; } }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; padding: 32px 0 0; }
.pager__info { font-size: 13px; color: var(--mute); }
.pager .btn { min-height: 48px; padding: 0 24px; }
@media (max-width: 599px) { .pager .btn { flex: 1 1 140px; } .pager__info { order: 3; flex-basis: 100%; text-align: center; } }
.line-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 0; color: var(--mute); }
.line-more:not(:empty) { padding: 28px 0 0; }

/* ---------- front page ---------- */
.front__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; padding: 28px 0 0; }
.front__h { min-width: 0; font: 800 clamp(26px, 3.6vw, 40px)/1.1 var(--sans); letter-spacing: -0.028em; }
.front__date { flex: none; margin: 0; font: 500 13px/1.4 var(--mono); color: var(--mute); white-space: nowrap; }
.front__date b { padding: 3px 6px; background: var(--hi); border-radius: 3px; font-weight: 700; color: var(--hi-ink); }
@media (max-width: 599px) { .front__head { padding-top: 20px; } }
.chips { display: flex; gap: 10px; margin: 0 calc(var(--gutter) * -1) 22px; padding: 1px var(--gutter) 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
/* Each chip holds its own hidden words, so they cannot widen the page. */
.chip { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; background: none; border: 1px solid var(--line); border-radius: 22px; font: 600 14px/1 var(--sans); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.chip:hover { border-color: var(--mute); color: var(--ink); text-decoration: none; }
.chip .num { font-size: 12px; color: var(--mute); }
.chip[aria-current], .chip[aria-pressed="true"] { background: var(--hi); border-color: var(--hi); color: var(--hi-ink); }
.chip[aria-current] .num, .chip[aria-pressed="true"] .num { color: var(--hi-ink); }

/* The live numbers as tiles: the price, wide, with its line; four more. */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin: 0; }
.tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 20px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.tile--wide { grid-column: 1 / -1; }
.tile dt { font: 500 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.tile dd { margin: 0; }
.tile__n { font: 700 clamp(20px, 2.3vw, 26px)/1.15 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tile--wide .tile__n { font-size: clamp(26px, 3.2vw, 36px); }
.tile__n .chg { margin-left: 8px; font-size: 15px; font-weight: 500; letter-spacing: 0; }
.tile__u { margin-left: 6px; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--mute); }
.tile__spark { flex: 1; min-height: 64px; }
.tile__spark .spark { height: 100%; min-height: 64px; }
.tile__note { margin-top: auto; font-size: 13px; line-height: 1.4; color: var(--mute); }
@media (min-width: 1100px) {
  .tiles { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
  .tile--wide { grid-column: 1; grid-row: 1 / span 2; padding: 22px 24px 20px; }
}

/* A list with a box of notes beside it (the Community page). */
.split { display: grid; gap: var(--block); }
@media (min-width: 1100px) { .split { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; } }
.split .rows > .row:first-child { padding-top: 0; }
.info-box .info-h--2 { margin-top: 26px; font-size: 17px; }
.info-box .steps { margin-top: 4px; }
.info-box .btn { margin: 0 6px 8px 0; }

/* Two boxes of plain words side by side: how the page works, who writes. */
.duo { display: grid; gap: var(--gap); }
@media (min-width: 800px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.info-box { min-width: 0; padding: 22px 24px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.info-h { margin: 0 0 10px; font: 800 19px/1.25 var(--sans); letter-spacing: -0.012em; }
.info-h a { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; }
.info-box p { max-width: 62ch; font-size: 15px; color: var(--ink-2); }
.info-box .row:first-child { padding-top: 6px; }
.side-box, .aside-box { margin: 0 0 var(--gap); padding: 20px 20px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.side-box .row, .info-box .row { min-height: 0; }
.side-box .row__h { font-size: 15px; }
.side-box p, .aside-box p { font-size: 14px; color: var(--ink-2); }
.aside-box h3 { margin-bottom: 6px; font-size: 16px; }
.spark { display: block; width: 100%; height: 56px; color: var(--hi); }
:root[data-theme="light"] .spark { color: var(--ink); }
.kv { margin: 10px 0 0; }
.kv div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.kv dt { color: var(--mute); }
.kv dd { margin: 0; text-align: right; }

/* ---------- section pages ---------- */
.section-head { display: grid; gap: 12px; padding: 32px 0 0; }
@media (min-width: 900px) { .section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); align-items: end; gap: 40px; } }
.page-title { font: 800 clamp(30px, 4.4vw, 48px)/1.06 var(--sans); letter-spacing: -0.03em; }
.section-head p { margin: 0; color: var(--ink-2); }
@media (max-width: 599px) { .section-head { gap: 8px; padding-top: 22px; } .section-head p { font-size: 15px; line-height: 1.5; } }
.count-line { margin-top: 8px !important; font-size: 13.5px; color: var(--mute) !important; }
.count-line b { color: var(--ink); font-weight: 700; }
.sources { margin-bottom: 4px; font-size: 14.5px; color: var(--ink-2); }
.sources li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.sources li:first-child { border-top: 0; }
.sources li span { font: 500 12px/1.7 var(--mono); color: var(--mute); text-align: right; }

/* ---------- network page ---------- */
.net { display: grid; gap: var(--gap); padding: 28px 0 0; }
@media (min-width: 700px) { .net { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.net__wide { grid-column: 1 / -1; }
.stat { padding: 20px 22px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.stat h2 { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.stat .stat__n { max-width: none; color: var(--ink); margin: 8px 0 8px; font: 700 clamp(24px, 4.6vw, 32px)/1.1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat__n .num { font-weight: 700; }
.stat__n small { font-size: 14px; font-weight: 500; color: var(--mute); letter-spacing: 0; }
.stat__n .chg { font-size: 15px; font-weight: 500; letter-spacing: 0; margin-left: 6px; }
.stat p { font-size: 15px; color: var(--ink-2); max-width: 62ch; }
.stat .src { font-size: 12px; color: var(--mute); }
.stat .spark { height: 90px; margin: 4px 0 10px; }
.stat .kv { margin-bottom: 10px; }

/* ---------- story page ---------- */
.crumbs-row { display: flex; align-items: center; gap: 14px; padding-top: 20px; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px 0 8px; border: 1px solid var(--line); border-radius: var(--r); font: 600 13.5px/1 var(--sans); color: var(--ink-2); }
.back:hover { border-color: var(--mute); color: var(--ink); text-decoration: none; }
.page-back { padding-top: 20px; }
.story { display: grid; gap: 32px; padding: 18px 0 0; }
.story > * { min-width: 0; }
@media (min-width: 1100px) {
  .story { grid-template-columns: minmax(0, 1fr) 320px; gap: 0 48px; }
  .story__main { grid-column: 1; max-width: 780px; }
  .story__side { grid-column: 2; grid-row: 1; }
  .story__more { grid-column: 1 / -1; }
}
.story__title { font: 800 clamp(26px, 3.8vw, 42px)/1.12 var(--sans); letter-spacing: -0.026em; }
.story__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 16px 0 0; font-size: 14px; color: var(--mute); }
.story__meta b { color: var(--ink); font-weight: 700; }
.story__meta time { font-size: 12.5px; }
.story__meta time + time::before { content: "· "; }
.pxbox { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 22px 0 0; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--hi); border-radius: var(--r); font-size: 13px; }
.pxbox__k { margin-right: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.pxbox b { font-size: 15px; font-weight: 700; }
.prose { max-width: 68ch; font: 500 17.5px/1.7 var(--sans); }
@media (max-width: 599px) { .prose { font-size: 16.5px; line-height: 1.6; } }
.prose p { margin: 0 0 1.1em; }
.prose h2 { font-size: 22px; line-height: 1.25; letter-spacing: -0.015em; margin: 1.6em 0 .5em; }
.prose h3 { font-size: 18px; line-height: 1.3; margin: 1.4em 0 .5em; }
.prose a { text-decoration: underline; text-decoration-color: var(--hi); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose blockquote { margin: 1.3em 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--hi); color: var(--ink-2); }
.prose ul { list-style: disc; padding-left: 1.2em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .35em; }
.story__body { margin-top: 24px; }
.story__credit { font-size: 13.5px; line-height: 1.5; color: var(--mute); }
.story__cta { margin: 10px 0 0; }
.story__cta .btn { min-height: 48px; }
@media (max-width: 599px) { .story__cta .btn { display: flex; width: 100%; padding: 8px 14px; line-height: 1.3; text-align: center; } }
.story__fig { margin: 24px 0 0; }
.story__fig img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); background: var(--panel-2); }
.story__fig figcaption { margin-top: 8px; font-size: 12.5px; color: var(--mute); }
.story__share { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin-top: 28px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 14px; }
.story__share span { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.story__share a, .story__share button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; font-weight: 600; cursor: pointer; }
.story__share button:hover { text-decoration: underline; text-decoration-color: var(--hi); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.story__share [data-share] { padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r); }
.story__share [data-share]:hover { border-color: var(--mute); text-decoration: none; }
.story__share [data-share-links] { display: contents; }
.pn { display: grid; gap: var(--gap); margin-top: 20px; }
@media (min-width: 600px) { .pn { grid-template-columns: 1fr 1fr; } }
.pn__a { display: grid; align-content: start; gap: 8px; min-height: 64px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.pn__a:hover { border-color: var(--mute); text-decoration: none; }
.pn__a:hover .pn__t { text-decoration: underline; text-decoration-color: var(--hi); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pn__k { display: flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.pn__t { font: 700 16px/1.36 var(--sans); }
kbd { display: none; padding: 2px 5px; border: 1px solid var(--line); border-radius: 2px; font-size: 12px; color: var(--mute); }
@media (min-width: 1000px) and (hover: hover) { kbd { display: inline-block; } }
.who { font-size: 15px; }
.who li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.who li span { font: 500 12px/1.4 var(--mono); color: var(--mute); text-align: right; }

/* ---------- reader articles ---------- */
.longread { max-width: 760px; margin: 0 auto; padding-block: 20px 0; }
.longread__dek { margin: 12px 0 0; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.longread__fig { margin: 18px 0 24px; }
.longread .prose { margin-top: 22px; }
.longread__note { margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--mute); }
.longread__note a { text-decoration: underline; }
.rows--community .row { padding: 20px 0; }
.rows--community .row__h { font-size: 20px; line-height: 1.3; letter-spacing: -0.012em; }

/* ---------- static / info pages ---------- */
.doc { padding-top: 32px; }
.doc .page-title { margin-bottom: 18px; }
.doc__intro { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 64ch; margin-bottom: 28px; }
.doc h2 { font-size: 23px; line-height: 1.25; letter-spacing: -0.015em; margin: 44px 0 12px; }
.doc p, .doc li { max-width: 70ch; line-height: 1.7; color: var(--ink-2); }
.doc ul.bullets { list-style: disc; padding-left: 1.2em; }
.doc ul.bullets li { margin-bottom: 6px; }
.doc a:not(.btn):not(.chip) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hi); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.doc b { color: var(--ink); font-weight: 700; }
/* A list of stories inside an info page (search results) keeps the look of
   a list: no underline until the pointer is on it, and no heading margins. */
.doc .rows a:not(.btn):not(.chip) { text-decoration: none; }
.doc .rows .row:hover .row__h a:not(.btn):not(.chip) { text-decoration: underline; text-decoration-color: var(--hi); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.doc .rows li { max-width: 880px; }
.doc .row__h { margin: 0; font-size: 17px; line-height: 1.36; letter-spacing: -0.006em; }
@media (min-width: 600px) { .doc .row--media .row__h { font-size: 20px; line-height: 1.3; letter-spacing: -0.012em; } }
.cols { display: grid; gap: 32px; }
@media (min-width: 900px) { .cols { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; } }
.tiers { display: grid; gap: var(--gap); margin: 14px 0 32px; }
@media (min-width: 820px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier { display: flex; flex-direction: column; padding: 22px 22px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.tier h3 { font-size: 18px; }
.tier__price { margin: 8px 0 12px; font: 500 13px/1.3 var(--mono); color: var(--mute); }
.tier__price b { margin-right: 6px; font: 700 26px/1 var(--mono); color: var(--ink); }
.tier ul { display: grid; gap: 6px; margin-bottom: 16px; padding-left: 18px; list-style: disc; font-size: 14px; color: var(--ink-2); }
.tier .btn { margin-top: auto; align-self: flex-start; }
.tier--on { border-color: var(--hi); box-shadow: inset 0 3px 0 var(--hi); }
.steps { display: grid; gap: 10px; margin: 12px 0 22px; padding-left: 22px; list-style: decimal; }
.steps li { padding-left: 4px; color: var(--ink-2); }
.steps b { color: var(--ink); }
.notice { padding-top: 56px; }
.notice p { color: var(--ink-2); font-size: 16.5px; }
.notice .btn { margin: 0 6px 8px 0; }

/* ---------- forms ---------- */
.panel { padding: 22px 20px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
@media (min-width: 600px) { .panel { padding: 28px 28px 30px; } }
.panel h2 { font-size: 19px; margin: 0 0 6px; }
.panel > p { color: var(--ink-2); font-size: 14.5px; }
.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label { font-size: 13.5px; font-weight: 700; }
.field .hint { font-size: 12.5px; font-weight: 500; color: var(--mute); }
.form-note { margin: 0 0 14px; font-size: 12.5px; color: var(--mute); }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); font: 500 16px/1.4 var(--sans); color: var(--ink); }
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.field [aria-invalid="true"] { border-color: var(--down); }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: 13.5px; color: var(--ink-2); }
.check input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--hi); }
.check a, .form-foot a, .writer__note a { text-decoration: underline; text-decoration-color: var(--hi); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.row-2 { display: grid; gap: 0 14px; }
@media (min-width: 560px) { .row-2 { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--down); background: var(--bg); font-size: 14px; }
.form-msg[data-kind="ok"] { border-left-color: var(--up); }
.form-msg:empty { display: none; }
.form-foot { margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; background: var(--hi); border: 1px solid var(--hi); border-radius: var(--r); font: 700 14px/1 var(--sans); color: var(--hi-ink); cursor: pointer; }
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); text-decoration: none; }
.btn[disabled] { opacity: .55; cursor: progress; }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--sm { padding: 0 12px; font-size: 13px; }
.btn--danger { background: transparent; border-color: var(--down); color: var(--down); }
.btn--danger:hover { background: var(--down); border-color: var(--down); color: var(--bg); }

/* auth pages */
.auth { display: grid; gap: 32px; padding-top: 40px; }
@media (min-width: 900px) { .auth { grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: start; } }
.auth__copy h1 { font: 800 clamp(26px, 3.6vw, 36px)/1.1 var(--sans); letter-spacing: -0.02em; margin-bottom: 12px; }
.auth__copy p { font-size: 16.5px; color: var(--ink-2); max-width: 46ch; }

/* writer */
.writer { display: grid; gap: 28px; padding-top: 28px; }
@media (min-width: 1100px) { .writer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } }
.writer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 6px; }
.writer__count { font: 500 12.5px/1 var(--mono); color: var(--mute); }
.writer__preview { padding: 22px 22px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
@media (min-width: 1100px) { .writer__preview { position: sticky; top: calc(var(--tape-h) + 12px); align-self: start; max-height: calc(100vh - var(--tape-h) - 24px); overflow: auto; } }
.writer__preview .story__title { font-size: 26px; }
.writer__note { margin: 10px 0 16px; font-size: 14.5px; color: var(--ink-2); }
.mdhelp { font-size: 12.5px; color: var(--mute); }
.mdhelp code { padding: 1px 4px; background: var(--panel-2); border-radius: 2px; font: 500 12px var(--mono); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; padding: 0; border: 0; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; height: 100%; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); font-size: 13px; color: var(--mute); }
.seg b { display: block; margin-bottom: 4px; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.seg input:checked + span { border-color: var(--hi); box-shadow: inset 0 0 0 1px var(--hi); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* account / admin tables */
.table-scroll { position: relative; overflow-x: auto; }
.table-scroll:focus-visible { outline-offset: 4px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { padding: 0 12px 8px 0; border-bottom: 1px solid var(--mute); text-align: left; font: 500 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.table td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table td:first-child { font-weight: 700; color: var(--ink); }
.td-date { font: 500 12.5px/1.6 var(--mono); color: var(--mute); white-space: nowrap; }
.pill { display: inline-block; padding: 4px 7px; border: 1px solid currentColor; border-radius: 2px; font: 700 12px/1 var(--mono); text-transform: uppercase; }
.pill--pending { color: var(--hi); }
:root[data-theme="light"] .pill--pending { color: var(--hi-ink); background: var(--hi); border-color: var(--hi); }
.pill--approved { color: var(--up); }
.pill--rejected { color: var(--down); }
.queue-item { padding: 14px 0 24px; border-top: 1px solid var(--mute); }
.queue-item h3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.015em; }
.queue-item .prose { max-height: 420px; overflow: auto; margin: 12px 0; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); font-size: 15.5px; }
.queue-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.queue-actions input { flex: 1 1 220px; min-height: 44px; padding: 6px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); font-size: 14px; }
.skeleton { height: 14px; margin: 14px 0; background: var(--panel-2); border-radius: 2px; }
.skeleton:nth-child(2n) { width: 70%; }

/* /sources */
.src-ok { color: var(--up); font-weight: 700; }
.src-bad { color: var(--down); font-weight: 700; }
.src-sum { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 0 0 28px; font-size: 13.5px; color: var(--mute); }
.src-sum b { display: block; font: 700 24px/1.2 var(--mono); letter-spacing: -0.02em; color: var(--ink); }

/* /search */
.search-page { display: flex; gap: 10px; max-width: 640px; margin: 0 0 8px; }
.notice__find { display: flex; gap: 10px; max-width: 520px; margin: 4px 0 18px; }
.notice__find input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); font-size: 16px; }
.notice__find input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.search-page input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); font-size: 16px; }
.search-page input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.search-note { margin: 0 0 12px; font-size: 13.5px; color: var(--mute); }
.doc .chips { min-height: 50px; margin-bottom: 10px; }
/* Room is kept for the results, so the footer does not jump when they arrive. */
.search-results { min-height: 100vh; }

/* ---------- advertising: packages, booking terms, home page banner ---------- */
.note-line { margin: 16px 0 6px; padding: 2px 0 2px 14px; border-left: 3px solid var(--hi); }
.terms-box { margin: 0 0 18px; padding: 14px 16px 12px; background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--mute); border-radius: var(--r); }
.terms-box h3 { margin-bottom: 10px; font: 500 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.terms-box ul { display: grid; gap: 6px; padding-left: 18px; list-style: disc; font-size: 13.5px; color: var(--ink-2); }
.terms-box b { color: var(--ink); }
.terms-box p { margin-top: 10px; font-size: 13px; color: var(--mute); }
.terms-table { margin: 6px 0 16px; }
.ad-slot { max-width: 970px; margin: 4px auto 12px; text-align: center; }
.ad-slot__label { margin-bottom: 6px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.ad-slot a { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); }
.ad-slot img { width: 100%; height: auto; aspect-ratio: 970 / 250; object-fit: cover; }
.ad-row { display: grid; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.ad-row img { width: 100%; max-width: 388px; aspect-ratio: 970 / 250; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r); }
.ad-row__meta { display: grid; gap: 4px; align-content: start; font-size: 13.5px; color: var(--ink-2); }
.ad-row__meta b { color: var(--ink); }
.ad-row__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tag-live, .hint--ok { color: var(--up); font-weight: 700; }
@media (min-width: 760px) { .ad-row { grid-template-columns: 388px 1fr; } }
.book { margin: 0 0 30px; scroll-margin-top: calc(var(--tape-h) + 16px); }
.book--flash { outline: 2px solid var(--hi); outline-offset: 2px; }
.picked { margin: 6px 0 10px; padding: 6px 0 6px 12px; border-left: 3px solid var(--hi); color: var(--ink); }
.field-note { margin: -6px 0 14px; padding: 8px 12px; border-left: 3px solid var(--down); background: var(--bg); font-size: 13.5px; }
@media (min-width: 900px) { .book { max-width: 760px; } }

/* ---------- footer: links and the standing notes ---------- */
.footer { padding: 18px var(--gutter) 28px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--mute); }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
.footer__row a, .footer__name { display: inline-flex; align-items: center; min-height: 44px; }
.footer__row a { color: var(--ink-2); font-weight: 600; }
.footer__legal { max-width: 110ch; margin: 8px 0 0; font-size: 12.5px; line-height: 1.7; }
.footer__top { margin-left: auto; }

/* ---------- odds and ends ---------- */
.row__b { min-width: 0; }
.section-grid { padding-top: 24px; }
.section-earlier { margin-top: 40px; }
.side-h a { display: inline-flex; align-items: center; min-height: 44px; margin: -14px 0; }
.story__label { margin-bottom: 10px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.btn--source svg { flex: none; }
.story__credit b { color: var(--ink-2); font-weight: 700; }

/* A link inside a sentence keeps its place in the line but takes taps on a
   44px band; a ticked box is reached through its whole label. */
.doc p a:not(.btn), .doc li a:not(.btn):not(.chip), .form-foot a, .check a, .prose a, .longread__note a, .writer__note a, .aside-box p a, .side-box p a, .info-box p a, .stat p a:not(.more) { padding-block: 13px; }
.check { min-height: 44px; }
.check input { width: 24px; height: 24px; }
.terms-table { min-width: 560px; }

/* ---------- printing, and Windows high-contrast colours ---------- */
@media print {
  .bar__search, .bar__btn, .tape, .rail, .tabbar, .sheet, .chips, .pager, .pn, .story__share, .story__cta, .back, .footer__row, .ad-slot, .card__media, .block__more, .tiles, .skip { display: none !important; }
  body { display: block; padding: 0; background: #fff; color: #000; }
  .cards { display: block; }
  .card { display: block; border: 0; border-bottom: 1px solid #999; border-radius: 0; background: none; }
  .row, .card { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 12px; }
}
@media (forced-colors: active) {
  .brand__mark, .brand__name b, .card.is-new::before, .block__h::before, .chip[aria-current], .chip[aria-pressed="true"], .btn, .tape__stale { forced-color-adjust: none; }
  .tabbar a[aria-current], .rail__a[aria-current], .sheet__a[aria-current] { outline: 2px solid Highlight; outline-offset: -4px; }
}

/* ---------------- sponsored banners (app/promos.php, assets/js/bnr.js) ----------------
   The same markup on every site (it comes from claudeworld.news/api/promo).
   The casino keeps its own colours on its panel: --p1/--p2 background,
   --pa accent. Everything else is drawn in this site's look through the
   --bn-* settings in the "this site" block at the end. */
.bnr-slot:empty { display: none; }
.bnr {
  --bn-surface: #fff; --bn-ink: #111; --bn-muted: #444; --bn-faint: #666; --bn-line: #ddd; --bn-line-strong: #888;
  --bn-accent: #2146d0; --bn-icon: var(--bn-accent); --bn-em: var(--bn-accent); --bn-em-style: normal; --bn-em-bg: transparent;
  --bn-font: inherit; --bn-head-font: inherit; --bn-head-w: 800; --bn-head-size: 27px; --bn-head-lh: 1.1; --bn-head-track: -.02em;
  --bn-sub-font: inherit; --bn-sub-size: 15px;
  --bn-border: 1px solid var(--bn-line); --bn-r: 12px; --bn-shadow: none; --bn-inset: 0px; --bn-brand-r: 0px; --bn-brand-w: 184px;
  --bn-btn-bg: var(--bn-ink); --bn-btn-ink: var(--bn-surface); --bn-btn-r: 8px; --bn-btn-font: inherit; --bn-btn-w: 700; --bn-btn-case: none; --bn-btn-track: 0;
  --bn-focus: var(--bn-accent);
  --bn-bar-bg: var(--bn-surface); --bn-bar-ink: var(--bn-ink); --bn-bar-muted: var(--bn-faint); --bn-bar-line: var(--bn-line);
  color: var(--bn-ink); font-family: var(--bn-font); text-align: left;
}
.bnr a { color: inherit; text-decoration: none; }
:where(.bnr) img { display: block; max-width: 100%; }
.bnr ul, .bnr li { list-style: none; margin: 0; padding: 0; }
.bnr li::before { content: none; }

/* Labels: "Ad", "18+", then who is advertising. */
.bnr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px; line-height: 1.3; color: var(--bn-faint); }
.bnr-tag, .bnr-age { flex: none; display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border: 1px solid currentColor; border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bnr-what { min-width: 0; }

/* The button, with one light sweep the first time the card is seen. */
.bnr-btn { position: relative; overflow: hidden; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: var(--bn-btn-r); background: var(--bn-btn-bg); color: var(--bn-btn-ink); font-family: var(--bn-btn-font); font-weight: var(--bn-btn-w); font-size: 15.5px; line-height: 1.1; letter-spacing: var(--bn-btn-track); text-transform: var(--bn-btn-case); white-space: nowrap; transition: transform .18s cubic-bezier(.2, .8, .2, 1), filter .18s ease; }
.bnr-btn::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: translateX(-135%) skewX(-20deg); opacity: 0; pointer-events: none; }
.bnr.is-in .bnr-btn::after { animation: bnr-sweep 1s cubic-bezier(.2, .8, .2, 1) .25s 1; }
@keyframes bnr-sweep { 0% { transform: translateX(-135%) skewX(-20deg); opacity: 1; } 100% { transform: translateX(300%) skewX(-20deg); opacity: 1; } }
.bnr-btn svg { flex: none; transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
.bnr a:hover .bnr-btn { transform: translateY(-1px); filter: brightness(1.1); }
.bnr a:hover .bnr-btn svg { transform: translateX(3px); }
.bnr-btn__short { display: none; }

.bnr-code { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 7px; min-height: 48px; padding: 0 14px; align-content: center; border: 1px dashed var(--bn-line-strong); border-radius: var(--bn-btn-r); font-size: 14px; line-height: 1.2; color: var(--bn-muted); }
.bnr-code b { font-weight: 800; letter-spacing: .07em; color: var(--bn-ink); }
.bnr-code small { font-size: 12px; color: var(--bn-faint); }

.bnr-terms { margin: 0; padding: 10px 22px 14px; border-top: 1px solid var(--bn-line); font-size: 12px; line-height: 1.5; color: var(--bn-faint); }
.bnr-terms a { position: relative; color: var(--bn-muted); text-decoration: underline; text-underline-offset: 2px; }
.bnr-terms a::after { content: ""; position: absolute; inset: -14px -6px; }

/* ---- the card ---- */
.bnr-card { position: relative; container-type: inline-size; margin: 32px 0; background: var(--bn-surface); border: var(--bn-border); border-radius: var(--bn-r); box-shadow: var(--bn-shadow); overflow: hidden; }
.bnr-card__in { display: grid; grid-template-columns: minmax(0, 1fr); }
.bnr-card__in:focus-visible { outline: none; }
.bnr-card:has(.bnr-card__in:focus-visible) { outline: 3px solid var(--bn-focus); outline-offset: 3px; }
/* The casino's panel: its emblem and logo on its own colours. */
.bnr-card__brand { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 58px; box-sizing: border-box; margin: var(--bn-inset) var(--bn-inset) 0; padding: 12px 16px; border-radius: var(--bn-brand-r); overflow: hidden; background: radial-gradient(130% 120% at 30% 0%, var(--p2) 0%, var(--p1) 72%); }
.bnr-card__brand::after { content: ""; position: absolute; inset: auto -20% -60% -20%; height: 90%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pa) 34%, transparent), transparent); pointer-events: none; }
.bnr-card__art { position: relative; z-index: 1; flex: none; width: 60px; height: auto; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .55)); }
.bnr-card__logo { position: relative; z-index: 1; height: 22px; width: auto; max-width: 160px; object-fit: contain; object-position: left center; }
.bnr-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 16px 18px 18px; }
.bnr-card__head { display: block; font-family: var(--bn-head-font); font-weight: var(--bn-head-w); font-size: 25px; line-height: var(--bn-head-lh); letter-spacing: var(--bn-head-track); color: var(--bn-ink); text-wrap: balance; }
.bnr-card__head em { font-style: var(--bn-em-style); color: var(--bn-em); background: var(--bn-em-bg); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bnr-card__sub { display: none; max-width: 62ch; font-family: var(--bn-sub-font); font-weight: 400; font-size: var(--bn-sub-size); line-height: 1.45; color: var(--bn-muted); }
.bnr-perks { display: flex; flex-direction: column; gap: 4px; }
.bnr-perks li { display: flex; align-items: flex-start; gap: 7px; font-size: 14px; line-height: 1.35; color: var(--bn-muted); }
.bnr-perks li:nth-child(n+3) { display: none; }
.bnr-perks svg { flex: none; margin-top: 1px; color: var(--bn-icon); }
.bnr-card__cta { display: flex; flex-direction: column; align-self: stretch; gap: 8px; margin-top: 6px; }
.bnr-card .bnr-terms { padding: 10px 18px 14px; }
/* Wider places: the panel stands at the left, full height. */
@container (min-width: 540px) {
  .bnr-card__in { grid-template-columns: var(--bn-brand-w) minmax(0, 1fr); }
  .bnr-card__brand { flex-direction: column; justify-content: center; gap: 16px; margin: var(--bn-inset) 0 var(--bn-inset) var(--bn-inset); padding: 22px 16px; }
  .bnr-card__brand::after { inset: auto -40% -45% -40%; }
  .bnr-card__art { width: 92px; }
  .bnr-card__logo { height: 24px; max-width: 100%; object-position: center; }
  .bnr-card__body { gap: 10px; padding: 22px 26px 22px 24px; }
  .bnr-card__head { font-size: var(--bn-head-size); }
  .bnr-card__sub { display: block; }
  .bnr-perks { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
  .bnr-perks li:nth-child(n+3) { display: flex; }
  .bnr-card__cta { flex-direction: row; flex-wrap: wrap; align-items: stretch; align-self: flex-start; gap: 10px; }
  .bnr-card .bnr-terms { padding: 11px 26px 14px; }
}
/* Very wide places (a home page row): the button moves to the right. */
@container (min-width: 900px) {
  .bnr-card__in { grid-template-columns: 220px minmax(0, 1fr); }
  .bnr-card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "meta cta" "head cta" "sub cta" "perks cta"; align-items: start; column-gap: 40px; }
  .bnr-meta { grid-area: meta; }
  .bnr-card__head { grid-area: head; }
  .bnr-card__sub { grid-area: sub; }
  .bnr-perks { grid-area: perks; }
  .bnr-card__cta { grid-area: cta; align-self: center; flex-direction: column; }
}

/* ---- the bar at the bottom of the screen ----
   bnr.js shows it after the first screen, hides it while a card is in view,
   and a closed bar stays closed for a week. */
.bnr-sticky { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--bn-bar-bg); color: var(--bn-bar-ink); border-top: 1px solid var(--bn-bar-line); box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .45); }
.bnr-sticky.is-shown { display: block; }
.bnr-sticky__in { display: flex; align-items: center; gap: 4px; max-width: 980px; margin: 0 auto; padding: 8px 4px 8px 10px; min-height: 64px; box-sizing: border-box; }
.bnr-sticky__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; border-radius: var(--bn-btn-r); }
.bnr-sticky__link:focus-visible { outline: 3px solid var(--bn-focus); outline-offset: 2px; }
.bnr-sticky__brand { flex: none; display: flex; align-items: center; height: 46px; padding: 0 12px; border-radius: var(--bn-brand-r); background: radial-gradient(140% 140% at 20% 0%, var(--p2), var(--p1) 75%); }
.bnr-sticky__logo { height: 20px; width: auto; max-width: 120px; object-fit: contain; }
.bnr-sticky__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bnr-sticky__text b { font-family: var(--bn-head-font); font-weight: var(--bn-head-w); font-size: 16px; line-height: 1.2; letter-spacing: -.005em; color: var(--bn-bar-ink); }
.bnr-sticky .bnr-meta { gap: 4px 6px; font-size: 12px; color: var(--bn-bar-muted); }
.bnr-sticky .bnr-tag, .bnr-sticky .bnr-age { min-height: 18px; padding: 0 5px; font-size: 10px; }
.bnr-sticky .bnr-btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
.bnr-sticky__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: var(--bn-btn-r); background: transparent; color: var(--bn-bar-muted); cursor: pointer; }
.bnr-sticky__close:hover { color: var(--bn-bar-ink); background: color-mix(in srgb, var(--bn-bar-ink) 8%, transparent); }
.bnr-sticky__close:focus-visible { outline: 3px solid var(--bn-focus); outline-offset: -3px; }
html.bnr-has-sticky body::after { content: ""; display: block; height: 84px; }
@media (min-width: 861px) {
  .bnr-sticky { left: 50%; right: auto; bottom: 14px; width: min(980px, calc(100% - 32px)); transform: translateX(-50%); padding-bottom: 0; border: 1px solid var(--bn-bar-line); border-radius: var(--bn-r); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5); }
}
@media (max-width: 560px) {
  .bnr-sticky__in { gap: 2px; padding: 8px 2px 8px 8px; }
  .bnr-sticky__link { gap: 10px; }
  .bnr-sticky__brand { height: 40px; padding: 0 8px; }
  .bnr-sticky__logo { height: 16px; max-width: 64px; }
  .bnr-sticky__text b { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .bnr-sticky .bnr-what { display: none; }
  .bnr-sticky .bnr-btn { padding: 0 12px; font-size: 14px; }
  .bnr-sticky .bnr-btn svg, .bnr-sticky .bnr-btn__long { display: none; }
  .bnr-sticky .bnr-btn__short { display: inline; }
}
@media (max-width: 380px) {
  .bnr-sticky__brand { padding: 0 6px; }
  .bnr-sticky__logo { max-width: 60px; }
}
@media print {
  .bnr, .bnr-slot { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .bnr.is-in .bnr-btn::after { animation: none; }
  .bnr-btn, .bnr-btn svg { transition: none; }
  .bnr a:hover .bnr-btn, .bnr a:hover .bnr-btn svg { transform: none; }
}

/* This site: BTC Daily Wire. A dark panel like the story cards, labels in
   the mono face the site uses for data, the offer's number marked in the
   yellow of the logo, the yellow button. */
.bnr {
  --bn-surface: var(--panel); --bn-ink: var(--ink); --bn-muted: var(--ink-2); --bn-faint: var(--mute);
  --bn-line: var(--line); --bn-line-strong: var(--mute); --bn-accent: var(--hi); --bn-icon: var(--hi); --bn-focus: var(--focus);
  --bn-em: var(--hi-ink); --bn-em-bg: var(--hi);
  --bn-font: var(--sans); --bn-head-font: var(--sans); --bn-head-w: 800; --bn-head-size: 28px; --bn-head-track: -.03em;
  --bn-r: var(--r-lg); --bn-inset: 8px; --bn-brand-r: var(--r);
  --bn-btn-bg: var(--hi); --bn-btn-ink: var(--hi-ink); --bn-btn-r: var(--r); --bn-btn-w: 800;
  --bn-bar-bg: var(--panel); --bn-bar-line: var(--line);
}
:root[data-theme="light"] .bnr { --bn-icon: var(--ink); }
.bnr-card__head em { padding: 0 .14em; border-radius: 3px; }
.bnr-meta { font: 500 11.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.bnr .bnr-tag, .bnr .bnr-age { font-family: var(--mono); font-weight: 600; border-radius: 3px; }
.bnr .bnr-tag { border-color: var(--hi); background: var(--hi); color: var(--hi-ink); }
.bnr-code { font-family: var(--mono); }
.bnr-code b { letter-spacing: .04em; }