/* ==========================================================================
   Liputan - mobile-first news portal
   Base styles target 360px. Wider screens layer on via min-width queries.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------ */
:root {
  /* Brand blues, read off the logo: deep on the left, cyan on the right. */
  --brand-deep: #004cff;
  --brand: #0875ed;
  --brand-dark: #004cff;
  --brand-light: #06a8fc;
  --brand-gradient: linear-gradient(90deg, #004cff 0%, #0875ed 50%, #06a8fc 100%);
  /* A deeper, moodier blue for panels that need to read as a section of
     their own rather than a bright call-to-action like the ticker/buttons. */
  --panel-dark-blue: linear-gradient(160deg, #041233 0%, #06215c 45%, #0a3aa6 100%);
  --bg: #ffffff;
  --bg-soft: #f5f6f8;
  --bg-elev: #ffffff;
  --text: #14171a;
  --text-soft: #5b636b;
  --text-faint: #8b949c;
  --border: #e4e7ea;
  --accent: #0b6bcb;

  --bg-page: #eeeeee;

  --radius: 8px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --gap: 20px;
  --pad: 12px;
  --header-h: 56px;
  --rail-h: 42px;
  --bottomnav-h: 60px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 6%);
  --shadow: 0 4px 16px rgb(0 0 0 / 8%);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: var(--font);

  /* 994px shell minus its 12px gutters leaves the 970px content band. */
  --maxw: 994px;
  --maxw-mobile: 768px;
  --side-w: 300px;
}

[data-theme="dark"] {
  --bg-page: #07090c;
  --bg: #0e1116;
  --bg-soft: #161a21;
  --bg-elev: #181d25;
  --text: #e8eaed;
  --text-soft: #a8b0b9;
  --text-faint: #78818b;
  --border: #262c35;
  --accent: #6aa9f0;
  /* The deep blue loses contrast on a dark ground, so the scale shifts up. */
  --brand: #2f90ff;
  --brand-dark: #0875ed;
  --brand-light: #56c4ff;
  --brand-gradient: linear-gradient(90deg, #0f5cff 0%, #2f90ff 50%, #56c4ff 100%);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow: 0 4px 16px rgb(0 0 0 / 45%);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-page);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }

/* The components below are toggled through the hidden attribute, and several
   of them set display in their own rules. Without this the attribute loses. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.3;
  margin: 0 0 .5em;
  font-weight: 700;
}

p { margin: 0 0 1em; }

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

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --- Layout ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.site-main { padding-block: 16px calc(var(--bottomnav-h) + 24px); }

.section { margin-bottom: 28px; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  border-left: 4px solid var(--brand);
  border-radius: 3px;
  padding-left: 10px;
}
.section-head h2 { font-size: 1.15rem; margin: 0; }
.section-head a { font-size: .8rem; color: var(--text-soft); font-weight: 600; }

/* --- Header ------------------------------------------------------------- */
/* Only the bar pins to the top. The category rail below belongs to the page
   and scrolls away with it, so the pinned strip stays one row tall. */
.header-main {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-elev);
  transition: box-shadow .2s ease;
}

/* At rest the bar and the rail are one block, so no divider. Once the page
   scrolls and the rail slides under the bar, the bar earns its own edge. */
.header-main.is-stuck { box-shadow: 0 1px 0 var(--border), 0 2px 8px rgb(0 0 0 / 6%); }

.site-header {
  position: relative;
  z-index: 40;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}

.header-bar {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -.02em;
  color: var(--brand);
  margin-right: auto;
  min-width: 0;
}
.site-brand .site-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-brand:hover { color: var(--brand-dark); }

.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  color: var(--text);
  flex: none;
}
.icon-btn:hover { background: var(--bg-soft); }
.icon-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Category chip rail */
.chip-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 0 10px;
  border-top: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}
.chip-rail::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
}
.chip:hover { color: var(--text); }
.chip.is-active { background: var(--brand); color: #fff; }

/* --- Breaking ticker ---------------------------------------------------- */
.ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--brand-gradient);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 16px;
  overflow: hidden;
}
.ticker-label {
  flex: none;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: rgb(255 255 255 / 20%);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}
.ticker-track { overflow: hidden; flex: 1; }
.ticker-items {
  display: flex;
  gap: 28px;
  white-space: nowrap;
  font-size: .85rem;
  animation: ticker-scroll 9s linear infinite;
}
.ticker:hover .ticker-items { animation-play-state: paused; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- Cards -------------------------------------------------------------- */
.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  color: var(--text-faint);
}
.card-cat {
  color: var(--brand);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.card-dot { opacity: .5; }

.thumb {
  position: relative;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-badge {
  position: absolute; left: 8px; top: 8px;
  background: var(--brand); color: #fff;
  font-size: .65rem; font-weight: 800; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-pill);
}

/* Hero card */
.card-hero { margin-bottom: 20px; }
.card-hero .thumb { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.card-hero .thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 82%) 0%, rgb(0 0 0 / 20%) 45%, transparent 70%);
  /* Purely decorative - without this, being a positioned element, it paints
     above the plain (non-positioned) .card-thumb-link and swallows clicks
     over the picture everywhere except where .hero-body's own real content
     happens to sit on top of it. */
  pointer-events: none;
}
.card-hero .hero-body {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 14px;
  color: #fff;
  z-index: 1;
}
/* The decorative link needs to actually cover the picture it sits behind,
   which a plain (non-positioned) anchor around a 100%-sized <img> only does
   by accident of layout - explicit here so it can't be knocked out from
   under it by a future change to .thumb's content. */
