/* =========================================
   page.css — lower-page (single / page / archive / 404 / search) styles.
   Enqueued via lib/func/enqueue.php on non-front-page routes.
   ========================================= */

/* =========================================
   Archive (article) — full-width block
   Selector scoped to `article.journal-archive` for specificity parity
   with other full-width block rules (see article.journal-article).
   ========================================= */
article.journal-archive {
  padding-top: 0;
  padding-bottom: clamp(48px, 8vw, 96px);
  padding-inline: var(--gutter-inline);
}

/* =========================================
   Archive Header
   ========================================= */
.archive-head {
  padding-top: 0;
  padding-bottom: clamp(40px, 6vw, 72px);
}

.archive-head__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(20px, 3vw, 28px);
}

.archive-head__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: currentColor;
}

.archive-head__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);
  align-items: end;
}

@media (min-width: 720px) {
  .archive-head__grid {
    grid-template-columns: 1fr auto;
    gap: clamp(32px, 4vw, 64px);
  }
}

.archive-head__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--c-text);
  max-width: 14em;
}

.archive-head__count {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.archive-head__count strong {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--c-text);
  margin-right: 0.3em;
}

/* =========================================
   Category Filter — inline, typography-driven
   ========================================= */
.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2.5vw, 32px);
  margin-bottom: clamp(32px, 4vw, 56px);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
}

.category-filter a {
  color: var(--c-text-muted);
  padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
  border-bottom: 1px solid transparent;
}

.category-filter a:hover {
  color: var(--c-primary);
}

.category-filter a.is-current {
  color: var(--c-text);
  border-bottom-color: var(--c-primary);
}

.category-filter__count {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  opacity: 0.6;
  margin-left: 0.4em;
}

/* =========================================
   Article List — base
   Stacked layout (meta above title) at every viewport width.
   On desktop the arrow occupies a second column on the right;
   on narrow mobile (< 560px) the arrow is hidden so nothing
   competes for horizontal space with long category labels.
   ========================================= */
.article-list {
  display: flex;
  flex-direction: column;
}

.article-list__item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "meta  arrow"
    "title arrow";
  column-gap: clamp(20px, 3vw, 40px);
  row-gap: 8px;
  padding-block: 24px;
  border-top: 1px solid var(--c-border);
  transition: color 0.25s ease;
  align-items: baseline;
}

.article-list__item:last-child {
  border-bottom: 1px solid var(--c-border);
}

.article-list__item:hover { color: var(--c-primary); }

.article-list__meta {
  grid-area: meta;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.article-list__meta time {
  font-variant-numeric: tabular-nums;
}

.article-list__meta-cat {
  position: relative;
  padding-left: 20px;
}

.article-list__meta-cat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--c-text-muted);
}

.article-list__title {
  grid-area: title;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  word-break: normal;
  text-wrap: auto;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: inherit;
}

.article-list__arrow {
  grid-area: arrow;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--c-text-muted);
  transition: transform 0.25s ease, color 0.25s ease;
}

.article-list__item:hover .article-list__arrow {
  transform: translateX(6px);
  color: var(--c-primary);
}

/* Narrow mobile — hide arrow and collapse to single column */
@media (max-width: 559px) {
  .article-list__item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "meta"
      "title";
  }
  .article-list__arrow { display: none; }
}

/* =========================================
   Article List — with thumbnail variant
   Mobile: stacked (thumb → meta → title).
   ≥560px: [ thumb | meta (top) / title (bottom) | arrow ] via grid-areas.
   ========================================= */
