/* =========================================
   Support us (preorder / Marble packs)
   Ithaca renders at 2rem, matching the frontpage and the top menu; the frames stay at 2x.
   ========================================= */
.support {
    width: min(var(--site-content-max, 1164px), var(--content-vw, 94vw));
    margin: 40px auto 0;
    padding-bottom: 72px;
    font-family: 'Ithaca', serif;
    -webkit-font-smoothing: none;
    text-rendering: geometricPrecision;
    font-size: 2rem;
    line-height: 1;
    color: #f4e3c2;
    --text-panel: rgba(18, 8, 9, 0.55);
    --ink: #1c0f10;
    --parchment: #f4e3c2;
    --muted: #ceb3a5;
    --gold: #fbde20;
    --gold-dark: #7d7222;
    --gold-bright: #e0d05c;
    --heading: #ffff97;
    --brown: #6d332d;
    --bar: #af3933;
    --well: #120809;
    --heading-edge: #503500;
    --heading-outline:
        3px 0 0 var(--heading-edge), -3px 0 0 var(--heading-edge), 0 3px 0 var(--heading-edge), 0 -3px 0 var(--heading-edge),
        3px 3px 0 var(--heading-edge), -3px 3px 0 var(--heading-edge), 3px -3px 0 var(--heading-edge), -3px -3px 0 var(--heading-edge);
}

/* hero */
.support-hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
    padding: 0 0 64px;
}

.support-title {
    font-family: 'VGA New', 'Ithaca', serif;
    font-weight: 400;
    font-size: 3rem;
    line-height: 1.25;
    max-width: 16ch;
    color: var(--gold);
    text-shadow: var(--heading-outline);
    margin: 0 0 24px;
}


.support-hero-panel,
.support-sub > span {
    display: block;
    box-sizing: border-box;
    background: linear-gradient(var(--text-panel), var(--text-panel)) 4px 4px / calc(100% - 8px) calc(100% - 8px) no-repeat border-box;
    border: 6px solid transparent;
    border-image: url('../../images/WebUI/Pixel_Frame.png') 3 repeat;
    image-rendering: pixelated;
    padding: 4px 8px;
}

.support-hero-panel {
    margin: 0 0 32px;
}

.support-lede {
    margin: 0 0 12px;
}

.support-note {
    margin: 0;
    color: var(--muted);
}

/* price ladder */
.support-ladder {
    padding: 0 6px 2px;
}

.support-ladder-title {
    font-size: 2rem;
    font-weight: 400;
    color: var(--gold);
    margin: 0 0 20px;
}

.support-steps {
    display: grid;
    gap: 16px;
}

.support-step {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: center;
    gap: 14px;
}

.support-when {
    display: block;
    color: var(--parchment);
}

.support-who small {
    display: block;
    font-size: 2rem;
    color: var(--muted);
}


.support-bar {
    position: relative;
    box-sizing: border-box;
    height: 44px;
    background: linear-gradient(var(--well), var(--well)) 4px 4px / calc(100% - 8px) calc(100% - 8px) no-repeat border-box;
    border: 6px solid transparent;
    border-image: url('../../images/WebUI/Pixel_Frame.png') 3 repeat;
    image-rendering: pixelated;
}

.support-bar i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    min-width: 96px;
    background: var(--bar);
    font-style: normal;
}

.support-bar b {
    position: absolute;
    right: 12px;
    top: 0;
    line-height: 32px;
    font-weight: 400;
    color: var(--parchment);
    white-space: nowrap;
}

.support-step.is-now .support-bar i {
    background: var(--gold);
}

.support-step.is-now .support-bar b {
    color: var(--ink);
}

.support-footnote {
    margin: 20px 0 0;
    max-width: 40ch;
    color: var(--muted);
}

.support-footnote b {
    color: var(--parchment);
    font-weight: 400;
}

/* packs */
.support-h2 {
    font-family: 'VGA New', 'Ithaca', serif;
    font-weight: 400;
    font-size: 3rem;
    line-height: 1.25;
    color: var(--gold);
    text-shadow: var(--heading-outline);
    margin: 0 0 12px;
}