.card-hero .card-thumb-link { position: absolute; inset: 0; }
.card-hero h2 { font-size: 1.35rem; margin: 6px 0 0; color: #fff; }
.card-hero .card-meta { color: rgb(255 255 255 / 78%); }
.card-hero .card-cat { color: #fff; background: var(--brand); padding: 2px 8px; border-radius: var(--radius-pill); }

/* List card (thumb left, text right) */
.card-list {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.card-list:last-child { border-bottom: 0; }
.card-list .thumb { aspect-ratio: 1 / 1; }
.card-list h3 {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 4px 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-list .list-body { display: flex; flex-direction: column; min-width: 0; }
.card-list .card-meta { margin-top: auto; }

/* Grid card (stacked) */
.card-grid-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.card-stack h3 {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 8px 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Numbered popular list */
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.rank-item:last-child { border-bottom: 0; }
.rank-item:has(.rank-thumb) { grid-template-columns: 28px 96px 1fr; }
.rank-number {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--brand);
  opacity: .55;
  line-height: 1.2;
}
.rank-thumb .thumb { aspect-ratio: 1 / 1; }
.rank-text { min-width: 0; }
.rank-list h3 { font-size: .9rem; font-weight: 700; margin: 0 0 4px; }
.rank-views {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; color: var(--text-faint); margin-top: 4px;
}
.rank-views .icon { width: 14px; height: 14px; }

/* --- Drawer (mobile nav) ------------------------------------------------ */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgb(0 0 0 / 45%);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 90;
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(84vw, 320px);
  background: var(--bg-elev);
  z-index: 100;
  transform: translateX(-100%);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

/* A small uppercase label ahead of each drawer section (Sections, About),
   so a long category list and the legal links below it read as two
   deliberate groups instead of one undifferentiated stack. */
.drawer-label {
  padding: 14px 16px 4px;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
}

/* Two columns for the top-level sections: category names are short, and this
   roughly halves how far the list runs down the drawer. An item with a
   submenu (Sub Menu, with its toggle) spans both columns instead, so its
   expanded children have the full width to sit in rather than a half. */
.drawer-nav > ul {
  list-style: none;
  margin: 0;
  padding: 4px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
.drawer-nav > ul > li.menu-item-has-children { grid-column: 1 / -1; }
.drawer-nav a {
  display: block;
  padding: 10px 0;
  font-weight: 600;
  font-size: .9rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-nav a:hover { background: var(--bg-soft); }
.drawer-nav .sub-menu { padding-left: 4px; }
.drawer-nav .sub-menu a { padding-left: 12px; font-weight: 500; color: var(--text-soft); }

/* The About list (Redaksi, Kode Etik, ...) is short and secondary, so it
   reads smaller and lighter than the section list above it. */
.drawer-about ul { list-style: none; margin: 0; padding: 4px 0 8px; }
.drawer-about a {
  display: block;
  padding: 8px 16px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-soft);
}
.drawer-about a:hover { background: var(--bg-soft); color: var(--text); }

/* --- Search overlay ----------------------------------------------------- */
.search-panel {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 110;
  padding: 16px;
  display: none;
}
.search-panel.is-open { display: block; }
.search-form { display: flex; gap: 8px; align-items: center; }
.search-form input[type="search"] {
  flex: 1;
  padding: 12px 14px;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  color: var(--text);
}
.js-search-close { display: none; }
.search-panel .js-search-close { display: grid; }
.search-form button[type="submit"] {
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #fff;
  font-weight: 700;
}

/* --- Bottom nav --------------------------------------------------------- */
.bottom-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  height: var(--bottomnav-h);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a,
.bottom-nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: .65rem;
  font-weight: 600;
  color: var(--text-faint);
}
.bottom-nav a.is-active { color: var(--brand); }
.bottom-nav svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- Single post -------------------------------------------------------- */
.entry-header { margin-bottom: 16px; }
.entry-title { font-size: 1.55rem; margin-bottom: 10px; }
.entry-byline {
  display: flex; align-items: center; gap: 10px;
  font-size: .8rem; color: var(--text-soft);
  padding: 10px 0;
  border-block: 1px solid var(--border);
}
.entry-byline img { width: 32px; height: 32px; border-radius: 50%; }

.entry-content { font-size: 1.02rem; line-height: 1.75; }
.entry-content > * { margin-bottom: 1.1em; }
.entry-content h2 { font-size: 1.25rem; margin-top: 1.6em; }
.entry-content h3 { font-size: 1.08rem; margin-top: 1.4em; }
.entry-content img, .entry-content figure { border-radius: var(--radius-sm); }
.entry-content figcaption { font-size: .78rem; color: var(--text-faint); margin-top: 6px; }
.entry-content blockquote {
  margin: 1.4em 0;
  padding: 4px 0 4px 16px;
  border-left: 4px solid var(--brand);
  font-style: italic;
  color: var(--text-soft);
}
.entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: .9rem; display: block; overflow-x: auto; }
.entry-content th, .entry-content td { border: 1px solid var(--border); padding: 8px; text-align: left; }
.entry-content pre {
  background: var(--bg-soft);
  padding: 14px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: .85rem;
}

.entry-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.entry-tags a {
  font-size: .75rem; font-weight: 600;
  background: var(--bg-soft); color: var(--text-soft);
  padding: 5px 12px; border-radius: var(--radius-pill);
}

.share-bar { display: flex; gap: 8px; margin: 20px 0; }
.share-bar a, .share-bar button {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  font-size: .8rem;
  font-weight: 700;
}

/* Reading progress */
.read-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0;
  background: var(--brand-gradient);
  background-size: 100vw 100%;
  z-index: 80;
  transition: width .1s linear;
}

/* --- Pagination --------------------------------------------------------- */
.pagination { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 24px 0; }
.pagination .page-numbers {
  min-width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9rem; font-weight: 600;
}
.pagination .current { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- Comments ----------------------------------------------------------- */
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list li { padding: 14px 0; border-bottom: 1px solid var(--border); }
.comment-list .children { list-style: none; padding-left: 18px; }
.comment-meta { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--text-soft); margin-bottom: 6px; }
.comment-meta img { width: 28px; height: 28px; border-radius: 50%; }
.comment-form input, .comment-form textarea {
  width: 100%; padding: 10px 12px; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-soft); color: var(--text); font: inherit;
}
.comment-form .submit {
  background: var(--brand); color: #fff; font-weight: 700;
  padding: 11px 22px; border-radius: var(--radius-pill);
}

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  padding: 28px 0 calc(var(--bottomnav-h) + 24px);
  font-size: .85rem;
  color: var(--text-soft);
}
.footer-brand { font-weight: 900; font-size: 1.15rem; color: var(--brand); margin-bottom: 8px; }
.footer-cols { display: grid; gap: 20px; }
.footer-cols h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
/* Two links per row rather than one long vertical stack, which ran the
   Categories and About lists tall on a phone screen for no reason. */
