/* ======================================================
   COMPONENTS
   ====================================================== */

/* ---------- Photographic frame: image is NEVER cropped ---------- */
.frame { margin: 0; position: relative; z-index: 0; }
.frame__box {
    position: relative;
    background: var(--forest);
    padding: clamp(10px, 1.6vw, 22px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.frame__box::before {               /* architectural offset line */
    content: "";
    position: absolute;
    inset: 0;
    transform: translate(10px, 10px);
    border: 1px solid var(--forest);
    z-index: -1;
}
.frame__box img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center center;
    background: var(--pine);
}
.frame--lime .frame__box { background: var(--limestone); }
.frame--lime .frame__box::before { border-color: var(--warm-grey); }
.frame--mint .frame__box { background: var(--mint); }
.frame--mint .frame__box::before { border-color: var(--sage); }
.frame--bare .frame__box { background: transparent; padding: 0; }
.frame--bare .frame__box::before { display: none; }
.frame figcaption, .fig-caption {
    margin-top: .9rem;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--ink-soft);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem;
}
.frame figcaption::before {
    content: "FIG.";
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    padding-top: .2em;
    color: var(--turquoise-ink);
}
.band--pine .frame figcaption, .band--forest .frame figcaption, .hero--pine .frame figcaption { color: var(--on-dark-soft); }
.band--pine .frame figcaption::before, .band--forest .frame figcaption::before { color: var(--citrus); }
.band--forest .frame__box, .band--pine .frame__box { background: var(--limestone); }
.band--forest .frame__box::before, .band--pine .frame__box::before { border-color: var(--citrus); }
.credit { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; opacity: .9; }

/* Milestone markers overlaid on the hero frame */
.markers { position: absolute; inset: 0; pointer-events: none; }
.marker {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    background: var(--paper);
    color: var(--pine);
    padding: 3px 7px;
    border: 1px solid var(--pine);
    line-height: 1.3;
}
.marker--1 { top: -12px; left: 12%; }
.marker--2 { top: 38%; right: -14px; }
.marker--3 { bottom: -12px; right: 18%; }
.marker--4 { top: 54%; left: -14px; background: var(--citrus); }
@media (max-width: 640px) {
    .marker--2 { right: -6px; }
    .marker--4 { left: -6px; }
}

/* ---------- Statistic band (number + unit + year + source) ---------- */
.stat-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-top: 2px solid currentColor;
}
@media (min-width: 640px) { .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .stat-band { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }
.stat {
    padding: var(--space-3) 1.25rem;
    border-bottom: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}
@media.stat-band { border-left: 1px solid var(--rule); }
.stat { border-right: 1px solid var(--rule); }
.band--pine .stat-band, .band--forest .stat-band { border-left-color: var(--rule-dark); }
.band--pine .stat, .band--forest .stat { border-color: var(--rule-dark); }
.stat__num {
    font-size: var(--fs-num);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.stat__num small { font-size: .38em; letter-spacing: -.01em; font-weight: 700; margin-left: .15em; }
.stat__label { font-weight: 600; font-size: var(--fs-base); line-height: 1.35; }
.stat__src {
    margin-top: auto;
    padding-top: .5rem;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    line-height: 1.5;
    color: var(--ink-soft);
}
.band--pine .stat__src, .band--forest .stat__src { color: var(--on-dark-soft); }
.band--pine .stat__num, .band--forest .stat__num { color: var(--citrus); }

/* ---------- Ledger (definition rows) ---------- */
.ledger { margin: 0; border-top: 1px solid currentColor; }
.ledger > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 1rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--rule);
}
.ledger dt { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding-top: .2em; }
.ledger dd { margin: 0; font-weight: 600; }
.band--pine .ledger > div, .band--forest .ledger > div, .hero--pine .ledger > div { border-color: var(--rule-dark); }
.band--pine .ledger dt, .band--forest .ledger dt, .hero--pine .ledger dt { color: var(--on-dark-soft); }

