/* Hallmark · tokens · theme: studied-DNA (source: image — Dribbble "Blog Details Page", Awe Design Studio)
 * paper oklch(98.4% 0.005 85) · accent: brick red, rank numbers and section markers only · Black Han Sans + IBM Plex Sans KR
 */
:root {
  color-scheme: light;

  /* colour */
  --color-paper: oklch(98.4% 0.005 85);
  --color-paper-2: oklch(95.8% 0.005 85);
  --color-paper-3: oklch(92.5% 0.006 85);
  --color-ink: oklch(19% 0.006 85);
  --color-ink-2: oklch(42% 0.006 85);
  --color-ink-3: oklch(50% 0.006 85);
  --color-rule: oklch(86% 0.005 85);
  --color-rule-strong: var(--color-ink);
  --color-focus: var(--color-ink);
  --color-ad-bg: var(--color-paper-2);
  --color-accent: oklch(52% 0.19 30);
  /* ink bands (hero, footer) */
  --color-on-ink: var(--color-paper);
  --color-on-ink-2: oklch(78% 0.006 85);
  --color-rule-on-ink: oklch(34% 0.006 85);
  --color-accent-on-ink: oklch(72% 0.15 35);

  /* type */
  --font-display: "Black Han Sans", "IBM Plex Sans KR", system-ui, sans-serif;
  --font-body: "IBM Plex Sans KR", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-code: ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* 1.25 scale on a 17px body */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-md: 1.25rem;
  --text-lg: 1.5625rem;
  --text-xl: 1.953rem;
  --text-display: clamp(2.5rem, 1.55rem + 4.6vw, 5rem);
  --text-display-article: clamp(2rem, 1.4rem + 3vw, 3.75rem);
  --text-display-page: clamp(2rem, 1.55rem + 2.2vw, 3rem);

  --leading-display: 1.12;
  --leading-tight: 1.4;
  --leading-body: 1.75;

  /* 4pt spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* layout */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --width-page: 80rem;
  --width-prose: 42rem;
  --width-rail: 18.75rem;

  /* ad slots: reserved height so the page does not jump when an ad fills */
  --ad-h-feed: 17.5rem;
  --ad-h-article: 15.625rem;
  --ad-h-end: 17.5rem;
  --ad-h-rail: 37.5rem;

  /* rules, radius, motion */
  --rule-hair: 1px;
  --rule-heavy: 2px;
  --radius-0: 0;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-long: 480ms;
}

/* Hallmark · genre: editorial · macrostructure: 15 Split Studio (hero diptych: title | No. 1; rows: keyword | why)
 * design-system: design.md · designed-as-app
 * article: Long-Document detail (key points, inline contents, related, same-day list) · footer: Ft1 mast-headed ink band
 * nav: wordmark left, three section links right, wrapping under it on narrow screens
 * theme: studied-DNA + one accent (source: image — Dribbble "Blog Details Page", Awe Design Studio) · DNA-source: image
 * display: Black Han Sans · body: IBM Plex Sans KR · meta: body face, no mono · enrichment: none (typography only)
 * motion: one staggered rise on first paint (hero only), live dot pulse, row hover wash + read chip, card lift
 * bands: ink hero/footer, paper-2 mastheads · accent: rank numbers, section markers, heat bars, "새로 오름"
 * audience: one-visit searchers — way-finding in the header, the rail and after the article, never inside rows
 * pre-emit critique: P4 H5 E4 S5 R4 V5
 */

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

html, body { overflow-x: clip; }

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

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3 { font-style: normal; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: text-decoration-thickness var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-thickness: 2px; }
a:active { color: var(--color-ink-2); }

:focus-visible {
  outline: var(--rule-heavy) solid var(--color-focus);
  outline-offset: 3px;
}

/* Korean has no true italic; synthetic oblique reads as a rendering error. */
em { font-style: normal; font-weight: 500; }
strong { font-weight: 700; }

