/* onta.ro blog. Apple Newsroom language: white and #f5f5f7, system SF font, rounded tiles, zero shadows. */

:root {
  --bg: #ffffff;
  --page: #f5f5f7;
  --tile: #ffffff;
  --line: #d2d2d7;
  --ink: #1d1d1f;
  --body: #1d1d1f;
  --dim: #6e6e73;
  --mute: #86868b;
  --link: #0066cc;
  --nav: rgba(22, 22, 23, 0.8);
  --radius-lg: 28px;
  --radius: 18px;
  --maxw: 980px;
  --read: 980px;   /* the page column: text, pictures and every page share it */
  --gutter: 22px;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', 'Inter', Helvetica, Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'Inter', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* no grey box painted over links and buttons when they are tapped (owner 2026-09-21) */
* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.gray { background: var(--page); }
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.foot { flex-shrink: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 20; }
h1, h2, h3 { color: var(--ink); margin: 0; font-family: var(--display); text-wrap: balance; }

/* Local nav: sticky, white translucent, section title left, pill right */
.lnav { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, 0.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, 0.16); }
body.gray .lnav { background: rgba(245, 245, 247, 0.72); }
.lnav .wrap { display: flex; align-items: center; justify-content: space-between; height: 52px; gap: 16px; }
.lnav .title { display: flex; align-items: center; height: 52px; }
.lnav .title svg, .lnav .title img { height: 26px; width: auto; display: block; }
.lnav .flags { display: flex; align-items: center; gap: 5px; }
.lnav .flags .flag { height: 10px; width: 15px; border-radius: 1.5px; display: block; }
.lnav .links { display: flex; align-items: center; gap: 20px; font-size: 12px; color: var(--ink); }
.lnav .links a { opacity: 0.88; }
.lnav .links a[aria-current="page"] { opacity: 1; color: var(--link); }

.pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.06); color: var(--ink); padding: 4px 11px; border-radius: 980px; font-size: 12px; }
.pill { transition: background-color 0.15s var(--ease); }
@media (max-width: 760px) {
  .lnav .links a:not(.pill) { display: none; }
  /* no rule under the header; wordmark left, pill right (owner 2026-09-21) */
  .lnav { border-bottom: 0; }
}
.mnav { display: none; }
@media (max-width: 760px) {
  .mnav { display: flex; gap: 8px; overflow-x: auto; padding: 14px var(--gutter) 0; scrollbar-width: none; }
  .mnav::-webkit-scrollbar { display: none; }
  .mnav a { flex: none; font-size: 14px; background: #fff; border-radius: 980px; padding: 7px 14px; color: var(--ink); }
  .mnav a[aria-current="page"] { background: var(--ink); color: #fff; }
}

/* Sections */
.section { padding-top: 48px; }
.section:last-of-type { padding-bottom: 80px; }
.section-title { font-size: 32px; font-weight: 700; letter-spacing: 0.004em; line-height: 1.125; margin-bottom: 24px; }

.page-title { font-size: clamp(40px, 6vw, 56px); font-weight: 700; letter-spacing: -0.005em; line-height: 1.07; }
.page-lead { font-size: 21px; line-height: 1.38; color: var(--dim); margin: 14px 0 0; letter-spacing: 0.011em; }

/* Tiles */
.tile { background: var(--tile); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.4s var(--ease); }

.tile .cover { aspect-ratio: 16 / 9; background: var(--page); overflow: hidden; }
.tile .cover svg, .tile .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .text { padding: 22px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--dim); }
.tile h3 { font-size: 21px; font-weight: 700; line-height: 1.19; letter-spacing: 0.011em; margin-top: 8px; }

/* The byline is used on tiles and on the front page lead, so the type and the spacing
   between name, date and reading time live on .by itself. Only the tile's own
   bottom-alignment stays scoped to the tile. */
.by { font-size: 14px; font-weight: 600; color: var(--dim); letter-spacing: -0.016em;
  display: flex; gap: 12px; flex-wrap: wrap; }
.by span:first-child { color: var(--ink); }
.tile .by { margin-top: auto; padding-top: 22px; }

.tile.hero { display: grid; grid-template-columns: 2fr 1fr; border-radius: var(--radius-lg); }
.tile.hero .cover { aspect-ratio: auto; min-height: 360px; }
.tile.hero .cover img { height: 100%; min-height: 360px; object-fit: cover; }
.tile.hero .text { padding: 32px 30px; }
.tile.hero h3 { font-size: 32px; line-height: 1.125; letter-spacing: 0.004em; }
.tile.hero p { font-size: 17px; color: var(--dim); margin: 14px 0 0; }

.tiles { display: grid; gap: 24px; }
.tiles.two { grid-template-columns: repeat(2, 1fr); }
.tiles.three { grid-template-columns: repeat(3, 1fr); }
.tiles + .tiles, .tile.hero + .tiles { margin-top: 24px; }
.tiles.two .tile h3 { font-size: 24px; line-height: 1.17; }
@media (max-width: 1068px) { .tiles.three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 734px) {
  .tile.hero { grid-template-columns: 1fr; }
  .tile.hero .cover { min-height: 0; aspect-ratio: 16 / 9; }
  .tile.hero h3 { font-size: 24px; }
  .tiles.two, .tiles.three { grid-template-columns: 1fr; }
}
.empty { font-size: 17px; color: var(--dim); }

/* Article */
.article-head { max-width: var(--maxw); margin: 0 auto; padding: 56px 0 0; text-align: center; }
.article-head .eyebrow { display: flex; justify-content: center; gap: 14px; }

.article-head .eyebrow time { font-weight: 400; text-transform: none; letter-spacing: 0; }
.article-head h1 { font-size: clamp(34px, 5.6vw, 56px); font-weight: 700; line-height: 1.07; letter-spacing: -0.005em; margin-top: 14px; }
.article-head .dek { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.33; color: var(--ink); margin: 20px auto 0; letter-spacing: 0.009em; }
.article-head .author { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 14px; color: var(--dim); }
.article-head .author img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.article-head .author a { color: var(--ink); font-weight: 600; }

.article-cover { max-width: var(--maxw); margin: 40px auto 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 7; background: var(--page); }
.article-cover svg { width: 100%; height: 100%; display: block; }
.prose { max-width: var(--read); margin: 0 auto; padding: 48px 0 32px; font-family: var(--display); font-size: 18px; line-height: 1.62; letter-spacing: 0.006em; }
.prose > * { margin-top: 0; margin-bottom: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose > h2 { font-size: 25px; font-weight: 700; line-height: 1.14; letter-spacing: 0.007em; margin-top: 1.8em; }
.prose > h2 + *, .prose > h3 + * { margin-top: 0.6em; }
.prose > h3 { font-size: 19px; font-weight: 700; line-height: 1.19; margin-top: 1.5em; }
.prose a { color: var(--link); }
.prose strong { font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.2em; margin-bottom: 0; }
.prose li + li { margin-top: 0.5em; }
.prose > .table { overflow-x: auto; background: var(--page); border-radius: var(--radius); padding: 6px 4px; margin-top: 1.4em; margin-bottom: 1.4em; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; font-family: var(--font); letter-spacing: -0.01em; }
.prose th, .prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose td.num, .prose th.num { white-space: nowrap; }
.prose tr:last-child td { border-bottom: 0; }
.prose th { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--dim); }
.prose td.num, .prose th.num { text-align: right; font-variant-numeric: tabular-nums; }
.prose blockquote { margin: 1.4em 0 0; font-size: 21px; line-height: 1.25; font-weight: 600; color: var(--ink); }
.sources { max-width: var(--read); margin: 0 auto; padding: 28px 0 0; border-top: 1px solid var(--line); }
.sources h2 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--dim); margin-bottom: 12px; }
.sources ol { margin: 0; padding-left: 1.2em; color: var(--dim); font-size: 14px; line-height: 1.5; }
.sources li + li { margin-top: 6px; }
.sources a { color: var(--link); word-break: break-word; }
.risk { max-width: var(--read); margin: 28px auto 0; font-size: 12px; line-height: 1.5; color: var(--dim); }
/* the article's closing card lives in .join below; the old .author-box is gone */

