/* ============================================================
   ARCHIVE - feed listing tweaks.
   ============================================================ */

.ic-feed .ic-card { padding-bottom: var(--ic-space-2xl); border-bottom: 1px solid var(--ic-rule); }
.ic-feed .ic-card:last-child { border-bottom: 0; }

/* Two-column card on wide viewports: media beside body.
   Gated on --has-media. The old rule split every non-featured card into
   [300px | 1fr] whether or not a thumbnail existed, so a text-only card
   put its only child in the 300px media track and read as a crushed
   column. Text-only cards keep the full track and cap at the content
   measure instead. */
@media (min-width: 780px) {
  .ic-feed .ic-card--has-media:not(.ic-card--featured) {
    grid-template-columns: 300px 1fr;
    align-items: start;
    gap: var(--ic-space-xl);
  }
  .ic-feed .ic-card--featured .ic-card__media { margin-bottom: var(--ic-space-sm); }
}

/* A dek set to the full 1180px track is unreadable; hold text-only cards
   to the same measure as post headers. */
.ic-feed .ic-card--text-only .ic-card__body { max-width: var(--ic-content-width); }

.ic-page-head__search .ic-search { margin-top: var(--ic-space-md); }

/* ============================================================
   FRONT PAGE - broadsheet grid (below the hero)
   ============================================================
   Newspaper structure, Illus Caden palette. What makes it read as a front
   page rather than a blog feed:
     1. HIERARCHY. One lead at 3x the tail's headline size. A reader should
        know the running order without reading a word.
     2. RULES, NOT CARDS. Columns are separated by hairlines and the page by
        heavy section rules. No boxes, no shadows, no radius: newsprint has
        no cards.
     3. DENSITY. Tighter leading and smaller gaps than the rest of the site.
   ============================================================ */

.ic-front { padding-block: var(--ic-space-3xl) var(--ic-space-4xl); }

/* --- Card base --- */
.ic-fc { display: grid; gap: var(--ic-space-sm); }
.ic-fc__media,
.ic-fc__thumb { display: block; overflow: hidden; }
.ic-fc__media img,
.ic-fc__thumb img { width: 100%; height: auto; transition: opacity var(--ic-base) var(--ic-ease); }
.ic-fc__media:hover img,
.ic-fc__thumb:hover img { opacity: 0.88; }
.ic-fc__title { line-height: 1.08; letter-spacing: 0; }
.ic-fc__title a { color: var(--ic-text-strong); }
.ic-fc__title a:hover { color: var(--ic-link-hover); }
.ic-fc__dek { color: var(--ic-text); margin: 0; }
.ic-fc__meta {
  display: flex; align-items: center; gap: var(--ic-space-sm);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ic-text-muted);
}
.ic-fc__author { font-weight: var(--ic-weight-semibold); color: var(--ic-text); }

/* The body owns the spacing between kicker, headline, dek and byline.
   It has to: every child has had its own margin taken away (the eyebrow's is
   zeroed just below, headings are margin-reset in base.css, the dek is
   margin:0). Without a gap here they stack flush and the card reads as one
   slab of text. `.ic-fc`'s own gap only separates the art from the body, so
   it cannot cover this. */
.ic-fc__body { display: grid; gap: var(--ic-space-sm); align-content: start; }
.ic-fc .ic-eyebrow { margin-bottom: 0; }
/* The byline is a separate unit from the read, not the next line of it. */
.ic-fc__meta { margin-top: var(--ic-space-xs); }

