/* ==========================================================================
   Online Bangla Radio — desktop
   Same design language as the mobile app: warm near-black, amber accent,
   artwork-led. Laid out for a wide screen rather than scaled up from a phone.
   ========================================================================== */

:root {
  --bg: #14110E;
  --surface: #221D18;
  --surface-2: #2C251E;
  --fg: #F4EFE7;
  --fg-2: #D6CBBC;
  --muted: #9C8F80;
  --line: #383027;
  --accent: #F0A04B;
  --accent-ink: #1A1206;
  --accent-soft: #3A2A17;
  --shadow: 0 10px 34px rgba(0,0,0,.45);

  --display: 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --col: 1200px;          /* content column on a wide screen */
  --anchor-h: 0px;        /* bottom anchor ad, measured at runtime */
  --anchor-top-h: 0px;    /* top anchor ad */
  --dock-h: 0px;

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F7F3EC; --surface: #FFFFFF; --surface-2: #F0EAE0;
    --fg: #1B1612; --fg-2: #4A4038; --muted: #7A6E63; --line: #E2D9CC;
    --accent: #B4530A; --accent-ink: #FFFFFF; --accent-soft: #FBEAD8;
    --shadow: 0 10px 34px rgba(60,40,20,.14);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F7F3EC; --surface: #FFFFFF; --surface-2: #F0EAE0;
  --fg: #1B1612; --fg-2: #4A4038; --muted: #7A6E63; --line: #E2D9CC;
  --accent: #B4530A; --accent-ink: #FFFFFF; --accent-soft: #FBEAD8;
  --shadow: 0 10px 34px rgba(60,40,20,.14);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* Elementor's kit paints the page through a body class, which beats a bare
   `body` selector. This matches that specificity so the theme's background and
   text colour hold everywhere, including on the pages Elementor renders. The
   sections inside those pages set their own colours and are more specific
   still, so their design is untouched. */
body.obr-body { background: var(--bg); color: var(--fg); }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1,h2,h3,h4 { font-family: var(--display); font-weight: 700; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.muted { color: var(--muted); font-size: 14px; }
.empty { color: var(--muted); text-align: center; padding: 40px 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------- app bar --- */

.topbar {
  position: sticky; top: var(--anchor-top-h, 0px); z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: transform .25s ease;
}
@supports not (backdrop-filter: blur(1px)) { .topbar { background: var(--bg); } }

/*
 * Two guards, both about Auto Ads. It injects containers between the block
 * children of anything it reads as content, and on the mobile build it put a
 * 390px ad inside this bar — which, being sticky, then occupied most of the
 * screen on every page. If anything lands in here the bar stops being sticky
 * and scrolls away with the page.
 *
 * It un-sticks rather than hiding or clipping: a hidden ad breaks AdSense
 * policy and loses the impression, one that scrolls normally does neither.
 */
.topbar.is-unstuck { position: static; transform: none !important; }
.topbar.is-hidden { transform: translateY(-100%); }

.topbar__inner { max-width: var(--col); margin: 0 auto; padding: 10px 24px; }
/* Brand, search and theme on one line; the sections on their own below, so a
   long menu has room to breathe instead of being squeezed against the search.
 *
 * Both rows carry a fixed height. The webfont arrives after first paint, and
 * without this the chips and the brand reflow a few pixels taller, which moves
 * the whole page down — one shift worth 0.20 of a 0.23 CLS score. Reserving
 * the space means the swap changes the letterforms and nothing else. */
.topbar__row { display: flex; align-items: center; gap: 16px; height: 44px; }
.brand { flex: 0 0 auto; margin-right: auto; }
.brand img { height: 34px; width: auto; object-fit: contain; }

.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; height: 48px; align-items: center; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 0 15px; height: 32px; display: inline-flex; align-items: center; border-radius: 999px;
  background: var(--surface-2); color: var(--muted);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background .15s, color .15s;
}
.chip:hover { color: var(--fg); }
.chip--on { background: var(--accent); color: var(--accent-ink); }

.search { display: flex; gap: 6px; flex: 0 0 auto; }
.search input {
  width: 230px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 12px; color: var(--fg); font-size: 14px;
}
.search input::placeholder { color: var(--muted); }
.search button {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 0 12px; display: grid; place-items: center; color: var(--fg-2);
}
.search button svg { width: 16px; height: 16px; fill: currentColor; }
.search button:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.search--page { margin-top: 14px; }
.search--page input { width: min(420px, 100%); font-size: 15px; padding: 11px 14px; }
.search--page button { padding: 0 20px; font-weight: 700; font-size: 14px; }

.icon-btn {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%;
  background: var(--surface-2); color: var(--fg-2); display: grid; place-items: center;
}
.icon-btn svg { width: 17px; height: 17px; fill: currentColor; }
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }

/* ---------------------------------------------------------------- shell --- */

.site-main { min-height: 50vh; }
.home, .listing, .story, .page-article {
  max-width: var(--col); margin: 0 auto;
  padding: 28px 24px calc(40px + var(--dock-h) + var(--anchor-h));
}
.section { margin-bottom: 36px; min-width: 0; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section__head h2 { font-size: 21px; font-weight: 600; }
.section__head a { font-size: 13px; font-weight: 600; color: var(--accent); flex: 0 0 auto; }

.eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 8px; }
.page-title { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; }
.listing__head { margin-bottom: 24px; }
.page-header { margin-bottom: 20px; }

/* ----------------------------------------------------------------- hero --- */

.hero {
  display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 24px; margin-bottom: 36px;
}
.hero__art { display: block; }
.hero__art { aspect-ratio: 1; }
.hero__art .art { width: 100%; aspect-ratio: 1; border-radius: 14px; object-fit: cover; box-shadow: var(--shadow); }
.hero__body { min-width: 0; }
.hero__title { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; margin-bottom: 8px; }
.hero__title a:hover { color: var(--accent); }
.hero__meta { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 999px; padding: 11px 22px; font-weight: 700; font-size: 15px;
}
.btn svg { width: 15px; height: 15px; fill: currentColor; }
.btn:hover { filter: brightness(1.07); }

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero__art .art { max-width: 220px; margin: 0 auto; }
}