.article-list--with-thumb .article-list__item {
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

@media (min-width: 560px) {
  .article-list--with-thumb .article-list__item {
    grid-template-columns: clamp(140px, 22vw, 220px) 1fr auto;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "thumb meta  arrow"
      "thumb title arrow";
    column-gap: clamp(24px, 3vw, 40px);
    row-gap: 8px;
    align-items: start;
  }

  .article-list--with-thumb .article-list__thumb { grid-area: thumb; }
  .article-list--with-thumb .article-list__meta  { grid-area: meta; }
  .article-list--with-thumb .article-list__title { grid-area: title; }
  .article-list--with-thumb .article-list__arrow {
    grid-area: arrow;
    align-self: center;
  }
}

.article-list__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.article-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.article-list__item:hover .article-list__thumb img {
  transform: scale(1.03);
}

/* =========================================
   Article List — card variant
   Grid of vertical cards (thumbnail on top, meta + title below).
   No borders / shadows — whitespace + typography handle separation
   per Masaki brief. Responsive column count: 1 / 2 / 3 columns.
   Opt-in via customizer `list_layout` = 'card' — applied through
   camelus_article_list_classes() in PHP. Works for any template that
   uses that helper (front-page journal, all archives, future CPTs).
   ========================================= */
.article-list--card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 560px) {
  .article-list--card { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px) {
  .article-list--card { 
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

/* Each card resets the row-layout defaults inherited from .article-list
   (top border / baseline grid template) and re-stacks vertically. */
.article-list--card .article-list__item {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vw, 16px);
  padding: 0;
  border: none;
  grid-template-columns: none;
  grid-template-areas: none;
  align-items: stretch;
}

.article-list--card .article-list__item:last-child {
  border-bottom: none;
}

.article-list--card .article-list__thumb {
  grid-area: auto;
  /* 16:9 for card variant — feels more modern than 4:3 for a grid of
     items, and the wider frame is easier to read when cards are arranged
     side-by-side. The row (non-card) variant keeps 4:3 in its base rule. */
  aspect-ratio: 16 / 9;
  margin: 0;
}

.article-list--card .article-list__meta {
  grid-area: auto;
}

.article-list--card .article-list__title {
  grid-area: auto;
  font-size: var(--text-md);
}

/* Arrow fits the row layout, not the card — hide in card mode. */
.article-list--card .article-list__arrow {
  display: none;
}

/* =========================================
   Pagination — numeric, typography-driven
   Mobile (< 720px): hide intermediate page numbers, show
   "Prev / current of N / Next" only. See journal-archive.html notes.
   ========================================= */
.pagination {
  margin-top: clamp(48px, 6vw, 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 16px);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5em;
  padding: 0.5em 0.75em;
  color: var(--c-text-muted);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.pagination a:hover {
  color: var(--c-primary);
}

.pagination .is-current {
  color: var(--c-text);
  border-bottom-color: var(--c-primary);
}

.pagination__gap {
  color: var(--c-text-muted);
  opacity: 0.5;
  padding: 0 0.25em;
  border-bottom: none;
}

.pagination__nav {
  letter-spacing: 0.08em;
}

/* =========================================
   Archive Index — /{slug}/archive/ (year-grouped month list)
   Typography-driven list. No cards, no borders around groups —
   years separate via larger gap + thin top rule on each year block.
   ========================================= */
.archive-index__years {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}

.archive-index__year {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 24px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--c-border);
}

@media (min-width: 720px) {
  .archive-index__year {
    grid-template-columns: minmax(160px, 200px) 1fr;
    gap: clamp(32px, 4vw, 56px);
  }
}

.archive-index__year-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

.archive-index__year-title a {
  color: var(--c-text);
  transition: color 0.25s ease;
}

.archive-index__year-title a:hover {
  color: var(--c-primary);
}

.archive-index__months {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6em 1.5em;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

@media (min-width: 720px) {
  .archive-index__months {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 980px) {
  .archive-index__months {
    grid-template-columns: repeat(4, 1fr);
  }
}

.archive-index__months a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--c-text);
  transition: color 0.2s ease;
}

.archive-index__months a:hover {
  color: var(--c-primary);
}

.archive-index__count {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--c-text-muted);
}

/* =========================================
   Single — Article Header
   article acts as a full-width block like section —
   same padding rules apply.
   NOTE: selector matches `article.journal-article` to beat the base rule
   in components/sections.css (same-specificity wins loaded-later here,
   but pairing element + class also defends against any future refactor).
   ========================================= */
article.journal-article {
  padding-top: 0;
  padding-bottom: clamp(48px, 8vw, 96px);
  padding-inline: var(--gutter-inline);
}

.journal-article__head {
  margin-bottom: clamp(40px, 6vw, 72px);
}

.journal-article__category {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(24px, 3vw, 32px);
}

.journal-article__category::before {
  content: '';
  width: 32px;
  height: 1px;
  background: currentColor;
}

.journal-article__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--c-text);
  /* max-width: 16em; */
  margin-bottom: clamp(32px, 4vw, 48px);
  text-wrap: auto;
}

.journal-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 3vw, 32px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--c-border);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--c-text-muted);
}

.journal-article__meta time {
  font-variant-numeric: tabular-nums;
}

.journal-article__meta-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.journal-article__meta-item + .journal-article__meta-item::before {
  content: '';
  width: 1px;
  height: 14px;
  background: var(--c-border);
}

