/* =========================================================================
   netex · pages/home.css (company group) · home.php · the Insights index (bible §7.20)
   Paper: kicker + slip-cut display · lead · cluster chips (links) · articles as typographic index
   rows (title in Commissioner, dek in Literata, mono meta). The lead row alone carries its data
   figure. No cards, no thumbnails grid.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

.ix { --hero-pad: var(--s-7); }
.ix-head { row-gap: var(--s-5); margin-bottom: var(--s-8); align-items: end; }
.ix-head .nx-crumbs { margin-bottom: var(--s-6); }
.ix-head .nx-eyebrow { margin-bottom: var(--s-4); }
.ix-title { margin: 0; max-width: none; }
.ix-title__kicker { display: block; max-width: 30ch; font-size: var(--t-h1-sub); font-weight: 560; line-height: 1.15; letter-spacing: -.01em; color: var(--fg-2); }
.ix-title__display { display: block; margin-top: var(--s-4); max-width: 13ch; font-size: var(--t-display); font-weight: var(--w-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); color: var(--fg); }
.ix-head__lead { margin: 0; max-width: 40ch; }
@media (min-width: 1024px) {
	.ix-head__main { grid-column: 1 / span 8; }
	.ix-head__lead { grid-column: 9 / -1; padding-bottom: .4em; }
}

/* ---- cluster chips (links) ------------------------------------------------------- */
.ix-filter { margin-bottom: var(--s-6); }
.ix-filter .nx-chip { text-decoration: none; }
.ix-filter .nx-chip[aria-current="page"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.ix-filter__n { margin-left: .35em; font-variant-numeric: tabular-nums; opacity: .72; }

/* ---- the list ------------------------------------------------------------------- */
.ix-list { margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); container-type: inline-size; }
.ix-item { border-top: var(--bw) solid var(--rule); }
.ix-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "meta" "title" "dek" "tags";
	gap: var(--s-2);
	padding: var(--s-6) var(--s-7) var(--s-6) 0;
	transition: background-color var(--dur-ui) var(--ease-mech), padding var(--dur-ui) var(--ease-mech);
}
.ix-row::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-ui) var(--ease-mech); }
.ix-row__meta { grid-area: meta; margin: 0; font: 500 var(--t-micro)/1.5 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.ix-row__title { grid-area: title; margin: 0; max-width: 32ch; font-size: var(--t-h3); font-weight: 700; line-height: 1.12; letter-spacing: var(--tr-h3); text-wrap: balance; }
.ix-row__title a { color: var(--fg); text-decoration: none; }
.ix-row__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ix-row__title a:focus-visible { outline: none; }
.ix-row:has(a:focus-visible) { outline: var(--bw-focus) solid var(--focus); outline-offset: -2px; }
.ix-row__b { font-weight: 480; color: var(--fg-2); }
.ix-row__dek { grid-area: dek; margin: var(--s-1) 0 0; max-width: 62ch; font-family: var(--f-serif); font-size: 1.0625rem; line-height: 1.5; color: var(--fg-2); }
.ix-row__tags { grid-area: tags; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: var(--s-2) 0 0; }
.ix-row__cluster { font: 600 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg); }
.ix-row__status { cursor: default; }
.ix-row__arrow { position: absolute; right: var(--s-2); top: var(--s-6); width: 22px; height: 22px; transition: transform var(--dur-ui) var(--ease-mech); }
@media (hover: hover) {
	.ix-row:hover { background: var(--bg-2); padding-left: var(--s-3); }
	.ix-row:hover::after { transform: scaleX(1); }
	.ix-row:hover .ix-row__arrow { transform: translate(calc(3 * var(--u-x)), calc(3 * var(--u-y))); }
	.ix-row:hover .ix-row__title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
}
@container (min-width: 900px) {
	.ix-row { grid-template-columns: 10rem minmax(0, 1fr) 13rem; grid-template-areas: "meta title tags" "meta dek tags"; column-gap: var(--gutter); row-gap: var(--s-2); padding-right: var(--s-8); }
	.ix-row__meta { padding-top: .5em; }
	.ix-row__tags { flex-direction: column; align-items: flex-start; margin-top: 0; padding-top: .45em; }
}

/* The lead row: bigger, with its data figure (decorative here; described in the article). */
.ix-item--lead .ix-row { padding-top: var(--s-7); padding-bottom: var(--s-7); grid-template-areas: "meta" "title" "dek" "tags" "fig"; }
.ix-item--lead .ix-row__title { font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-weight: var(--w-h2); max-width: 18ch; }
.ix-item--lead .ix-row__b { display: block; margin-top: .25em; font-size: var(--t-h1-sub); line-height: 1.18; }
.ix-item--lead .ix-row__dek { font-size: var(--t-lead); font-style: italic; color: var(--fg); max-width: 46ch; }
.ix-row__fig { grid-area: fig; margin: var(--s-4) 0 0; }
/* On a phone the chart's lettering would drop below 6 px: the list stays typographic there. */
@container (max-width: 599px) { .ix-row__fig { display: none; } }
.ix-row__fig img { display: block; width: 100%; height: auto; border: var(--bw) solid var(--rule); background: var(--paper); clip-path: var(--clip-sheet); }
@container (min-width: 900px) {
	.ix-item--lead .ix-row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "meta fig" "title fig" "dek fig" "tags fig"; align-content: start; row-gap: var(--s-3); }
	.ix-item--lead .ix-row__meta { padding-top: 0; }
	.ix-item--lead .ix-row__tags { flex-direction: row; align-items: center; padding-top: var(--s-2); }
	.ix-row__fig { margin: 0; align-self: center; }
	.ix-item--lead .ix-row__arrow { top: auto; bottom: var(--s-7); right: auto; left: calc(58.33% - 40px); }
}

.ix-pages { margin-top: var(--s-6); }
.ix-pages .page-numbers.dots { min-width: 0; }
.ix-empty { padding: var(--s-7) 0; }

/* Phones: the Molten action keeps a 44 px target but takes less of a 390 px screen, so the header
   CTA plus one primary action stay within the 5 % Molten quota (bible R2). */
@media (max-width: 479px) {
	.nx-main .nx-btn--primary { min-height: 44px; padding: .6em 16px; font-size: .875rem; }
}

.co-bit { white-space: nowrap; } /* meta strip: date · reading time · cluster, each on one line */

} /* end @layer pages */