/* BeritaAndalan theme for Rustpress.
 *
 * Every value below was measured off the live beritaandalan.com with
 * getComputedStyle / getBoundingClientRect. Nothing is eyeballed from a
 * screenshot -- a vision pass on the same page reported "black header, red
 * nav bar", while the DOM reports header #fdfdfd and nav #2b2b60.
 *
 * Measured source values reproduced here:
 *   container     1300px max-width
 *   columns       304 | 658 | 304, gap 0 (padding does the spacing)
 *   rail padding  20px          main padding 0 30px
 *   font          Poppins; body 17px/27.2px #4c4c4c
 *   post h1       21px/34px 600 #1e1e1e
 *   nav bar       37px tall, items #2b2b60, padding 9px 20px, font 12px
 *   badge         11px 600, padding 3px 10px, radius 4px, #e90000
 *   rail thumb    90x90 cover       rail title 14px/21px 600
 *   feed thumb    269x202 cover     feed card 598px wide, flex row
 *   widget title  4px x 20px bar, #e90000 (source: #000 light / #e90000 dark)
 *   see-all       264x36, bg #f5f5f5, 10px 500 uppercase, radius 4px
 *   read-more     #e90000 13px
 *   section head  19.2px 600 #1c293b, padding-left 15px
 *   breakpoints   1024 / 980 / 900 / 640
 *
 * Two deliberate corrections to the source, both measured:
 *   1. The date pill uses white text on #ffb60a = 1.76:1, failing WCAG AA.
 *      Black text on the same amber is 11.95:1. Black is used here.
 *   2. Category archives serve 200 articles per page in the source. Rustpress
 *      paginates, so the feed is capped by the handler instead.
 */

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

:root {
  --red: #e90000;
  --navy: #2b2b60;
  --ink: #1e1e1e;
  --body: #4c4c4c;
  --head: #1c293b;
  --bg: #fdfdfd;
  --tint: #f1f6fd;
  --grey: #f5f5f5;
  --line: rgba(0, 0, 0, 0.09);
  --amber: #ffb60a;
  --shell: 1300px;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 400 17px/1.6 Poppins, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }

/* Visible focus ring: the source removes outlines entirely, which strands
 * keyboard users. Kept, scoped so it never shows on mouse clicks. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.container { max-width: var(--shell); margin: 0 auto; width: 100%; }
/* Source side padding is NOT on the shared wrapper: measured content start
 * is x=30 in the header but x=0 for the 3-column layout (.sdWrp) and the
 * nav/ticker strips. Putting padding on .container would shift the rails
 * off 0 and break the column match, so scope it to the header. */
.hd-wrap .container { padding: 0 30px; }

