/* Hallmark · shape: Ecosystem Index · genre: editorial · theme: Editorial, re-toned to the Transla brand (accent #16B866, warm #FF6B4A, ink #12211B) — user named the brand green · posture: committed
 * hero: Banner · nav: edge-aligned masthead · footer: colophon block · imagery: none · signature: a rail of dated industry readings under a band of four figures that carry their sources
 * axes: light/display-condensed/chromatic-green · surface: absolute · contrast: pass · fold: pass · draw: c2e0d2 · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4 · weakest: E, Bricolage carries no CJK; Chinese heads fall back to PingFang SC with a matched weight. Accepted: the brand sans body keeps this page one family with the download page */

@import url("./site.css");

/* The band: an ink field, the wordmark's green running under the head. */
.band { background: var(--color-ink); color: var(--color-paper); padding-block: var(--space-3xl) var(--space-2xl); }
.band h1 { color: var(--color-paper); max-width: 18ch; }
.band .lead { color: color-mix(in oklab, var(--color-paper) 84%, var(--color-ink)); margin-top: var(--space-lg); }
.band .band-rule { width: 96px; height: var(--rule-heavy); background: var(--color-accent-bright); margin-bottom: var(--space-lg); }
.band .band-meta { margin-top: var(--space-xl); font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-sm); color: color-mix(in oklab, var(--color-paper) 66%, var(--color-ink)); }

/* Four doors: where the rest of the site is. Each carries its own colour. */
.quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.quad-card { display: block; background: var(--color-paper); border: 1px solid var(--color-rule); border-top: var(--rule-heavy) solid var(--color-ink); border-radius: var(--radius-card); padding: var(--space-lg); text-decoration: none; color: inherit; transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.quad-card:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.quad-card .door-t { display: block; font-family: var(--font-display); font-size: var(--text-title); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; line-height: 1.15; color: var(--color-ink); margin-bottom: var(--space-2xs); font-variant-numeric: lining-nums tabular-nums; }
.quad-card p { font-size: var(--text-sm); color: var(--color-muted); }
.quad-card .go { display: block; margin-top: var(--space-md); font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-sm); color: var(--color-accent-deep); }
.quad-card--green { border-top-color: var(--color-accent); }
.quad-card--warm { border-top-color: var(--color-warm); }
.quad-card--amber { border-top-color: var(--color-amber); }
.quad-card[aria-current="page"] { background: var(--color-accent-soft); border-color: var(--color-accent-line); }
.quad-card[aria-current="page"] .go { color: var(--color-ink-2); }

/* The doors sit high, under the band. */
.doors { margin-top: var(--space-2xl); }
.snapshot { margin-top: var(--section-gap-s); }
.snapshot h2 { font-size: var(--text-section); }
.rail--later { margin-top: var(--section-gap-l); }

/* The figures: four numbers with the source under each. */
.pulse { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); margin-top: var(--space-lg); }
.pulse > div { border-top: 1px solid var(--color-rule-2); padding-top: var(--space-md); }
.pulse .fig { display: block; font: 800 var(--text-2xl)/1.05 var(--font-display); font-variation-settings: "wdth" 75, "opsz" 96; letter-spacing: var(--tracking-display); color: var(--color-accent-deep); font-variant-numeric: lining-nums tabular-nums; }
.pulse > div:nth-child(2) .fig { color: var(--color-warm-deep); }
.pulse > div:nth-child(3) .fig { color: var(--color-ink); }
.pulse > div:nth-child(4) .fig { color: var(--color-accent-deep); }
.pulse dt { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink); }
.pulse dd { margin: var(--space-3xs) 0 0; font-size: var(--text-xs); color: var(--color-muted); }

/* Rails: each rail opens on its own head, never a label band. */
.rail { margin-top: var(--section-gap); }
.rail > .container > h2 { font-size: var(--text-section); }
.rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.rail-head h2 { font-size: var(--text-section); }
.rail-head .count { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-sm); color: var(--color-muted); }