.footer-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
.footer-cols li { padding: 4px 0; min-width: 0; }
.footer-cols li a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-info { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); font-size: .78rem; text-align: center; }

/* --- Utilities ---------------------------------------------------------- */
.no-results { padding: 40px 0; text-align: center; color: var(--text-soft); }


/* ==========================================================================
   Breakpoints - tablet 640px, desktop 1024px
   ========================================================================== */
@media (min-width: 640px) {
  :root { --pad: 24px; }
  .card-hero h2 { font-size: 1.7rem; }
  .card-hero .thumb { aspect-ratio: 16 / 9; }
  .entry-title { font-size: 2rem; }
  .card-grid-wrap { grid-template-columns: repeat(3, 1fr); }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
  .card-list { grid-template-columns: 160px 1fr; }
  .card-list h3 { font-size: 1.05rem; }
}

@media (min-width: 1024px) {
  :root { --header-h: 64px; }
  .site-main { padding-bottom: 40px; }
  .site-footer { padding-bottom: 28px; }
  .bottom-nav { display: none; }
  .content-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
  }
  .card-hero h2 { font-size: 2.1rem; }
  .entry-title { font-size: 2.4rem; }
  .entry-content { font-size: 1.08rem; }
  /* Matches the columns that actually exist (brand, Kategori, Tentang) - a
     4th track here with nothing in it was stealing width from the other
     three, which is what was forcing the fix below to begin with. */
  .footer-cols { grid-template-columns: 2fr 1fr 1fr; }
  /* Kategori's names are all short, so two columns fit; Tentang links
     ("Pedoman Pemberitaan Media Siber", "Kebijakan Privasi", ...) don't -
     squeezed into half of an already-narrow column, they were the ones
     getting truncated with an ellipsis. One column, full width. */
  .footer-col-legal ul { grid-template-columns: 1fr; }
  .footer-col-legal li a { overflow: visible; text-overflow: clip; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   News-portal layout: blocks, rails, article furniture, ad zones
   Mobile-first like the rest of the file; wider rules sit at the bottom.
   ========================================================================== */

/* --- Page shell --------------------------------------------------------- */
.layout { display: block; }
.layout-main { min-width: 0; }

.icon { width: 20px; height: 20px; }

/* --- Blocks ------------------------------------------------------------- */
.block { margin-bottom: 28px; }
.block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  border-left: 4px solid var(--brand);
  border-radius: 3px;
  padding-left: 10px;
}
.block-title { font-size: 1.15rem; margin: 0; }
.block-more { font-size: .8rem; color: var(--text-soft); font-weight: 600; }
.widget { margin-bottom: 28px; }
.zone > .widget:last-child { margin-bottom: 0; }

.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.headline-strip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: 4px; }

/* --- Horizontal rail ---------------------------------------------------- */
.rail { position: relative; }
.rail-track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.rail-track::-webkit-scrollbar { display: none; }
/* Exactly two cards per view at every width, same as the lead rail below the
   hero, rather than a peek of a third that made the two rails feel unlike
   each other. */
.card-slide { flex: 0 0 calc(50% - var(--gap) / 2); scroll-snap-align: start; max-width: 280px; }
.card-slide .slide-body { padding-top: 8px; }
.card-slide h3 {
  font-size: .92rem; font-weight: 700; line-height: 1.35; margin: 6px 0 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rail-nav { display: none; }

/* --- Video cards -------------------------------------------------------- */
.video-grid { display: grid; gap: var(--gap); }
.video-column { display: grid; gap: 4px; }
.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgb(0 0 0 / 55%);
  color: #fff;
}
.video-play .icon { width: 20px; height: 20px; margin-left: 2px; }
.video-time {
  position: absolute; right: 6px; bottom: 6px;
  background: rgb(0 0 0 / 75%); color: #fff;
  font-size: .68rem; font-weight: 700;
  padding: 2px 6px; border-radius: 4px;
}
.video-big h3 { font-size: 1.1rem; margin: 10px 0 4px; }
.video-big .summary { font-size: .85rem; color: var(--text-soft); margin: 0 0 6px; }

/* --- YouTube facade: poster + play button until clicked ----------------- */
/* .video-play's own default size (44px) fits the compact list-row thumb;
   the hero gets a bigger one since its picture has far more room. */