.journal-article__meta-label {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* =========================================
   Featured Image
   ========================================= */
.journal-article__featured {
  margin-bottom: clamp(48px, 6vw, 80px);
}

.journal-article__featured img {
  width: 100%;
  /* WordPress adds width/height HTML attributes to <img>. Without
     `height: auto`, the HTML height counts as "set" and the browser
     ignores aspect-ratio (spec: aspect-ratio is suppressed when both
     width and height are set). */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: brightness(0.95) sepia(6%) contrast(1.03);
}

.journal-article__featured figcaption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
  margin-top: 1em;
  padding-left: 1em;
  border-left: 1px solid var(--c-border);
}

/* Article Body — width control only (prose styles from components/articles.css) */
.journal-article__body {
  max-width: 620px;
  margin-inline: auto;
}

/* =========================================
   Article Footer — tags, categories
   Single-column layout: the footer wraps the meta block only.
   (A share block was intentionally not included in the theme —
   add via a child theme / pattern when a project needs it.)
   ========================================= */
.journal-article__footer {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--c-border);
}

.journal-article__meta-block {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 28px);
}

.journal-article__tags-label,
.journal-article__categories-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 0.75em;
}

.journal-article__categories-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em 1.25em;
}

.journal-article__categories-list a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--c-text);
  transition: color 0.2s ease;
  position: relative;
}

.journal-article__categories-list a + a::before {
  content: '';
  position: absolute;
  left: -0.6em;
  top: 50%;
  width: 1px;
  height: 0.9em;
  background: var(--c-border);
  transform: translateY(-50%);
}

.journal-article__categories-list a:hover { color: var(--c-primary); }

.journal-article__tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
}

.journal-article__tags-list a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--c-text);
  transition: color 0.2s ease;
}

.journal-article__tags-list a:hover { color: var(--c-accent); }

/* =========================================
   Post Navigation — prev / next
   nav acts as a full-width block — same padding rule
   ========================================= */
.post-nav {
  padding-block: clamp(40px, 6vw, 72px);
  padding-inline: var(--gutter-inline);
  border-top: 1px solid var(--c-border);
}

.post-nav__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3vw, 40px);
}

@media (min-width: 720px) {
  .post-nav__grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 4vw, 64px);
  }
}

.post-nav__item {
  display: block;
  transition: color 0.25s ease;
}

.post-nav__item:hover { color: var(--c-primary); }

.post-nav__next {
  text-align: right;
}

@media (max-width: 719px) {
  .post-nav__next {
    text-align: left;
    padding-top: clamp(24px, 3vw, 32px);
    border-top: 1px solid var(--c-border);
  }
}

.post-nav__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 0.75em;
  display: flex;
  align-items: center;
  gap: 12px;
}

.post-nav__next .post-nav__label {
  justify-content: flex-end;
}

@media (max-width: 719px) {
  .post-nav__next .post-nav__label {
    justify-content: flex-start;
  }
}

.post-nav__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: inherit;
  max-width: 20em;
  margin-bottom: 0.6em;
}

.post-nav__next .post-nav__title {
  margin-left: auto;
}

@media (max-width: 719px) {
  .post-nav__next .post-nav__title {
    margin-left: 0;
  }
}

.post-nav__meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
  display: flex;
  gap: 16px;
  font-variant-numeric: tabular-nums;
}

.post-nav__next .post-nav__meta {
  justify-content: flex-end;
}

@media (max-width: 719px) {
  .post-nav__next .post-nav__meta {
    justify-content: flex-start;
  }
}

/* =========================================
   Related Articles
   ========================================= */
.related {
  padding-block: clamp(48px, 8vw, 96px);
  padding-inline: var(--gutter-inline);
  background: var(--c-surface-2);
}

.related__head {
  margin-bottom: clamp(32px, 4vw, 48px);
}

.related__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  max-width: 14em;
}

.related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 48px);
}

@media (min-width: 720px) {
  .related__grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 64px);
  }
}

.related__item {
  display: block;
  transition: color 0.25s ease;
}

.related__item:hover { color: var(--c-primary); }

.related__item-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 0.75em;
}

.related__item-meta time {
  font-variant-numeric: tabular-nums;
}

.related__item-meta-cat {
  position: relative;
  padding-left: 1.25em;
}

.related__item-meta-cat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.75em;
  height: 1px;
  background: var(--c-text-muted);
}

.related__item-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.005em;
  max-width: 18em;
  color: inherit;
}

/* =========================================
   Page — generic fixed page (About / Contact / Privacy / 404)
   NOTE: the selector must stay scoped to `article.page`.
   WordPress adds a bare `page` class to <body> on any static page, so
   a naked `.page { ... }` rule would apply its padding to <body>.
   ========================================= */