/* ---------------------------------------------------------------- cards --- */

/* Fixed column counts rather than auto-fill: the number of cards each section
   asks for is chosen to fill these rows exactly, so no row ends with one
   stranded card. */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 880px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

/* The story page's grids sit in a narrower column. */
.story__main .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1240px) { .story__main .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .story__main .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card__art { position: relative; display: block; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.card__art .art { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .3s ease; }
.card:hover .card__art .art { transform: scale(1.04); }
.card__play {
  position: absolute; right: 10px; bottom: 10px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s;
}
.card__play svg { width: 14px; height: 14px; fill: currentColor; }
.card:hover .card__play, .card:focus-visible .card__play { opacity: 1; transform: translateY(0); }
.card__body { min-width: 0; }
.card__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-weight: 600; font-size: 14.5px; line-height: 1.35;
}
.card:hover .card__title { color: var(--accent); }
.card__meta { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }

/*
 * Generated cover. Most of the library has no artwork, so this needs to look
 * intended rather than missing: a deep gradient, the story's initial, and the
 * station's wave mark sitting behind it.
 */
.art--fallback {
  position: relative; overflow: hidden;
  display: grid; place-items: center; width: 100%; aspect-ratio: 1;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 22cqw, 56px);
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
  container-type: inline-size;
}
/* Concentric arcs — the broadcast mark from the logo, used as a watermark. */
.art--fallback::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 118%, transparent 30%, rgba(255,255,255,.07) 31%, transparent 32%),
    radial-gradient(circle at 50% 118%, transparent 46%, rgba(255,255,255,.06) 47%, transparent 48%),
    radial-gradient(circle at 50% 118%, transparent 62%, rgba(255,255,255,.05) 63%, transparent 64%);
}
/* A touch of depth so the initial does not float on flat colour. */
.art--fallback::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.10), transparent 60%);
}
.art--fallback > span { position: relative; z-index: 1; }
.tile .art--fallback, .card__art .art--fallback, .hero__art .art--fallback { border-radius: inherit; }
.row .art--fallback { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 10px; font-size: 22px; }
.player__cover .art--fallback { border-radius: 14px; font-size: 64px; }
.dock .art--fallback { font-size: 16px; }
/* Station logos are wordmarks drawn for white, with their own margins — they
   are letterboxed rather than cropped, or the lettering gets cut in half. */