.yt-facade { cursor: pointer; }
.yt-facade .video-play { transition: transform .15s ease, background .15s ease; }
.yt-facade:hover .video-play { background: var(--brand); transform: scale(1.06); }
.card-hero .yt-facade .video-play { width: 60px; height: 60px; background: rgb(0 0 0 / 60%); }
.card-hero .yt-facade .video-play .icon { width: 26px; height: 26px; }
.yt-facade.is-playing .video-play,
.yt-facade.is-playing .hero-body,
.yt-facade.is-playing::after { display: none; }
.yt-facade iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-small {
  display: grid; grid-template-columns: 112px 1fr; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.video-small > a { display: contents; }
.video-small .thumb { aspect-ratio: 16 / 9; }
.video-small h3 {
  font-size: .88rem; font-weight: 700; line-height: 1.35; margin: 0 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- Hashtags ----------------------------------------------------------- */
.hashtags { display: flex; flex-wrap: wrap; gap: 8px; }
.hashtag {
  font-size: .8rem; font-weight: 700;
  background: var(--bg-soft); color: var(--text-soft);
  padding: 6px 12px; border-radius: var(--radius-pill);
}
.hashtag span { color: var(--brand); }
.hashtag:hover { background: var(--brand); color: #fff; }
.hashtag:hover span { color: #fff; }

/* --- Breadcrumbs -------------------------------------------------------- */
.breadcrumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  font-size: .75rem; color: var(--text-faint);
  margin-bottom: 12px;
}
.breadcrumbs a { font-weight: 600; }
.breadcrumbs .sep .icon { width: 12px; height: 12px; opacity: .6; }
.breadcrumbs .current { color: var(--text-soft); }

/* --- Article furniture -------------------------------------------------- */
.entry-head-row { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-block: 1px solid var(--border); }
.byline { display: flex; align-items: center; gap: 10px; }
.byline img { width: 40px; height: 40px; border-radius: 50%; }
.byline-name { font-weight: 700; font-size: .9rem; }
.byline-meta { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--text-faint); }
.meta-video { display: inline-flex; align-items: center; gap: 4px; }
.meta-video .icon { width: 12px; height: 12px; }

.entry-featured { margin: 0 0 16px; }
.entry-featured img { border-radius: var(--radius-sm); width: 100%; }
.entry-featured figcaption { font-size: .78rem; color: var(--text-faint); padding-top: 6px; }

.tags-label, .credits-label, .share-label {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-faint);
}
.credits { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 16px 0; font-size: .82rem; }
.credits-names { color: var(--text-soft); font-weight: 600; }

.share-bar { display: flex; align-items: center; gap: 8px; margin: 20px 0; flex-wrap: wrap; }
.share-btn {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--text-soft);
}
.share-btn:hover { background: var(--brand); color: #fff; }
.share-inline { margin: 0; }

.author-card {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px;
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 16px;
  margin: 24px 0;
}
.author-card img { width: 64px; height: 64px; border-radius: 50%; }
.author-role { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.author-card h3 { font-size: 1rem; margin: 2px 0 6px; }
.author-card p { font-size: .85rem; color: var(--text-soft); margin: 0; }

.post-nav { display: grid; gap: 10px; margin: 24px 0; }
.post-nav a {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.post-nav span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.post-nav strong { display: block; font-size: .9rem; margin-top: 4px; }

/* In-article "Read also" */
.read-also {
  border-left: 3px solid var(--brand);
  background: var(--bg-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 14px;
  margin: 20px 0;
}
.read-also-label {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--brand);
}
.read-also ul { list-style: none; margin: 6px 0 0; padding: 0; }
.read-also li { padding: 4px 0; }
.read-also a { font-size: .9rem; font-weight: 700; line-height: 1.4; }
.read-also a:hover { color: var(--brand); }

/* --- Load more and endless reading -------------------------------------- */
.load-more { text-align: center; margin: 24px 0; }
.btn-more, .btn-solid, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-weight: 700; font-size: .9rem;
}
.btn-more, .btn-solid { background: var(--brand-gradient); color: #fff; }
.btn-more:hover, .btn-solid:hover { background: var(--brand-dark); color: #fff; }
.btn-more.is-busy { opacity: .6; pointer-events: none; }
.btn-ghost { border: 1px solid var(--border); color: var(--text-soft); }
.btn-ghost .icon { width: 16px; height: 16px; }
.load-done { font-size: .82rem; color: var(--text-faint); }

.endless-item { border-top: 8px solid var(--bg-soft); margin-top: 32px; padding-top: 24px; }
.endless-status { display: grid; place-items: center; padding: 24px 0; }
.spinner-dots { display: flex; gap: 6px; }
.spinner-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); opacity: .3;
  animation: dot-pulse 1s infinite ease-in-out;
}
.spinner-dots i:nth-child(2) { animation-delay: .15s; }
.spinner-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* --- Archive and index heads -------------------------------------------- */
.archive-head { margin-bottom: 20px; }
.archive-title { font-size: 1.4rem; margin-bottom: 6px; }
.archive-desc { font-size: .88rem; color: var(--text-soft); }
.archive-sort { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.index-filter { display: grid; gap: 10px; margin-top: 14px; }
.filter-field { display: grid; gap: 4px; font-size: .78rem; color: var(--text-faint); font-weight: 600; }
.filter-field select, .filter-field input {
  padding: 10px 12px; font: inherit; font-size: .9rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-soft); color: var(--text); width: 100%;
}
.index-filter .btn-solid, .index-filter .btn-ghost { justify-self: start; }

.error-code { font-size: 3rem; color: var(--brand); margin-bottom: 8px; }

/* Paginated links printed by paginate_links( type => list ) */
ul.page-numbers {
  display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
  list-style: none; margin: 24px 0; padding: 0;
}
ul.page-numbers .page-numbers {
  min-width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9rem; font-weight: 600;
}
ul.page-numbers .current { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- Ad zones ----------------------------------------------------------- */
.ad-slot { display: grid; place-items: center; margin-inline: auto; overflow: hidden; }
.ad-label {
  display: block; font-size: .62rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-faint); margin-bottom: 4px;
}
.ad-billboard { min-height: 100px; max-width: 970px; }
.ad-leader { min-height: 90px; max-width: 728px; }
.ad-box { min-height: 250px; max-width: 300px; }
.ad-halfpage { min-height: 600px; max-width: 300px; }
.ad-skyscraper { min-height: 600px; max-width: 160px; }
.ad-mobile { min-height: 100px; max-width: 320px; }

.zone-billboard { padding: 10px var(--pad); background: var(--bg-soft); }
.zone-in-article { margin: 24px 0; }
.zone-hero-above { margin-bottom: 12px; }
.zone-hero-below { margin-bottom: 20px; }
.zone-latest-above { margin-bottom: 20px; }
.zone-latest-below { margin-bottom: 20px; }
.zone-pick-below { margin-bottom: 20px; }
.zone-rail { display: none; }

.sticky-ad {
  position: fixed; inset-inline: 0; bottom: var(--bottomnav-h);
  z-index: 55;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  padding: 6px;
  display: grid; place-items: center;
}
.sticky-ad .widget { margin: 0; }
.sticky-ad-close {
  position: absolute; top: -14px; right: 8px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-soft);
}
.sticky-ad-close .icon { width: 14px; height: 14px; }

/* --- Footer additions --------------------------------------------------- */
.social-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.social-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-soft);
}
.social-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.footer-network { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.network-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; font-size: .8rem; }