/* The invitation that closes an article: one ink card, the only loud thing on the page.
   The button comes first in the source so it is the first thing a keyboard reaches; the
   grid puts it back on the right. (owner 2026-09-21) */
.join { max-width: var(--read); margin: 36px auto 72px; background: var(--ink); color: #fff;
  border-radius: var(--radius-lg); padding: 24px 28px; display: grid; align-items: center;
  grid-template-columns: auto 1fr auto; gap: 0 20px; }
.join-face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none;
  grid-column: 1; grid-row: 1; }
/* the Telegram mark rides inside the button */
.tg-mark { width: 15px; height: 15px; flex: none; margin-right: 7px; opacity: 0.9; }
.join-txt { min-width: 0; grid-column: 2; grid-row: 1; }
.join strong a { color: inherit; }

.join strong { display: block; font-size: 17px; letter-spacing: -0.022em; color: #fff; }
.join p { margin: 5px 0 0; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, 0.68); }
.join .join-cta { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 18px; border-radius: 980px; background: #fff; color: var(--ink);
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
  transition: background-color 0.15s var(--ease); }
.join .join-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 560px) {
  .join { grid-template-columns: auto 1fr; gap: 18px 16px; padding: 22px; }
  .join .join-cta { grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 40px; }
}

/* The same invitation once more at the foot of the page, at the size of a Telegram invite:
   the face first, then the name, then the button. The markup order stays (button first, so
   the keyboard reaches it early); flex order puts it back where the eye expects it. */
.join-big { display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 52px 28px 48px; margin: 0 auto 88px; gap: 0; max-width: 100%; }
.join-big .join-face { order: 1; width: 112px; height: 112px; margin-bottom: 20px; }
.join-big .join-txt { order: 2; }
.join-big strong { font-size: 28px; line-height: 1.12; letter-spacing: -0.03em; }
.join-big .join-txt p { font-size: 17px; margin: 10px auto 0; max-width: 42ch; }
.join-big .tg-mark { width: 16px; height: 16px; }
.join-big .join-cta { order: 3; margin-top: 26px; min-height: 46px; padding: 0 30px; font-size: 15px; }
@media (max-width: 560px) {
  .join-big { padding: 40px 22px 36px; margin-bottom: 56px; }
  .join-big .join-face { width: 88px; height: 88px; margin-bottom: 16px; }
  .join-big strong { font-size: 23px; }
  .join-big .join-txt p { font-size: 15px; }
  .join-big .join-cta { width: auto; min-width: 180px; padding: 0 30px; margin-top: 22px; }
}
.more { background: var(--page); }

/* Authors */
.profile { text-align: center; padding-top: 64px; }
.profile img { width: 144px; height: 144px; border-radius: 50%; object-fit: cover; margin: 0 auto; }
.profile h1 { font-size: clamp(40px, 6vw, 56px); font-weight: 700; line-height: 1.07; margin-top: 22px; }
.profile .role { font-size: 21px; color: var(--dim); margin-top: 6px; }
.profile .bio { max-width: var(--read); margin: 22px auto 0; font-size: 20px; line-height: 1.55; letter-spacing: 0.012em; font-family: var(--display); }
.profile .bio p { margin: 0 0 12px; }
.profile .links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.profile .links a { font-size: 14px; font-weight: 600; color: #fff; background: var(--ink);
  border-radius: 980px; padding: 7px 18px; display: inline-flex; align-items: center; min-height: 34px; }
.profile .links a .tg-mark { width: 15px; height: 15px; margin-right: 7px; opacity: 0.9; flex: none; }
.authors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 36px; }
.author-card { background: var(--tile); border-radius: var(--radius-lg); padding: 40px 32px; text-align: center; transition: transform 0.4s var(--ease); }

.author-card img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; margin: 0 auto; }
.author-card h2 { font-size: 28px; font-weight: 700; margin-top: 18px; }
.author-card p { font-size: 17px; color: var(--dim); margin: 10px 0 0; }
.author-card .go { display: inline-block; margin-top: 16px; color: var(--link); font-size: 17px; }

@media (max-width: 734px) { .authors { grid-template-columns: 1fr; } }

/* The standing pages sit on the same 980px column as the rest of the site, so Despre
   and the legal pages do not read as a narrow slab next to the front page. The prose
   itself keeps a readable measure inside that column: 980px of 19px text would run to
   about 110 characters a line. */