/* ---------- ticker (35px) ---------- */
.ticker-bar { background: #fff; border-bottom: 1px solid var(--line); height: 35px; overflow: hidden; }
.ticker-inner { display: flex; align-items: center; height: 35px; gap: 12px; }
.ticker-label {
  background: var(--red); color: #fff; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px;
  border-radius: 3px; flex: none;
}
.ticker-viewport { overflow: hidden; flex: 1; }
.ticker-list {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 34px;
  white-space: nowrap; animation: ticker 38s linear infinite;
}
.ticker-list li { font-size: 13px; color: var(--ink); }
.ticker-list a:hover { color: var(--red); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-list { animation: none; overflow-x: auto; }
}

/* ---------- header (88px) ---------- */
.hd-wrap { background: var(--bg); border-bottom: 1px solid var(--line); }
.hd-inner { display: flex; align-items: center; justify-content: space-between; height: 88px; gap: 20px; }
.hd-logo img { max-height: 54px; width: auto; }
.hd-logo-text { font-size: 24px; font-weight: 600; color: var(--navy); letter-spacing: -.02em; }
.hd-right { display: flex; align-items: center; gap: 14px; }

.hd-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--amber); color: #000; border-radius: 4px;
  padding: 5px 12px; line-height: 1.25; flex: none;
}
.hd-day { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.hd-dmy { font-size: 12px; font-weight: 500; }

.hd-search { display: flex; align-items: center; height: 38px; }
.hd-search input {
  height: 38px; width: 230px; border: 1px solid var(--line); border-right: 0;
  border-radius: 4px 0 0 4px; padding: 0 12px; font: inherit; font-size: 13px;
  background: #fff; color: var(--ink); min-width: 0;
}
.hd-search input::placeholder { color: #8a8a8a; }
.hd-search button {
  height: 38px; width: 44px; border: 0; border-radius: 0 4px 4px 0;
  background: var(--navy); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.hd-search button:hover { background: var(--red); }

.hd-menu-btn {
  display: none; background: transparent; border: 0; color: var(--navy);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 6px 8px;
}

/* ---------- category nav (37px) ---------- */
.nav-bar { background: var(--navy); }
.nav-tabs {
  list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch;
  overflow-x: auto; scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs > li { flex: none; }
.nav-tabs > li > a {
  display: block; padding: 9px 20px; font-size: 12px; font-weight: 500;
  color: #fff; letter-spacing: .03em; white-space: nowrap;
}
.nav-tabs > li > a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.nav-tabs > li.active > a { background: var(--red); color: #fff; }

.mobile-menu { display: none; background: var(--navy); }
.mobile-menu.open { display: block; padding: 6px 0 14px; }
.mobile-menu a {
  display: block; padding: 11px 20px; color: #fff; font-size: 13px; font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/* ---------- breadcrumb ---------- */
.crumb-bar { border-bottom: 1px solid var(--line); background: #fff; }
.crumb { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 12px 30px; color: #6b6b6b; }
.crumb-sep { color: #b4b4b4; }
.crumb-now { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 3-column shell: 304 | 658 | 304 ----------
 * Measured on the source: .sdWrp 304 (padding 20px), main 658
 * (padding 0 30px). `main` carries NO top padding there -- the first
 * card sits flush with the rails' first widget (both at y=283). */
.layout { display: flex; align-items: flex-start; }
.rail { width: 304px; flex: none; padding: 20px; }
.main-col { width: 658px; flex: 0 0 658px; min-width: 0; padding: 0 30px; }

/* ---------- widget ---------- */
.widget { margin-bottom: 30px; }
.widget-title { position: relative; padding-left: 15px; margin-bottom: 15px; }
.widget-title::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 4px; height: 20px; background: var(--red); border-radius: 1px;
}
/* Source measures 19.2px/600 on h3.title (1.2rem at 16px root). */
.widget-title h3 { margin: 0; font-size: 19.2px; font-weight: 600; color: var(--head); }

/* ---------- operator widget bands (after_header / after_content /
 * archive_inline) ----------
 * Full-width strips rather than rail cards. `.widget-band-inner` reuses the
 * same 30px gutter as `.hd-wrap .container` so the band's left edge lines up
 * with the header and nav above it instead of floating 30px off.
 * Widgets inside a band sit side by side; the rail rule above gives them a
 * 30px bottom margin, which is wrong horizontally, so it is reset here. */
.widget-band { width: 100%; background: var(--band-bg, #f7f7fa); border-top: 1px solid var(--line, #e4e4ec); border-bottom: 1px solid var(--line, #e4e4ec); }
.widget-band-inner { display: flex; flex-wrap: wrap; gap: 20px 30px; padding: 20px 30px; }
.widget-band .widget { margin-bottom: 0; flex: 1 1 280px; min-width: 0; }
.widget-band .band-list { margin: 0; padding-left: 18px; }
.widget-band .band-list li { margin-bottom: 6px; }
/* after_content sits between the article and the related/comments blocks,
 * which already carry their own vertical rhythm -- so only the in-feed and
 * post bands need breathing room of their own. */
.widget-band-after-content, .widget-band-archive-inline { margin: 30px 0; }

/* rail lead card */
.rail-lead { display: block; margin-bottom: 15px; }
.rail-lead img { width: 100%; aspect-ratio: 264 / 150; object-fit: cover; border-radius: 4px; }
.rail-lead-title {
  display: block; margin-top: 9px; font-size: 15px; font-weight: 600;
  line-height: 1.4; color: var(--ink);
}
.rail-lead:hover .rail-lead-title { color: var(--red); }
.rail-lead-date { display: block; margin-top: 4px; font-size: 12px; color: #8a8a8a; }

/* rail list: 90x90 thumb (measured) */
.rail-list { list-style: none; margin: 0; padding: 0; }
.rail-list > li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.rail-list > li:last-child { border-bottom: 0; }
.rail-thumb { flex: none; width: 90px; height: 90px; display: block; }
.rail-thumb img { width: 90px; height: 90px; object-fit: cover; border-radius: 4px; }
.rail-thumb-ph { display: block; width: 90px; height: 90px; border-radius: 4px; background: var(--tint); }
.rail-body { min-width: 0; }
.rail-title { margin: 0; font-size: 14px; font-weight: 600; line-height: 21px; color: #000; }
.rail-title a:hover { color: var(--red); }
.rail-date { display: block; margin-top: 5px; font-size: 11px; color: #8a8a8a; }

/* see-all: 264x36, #f5f5f5 (measured) */
.see-all {
  display: block; width: 100%; height: 36px; line-height: 36px; margin-top: 14px;
  background: var(--grey); color: #5a5a5a; border-radius: 4px;
  font-size: 10px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; text-align: center;
}
.see-all:hover { background: var(--navy); color: #fff; }

.rail-search { display: flex; }
.rail-search input {
  flex: 1; min-width: 0; height: 38px; border: 1px solid var(--line); border-right: 0;
  border-radius: 4px 0 0 4px; padding: 0 12px; font: inherit; font-size: 13px; background: #fff;
}
.rail-search button {
  flex: none; height: 38px; padding: 0 16px; border: 0; border-radius: 0 4px 4px 0;
  background: var(--navy); color: #fff; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
}
.rail-search button:hover { background: var(--red); }

.topic-list { list-style: none; margin: 0; padding: 0; }
.topic-list > li { border-bottom: 1px solid var(--line); }
.topic-list > li:last-child { border-bottom: 0; }
.topic-list a { display: block; padding: 10px 0; font-size: 14px; color: var(--ink); }
.topic-list a:hover { color: var(--red); }

.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-block; padding: 5px 11px; border: 1px solid var(--line);
  border-radius: 4px; font-size: 12px; color: var(--navy); background: #fff;
}
.chip:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- badge ----------
 * Measured on the source: #e90000 / white / 11px 600 / 3px 10px / radius 4
 * and `text-transform: none`. All ten category badges on the live homepage
 * share one colour -- they are NOT tinted per category, despite looking
 * that way in a screenshot.
 */
.badge {
  display: inline-block; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 4px;
  letter-spacing: .02em; text-transform: none;
}
/* Feed cards put the badge above the title, so it needs to break the line. */
.feed-body .badge { margin: 0 0 7px; }

/* ---------- hero ---------- */
.hero { margin: 0 0 30px; }
.hero-link { position: relative; display: block; border-radius: 5px; overflow: hidden; }
.hero-img { width: 100%; aspect-ratio: 598 / 374; object-fit: cover; }
.hero-img-ph { background: var(--tint); }
.hero-overlay {
  position: absolute; inset: auto 0 0 0; padding: 30px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  background: linear-gradient(to top, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 100%);
}
.hero-title { font-size: 23px; font-weight: 600; line-height: 1.35; color: #fff; }
.hero-date { font-size: 12px; color: rgba(255, 255, 255, .88); }

/* ---------- section heading: 19.2px 600 #1c293b, pad-left 15px ---------- */
.section-title { position: relative; padding-left: 15px; margin: 0 0 18px; }
.section-title::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 4px; height: 20px; background: var(--red); border-radius: 1px;
}
.section-title h3 { margin: 0; font-size: 19.2px; font-weight: 600; color: var(--head); }

.feed-intro { margin: -8px 0 18px; font-size: 14px; color: #6b6b6b; }

/* ---------- feed card: flex row, 269x202 thumb (measured) ---------- */
.feed-card {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.feed-card:first-of-type { padding-top: 0; }
.feed-thumb { flex: none; width: 269px; display: block; border-radius: 4px; overflow: hidden; }
.feed-thumb img { width: 269px; aspect-ratio: 269 / 202; object-fit: cover; }
.feed-thumb-ph { display: block; width: 269px; aspect-ratio: 269 / 202; background: var(--tint); }
.feed-body { min-width: 0; flex: 1; }
.feed-title { margin: 0 0 8px; font-size: 18px; font-weight: 600; line-height: 27px; color: var(--ink); }
.feed-title a:hover { color: var(--red); }
.feed-excerpt {
  margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: #6b6b6b;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.feed-meta { display: flex; align-items: center; gap: 14px; font-size: 12px; color: #8a8a8a; flex-wrap: wrap; }
.read-more { color: var(--red); font-size: 13px; }
.read-more:hover { text-decoration: underline; }

.empty-state { padding: 30px 0; color: #8a8a8a; font-size: 14px; }

/* ---------- pager ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 26px 0 6px; }
.pager-btn {
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 4px;
  font-size: 13px; color: var(--navy); background: #fff;
}
.pager-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.pager-now { font-size: 13px; color: #6b6b6b; }

/* ---------- post ---------- */
.post { padding-bottom: 10px; }
/* h1 measured at 21px/34px 600 #1e1e1e */
.post-title { margin: 0 0 12px; font-size: 21px; font-weight: 600; line-height: 34px; color: var(--ink); }
.post-meta-top {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--line);
  font-size: 12px; color: #8a8a8a;
}
.post-author { color: var(--navy); font-weight: 500; }
.post-hero { width: 100%; aspect-ratio: 796 / 448; object-fit: cover; border-radius: 5px; margin-bottom: 24px; }

/* body measured at 16px/28.8px #4c4c4c with 18px paragraph spacing */
.post-body { font-size: 16px; line-height: 28.8px; color: var(--body); }
.post-body p { margin: 0 0 18px; }
.post-body h2 { margin: 30px 0 14px; font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.post-body h3 { margin: 26px 0 12px; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.post-body h4 { margin: 22px 0 10px; font-size: 16px; font-weight: 600; color: var(--ink); }
.post-body a { color: var(--red); text-decoration: underline; }
.post-body ul, .post-body ol { margin: 0 0 18px; padding-left: 22px; }
.post-body li { margin-bottom: 8px; }
.post-body img { border-radius: 5px; margin: 8px 0 18px; }
.post-body blockquote {
  margin: 0 0 18px; padding: 14px 20px; background: var(--tint);
  border-left: 4px solid var(--red); border-radius: 0 4px 4px 0; color: var(--ink);
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body pre {
  margin: 0 0 18px; padding: 16px; background: #1c293b; color: #e8eefb;
  border-radius: 5px; overflow-x: auto; font-size: 13.5px; line-height: 1.6;
}
.post-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.post-body :not(pre) > code { background: var(--tint); padding: 2px 6px; border-radius: 3px; color: var(--navy); }
.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.post-body th { background: var(--tint); font-weight: 600; color: var(--ink); }
.post-body figure { margin: 0 0 18px; }
.post-body figcaption { font-size: 12.5px; color: #8a8a8a; margin-top: 6px; }

.post-cats { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.post-cats-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--head); }

/* engagement + share: #f1f6fd pills, radius 5px (measured) */
.engage { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.engage-views { font-size: 12px; color: #8a8a8a; }
.engage-btn {
  background: var(--tint); border: 0; border-radius: 5px; padding: 9px 14px;
  font: inherit; font-size: 13px; color: #000; cursor: pointer;
}
.engage-btn:hover { background: var(--navy); color: #fff; }
.engage-btn[disabled] { opacity: .6; cursor: default; }

.post-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.post-share-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--head); }
.share-btn { background: var(--tint); border-radius: 5px; padding: 8px 14px; font-size: 12.5px; color: #000; }
.share-btn:hover { background: var(--navy); color: #fff; }

/* ---------- related ---------- */
.related { margin-top: 36px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.related-item img { width: 100%; aspect-ratio: 250 / 140; object-fit: cover; border-radius: 4px; }
.related-ph { display: block; width: 100%; aspect-ratio: 250 / 140; background: var(--tint); border-radius: 4px; }
.related-title {
  display: -webkit-box; margin-top: 9px; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--ink);
  -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.related-item a:hover .related-title { color: var(--red); }
.related-date { display: block; margin-top: 5px; font-size: 11px; color: #8a8a8a; }

/* ---------- comments ---------- */
.comments { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.comments-title { margin: 0 0 16px; font-size: 17px; font-weight: 600; color: var(--head); }
.comments-note { font-size: 13.5px; color: #6b6b6b; }
.comment-list { margin-bottom: 24px; }
.comment { padding: 16px 0; border-bottom: 1px solid var(--line); }
.comment:last-child { border-bottom: 0; }
.comment-author { font-size: 14px; font-weight: 600; color: var(--navy); }
.comment-date { display: block; margin-top: 2px; font-size: 11.5px; color: #8a8a8a; }
.comment-body { margin-top: 8px; font-size: 14.5px; line-height: 1.65; }
.comment-body p { margin: 0 0 10px; }
.comment-form { display: grid; gap: 12px; max-width: 560px; }
.comment-form input, .comment-form textarea {
  border: 1px solid var(--line); border-radius: 4px; padding: 11px 13px;
  font: inherit; font-size: 14px; background: #fff; color: var(--ink); width: 100%;
}
.comment-form textarea { resize: vertical; }
.comment-form button {
  justify-self: start; background: var(--red); color: #fff; border: 0; border-radius: 4px;
  padding: 11px 22px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.comment-form button:hover { background: var(--navy); }

/* ---------- search page ---------- */
.search-big { display: flex; margin-bottom: 20px; max-width: 520px; }
.search-big input {
  flex: 1; min-width: 0; height: 44px; border: 1px solid var(--line); border-right: 0;
  border-radius: 4px 0 0 4px; padding: 0 14px; font: inherit; font-size: 14px; background: #fff;
}
.search-big button {
  flex: none; height: 44px; padding: 0 22px; border: 0; border-radius: 0 4px 4px 0;
  background: var(--navy); color: #fff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.search-big button:hover { background: var(--red); }

/* ---------- 404 ---------- */
.err-wrap { text-align: center; padding: 40px 0 46px; }
.err-code { margin: 0; font-size: 72px; font-weight: 600; line-height: 1; color: var(--red); }
.err-title { margin: 12px 0 8px; font-size: 22px; font-weight: 600; color: var(--ink); }
.err-text { margin: 0 0 22px; font-size: 14.5px; color: #6b6b6b; }
.err-btn {
  display: inline-block; background: var(--navy); color: #fff; border-radius: 4px;
  padding: 11px 24px; font-size: 14px; font-weight: 500;
}
.err-btn:hover { background: var(--red); }

/* ---------- footer ---------- */
.ftr { margin-top: 40px; background: var(--navy); color: rgba(255, 255, 255, .82); }
.ftr-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding: 36px 30px; }
.ftr-brand { max-width: 440px; }
.ftr-brand img { max-height: 48px; width: auto; }
.ftr-logo-text { font-size: 20px; font-weight: 600; color: #fff; }
.ftr-desc { margin: 10px 0 0; font-size: 13.5px; line-height: 1.65; }
.ftr-social, .ftr-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; }
.ftr-social a:hover, .ftr-links a:hover { color: #fff; text-decoration: underline; }
.ftr-credit { border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; }
.ftr-credit .container { padding: 16px 30px; }

/* ---------- editorial blocks ----------
 * Three extra centre-column blocks. Card sizes are the source's measured
 * image boxes:
 *
 *   spotlight  598x374 wide strip   (source: 6-slide JS carousel)
 *   highlight  381x285 lead + 2 stacked 197x148
 *   trending   289x217 in a 2x2 grid
 *
 * The source's `.widget-content` measured `gap: 20px 0px`, reused here.
 * Aspect-ratio rather than fixed height keeps the cards intact when the
 * column narrows at the 900px breakpoint.
 */
.ed-block { margin: 30px 0 0; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-title .see-all { width: auto; padding: 0 14px; }

.ed-card { min-width: 0; }
.ed-thumb { position: relative; display: block; border-radius: 5px; overflow: hidden; }
.ed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-thumb-ph { display: block; width: 100%; height: 100%; background: var(--tint); }
/* Badge sits on the thumbnail, matching the source's hero/card treatment. */
.ed-thumb .badge { position: absolute; left: 10px; top: 10px; }
.ed-title { margin: 9px 0 4px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.ed-title a { color: var(--head); }
.ed-title a:hover { color: var(--red); }
.ed-date { font-size: 12px; color: #6b6b6b; }

/* Horizontal strip: every card reachable by scroll, no JS needed. */
.ed-strip { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.ed-wide { flex: 0 0 598px; max-width: 100%; scroll-snap-align: start; }
.ed-wide .ed-thumb { aspect-ratio: 598 / 374; }

.ed-split { display: flex; gap: 20px; align-items: flex-start; }
.ed-lead { flex: 0 0 381px; min-width: 0; }
.ed-lead .ed-thumb { aspect-ratio: 381 / 285; }
.ed-lead .ed-title { font-size: 17px; }
.ed-stack { display: flex; flex-direction: column; gap: 20px; flex: 1; min-width: 0; }
.ed-small .ed-thumb { aspect-ratio: 197 / 148; }
.ed-small .ed-title { font-size: 14px; }

.ed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ed-tile .ed-thumb { aspect-ratio: 289 / 217; }

/* ---------- responsive: source breakpoints 1024 / 980 / 900 / 640 ---------- */
@media (max-width: 1024px) {
  .rail-right { display: none; }
  .main-col { width: auto; }
}
@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .rail, .main-col { width: 100%; }
  .rail-left { order: 2; }
  .main-col { order: 1; padding: 20px; }
  .hd-menu-btn { display: inline-flex; }
  .nav-bar { display: none; }
  .hd-search input { width: 170px; }
  .ed-wide { flex-basis: 86%; }
  .ed-split { flex-direction: column; }
  .ed-lead { flex-basis: auto; width: 100%; }
  .ed-stack { width: 100%; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hd-inner { height: auto; padding: 14px 20px; flex-wrap: wrap; gap: 12px; }
  .hd-date { display: none; }
  .hd-search { flex: 1; }
  .hd-search input { width: 100%; }
  .feed-card { flex-direction: column; gap: 12px; }
  .feed-thumb, .feed-thumb img, .feed-thumb-ph { width: 100%; }
  .hero-overlay { padding: 18px; }
  .hero-title { font-size: 18px; }
  .related-grid { grid-template-columns: 1fr; }
  .crumb, .ftr-inner, .ftr-credit .container { padding-left: 20px; padding-right: 20px; }
  .post-title { font-size: 20px; line-height: 1.4; }
}

/* In-article widget slot: sits between two halves of the post body. */
.widget-in-article{margin:2rem 0;padding:1rem 0;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.widget-in-article .widget-title h3{margin:0 0 .5rem;font-size:1rem}
.widget-in-article .band-list{margin:0;padding-left:1.1rem}
.widget-in-article .chip-list{display:flex;flex-wrap:wrap;gap:.4rem}
.widget-in-article .chip{display:inline-block;padding:.2rem .55rem;border:1px solid #d1d5db;border-radius:999px;font-size:.85rem;text-decoration:none}