/* --- Search panel extras ------------------------------------------------ */
.search-suggest { margin-top: 18px; }
.search-suggest > span {
  display: block; font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-faint); margin-bottom: 8px;
}

/* --- Drawer submenu ----------------------------------------------------- */
.drawer-nav .menu-item-has-children { position: relative; }
.drawer-nav .submenu-toggle {
  position: absolute; top: 0; right: 0;
  width: 48px; height: 45px;
  display: grid; place-items: center;
  color: var(--text-faint);
}
.drawer-nav .submenu-toggle .icon { transition: transform .2s ease; }
.drawer-nav .menu-item-has-children.is-open > .submenu-toggle .icon { transform: rotate(180deg); }
.drawer-nav .sub-menu { display: none; }
.drawer-nav .menu-item-has-children.is-open > .sub-menu { display: block; }
.drawer-foot { margin-top: auto; display: grid; gap: 8px; padding: 16px; border-top: 1px solid var(--border); }

/* --- Theme toggle icon swap --------------------------------------------- */
.icon-in-dark { display: none; }
[data-theme="dark"] .icon-in-light { display: none; }
[data-theme="dark"] .icon-in-dark { display: block; }

/* --- Lightbox and toast ------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgb(0 0 0 / 92%);
  display: grid; place-items: center;
  padding: 16px;
}
.lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox-close {
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / 15%);
  color: #fff;
}

/* Small cards play their video here instead of in a thumbnail too tiny to
   watch anything in - a compact popup, not a full-bleed lightbox. */
.video-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgb(0 0 0 / 80%);
  display: grid; place-items: center;
  padding: 16px;
}
.video-modal-box {
  position: relative;
  width: min(92vw, 480px);
}
.video-modal-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.video-modal-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-modal-close {
  position: absolute; top: -44px; right: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / 15%);
  color: #fff;
}
/* Confirms on screen that the popup matches the card that opened it. */
.video-modal-title {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  text-align: center;
}
.video-modal-title:empty { display: none; }

.toast {
  position: fixed;
  bottom: calc(var(--bottomnav-h) + 16px);
  left: 50%;
  transform: translate(-50%, 12px);
  background: var(--text);
  color: var(--bg);
  font-size: .82rem; font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 210;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.to-top {
  position: fixed;
  right: 16px;
  bottom: calc(var(--bottomnav-h) + 16px);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--text-soft);
  z-index: 55;
}
.to-top .icon { transform: rotate(180deg); }

body.has-sticky-ad .site-footer { padding-bottom: calc(var(--bottomnav-h) + 90px); }

/* ==========================================================================
   Wider screens
   ========================================================================== */
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .headline-strip { grid-template-columns: repeat(4, 1fr); }
  .video-grid { grid-template-columns: 1fr 1fr; }
  .entry-head-row { flex-direction: row; align-items: center; justify-content: space-between; }
  .post-nav { grid-template-columns: 1fr 1fr; }
  .post-nav-next { text-align: right; }
  .index-filter { grid-template-columns: 1fr 1fr auto auto; align-items: end; gap: 12px; }
  .archive-title { font-size: 1.7rem; }
}

@media (min-width: 1024px) {
  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
  }
  .layout-side { position: sticky; top: calc(var(--header-h) + 16px); }
  .side-sticky { display: grid; gap: 24px; }

  .card-slide { max-width: 300px; }
  .rail-nav {
    position: absolute; top: 38%; z-index: 2;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    color: var(--text);
  }
  .rail-prev { left: -14px; }
  .rail-next { right: -14px; }
  .rail-nav.is-off { opacity: 0; pointer-events: none; }

  .sticky-ad { bottom: 0; }
  .toast, .to-top { bottom: 24px; }
  body.has-sticky-ad .site-footer { padding-bottom: 130px; }

}