/* article.page is now full-width (no padding-inline). Horizontal spacing
   is handled by the two children directly:
     - .page__head pads via its own padding-inline (or fills viewport when
       a bg is configured).
     - .page__body uses a CSS grid with gutter columns so alignwide /
       alignfull can break out naturally (see .page__body rules below). */
article.page {
  padding-top: 0;
  padding-bottom: clamp(48px, 8vw, 96px);
}

.page__head {
  padding-top: 0;
  padding-inline: var(--gutter-inline);
  padding-bottom: clamp(48px, 7vw, 88px);
}

/* Page head with background (color / image via meta box) — already
   viewport-wide because article.page no longer pads. We keep padding-inline
   on the head so the inner .section__content.is-narrow sits within a
   gutter-respecting inset; no negative-margin tricks needed. */
.page__head.has-page-head-bg {
  padding-top: 0;
  padding-bottom: clamp(32px, 5vw, 64px);
  margin-bottom: clamp(32px, 5vw, 64px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Body content — CSS grid columns support Gutenberg's alignwide / alignfull.
   Layout:
     [full-start] gutter [wide-start] overhang [content-start]
       content (max-reading, capped at viewport - 2*gutter)
     [content-end] overhang [wide-end] gutter [full-end]
   Direct children default to the `content` column. Blocks with .alignwide
   or .alignfull classes (output by Gutenberg when the user picks an
   alignment) jump to their respective columns. */
.page__body {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter-inline), 1fr)
    [wide-start] minmax(0, calc((var(--max-wide) - var(--max-reading)) / 2))
    [content-start] min(100% - 2 * var(--gutter-inline), var(--max-reading)) [content-end]
    minmax(0, calc((var(--max-wide) - var(--max-reading)) / 2)) [wide-end]
    minmax(var(--gutter-inline), 1fr) [full-end];
}

.page__body > * {
  grid-column: content;
  min-width: 0;
}

.page__body > .alignwide {
  grid-column: wide;
  max-width: none;
  width: auto;
}

.page__body > .alignfull {
  grid-column: full;
  max-width: none;
  width: auto;
}

/* Text inversion over dark backgrounds — applied when the per-page
   text-mode is 'light' (explicit) or auto-derived from a dark background
   color. Scoped to .page__head.has-page-head-bg so normal pages aren't
   affected. Eyebrow bar, breadcrumb, title, and breadcrumb current all
   flip to white / semi-white to keep contrast on the image/color band. */
.page__head.has-page-head-bg.is-on-dark .breadcrumb,
.page__head.has-page-head-bg.is-on-dark .breadcrumb a {
  color: rgba(255, 255, 255, 0.78);
}

.page__head.has-page-head-bg.is-on-dark .breadcrumb__current {
  color: #ffffff;
}

.page__head.has-page-head-bg.is-on-dark .page__eyebrow {
  color: #ffffff;
}

.page__head.has-page-head-bg.is-on-dark .page__title {
  color: #ffffff;
}

.page__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(20px, 3vw, 28px);
}

.page__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: currentColor;
}

.page__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--c-text);
  max-width: 14em;
}

/* =========================================
   Timeline — dl with year / description
   Used inside .prose on about-style pages.
   ========================================= */
.timeline {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

.timeline__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding-block: 1.1em;
  border-top: 1px solid var(--c-border);
}

.timeline__row:last-child {
  border-bottom: 1px solid var(--c-border);
}

@media (min-width: 560px) {
  .timeline__row {
    grid-template-columns: clamp(80px, 12vw, 120px) 1fr;
    gap: clamp(20px, 3vw, 32px);
    align-items: baseline;
  }
}

.timeline__row dt {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.timeline__row dd {
  color: var(--c-text-muted);
  line-height: 1.9;
  margin: 0;
}

/* =========================================
   Info block — key / value pairs (access info, company meta)
   ========================================= */
.info-block {
  margin-top: 1.5em;
  margin-bottom: 1em;
}

.info-block__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding-block: 1em;
  border-top: 1px solid var(--c-border);
}

.info-block__row:last-child {
  border-bottom: 1px solid var(--c-border);
}

@media (min-width: 560px) {
  .info-block__row {
    grid-template-columns: clamp(100px, 14vw, 140px) 1fr;
    gap: clamp(20px, 3vw, 32px);
    align-items: baseline;
  }
}

.info-block__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.info-block__value {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--c-text);
}

/* =========================================
   Search results
   Selector scoped to `article.search-page` (same reasoning as above).
   ========================================= */
article.search-page {
  padding-top: 0;
  padding-bottom: clamp(48px, 8vw, 96px);
  padding-inline: var(--gutter-inline);
}