.plain { max-width: var(--maxw); margin: 0 auto; padding: 56px 0 88px; font-family: var(--display); }
.plain .lead-p { font-size: 23px; line-height: 1.36; color: var(--dim); margin-top: 4px; }
.plain h1 { font-size: clamp(40px, 6vw, 60px); font-weight: 700; line-height: 1.07; margin-bottom: 24px; }
.plain h2 { font-size: 28px; font-weight: 700; margin-top: 1.6em; }
.plain p { font-size: 20px; line-height: 1.55; letter-spacing: 0.012em; margin: 0.9em 0 0; }
.plain a { color: var(--link); }

/* Footer */
.foot { background: var(--page); color: var(--dim); font-size: 12px; line-height: 1.33; letter-spacing: -0.01em; padding: 18px 0 24px; }
body.gray .foot { border-top: 1px solid var(--line); }
.foot .note { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.foot .note p { margin: 0 0 8px; }
.foot .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 18px 0 20px; }
.foot h2 { font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li + li { margin-top: 7px; }
.foot .legal { border-top: 1px solid var(--line); padding-top: 14px; display: flex; align-items: center;
  flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; }
.foot .legal-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot .flag { flex: none; border-radius: 2px; }
.foot .company { margin: 8px 0 0; }
/* owner 2026-09-21: the risk line is the last thing on the page, and the smallest */
.foot .fine { font-size: 11px; }
.foot .cols { padding-top: 6px; }
@media (max-width: 734px) { .foot .cols { grid-template-columns: repeat(2, 1fr); } }

/* Legal pages */
.plain .rev { font-size: 14px; color: var(--dim); margin-top: -12px; }
.plain .toc { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 28px 0 8px; }
.plain .toc a { display: block; background: var(--page); border-radius: 14px; padding: 16px 18px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 17px; }
.plain .toc span { display: block; font-weight: 400; font-size: 14px; color: var(--dim); margin-top: 4px; }
.plain .doc { padding-top: 32px; margin-top: 32px; border-top: 1px solid var(--line); scroll-margin-top: 70px; }
.plain .doc h2 { margin-top: 0; }
.plain .doc h3 { font-size: 19px; font-weight: 700; margin-top: 1.4em; }
.plain .doc p, .plain .doc li { font-size: 17px; line-height: 1.5; }
.plain .doc ul { padding-left: 1.2em; }
.plain .doc li + li { margin-top: 6px; }
.prose > .disclosure { font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--dim); background: var(--page); border-radius: 12px; padding: 12px 16px; letter-spacing: -0.01em; }
.prose > .disclosure a { color: var(--link); }

/* Subscribe */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.subscribe-box { background: var(--bg); border-top: 1px solid var(--line); padding: 56px 0 60px; text-align: center; flex-shrink: 0; }
body.gray .subscribe-box { background: var(--bg); }
.subscribe-box h2 { font-size: 32px; font-weight: 700; line-height: 1.125; }
.subscribe-box > .wrap > p { font-size: 19px; color: var(--dim); margin: 10px 0 0; }
.subscribe { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 520px; margin: 24px auto 0; }
.subscribe input[type="email"] { flex: 1 1 260px; min-width: 0; font: inherit; font-size: 17px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); }
.subscribe input[type="email"]:focus { outline: 2px solid var(--link); outline-offset: 1px; border-color: transparent; }
.subscribe button { font: inherit; font-size: 17px; background: var(--link); color: #fff; border: 0; border-radius: 980px; padding: 12px 24px; cursor: pointer; transition: background 0.2s var(--ease); }
.subscribe button:disabled { opacity: 0.6; cursor: default; }
.subscribe .hp { position: absolute; left: -9999px; }
.sub-note { flex-basis: 100%; min-height: 1.4em; margin: 4px 0 0; font-size: 14px; color: #1d7f35; }
.sub-note.is-error { color: #d70015; }
.sub-legal { font-size: 12px !important; color: var(--mute) !important; margin-top: 4px !important; }
.sub-legal a { color: var(--link); }

/* Cuprins (table of contents) */
/* Owner 2026-09-21: the contents box was gray on a gray page, so it read as a bare list.
   A white tile, one row per section with its number, the whole row is the link. */
.prose > .toc-box { font-family: var(--font); background: var(--tile); border-radius: var(--radius); padding: 22px 26px 10px; letter-spacing: -0.01em; }
.prose > .toc-box h2 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); margin: 0 0 6px; }
.prose > .toc-box ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; font-size: 17px; line-height: 1.35; }
.prose > .toc-box li { counter-increment: toc; margin: 0; }
.prose > .toc-box li + li { margin-top: 0; border-top: 1px solid var(--line); }
.prose > .toc-box a { display: grid; grid-template-columns: 34px 1fr 14px; align-items: baseline; gap: 4px; padding: 13px 0; color: var(--ink); font-weight: 600; text-decoration: none; }
.prose > .toc-box a::before { content: counter(toc, decimal-leading-zero); font-size: 13px; font-weight: 600; color: var(--mute); font-variant-numeric: tabular-nums; }
.prose > .toc-box a::after { content: "›"; color: var(--mute); font-weight: 400; text-align: right; }
.prose h2[id] { scroll-margin-top: 72px; }

/* All articles */
.archive { list-style: none; margin: 0; padding: 0; background: var(--tile); border-radius: var(--radius); }
.archive li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.archive li:last-child { border-bottom: 0; }
.archive a { font-size: 17px; font-weight: 600; color: var(--ink); }

.archive span { font-size: 14px; color: var(--dim); white-space: nowrap; }
@media (max-width: 640px) { .archive li { flex-direction: column; gap: 4px; } .archive span { white-space: normal; } }

/* Banner slot, above the title on every page. The banner is chosen when the site is
   built, so there is no script here and nothing moves after the page paints. The
   aspect-ratio reserves the exact box before the image arrives, so nothing below it
   jumps while it loads. */
.adslot { margin: 18px auto 0; transition: opacity 0.22s ease; }
@media (prefers-reduced-motion: reduce) { .adslot { transition: none; } }
.ad { position: relative; display: block; border-radius: var(--radius); overflow: hidden;
      background: var(--tile); aspect-ratio: 1960 / 240; }
.ad img { width: 100%; height: 100%; object-fit: cover; }
/* Owner 2026-09-21: the label is small and ALWAYS top right, on every banner of every shape. */
.ad-tag { position: absolute; top: 6px; right: 8px; font-size: 7.5px; line-height: 1; letter-spacing: 0.05em;
          text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, 0.4);
          padding: 3px 6px; border-radius: 980px; }