/* The pinned reading: a wider card on the accent wash. */
.feature { display: block; background: var(--color-accent-soft); border: 1px solid var(--color-accent-line); border-radius: var(--radius-card); padding: var(--space-xl); text-decoration: none; color: inherit; }
.feature h3 { font-size: var(--text-2xl); line-height: 1.15; max-width: 26ch; }
.feature p { margin-top: var(--space-md); max-width: 62ch; color: var(--color-ink-2); }
.feature .more { margin-top: var(--space-lg); }

/* The archive: dated rows, one paragraph each. */
.feed { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-rule-2); }
.feed > li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.feed .when { grid-column: 1 / 3; font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: lining-nums tabular-nums; }
.feed .what { grid-column: 3 / 12; }
.feed .what h3 { font-size: var(--text-xl); line-height: 1.2; }
.feed .what p { margin-top: var(--space-sm); max-width: 62ch; color: var(--color-ink-2); }
.feed .more { grid-column: 12 / 13; justify-self: end; }
@media (max-width: 60rem) {
  .feed > li { grid-template-columns: 1fr; }
  .feed .when { grid-column: auto; }
  .feed .what { grid-column: auto; margin-top: var(--space-xs); }
  .feed .more { grid-column: auto; justify-self: start; margin-top: var(--space-md); }
}

/* The article itself. */
.article-head { padding-block: var(--space-2xl) calc(var(--space-2xl) + var(--space-lg)); }
.article-head .kicker { display: inline-block; margin-bottom: var(--space-md); font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-sm); color: var(--color-accent-deep); }
.article-head h1 { font-size: var(--text-display-s); line-height: 1.05; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-lg); align-items: baseline; }
.article-head h1 > .views { justify-self: end; }
.article-head .views { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.article-head .stand { margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--color-ink-2); max-width: 52ch; }
.article-head .stamp { display: block; margin-top: var(--space-lg); font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: lining-nums tabular-nums; }
.article { padding-bottom: var(--space-2xl); }
.article .prose { max-width: 68ch; }
.article .prose h2 { margin-top: var(--space-xl); font-size: var(--text-section); font-weight: 800; line-height: 1.2; }
.article .prose p, .article .prose li { margin-top: var(--space-md); line-height: 1.8; color: var(--color-ink-2); }
.article .prose p:first-child { margin-top: 0; }
.article .prose strong { color: var(--color-ink); }
.article .prose ul { margin-top: var(--space-md); padding-left: var(--space-lg); }
.article .prose li { margin-top: var(--space-sm); }

/* Inline sources: the source name sits right beside the figure it backs. */
.article .prose .src { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-xs); color: var(--color-accent-deep); white-space: nowrap; }
.article .prose .src::before { content: "（"; color: var(--color-muted); }
.article .prose .src::after { content: "）"; color: var(--color-muted); }

/* Closing band: one line and the way back. */
.close-band { background: var(--color-paper-3); border-top: var(--rule-heavy) solid var(--color-ink); margin-top: calc(var(--space-2xl) + var(--space-xs)); }
.close-band .close-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; padding-block: var(--space-xl); }
.close-band p { font-size: var(--text-md); color: var(--color-ink-2); max-width: 46ch; }

/* Related readings: three cards across, each carrying its own rule. */
.related { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.related li { display: flex; flex-direction: column; border: 1px solid var(--color-rule); border-top: var(--rule-heavy) solid var(--color-accent); border-radius: var(--radius-card); padding: var(--space-lg); background: var(--color-paper); }
.related li:nth-child(2) { border-top-color: var(--color-warm); }
.related li:nth-child(3) { border-top-color: var(--color-amber); }
.related h3 { font-size: var(--text-lg); line-height: 1.25; }
.related p { margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); }
.related .more { margin-top: auto; align-self: start; padding-top: var(--space-md); }
@media (max-width: 60rem) {
  .related { grid-template-columns: 1fr; }
}

@media (max-width: 60rem) {
  .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .quad, .pulse { grid-template-columns: 1fr; }
}