/* The fixed side rails need room outside the 1160px shell. */
@media (min-width: 1500px) {
  .zone-rail {
    display: block;
    position: fixed;
    top: calc(var(--header-h) + 24px);
    z-index: 40;
  }
  .zone-rail-left { left: calc((100vw - var(--maxw)) / 2 - 180px); }
  .zone-rail-right { right: calc((100vw - var(--maxw)) / 2 - 180px); }
}

/* ==========================================================================
   Type scale and shell metrics
   Sizes follow the reference portal: a 14px/1.5 Inter base, a 768px white
   column on phones and tablets, and a 994px shell with a 300px rail from
   1024px up. Anything set earlier in this file is deliberately overridden
   here so the numbers live in one place.
   ========================================================================== */

/* --- Shell -------------------------------------------------------------- */
.header-main,
.site-header,
.site-main,
.site-footer,
.zone-billboard,
.sticky-ad {
  background: var(--bg);
  max-width: var(--maxw-mobile);
  margin-inline: auto;
}
.site-main { padding-block: 10px calc(var(--bottomnav-h) + 24px); }
.container { max-width: none; padding-inline: var(--pad); }

/* Menu button left, actions right, logo centred between them. The side
   columns share a width so the logo sits on the true centre of the bar. */
.header-bar {
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 4px;
}
.header-bar > .js-drawer-open { justify-self: start; }
.header-actions { display: flex; align-items: center; gap: 2px; justify-self: end; }

.site-brand {
  justify-self: center;
  margin-right: 0;
  justify-content: center;
  font-size: 1.3rem;
}

/* The bundled mark is 887x240, so height drives it and width follows. */
.site-logo { width: auto; height: 40px; max-width: min(60vw, 280px); object-fit: contain; }
.drawer-head .site-logo { height: 34px; }
.site-logo-footer { height: 40px; }
.icon-btn { width: 40px; height: 40px; }
.icon-btn svg { width: 21px; height: 21px; }

.chip-rail {
  border-top: 0;
  height: var(--rail-h);
  align-items: center;
  padding: 0;
  margin: 0;
  gap: 6px;
}
/* Plain bold text, no pill behind it. The row keeps the same order and the
   same starting position on every page; the section you are in is marked by
   colour alone, so nothing moves as you click through. */
.chip {
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  line-height: var(--rail-h);
}
.chip:hover { background: none; color: var(--brand); }
.chip.is-active { background: none; color: var(--brand); }
.chip-rail { gap: 16px; }

/* --- Section and widget headings ---------------------------------------- */
.block-title,
.section-head h2,
.footer-cols h4 {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .2px;
}
/* Widget headings a shade bolder than the footer columns they share a rule
   with, since they carry the rounded blue bar and want the extra weight. */
.block-title,
.section-head h2 { font-weight: 900; }
.block-head { margin-bottom: 10px; }
.block { margin-bottom: 20px; }
.widget { margin-bottom: 20px; }