.search-head {
  padding-top: 0;
  padding-bottom: clamp(40px, 6vw, 64px);
}

.search-head__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(20px, 3vw, 28px);
}

.search-head__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: currentColor;
}

.search-head__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--c-text);
  max-width: 16em;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.search-head__title .query {
  color: var(--c-primary);
}

.search-head__count {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

.search-head__count strong {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--c-text);
  margin-right: 0.3em;
}

/* =========================================
   Search form — inline, underline input + submit
   Reused on 404 and the search page.
   ========================================= */
.search-form {
  display: flex;
  align-items: stretch;
  margin-bottom: clamp(48px, 6vw, 72px);
  border-bottom: 1px solid var(--c-border);
  transition: border-color 0.25s ease;
}

.search-form:focus-within {
  border-bottom-color: var(--c-primary);
}

.search-form input[type="search"] {
  flex: 1;
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--c-text);
  background: transparent;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}

.search-form input[type="search"]::placeholder {
  color: var(--c-text-muted);
  opacity: 0.6;
}

.search-form button {
  padding: 0 clamp(16px, 2vw, 24px);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--c-primary);
  /* background: transparent; */
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.search-form button:hover { opacity: 0.9; }

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================
   404 body — lede + action blocks
   ========================================= */
.page-404__lede {
  font-size: var(--text-md);
  line-height: 1.95;
  color: var(--c-text-muted);
  margin-bottom: clamp(56px, 8vw, 96px);
}

.page-404__action {
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--c-border);
}

.page-404__action + .page-404__action {
  margin-top: clamp(48px, 6vw, 72px);
}

.page-404__action-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--c-text);
  margin-bottom: 0.75em;
}

.page-404__action-desc {
  font-size: var(--text-base);
  line-height: 1.9;
  color: var(--c-text-muted);
  margin-bottom: clamp(24px, 3vw, 32px);
}

/* =========================================
   Sidebar layout — 2-column (main : sidebar = 2:1)
   Applied to archive and single via customizer toggle.
   ========================================= */
.archive-layout,
.single-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 6vw, 80px);
}

@media (min-width: 980px) {
  .archive-layout,
  .single-layout {
    grid-template-columns: 2fr 1fr;
    gap: clamp(48px, 6vw, 88px);
    align-items: start;
  }
}

/* =========================================
   Sidebar widgets
   NOTE: .sidebar-widget uses a <section> element for semantics (heading
   + thematic grouping). The theme's generic `section` rule in
   components/sections.css adds block/inline padding for top-level page
   sections — here we reset it so nested widgets flow with .sidebar's
   own spacing.
   ========================================= */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 56px);
}

@media (min-width: 980px) {
  .sidebar {
    padding-left: clamp(32px, 4vw, 56px);
    /* Give the sidebar its own top breathing room — without it, the first
       widget sits flush against the header bottom since the body's
       header-offset reserves space for the header itself but nothing
       extra. Matches the breadcrumb's padding-top pattern on the main
       column so both sides start at a comparable visual line. */
    padding-top: clamp(16px, 2vw, 32px);
    border-left: 1px solid var(--c-border);
    position: sticky;
    top: clamp(24px, 3vw, 40px);
    align-self: start;
  }
}

section.sidebar-widget {
  padding: 0;
  width: auto;
}

.sidebar-widget__title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: clamp(16px, 2vw, 24px);
  padding-bottom: 0.8em;
  border-bottom: 1px solid var(--c-border);
}

.sidebar-widget__list {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-widget__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  color: var(--c-text);
  transition: color 0.2s ease;
}

.sidebar-widget__list a:hover { color: var(--c-primary); }

.sidebar-widget__list li.is-current a {
  color: var(--c-primary);
  font-weight: 600;
}

.sidebar-widget__list-count {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--c-text-muted);
}

.sidebar-widget__all {
  margin: clamp(16px, 2vw, 24px) 0 0;
}

.sidebar-widget__posts {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 20px);
}

.sidebar-widget__posts a {
  display: block;
  transition: color 0.25s ease;
}

.sidebar-widget__posts a:hover { color: var(--c-primary); }

.sidebar-widget__posts time {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--c-text-muted);
  margin-bottom: 0.4em;
  font-variant-numeric: tabular-nums;
}

.sidebar-widget__posts .title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.5;
  color: inherit;
}

.sidebar-widget__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 0.75em;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.sidebar-widget__tags a {
  color: var(--c-text-muted);
  transition: color 0.2s ease;
}

.sidebar-widget__tags a:hover { color: var(--c-accent); }