/* ═══════════════════════════════════════════════════════════════════
   Articles — the newspaper mosaic
   Extends signal.css. Everything here is scoped under .sg.

   The grid is the six-column .sg-bento rhythm, with shape assigned by
   POSITION rather than by content, so the mosaic tiles identically whether
   or not a given article has an image — 28 of the 60 published articles
   have none, so a text card is half the design, not an edge case.

   One cycle is twelve cards over six rows, and it tiles exactly:
     1 lead (4x2) + 5 standard (2) + 1 tall (2x2) + 2 wide (4) + 3 standard
     = 8 + 10 + 4 + 8 + 6 = 36 cells = 6 columns x 6 rows.
   paginate_by is 24, which is two whole cycles.
   ═══════════════════════════════════════════════════════════════════ */

/* ── The rail above the grid ─────────────────────────────────────── */
.ar-rail { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.ar-search { position: relative; flex: 1 1 18rem; max-width: 26rem; }
.ar-search input {
  width: 100%; padding: .85rem 1rem .85rem 2.75rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03);
  color: var(--ink); font: 500 .92rem/1 var(--body); outline: none;
  transition: border-color .2s, background .2s;
}
.ar-search input::placeholder { color: var(--dim); }
.ar-search input:focus { border-color: rgba(var(--accent-rgb), .6); background: rgba(255, 255, 255, .05); }
.ar-search button { position: absolute; inset-block: 0; left: .35rem; display: grid; place-items: center; width: 2.25rem; border: 0; background: none; color: var(--dim); cursor: pointer; }
.ar-search button:hover { color: var(--accent); }

/* Pills that are links, not buttons: the state lives in the URL so a filter
   can be shared, crawled, and survive pagination. */
.ar-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ar-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem;
  border-radius: 999px; border: 1px solid var(--line-2); background: transparent;
  color: var(--muted); font: 600 .66rem/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; transition: color .2s, border-color .2s, background .2s;
}
.ar-chip:hover { color: var(--ink); border-color: rgba(var(--accent-rgb), .45); }
.ar-chip span { color: var(--dim); }
.ar-chip.is-active { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .08); }
.ar-chip-clear { color: var(--warm); border-color: rgba(245, 196, 81, .4); }
.ar-chip-clear:hover { color: #fff; background: rgba(245, 196, 81, .12); border-color: rgba(245, 196, 81, .6); }

/* ── The featured splash, page one only ──────────────────────────── */
.ar-splash {
  position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  border-radius: var(--r); border: 1px solid var(--line); background: var(--panel);
  overflow: hidden; margin-bottom: 1rem; transition: border-color .25s;
}
.ar-splash:hover { border-color: var(--line-2); }
.ar-splash-media { position: relative; min-height: 22rem; background: var(--panel-2); overflow: hidden; }
.ar-splash-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ar-splash:hover .ar-splash-media img { transform: scale(1.04); }
.ar-splash--text { grid-template-columns: 1fr; }
.ar-splash--text .ar-splash-body { padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.ar-splash-body .ar-cat { z-index: 2; }
.ar-splash-body { padding: clamp(1.6rem, 3vw, 2.8rem); display: flex; flex-direction: column; justify-content: center; gap: .9rem; }
.sg .ar-splash-title { font-family: var(--display); font-size: clamp(1.6rem, 2.9vw, 2.6rem); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.ar-splash-title a { color: inherit; text-decoration: none; }
.ar-splash-title a::after { content: ''; position: absolute; inset: 0; }

/* ── The mosaic ──────────────────────────────────────────────────── */
.ar-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(170px, auto); gap: 1rem; }

.ar-card {
  container-type: inline-size;
  position: relative; grid-column: span 2; display: flex; flex-direction: column;
  border-radius: var(--r); border: 1px solid var(--line); background: var(--panel);
  overflow: hidden; transition: border-color .25s, transform .25s;
}
.ar-card:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .45); }

/* The cycle. Shape is positional, so the grid never develops a hole. */
.ar-card:nth-child(12n + 1) { grid-column: span 4; grid-row: span 2; }
.ar-card:nth-child(12n + 7) { grid-column: span 2; grid-row: span 2; }
.ar-card:nth-child(12n + 8),
.ar-card:nth-child(12n + 9) { grid-column: span 4; }

