/* ---------- Layout primitives ---------- */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 920px; }

/* Wide horizontal bands */
.band {
    position: relative;
    padding-block: var(--space-5);
    background: var(--paper);
}
.band--tight { padding-block: var(--space-4); }
.band--tall { padding-block: var(--space-6); }
.band--paper { background: var(--paper); }
.band--lime { background: var(--limestone); }
.band--mint { background: var(--mint); }
.band--sage { background: var(--sage); color: var(--ink); }
.band--forest { background: var(--forest); }
.band--pine { background: var(--pine); }
.band + .band--paper, .band--paper + .band--paper { border-top: 1px solid var(--rule); }

/* Section header row: number / label / title */
.sec-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding-top: var(--space-2);
    border-top: 1px solid currentColor;
}
.sec-head__no {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.sec-head h2 { margin: 0; max-width: 22ch; }
.sec-head p { max-width: 60ch; margin: 0; }
@media (min-width: 900px) {
    .wrap > .sec-head, .has-vlabel > .sec-head, .wrap > div > .sec-head:only-child { grid-template-columns: 160px minmax(0, 1fr) minmax(0, .9fr); align-items: start; }
    .grid-asym .sec-head, .grid-asym--rev .sec-head, .grid-2 .sec-head, .grid-3 .sec-head, .contact-grid .sec-head { grid-template-columns: minmax(0, 1fr); }
    .grid-asym .sec-head h2, .grid-asym--rev .sec-head h2, .grid-2 .sec-head h2 { max-width: 26ch; }
}

/* Asymmetric grids */
.grid-asym, .grid-asym--rev, .grid-2, .grid-3, .grid-4 {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
    .grid-asym { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .grid-asym--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.align-center { align-items: center; }
.align-end { align-items: end; }
.sticky-col { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
@media (max-width: 899px) { .sticky-col { position: static; } }

/* Vertical label running beside a band (desktop only) */
.has-vlabel { position: relative; }
.vlabel {
    display: none;
}
@media (min-width: 1100px) {
    .has-vlabel { padding-left: 64px; }
    .vlabel {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--ink-soft);
        white-space: nowrap;
        padding-bottom: 4px;
        border-right: 1px solid var(--rule);
        padding-right: 10px;
    }
    .band--pine .vlabel, .band--forest .vlabel { color: var(--on-dark-soft); border-color: var(--rule-dark); }
}

/* Columns separated by thin rules (instead of cards) */
.ruled {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-top: 1px solid var(--rule);
}
.ruled > * { padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) {
    .ruled--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ruled--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ruled--2 > *, .ruled--3 > * { padding-right: var(--space-3); }
    .ruled--2 > *:nth-child(2n), .ruled--3 > *:nth-child(2n) { padding-left: var(--space-3); border-left: 1px solid var(--rule); }
}
@media (min-width: 1100px) {
    .ruled--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ruled--3 > *:nth-child(2n) { padding-left: 0; border-left: 0; }
    .ruled--3 > *:not(:nth-child(3n+1)) { padding-left: var(--space-3); border-left: 1px solid var(--rule); }
}
.band--pine .ruled, .band--pine .ruled > *, .band--forest .ruled, .band--forest .ruled > * { border-color: var(--rule-dark); }
.ruled h3, .ruled h4 { margin-bottom: .4em; }

/* Breadcrumb */
.crumbs {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 var(--space-3);
}
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4em; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: .4em; opacity: .55; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { opacity: .8; }

/* ======================================================
   PAGE HEROES — several distinct compositions
   ====================================================== */
.hero { position: relative; padding-block: var(--space-5) var(--space-4); }
.hero h1 { margin-bottom: .35em; }

/* 1. Ledger hero: oversized title + key-figure ledger on the right */
.hero--ledger { background: var(--limestone); }
.hero--ledger .hero__grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .hero--ledger .hero__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; } }

/* 2. Pine hero with giant watermark numeral */
.hero--pine { background: var(--pine); color: var(--on-dark); overflow: hidden; padding-block: var(--space-6) var(--space-5); }
.hero--pine .eyebrow { color: var(--citrus); }
.hero--pine .crumbs { color: var(--on-dark-soft); }
.hero--pine .lede { color: var(--on-dark); }
.hero__mark {
    position: absolute;
    right: -0.04em;
    bottom: -0.18em;
    font-size: clamp(7rem, 4rem + 18vw, 22rem);
    font-weight: 800;
    letter-spacing: -.06em;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(217, 164, 65, .35);
    pointer-events: none;
    user-select: none;
}
.hero--pine .wrap { position: relative; z-index: 1; }

/* 3. Split hero with framed photograph */
.hero--split { background: var(--paper); border-bottom: 1px solid var(--rule); }
.hero--split .hero__grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1000px) { .hero--split .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hero--split.hero--photo-left .hero__grid > figure { order: -1; }
@media (max-width: 999px) { .hero--split.hero--photo-left .hero__grid > figure { order: 0; } }

/* 4. Index hero: section number + title running across a rule */
.hero--index { background: var(--paper); padding-bottom: 0; }
.hero--index .hero__row {
    display: grid; gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--graphite);
}
@media (min-width: 900px) { .hero--index .hero__row { grid-template-columns: 220px minmax(0, 1fr); align-items: end; } }
.hero__no {
    font-size: var(--fs-num);
    font-weight: 800;
    line-height: .85;
    letter-spacing: -.05em;
    color: var(--forest);
}

/* 5. Mint hero with stacked display type */
.hero--mint { background: var(--mint); }
.hero--mint .display { color: var(--forest); }

/* 6. Forest hero, centred column (contact, 404) */
.hero--forest { background: var(--forest); color: var(--on-dark); }
.hero--forest .eyebrow { color: var(--citrus); }
.hero--forest .crumbs { color: var(--on-dark-soft); }
.hero--forest .lede { color: var(--on-dark); }

/* 7. Debate hero split in two tones */
.hero--debate { padding: 0; }
.hero--debate .hero__halves { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero--debate .hero__half { padding: var(--space-5) var(--gutter); }
.hero--debate .hero__half:first-child { background: var(--limestone); }
.hero--debate .hero__half:last-child { background: var(--pine); color: var(--on-dark); }
@media (min-width: 900px) { .hero--debate .hero__halves { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
    .hero--debate .hero__half:first-child { padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
    .hero--debate .hero__half:last-child { padding-right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
}