@media (max-width: 734px) { .ad { aspect-ratio: 1000 / 300; } }
/* The wide banner between the bands of the front page. */
.adslot.band-ad { margin-top: 44px; }
/* The 4:5 banner that sits between things in a column of the front page. Middle column and
   rail only, never the lead column. */
.ad.ad-tall { display: block; position: relative; aspect-ratio: auto; width: 100%; max-width: 320px;
  margin: 0 auto; padding: 0; background: none; overflow: visible; border-radius: 0; }
.ad.ad-tall img { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: var(--radius); display: block; }
@media (max-width: 734px) { .ad.ad-tall { aspect-ratio: auto; max-width: 360px; } }
/* The same 4:5 banner inside an article: beside the text of a section, centred on a phone. */
.prose > .ad.ad-inline { float: right; width: 300px; max-width: 300px; margin: 8px 0 24px 32px; }
.prose > .ad.ad-inline + h2 { clear: none; }
@media (max-width: 734px) { .prose > .ad.ad-inline { float: none; width: 100%; max-width: 340px; margin: 28px auto; } }

/* Pager. Every target is a file that already exists, so these are plain links. */

/* ---- front page -----------------------------------------------------------
   A newspaper front: a lead story, two stories in the next column, and a rail of
   the latest headlines, separated by hairline rules rather than cards. Laid out
   with grid, so the three regions reflow to one column on a phone in the order a
   reader wants them. */
.dateline { margin: 18px auto 0; }
.dateline-in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; }

.front { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 0 26px; align-items: stretch; margin-top: 22px; }
@media (max-width: 734px) { .front { margin-top: 18px; } }
/* Owner 2026-09-21: two columns, not three. The lead runs down the left for the whole
   height; the stories and then the rail stack in the right one. */
@media (min-width: 735px) {
  .front .lead-col { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; }
  .front .seconds { grid-column: 2; grid-row: 1; }
  /* both the heatmap and the calendar run under the two columns as full-width bands,
     so neither column has to be padded out to match the other (owner 2026-09-21) */
  .front > .unders { grid-column: 1 / -1; grid-row: 2; display: block;
    padding-left: 0; border-left: 0; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
  .front > .lead-mod { grid-column: 1 / -1; grid-row: 3; padding-left: 0; border-left: 0;
    margin-top: 34px; padding-top: 0; border-top: 0; }
  .front > .lead-mod .hd-map { aspect-ratio: 16 / 5; }
  .front > .rail { grid-column: 1 / -1; grid-row: 4; padding-left: 0; border-left: 0;
    margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
  .front > .rail .hd-events { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .front > .rail .hd-events li { border-top: 1px solid var(--line); padding-right: 24px; }
  .front > .rail .hd-events li:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); padding-left: 24px; }
  .front > .rail .hd-events li a { padding: 12px 0; }
  /* the band's heading carries no underline, and the first row has nothing above it */
  .front > .rail .rail-hd { border-bottom: 0; padding-bottom: 0; }
  .front > .rail .hd-events li:nth-child(-n + 3) { border-top: 0; }
  .front > .rail .rail-mod > .rail-hd { margin-bottom: 6px; }
  .front-more { margin-top: auto; }
}
@media (min-width: 735px) and (max-width: 1068px) {
  .front > .rail .hd-events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .front > .rail .hd-events li:not(:nth-child(3n + 1)) { border-left: 0; padding-left: 0; }
  .front > .rail .hd-events li:not(:nth-child(2n + 1)) { border-left: 1px solid var(--line); padding-left: 24px; }
  /* with two columns the first row is only the first two, so the third gets its rule back */
  .front > .rail .hd-events li:nth-child(3) { border-top: 1px solid var(--line); }
}
.front > * + * { padding-left: 26px; border-left: 1px solid var(--line); }

.lead .cover { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 7; }
.lead .cover svg, .lead .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lead .eyebrow { margin-top: 14px; }
.lead h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.06; letter-spacing: -0.021em;
  margin: 8px 0 0; color: var(--ink); }
.lead .dek { font-size: 17px; line-height: 1.45; color: var(--dim); margin: 12px 0 0; }
.lead .by { margin-top: 14px; }

.seconds { display: flex; flex-direction: column; gap: 22px; }
.seconds .second + .second { padding-top: 22px; border-top: 1px solid var(--line); }
.second .cover { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; }
.second .cover svg, .second .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.second .eyebrow { margin-top: 12px; }
.second h3 { font-size: 20px; line-height: 1.2; letter-spacing: -0.012em; margin: 6px 0 0; color: var(--ink); }
.second .dek { font-size: 14px; line-height: 1.45; color: var(--dim); margin: 8px 0 0; }

.rail-hd { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink);
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail li + li { border-top: 1px solid var(--line); }
.rail a { display: block; padding: 11px 0; }
.rail time { display: block; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }
.rail li span { display: block; font-size: 15px; line-height: 1.28; color: var(--ink); margin-top: 3px; letter-spacing: -0.008em; }
/* Scoped to the headline list. Unscoped it also caught the mini heat map tiles, whose
   white text turned link blue on hover and became unreadable on the coloured square. */

.rail-more { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--link); }

/* the link that closes the lead column */
.front-more { display: block; padding-top: 22px; margin-top: 26px; border-top: 1px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--link); }

/* Section bands under the front page. */
.strip { margin-top: 44px; }
.strip-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink);
  margin: 0 0 16px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.strip-more { font-size: 12px; color: var(--dim); text-transform: none; letter-spacing: 0; }