/* A score (7-0) or a time (18:30) in a title; Chrome would break after the hyphen. */
.nb { white-space: nowrap; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: 10;
  padding: var(--space-2) var(--space-3);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-sm);
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-ink-3);
}
/* Section marker: the accent square before every section label. */
.rail-block > .label::before,
.more > .label::before,
.related > .label::before,
.day > .label::before,
.points > .label::before,
.archive > .label::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: var(--space-2);
  background: var(--color-accent);
  vertical-align: 0.05em;
}

/* Full-bleed band: the colour runs edge to edge while the box keeps the page grid. */
.hero,
.masthead {
  box-shadow: 0 0 0 100vmax var(--band);
  clip-path: inset(0 -100vmax);
  background: var(--band);
}

/* ---------- shell ---------- */
.page {
  width: 100%;
  max-width: calc(var(--width-page) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: var(--space-20);
}
.page--narrow > * { max-width: var(--width-prose); }

/* Header and footer span the window; their content starts on the page's left edge. */
.site-head,
.site-foot { padding-inline: max(var(--gutter), (100% - var(--width-page)) / 2); }

/* Wordmark hard left, the three sections on the right; on narrow screens the sections wrap
   under the wordmark, and each link keeps a 44px target on one line. */
.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-6);
  padding-block: var(--space-2);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.site-nav ul {
  display: flex;
  margin-inline: calc(-1 * var(--space-3));
  list-style: none;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.site-nav a:hover { color: var(--color-ink); background: var(--color-paper-2); }
.site-nav a:active { background: var(--color-paper-3); }
.site-nav a[aria-current] {
  color: var(--color-ink);
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-thickness: var(--rule-heavy);
  text-underline-offset: 0.5em;
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.site-head .wordmark { font-size: var(--text-xl); }
.site-head .wordmark:hover { color: var(--color-ink-2); }

/* ---------- mastheads ---------- */
.masthead {
  --band: var(--color-paper-2);
  margin-bottom: var(--space-12);
  padding-block: var(--space-12) var(--space-10);
}

.display {
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.display--article { font-size: var(--text-display-article); max-width: 18em; }
.display--page { font-size: var(--text-display-page); }

.masthead__note {
  margin-top: var(--space-4);
  font-size: var(--text-md);
  color: var(--color-ink-2);
}
.masthead__note .label,
.masthead__note time { font-size: var(--text-sm); }

/* Meta lines. Every item draws its dot in the gap to its left, so the dot of the first item
   on each line falls outside the box and is clipped: a wrapped line never starts with "·".
   The clip edge sits --bleed out from the text, far enough for focus rings, short of the dots. */
.article-meta,
.rank__meta {
  --sep: calc(2 * var(--space-3) + 0.25em);
  --bleed: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--sep);
  margin-inline: calc(-1 * var(--bleed));
  padding-inline: var(--bleed);
  overflow-x: clip;
  color: var(--color-ink-3);
}
.article-meta {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.article-meta > *::before,
.rank__meta > *::before {
  content: "·";
  display: inline-block;
  width: var(--sep);
  margin-left: calc(-1 * var(--sep));
  text-align: center;
}

/* ---------- hero diptych: title | No. 1 ---------- */
.hero {
  --band: var(--color-ink);
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
  padding-block: var(--space-10) var(--space-12);
  color: var(--color-on-ink);
}
.hero :focus-visible { outline-color: var(--color-on-ink); }
.hero .masthead {
  margin: 0;
  padding: 0;
  box-shadow: none;
  clip-path: none;
  background: none;
}

/* When the list was taken and how much it covers; the dot pulses only on today's list. */
.hero__stamp {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-on-ink-2);
  font-variant-numeric: tabular-nums;
}
.hero__dot {
  position: relative;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--color-on-ink-2);
  vertical-align: 0.1em;
}
.hero__stamp--live { color: var(--color-on-ink); }
.hero__stamp--live .hero__dot { background: var(--color-accent-on-ink); }
.hero__stamp--live .hero__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  opacity: 0;
}
@keyframes pulse {
  from { opacity: 0.7; transform: scale(1); }
  to { opacity: 0; transform: scale(2.6); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__stamp--live .hero__dot::after { animation: pulse 2.4s var(--ease-out) infinite; }
}

@media (min-width: 64rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-16);
    padding-block: var(--space-16);
  }
}

