@layer route {
/* ═══════════════════════════════════════════════════════════════════
   ROUTE: SINGLE ARTICLE
   ═══════════════════════════════════════════════════════════════════ */

.tdn-article { min-width: 0; }

.tdn-article__head { display: grid; gap: var(--s-4); margin-block-end: var(--s-8); }
/* --step-5 bottoms out at 2.488rem, which is ~9 characters per line in
   a 342px phone column — a seven-line headline before the story
   starts. Given its own curve so it stays large on desktop and
   readable on a phone. */
.tdn-article__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3.4rem);
  line-height: var(--lh-flat);
  letter-spacing: -0.015em;
  color: var(--fg);
  max-inline-size: 22ch;
}
.tdn-article__standfirst {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
  max-inline-size: 48ch;
}

.tdn-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  padding-block: var(--s-4);
  border-block: 1px solid var(--rule);
  font-size: var(--step--1);
}
.tdn-byline__avatar { border-radius: 50%; flex: none; }
.tdn-byline__who { display: grid; gap: 0.1em; }
.tdn-byline__name { font-weight: 700; color: var(--fg); }
.tdn-byline__meta { color: var(--fg-muted); display: flex; flex-wrap: wrap; gap: 0.5em; align-items: center; }
.tdn-byline__meta > * + *::before { content: "·"; margin-inline-end: 0.5em; color: var(--fg-faint); }
.tdn-byline__actions { margin-inline-start: auto; display: flex; gap: var(--s-1); }

.tdn-updated {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--tdn-gold);
}

.tdn-article__art { margin-block-end: var(--s-8); }
.tdn-article__art img { inline-size: 100%; border-radius: var(--radius); }
.tdn-article__art figcaption {
  font-size: var(--step--1);
  color: var(--fg-muted);
  line-height: var(--lh-snug);
  padding-block-start: var(--s-3);
}

/* Article body is measure-constrained even inside a wide shell. */
.tdn-article__body { max-inline-size: var(--measure); }
.tdn-article__body .alignwide,
.tdn-article__body .alignfull {
  max-inline-size: none;
  inline-size: min(100vw - (var(--gutter) * 2), 60rem);
  margin-inline: calc(50% - 50cqi);
}

/* ── Mid-article related promo ────────────────────────────────────── */
.tdn-inline-related {
  --ratio: 3 / 2;
  position: relative;
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--s-4);
  align-items: center;
  margin-block: var(--s-10);
  padding: var(--s-4);
  border-inline-start: 3px solid var(--cat, var(--accent));
  background: var(--surface-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.tdn-inline-related__art { aspect-ratio: var(--ratio); overflow: hidden; border-radius: var(--radius-xs); }
.tdn-inline-related__art img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.tdn-inline-related__headline { font-size: var(--step-0); font-weight: 700; line-height: var(--lh-snug); }

/* ── Post updates timeline ────────────────────────────────────────── */
.tdn-updates { display: grid; gap: var(--s-6); margin-block: var(--s-10); }
.tdn-updates__item {
  position: relative;
  padding-inline-start: var(--s-6);
  border-inline-start: 2px solid var(--rule);
}
.tdn-updates__item::before {
  content: "";
  position: absolute;
  inset-inline-start: -5px;
  inset-block-start: 0.45em;
  inline-size: 8px; block-size: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.tdn-updates__stamp {
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ── End of article ───────────────────────────────────────────────── */
.tdn-article__end { display: grid; gap: var(--s-10); margin-block-start: var(--s-12); }
.tdn-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tdn-tag {
  font-size: var(--step--1);
  color: var(--fg-soft);
  padding: 0.4em 0.85em;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  min-height: var(--target-min);
  display: inline-flex;
  align-items: center;
}
.tdn-tag:hover { background: var(--fg); color: var(--bg); }

.tdn-readnext { display: grid; gap: var(--s-6); }

/* ── Share ────────────────────────────────────────────────────────── */
.tdn-share { display: flex; gap: var(--s-1); }

/* ── Rail widgets on single ───────────────────────────────────────── */
.tdn-rail .tdn-row__headline { font-size: var(--step--1); }
}