/* Northfold Journal's own stylesheet. Values come from its design contract (contract.js);
   page-level gutters (--gutter, --section) are layout, not component spacing. */
:root { --color-bg: #0e0e10; --color-raised: #17171a; --color-ink: #f2efe8; --color-muted: #a39e93; --color-accent: #c8a96a; --color-line: #2a2a2e; --font-display: 'Playfair Display', Georgia, serif; --font-body: Georgia, 'Times New Roman', serif; --font-mono: ui-monospace, Menlo, monospace; --type-display: 40px; --type-body: 17px; --type-meta: 13px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --gutter: 48px; --section: 96px; }
*, ::before, ::after { box-sizing: border-box; }
html, body { margin: 0px; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); font-size: var(--type-body); line-height: 1.6; }
a { color: var(--color-ink); text-decoration-color: var(--color-line); text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--color-accent); }
p, h1, h2, h3 { margin: 0px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--type-display); line-height: 1.1; }
code { font-family: var(--font-mono); font-size: var(--type-meta); color: var(--color-accent); }
.page { max-width: 1200px; margin: 0px auto; border-left: 1px solid var(--color-line); border-right: 1px solid var(--color-line); }
.eyebrow { font-size: var(--type-meta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); }
.meta { font-size: var(--type-meta); color: var(--color-muted); }
.masthead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s4) var(--s8); padding: var(--s6) var(--gutter); border-bottom: 1px solid var(--color-line); }
.brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s6); }
.wordmark { font-family: var(--font-display); font-size: var(--type-display); line-height: 1.1; text-decoration: none; white-space: nowrap; }
.wordmark em { color: var(--color-accent); }
.issue { font-size: var(--type-meta); color: var(--color-muted); padding-left: var(--s6); border-left: 1px solid var(--color-line); white-space: nowrap; }
.nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); }
.nav a { font-size: var(--type-meta); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); text-decoration: none; white-space: nowrap; padding-bottom: var(--s1); }
.nav a[aria-current] { color: var(--color-ink); border-bottom: 1px solid var(--color-accent); }
.lead { display: grid; grid-template-columns: minmax(0px, 6fr) minmax(0px, 5fr); gap: var(--gutter); align-items: center; padding: 64px var(--gutter) 72px; }
.lead-text { display: flex; flex-direction: column; gap: var(--s6); }
.lead h1 { font-size: var(--type-display); line-height: 1.1; max-width: 520px; }
.lead .deck { color: var(--color-muted); max-width: 520px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s6); margin-top: var(--s2); }
.button { background: var(--color-accent); color: var(--color-bg); padding: var(--s3) var(--s6); border-radius: 0px; font-size: var(--type-meta); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
.lead-image { aspect-ratio: 1 / 1; border: 1px solid var(--color-line); overflow: hidden; }
.lead-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.also { padding: 0 var(--gutter) var(--section); display: flex; flex-direction: column; gap: var(--s6); }
.also-head { display: flex; align-items: baseline; gap: var(--s4); font-family: var(--font-display); font-style: italic; font-size: var(--type-body); }
.also-head::after { content: ""; flex: 1 1 0%; border-top: 1px solid var(--color-line); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s6); }
.card { background: var(--color-raised); padding: var(--s8); border-radius: 0px; min-height: 340px; display: flex; flex-direction: column; }
.card .eyebrow { display: flex; align-items: center; gap: var(--s3); letter-spacing: 0.16em; }
.card .eyebrow::before { content: ""; width: 24px; border-top: 1px solid var(--color-accent); }
.card h3 { margin-top: var(--s6); text-wrap: balance; }
.card .dek { margin-top: var(--s4); font-style: italic; color: var(--color-muted); text-wrap: pretty; }
.card .meta { margin-top: auto; padding-top: var(--s8); letter-spacing: 0.04em; }
.authority { background: var(--color-raised); border-top: 1px solid var(--color-ink); }
.authority-rule { height: var(--s1); border-bottom: 1px solid var(--color-line); }
.running-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s6); padding: var(--s3) var(--gutter); border-bottom: 1px solid var(--color-line); font-size: var(--type-meta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
.running-head span span { color: var(--color-accent); }
.authority-body { padding: 64px var(--gutter) 72px; display: flex; flex-direction: column; gap: 64px; }
.authority-intro { display: grid; grid-template-columns: minmax(0px, 7fr) minmax(0px, 4fr); gap: 64px; align-items: end; }
.authority-intro > div:first-child { display: flex; flex-direction: column; gap: var(--s4); }
.authority-intro p { color: var(--color-muted); max-width: 600px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s6); margin: 0px; font-size: var(--type-meta); padding-left: var(--s6); border-left: 1px solid var(--color-line); }
.facts dt { color: var(--color-muted); }
.facts dd { margin: 0px; }
.palette-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s6); margin-bottom: var(--s3); font-size: var(--type-meta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
.palette { display: grid; grid-template-columns: repeat(6, minmax(0px, 1fr)); border: 1px solid var(--color-line); margin: 0px; padding: 0px; list-style: none; }
.chip { min-height: 200px; padding: var(--s4); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4); border-right: 1px solid var(--color-line); }
.chip:last-child { border-right: 0px; }
.chip-name { display: flex; flex-direction: column; gap: var(--s1); }
.chip-name b { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--type-display); line-height: 1; }
.chip-name span, .chip-detail { font-family: var(--font-mono); font-size: var(--type-meta); line-height: 1.4; }
.chip-detail { display: flex; flex-direction: column; gap: var(--s1); }
.chip-detail span:last-child { font-family: var(--font-body); }
.chip.dark { color: var(--color-ink); }
.chip.light { color: var(--color-bg); }
.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gutter); }
.ledger h3 { font-size: var(--type-body); padding-bottom: var(--s3); border-bottom: 1px solid var(--color-ink); }
.ledger dl { margin: 0px; }
.ledger .row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--color-line); }
.ledger dt { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--type-body); line-height: 1.3; }
.ledger dt code { color: var(--color-muted); }
.ledger dd { margin: 0px; font-size: var(--type-meta); text-align: right; }
.status { padding-top: var(--s4); border-top: 1px solid var(--color-line); }
.footer { padding: var(--s6) var(--gutter) var(--gutter); border-top: 1px solid var(--color-line); }
@media (max-width: 1000px) {
  .palette { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
  .chip:nth-child(3) { border-right: 0px; }
  .chip:nth-child(-n+3) { border-bottom: 1px solid var(--color-line); }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; --section: 64px; }
  .page { border: 0px; }
  .masthead { flex-direction: column; align-items: flex-start; padding: var(--s4) var(--gutter); }
  .lead { grid-template-columns: 1fr; gap: var(--s8); padding: var(--s8) var(--gutter) 48px; }
  .lead-image { aspect-ratio: 4 / 5; }
  .card { min-height: 0px; padding: var(--s6); }
  .authority-body { padding: 48px var(--gutter); gap: 48px; }
  .authority-intro { grid-template-columns: 1fr; gap: var(--s6); }
  .facts { padding-left: 0px; border-left: 0px; padding-top: var(--s4); border-top: 1px solid var(--color-line); }
  .palette { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .chip { min-height: 160px; border-bottom: 1px solid var(--color-line); }
  .chip:nth-child(3) { border-right: 1px solid var(--color-line); }
  .chip:nth-child(2n) { border-right: 0px; }
  .chip:nth-last-child(-n+2) { border-bottom: 0px; }
  .ledger { grid-template-columns: 1fr; gap: var(--s8); }
}