/* ---------- main + rail ---------- */
.split { display: block; }
.split__main {
  min-width: 0;
  container-type: inline-size;
}
.split__rail { margin-top: var(--space-12); }
/* Not sticky: the rail holds an ad, and an ad that follows the scroll risks AdSense placement policy. */
.rail-stick {
  display: grid;
  gap: var(--space-10);
}
.split__rail .toc,
.split__rail .ad--rail { display: none; }
/* Below the two-column width a rail with only the TOC and the rail ad has nothing to show. */
.split__rail:not(:has(.rail-block)) { display: none; }

@media (min-width: 64rem) {
  .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--width-rail);
    gap: var(--space-12);
    align-items: start;
  }
  .split__rail,
  .split__rail:not(:has(.rail-block)) { display: block; margin-top: 0; }
  .split__rail .toc,
  .split__rail .ad--rail { display: block; }
}

/* ---------- ranking rows ---------- */
.rank { list-style: none; }

.rank__item,
.log__item {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-6);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.rank__item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  grid-template-areas: "num head" "num body";
  column-gap: var(--space-4);
}
.split__main > .rank:first-child > .rank__item:first-child,
.log__item:first-child { border-top: var(--rule-heavy) solid var(--color-rule-strong); }

.rank__num {
  grid-area: num;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.rank__head { grid-area: head; min-width: 0; }
.rank__body { grid-area: body; min-width: 0; }

.rank__kw {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.rank__meta {
  align-items: center;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
}

/* A badge is its own box, so no dot follows it. */
.badge {
  padding: 0 var(--space-2);
  border: var(--rule-hair) solid var(--color-ink);
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-ink);
  white-space: nowrap;
}
.badge--new {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-paper);
}
/* The badge always leads, and the item after it sits a plain gap away with no dot. The
   negative margin only counts when that item shares the badge's line. */
.rank__meta > .badge { margin-right: calc(var(--space-3) - var(--sep)); }
.rank__meta > .badge::before,
.rank__meta > .badge + *::before { content: none; }

/* Search volume as five rising bars, filled up to data-level. The bars and the volume text
   are one meta item (.rank__vol), so a wrapped line never starts between them. */
.heat {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 0.75rem;
}
.heat i {
  width: 3px;
  background: var(--color-rule);
}
.heat i:nth-child(1) { height: 20%; }
.heat i:nth-child(2) { height: 40%; }
.heat i:nth-child(3) { height: 60%; }
.heat i:nth-child(4) { height: 80%; }
.heat i:nth-child(5) { height: 100%; }
.heat[data-level="1"] i:nth-child(-n + 1),
.heat[data-level="2"] i:nth-child(-n + 2),
.heat[data-level="3"] i:nth-child(-n + 3),
.heat[data-level="4"] i:nth-child(-n + 4),
.heat[data-level="5"] i { background: var(--color-accent); }
.rank__vol .heat { margin-right: var(--space-2); }