@media (max-width: 1068px) {
  .front { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .front > .rail { grid-column: 1 / -1; margin-top: 30px; padding-left: 0; border-left: 0;
    padding-top: 22px; border-top: 1px solid var(--line); }
}
@media (max-width: 734px) {
  .front { grid-template-columns: minmax(0, 1fr); }
  .front > * + * { padding-left: 0; border-left: 0; margin-top: 26px; padding-top: 22px;
    border-top: 1px solid var(--line); }
  .front > .rail { margin-top: 26px; }
  .dateline span + span { display: none; }
}

/* room above the subscribe box: it closes every page, and with no margin it butted
   straight against the last row of tiles. */
.subscribe-box { margin-top: 56px; }
@media (max-width: 734px) { .subscribe-box { margin-top: 40px; } }

/* The lead column: the lead story, then one more under it. Without the second story the
   column finished about 580px short of the rail beside it and the front ended in white. */
.lead-col > .under { display: block; margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--line); }
.lead-col > .under { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: start; }
/* the three stories under the lead: the same card as the section pages (owner 2026-09-21) */
.unders { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.unders .front-more { margin-top: 20px; padding-top: 0; border-top: 0; }

.under .cover { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--page); }
.under .cover svg, .under .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 734px) { .lead-col > .under { grid-template-columns: 112px 1fr; gap: 14px; } .lead-col > .under h3 { font-size: 18px; } }
@media (max-width: 560px) {
  .lead-col > .under { grid-template-columns: 1fr; gap: 12px; }
  .under .cover { aspect-ratio: 16 / 9; border-radius: var(--radius); }
  .lead-col > .under h3 { font-size: 20px; }
}
/* the heatmap at the foot of the lead column: wider than it was in the rail, and it is
   what fills the column now that the stories run out (owner 2026-09-21) */