.support-sub {
    color: var(--muted);
    margin: 0 0 32px;
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 28px;
}

.support-pack {
    display: flex;
    flex-direction: column;
    padding: 0 6px 2px;
}

.support-pack-art {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 240px;
    margin: 0 0 16px;
}

.support-pack-art img {
    display: block;
    width: auto;
    height: auto;
    zoom: 2;
    image-rendering: pixelated;
}

.support-pack-n {
    font-size: 3rem;
    line-height: 1;
    color: var(--parchment);
}

.support-pack-n small {
    font-size: 2rem;
    color: inherit;
}

.support-pack.is-featured .support-pack-n {
    color: var(--gold);
}

.support-pack-what {
    margin: 12px 0 20px;
    line-height: 1;
    color: var(--muted);
}

.support-pack-what b {
    color: var(--parchment);
    font-weight: 400;
}

.support-price::before,
.support-perk-list li::after {
    display: block;
    height: 28px;
    border: 0 solid transparent;
    border-width: 0 40px;
    border-image: url('../../images/WebUI/splitter-horizontal.png') 0 20 fill stretch;
    image-rendering: pixelated;
}

.support-price {
    margin-bottom: 24px;
}

.support-price::before {
    content: '';
    margin-bottom: 4px;
}

.support-price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
}

.support-price-row.is-now {
    margin-bottom: 4px;
}

.support-price-row.is-now .support-price-eur {
    font-size: 3rem;
    line-height: 1;
    color: var(--parchment);
}

.support-price-row.is-later {
    color: var(--muted);
}

.support-price-lbl {
    color: var(--muted);
}

.support-price-eur {
    text-align: right;
    white-space: nowrap;
}

.support-price-per {
    margin: 8px 0 0;
    text-align: right;
}

.support-off {
    color: var(--gold);
}

.support-buy {
    display: block;
    text-align: center;
    text-decoration: none;
    border: 10px solid transparent;
    border-bottom-width: 16px;
    border-image: url('../../images/WebUI/Thick_Button.png') 5 5 8 5 fill stretch;
    image-rendering: pixelated;
    padding: 4px 12px 2px;
    line-height: 1;
    color: var(--heading);
}

.support-buy:hover,
.support-buy:focus {
    color: var(--parchment);
    filter: brightness(1.1);
    text-decoration: none;
}

.support-buy {
    margin-top: auto;
}

/* perks: each line carries its own text band; the landscape behind eats unpanelled text */
.support-perks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 40px;
    padding: 0 6px 2px;
}

.support-perks .support-thanks {
    grid-column: 1 / -1;
    margin-top: 4px;
}

.support-perk-panel {
    padding: 0 6px 2px;
}

.support-h3 {
    font-size: 2rem;
    font-weight: 400;
    color: var(--gold);
    margin: 0 0 14px;
}

.support-perk-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.support-perk-list li {
    position: relative;
    padding: 12px 0 0 32px;
    line-height: 1;
}

.support-perk-list li::after {
    content: '';
    margin: 8px 0 -6px -32px;
}

.support-perk-list li:last-child {
    padding-bottom: 12px;
}

.support-perk-list li:last-child::after {
    display: none;
}

.support-perk-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(12px + 0.5em - 9px);
    width: 18px;
    height: 18px;
    background: url('../../images/WebUI/bulletpoint.png') no-repeat center / 18px 18px;
    image-rendering: pixelated;
}

.support-perk-list small {
    display: block;
    font-size: 2rem;
    color: var(--muted);
}

.support-terms {
    margin: 0 0 12px;
    color: var(--muted);
    line-height: 1;
}

.support-terms b {
    color: var(--parchment);
    font-weight: 400;
}

.support-thanks {
    margin: 0;
    color: var(--muted);
}

.support-thanks a,
.support-terms a {
    color: var(--parchment);
    text-decoration: underline;
}

.support-thanks a:hover,
.support-thanks a:focus,
.support-terms a:hover,
.support-terms a:focus {
    color: var(--heading);
}

@media (max-width: 1024px) {
    .support-hero {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .support-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .support-perks {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 760px) {
    .support-step {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}