/* Tiles, artwork, photo galleries, text cards, and the reader. Loaded after app.css. */

/* Base tile */

.card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); cursor: pointer; animation: rise 0.35s var(--ease) both; }
.card-art {
  --hue: 210; position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(110% 110% at 0% 0%, hsl(var(--hue) 90% 70%) 0%, transparent 55%), radial-gradient(120% 120% at 100% 100%, hsl(calc(var(--hue) + 45) 85% 42%) 0%, transparent 60%), hsl(calc(var(--hue) + 20) 70% 56%);
  box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card-place { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #fff; font: 700 22px/1.1 var(--font-display); letter-spacing: -0.03em; }
.card-lang { position: absolute; left: 16px; top: 14px; padding: 3px 9px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 600; }
.card-play {
  position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  opacity: 0; transform: scale(0.85) translateY(4px); transition: opacity 0.2s var(--ease), transform 0.25s var(--ease);
}
.card-play svg { width: 18px; height: 18px; fill: currentColor; stroke: none; margin-left: 2px; }
.card:hover .card-play, .card:focus-within .card-play, .card.is-playing .card-play { opacity: 1; transform: none; }
.card-play:active { transform: scale(0.92); }
.card-copy { padding: 10px 4px 0; }
.card-title { margin: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta { margin: 1px 0 0; color: var(--text-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-right: 6px; vertical-align: -1px; }
.bars i { width: 3px; border-radius: 2px; background: var(--accent); animation: eq 0.9s ease-in-out infinite; }
.bars i:nth-child(1) { height: 60%; }
.bars i:nth-child(2) { height: 100%; animation-delay: 0.2s; }
.bars i:nth-child(3) { height: 40%; animation-delay: 0.4s; }
.paused .bars i { animation-play-state: paused; }
@keyframes eq { 50% { transform: scaleY(0.35); } }
.card .dl-button { width: 30px; height: 30px; float: right; margin-top: -24px; }

.art-tone {
  --tone-h: 210;
  --tone-hi: hsl(var(--tone-h) 22% 93%);
  --tone-lo: hsl(var(--tone-h) 16% 85%);
  --tone-ink: hsl(var(--tone-h) 24% 22%);
  --tone-ink-2: hsl(var(--tone-h) 12% 40%);
  --tone-mono: hsl(var(--tone-h) 20% 79%);
  --tone-glass: rgba(255, 255, 255, 0.58);
  --photo-color: var(--tone-lo);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .art-tone {
    --tone-hi: hsl(var(--tone-h) 13% 24%);
    --tone-lo: hsl(var(--tone-h) 11% 17%);
    --tone-ink: hsl(var(--tone-h) 12% 93%);
    --tone-ink-2: hsl(var(--tone-h) 8% 66%);
    --tone-mono: hsl(var(--tone-h) 12% 28%);
    --tone-glass: rgba(255, 255, 255, 0.1);
  }
}
:root[data-theme="dark"] .art-tone {
  --tone-hi: hsl(var(--tone-h) 13% 24%);
  --tone-lo: hsl(var(--tone-h) 11% 17%);
  --tone-ink: hsl(var(--tone-h) 12% 93%);
  --tone-ink-2: hsl(var(--tone-h) 8% 66%);
  --tone-mono: hsl(var(--tone-h) 12% 28%);
  --tone-glass: rgba(255, 255, 255, 0.1);
}

/* Shared photo layer */

.art-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.5s ease, transform 0.6s var(--ease);
}
.art-photo.is-loaded { opacity: 1; }

.has-photo {
  background:
    radial-gradient(70% 60% at 25% 20%, color-mix(in srgb, var(--photo-color) 70%, #fff) 0%, transparent 70%),
    radial-gradient(80% 70% at 80% 90%, color-mix(in srgb, var(--photo-color) 75%, #000) 0%, transparent 70%),
    var(--photo-color) !important;
}

.art-credit {
  position: absolute; z-index: 3;
  max-width: calc(100% - 24px);
  color: rgba(255, 255, 255, 0.86); font: 500 10px/1.3 var(--font); letter-spacing: 0;
  text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.art-credit:hover { text-decoration: underline; }

/* Small artwork: mini player, chat sources, detail sheet */

.art.art-tone {
  background: linear-gradient(155deg, var(--tone-hi), var(--tone-lo));
  color: var(--tone-ink-2); font-weight: 600; text-shadow: none;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}
.art.has-photo { color: transparent; }
.art.has-photo .src-n { z-index: 2; }

.art-lg.art-tone { font-size: 40px; box-shadow: var(--shadow-sm), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
.detail-hero:has(> .art-lg.has-photo) { flex-direction: column; align-items: stretch; gap: 14px; }
.art-lg.has-photo { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px; }
.art-lg.has-photo::after {
  content: ""; position: absolute; inset: auto 0 0 0; z-index: 1; height: 38%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}
.art-lg .art-credit { left: 14px; bottom: 9px; font-size: 11px; }

/* Tiles */

.card.tile { gap: 0; border-radius: 16px; }
.card-art.art-tone {
  container-type: inline-size;
  border-radius: 16px;
  background: linear-gradient(155deg, var(--tone-hi) 0%, var(--tone-lo) 100%);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05), var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.card-art > * { z-index: 2; }
.card-art > .art-photo { z-index: 0; }
.card.tile:hover .card-art { transform: translateY(-2px); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05), var(--shadow-md); }
.card.tile:hover .art-photo { transform: scale(1.025); }
.card.tile.is-playing .card-art { box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05), var(--shadow-md); }
.card.tile:focus-visible { outline: none; }
.card.tile:focus-visible .card-art { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }

.art-mono {
  position: absolute; z-index: 1; right: -0.04em; bottom: -0.2em;
  color: var(--tone-mono); font: 600 78cqw/1 var(--font-display); letter-spacing: -0.06em;
  pointer-events: none; user-select: none;
}
.has-photo .art-mono { display: none; }

.art-glyph {
  position: absolute; right: 13px; top: 12px;
  color: var(--tone-ink-2); transition: opacity 0.2s;
}
.art-glyph svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.has-photo .art-glyph { color: rgba(255, 255, 255, 0.92); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.card.is-playing .art-glyph { opacity: 0; }

.card-scrim { position: absolute; inset: 0; z-index: 1 !important; pointer-events: none; opacity: 0; }
.has-photo .card-scrim {
  opacity: 1;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent 32%),
    linear-gradient(to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.3) 34%, transparent 62%);
}

.card-art .card-lang {
  left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px;
  background: var(--tone-glass); color: var(--tone-ink);
  font: 600 12px/1.2 var(--font); letter-spacing: -0.005em;
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.3);
}
.has-photo .card-lang { background: rgba(30, 30, 30, 0.3); color: #fff; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22); }

.card-cap {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  display: flex; flex-direction: column; gap: 2px;
  transition: transform 0.3s var(--ease);
}
.card-art:has(.card-play) .card-cap { right: 60px; }
.card-time { color: var(--tone-ink-2); font: 600 11px/1.2 var(--font); letter-spacing: 0.04em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.card-art .card-place {
  position: static;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  color: var(--tone-ink); font: 700 22px/1.08 var(--font-display); letter-spacing: -0.028em;
  text-shadow: none;
}
.card.is-playing .card-art .card-place { right: auto; }
.has-photo .card-time { color: rgba(255, 255, 255, 0.8); }
.has-photo .card-place { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25); }

.card-art .art-credit { left: 16px; bottom: 6px; max-width: calc(100% - 76px); opacity: 0; transition: opacity 0.2s; }
.card.tile:hover .art-credit, .card.tile:focus-within .art-credit { opacity: 1; }
.card.tile:hover .has-photo .card-cap, .card.tile:focus-within .has-photo .card-cap { transform: translateY(-9px); }

.card-art .card-play {
  right: 12px; bottom: 12px; width: 40px; height: 40px;
  background: rgba(255, 255, 255, 0.74); color: var(--tone-ink);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.5), 0 4px 14px rgba(0, 0, 0, 0.12);
}
.card-art .card-play svg { width: 16px; height: 16px; }
.card.is-playing .card-art .card-play svg { margin-left: 0; }
.has-photo .card-play { background: rgba(255, 255, 255, 0.22); color: #fff; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.38), 0 4px 16px rgba(0, 0, 0, 0.22); }
.card-art .card-play:hover { background: rgba(255, 255, 255, 0.86); }
.has-photo .card-play:hover { background: rgba(255, 255, 255, 0.32); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card-art .card-play { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18); }
  :root:not([data-theme="light"]) .card-art .card-play:hover { background: rgba(255, 255, 255, 0.22); }
}
:root[data-theme="dark"] .card-art .card-play { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18); }
:root[data-theme="dark"] .card-art .card-play:hover { background: rgba(255, 255, 255, 0.22); }

.card-eq {
  position: absolute; right: 10px; top: 10px;
  display: grid; place-items: center; width: 30px; height: 24px; border-radius: 999px;
  background: var(--tone-glass); color: var(--tone-ink);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.has-photo .card-eq { background: rgba(30, 30, 30, 0.3); color: #fff; }
.card-eq .bars { height: 11px; margin: 0; gap: 2px; }
.card-eq .bars i { width: 2.5px; background: currentColor; }

.card.tile .card-copy { padding: 8px 2px 0; }
.card.tile .card-meta { margin: 0; font-size: 13px; }

/* Featured hero (newest item on the first page) */

.card.is-hero { grid-column: 1 / -1; margin-bottom: 6px; }
.card.is-hero .card-art { aspect-ratio: auto; height: clamp(220px, 28vw, 330px); border-radius: 22px; }
.card.is-hero .card-art .card-lang { left: 24px; top: 22px; font-size: 13px; padding: 5px 12px; }
.card.is-hero .art-glyph { right: 24px; top: 22px; }
.card.is-hero .art-glyph svg { width: 24px; height: 24px; }
.card.is-hero .card-eq { right: 22px; top: 20px; }
.card.is-hero .art-mono { right: 4%; bottom: -0.24em; font-size: clamp(200px, 30vw, 380px); }
.card.is-hero .card-cap { left: 28px; bottom: 26px; gap: 4px; }
.card.is-hero .card-art:has(.card-play) .card-cap { right: 100px; }
.card.is-hero .card-time { font-size: 12px; }
.card.is-hero .card-place { font-size: clamp(30px, 4.2vw, 50px); letter-spacing: -0.035em; -webkit-line-clamp: 1; }
.card.is-hero .card-play { right: 24px; bottom: 24px; width: 54px; height: 54px; opacity: 1; transform: none; }
.card.is-hero .card-play svg { width: 20px; height: 20px; }
.card.is-hero .art-credit { left: 28px; bottom: 9px; }
.card.is-hero .card-copy { display: none; }
.has-photo.card-art .card-scrim { transition: opacity 0.3s; }
.card.is-hero .has-photo .card-scrim {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.22), transparent 28%),
    linear-gradient(to top, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.22) 45%, transparent 75%),
    linear-gradient(to right, rgba(0, 0, 0, 0.28), transparent 55%);
}

/* News (text items, Apple News) */

.card.news {
  overflow: hidden; border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 0 0 0.5px var(--line-strong), var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.card.news:hover { transform: translateY(-2px); box-shadow: 0 0 0 0.5px var(--line-strong), var(--shadow-md); }
.card.news:hover .card-art { transform: none; box-shadow: none; }
.card.news .card-art { aspect-ratio: 16 / 9; border-radius: 0; box-shadow: none; }
.card.news .art-mono { display: none; }
.card.news .card-art:not(.has-photo) { display: none; }
.card.news .card-art:not(.has-photo) .art-glyph { inset: 0; display: grid; place-items: center; opacity: 0.55; }
.card.news .card-art:not(.has-photo) .art-glyph svg { width: 40px; height: 40px; stroke-width: 1.2; }
.card.news .art-credit { left: 12px; bottom: 6px; }
.card.news .has-photo .art-credit { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.news-body { display: flex; flex: 1; flex-direction: column; gap: 3px; padding: 11px 14px 13px; }
.news-provider { margin: 0; color: var(--text-2); font: 700 11px/1.3 var(--font); letter-spacing: 0.04em; text-transform: uppercase; }
.news-headline {
  margin: 0; color: var(--text); font: 700 16px/1.25 var(--font-display); letter-spacing: -0.02em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.news-meta { margin: auto 0 0; padding-top: 6px; color: var(--text-3); font-size: 12px; }

@media (max-width: 860px) {
  .card-art .card-place { font-size: 18px; }
  .card-art .card-play { width: 36px; height: 36px; }
  .card-art:has(.card-play) .card-cap { right: 54px; }
  .card.is-hero .card-art { height: 220px; }
  .card.is-hero .card-place { font-size: 30px; }
  .card.is-hero .card-play { width: 46px; height: 46px; }
}

/* Photo galleries: Ken Burns zoom and pan with a crossfade (timing lives in art.js GALLERY) */

.has-gallery .art-photo { transition: opacity var(--gallery-fade, 900ms) ease; will-change: opacity, transform; }
.art-photo.kb {
  transform-origin: var(--kb-ox, 50%) var(--kb-oy, 50%);
  animation: kenburns var(--kb-dur, 5800ms) linear both;
}
@keyframes kenburns {
  from { transform: scale(var(--kb-from, 1.06)) translate3d(0, 0, 0); }
  to { transform: scale(var(--kb-to, 1.12)) translate3d(var(--kb-tx, 0), var(--kb-ty, 0), 0); }
}
.kb-paused .art-photo.kb { animation-play-state: paused; }
.card.tile:hover .has-gallery .art-photo.kb { transform-origin: var(--kb-ox, 50%) var(--kb-oy, 50%); }
.art-credit { transition: opacity calc(var(--gallery-fade, 900ms) / 2) ease; }
.art-credit.is-swapping { opacity: 0 !important; }
.gallery-toggle {
  position: absolute; z-index: 4; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(20, 20, 20, 0.36); color: #fff; opacity: 0; transition: opacity 0.2s;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.gallery-toggle svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.has-gallery:hover .gallery-toggle, .gallery-toggle:focus-visible, .gallery-toggle[aria-pressed="true"] { opacity: 1; }
@media (hover: none) { .gallery-toggle { opacity: 0.85; } }

/* Provider identity */

.pv-mark {
  --pv-h: 210; display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px; overflow: hidden;
  background: hsl(var(--pv-h) 38% 46%); color: #fff; font: 750 8.5px/1 var(--font); letter-spacing: 0.02em;
}
.pv-mark.pv-md { width: 26px; height: 26px; border-radius: 7px; font-size: 10px; }
.pv-mark.has-icon { background: #fff; box-shadow: inset 0 0 0 0.5px var(--line-strong); }
.pv-mark img { width: 100%; height: 100%; object-fit: contain; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pv-mark:not(.has-icon) { background: hsl(var(--pv-h) 34% 40%); } }
:root[data-theme="dark"] .pv-mark:not(.has-icon) { background: hsl(var(--pv-h) 34% 40%); }

/* Text cards: text-first (Apple News, Google News, newspapers) */

.tcard {
  --pv-h: 210; position: relative; display: flex; gap: 16px; padding: 16px 0 16px 16px; border-top: 1px solid var(--line); cursor: pointer;
}
.tcard::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: hsl(var(--pv-h) 45% 52%); }
.tcard-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tcard-kicker { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--text-2); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.pv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard-tag { padding-left: 7px; border-left: 1px solid var(--line-strong); color: var(--accent); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard-head { margin: 0; font: 700 20px/1.28 var(--serif); letter-spacing: -0.012em; color: var(--text); }
.tcard-head a { color: inherit; }
.tcard-head a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tcard-head a:focus-visible { outline: none; text-decoration: underline; }
.tcard:focus-within { background: linear-gradient(to right, var(--accent-soft), transparent 60%); border-radius: 10px; }
.tcard-summary {
  margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.tcard-ai { margin-right: 6px; padding: 1px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent);
  font: 800 10.5px/1.5 var(--font); letter-spacing: 0.06em; vertical-align: 0.1em; }
.tcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0 0; color: var(--text-3); font-size: 12.5px; }
.tcard-meta > span:not(.lang-chip):not(.full-badge) + span:not(.lang-chip):not(.full-badge)::before { content: "·"; margin-right: 10px; }
.tcard-thumb { flex: none; width: 120px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--raised); align-self: flex-start; margin-top: 4px; }
.tcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcard[dir="rtl"] { padding: 16px 16px 16px 0; }
.tcard[dir="rtl"]::before { left: auto; right: 0; }
.tcard[data-script="arab"] .tcard-head { line-height: 1.9; font-size: 19px; }
.tcard[data-script="arab"] .tcard-summary { line-height: 1.9; }

.tcard-lead { padding: 4px 0 20px 20px; border-top: 0; }
.tcard-lead::before { top: 8px; bottom: 24px; width: 4px; }
.tcard-lead .tcard-head { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.02em; }
.tcard-lead .tcard-summary { font-size: 17px; -webkit-line-clamp: 3; }
.tcard-lead .tcard-thumb { width: min(38%, 340px); aspect-ratio: 3 / 2; border-radius: 14px; }

.tcard-compact { padding: 10px 0 10px 14px; gap: 10px; }
.tcard-compact::before { top: 12px; bottom: 12px; }
.tcard-compact .tcard-head { font-size: 16.5px; line-height: 1.3; }
.tcard-compact .tcard-thumb { width: 72px; }
.tcard-compact .tcard-meta { margin-top: 1px; }

.tcard-tile {
  flex-direction: column-reverse; gap: 0; padding: 16px 16px 14px; border: 0; border-radius: 16px; min-height: 100%;
  background: var(--surface); box-shadow: 0 0 0 0.5px var(--line-strong), var(--shadow-sm); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.tcard-tile::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 3px; border-radius: 16px 16px 0 0; }
.tcard-tile:hover { transform: translateY(-2px); box-shadow: 0 0 0 0.5px var(--line-strong), var(--shadow-md); }
.tcard-tile .tcard-head { font-size: 18px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.tcard-tile .tcard-summary { -webkit-line-clamp: 3; font-size: 14px; }
.tcard-tile .tcard-thumb { width: calc(100% + 32px); margin: -16px -16px 12px; aspect-ratio: 16 / 9; border-radius: 16px 16px 0 0; }
.tcard-tile .tcard-meta { margin-top: auto; padding-top: 8px; }
.tcard-tile .dl-button { width: 28px; height: 28px; margin-left: auto; }
.scroller > .tcard-tile { min-width: 260px; }

/* Read home */

.read-home .tabs { margin-top: -4px; }
.for-you-note { margin: 0 0 14px; color: var(--text-2); font-size: 14px; }
.top-slot:empty { display: none; }
.top-slot { margin-bottom: 8px; }
.lead-wrap { padding-top: 8px; }
.story-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 0 32px; }
.story-groups .river-head { grid-column: 1 / -1; }
.story-groups .tcard-lead .tcard-head { font-size: 24px; }
.story-groups .source-stack { margin-top: 8px; }
.river-head { margin: 10px 0 2px; font: 800 13px/1.3 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.river { display: flex; flex-direction: column; }
.river.is-compact .tcard { padding-top: 10px; padding-bottom: 10px; }
.river.is-compact .tcard-head { font-size: 16.5px; }
.top-stories { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px 36px; }
.top-stories .river .tcard:first-child { border-top: 0; padding-top: 4px; }

/* Reader */

.reader {
  --reader-size: 19px; --r-bg: var(--bg); --r-text: var(--text); --r-text-2: var(--text-2); --r-line: var(--line); --r-card: var(--raised);
  position: relative; background: var(--r-bg); color: var(--r-text); margin: 0; padding: 0 28px 40px; min-height: 80vh;
}
.reader[data-theme="light"] { --r-bg: #ffffff; --r-text: #111111; --r-text-2: #4a4a4f; --r-line: rgba(0, 0, 0, 0.1); --r-card: #f4f4f5; color-scheme: light; }
.reader[data-theme="sepia"] { --r-bg: #f8f1e3; --r-text: #3b2f22; --r-text-2: #6b5a45; --r-line: rgba(80, 55, 20, 0.16); --r-card: #efe4cf; color-scheme: light; }
.reader[data-theme="dark"] { --r-bg: #121212; --r-text: #e9e6e1; --r-text-2: #a8a39b; --r-line: rgba(255, 255, 255, 0.12); --r-card: #1f1f1f; color-scheme: dark; }
.reading-progress { position: sticky; top: 52px; z-index: 5; height: 3px; margin: 0 -28px; background: transparent; }
.swatch span { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.reading-progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.1s linear; }
.reader-bar {
  position: sticky; top: 55px; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 8px 0; margin-bottom: 8px;
  background: color-mix(in srgb, var(--r-bg) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--r-line);
}
.reader-bar .icon-button { color: var(--r-text-2); }
.reader-back { display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 10px 0 4px; border: 0; border-radius: 10px; background: none; color: var(--accent); font-weight: 600; }
.reader-back:hover { background: var(--hover); }
.reader-look { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.text-size span { font: 600 14px/1 var(--serif); }
.text-size.big span { font-size: 20px; }
.theme-swatches { display: flex; gap: 6px; margin: 0 6px; }
.swatch { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); }
.swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; }
.swatch-auto span { background: linear-gradient(135deg, #fff 50%, #1c1c1e 50%); }
.swatch-light span { background: #fff; }
.swatch-sepia span { background: #f4e8d0; }
.swatch-dark span { background: #1a1a1a; }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--r-bg), 0 0 0 4px var(--accent); }

.reader-article { max-width: 68ch; margin: 0 auto; padding-top: 18px; font-size: var(--reader-size); }
.reader-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--r-text-2); font: 700 13px/1.3 var(--font); letter-spacing: 0.02em; }
.reader-kicker time::before { content: "·"; margin-right: 10px; }
.reader-title { margin: 0 0 12px; font: 700 clamp(30px, 4.2vw, 44px)/1.14 var(--serif); letter-spacing: -0.02em; color: var(--r-text); }
.reader-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 18px; color: var(--r-text-2); font: 500 13px/1.3 var(--font); }
.reader-tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 12px 0 18px; border-top: 1px solid var(--r-line); border-bottom: 1px solid var(--r-line); margin-bottom: 26px; font-size: 15px; }
.tool-button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 1px solid var(--r-line); border-radius: 999px;
  background: transparent; color: var(--r-text); font: 600 14px/1 var(--font);
}
.tool-button:hover { background: var(--hover); }
.tool-button svg { width: 17px; height: 17px; }
.tool-button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tool-button[aria-busy="true"] { opacity: 0.6; }
.listen-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.listen-progress { display: flex; align-items: center; gap: 8px; color: var(--r-text-2); font: 500 12px/1 var(--font); font-variant-numeric: tabular-nums; }
.lp-bar { display: block; width: 140px; height: 4px; border-radius: 4px; background: var(--r-line); overflow: hidden; }
.lp-bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.ai-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.translate-group { display: inline-flex; gap: 6px; }
.ai-out:empty { display: none; }
.ai-out { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.ai-card { padding: 16px 18px; border-radius: 16px; background: var(--r-card); font-size: calc(var(--reader-size) * 0.9); }
.ai-card .ai-text p { margin: 0 0 10px; font-family: var(--serif); line-height: 1.6; }
.ai-note { margin: 8px 0 0; color: var(--r-text-2); font: 500 12px/1.4 var(--font); }
.reader-figure { margin: 0 0 24px; }
.reader-figure img { display: block; width: 100%; border-radius: 14px; }
.reader-figure figcaption { margin-top: 6px; color: var(--r-text-2); font: 500 12px/1.4 var(--font); }
.reader-body { font-family: var(--serif); line-height: 1.6; color: var(--r-text); }
.article-html p, .article-html li { margin: 0 0 1em; }
.article-html h2, .article-html h3 { margin: 1.4em 0 0.5em; font-family: var(--font-display); line-height: 1.25; }
.article-html blockquote { margin: 1.2em 0; padding-left: 1em; border-left: 3px solid var(--accent); color: var(--r-text-2); }
.article-html img { max-width: 100%; height: auto; border-radius: 12px; }
.article-html a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.article-html table { width: 100%; border-collapse: collapse; font: 14px/1.4 var(--font); }
.article-html th, .article-html td { padding: 6px 8px; border-bottom: 1px solid var(--r-line); text-align: start; }
.reader-article[dir="rtl"] .reader-body, .reader-article[dir="rtl"] .reader-title { line-height: 2; }
.reader-article[data-script="arab"] .reader-title { line-height: 1.7; }
.say.is-speaking, [data-say].is-speaking { background: color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.brief-card { padding: 20px 22px; border-radius: 18px; background: var(--r-card); }
.brief-label { margin: 0 0 8px; color: var(--accent); font: 800 11.5px/1.2 var(--font); letter-spacing: 0.08em; text-transform: uppercase; }
.brief-text { margin: 0 0 0.7em; }
.brief-text:last-child { margin-bottom: 0; }
.brief-text.muted { color: var(--r-text-2); }
.kp-wrap { margin-top: 22px; }
.kp-head { margin: 0 0 8px; font: 700 15px/1.3 var(--font); color: var(--r-text); }
.key-points { margin: 0; padding-left: 1.2em; }
.key-points li { margin: 0 0 0.5em; }
.key-points li::marker { color: var(--accent); }
.lead-quote { margin: 26px 0; padding: 4px 0 4px 20px; border-left: 4px solid hsl(var(--pv-h, 210) 45% 52%); font-style: italic; color: var(--r-text); }
.lead-quote p { margin: 0 0 6px; font-size: 1.08em; }
.lead-quote cite { color: var(--r-text-2); font: normal 600 13px/1.3 var(--font); }
.continue-button {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin: 26px 0 14px; padding: 0 20px;
  border-radius: 14px; background: var(--accent); color: var(--on-accent); font: 650 16px/1.2 var(--font); text-align: center;
}
.continue-button:hover { background: var(--accent-press); }
.continue-button svg { width: 18px; height: 18px; }
.reader-attribution { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--r-line); color: var(--r-text-2); font: 500 13px/1.45 var(--font); }
.reader-attribution a { color: var(--accent); }
.reader-after { margin-top: 34px; font-size: 15px; font-family: var(--font); }
.timeline-slot { margin-bottom: 18px; }
.related-head { margin: 0 0 6px; font: 800 13px/1.3 var(--font); letter-spacing: 0.08em; text-transform: uppercase; }
.related-sub { margin: 18px 0 4px; color: var(--r-text-2); font: 700 13px/1.3 var(--font); }
.reader .tcard { border-color: var(--r-line); }
.reader .tcard-head { color: var(--r-text); }
.reader-nav { max-width: 68ch; margin: 30px auto 0; text-align: center; }

@media (max-width: 860px) {
  .top-stories { grid-template-columns: 1fr; }
  .tcard-head { font-size: 18px; }
  .tcard-lead .tcard-head { font-size: 26px; }
  .tcard-thumb { width: 92px; }
  .tcard-lead .tcard-thumb { display: none; }
  .reader { padding: 0 16px 40px; }
  .reading-progress { margin: 0 -16px; }
  .theme-swatches { margin: 0 2px; gap: 4px; }
  .swatch { width: 22px; height: 22px; }
}
@media (max-width: 400px) {
  .reader-look .text-size { display: none; }
  .tcard-thumb { width: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .card.tile:hover .card-art, .card.news:hover, .card.tile:hover .art-photo, .card.tile:hover .has-photo .card-cap, .tcard-tile:hover { transform: none; }
  .art-photo { opacity: 1; }
  .art-photo.kb { animation: none !important; transform: none !important; }
}

/* Today front page: a lead story with a large photo, secondary stories beside it, and a photo card grid */

.today .page-head { padding-bottom: 16px; }
.today .feature { min-height: clamp(220px, 24vw, 300px); }
.today .row { margin-top: 22px; padding: 20px 0 4px; border-top: 1px solid var(--line); }
.today .row-head { margin-bottom: 16px; }

.front { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; }
.front-side { display: flex; flex-direction: column; padding-left: 24px; border-left: 1px solid var(--line); }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 20px; }

.tcard-media {
  container-type: inline-size; position: relative; flex: none; overflow: hidden; border-radius: 12px;
  background: linear-gradient(150deg, color-mix(in srgb, hsl(var(--pv-h) 60% 55%) 16%, var(--raised)), color-mix(in srgb, hsl(var(--pv-h) 55% 45%) 30%, var(--raised)));
}
.tcard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease, transform 0.6s var(--ease); }
.tcard-media.has-img img { opacity: 1; }
.tcard-mono {
  position: absolute; right: 6%; bottom: -0.16em; color: hsl(var(--pv-h) 45% 50%); opacity: 0.3;
  font: 750 28cqw/1 var(--font-display); letter-spacing: -0.05em; white-space: nowrap; pointer-events: none; user-select: none;
}
.tcard-media.has-img .tcard-mono { display: none; }

.tcard-front::before, .tcard-secondary::before, .tcard-grid::before { display: none; }
.tcard-front:focus-within, .tcard-secondary:focus-within { background: none; border-radius: 14px; }
.tcard-front:has(.tcard-head a:focus-visible), .tcard-secondary:has(.tcard-head a:focus-visible), .tcard-grid:has(.tcard-head a:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 4px;
}

.tcard-front, .tcard-front[dir="rtl"] { flex-direction: column; gap: 14px; padding: 0; border-top: 0; }
.tcard-front .tcard-media { order: -1; aspect-ratio: 16 / 9; border-radius: 18px; }
.tcard-front .tcard-body { gap: 6px; }
.tcard-front .tcard-head { font-size: clamp(26px, 2.5vw, 34px); line-height: 1.15; letter-spacing: -0.02em; }
.tcard-front .tcard-summary { font-size: 16.5px; -webkit-line-clamp: 3; }
.tcard-front:hover .tcard-media img { transform: scale(1.015); }

.tcard-secondary, .tcard-secondary[dir="rtl"] { gap: 14px; padding: 14px 0; align-items: flex-start; }
.front-side .tcard-secondary:first-child { border-top: 0; padding-top: 0; }
.tcard-secondary .tcard-media { width: 104px; aspect-ratio: 4 / 3; border-radius: 10px; margin-top: 2px; }
.tcard-secondary .tcard-head {
  font-size: 17px; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.tcard-secondary .tcard-meta { margin-top: 2px; }

.tcard-grid, .tcard-grid[dir="rtl"] {
  flex-direction: column; gap: 0; padding: 0; border-top: 0; border-radius: 16px; overflow: hidden;
  background: var(--surface); box-shadow: 0 0 0 0.5px var(--line-strong), var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.tcard-grid:focus-within { background: var(--surface); border-radius: 16px; }
.tcard-grid:hover { transform: translateY(-2px); box-shadow: 0 0 0 0.5px var(--line-strong), var(--shadow-md); }
.tcard-grid .tcard-media { order: -1; aspect-ratio: 16 / 9; border-radius: 0; }
.tcard-grid .tcard-body { padding: 12px 16px 14px; gap: 6px; }
.tcard-grid .tcard-head {
  font-size: 18px; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.tcard-grid .tcard-meta { margin-top: auto; padding-top: 6px; }
.tcard[data-script="arab"].tcard-secondary .tcard-head, .tcard[data-script="arab"].tcard-grid .tcard-head { font-size: 17px; line-height: 1.8; }

.sk.sk-media { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px; }
.front.is-skeleton .front-lead { display: flex; flex-direction: column; gap: 10px; }
.front.is-skeleton .front-lead .sk-media { margin-bottom: 6px; }
.sk-side { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.sk-side:first-child { border-top: 0; padding-top: 0; }
.sk-side-copy { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sk.sk-thumb { width: 104px; height: auto; aspect-ratio: 4 / 3; border-radius: 10px; }
.sk-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 0.5px var(--line-strong); }
.sk-card .sk-media { border-radius: 0; }
.sk-card-copy { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 22px; }

@media (max-width: 1000px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-row { --cols: 2.15; }
}
@media (min-width: 641px) and (max-width: 1000px) {
  .news-grid > :nth-child(n + 9) { display: none; }
}
@media (max-width: 860px) {
  .front { grid-template-columns: 1fr; gap: 6px; }
  .front-side { padding-left: 0; border-left: 0; }
  .front-side .tcard-secondary:first-child, .front.is-skeleton .sk-side:first-child { border-top: 1px solid var(--line); padding-top: 14px; }
}
@media (min-width: 641px) and (max-width: 860px) {
  .tcard-front .tcard-media, .front.is-skeleton .sk-media { aspect-ratio: 2 / 1; }
}
@media (max-width: 640px) {
  .today .row { margin-top: 14px; padding-top: 16px; }
  .news-grid { grid-template-columns: 1fr; gap: 12px; }
  .news-grid > :nth-child(n + 7) { display: none; }
  .tcard-grid, .tcard-grid[dir="rtl"] { flex-direction: row; align-items: flex-start; gap: 12px; padding: 12px; }
  .tcard-grid .tcard-media { order: 1; width: 96px; aspect-ratio: 4 / 3; border-radius: 10px; }
  .tcard-grid .tcard-body { padding: 0; }
  .tcard-grid .tcard-head { font-size: 16.5px; }
  .news-grid.is-skeleton .sk-card { flex-direction: row-reverse; gap: 12px; padding: 12px; }
  .news-grid.is-skeleton .sk-media { width: 96px; aspect-ratio: 4 / 3; border-radius: 10px; }
  .news-grid.is-skeleton .sk-card-copy { flex: 1; padding: 0; }
  .story-row { --cols: 1.12; gap: 12px; grid-auto-columns: calc((100% - 0.12 * 12px) / var(--cols)); }
  .tcard-front .tcard-media { border-radius: 14px; }
  .tcard-front .tcard-head { font-size: 25px; }
  .tcard-secondary .tcard-media { width: 88px; }
  .today .feature { min-height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .tcard-grid:hover, .tcard-front:hover .tcard-media img { transform: none; }
}

/* Place chip: an item's place, linking to the place page (bulletins and news from there). */
.place-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 16em; min-height: 24px; padding: 1px 8px 1px 6px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 550; text-decoration: none;
  position: relative; z-index: 1;
}
.place-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-chip svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.place-chip:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.place-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Story cards (Today): one card for articles, radio bulletins, and videos (storytile.js) */

.scard {
  --pv-h: 210; position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%;
  border-radius: 16px; overflow: hidden; background: var(--surface); cursor: pointer;
  box-shadow: 0 0 0 0.5px var(--line-strong), var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.scard:hover { transform: translateY(-2px); box-shadow: 0 0 0 0.5px var(--line-strong), var(--shadow-md); }
.scard:has(.scard-head a:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 3px; }
.scard.is-playing { box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-md); }

.scard-media { container-type: inline-size; position: relative; flex: none; aspect-ratio: 16 / 9; overflow: hidden; background: var(--raised); }
.scard-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.45s ease, transform 0.6s var(--ease); }
.scard-media.has-img .scard-img { opacity: 1; }
.scard:hover .scard-img { transform: scale(1.03); }

.scard-fallback {
  position: absolute; inset: 0; overflow: hidden; color: #fff;
  background:
    radial-gradient(120% 95% at 0% 0%, hsl(var(--pv-h) 62% 60% / 0.9) 0%, transparent 62%),
    linear-gradient(145deg, hsl(var(--pv-h) 46% 44%), hsl(calc(var(--pv-h) + 32) 44% 28%));
  transition: opacity 0.45s ease;
}
.scard-media.has-img .scard-fallback { opacity: 0; }
.scard-initial {
  position: absolute; right: 7%; top: 50%; transform: translateY(-54%);
  font: 700 46cqw/1.15 var(--serif); letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.3);
  pointer-events: none; user-select: none; white-space: nowrap;
}
.scard-fallback-name {
  position: absolute; left: 14px; right: 42%; bottom: 12px;
  font: 700 13px/1.25 var(--font); letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.94);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scard-fallback {
    background:
      radial-gradient(120% 95% at 0% 0%, hsl(var(--pv-h) 50% 46% / 0.85) 0%, transparent 62%),
      linear-gradient(145deg, hsl(var(--pv-h) 36% 32%), hsl(calc(var(--pv-h) + 32) 34% 19%));
  }
}
:root[data-theme="dark"] .scard-fallback {
  background:
    radial-gradient(120% 95% at 0% 0%, hsl(var(--pv-h) 50% 46% / 0.85) 0%, transparent 62%),
    linear-gradient(145deg, hsl(var(--pv-h) 36% 32%), hsl(calc(var(--pv-h) + 32) 34% 19%));
}

.scard-badge {
  position: absolute; left: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 7px; border-radius: 999px; background: rgba(20, 20, 20, 0.42); color: #fff;
  font: 650 11.5px/1.2 var(--font); letter-spacing: 0.01em;
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22);
}
.scard-badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scard-play {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px;
  padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: #111;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28); transition: transform 0.15s var(--ease), background 0.15s;
}
.scard-play svg { width: 16px; height: 16px; fill: currentColor; stroke: none; margin-left: 2px; }
.scard.is-playing:not(.paused) .scard-play svg { margin-left: 0; }
.scard-play:hover { transform: scale(1.07); background: #fff; }
.scard-play:active { transform: scale(0.94); }
.scard-play:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.scard-credit {
  position: absolute; left: 10px; bottom: 6px; z-index: 2; max-width: calc(100% - 70px);
  color: rgba(255, 255, 255, 0.88); font: 500 10px/1.3 var(--font); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity 0.2s;
}
.scard-media:not(.has-img) .scard-credit { display: none; }
.scard:hover .scard-credit, .scard:focus-within .scard-credit { opacity: 1; }

.scard-body { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px 13px; }
.scard-head {
  margin: 0; color: var(--text); font: 700 17px/1.32 var(--serif); letter-spacing: -0.01em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.scard:not([data-script="latn"]) .scard-head { line-height: 1.45; }
.scard[data-script="arab"] .scard-head { font-size: 16px; line-height: 1.85; }
.scard-head a { color: inherit; }
.scard-head a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.scard-head a:focus-visible { outline: none; text-decoration: underline; }
.scard-dek {
  margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.scard-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: auto 0 0; padding-top: 6px; min-width: 0;
  color: var(--text-3); font-size: 12.5px; line-height: 1.3;
}
.scard-source { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.scard-meta .pv-mark { width: 18px; height: 18px; border-radius: 5px; font-size: 8px; }
.scard-meta .pv-name { min-width: 0; color: var(--text-2); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scard-bit { flex: none; white-space: nowrap; }
.scard-bit::before { content: "·"; margin-right: 6px; }
.scard-meta .lang-chip, .scard-meta .place-chip { margin-left: 2px; }

/* Thumbnail beside the headline (Top stories column, phone grids) */
.scard-row, .scard-row[dir="rtl"] {
  flex-direction: row; align-items: flex-start; gap: 14px; height: auto; padding: 14px 0;
  border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; overflow: visible;
}
.scard-row:hover { transform: none; box-shadow: none; }
.scard-row .scard-media { order: 1; width: 128px; border-radius: 10px; margin-top: 2px; }
.scard-row .scard-body { padding: 0; gap: 4px; }
.scard-row .scard-head { font-size: 16.5px; }
.scard-row .scard-fallback-name, .scard-row .scard-badge span { display: none; }
.scard-row .scard-badge { left: 6px; top: 6px; padding: 3px; }
.scard-row .scard-play { right: 6px; bottom: 6px; width: 30px; height: 30px; }
.scard-row .scard-play svg { width: 12px; height: 12px; }
.scard-row .scard-initial { right: 50%; transform: translate(50%, -54%); font-size: 50cqw; }
.front-side .scard-row:first-child { border-top: 0; padding-top: 0; }

/* Lead story: large photo, headline, and summary */
.scard-lead, .scard-lead[dir="rtl"] { gap: 14px; height: auto; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.scard-lead:hover { transform: none; box-shadow: none; }
.scard-lead .scard-media { border-radius: 18px; }
.scard-lead:hover .scard-img { transform: scale(1.015); }
.scard-lead .scard-body { padding: 0; gap: 8px; }
.scard-lead .scard-head { font-size: clamp(26px, 2.5vw, 34px); line-height: 1.15; letter-spacing: -0.02em; -webkit-line-clamp: 4; }
.scard-lead:not([data-script="latn"]) .scard-head { line-height: 1.3; }
.scard-lead .scard-meta { margin-top: 2px; padding-top: 0; }
.scard-lead .scard-fallback-name { left: 22px; bottom: 18px; font-size: 16px; }
.scard-lead .scard-badge { left: 16px; top: 16px; }
.scard-lead .scard-play { right: 18px; bottom: 18px; width: 52px; height: 52px; }

/* Rows of equal cards that scroll sideways: 4 or 3 across on desktops, 2 on tablets, 1.2 on phones */
.card-row {
  --cols: 4; --gap: 18px;
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin;
  padding: 4px 2px 16px; margin: 0 -2px;
}
.card-row > * { scroll-snap-align: start; }

.lang-block + .lang-block { margin-top: 18px; }
.lang-block-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 12px; }
.lang-block-head .lang-block-title { margin: 0; font: 700 20px/1.3 var(--serif); letter-spacing: -0.01em; }
.lang-block-en { color: var(--text-3); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* Today's stories: the group's photo on top */
.story-card.has-media { padding-top: 0; }
.story-card.has-media::before { display: none; }
.story-card > .scard-media { margin: 0 -18px 4px; }
.story-card:hover .scard-img { transform: scale(1.03); }

/* Latest bulletins keep square tiles, trimmed to match the story cards */
.today .card.tile .card-art { box-shadow: 0 0 0 0.5px var(--line-strong), var(--shadow-sm); }
.today .card.tile .card-meta { color: var(--text-3); font-size: 12.5px; }

@media (max-width: 1100px) {
  .card-row { --cols: 3; }
}
@media (max-width: 860px) {
  .card-row { --cols: 2.15; --gap: 14px; margin: 0 -16px; padding: 4px 16px 16px; scroll-padding-inline: 16px; }
  .front { grid-template-columns: minmax(0, 1fr); }
  .front-side .scard-row:first-child { border-top: 1px solid var(--line); padding-top: 14px; }
}
@media (max-width: 640px) {
  .card-row { --cols: 1.2; --gap: 12px; }
  .scard-lead .scard-media { border-radius: 14px; }
  .scard-lead .scard-head { font-size: 25px; }
  .scard-row .scard-media { width: 112px; }
  .news-grid .scard-card, .news-grid .scard-card[dir="rtl"] { flex-direction: row; align-items: flex-start; gap: 12px; padding: 12px; }
  .news-grid .scard-card .scard-media { order: 1; width: 112px; border-radius: 10px; }
  .news-grid .scard-card .scard-body { padding: 0; }
  .news-grid .scard-card .scard-head { font-size: 16px; }
  .news-grid .scard-card .scard-fallback-name, .news-grid .scard-card .scard-badge span, .news-grid .scard-card .scard-credit { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scard:hover, .scard:hover .scard-img, .story-card:hover .scard-img { transform: none; }
}