.lead-mod { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.lead-mod + .under { margin-top: 22px; }
.lead-mod .rail-hd { margin-bottom: 12px; }
.lead-mod .hd-map { aspect-ratio: 16 / 7; max-width: 100%; }
/* the tiles inside carry their own intrinsic width; without this the map refuses to
   shrink and drags the whole column wider than the screen */
.lead-mod, .lead-col, .seconds, .front > .rail { min-width: 0; }
@media (max-width: 734px) { .lead-mod .hd-map { aspect-ratio: 16 / 10; height: auto; max-height: 46vh; } }

.rail a.rail-story { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: start; }
.rail-story .cover { border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: var(--page); }
.rail-story .cover svg, .rail-story .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Two lines of standfirst: with the picture beside it the text column is narrow, and a
   full standfirst made the lead column 500px taller than the one next to it. */
.under .dek { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.under .eyebrow { margin-top: 0; }
.under h3 { font-size: 22px; line-height: 1.18; letter-spacing: -0.014em; margin: 6px 0 0; color: var(--ink); }
.under .dek { font-size: 15px; line-height: 1.45; color: var(--dim); margin: 8px 0 0; }
.under .by { margin-top: 12px; }

/* A real photograph as the article cover, with the credit under it. The figure keeps the
   same 16:7 box as the generated cover, so a post with a picture and a post without sit
   at the same height on the page. */
.article-cover.has-photo { aspect-ratio: auto; background: none; border-radius: 0; overflow: visible; margin: 40px auto 0; }
.article-cover.has-photo img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover;
  border-radius: var(--radius-lg); display: block; background: var(--page); }
.article-cover figcaption { margin: 10px 2px 0; font-size: 12px; line-height: 1.5; color: var(--dim); }
.article-cover figcaption a { color: var(--dim); text-decoration: underline; text-underline-offset: 2px; }


/* Piețe and Calendar: tables on the page ground, every rule a 1px hairline, no shadows. */
.mk-note { font-size: 14px; color: var(--dim); margin: 14px 0 0; }
/* A single closing line under a full width page: centred, so it reads as a footnote to
   the whole thing rather than a stray sentence hanging off the left edge. */
.mk-foot { font-size: 14px; line-height: 1.5; color: var(--dim); margin: 0 auto;
  max-width: 46em; text-align: center; }
.mk-table-wrap { overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mk-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mk-table th, .mk-table td { padding: 10px 8px; text-align: left; border-top: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.mk-table thead th { border-top: 0; font-size: 12px; font-weight: 600; color: var(--dim); letter-spacing: 0.02em; }
.mk-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.mk-table .sym { font-weight: 600; color: var(--ink); }
.mk-table .nm { display: block; font-size: 12px; color: var(--dim); font-weight: 400; }
.mk-table .up, .mk-heat-tile.up { color: #1a7f37; }
.mk-table .dn, .mk-heat-tile.dn { color: #c0362c; }
.mk-table .closed { color: var(--mute); }
.mk-spark-h { width: 140px; }
.mk-spark { display: block; width: 130px; height: 36px; }
.mk-spark path { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.mk-spark .up { stroke: #1a7f37; } .mk-spark .dn { stroke: #c0362c; } .mk-spark .fl { stroke: var(--dim); }
.mk-legend { font-size: 13px; color: var(--dim); margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mk-legend span { display: inline-block; padding: 2px 8px; border-radius: 6px; font-weight: 600; font-size: 12px; }
.mk-legend .up { background: #d9f0df; color: #135e2a; } .mk-legend .dn { background: #f9dcd9; color: #8e2620; } .mk-legend .fl { background: #e8e8ed; color: #3a3a3c; }
.mk-block { border-top: 1px solid var(--line); padding: 14px 0 22px; }
.mk-block-hd { display: flex; justify-content: space-between; align-items: baseline; }
/* Heat map. A treemap in a box that is always 16:9, so the whole map, whatever is on it, sits
   on one screen and never scrolls. A tile's area is the size of the day's move; its colour is the
   direction. No corner radius, no hover, no tooltip, no link: a tile is a reading, not a control.
   Each tile is its own size container, so the type is sized to the tile it sits in and the
   percentage line only appears once there is room for it. */
.mk-map { position: relative; aspect-ratio: 16 / 9; margin: 0 auto;
  /* never taller than the screen: on a short window the box narrows and stays 16:9 */
  width: min(100%, calc((100dvh - 84px) * 16 / 9)); }
.rail .mk-map { width: 100%; }
.mk-map[hidden] { display: none; }
.mk-cell { position: absolute; padding: 1.5px; }
.mk-tile { width: 100%; height: 100%; container-type: size; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center; color: #fff; line-height: 1.05;
  padding: 1px; overflow: hidden; }
/* Every tile names its instrument, however small the tile: the type shrinks with it. */
.mk-tile b { font-weight: 700; letter-spacing: -0.01em; white-space: nowrap;
  font-size: min(calc(var(--k, 20) * 0.92cqw), 62cqh, 17px); }
.mk-tile span { display: none; font-variant-numeric: tabular-nums; opacity: 0.95; margin-top: 0.15em; white-space: nowrap;
  font-size: min(calc(var(--k, 20) * 0.7cqw), 22cqh, 13px); }
@container (min-height: 30px) { .mk-tile b { font-size: min(calc(var(--k, 20) * 0.92cqw), 34cqh, 17px); } .mk-tile span { display: block; } }
.hd-map { margin-top: 12px; }
@media (max-width: 734px) {
  /* On a phone a 16:9 box is too short to read. The map stays one screen: a 4:5 box, growing with
     the number of tiles (--n) so a full map of 189 still leaves each tile room for its name. */
  .mk-map { aspect-ratio: auto; width: 100%; height: max(calc((100vw - 44px) * 1.25), calc(var(--n, 17) * 3.3px)); max-height: calc(100dvh - 70px); }
  .rail .mk-map { height: auto; aspect-ratio: 16 / 9; }
}
.mk-block { margin-bottom: 34px; }
.mk-block.lazy { content-visibility: auto; contain-intrinsic-size: auto 600px; }
.mk-blocks { padding-top: 12px; }
.mk-controls .mm-row { padding-bottom: 12px; }
/* No cards anywhere: a section is a small uppercase heading on a hairline, then its content on the
   page ground. The same language as the front page rail. */
.mk-card { background: none; border-radius: 0; padding: 0; }
.mk-card .section-title, .mk-block-hd, .cal-range, .hd-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink);
  padding-bottom: 8px; border-bottom: 1px solid var(--line); margin: 0 0 14px; line-height: 1.4; }
.mk-card .section-title .mk-inline { text-transform: none; letter-spacing: 0; font-size: 12px; }
.mk-block-hd span, .cal-range span { font-size: 11px; font-weight: 400; color: var(--dim); text-transform: none; letter-spacing: 0.02em; }
.cal-row[hidden], .cal-day[hidden], .cal-week[hidden], .cal-head[hidden] { display: none !important; }
.cal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cal-filters { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
/* Filter dropdown (owner 2026-09-21): a row of chips wrapped onto two lines and pushed
   the table down the page. One button per filter instead, with the choices in a popover;
   the multi select is unchanged, the page's own script still reads aria-pressed. */
.filt-menu { position: relative; display: inline-flex; }
.menu-btn { gap: 7px; font-weight: 500; }
.menu-btn.is-on { background: var(--ink); color: #fff; }
.menu-chev { width: 13px; height: 13px; opacity: 0.5; flex: none; transition: transform 0.15s var(--ease); }
.menu-btn[aria-expanded="true"] .menu-chev { transform: rotate(180deg); }
.menu-btn.is-on .menu-chev { opacity: 0.7; }
.menu-pop { position: absolute; z-index: 40; top: calc(100% + 7px); left: 0; min-width: 244px; max-height: 58vh;
  overflow-y: auto; overscroll-behavior: contain; padding: 6px; display: flex; flex-direction: column; gap: 1px;
  background: var(--tile); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.13); }
.menu-pop[hidden] { display: none; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; font-size: 14px;
  letter-spacing: -0.01em; text-align: left; border: 0; background: none; color: var(--ink);
  padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.menu-item:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.menu-tick { flex: none; position: relative; width: 17px; height: 17px; border-radius: 5px;
  border: 1.5px solid var(--line); }
.menu-item[aria-pressed="true"] .menu-tick { background: var(--ink); border-color: var(--ink); }
.menu-item[aria-pressed="true"] .menu-tick::after { content: ""; position: absolute; left: 5px; top: 1.5px;
  width: 4px; height: 9px; border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(45deg); }
.menu-name { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 7px; }
.menu-n { flex: none; font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.menu-clear { font: inherit; font-size: 13px; color: var(--link); background: none; border: 0; cursor: pointer;
  text-align: left; padding: 9px 10px; margin-top: 3px; border-top: 1px solid var(--line); border-radius: 0; }
.menu-clear[hidden] { display: none; }
@media (max-width: 560px) {
  .filt-menu { display: flex; }
  .menu-btn { width: 100%; justify-content: space-between; }
  .menu-pop { left: 0; right: 0; min-width: 0; }
}

/* one filter = its label plus its chips, and the two never separate (owner 2026-09-21) */
.filt-group { display: flex; align-items: center; gap: 8px; min-width: 0; }
.filt-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.filt-group .cal-filter-hd { margin: 0; flex: none; }
@media (max-width: 734px) {
  .cal-filters { flex-direction: column; align-items: stretch; gap: 12px; }
  .filt-group { flex-direction: column; align-items: flex-start; gap: 7px; }
}
.cal-filter-hd { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); margin: 0 4px 0 8px; }
.cal-filter-hd:first-child { margin-left: 0; }
/* ---- controls. One language for every small button on the site: filter chips and both
   pagers. Three states and no more: resting (a quiet grey pill), off (an outlined pill, for a
   filter that is available but not chosen) and on (ink). Each has its own hover, the focus ring
   is the site's, and the target is never under 32px tall. The sortable column headers are NOT
   part of this language (owner 2026-09-21): a table heading reads as text, not as a button. ---- */
.chip, .pager a, .pager span, .pager button {
  font: inherit; font-size: 13px; line-height: 1; letter-spacing: -0.005em; cursor: pointer; border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  min-height: 32px; padding: 0 13px; border-radius: 980px; background: rgba(0, 0, 0, 0.06); color: var(--ink);
  -webkit-appearance: none; appearance: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease); }
.chip[aria-pressed="false"] { background: transparent; color: var(--dim); border-color: var(--line); }
.chip[aria-pressed="true"], .chip.is-on, .pager [aria-current="page"] { background: var(--ink); color: #fff; border-color: transparent; }
.chip:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.chip:focus-visible, .pager a:focus-visible, .pager button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 980px; }
.chip .imp { flex: none; }
.chip-n { font-size: 11px; opacity: 0.6; font-variant-numeric: tabular-nums; }
/* the sortable headings: the same type as a plain <th>, with the arrow on the sorted one */
.th-sort { font: inherit; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer;
  border: 0; background: none; padding: 4px 0; margin: -4px 0; color: var(--dim);
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
  transition: color 0.15s var(--ease); }
.th-sort[data-dir] { color: var(--ink); }
.th-sort:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }
.th-sort[data-dir="asc"]::after { content: "↑"; } .th-sort[data-dir="desc"]::after { content: "↓"; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 34px auto 0; }
.pager a, .pager span, .pager button { min-width: 36px; min-height: 36px; font-variant-numeric: tabular-nums; }
.pager [aria-current="page"] { cursor: default; font-weight: 600; }
.chip[hidden] { display: none; }
/* The chosen instruments: one line that scrolls sideways, with the edges faded so it reads as more to come. */
.mm-row.mm-chosen { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  /* a fade on whichever side still has pills out of sight; harta.js sets the two widths as the row scrolls */
  --fl: 0px; --fr: 40px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); }
.mm-chosen::-webkit-scrollbar { display: none; }
.mm-chosen .chip { flex: none; }
.cal-head, .cal-row { display: grid; grid-template-columns: 56px 118px 16px 1fr auto; gap: 12px; align-items: baseline; }
.cal-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim);
  padding: 4px 0 6px; border-bottom: 1px solid rgba(0, 0, 0, 0.07); }
.cal-range { margin-top: 18px; }
.cal-day { padding: 12px 0 6px; }
.cal-day h3 { font-size: 13px; font-weight: 700; margin: 0 0 4px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.03em; }
.cal-day.today h3 { color: var(--link); }
.cal-row { padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
/* The legend already closes with a rule, and the row after it opened with its own, so
   two 1px lines sat touching and read as one thick one. :first-of-type missed it
   because the legend sits between the day heading and the first row. */
.cal-day .cal-row:first-of-type, .cal-head + .cal-row { border-top: 0; }
.cal-row .time { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.cal-row .where { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.03em; }
.cal-row .what { color: var(--ink); }
.cal-row .src a { font-size: 12px; color: var(--dim); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

.imp { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #c0362c; vertical-align: middle; }
.imp.mediu { background: #d29a00; }
.imp.scazut { background: #8e8e93; }
.cal-empty { padding: 14px 0 6px; }
.cal-sources { list-style: none; padding: 0; margin: 12px 0 0; font-size: 14px; }
.cal-sources li { padding: 8px 0; border-top: 1px solid var(--line); }
.cal-sources a { color: var(--link); }
.cal-sources .off { color: var(--mute); }
.cal-count { display: inline; margin: 0; }

/* The front page: a moving ticker under the dateline, the small map and the calendar in the rail.
   Both sit on the page ground in the rail's own hairline language: no box, no card. */
.ticker { margin-top: 14px; }
/* No top rule: the nav above already closes with one, and the two landed 14px apart
   and read as a double line. The ticker keeps only the rule under it. */
.ticker-in { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); height: 54px; overflow: hidden; }
.ticker-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); white-space: nowrap; flex: none; padding-right: 14px; border-right: 1px solid var(--line); line-height: 54px; }
.ticker-tag em { font-style: normal; font-weight: 400; color: var(--dim); margin-left: 6px; }
.ticker-view { flex: 1; min-width: 0; overflow: hidden; height: 54px; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 90px, #000 calc(100% - 90px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 90px, #000 calc(100% - 90px), transparent); }
.ticker-track { display: flex; width: max-content; will-change: transform; animation: ticker 70s linear infinite; }
.ticker-track ul { display: flex; list-style: none; margin: 0; padding: 0; }
.ticker-track li a { display: inline-flex; align-items: center; gap: 9px; padding: 0 18px; font-size: 13px; white-space: nowrap; height: 54px; }
.ticker-track .sym { font-weight: 700; color: var(--ink); }
.ticker-track .num { font-variant-numeric: tabular-nums; color: var(--body); }
.ticker-track .up { color: #1a7f37; } .ticker-track .dn { color: #c0362c; } .ticker-track .fl { color: var(--dim); }
.ticker-track .mk-spark { width: 72px; height: 24px; margin-left: 2px; }
@keyframes ticker { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; width: auto; }
  .ticker-track ul[aria-hidden] { display: none; }
  .ticker-view { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
.rail-mod { margin-bottom: 22px; }
/* The qualifier sits on its own line under the heading, flush with it, rather than
   trailing after the title and wrapping awkwardly in a 230px column. */
.rail-hd span { display: block; margin: 3px 0 0; font-weight: 400; color: var(--dim);
  letter-spacing: 0.04em; }
.hd-events { list-style: none; margin: 0; padding: 0; }
.hd-events li + li { border-top: 1px solid var(--line); }
.rail .hd-events a { display: block; padding: 9px 0; }
.hd-events time { display: block; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }
.rail .hd-events li span { display: block; color: var(--ink); margin-top: 3px; font-size: 14px; line-height: 1.3; }
.hd-events small { display: block; font-size: 11px; color: var(--dim); margin-top: 2px; }
.hd-events .imp { width: 7px; height: 7px; margin-right: 6px; }
@media (max-width: 734px) {
  .front > .unders { order: 1; } .front > .lead-mod { order: 2; } .front > .rail { order: 3; } .front .seconds { order: 4; }
  .ticker-in { height: 48px; } .ticker-view { height: 48px; } .ticker-tag { line-height: 48px; } .ticker-track li a { height: 48px; }
  .cal-head { display: none; }
  /* three lines per event: when and where, then what, then who publishes it */
  .cal-row { grid-template-columns: auto 1fr auto; gap: 3px 10px; padding: 12px 0; align-items: baseline; }
  .cal-row .time { grid-column: 1; grid-row: 1; }
  .cal-row .where { grid-column: 2; grid-row: 1; }
  .cal-row .imp { grid-column: 3; grid-row: 1; justify-self: end; }
  .cal-row .what { grid-column: 1 / -1; grid-row: 2; }
  .cal-row .src { grid-column: 1 / -1; grid-row: 3; }
  .cal-row .src a { white-space: normal; }
  .mk-spark-h, .mk-table td:last-child { display: none; }
}

/* Harta and Lista de urmărire: the reader's own map, filters, sortable columns, pages. */
/* One declaration, not two. The rule had display:block followed by display:inline in the
   same block, so the later one won and the subtitle stayed on the heading's line. */
.mk-inline { display: block; margin: 4px 0 0; font-weight: 400; }
.mm-controls { padding: 12px 0 4px; margin-bottom: 14px; }
.mm-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0; }
.mm-box { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 980px; background: rgba(0, 0, 0, 0.06); cursor: pointer; }
.mm-box input { margin: 0; }
/* group filter checkboxes: our own square and tick, not the OS blue one */
.mm-box input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 15px; height: 15px;
  border: 1.5px solid var(--line); border-radius: 4px; background: #fff; position: relative; cursor: pointer;
  flex: none; transition: background 0.12s, border-color 0.12s; }
.mm-box input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
.mm-box input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4.5px; top: 1.5px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.mm-box input[type="checkbox"]:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.mm-input { appearance: none; -webkit-appearance: none; font: inherit; font-size: 13px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 980px; background: var(--bg); color: var(--ink); min-width: 220px; }
.mm-input:focus { outline: 2px solid var(--link); outline-offset: 1px; }
.mk-block[hidden] { border-top: 0; padding-top: 0; }
/* Watchlist: groups and search share one row, search at the far end (owner 2026-09-21) */
.ls-controls { border: 0; display: flex; align-items: center; gap: 10px 20px; padding: 0 0 14px; }
.ls-controls .ls-groups { flex: 1 1 auto; min-width: 0; padding: 6px 0; }
.mm-controls .mm-groups { padding: 6px 0; }
.ls-search { position: relative; display: flex; align-items: center; flex: none; }
.ls-search-i { position: absolute; left: 12px; width: 15px; height: 15px; color: var(--mute); pointer-events: none; }
.ls-search .mm-input { min-height: 32px; padding: 0 14px 0 34px; min-width: 240px; }
.ls-search .mm-input::-webkit-search-cancel-button { cursor: pointer; }
@media (max-width: 734px) {
  .ls-controls { flex-direction: column; align-items: stretch; gap: 4px; }
  .ls-search { width: 100%; }
  .ls-search .mm-input { width: 100%; min-width: 0; }
}
.ls-table .grp { font-size: 12px; color: var(--dim); }
.ls-table thead th { padding-top: 6px; padding-bottom: 6px; border-top: 0; }
.th-label { display: inline-block; padding: 5px 0; font-size: 12px; font-weight: 600; color: var(--dim); }
.ls-table tr.ls-group th { padding: 22px 8px 8px; font-size: 15px; font-weight: 700; color: var(--ink); text-align: left; border-top: 0; }
.ls-table tr.ls-group th span { font-size: 12px; font-weight: 400; color: var(--dim); margin-left: 8px; }
.ls-table tr.ls-group + tr td { border-top: 1px solid var(--line); }
@media (max-width: 734px) { .ls-table .grp, .ls-table th.grp-h { display: none; } .mm-input { min-width: 0; width: 100%; } }
/* The instrument combobox on Heatmap-ul meu: our own input and our own list. */
.combo { position: relative; display: inline-block; }
.combo-list { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; min-width: 100%; width: max-content; max-width: min(420px, 90vw); max-height: 260px; overflow-y: auto;
  margin: 0; padding: 4px; list-style: none; background: var(--tile); border: 1px solid var(--line); border-radius: 12px; }
.combo.up .combo-list { top: auto; bottom: calc(100% + 6px); }
.combo-list li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.combo-list li b { font-weight: 700; color: var(--ink); }
.combo-list li span { color: var(--dim); }
.combo-list .none { color: var(--dim); cursor: default; }
.mm-controls { border-top: 0; }

/* tags under an article: the same gray pill as the header button, never a coloured badge */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; }
.tag { background: rgba(0, 0, 0, 0.06); color: var(--ink); padding: 5px 12px; border-radius: 980px; font-size: 12px; transition: background-color 0.15s var(--ease); }

/* .md footer: the centre's own logo beside the line of support */
.foot .support { display: flex; align-items: center; gap: 16px; padding: 2px 0 16px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.foot .support-logo { flex: none; display: block; }
.foot .support-logo img { height: 38px; width: auto; display: block; }
.foot .support p { margin: 0; max-width: 560px; }
.foot .support strong { color: var(--ink); font-weight: 600; }
@media (max-width: 734px) { .foot .support { flex-direction: column; align-items: flex-start; gap: 10px; } }

/* .md: the tricolour and the short disinformation notice, part of the sticky header */
.natbar .tri { display: flex; height: 4px; }
.natbar .tri i { flex: 1; }
.natbar .tri i:nth-child(1) { background: #0046ae; }
.natbar .tri i:nth-child(2) { background: #ffd200; }
.natbar .tri i:nth-child(3) { background: #cc092f; }
.natbar.ro .tri i:nth-child(1) { background: #002b7f; }
.natbar.ro .tri i:nth-child(2) { background: #fcd116; }
.natbar.ro .tri i:nth-child(3) { background: #ce1126; }
.natbar p { margin: 0; padding: 6px 16px; text-align: center; font-size: 12px; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); background: #fff; border-bottom: 1px solid var(--line); }
.natbar a { color: #0046ae; font-weight: 600; white-space: nowrap; }


/* Owner 2026-09-21: hover only where there is a mouse. On a touch screen the state
   used to stick to whatever had just been tapped. */
@media (hover: hover) {
  .pill:hover { background: rgba(0, 0, 0, 0.11); }
  .prose a:hover { text-decoration: underline; }
  .sources a:hover { text-decoration: underline; }
  .join .join-cta:hover { background: rgba(255, 255, 255, 0.86); }
  .profile .links a:hover { background: #000; }
  .plain a:hover { text-decoration: underline; }
  .foot a:hover { text-decoration: underline; color: var(--ink); }
  .plain .toc a:hover { background: #ebebf0; text-decoration: none; }
  .subscribe button:hover { background: #0077ed; }
  .prose > .toc-box a:hover { color: var(--link); text-decoration: none; }
  .prose > .toc-box a:hover::after { color: var(--link); }
  .front-more:hover { text-decoration: underline; }
  .menu-btn.is-on:hover { background: #000; }
  .menu-item:hover { background: rgba(0, 0, 0, 0.05); }
  .menu-clear:hover { text-decoration: underline; }
  .chip:hover, .pager a:hover, .pager button:hover { background: rgba(0, 0, 0, 0.11); }
  .chip[aria-pressed="false"]:hover { background: rgba(0, 0, 0, 0.05); color: var(--ink); border-color: var(--mute); }
  .chip[aria-pressed="true"]:hover, .chip.is-on:hover { background: #000; }
  .th-sort:hover { color: var(--ink); }
  .ticker-view:hover .ticker-track, .ticker-view:focus-within .ticker-track { animation-play-state: paused; }
  .mm-box input[type="checkbox"]:hover { border-color: var(--ink); }
  .combo-list li[aria-selected="true"], .combo-list li:hover { background: rgba(0, 0, 0, 0.06); }
  .tag:hover { background: rgba(0, 0, 0, 0.11); }
  .natbar a:hover { text-decoration: underline; }
}