/* ---------- Bar chart (CSS) ---------- */
.chart {
    margin: 0;
    padding: var(--space-3);
    background: var(--paper);
    border: 1px solid var(--rule);
}
.band--paper .chart { background: #fff; }
.chart__title { font-weight: 800; font-size: var(--fs-md); margin: 0 0 .25rem; letter-spacing: -.01em; }
.chart__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-soft); margin: 0 0 1.2rem; text-transform: uppercase; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.bars li { margin: 0; display: grid; grid-template-columns: minmax(90px, 9rem) minmax(0, 1fr) auto; gap: .75rem; align-items: center; font-size: var(--fs-sm); }
.bars__label { font-weight: 600; line-height: 1.25; }
.bars__track { height: 18px; background: var(--limestone); position: relative; }
.bars__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); background: var(--forest); }
.bars li.is-hl .bars__fill { background: var(--citrus); }
.bars li.is-alt .bars__fill { background: var(--turquoise); }
.bars__val { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
@media (max-width: 480px) {
    .bars li { grid-template-columns: minmax(0, 1fr) auto; }
    .bars__label { grid-column: 1 / -1; }
}
.chart__src {
    margin: 1.2rem 0 0;
    padding-top: .8rem;
    border-top: 1px solid var(--rule);
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--ink-soft);
}
.chart__src strong { font-family: var(--font-mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin-right: .35em; color: var(--ink); }

/* Vertical column chart */
.cols-chart { display: flex; align-items: flex-end; gap: clamp(4px, 1.2vw, 14px); height: 240px; padding-top: 1.6rem; border-bottom: 1px solid var(--graphite); }
.cols-chart > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0; }
.cols-chart__bar { width: 100%; height: calc(var(--v) * 1%); background: var(--forest); position: relative; }
.cols-chart > div.is-hl .cols-chart__bar { background: var(--citrus); }
.cols-chart__val { font-family: var(--font-mono); font-size: 11px; margin-bottom: 4px; white-space: nowrap; }
.cols-chart__x { display: flex; gap: clamp(4px, 1.2vw, 14px); }
.cols-chart__x span { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 11px; padding-top: 6px; min-width: 0; }

/* Ring (conic) */
.ring {
    --v: 50;
    width: 150px; aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(var(--forest) calc(var(--v) * 1%), var(--limestone) 0);
    display: grid; place-items: center;
    flex: none;
}
.ring::after { content: ""; grid-area: 1 / 1; width: 66%; aspect-ratio: 1; border-radius: 50%; background: var(--paper); }
.ring span { grid-area: 1 / 1; z-index: 1; font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; }
.ring--citrus { background: conic-gradient(var(--citrus) calc(var(--v) * 1%), var(--limestone) 0); }
.ring-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.ring-item { display: flex; gap: 1.2rem; align-items: center; flex: 1 1 280px; }
.band--lime .ring::after { background: var(--limestone); }
.band--lime .ring { background: conic-gradient(var(--forest) calc(var(--v) * 1%), #fff 0); }
.band--mint .ring::after { background: var(--mint); }

/* Population pyramid style split bars */
.pyramid { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pyramid li { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; }
.pyramid__l, .pyramid__r { height: 16px; position: relative; }
.pyramid__l i, .pyramid__r i { position: absolute; top: 0; bottom: 0; width: calc(var(--v) * 1%); }
.pyramid__l i { right: 0; background: var(--turquoise); }
.pyramid__r i { left: 0; background: var(--forest); }
.pyramid__age { text-align: center; }

/* ---------- Horizontal timeline / career strip ---------- */
.career-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(170px, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    border-top: 2px solid currentColor;
    padding-bottom: .75rem;
    scrollbar-width: thin;
    scrollbar-color: var(--forest) transparent;
}
.career-strip:focus-visible { outline-offset: -3px; }
.career-strip > li { scroll-snap-align: start; list-style: none; margin: 0; padding: var(--space-3) var(--space-3) 0 0; position: relative; }
.career-strip > li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; background: var(--paper); border: 2px solid var(--forest); border-radius: 50%; }
.career-strip > li.is-now::before { background: var(--citrus); border-color: var(--citrus); }
.career-strip { margin: 0; padding-left: 0; }
.career-strip__year { display: block; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--forest); }
.career-strip > li.is-now .career-strip__year { color: var(--orange-ink); }
.career-strip__what { display: block; font-weight: 700; margin-top: .5rem; line-height: 1.3; }
.career-strip__note { display: block; font-size: var(--fs-sm); color: var(--ink-soft); margin-top: .3rem; line-height: 1.45; }
.band--pine .career-strip__year { color: var(--citrus); }
.band--pine .career-strip > li::before { background: var(--pine); border-color: var(--citrus); }
.band--pine .career-strip__note { color: var(--on-dark-soft); }

/* Vertical timeline */
.vtimeline { list-style: none; margin: 0; padding: 0; position: relative; }
.vtimeline::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--forest); }
@media (min-width: 760px) { .vtimeline::before { left: 150px; } }
.vtimeline > li { position: relative; margin: 0; padding: 0 0 var(--space-4) 28px; display: grid; gap: .3rem; }
@media (min-width: 760px) { .vtimeline > li { grid-template-columns: 130px minmax(0, 1fr); gap: 48px; padding-left: 0; } }
.vtimeline > li::before { content: ""; position: absolute; left: -5px; top: .45em; width: 12px; height: 12px; background: var(--paper); border: 2px solid var(--forest); border-radius: 50%; }
@media (min-width: 760px) { .vtimeline > li::before { left: 145px; } }
.vtimeline__date { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; letter-spacing: .04em; color: var(--forest-ink); }
@media (min-width: 760px) { .vtimeline__date { text-align: right; } }
.vtimeline__body h3 { font-size: var(--fs-md); margin-bottom: .35em; }
.vtimeline__body p { color: var(--ink-soft); }
.vtimeline > li.is-now::before { background: var(--citrus); border-color: var(--citrus); }
.band--lime .vtimeline > li::before { background: var(--limestone); }
.band--mint .vtimeline > li::before { background: var(--mint); }

/* ---------- Status labels (policy state) ---------- */
.status {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .28em .65em;
    border: 1px solid currentColor;
    line-height: 1.3;
    white-space: nowrap;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status--inherited { color: #4B5248; background: #ECEAE3; }
.status--review { color: var(--citrus-ink); background: #FBF2DE; }
.status--proposed { color: var(--turquoise-ink); background: #E5F1EE; }
.status--implementation { color: var(--forest); background: var(--mint); }
.status--law { color: var(--paper); background: var(--forest); border-color: var(--forest); }
.status--open { color: var(--orange-ink); background: #F8E9E1; }
.status--position { color: var(--graphite); background: transparent; }
.status-legend { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.status-legend li { margin: 0; }

/* ---------- Policy dossier rows (policy name | status | text) ---------- */
.dossier { border-top: 2px solid var(--graphite); }
.dossier__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem 2rem;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--rule);
}
@media (min-width: 900px) { .dossier__row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.dossier__row h3 { font-size: var(--fs-md); margin: .5rem 0 0; }
.dossier__row p { margin-bottom: .6em; }

/* ---------- Analytical matrix table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); background: #fff; -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline-offset: 2px; }
.data-table { font-size: var(--fs-sm); min-width: 640px; }
.data-table caption { text-align: left; padding: 1rem 1rem .5rem; font-weight: 800; font-size: var(--fs-md); caption-side: top; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: .75rem 1rem; border-bottom: 1px solid var(--rule); line-height: 1.5; }
.data-table thead th { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; background: var(--pine); color: var(--on-dark); border-bottom: 0; }
.data-table tbody th { font-weight: 700; }
.data-table tbody tr:nth-child(even) { background: #FBFAF6; }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-note { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: .7rem; }

/* Position matrix (stacked blocks, one per topic) */
.matrix { display: grid; gap: 0; border-top: 2px solid var(--graphite); }
.matrix__topic { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--rule); padding: var(--space-4) 0; gap: var(--space-3); }
@media (min-width: 1000px) { .matrix__topic { grid-template-columns: 240px minmax(0, 1fr); } }
.matrix__head h3 { font-size: var(--fs-xl); margin: .2em 0 .4em; }
.matrix__cells { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--rule); }
@media (min-width: 700px) { .matrix__cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.matrix__cell { padding: 1rem 1.2rem 1rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 700px) { .matrix__cell:nth-child(2n) { padding-left: 1.2rem; border-left: 1px solid var(--rule); } }
.matrix__cell h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--turquoise-ink); margin: 0 0 .4rem; }
.matrix__cell p { font-size: var(--fs-sm); margin: 0; }
.matrix__cell--wide { grid-column: 1 / -1; padding-left: 0 !important; border-left: 0 !important; }

/* ---------- Two-sided debate ---------- */
.debate { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--graphite); }
@media (min-width: 860px) { .debate { grid-template-columns: 1fr 1fr; } }
.debate__side { padding: var(--space-3); }
.debate__side + .debate__side { border-top: 1px solid var(--graphite); }
@media (min-width: 860px) { .debate__side + .debate__side { border-top: 0; border-left: 1px solid var(--graphite); } }
.debate__side h3, .debate__side h4 { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .8rem; }
.debate__side--for { background: var(--mint); }
.debate__side--for h3, .debate__side--for h4 { color: var(--forest); }
.debate__side--against { background: var(--limestone); }
.debate__side--against h3, .debate__side--against h4 { color: var(--orange-ink); }
.debate__side ul { margin: 0; }
.debate__foot { grid-column: 1 / -1; border-top: 1px solid var(--graphite); padding: 1rem var(--space-3); background: var(--paper); font-size: var(--fs-sm); }

/* Issue blocks (criticism page) */
.issue { border-top: 2px solid var(--graphite); padding-top: var(--space-3); margin-bottom: var(--space-5); }
.issue__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; margin-bottom: var(--space-3); }
.issue__head h3 { margin: 0; font-size: var(--fs-xl); max-width: 26ch; }
.issue__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 900px) { .issue__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.issue__cell { padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--rule); }
.issue__cell h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .5rem; color: var(--ink-soft); }
.issue__cell--bg { background: var(--limestone); grid-column: 1 / -1; }
.issue__cell--pos { background: var(--mint); }
.issue__cell--crit { background: #F6ECE5; }
.issue__cell--counter { background: #fff; }
.issue__cell--status { grid-column: 1 / -1; background: var(--paper); border-left: 4px solid var(--citrus); }

/* Problem → response → result chain (achievements) */
.chain { display: grid; grid-template-columns: minmax(0, 1fr); counter-reset: chain; border-top: 2px solid var(--graphite); }
@media (min-width: 760px) { .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .chain { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chain > div { padding: 1.1rem 1.2rem 1.3rem 0; border-bottom: 1px solid var(--rule); counter-increment: chain; }
@media (min-width: 760px) { .chain > div { padding-left: 1.2rem; border-left: 1px solid var(--rule); } }
.chain h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--turquoise-ink); margin: 0 0 .4rem; }
.chain h4::before { content: "0" counter(chain) " — "; color: var(--ink-soft); }
.chain p { font-size: var(--fs-sm); margin: 0; }

/* ---------- Flow / chain diagram ---------- */
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; list-style: none; margin: 0; padding: 0; }
.flow > li { flex: 1 1 150px; margin: 0; padding: 1.2rem 1.6rem 1.2rem 1rem; background: var(--forest); color: var(--on-dark); position: relative; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%); margin-right: -10px; }
.flow > li:first-child { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); }
.flow > li:nth-child(2n) { background: var(--pine); }
.flow > li:last-child { background: var(--citrus); color: var(--pine); }
.flow strong { display: block; font-size: var(--fs-md); letter-spacing: -.01em; text-transform: uppercase; padding-left: .6rem; }
.flow span { display: block; font-size: var(--fs-sm); color: inherit; opacity: .9; padding-left: .6rem; line-height: 1.4; margin-top: .3rem; }
@media (max-width: 700px) {
    .flow { flex-direction: column; }
    .flow > li, .flow > li:first-child { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 50% 100%, 0 calc(100% - 12px)); margin: 0 0 -6px; padding: 1rem 1rem 1.6rem; }
}

/* ---------- Policy triangle ---------- */
.triangle { position: relative; max-width: 620px; margin-inline: auto; }
.triangle svg { width: 100%; height: auto; overflow: visible; }
.triangle text { font-family: var(--font-sans); }

/* ---------- Editorial pull statement / verified quote ---------- */
.pull { border-left: 4px solid var(--citrus); padding: .2rem 0 .2rem var(--space-3); margin: var(--space-4) 0; }
.pull .statement { font-size: var(--fs-lg); max-width: 40ch; }
.quote { margin: 0; padding: var(--space-3) 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.quote blockquote { margin: 0; font-family: var(--font-serif); font-size: var(--fs-lg); line-height: 1.35; font-style: italic; }
.quote figcaption { margin-top: 1rem; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; line-height: 1.6; color: var(--ink-soft); }
.band--pine .quote figcaption, .band--forest .quote figcaption { color: var(--on-dark-soft); }

/* Note / disclaimer box */
.note {
    border: 1px solid var(--rule);
    border-left: 4px solid var(--turquoise);
    background: #fff;
    padding: 1rem 1.2rem;
    font-size: var(--fs-sm);
    line-height: 1.55;
}
.note strong:first-child { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: .3rem; color: var(--turquoise-ink); }
.band--pine .note, .band--forest .note { background: rgba(255,255,255,.06); border-color: var(--rule-dark); border-left-color: var(--citrus); color: var(--on-dark); }
.band--pine .note strong:first-child, .band--forest .note strong:first-child { color: var(--citrus); }

/* Q&A big questions */
.questions { counter-reset: q; border-top: 2px solid var(--graphite); }
.question { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2) var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); counter-increment: q; }
@media (min-width: 1000px) { .question { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.question h3 { font-size: var(--fs-xl); margin: 0; max-width: 18ch; }
.question h3::before { content: "Q" counter(q); display: block; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .14em; color: var(--turquoise-ink); margin-bottom: .8rem; }

/* Accordion */
.accordion details { border-bottom: 1px solid var(--rule); }
.accordion details:first-child { border-top: 2px solid var(--graphite); }
.accordion summary { cursor: pointer; padding: 1.1rem 2.4rem 1.1rem 0; font-weight: 700; font-size: var(--fs-md); list-style: none; position: relative; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); font-weight: 400; font-size: 1.6rem; color: var(--forest); }
.accordion details[open] summary::after { content: "–"; }
.accordion details > div { padding: 0 0 1.4rem; max-width: 72ch; }

/* ---------- Numbered list of steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 0; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.steps li::before { content: counter(s, decimal-leading-zero); font-size: 2rem; font-weight: 800; letter-spacing: -.04em; color: var(--forest); line-height: 1; }
.steps h4 { margin: 0 0 .3rem; }
.steps p { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.band--pine .steps li { border-color: var(--rule-dark); }
.band--pine .steps li::before { color: var(--citrus); }
.band--pine .steps p { color: var(--on-dark-soft); }

/* Tag chips */
.tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.tags li { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--rule); padding: .25em .6em; background: #fff; }

/* ---------- Sources ---------- */
.sources { border-top: 2px solid var(--graphite); padding-top: var(--space-3); }
.sources h2 { font-size: var(--fs-md); font-family: var(--font-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; }
.sources ol { margin: 0; padding-left: 1.4em; columns: 2 30ch; column-gap: var(--space-4); font-size: var(--fs-sm); color: var(--ink-soft); }
.sources li { break-inside: avoid; margin-bottom: .55em; overflow-wrap: anywhere; }
.sources a { color: var(--forest-ink); }

/* ---------- Related pages / next band ---------- */
.next-pages { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule-dark); }
@media (min-width: 700px) { .next-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .next-pages { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.next-pages a {
    display: flex; flex-direction: column; gap: .4rem;
    padding: 1.3rem 1.2rem 1.5rem 0;
    border-bottom: 1px solid var(--rule-dark);
    text-decoration: none; color: var(--on-dark);
}
@media (min-width: 700px) { .next-pages a { padding-left: 1.2rem; border-left: 1px solid var(--rule-dark); } }
.next-pages a span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--citrus); }
.next-pages a strong { font-size: var(--fs-md); letter-spacing: -.01em; }
.next-pages a:hover strong { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: .6rem;
    min-height: 48px; padding: 0 1.4rem;
    background: var(--forest); color: var(--paper);
    border: 1px solid var(--forest);
    font-weight: 700; font-size: var(--fs-sm); letter-spacing: .02em;
    text-decoration: none; cursor: pointer;
    transition: background .2s, color .2s;
}
.btn:hover { background: var(--pine); color: var(--paper); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--forest); }
.btn--ghost:hover { background: var(--forest); color: var(--paper); }
.btn--citrus { background: var(--citrus); border-color: var(--citrus); color: var(--pine); }
.btn--citrus:hover { background: #E6B65A; color: var(--pine); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-3); }

/* ---------- Archive filters ---------- */
.filters { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); padding: var(--space-3); background: var(--limestone); border: 1px solid var(--rule); margin-bottom: var(--space-3); }
@media (min-width: 700px) { .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .filters { grid-template-columns: 2fr repeat(5, minmax(0, 1fr)); } }
.filters label { display: flex; flex-direction: column; gap: .35rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.filters input, .filters select { min-height: 44px; padding: .5rem .7rem; border: 1px solid var(--warm-grey); background: #fff; font-family: var(--font-sans); font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--ink); border-radius: 0; }
.filters__count { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; color: var(--ink-soft); margin: 0 0 1rem; }
.records { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--graphite); }
.record { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem 2rem; padding: 1.3rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) { .record { grid-template-columns: 150px minmax(0, 1fr) 220px; } }
.record[hidden] { display: none; }
.record__date { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--forest-ink); font-weight: 500; }
.record h3 { font-size: var(--fs-md); margin: 0 0 .35rem; }
.record p { font-size: var(--fs-sm); margin: 0 0 .5rem; }
.record__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; line-height: 1.7; color: var(--ink-soft); text-transform: uppercase; }
.record dl { margin: .5rem 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .8rem; font-size: var(--fs-sm); }
.record dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); padding-top: .2em; }
.record dd { margin: 0; }
.no-results { padding: var(--space-3); background: var(--limestone); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form .full { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-weight: 700; font-size: var(--fs-sm); }
.field label .req { color: var(--orange-ink); }
.field input, .field select, .field textarea {
    min-height: 50px; padding: .7rem .9rem;
    border: 1px solid var(--graphite); border-radius: 0;
    background: #fff; color: var(--ink); font-size: 16px;
}
.field textarea { min-height: 170px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--citrus); outline-offset: 0; border-color: var(--forest); }
.field [aria-invalid="true"] { border-color: var(--orange-ink); border-width: 2px; }
.field__error { font-size: var(--fs-sm); color: var(--orange-ink); font-weight: 600; min-height: 0; }
.field__error:empty { display: none; }
.field__hint { font-size: var(--fs-xs); color: var(--ink-soft); }
.check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: .8rem; align-items: start; font-size: var(--fs-sm); }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--forest); }
.form-status { padding: 1rem 1.2rem; font-weight: 600; }
.form-status:empty { display: none; }
.form-status.is-error { background: #F8E9E1; color: var(--orange-ink); border-left: 4px solid var(--orange-ink); }
.form-status.is-ok { background: var(--mint); color: var(--forest); border-left: 4px solid var(--forest); }

/* ---------- Footer ---------- */
.site-footer { background: var(--graphite); color: var(--on-dark); }
.footer-chain {
    background: var(--forest);
    padding-block: 1.2rem;
    overflow: hidden;
}
.footer-chain ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-weight: 800; font-size: clamp(1rem, .7rem + 1.2vw, 1.6rem); letter-spacing: -.01em; text-transform: uppercase; }
.footer-chain li { margin: 0; display: flex; align-items: center; gap: 1rem; }
.footer-chain li + li::before { content: "→"; color: var(--citrus); font-weight: 400; }
.footer-chain li:last-child { color: var(--citrus); }
.footer-main { padding-block: var(--space-5) var(--space-4); }
.footer-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr; } }
.footer-name { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; letter-spacing: -.04em; line-height: .95; margin: 0 0 1rem; }
.footer-name span { color: var(--citrus); display: block; font-size: .45em; letter-spacing: .02em; font-weight: 600; margin-top: .6rem; text-transform: uppercase; }
.site-footer h2 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--citrus); margin: 0 0 1rem; padding-top: .8rem; border-top: 1px solid var(--rule-dark); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0 0 .45rem; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--citrus); text-decoration: underline; }
.footer-contact p { margin: 0 0 .5rem; }
.footer-contact .label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-soft); }
.social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.social a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--rule-dark); color: var(--on-dark); }
.social a:hover { background: var(--citrus); color: var(--pine); border-color: var(--citrus); }
.social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-base { border-top: 1px solid var(--rule-dark); padding-block: 1.3rem; font-size: var(--fs-sm); color: var(--on-dark-soft); }
.footer-base .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; }
.footer-base a { color: var(--on-dark); }
.footer-note { font-size: var(--fs-xs); color: var(--on-dark-soft); margin-top: 1rem; max-width: 46ch; }

/* Light-surfaced components keep dark text even when placed on dark bands */
.chart, .table-wrap, .debate, .issue__grid, .dash, .filters, .records .no-results,
.band--pine .chart, .band--forest .chart, .band--pine .debate, .band--forest .debate,
.band--pine .table-wrap, .band--forest .table-wrap { color: var(--ink); }
.band--pine .chart a, .band--forest .chart a, .band--pine .debate a, .band--forest .debate a,
.band--pine .table-wrap a, .band--forest .table-wrap a, .band--pine .dash a, .band--forest .dash a { color: var(--forest-ink); }
.band--pine .chart .chart__src, .band--forest .chart .chart__src { color: var(--ink-soft); }

/* Step and chain headings may be h3 or h4 depending on the outline */
.steps h3 { margin: 0 0 .3rem; font-size: var(--fs-md); }
.chain h3 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--turquoise-ink); margin: 0 0 .4rem; }
.chain h3::before { content: "0" counter(chain) " — "; color: var(--ink-soft); }
.issue__cell h3 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .5rem; color: var(--ink-soft); }
.matrix__cell h3 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--turquoise-ink); margin: 0 0 .4rem; }

/* ======================================================
   Contrast tokens per ground (audited to WCAG AA)
   ====================================================== */
.band--sage { --ink-soft: #2F342D; --turquoise-ink: #123D30; --citrus-ink: #4F3A0C; --orange-ink: #6B3218; }
.band--pine, .band--forest, .hero--pine, .hero--forest, .era--4, .era--5, .nf, .hero--debate .hero__half:last-child {
    --ink: var(--on-dark);
    --ink-soft: var(--on-dark-soft);
    --turquoise-ink: var(--citrus);
    --forest-ink: var(--citrus);
    --rule: var(--rule-dark);
}
/* light surfaces inside dark grounds get the light-ground tokens back */
.chart, .table-wrap, .debate, .issue__grid, .dash, .filters, .note, .frame__box, .tags li, .status, .records .no-results, .field, .contact-card {
    --ink: #1E201D;
    --ink-soft: #4A4F48;
    --turquoise-ink: #2F6B62;
    --forest-ink: #123D30;
    --rule: #CFC9BB;
}
.band--pine .note, .band--forest .note { --ink: var(--on-dark); --ink-soft: var(--on-dark-soft); }
.band--pine .vtimeline::before, .band--forest .vtimeline::before { background: var(--citrus); }
.band--pine .vtimeline > li::before { background: var(--pine); border-color: var(--citrus); }
.band--forest .vtimeline > li::before { background: var(--forest); border-color: var(--citrus); }
.band--pine .vtimeline__body p, .band--forest .vtimeline__body p { color: var(--on-dark-soft); }

/* buttons on dark grounds */
.band--pine .btn, .band--forest .btn, .hero--pine .btn, .hero--forest .btn { color: var(--paper); }
.band--pine .btn--citrus, .band--forest .btn--citrus, .hero--pine .btn--citrus, .hero--forest .btn--citrus { color: var(--pine); }
.band--pine .btn--ghost, .band--forest .btn--ghost, .hero--pine .btn--ghost, .hero--forest .btn--ghost { color: var(--on-dark); border-color: var(--on-dark); background: transparent; }
.band--pine .btn--ghost:hover, .band--forest .btn--ghost:hover, .hero--pine .btn--ghost:hover, .hero--forest .btn--ghost:hover { background: var(--citrus); color: var(--pine); border-color: var(--citrus); }
.band--forest .btn:not(.btn--ghost):not(.btn--citrus) { background: var(--pine); border-color: var(--pine); }

/* long German compounds never force horizontal scroll */
p, li, dd, dt, td, th, h1, h2, h3, h4, figcaption, .vtimeline__date { overflow-wrap: anywhere; }
[lang="de"] { hyphens: auto; -webkit-hyphens: auto; }