/* --- Top: lead + rail. The heavy rule under it is the page's first fold. --- */
.ic-front__top {
  display: grid;
  gap: var(--ic-space-2xl);
  padding-bottom: var(--ic-space-2xl);
  border-bottom: 2px solid var(--ic-text-strong);
}
@media (min-width: 900px) {
  .ic-front__top { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  /* The vertical hairline IS the column gutter. */
  .ic-front__rail {
    border-left: 1px solid var(--ic-rule);
    padding-left: var(--ic-space-2xl);
  }
}

/* --- Lead --- */
.ic-fc--lead { gap: var(--ic-space-md); }
/* Big type needs proportionally more air than the small cards. */
.ic-fc--lead .ic-fc__body { gap: var(--ic-space-md); }
.ic-fc--lead .ic-fc__meta { margin-top: var(--ic-space-sm); }
.ic-fc--lead .ic-fc__title { font-size: clamp(2rem, 4.2vw, 3.25rem); }
.ic-fc--lead .ic-fc__dek {
  font-size: var(--ic-text-lede);
  line-height: var(--ic-leading-snug);
  max-width: 54ch;
}

/* --- Rail: text left, thumb right, hairline between items --- */
.ic-front__rail { display: grid; gap: var(--ic-space-lg); align-content: start; }
.ic-fc--rail {
  grid-template-columns: minmax(0, 1fr) 84px;
  gap: var(--ic-space-md);
  align-items: start;
}
.ic-fc--rail + .ic-fc--rail {
  border-top: 1px solid var(--ic-rule);
  padding-top: var(--ic-space-lg);
}
.ic-fc--rail .ic-fc__title { font-size: 1.1875rem; }
.ic-fc--rail .ic-fc__dek { font-size: var(--ic-text-small); color: var(--ic-text-muted); }
.ic-fc--rail .ic-fc__thumb { grid-column: 2; grid-row: 1; }
/* Rail is the densest shape: tighter than the shared body gap. */
.ic-fc--rail .ic-fc__body { grid-column: 1; grid-row: 1; gap: 6px; }
.ic-fc--rail .ic-fc__meta { margin-top: 2px; }
/* A rail item with no art gives its space back to the headline. */
.ic-fc--rail:not(:has(.ic-fc__thumb)) { grid-template-columns: 1fr; }

/* --- Section band: four columns, ruled between --- */
.ic-front__grid {
  display: grid;
  gap: var(--ic-space-xl);
  padding-block: var(--ic-space-2xl);
  border-bottom: 2px solid var(--ic-text-strong);
}
.ic-fc--grid { gap: var(--ic-space-sm); align-content: start; }
.ic-fc--grid .ic-fc__title { font-size: 1.25rem; }
.ic-fc--grid .ic-fc__dek { font-size: var(--ic-text-small); color: var(--ic-text-muted); }
/* Column rules live IN the gutter, drawn as a pseudo-element centered in the
   column-gap. The obvious approach (border-left + padding-left on every column
   but the first) silently makes column 1 wider than the rest, because the
   others lose padding from their content box: its art renders visibly larger
   and the columns stop being columns. A newspaper's columns are identical. */
.ic-front__grid > * { position: relative; }
.ic-front__grid > *::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--ic-space-xl) / -2);
  width: 1px;
  background: var(--ic-rule);
}
@media (max-width: 699px) {
  .ic-front__grid > *::before { display: none; }
}
@media (min-width: 700px) {
  .ic-front__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ic-space-xl); }
  .ic-front__grid > *:nth-child(2n + 1)::before { display: none; }
}
@media (min-width: 1000px) {
  .ic-front__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Re-show what the 2-col rule hid: at 4-up, column 3 is no longer a row start. */
  .ic-front__grid > *:nth-child(2n + 1)::before { display: block; }
  .ic-front__grid > *:nth-child(4n + 1)::before { display: none; }
}

/* --- "More coming soon" ---
   Reads as a house note, not a story: no art, no byline, amber rule down the
   side so it is clearly the paper talking rather than another headline. */
.ic-more {
  border-left: 3px solid var(--ic-accent);
  background: var(--ic-bg-alt);
  border-radius: 0 var(--ic-radius) var(--ic-radius) 0;
  padding: var(--ic-space-lg);
  display: grid;
  gap: var(--ic-space-sm);
  align-content: start;
}
.ic-more__head {
  font-family: var(--ic-font-display);
  font-size: var(--ic-h4);
  line-height: 1.2;
  color: var(--ic-text-strong);
  margin: 0;
}
.ic-more__body {
  font-size: var(--ic-text-small);
  line-height: var(--ic-leading-snug);
  color: var(--ic-text);
  margin: 0;
}
.ic-more__link {
  color: var(--ic-link);
  text-decoration: underline;
  text-decoration-color: var(--ic-tint-blue);
  text-underline-offset: 2px;
  white-space: nowrap;
}
.ic-more__link:hover { color: var(--ic-link-hover); text-decoration-color: currentColor; }
/* In the section band it sits in a column, so cap it to a readable measure. */
.ic-front__grid .ic-more { max-width: 46ch; }

/* --- Thesis thread head ---
   The statement is the argument itself, so it outranks the term name
   typographically: display face, lede scale, full-strength text. The count
   is the quiet counterweight under it. */
.ic-thread-head__statement {
  font-family: var(--ic-font-display);
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: var(--ic-leading-snug);
  color: var(--ic-text-strong);
  border-left: 3px solid var(--ic-accent);
  padding-left: var(--ic-space-lg);
  margin-top: var(--ic-space-md);
  margin-bottom: var(--ic-space-md);
  max-width: 52ch;
}
.ic-thread-head__count {
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-meta);
  text-transform: uppercase;
  letter-spacing: var(--ic-tracking-label);
  color: var(--ic-text-muted);
  margin: 0;
}

/* --- Thread index (Threads Index page template) ---
   Same hierarchy as the thread head, one step down: the statement carries
   the weight, the name is the handle, the count is the whisper. */
.ic-thread-index {
  list-style: none;
  display: grid;
  gap: var(--ic-space-2xl);
  padding: 0;
  margin-top: var(--ic-space-2xl);
}
.ic-thread-index__item {
  padding-bottom: var(--ic-space-2xl);
  border-bottom: 1px solid var(--ic-rule);
}
.ic-thread-index__item:last-child { border-bottom: 0; padding-bottom: 0; }
.ic-thread-index__name {
  font-family: var(--ic-font-display);
  font-size: var(--ic-h3);
  color: var(--ic-text-strong);
  display: inline-block;
}
.ic-thread-index__name:hover { color: var(--ic-accent-deep); }
.ic-thread-index__statement {
  color: var(--ic-text);
  font-size: var(--ic-text-lede);
  line-height: var(--ic-leading-snug);
  max-width: 56ch;
  margin: var(--ic-space-sm) 0;
}
/* Block, not inline: a thread with no statement would otherwise run its
   count up against the name on the same line. */
.ic-thread-index__count {
  display: block;
  margin-top: var(--ic-space-sm);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-meta);
  text-transform: uppercase;
  letter-spacing: var(--ic-tracking-label);
  color: var(--ic-text-muted);
}
.ic-thread-index__statement + .ic-thread-index__count { margin-top: 0; }