/* --- Card meta ---------------------------------------------------------- */
.card-meta { font-size: 10px; gap: 6px; }
.card-cat { font-size: 10px; font-weight: 700; letter-spacing: .4px; }
.card-meta time { font-size: 10px; }
.summary {
  font-size: 13px;
  line-height: 20px;
  color: var(--text-soft);
  margin: 4px 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Feed row ----------------------------------------------------------- */
/* Text on the left, square picture on the right: category and time first,
   then the headline, image trailing rather than leading. The markup already
   puts the text first (the thumbnail link is aria-hidden, decorative), so
   this is only ever a column-width change, never a reorder. */
.card-list {
  grid-template-columns: 1fr 85px;
  gap: 10px;
  padding: 12px 0;
  align-items: center;
}
.card-list .thumb { border-radius: var(--radius-sm); }
.card-list h3 {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  margin: 4px 0;
}
.card-list .card-meta { margin-top: 0; }
.card-list .summary { display: none; }

/* --- Hero and stacked cards --------------------------------------------- */
.card-hero { margin-bottom: 16px; }
.card-hero h2 { font-size: 20px; font-weight: 700; line-height: 1.3; }
.card-hero .card-cat { font-size: 10px; }

.card-stack h3 { font-size: 14px; font-weight: 700; line-height: 20px; }
.card-slide h3 { font-size: 14px; font-weight: 700; line-height: 20px; }

/* --- Video, rank, related ----------------------------------------------- */
.video-big h3 { font-size: 18px; font-weight: 700; line-height: 1.3; }
.video-small h3 { font-size: 12px; font-weight: 700; line-height: 1.3; }
.video-small { grid-template-columns: 100px 1fr; }
.video-time { font-size: 10px; }

.rank-list h3 { font-size: 14px; font-weight: 700; line-height: 20px; }
.rank-number { font-size: 20px; font-weight: 800; }
.rank-item:has(.rank-thumb) { grid-template-columns: 24px 60px 1fr; }
.rank-item { grid-template-columns: 24px 1fr; gap: 10px; align-items: center; }

.block-related .card-stack h3 { font-size: 14px; line-height: 1.43; }

/* --- Editor's Pick: a blue panel around the block ------------------------ */
/* Phone/tablet gets the lead-hero-plus-rows treatment, desktop switches to
   one full-width row per pick - two different markups from the PHP side,
   toggled here rather than resized, since a hero card cannot be turned into
   a plain row (or back) with CSS alone. */
.editors-pick-grid { display: none; }
@media (min-width: 1024px) {
  .editors-pick-mobile { display: none; }
  .editors-pick-grid { display: grid; }
}

/* The lead card keeps its own hero markup untouched (already white-on-photo,
   readable against any panel colour); only the surrounding panel and the
   plain-text rows beside it need contrast fixes for sitting on blue. */
.block-editors-pick {
  background: var(--panel-dark-blue);
  border-radius: var(--radius);
  padding: 16px;
}
.block-editors-pick .block-head { border-left: 0; padding-left: 0; }
.block-editors-pick .block-title,
.block-editors-pick .block-more { color: #fff; }
.block-editors-pick .card-list { border-bottom-color: rgb(255 255 255 / 25%); }
.block-editors-pick .card-list h3 a { color: #fff; }
.block-editors-pick .card-list .card-cat { color: #fff; }
.block-editors-pick .card-list .card-dot,
.block-editors-pick .card-list time { color: rgb(255 255 255 / 75%); }
.block-editors-pick .card-list .thumb { background: rgb(255 255 255 / 12%); }
/* Unclamped, a long title just keeps growing the caption upward from the
   bottom-anchored .hero-body - past the gradient's darkened band and over
   the picture itself, readable or not against whatever is behind it. */
.block-editors-pick .card-hero h2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hashtag { font-size: 12px; font-weight: 700; padding: 6px 10px; }

/* --- Article ------------------------------------------------------------ */
.entry-title { font-size: 24px; font-weight: 800; line-height: 1.2; margin-bottom: 12px; }
.entry-content { font-size: 16px; line-height: 1.5; }
.entry-content > * { margin-bottom: .9em; }
.entry-content h2 { font-size: 18px; }
.entry-content h3 { font-size: 16px; }
.byline-name { font-size: 13px; font-weight: 700; }
.byline-meta { font-size: 11px; }
.byline img { width: 34px; height: 34px; }
.breadcrumbs { font-size: 11px; }
.read-also a { font-size: 14px; line-height: 20px; }
.read-also-label { font-size: 11px; }
.author-card h3 { font-size: 15px; }
.author-card p { font-size: 13px; }
.post-nav strong { font-size: 14px; line-height: 20px; }

/* --- Ticker, chips, buttons --------------------------------------------- */
/* The ticker sits right on top of the feed, so the gap under it is small and
   the main padding stops adding a second one. On phones it runs edge to edge
   by cancelling the container gutters, which buys room for the headline. */
.ticker {
  height: 42px;
  margin: 0 calc(var(--pad) * -1);
  padding: 0 var(--pad);
  border-radius: 0;
}
/* A solid white plate with the brand word on it. Sized off its own text so
   nothing crops it, and only slightly rounded. */
.ticker-label {
  display: inline-flex;
  align-items: center;
  align-self: center;
  height: 24px;
  padding: 0 10px;
  background: #fff;
  color: var(--brand-dark);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  line-height: 1;
}
.ticker-items { font-size: 14px; line-height: 1.4; font-weight: 500; }
/* The global a:hover turns links brand-blue, which nearly vanishes against
   this ticker's own blue background - headlines here stay plain white. */
.ticker-items a:hover { color: inherit; }
.chip { font-size: 13px; font-weight: 700; }
.btn-more, .btn-solid, .btn-ghost { font-size: 13px; padding: 10px 20px; }
.load-done { font-size: 12px; }

/* --- Footer ------------------------------------------------------------- */
.site-footer { font-size: 13px; padding-top: 24px; }
.footer-brand { font-size: 1.05rem; }
.network-list { font-size: 12px; }
.site-info { font-size: 11px; }

/* ==========================================================================
   1024px and up: the 994px shell with a 300px rail
   ========================================================================== */
@media (min-width: 1024px) {
  :root { --header-h: 64px; --rail-h: 46px; }

  .header-main,
  .site-header,
  .site-main,
  .site-footer,
  .zone-billboard,
  .sticky-ad {
    max-width: none;
  }
  .site-main { padding-block: 12px 40px; }
  .container { max-width: var(--maxw); }

  .layout { grid-template-columns: minmax(0, 1fr) var(--side-w); gap: 24px; }

  .header-bar { height: var(--header-h); gap: 8px; }
  .site-brand { font-size: 1.6rem; }
  .site-logo { height: 48px; max-width: 340px; }
  .site-logo-footer { height: 46px; }
  .chip { font-size: 14px; }

  .block-title, .section-head h2 { margin-bottom: 0; }
  .block-head { margin-bottom: 13px; }
  .block, .widget { margin-bottom: 20px; }

  /* Feed rows widen to a 200px landscape thumb, still trailing the text. */
  .card-list { grid-template-columns: 1fr 200px; gap: 15px; padding: 10px 0; }
  .card-list .thumb { aspect-ratio: 200 / 117; border-radius: 7px; }
  .card-list h3 { font-size: 17px; line-height: 1.4; }

  /* The sidebar column is only 300px wide - that same 200px thumb would
     leave barely 85px for the title and time, clipping both. A small
     square thumbnail instead, sized the way it already works on phones,
     leaves the text column enough room to read in full. */
  .layout-side .card-list { grid-template-columns: 1fr 84px; gap: 10px; }
  .layout-side .card-list .thumb { aspect-ratio: 1 / 1; border-radius: 6px; }
  .layout-side .card-list h3 { font-size: 14px; line-height: 20px; }

  /* Editor's Pick: one full-width row per pick instead of one hero beside a
     column of small ones - a hero's picture is always shorter than four
     stacked rows beside it, which just left dead space under it. Same card
     everywhere, thumb on the left (mirroring the usual text-left layout),
     sized up now that each row has the whole block's width to itself. */
  .editors-pick-grid {
    display: grid;
    gap: 4px;
  }
  .editors-pick-grid .card-list {
    grid-template-columns: 220px 1fr;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid rgb(255 255 255 / 15%);
    align-items: center;
  }
  .editors-pick-grid .card-list:last-child { border-bottom: 0; }
  .editors-pick-grid .card-list > :first-child { order: 2; }
  .editors-pick-grid .card-list > :last-child { order: 1; }
  .editors-pick-grid .card-list .thumb { aspect-ratio: 16 / 9; border-radius: 7px; }
  .editors-pick-grid .card-list h3 { font-size: 17px; line-height: 1.4; }
  .editors-pick-grid .card-list .card-meta { margin-top: 6px; }

  .card-hero h2 { font-size: 26px; }
  .card-hero .hero-body { padding: 20px; }

  .card-stack h3, .card-slide h3 { font-size: 14px; line-height: 20px; }
  .block-related .card-stack h3 { font-size: 14px; line-height: 1.43; }

  .entry-title { font-size: 34px; font-weight: 800; line-height: 1.3; margin: 13px 0 14px; }
  .entry-content { font-size: 16px; line-height: 23px; }
  .entry-content h2 { font-size: 22px; }
  .entry-content h3 { font-size: 18px; }

  .rank-item:has(.rank-thumb) { grid-template-columns: 28px 60px 1fr; }
  .video-small { grid-template-columns: 120px 1fr; }
  /* Back inside the shell on desktop, where the strip has room already. */
  .ticker { margin-inline: 0; border-radius: 0 0 7px 7px; }
  .site-footer { font-size: 13px; }
}

/* --- Front page lead ----------------------------------------------------- */
/* The hero and the four stories beside it are one block, so the top of the
   page reads as a front page rather than as a picture followed by a list. */
.lead {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
/* Trending keyword strip above the hero. The arrow is a fixed warm red,
   independent of the blue brand colour, since it reads as a status colour
   ("up") rather than as branding. */
.trending-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.trending-icon {
  flex: none;
  display: grid;
  place-items: center;
  color: #e6392f;
}
.trending-icon .icon { width: 18px; height: 18px; }
.trending-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.trending-scroll::-webkit-scrollbar { display: none; }
.trending-pill {
  flex: none;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.trending-pill:hover { border-color: var(--brand); color: var(--brand); }

/* The very first hero runs edge to edge on phones and tablets, cancelling the
   container gutters the way the breaking strip does, so the square corners
   read as intentional rather than as a picture that just lost its frame. */
.lead .card-hero {
  margin-bottom: 14px;
  margin-inline: calc(var(--pad) * -1);
}
.lead .card-hero .thumb { border-radius: 0; }

/* Two stories fill the phone width; the rest wait one swipe away, and the
   script pages through them two at a time and starts over at the end. */
.lead-secondary {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.lead-secondary::-webkit-scrollbar { display: none; }
.lead-secondary > * {
  flex: 0 0 calc(50% - 6px);
  scroll-snap-align: start;
}

/* Secondary cards stay stacked on phones: picture over headline. No category
   line, and every headline occupies the same three-line box whether it fills
   it or not, so the pictures and the text sit on one line across the row. */
.lead-secondary .card-stack { display: flex; flex-direction: column; }
.lead-secondary .card-stack > a { display: block; }
.lead-secondary .card-stack .thumb { aspect-ratio: 16 / 9; }
.lead-secondary .card-stack h3 {
  font-size: 13px;
  line-height: 18px;
  margin: 2px 0 0;
  min-height: 54px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The section name goes, the timestamp stays: it is what tells the reader how
   fresh the story is. It sits straight under the picture, hard left. */
.lead-secondary .card-cat,
.lead-secondary .card-dot { display: none; }
.lead-secondary .card-meta {
  font-size: 10px;
  margin: 6px 0 0;
  justify-content: flex-start;
}

@media (min-width: 640px) {
  /* Room for all four, so the rail becomes a plain row again. */
  .lead-secondary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    overflow: visible;
  }
  .lead-secondary > * { flex: none; }
}

@media (min-width: 1024px) {
  /* Hero runs the full width of the main column - never past it, since
     .layout-main is already boxed in by the sidebar column beside it - with
     the four extra stories on their own row underneath, rather than
     shrinking the hero to share a row with a narrow side column. */
  .lead {
    display: block;
    padding-bottom: 20px;
    margin-bottom: 24px;
  }
  .lead .card-hero { margin-bottom: 20px; margin-inline: 0; }
  .lead .card-hero .thumb { aspect-ratio: 16 / 10; border-radius: var(--radius); }
  .lead .card-hero h2 { font-size: 28px; }

  /* Two cards visible at a time, same as the phone layout, just bigger -
     .lead no longer squeezes this into a single narrow column, so the
     overflow that main.js's auto-slide needs to page through is back. */
  .lead-secondary {
    display: flex;
    grid-template-columns: none;
    gap: 20px;
    /* The 640px rule above turns this visible so all four show at once in
       its 4-column grid - back to a clipped, scrollable rail here, or the
       two off-screen cards spill out over the sidebar instead of staying
       hidden until auto-slide (or a swipe) brings them into view. */
    overflow-x: auto;
  }
  .lead-secondary > * { flex: 0 0 calc(50% - 10px); }

  .lead-secondary .card-stack { display: flex; flex-direction: column; }
  .lead-secondary .card-stack > a { display: block; }
  .lead-secondary .card-stack .thumb { aspect-ratio: 16 / 9; }
  .lead-secondary .card-stack h3 {
    font-size: 15px;
    line-height: 21px;
    margin: 8px 0 0;
    min-height: 0;
    -webkit-line-clamp: 2;
  }
  .lead-secondary .card-meta { font-size: 11px; margin-top: 6px; }
}