/* Article-specific styles. Reuses homepage.css tokens (--ink, --bone,
   --umber, --rule). Nothing here should duplicate styles already in
   homepage.css — only the bits unique to article rendering live here. */

/* Shared card-abstract size: ONE value drives BOTH the homepage article
   card (.home-article-lede) AND the /articles index card so they never
   drift. Both pages load homepage.css + articles.css, so this :root var
   resolves on both. (Home clamps to one line + ellipsis; /articles shows
   the full abstract — same size, different overflow.) */
:root { --article-card-abstract-size: 10px; }

.article-section { max-width: 760px; margin: 0 auto; }

/* Machine-translation notice — shown only on a translated article view.
   Reuses the bone/umber/rule tokens; no parallel palette. */
.article-mt-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 24px 0; padding: 10px 14px;
  background: var(--bone, #f4f2ec);
  border: 1px solid var(--rule, #d9d6cd);
  border-left: 3px solid var(--umber, #6b5a3a);
  border-radius: 4px;
  font-size: 13px; color: var(--ink, #1a1a1a);
}
.article-mt-banner__icon { font-size: 14px; line-height: 1; }
.article-mt-banner__text { opacity: 0.85; }
.article-mt-banner__sep { opacity: 0.4; }
.article-mt-banner__flag {
  width: 18px; height: 14px; border-radius: 2px; object-fit: cover;
  border: 1px solid var(--rule, #d9d6cd); display: inline-block;
}
.article-mt-banner__link {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--umber, #6b5a3a); text-decoration: underline; font-weight: 600;
}
.article-mt-banner__link:hover { color: var(--ink, #1a1a1a); }
/* 735-445 — the flag became part of the "Original" control instead of a
   decoration beside it, so the anchor lays its two children out itself. */
.article-mt-banner__original { display: inline-flex; align-items: center; gap: 6px; }

.article-hero { margin-bottom: 32px; }
.article-hero-img-wrap {
  width: 100%; max-height: 400px; overflow: hidden;
  margin-bottom: 20px; background: var(--rule, #e8e6df);
  display: flex; align-items: center; justify-content: center;
}
.article-hero-img-wrap img {
  width: 100%; max-height: 400px; object-fit: cover; display: block;
}
@media (max-width: 760px) {
  .article-hero-img-wrap, .article-hero-img-wrap img { max-height: 45vh; }
}
.article-hero-meta {
  display: flex; align-items: center; gap: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--umber, #6b5a3a); margin-bottom: 12px;
}
.article-title {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600; font-size: 32px; line-height: 1.2;
  margin: 0 0 12px 0; color: var(--ink, #1a1a1a);
}
.article-subtitle {
  font-size: 18px; color: var(--ink, #1a1a1a);
  opacity: 0.7; margin: 0 0 12px 0;
}
.article-source { font-size: 14px; color: var(--umber, #6b5a3a); }
.article-source a { color: inherit; }

.article-badge {
  display: inline-block; padding: 2px 8px;
  border: 1px solid var(--rule, #d9d6cd);
  border-radius: 3px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
}
.article-badge--ta_staff { background: var(--ink, #1a1a1a); color: var(--bone, #f4f2ec); border-color: var(--ink, #1a1a1a); }
.article-badge--external { background: var(--bone, #f4f2ec); color: var(--ink, #1a1a1a); }
.article-badge--news     { background: var(--umber, #6b5a3a); color: var(--bone, #f4f2ec); border-color: var(--umber, #6b5a3a); }
.article-badge--sponsored { background: #a8772e; color: var(--bone, #f4f2ec); border-color: #a8772e; }
/* Contributor (public-user author) — the shared "Publisher"/contributor
   green token (#5a9e78, lightened from #3d6b50 so it reads clearly LIGHTER
   than — and distinct at a glance from — the sponsor bronze #a8772e).
   Kept in sync with .ta-side-badge.is-publisher + .home-article-card--contributor.
   Never labelled "Sponsored". */
.article-badge--contributor { background: #5a9e78; color: var(--bone, #f4f2ec); border-color: #5a9e78; }

/* News-specific: event chips + source footer.
   De-forked (620-041): the old news-only hero height override was removed so
   news shares the article hero sizing (.article-hero-img-wrap: 400px desktop,
   45vh mobile) — both pages crop identically. One rule, no fork. */
.news-event-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
/* EVENT date = the primary, act-on-it element: bold + accent fill so it
   reads as distinct from the muted "Published" metadata. */
.news-event-pill {
  display: inline-block; padding: 3px 10px;
  border: 1px solid var(--umber, #6b5a3a); border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--bone, #f4f2ec); background: var(--umber, #6b5a3a);
}
/* .ics download = outlined sibling of the event pill (act-on-it, but a
   link not the date itself), so it reads as an action without competing
   with the filled event pill. */
.news-ics-link {
  display: inline-block; padding: 3px 10px;
  border: 1px solid var(--umber, #6b5a3a); border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; text-decoration: none;
  color: var(--umber, #6b5a3a); background: transparent;
}
.news-ics-link:hover { background: var(--bone-2, #efece3); }
/* PUBLICATION date = secondary metadata: muted, low-weight mono caption. */
.news-pub-date {
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 400; color: var(--muted, #6b6b66);
}
.news-card-thumb { aspect-ratio: 16/9; max-height: 180px; overflow: hidden; }
.news-card-thumb img { width:100%; height:100%; object-fit: cover; display:block; }
.news-source-footer {
  margin-top: 32px; padding-top: 20px;
  border-top: 1px solid var(--rule, #d9d6cd);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--umber, #6b5a3a);
}
.news-source-footer .news-source-label { color: var(--muted, #6b6b6b); margin-right: 6px; }
.news-source-footer a { color: var(--umber, #6b5a3a); text-decoration: underline; }

.article-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.article-tag-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.article-tag-chip {
  display: inline-block; padding: 2px 8px;
  border: 1px solid var(--rule, #d9d6cd);
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--umber, #6b5a3a); background: transparent;
}

/* ── Listing: view toggle + filter bar ─────────────────────────── */
.articles-view-toggle {
  display: inline-flex; gap: 0; border: 1px solid var(--rule, #d9d6cd);
  border-radius: 4px; overflow: hidden;
}
.avt-btn {
  background: transparent; border: 0; padding: 6px 10px;
  font-size: 14px; line-height: 1; color: var(--muted, #6b6b6b);
  cursor: pointer; border-right: 1px solid var(--rule, #d9d6cd);
}
.avt-btn:last-child { border-right: 0; }
.avt-btn:hover { color: var(--ink, #1a1a1a); }
.avt-btn.is-active {
  background: var(--ink, #1a1a1a); color: var(--bone, #f4f2ec);
}

.articles-filter-bar {
  display: grid; gap: 12px 16px;
  grid-template-columns: 1fr 160px 160px 1.5fr auto;
  align-items: end;
  padding: 12px 0 18px;
  border-bottom: 1px solid var(--rule, #d9d6cd);
  margin-bottom: 18px;
}
@media (max-width: 900px) {
  .articles-filter-bar { grid-template-columns: 1fr 1fr; }
  .filter-cell--search, .filter-cell--tags, .filter-cell--actions {
    grid-column: 1 / -1;
  }
}
.filter-cell { display: flex; flex-direction: column; gap: 4px; }
.filter-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted, #6b6b6b);
}
.articles-filter-bar input[type="search"],
.articles-filter-bar input[type="date"] {
  font: 14px/1.4 Inter, system-ui, sans-serif;
  padding: 7px 10px;
  border: 1px solid var(--rule, #d9d6cd); border-radius: 4px;
  background: var(--bone, #f4f2ec); color: var(--ink, #1a1a1a);
}
.filter-tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-tag {
  display: inline-block; cursor: pointer;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--rule, #d9d6cd);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted, #6b6b6b); background: transparent;
  text-decoration: none; user-select: none;
}
.filter-tag:hover { color: var(--ink, #1a1a1a); border-color: var(--ink, #1a1a1a); }
.filter-tag.is-on {
  background: var(--ink, #1a1a1a); color: var(--bone, #f4f2ec);
  border-color: var(--ink, #1a1a1a);
}
.filter-cell--actions { flex-direction: row; align-items: center; gap: 8px; }
.filter-apply {
  font: 12px/1 "JetBrains Mono", ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 8px 14px; border: 0; border-radius: 4px;
  background: var(--ink, #1a1a1a); color: var(--bone, #f4f2ec);
  cursor: pointer;
}
.filter-apply:hover { background: var(--umber, #6b5a3a); }
.filter-clear {
  font: 11px/1 "JetBrains Mono", ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted, #6b6b6b); text-decoration: none;
  padding: 8px 4px;
}
.filter-clear:hover { color: var(--ink, #1a1a1a); }

/* ── Listing: grid view (default) ─────────────────────────────── */
.articles-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
@media (max-width: 1024px) {
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .articles-grid { grid-template-columns: 1fr; }
}
.article-row-wrap { display: contents; }
.articles-grid .article-row-wrap { display: block; position: relative; }
/* Small round contributor avatar next to the byline name (public photo only). */
.article-author-avatar {
  width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
  margin-left: 6px; vertical-align: middle; background: #eee;
}
.article-card-tile { display: flex; flex-direction: column; cursor: pointer; }
.articles-grid .article-card-abstract { display: none; }
/* /articles index only (NOT /authors, which shares .articles-grid): show
   the FULL abstract at the shared smaller size, in both grid and list
   view. Explicitly NO clamp of any kind — the whole abstract wraps to as
   many lines as needed. The non-clamp declarations are belt-and-suspenders:
   they neutralise any cached/inherited line-clamp or height cap so the text
   can never be cut mid-word here. (Home stays 1-line clamped via
   .home-article-lede--clamp — that's a different element.) */
.articles-index .article-card-abstract {
  display: block;
  font-size: var(--article-card-abstract-size, 10px);
  -webkit-line-clamp: none;
  -webkit-box-orient: initial;
  max-height: none;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

/* ── Listing: list view ───────────────────────────────────────── */
.articles-list {
  display: flex; flex-direction: column; gap: 16px;
}
.articles-list .article-row-wrap {
  display: block; position: relative;
  border-bottom: 1px solid var(--rule, #d9d6cd); padding-bottom: 16px;
}
.articles-list .article-card-tile {
  flex-direction: row; align-items: flex-start; gap: 18px;
}
.articles-list .article-thumb {
  flex: 0 0 160px; aspect-ratio: 16/10;
}
.articles-list .article-card-text {
  flex: 1 1 auto; min-width: 0;
}
.articles-list .article-card-tile h3 { margin-top: 0; }
.article-card-abstract {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13.5px; line-height: 1.5; color: var(--ink, #1a1a1a);
  opacity: 0.78; margin: 6px 0 8px;
}
@media (max-width: 640px) {
  .articles-list .article-card-tile { flex-direction: column; }
  .articles-list .article-thumb { flex-basis: auto; width: 100%; }
}

/* ── Article-typed bookmark chip on /account ──────────────────── */
.bm-card[data-item-type="article"] .bm-card-type {
  background: var(--ink, #1a1a1a); color: var(--bone, #f4f2ec);
  padding: 1px 6px; border-radius: 3px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: 0.08em;
}
.bm-card[data-item-type="article"] .bm-card-type::before { content: "📝 "; }

.bm-card[data-item-type="news"] .bm-card-type {
  background: var(--umber, #6b5a3a); color: var(--bone, #f4f2ec);
  padding: 1px 6px; border-radius: 3px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: 0.08em;
}
.bm-card[data-item-type="news"] .bm-card-type::before { content: "📰 "; }

.article-abstract {
  font-family: Inter, system-ui, sans-serif;
  font-size: 18px; line-height: 1.55; font-weight: 300;
  color: var(--ink, #1a1a1a);
  margin: 0 0 28px 0; padding: 0 0 24px 0;
  border-bottom: 1px solid var(--rule, #d9d6cd);
  font-style: italic;
}

.article-body { font-size: 16px; line-height: 1.7; color: var(--ink, #1a1a1a); }
.article-h1 { font-size: 30px; font-weight: 700; margin: 36px 0 14px; }
.article-h2 { font-size: 24px; font-weight: 600; margin: 32px 0 12px; }
.article-h3 { font-size: 20px; font-weight: 600; margin: 28px 0 10px; }
.article-h4 { font-size: 17px; font-weight: 600; margin: 24px 0 10px; }
.article-p  { margin: 0 0 16px; }
.article-p a { color: var(--umber, #6b5a3a); text-decoration: underline; }

.article-figure { margin: 24px 0; }
.article-figure img { width: 100%; height: auto; display: block; }
.article-figure figcaption {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; color: var(--umber, #6b5a3a);
  margin-top: 8px; text-align: center;
}
.article-image-placeholder {
  width: 100%; aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  background: var(--rule, #e8e6df); color: var(--umber, #6b5a3a);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px;
}

.article-embed {
  position: relative; width: 100%; aspect-ratio: 16/9; margin: 24px 0;
  background: #000;
}
.article-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0;
}
.article-embed--unsupported {
  aspect-ratio: auto; padding: 12px;
  background: var(--rule, #e8e6df); color: var(--umber, #6b5a3a);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px;
}

.article-delimiter {
  border: 0; border-top: 1px solid var(--rule, #d9d6cd);
  margin: 32px 0;
}

.article-ul, .article-ol { margin: 0 0 16px; padding-left: 24px; }
.article-ul { list-style: disc; }
.article-ol { list-style: decimal; }
.article-li { margin: 0 0 6px; }
.article-li a { color: var(--umber, #6b5a3a); text-decoration: underline; }

.article-quote {
  margin: 24px 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--umber, #6b5a3a);
}
.article-quote blockquote {
  margin: 0; font-size: 18px; line-height: 1.55;
  font-style: italic; color: var(--ink, #1a1a1a);
}
.article-quote figcaption {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; color: var(--umber, #6b5a3a); margin-top: 8px;
}

.article-callout {
  margin: 0 0 16px; padding: 14px 18px;
  border: 1px solid var(--rule, #d9d6cd);
  background: var(--bone-2, #ece9e0);
  border-radius: 6px;
  color: var(--ink, #1a1a1a);
}
.article-callout a { color: var(--umber, #6b5a3a); text-decoration: underline; }

/* ── 620-184 — article H1/H2 side navigation ─────────────────────────────── */
.article-toc-toggle { display: none; }
.article-toc-list { list-style: none; margin: 0; padding: 0; }
.article-toc-title {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted, #6b6b66); margin-bottom: 10px;
}
.article-toc-item { margin: 0; font-size: 13px; line-height: 1.35; padding: 3px 0; }
.article-toc-item a {
  color: var(--muted, #6b6b66); text-decoration: none; display: block;
  border-left: 2px solid transparent; padding-left: 10px;
  transition: color .15s, border-color .15s;
}
.article-toc-item a:hover { color: var(--ink, #1a1a1a); }
/* H2 sits indented under its H1; H3 one level deeper still (620-186 —
   numbered sub-sections like "1. Aesthetic Appeal" under an H2). */
.article-toc-l2 a { padding-left: 22px; font-size: 12.5px; }
.article-toc-l3 a { padding-left: 34px; font-size: 12px; }
.article-toc-active > a {
  color: var(--umber, #6b5a3a); border-left-color: var(--umber, #6b5a3a);
  font-weight: 600;
}
/* Anchored headings clear any fixed chrome when scrolled to. */
.article-body h1.article-h1,
.article-body h2.article-h2,
.article-body h3.article-h3 { scroll-margin-top: 90px; }

/* Desktop: fixed overlay rail in the left margin. It never occupies a column,
   so the centered article column is byte-identical with or without the nav. */
@media (min-width: 1180px) {
  .article-toc {
    position: fixed; top: 120px; z-index: 20;
    left: max(20px, calc(50% - 380px - 232px));
    width: 210px; max-height: calc(100vh - 160px); overflow-y: auto;
    padding-right: 8px;
  }
}

/* Narrow: a collapsible control in normal flow — a bar, never a column. */
@media (max-width: 1179px) {
  .article-toc { max-width: 760px; margin: 8px auto 0; padding: 0 20px; }
  .article-toc-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: var(--bone-2, #ece9e0); border: 1px solid var(--rule, #d9d6cd);
    border-radius: 6px; padding: 10px 14px; cursor: pointer;
    font: inherit; font-size: 13px; color: var(--ink, #1a1a1a);
  }
  .article-toc-caret { margin-left: auto; transition: transform .15s; }
  .article-toc.article-toc-open .article-toc-caret { transform: rotate(180deg); }
  .article-toc-panel { display: none; padding: 12px 4px 4px; }
  .article-toc.article-toc-open .article-toc-panel { display: block; }
  .article-toc-title { display: none; }
}