/* The read cue of a row with a post. The whole row is the link; this chip only says so. */
.rank__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding: 0 var(--space-3);
  border: var(--rule-hair) solid var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 2;
  color: var(--color-ink);
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.rank__cta::after {
  content: "→";
  position: relative;
  left: 0;
  color: var(--color-accent);
  transition: left var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.rank__headline {
  margin-top: var(--space-2);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

.rank__why {
  max-width: 40em;
  margin-top: var(--space-3);
  color: var(--color-ink-2);
}

.rank__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}
.rank__news {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  color: var(--color-ink-2);
}
.rank__news a { white-space: nowrap; }
.rank__meta a {
  color: inherit;
  text-decoration-color: transparent;
}
.rank__meta a:hover { color: var(--color-ink); text-decoration-color: currentColor; }
.rank__news-label {
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

/* Split Studio rows: number | keyword and headline | why and sources. */
@container (min-width: 48rem) {
  .rank__item {
    grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-areas: "num head body";
    column-gap: var(--space-8);
  }
  .rank__num { font-size: var(--text-xl); line-height: 1; }
  .rank__body > .rank__why { margin-top: 0; }
}

/* A row with an article is one link: the link's ::before covers the row, and the
   other links (sources, dates) rise above it. The wash sits behind the content. */
.rank__link {
  text-decoration: none;
  outline: none;
}
.rank__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Hub rows have no read chip: an arrow, inline with a no-break space so it never drops to a
   line of its own, marks the link instead. */
.log__item .rank__link::after {
  content: "\00a0→";
  content: "\00a0→" / "";
  position: relative;
  left: 0;
  color: var(--color-accent);
  transition: left var(--dur-base) var(--ease-out);
}
.log__item:has(.rank__link):hover .rank__link::after { left: 0.25em; }
.rank__link:focus-visible::before {
  outline: var(--rule-heavy) solid var(--color-focus);
  outline-offset: -2px;
}
:is(.rank__item, .log__item):has(.rank__link) a:not(.rank__link) {
  position: relative;
  z-index: 1;
}
:is(.rank__item, .log__item)::after {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--space-3));
  z-index: -1;
  background: var(--color-paper-2);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
:is(.rank__item, .log__item):has(.rank__link):hover::after { opacity: 1; }
:is(.rank__item, .log__item):has(.rank__link:active)::after {
  opacity: 1;
  background: var(--color-paper-3);
}
.rank__item:has(.rank__link:is(:hover, :focus-visible)) .rank__cta,
.rank__item:has(.rank__link):hover .rank__cta {
  background: var(--color-ink);
  color: var(--color-paper);
}
.rank__item:has(.rank__link):hover .rank__cta::after,
.rank__item:has(.rank__link:focus-visible) .rank__cta::after {
  left: 0.25em;
  color: var(--color-paper);
}
.rank__item:has(.rank__link:active) .rank__cta { background: var(--color-ink-2); }

/* No. 1 card: a paper sheet on the ink band. */
.rank--lead .rank__item {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "num" "head" "body";
  padding: var(--space-6);
  border-top: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  transition: transform var(--dur-base) var(--ease-out);
}
.rank--lead .rank__item::after { inset: 0; }
.rank--lead .rank__item:has(.rank__link):hover { transform: translateY(-2px); }
.rank--lead .rank__num {
  font-size: var(--text-display-page);
  line-height: 1;
}
.rank--lead .rank__kw { margin-top: var(--space-3); font-size: var(--text-xl); }
.rank--lead :focus-visible { outline-color: var(--color-focus); }

/* ---------- facts and share, after the list ---------- */
.list-foot {
  margin-top: var(--space-12);
  padding: var(--space-5) var(--space-6) var(--space-6);
  border-top: var(--rule-heavy) solid var(--color-rule-strong);
  background: var(--color-paper-2);
}

.meta-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.meta-row > div {
  padding-right: var(--space-4);
  min-width: 0;
}
.meta-row > div + div {
  padding-left: var(--space-4);
  border-left: var(--rule-hair) solid var(--color-rule);
}
.meta-row dt {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-ink-3);
}
.meta-row dd {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-tight);
}

.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.split__main > .share {
  max-width: var(--width-prose);
  margin-top: var(--space-12);
}
.share__label {
  margin-right: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-ink-3);
}
.share__btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--space-4);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-0);
  background: var(--color-paper);
  color: var(--color-ink-2);
  font: inherit;
  font-size: var(--text-sm);
  line-height: 2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.share__btn:hover { color: var(--color-ink); border-color: var(--color-rule-strong); }