.art--logo { object-fit: contain !important; background: #fff; padding: 8px; }

/* Rows, for dense lists */
.list { display: flex; flex-direction: column; gap: 10px; }
.row {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 14px 10px 10px;
}
.row:hover { border-color: var(--accent); }
.row .art { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 10px; object-fit: cover; }
.row__meta { min-width: 0; flex: 1; }
.row__title { display: block; font-weight: 600; font-size: 15px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row__sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.row__play { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--line);
  color: var(--accent); display: grid; place-items: center; }
.row__play svg { width: 12px; height: 12px; fill: currentColor; }

/* Stations */
.shelf { display: grid; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .shelf { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 880px)  { .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.tile { min-width: 0; }
.tile .art { width: 100%; aspect-ratio: 1; border-radius: 12px; }
.tile__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px; font-weight: 600; margin-top: 8px; line-height: 1.3; }
.tile:hover .tile__title { color: var(--accent); }
.tile__sub { display: block; font-size: 11.5px; color: var(--muted); }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #E5484D; margin-right: 6px; vertical-align: 1px; }

.pills { display: flex; flex-wrap: wrap; gap: 9px; }
.pill { background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-size: 14px; font-weight: 600; }
.pill:hover { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------- story --- */

.story__grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 36px; align-items: start; }
@media (max-width: 1000px) { .story__grid { grid-template-columns: 1fr; gap: 28px; } }
.story__main { min-width: 0; }
.story__side { min-width: 0; }

.player {
  display: grid; grid-template-columns: 240px minmax(0,1fr);
  grid-template-areas: "cover head" "cover bar" "cover controls" "cover secondary" "cover hint";
  gap: 14px 28px; align-content: start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 26px; margin-bottom: 20px;
}
.player__cover { grid-area: cover; align-self: start; }
.player__cover .art, .player__img { width: 100%; aspect-ratio: 1; border-radius: 14px; object-fit: cover; box-shadow: var(--shadow); }
.player__cover .art--fallback { border-radius: 14px; }
.player__head { grid-area: head; min-width: 0; }
.player__title { font-size: clamp(19px, 2vw, 25px); line-height: 1.25; }
.player__meta { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.player__meta a { color: var(--accent); font-weight: 600; }
.player__meta i { font-style: normal; opacity: .5; margin: 0 5px; }
.player__bar { grid-area: bar; }
.player__hint { grid-area: hint; color: var(--muted); font-size: 13px; margin: 0; }

@media (max-width: 680px) {
  .player { grid-template-columns: 1fr; grid-template-areas: "cover" "head" "bar" "controls" "secondary" "hint"; text-align: center; padding: 20px; }
  .player__cover { max-width: 220px; margin: 0 auto; }
}

.seek { height: 5px; border-radius: 3px; background: var(--line); position: relative; cursor: pointer; touch-action: none; }
.seek::before { content: ''; position: absolute; inset: -12px 0; }
.seek__fill { height: 100%; width: 0; border-radius: 3px; background: var(--accent); position: relative; }
.seek__fill::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; border-radius: 50%; background: var(--accent); }
.seek__buffer { position: absolute; inset: 0 auto 0 0; height: 100%; width: 0; border-radius: 3px; background: var(--muted); opacity: .3; }
.times { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 8px; font-variant-numeric: tabular-nums; }
.times--solo { grid-area: bar; max-width: 220px; }

.controls { grid-area: controls; display: flex; align-items: center; gap: 20px; }
@media (max-width: 680px) { .controls { justify-content: center; } }
.controls button { color: var(--fg-2); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.controls button:hover { background: var(--surface-2); color: var(--fg); }
.controls svg { width: 22px; height: 22px; fill: currentColor; }
.controls .play-big { width: 62px; height: 62px; background: var(--accent); color: var(--accent-ink); }
.controls .play-big:hover { background: var(--accent); filter: brightness(1.08); }
.controls .play-big svg { width: 26px; height: 26px; }
.controls .small svg { width: 18px; height: 18px; }

.controls--secondary { grid-area: secondary; gap: 10px; }
.controls--secondary button {
  width: auto; height: 36px; padding: 0 18px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--fg-2);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 76px; white-space: nowrap;
}
.controls--secondary button.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* Queue */
.queue { display: flex; flex-direction: column; gap: 2px; max-height: 460px; overflow-y: auto; }
.queue__item { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 9px;
  min-width: 0; text-align: left; width: 100%; }
.queue__item:hover { background: var(--surface); }
.queue__item.is-playing { background: var(--accent-soft); }
.queue__item.is-playing .queue__num { color: var(--accent); }
.queue__num { font-size: 12px; color: var(--muted); width: 20px; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.queue__title { font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

/* ---------------------------------------------------------------- prose --- */

.prose { max-width: 70ch; color: var(--fg-2); }
.prose p { margin: 0 0 1em; }
.prose a { color: var(--accent); text-decoration: underline; }
.prose h2, .prose h3 { color: var(--fg); margin: 1.6em 0 .5em; }
.prose img { border-radius: 10px; margin: 1em 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.post-hero img { border-radius: 14px; margin-bottom: 20px; }

/* ------------------------------------------------------------------ ads --- */

.ad { margin: 20px 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ad--auto { min-height: 0; }
/* Edge-to-edge positions cancel the container's side padding, so a responsive
   unit is offered the full width and can bid for the larger sizes. */
.ad--full { margin-left: -24px; margin-right: -24px; width: calc(100% + 48px); max-width: none; }
.ad--full > ins { width: 100%; }
@media (max-width: 680px) { .ad--full { margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); } }

/* --------------------------------------------------------- pagination ---- */

.pagination, .navigation.pagination { margin-top: 32px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; align-items: center; }
.page-numbers {
  min-width: 42px; height: 42px; padding: 0 13px;
  display: grid; place-items: center; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.page-numbers.current { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.page-numbers.dots { background: none; border: none; color: var(--muted); min-width: 20px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ----------------------------------------------------------------- dock --- */

.dock {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--anchor-h) + env(safe-area-inset-bottom, 0px));
  z-index: 35; background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 26px rgba(0,0,0,.26);
  transform: translateY(110%); transition: transform .22s ease;
}
.dock.is-open { transform: translateY(0); }
.dock__inner { display: flex; align-items: center; gap: 12px; padding: 10px 24px;
  max-width: var(--col); margin: 0 auto; }
.dock .art { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex: 0 0 auto;
  display: grid; place-items: center; overflow: hidden; background: var(--surface-2); }
.dock__meta { min-width: 0; flex: 1; display: block; overflow: hidden; }
.dock__title { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock__sub { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock__btn { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; flex: 0 0 auto; }
.dock__btn svg { width: 16px; height: 16px; fill: currentColor; }
.dock__close { color: var(--muted); width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; }
.dock__close svg { width: 14px; height: 14px; fill: currentColor; }
.dock__close:hover { color: var(--fg); }
.dock__progress { height: 2px; background: var(--line); }
.dock__progress i { display: block; height: 100%; width: 0; background: var(--accent); }

/* --------------------------------------------------------------- footer --- */

.site-footer { border-top: 1px solid var(--line); margin-top: 40px; }
.site-footer__inner { max-width: var(--col); margin: 0 auto;
  padding: 36px 24px calc(36px + var(--dock-h) + var(--anchor-h)); }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; margin-bottom: 26px; }
@media (max-width: 680px) { .footer-cols { grid-template-columns: 1fr; gap: 24px; } }
.footer-col h3 { font-size: 16px; margin-bottom: 10px; }
.footer-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-nav a { color: var(--fg-2); font-size: 14px; }
.footer-nav a:hover { color: var(--accent); }
.app-badge { display: inline-block; margin-top: 14px; }
.copyright { color: var(--muted); font-size: 13px; margin: 0; padding-top: 20px; border-top: 1px solid var(--line); }

/* Elementor pages keep their own widths; the theme adds no container. */
.obr-elementor-page .elementor-page-content { width: 100%; }

@media (max-width: 860px) {
  .topbar__inner { padding: 10px 16px; }
  .search input { width: 100%; min-width: 0; }
  .search { flex: 1 1 auto; min-width: 0; }
  .brand img { height: 28px; }
  .home, .listing, .story, .page-article, .site-footer__inner, .dock__inner { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }