/* ======================================================
   PAGE-SPECIFIC COMPOSITIONS
   ====================================================== */

/* ---------- HOME: editorial data composition ---------- */
.home-hero { background: var(--paper); padding-block: var(--space-4) var(--space-5); border-bottom: 1px solid var(--graphite); position: relative; overflow: hidden; }
.home-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: center; }
@media (min-width: 1000px) { .home-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-5); } }
.home-hero__label {
    font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase;
    display: inline-block; padding: .35rem .6rem; border: 1px solid var(--graphite); margin-bottom: var(--space-3);
}
.home-hero__text { container-type: inline-size; min-width: 0; }
.home-hero h1 {
    font-size: clamp(2.6rem, 1.4rem + 5vw, 6rem);
    font-size: 13.6cqi;
    line-height: .86;
    letter-spacing: -.06em;
    text-transform: uppercase;
    margin: 0 0 var(--space-3);
}
.home-hero h1 span { display: block; }
.home-hero h1 span:nth-child(2) { color: var(--forest); padding-left: .3em; }
.home-hero h1 span:nth-child(3) { color: transparent; -webkit-text-stroke: 2px var(--graphite); padding-left: .6em; }
@supports not (-webkit-text-stroke: 1px black) { .home-hero h1 span:nth-child(3) { color: var(--graphite); } }
@media (max-width: 520px) {
    .home-hero h1 span:nth-child(2) { padding-left: .2em; }
    .home-hero h1 span:nth-child(3) { padding-left: .4em; -webkit-text-stroke-width: 1.5px; }
}
.home-hero__office { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; border-top: 2px solid var(--graphite); padding-top: 1.1rem; max-width: 520px; }
.home-hero__office strong { font-size: var(--fs-md); display: block; line-height: 1.25; }
.home-hero__office span { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-soft); }
.home-hero__badge { width: 54px; height: 54px; background: var(--citrus); display: grid; place-items: center; font-weight: 800; color: var(--pine); font-size: 13px; letter-spacing: -.01em; }
.home-hero__portrait { position: relative; margin: 0; padding: 18px 0 18px 18px; }
.home-hero__portrait .frame__box { background: var(--forest); padding: clamp(14px, 2.4vw, 34px); }
.home-hero__portrait .frame__box::before { transform: translate(-18px, -18px); border-color: var(--citrus); }
.home-hero__portrait .frame__box img { max-height: 70vh; width: auto; max-width: 100%; }
.home-hero__grid-lines { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(41,43,40,.06) 1px, transparent 1px); background-size: calc(100% / 12) 100%; }

/* Home: opening statement */
.opening { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 1000px) { .opening { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.opening__title { font-size: var(--fs-2xl); text-transform: uppercase; letter-spacing: -.045em; line-height: .92; margin: 0; }
.opening__title em { font-style: normal; color: var(--citrus); }

/* Home: policy triangle */
.triangle-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: center; }
@media (min-width: 1000px) { .triangle-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Home: entry index (large typographic rows) */
.entry-rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--graphite); }
.entry-rows li { margin: 0; border-bottom: 1px solid var(--rule); }
.entry-rows a { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: .3rem 1rem; padding: 1.2rem 0; text-decoration: none; color: var(--ink); align-items: baseline; }
@media (min-width: 900px) { .entry-rows a { grid-template-columns: 80px minmax(0, 1.1fr) minmax(0, 1fr) 40px; } }
.entry-rows .n { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--turquoise-ink); }
.entry-rows .t { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.02em; }
.entry-rows .d { color: var(--ink-soft); font-size: var(--fs-sm); grid-column: 2; }
@media (min-width: 900px) { .entry-rows .d { grid-column: auto; } }
.entry-rows .a { display: none; font-size: 1.4rem; color: var(--forest); transition: transform .2s var(--ease); }
@media (min-width: 900px) { .entry-rows .a { display: block; } }
.entry-rows a:hover .t { color: var(--forest); }
.entry-rows a:hover .a { transform: translateX(6px); }

/* ---------- Era bands (timeline page) ---------- */
.era { padding-block: var(--space-5); position: relative; }
.era--1 { background: var(--limestone); }
.era--2 { background: var(--mint); }
.era--3 { background: #E4E8DC; }
.era--4 { background: var(--forest); color: var(--on-dark); }
.era--5 { background: var(--pine); color: var(--on-dark); }
.era__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }
@media (min-width: 900px) { .era__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; } }
.era__years { font-size: var(--fs-3xl); font-weight: 800; line-height: .85; letter-spacing: -.06em; margin: 0; }
.era--4 .era__years, .era--5 .era__years { color: var(--citrus); }
.era--4 .eyebrow, .era--5 .eyebrow { color: var(--citrus); }
.era--4 .vtimeline::before, .era--5 .vtimeline::before { background: var(--citrus); }
.era--4 .vtimeline > li::before { background: var(--forest); border-color: var(--citrus); }
.era--5 .vtimeline > li::before { background: var(--pine); border-color: var(--citrus); }
.era--4 .vtimeline__date, .era--5 .vtimeline__date { color: var(--citrus); }
.era--4 .vtimeline__body p, .era--5 .vtimeline__body p { color: var(--on-dark-soft); }
.era--4 .frame figcaption, .era--5 .frame figcaption { color: var(--on-dark-soft); }
.era-nav { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--graphite); margin-top: var(--space-3); }
.era-nav a { flex: 1 1 140px; padding: .9rem 1rem; text-decoration: none; color: var(--ink); border-right: 1px solid var(--graphite); font-weight: 700; font-size: var(--fs-sm); }
.era-nav a:last-child { border-right: 0; }
.era-nav a span { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ink-soft); letter-spacing: .08em; }
.era-nav a:hover { background: var(--forest); color: var(--paper); }
.era-nav a:hover span { color: var(--on-dark-soft); }
@media (max-width: 700px) { .era-nav a { border-right: 0; border-bottom: 1px solid var(--graphite); } }

/* ---------- Bundestag counter ---------- */
.years-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; }
.years-grid li { margin: 0; aspect-ratio: 1; background: var(--forest); color: var(--on-dark); display: flex; flex-direction: column; justify-content: space-between; padding: 6px; font-family: var(--font-mono); font-size: 11px; line-height: 1.2; }
.years-grid li b { font-family: var(--font-sans); font-size: 15px; font-weight: 800; }
.years-grid li.wp { background: var(--citrus); color: var(--pine); }
.years-grid li.now { background: var(--orange-ink); color: #fff; }
.years-grid button { all: unset; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.contact-card { border-top: 2px solid var(--graphite); }
.contact-card > div { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.contact-card .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: .25rem; }
.contact-card .value { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.contact-card a.value { text-decoration: none; color: var(--forest-ink); }
.contact-card a.value:hover { text-decoration: underline; }

/* ---------- 404 ---------- */
.nf { min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; background: var(--pine); color: var(--on-dark); padding-block: var(--space-5); position: relative; overflow: hidden; }
.nf h1 { font-size: var(--fs-2xl); text-transform: uppercase; max-width: 14ch; line-height: .95; }
.nf__axis { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(243,241,234,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(243,241,234,.06) 1px, transparent 1px); background-size: 64px 64px; }
.nf__point { position: absolute; right: 14%; top: 26%; width: 18px; height: 18px; border: 2px dashed var(--citrus); border-radius: 50%; }
.nf .wrap { position: relative; z-index: 1; }
.nf__links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--space-4); }
.nf__links a { color: var(--on-dark); border: 1px solid var(--rule-dark); padding: .7rem 1.1rem; text-decoration: none; font-weight: 700; }
.nf__links a:hover { background: var(--citrus); color: var(--pine); border-color: var(--citrus); }

/* ---------- Media gallery ---------- */
.gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-3); }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.gallery .frame__box img { background: transparent; }
.gallery__cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--turquoise-ink); margin: 0 0 .6rem; }

/* ---------- Health dashboard tiles (key priorities) ---------- */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--graphite); border-left: 1px solid var(--rule); }
@media (min-width: 700px) { .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .dash { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dash__item { padding: 1.3rem 1.2rem 1.5rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: .7rem; background: #fff; }
.dash__item h3 { font-size: var(--fs-md); margin: 0; text-transform: uppercase; letter-spacing: -.005em; }
.dash__item p { font-size: var(--fs-sm); margin: 0; }
.dash__no { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); letter-spacing: .1em; }

/* Constituency map */
.map-figure svg { width: 100%; height: auto; }