.share__btn:active { background: var(--color-paper-3); }
.share__btn[hidden] { display: none; }
.share__status {
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

/* ---------- post lists ---------- */
.rail-block .label { margin-bottom: var(--space-2); }

.post-list { list-style: none; }
.post-list > li {
  padding-block: var(--space-5);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.post-list__meta,
.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}
.post-list__title {
  margin-top: var(--space-2);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: var(--leading-tight);
}
.post-list__title a,
.card__title a { text-decoration-color: transparent; }
.post-list__title a:hover,
.card__title a:hover { text-decoration-color: currentColor; }
.post-list__summary {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

.split__rail .post-list__title { font-size: var(--text-base); }
.split__rail .post-list__summary { display: none; }

/* ---------- article ---------- */
.article-figure {
  max-width: var(--width-prose);
  margin-bottom: var(--space-10);
}
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--color-paper-2);
}
.article-figure figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  overflow-wrap: anywhere;
}
.article-figure figcaption a { color: inherit; }

.prose { max-width: var(--width-prose); }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 {
  margin-top: var(--space-12);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  scroll-margin-top: var(--space-6);
}
.prose h3 {
  margin-top: var(--space-8);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: var(--leading-tight);
  scroll-margin-top: var(--space-6);
}
.prose > :first-child { margin-top: 0; }
.prose .lead {
  font-size: var(--text-md);
  line-height: 1.7;
}
.prose ul,
.prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-2); }
.prose blockquote {
  padding-left: var(--space-5);
  border-left: var(--rule-heavy) solid var(--color-rule-strong);
  color: var(--color-ink-2);
}
/* A wide table scrolls inside its own box on phones; the page never scrolls sideways. */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.prose th,
.prose td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  text-align: left;
  vertical-align: top;
}
.prose th:first-child,
.prose td:first-child { padding-left: 0; }
.prose thead th {
  border-bottom: var(--rule-heavy) solid var(--color-rule-strong);
  font-weight: 700;
  white-space: nowrap;
}
.prose code {
  font-family: var(--font-code);
  font-size: 0.9em;
  padding: 0 var(--space-1);
  background: var(--color-paper-2);
}
.prose .note {
  margin-top: var(--space-10);
  padding-top: var(--space-4);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

.sources {
  max-width: var(--width-prose);
  margin-top: var(--space-12);
  padding-top: var(--space-4);
  border-top: var(--rule-heavy) solid var(--color-rule-strong);
}
.sources ul { list-style: none; margin-top: var(--space-2); }
.sources li {
  padding-block: var(--space-3);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.sources li:first-child { border-top: 0; }
.sources__outlet {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

.toc,
.toc-inline {
  --toc-pad: 0.72rem;
}
.toc {
  padding-top: var(--space-4);
  border-top: var(--rule-heavy) solid var(--color-rule-strong);
}
.toc ol {
  list-style: none;
  counter-reset: toc;
  margin-top: var(--space-2);
}
.toc li,
.toc-inline li {
  counter-increment: toc;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.toc li::before,
.toc-inline li::before {
  content: counter(toc, decimal-leading-zero);
  font-size: var(--text-xs);
  line-height: 1.75;
  padding-block: var(--toc-pad);
  color: var(--color-ink-3);
}
.toc a,
.toc-inline a {
  /* The padding sits on the link so its full row height taps, not just the text; one line plus padding makes 44px. */
  min-height: 2.75rem;
  padding-block: var(--toc-pad);
  color: var(--color-ink-2);
  text-decoration-color: transparent;
}
.toc a:hover,
.toc-inline a:hover { color: var(--color-ink); text-decoration-color: currentColor; }

/* Contents inside the article column, folded; from 64rem the rail shows the open list instead. */
.toc-inline {
  max-width: var(--width-prose);
  margin-bottom: var(--space-10);
  border-block: var(--rule-hair) solid var(--color-rule);
}
.toc-inline summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.75rem;
  font-size: var(--text-sm);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary::after {
  content: "+";
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1;
  color: var(--color-ink-3);
}
.toc-inline[open] summary::after { content: "−"; }
.toc-inline summary:hover { text-decoration-line: underline; }
.toc-inline summary:hover::after { color: var(--color-ink); }
.toc-inline summary:active { color: var(--color-ink-2); }
.toc-inline ol {
  list-style: none;
  counter-reset: toc;
  padding-bottom: var(--space-3);
}
@media (min-width: 64rem) {
  .toc-inline { display: none; }
}

/* Key points: the answer first, before the prose. */
.points {
  max-width: var(--width-prose);
  margin-bottom: var(--space-8);
  padding: var(--space-5) var(--space-6) var(--space-6);
  border-top: var(--rule-heavy) solid var(--color-rule-strong);
  background: var(--color-paper-2);
}
.points ul {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
  list-style: none;
}
.points li {
  position: relative;
  padding-left: var(--space-5);
  font-weight: 500;
  line-height: 1.6;
}
.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 0.5rem;
  height: var(--rule-heavy);
  background: var(--color-ink);
}

/* Related posts right after the prose, inside the article column. */
.related {
  max-width: var(--width-prose);
  margin-top: var(--space-12);
}
.related > .label { margin-bottom: var(--space-4); }

/* The rest of the day's list after the end ad: each row is one link. */
.day { margin-top: var(--space-16); }
.day > .label { margin-bottom: var(--space-4); }
.day__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  column-gap: var(--space-6);
  list-style: none;
}
.day__list li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
  padding-block: var(--space-3);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.day__n {
  min-width: 1.5rem;
  font-family: var(--font-display);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.day__list a {
  min-width: 0;
  font-weight: 700;
  text-decoration-color: transparent;
  overflow-wrap: anywhere;
}
.day__list a::before {
  content: "";
  position: absolute;
  inset: 0;
}
.day__list li:hover a { text-decoration-color: currentColor; }
.day__list li:has(a:active) { background: var(--color-paper-2); }
.day__tag {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  white-space: nowrap;
}
.day__all {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
}
.day__all::after { content: "\00a0→"; content: "\00a0→" / ""; color: var(--color-accent); }

.more {
  margin-top: var(--space-16);
}
.more > .label { margin-bottom: var(--space-4); }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-8) var(--space-6);
  list-style: none;
}
.card {
  padding-top: var(--space-4);
  border-top: var(--rule-heavy) solid var(--color-rule-strong);
  transition: transform var(--dur-base) var(--ease-out);
}
.card:hover { transform: translateY(-2px); }
.card__title {
  margin-top: var(--space-2);
  text-wrap: pretty;
  font-size: var(--text-md);
  font-weight: 700;
  line-height: var(--leading-tight);
}

/* ---------- archive ---------- */
.archive + .archive { margin-top: var(--space-16); }
.archive > .label { margin-bottom: var(--space-2); }
.archive__list { list-style: none; }
.archive__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-5);
  padding-block: var(--space-4);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.archive__date {
  font-weight: 700;
  white-space: nowrap;
}
.archive__top {
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}
.archive__kw {
  min-width: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.archive .chips { margin-top: var(--space-4); }
.archive__all {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}
.archive__all a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  white-space: nowrap;
}

/* ---------- hubs, pager, newsletter ---------- */
.log { list-style: none; }
.log__item > .rank__meta { margin-top: 0; }
.log__item > .rank__meta span:first-child { font-weight: 700; }
.log__kw {
  margin-top: var(--space-2);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}
/* One line, 44px tall; a keyword longer than the column ends in an ellipsis instead of wrapping. */
.chips a {
  display: inline-block;
  max-width: 100%;
  padding: 0 var(--space-3);
  border: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  line-height: calc(2.75rem - 2 * var(--rule-hair));
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chips a:hover { color: var(--color-ink); border-color: var(--color-rule-strong); }
.chips a:active { background: var(--color-paper-3); }

.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-10);
  font-size: var(--text-sm);
  font-weight: 700;
}
.pager a { text-decoration-color: transparent; white-space: nowrap; }
.pager a:hover { text-decoration-color: currentColor; }
.pager__next { margin-left: auto; }

.subscribe {
  padding-top: var(--space-4);
  border-top: var(--rule-heavy) solid var(--color-rule-strong);
}
.subscribe__text {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.subscribe__link {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
}
.subscribe__link::after { content: " →"; }

/* ---------- ads ---------- */
.ad {
  margin-block: var(--space-8);
  padding-top: var(--space-2);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.ad__label {
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}
.ad__slot {
  min-height: var(--ad-h-feed);
  background: var(--color-ad-bg);
}
.ad--inArticle .ad__slot { min-height: var(--ad-h-article); }
.ad--end .ad__slot { min-height: var(--ad-h-end); }
.ad--rail { margin-block: 0; }
.ad--rail .ad__slot { min-height: var(--ad-h-rail); }
.ad--end { margin-top: var(--space-16); }

/* An unfilled unit should leave no grey hole behind. */
.ad:has(ins[data-ad-status="unfilled"]) { display: none; }

.ad__slot--preview {
  display: grid;
  place-items: center;
  border: var(--rule-hair) dashed var(--color-rule);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

/* ---------- footer (Ft1 mast-headed, ink band) ---------- */
.site-foot {
  padding-block: var(--space-12) var(--space-10);
  background: var(--color-ink);
  color: var(--color-on-ink);
}
.site-foot :focus-visible { outline-color: var(--color-on-ink); }
.wordmark--foot { font-size: var(--text-xl); }
.site-foot__tagline {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-on-ink-2);
}
.site-foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-8);
  list-style: none;
}
.site-foot__links a {
  font-size: var(--text-sm);
  text-decoration-color: transparent;
  white-space: nowrap;
}
.site-foot__links a:hover { text-decoration-color: var(--color-accent-on-ink); }
.site-foot__note {
  max-width: var(--width-prose);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--rule-hair) solid var(--color-rule-on-ink);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-on-ink-2);
}

@media (min-width: 48rem) {
  .site-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    column-gap: var(--space-12);
    align-items: end;
  }
  .site-foot__links { justify-content: flex-end; margin-top: 0; }
  .site-foot__note { grid-column: 1 / -1; max-width: none; margin-top: var(--space-8); }
}

/* ---------- first paint: the two halves of the hero rise once, staggered ---------- */
@keyframes rise {
  from { opacity: 0.2; transform: translateY(12px); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero .display { animation: rise var(--dur-long) var(--ease-out) both; }
  .hero .rank--lead { animation: rise var(--dur-long) var(--ease-out) 120ms both; }
  .masthead .display { animation: rise var(--dur-long) var(--ease-out) both; }
}

/* ---------- small screens ---------- */
@media (max-width: 40rem) {
  .masthead { padding-block: var(--space-8) var(--space-6); margin-bottom: var(--space-8); }
  .hero { padding-block: var(--space-8); margin-bottom: var(--space-8); }
  .rank--lead .rank__item { padding: var(--space-5); }
  .list-foot { padding-inline: var(--space-4); }
  .meta-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meta-row > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .meta-row > div:nth-child(n + 3) {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--rule-hair) solid var(--color-rule);
  }
  .rank__item { grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--space-3); }
  .rank__num { font-size: var(--text-md); }
  .rank__kw { font-size: var(--text-md); }
  .prose h2 { font-size: var(--text-lg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}