/* The two shapes that are wide and short read better side by side. */
.ar-card:nth-child(12n + 8),
.ar-card:nth-child(12n + 9) { flex-direction: row; }
.ar-card:nth-child(12n + 8) .ar-media,
.ar-card:nth-child(12n + 9) .ar-media { width: 38%; flex: 0 0 38%; aspect-ratio: auto; }

.ar-media { position: relative; aspect-ratio: 16 / 9; background: var(--panel-2); overflow: hidden; border-bottom: 1px solid var(--line); }
.ar-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ar-card:hover .ar-media img { transform: scale(1.05); }
/* The lead and the tall card give the image the room they have. */
.ar-card:nth-child(12n + 1) .ar-media { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
.ar-card:nth-child(12n + 1):not(.ar-card--text) .ar-body { flex: 0 0 auto; }
.ar-card:nth-child(12n + 7) .ar-media { aspect-ratio: 4 / 3; }

.ar-body { padding: 1.15rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; min-width: 0; }
/* Above the title's full-card overlay, so the category stays clickable. */
.ar-cat { position: relative; z-index: 1; align-self: flex-start; color: var(--accent); font: 600 .6rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.ar-cat:hover { color: var(--green-2); }
.sg .ar-title { font-family: var(--display); font-weight: 700; font-size: 1.02rem; line-height: 1.22; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.ar-title a { color: inherit; text-decoration: none; }
/* The whole card is the hit area, without nesting a link inside a link. */
.ar-title a::after { content: ''; position: absolute; inset: 0; }
.ar-card:hover .ar-title { color: #fff; }
.ar-excerpt { color: var(--muted); font-size: .86rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ar-meta { margin-top: auto; padding-top: .7rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; color: var(--dim); font: 500 .68rem/1 var(--mono); letter-spacing: .06em; border-top: 1px solid var(--line); }
.ar-meta .ar-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }

/* A card with no image. Half the library, so it is a designed state rather
   than a fallback: the type grows into the space the image would have used,
   over a faint plotted grid so it still reads as a card. */
.ar-card--text .ar-body { justify-content: center; gap: .65rem; padding-block: 1.5rem; }
/* A text card is stretched to whatever height the pictures in its row set.
   The body centres its content for that reason, but the footer's `margin-top:
   auto` pulled against it and opened a gap in the middle of the card instead.
   Centring the whole block, footer included, turns that leftover height into
   balanced space around it. */
.ar-card--text .ar-meta { margin-top: 0; }
.ar-card--text {
  background:
    linear-gradient(160deg, rgba(var(--accent-rgb), .07), transparent 58%),
    repeating-linear-gradient(0deg, rgba(148,163,184,.045) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(148,163,184,.045) 0 1px, transparent 1px 22px),
    var(--panel);
}
.sg .ar-card--text .ar-title { font-size: 1.15rem; }
.ar-card--text .ar-excerpt { -webkit-line-clamp: 3; }
.ar-card--text .ar-kicker { font: 600 .58rem/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }

/* Size the type to the card's real width, not to its position in the cycle. */
@container (min-width: 380px) { .sg .ar-title { font-size: 1.22rem; } .sg .ar-card--text .ar-title { font-size: 1.45rem; } }
@container (min-width: 560px) { .sg .ar-title { font-size: 1.6rem; } .sg .ar-card--text .ar-title { font-size: 1.9rem; } .ar-excerpt { font-size: .92rem; -webkit-line-clamp: 3; } }
@container (min-width: 760px) { .sg .ar-title { font-size: 2.05rem; } .sg .ar-card--text .ar-title { font-size: 2.3rem; } }

/* ── Empty state ─────────────────────────────────────────────────── */
.ar-empty { grid-column: 1 / -1; padding: clamp(2.5rem, 6vw, 5rem) 1.5rem; text-align: center; border-radius: var(--r); border: 1px dashed var(--line-2); background: var(--panel); }
.ar-empty h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .6rem; }
.ar-empty p { color: var(--muted); margin-bottom: 1.5rem; }
.ar-empty-list { list-style: none; margin: 2rem auto 0; padding: 1.5rem 0 0; max-width: 32rem; text-align: left; border-top: 1px solid var(--line); display: grid; gap: .6rem; }
.ar-empty-list a { color: var(--muted); text-decoration: none; font-size: .9rem; }
.ar-empty-list a:hover { color: var(--accent); }

mark.search-hit { background: rgba(var(--accent-rgb), .2); color: var(--green-2); padding: 0 .15em; border-radius: .2em; }

/* ── Pager ───────────────────────────────────────────────────────── */
.ar-pager { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: center; margin-top: 3rem; }
.ar-pager a, .ar-pager span {
  min-width: 2.6rem; padding: .6rem .9rem; border-radius: .75rem; text-align: center;
  border: 1px solid var(--line-2); color: var(--muted); text-decoration: none;
  font: 600 .8rem/1 var(--mono); transition: color .2s, border-color .2s, background .2s;
}
.ar-pager a:hover { color: var(--ink); border-color: rgba(var(--accent-rgb), .5); }
.ar-pager .is-current { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .08); }
.ar-pager .ar-gap { border: 0; min-width: 1rem; padding-inline: .2rem; color: var(--dim); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* At four columns the six-column cycle no longer divides evenly, so the
     last card of each cycle widens to keep the total a multiple of four. */
  .ar-card:nth-child(12n + 1) { grid-column: span 4; grid-row: span 2; }
  .ar-card:nth-child(12n + 7) { grid-column: span 2; grid-row: span 1; }
  .ar-card:nth-child(12n + 7) .ar-media { aspect-ratio: 16 / 9; }
  .ar-card:nth-child(12n + 12) { grid-column: span 4; }
  .ar-card:nth-child(12n + 8),
  .ar-card:nth-child(12n + 9),
  .ar-card:nth-child(12n + 12) { flex-direction: row; }
  .ar-card:nth-child(12n + 12) .ar-media { width: 38%; flex: 0 0 38%; aspect-ratio: auto; }
}

@media (max-width: 760px) {
  .ar-splash { grid-template-columns: 1fr; }
  .ar-splash-media { min-height: 14rem; }
}

@media (max-width: 640px) {
  .ar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  /* One readable column. A mosaic on a phone is just a list with the sizes
     shuffled, so the shapes are dropped rather than scaled down. */
  .ar-card,
  .ar-card:nth-child(12n + 1),
  .ar-card:nth-child(12n + 7),
  .ar-card:nth-child(12n + 8),
  .ar-card:nth-child(12n + 9),
  .ar-card:nth-child(12n + 12) { grid-column: span 2; grid-row: auto; flex-direction: column; }
  .ar-card:nth-child(12n + 1) .ar-media,
  .ar-card:nth-child(12n + 7) .ar-media,
  .ar-card:nth-child(12n + 8) .ar-media,
  .ar-card:nth-child(12n + 9) .ar-media,
  .ar-card:nth-child(12n + 12) .ar-media { width: 100%; flex: none; aspect-ratio: 16 / 9; }
  .ar-rail { gap: .75rem; }
  .ar-search { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-card, .ar-media img, .ar-splash-media img { transition: none; }
  .ar-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Sort, applied filters, pager count
   ═══════════════════════════════════════════════════════════════════ */
.ar-sort { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ar-sort-label { color: var(--dim); font: 600 .62rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; margin-right: .2rem; }

/* What is applied right now, each removable on its own. */
/* Set apart from the topic chips above it: run together, this row reads as
   another row of topics rather than as what is currently applied. */
.ar-active { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 1.1rem 0 1.8rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.ar-active-count { margin-left: .3rem; color: var(--dim); font: 500 .72rem/1 var(--mono); letter-spacing: .08em; }
.ar-chip-on { color: var(--accent); border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .08); }
.ar-chip-on span { color: var(--accent); font-size: .95rem; line-height: 0; }
.ar-chip-on:hover { color: #fff; background: rgba(var(--accent-rgb), .16); border-color: rgba(var(--accent-rgb), .7); }

.ar-pager-count { margin-top: .9rem; text-align: center; color: var(--dim); font: 500 .72rem/1 var(--mono); letter-spacing: .1em; }

/* ═══════════════════════════════════════════════════════════════════
   The two cards beside the lead
   ═══════════════════════════════════════════════════════════════════
   Positions 2 and 3 sit alongside the lead, which spans two rows, so each
   is as tall as half of it while being no wider than a standard card.
   Container queries size type by width and cannot see that, which left a
   third of those cards empty between the excerpt and the footer.
   Only at six columns: at four the lead spans the full width and these two
   fall into an ordinary row. */
@media (min-width: 1101px) {
  /* With a picture, let it take the height the text does not want. */
  .ar-card:nth-child(12n + 2) .ar-media,
  .ar-card:nth-child(12n + 3) .ar-media { aspect-ratio: auto; flex: 1 1 auto; min-height: 9rem; }
  .ar-card:nth-child(12n + 2):not(.ar-card--text) .ar-body,
  .ar-card:nth-child(12n + 3):not(.ar-card--text) .ar-body { flex: 0 0 auto; }

  /* Without one, the words get the room instead. */
  .sg .ar-card--text:nth-child(12n + 2) .ar-title,
  .sg .ar-card--text:nth-child(12n + 3) .ar-title { font-size: 1.62rem; }
  .ar-card--text:nth-child(12n + 2) .ar-excerpt,
  .ar-card--text:nth-child(12n + 3) .ar-excerpt { -webkit-line-clamp: 5; font-size: .92rem; }
  .ar-card--text:nth-child(12n + 2) .ar-body,
  .ar-card--text:nth-child(12n + 3) .ar-body { padding: 1.5rem 1.5rem 1.4rem; gap: .7rem; }
}

@media (max-width: 640px) {
  .ar-sort { width: 100%; }
}

/* ═══════════════════════ Article reading page (detail) ═══════════════════════ */
.ad-section { padding-top: 2.2rem; }
.ad-wrap { width: min(100% - 2rem, 1400px); margin-inline: auto; }

.ad-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font: 500 .72rem/1 var(--mono); letter-spacing: .06em; color: var(--dim); margin-bottom: 1.8rem; }
.ad-crumb a { color: var(--muted); text-decoration: none; }
.ad-crumb a:hover { color: var(--accent); }
.ad-crumb i { color: var(--line-2); font-style: normal; }
.ad-crumb span { color: var(--dim); }

.ad-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }

/* ── main column ── */
.ad-col-main { min-width: 0; }
.ad-head { margin-bottom: 1.8rem; }
.ad-tags-row { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-bottom: 1.1rem; color: var(--dim); font: 500 .76rem/1 var(--mono); letter-spacing: .04em; }
.ad-tags-row .it { display: inline-flex; align-items: center; gap: .4rem; }
.ad-catchip { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border-radius: 999px; background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .3); color: var(--accent); font: 600 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.ad-catchip:hover { background: rgba(var(--accent-rgb), .2); }
.sg .ad-title { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 1.1rem + 3vw, 3rem); line-height: 1.08; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; margin: 0 0 1rem; }
.ad-excerpt { color: var(--muted); font-size: 1.12rem; line-height: 1.6; margin: 0 0 1.4rem; max-width: 62ch; }
.ad-byline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ad-author { display: flex; align-items: center; gap: .8rem; }
.ad-avatar, .ad-avatar-ph { width: 2.9rem; height: 2.9rem; border-radius: 50%; flex-shrink: 0; }
.ad-avatar { object-fit: cover; }
.ad-avatar-ph { display: flex; align-items: center; justify-content: center; font: 700 1.1rem var(--display); color: #04110c; background: linear-gradient(135deg, var(--accent), var(--green-2)); }
.ad-author b { display: block; color: var(--ink); font: 600 .95rem var(--body); }
.ad-author span { color: var(--dim); font-size: .82rem; }
.ad-bystats { display: flex; align-items: center; gap: 1.2rem; color: var(--dim); font: 500 .8rem/1 var(--mono); letter-spacing: .04em; }
.ad-bystats .it { display: inline-flex; align-items: center; gap: .4rem; }
.ad-bystats button { background: none; border: none; cursor: pointer; color: var(--muted); font: inherit; display: inline-flex; align-items: center; gap: .4rem; }
.ad-bystats button:hover { color: var(--accent); }

.ad-hero { margin: 0 0 1.8rem; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.ad-hero img { width: 100%; display: block; }
.ad-col-main .article-content { margin-bottom: 2rem; }

.ad-tags { margin: 1.5rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ad-tags .lbl { color: var(--dim); font: 600 .66rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; margin-right: .3rem; }
.ad-tag { padding: .35rem .8rem; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); font-size: .8rem; text-decoration: none; }
.ad-tag:hover { border-color: var(--accent); color: var(--accent); }

.ad-pn { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 2.2rem 0 0; }
.ad-pn a { display: block; padding: 1rem 1.2rem; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); text-decoration: none; transition: border-color .2s, transform .2s; }
.ad-pn a:hover { border-color: rgba(var(--accent-rgb), .45); transform: translateY(-2px); }
.ad-pn .k { display: flex; align-items: center; gap: .4rem; font: 600 .64rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: .5rem; }
.ad-pn .t { color: var(--ink); font: 600 .95rem/1.3 var(--body); }
.ad-pn a:hover .t { color: var(--accent); }
.ad-pn .next { text-align: right; }
.ad-pn .next .k { justify-content: flex-end; }

/* ── rails ── */
.ad-col-left, .ad-col-right { min-width: 0; }
.ad-rail-sticky { display: flex; flex-direction: column; gap: 1.8rem; }
.ad-rail-label { display: flex; align-items: center; gap: .5rem; font: 700 .64rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin: 0 0 .9rem; }
.ad-rail-label i { color: var(--accent); }

.ad-toc #article-toc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; max-height: 44vh; overflow: auto; }
.ad-toc #article-toc li { font-size: .84rem; line-height: 1.4; }
.ad-toc #article-toc a { display: block; padding: .32rem .55rem; border-radius: .5rem; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; transition: color .15s, background .15s, border-color .15s; }
.ad-toc #article-toc a:hover { color: var(--accent); background: rgba(var(--accent-rgb), .06); border-left-color: var(--accent); }
.ad-toc-loading { color: var(--dim); font-style: italic; font-size: .82rem; }

.ad-rlist { display: flex; flex-direction: column; gap: .6rem; }
.ad-rcard { display: flex; gap: .75rem; padding: .7rem; border-radius: 1rem; background: var(--panel); border: 1px solid var(--line); text-decoration: none; transition: border-color .2s, transform .2s, background .2s; }
.ad-rcard:hover { border-color: rgba(var(--accent-rgb), .45); transform: translateY(-2px); background: var(--panel-2); }
.ad-rthumb { width: 56px; height: 56px; flex: 0 0 56px; border-radius: .6rem; overflow: hidden; background: var(--panel-2); }
.ad-rthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-rbody { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.ad-rtitle { color: var(--ink); font: 600 .86rem/1.25 var(--body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-rcard:hover .ad-rtitle { color: var(--accent); }
.ad-rmeta { color: var(--dim); font: 500 .64rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

.ad-share-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1rem; border-radius: 999px; background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .3); color: var(--accent); font: 600 .85rem var(--body); cursor: pointer; transition: background .2s; }
.ad-share-btn:hover { background: rgba(var(--accent-rgb), .22); }
.ad-allbtn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font: 600 .82rem var(--body); text-decoration: none; transition: border-color .2s, color .2s; }
.ad-allbtn:hover { border-color: var(--accent); color: var(--accent); }

/* ── comments ── */
.ad-comments { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); min-width: 0; }
.ad-comments-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.6rem; }
.sg .ad-comments-head h2 { font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--ink); margin: 0; display: flex; align-items: center; gap: .6rem; }
.ad-comments-head h2 i { color: var(--accent); }
.ad-comments-count { font: 600 .78rem var(--mono); color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); padding: .25rem .7rem; border-radius: 999px; }

/* ── desktop 3-column ── */
@media (min-width: 1120px) {
  .ad-grid { grid-template-columns: 250px minmax(0, 1fr) 300px; gap: 2.4rem; }
  .ad-col-main { grid-column: 2; grid-row: 1; }
  .ad-col-left { grid-column: 1; grid-row: 1; }
  .ad-col-right { grid-column: 3; grid-row: 1; }
  .ad-comments { grid-column: 2; grid-row: 2; }
  .ad-rail-sticky { position: sticky; top: 84px; }
  .ad-pn { grid-template-columns: 1fr 1fr; }
}
/* ── tablet: rails drop below as 2-up card rows ── */
@media (min-width: 680px) and (max-width: 1119px) {
  .ad-rlist { display: grid; grid-template-columns: 1fr 1fr; }
  .ad-pn { grid-template-columns: 1fr 1fr; }
  .ad-toc #article-toc { max-height: none; }
}