/* home: magazine bands — full-bleed alternating figure/copy */
:root {
    --leaf: #556B2F;
    --cream: #F5F0E1;
    --sage: #8FBC8F;
    --deep: #3E4A24;
    --wood: #5D4037;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--deep);
    font-family: Georgia, "Songti SC", "Noto Serif SC", serif;
    line-height: 1.8;
}

.top {
    background: var(--leaf);
    color: #fff;
}

.top-box {
    width: min(1080px, calc(100% - 32px));
    margin: 0 auto;
    padding: 18px 0 16px;
}

.brand {
    margin: 0 0 10px;
    font-family: "Segoe UI", "PingFang SC", sans-serif;
    font-size: 20px;
    font-weight: 700;
}

nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

nav a {
    color: #fff;
    text-decoration: none;
    background: rgba(245, 240, 225, 0.16);
    border-radius: 999px;
    padding: 4px 12px;
    font-family: "Segoe UI", "PingFang SC", sans-serif;
    font-size: 14px;
}

nav a:hover,
nav a:focus {
    background: var(--sage);
    color: var(--deep);
}

.hero-wrap {
    padding: 36px 16px 12px;
}

.hero {
    width: min(1080px, 100%);
    margin: 0 auto;
    background: #fff;
    border-radius: 36px;
    padding: 36px 40px 28px;
    box-shadow: 0 12px 0 var(--sage);
}

.hero h1,
.band h2,
.sheet h2,
.faq h2 {
    margin: 0 0 16px;
    line-height: 1.35;
    color: var(--leaf);
}

.hero p,
.copy p,
.qa p,
.softs p {
    margin: 0 0 14px;
}

.when {
    color: var(--wood);
    font-size: 14px;
}

.band {
    padding: 18px 16px;
}

.band-inner {
    width: min(1080px, 100%);
    margin: 0 auto;
    background: #fff;
    border-radius: 32px;
    padding: 28px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    align-items: center;
}

.band-flip .band-inner {
    grid-template-columns: 1fr 280px;
}

.band-flip .band-inner .illus {
    order: 2;
}

.band-flip .band-inner .copy {
    order: 1;
}

.illus {
    margin: 0;
    background: var(--cream);
    border-radius: 28px;
    padding: 16px;
    text-align: center;
}

.illus figcaption {
    margin-top: 8px;
    font-size: 13px;
    color: var(--wood);
    font-family: "Segoe UI", "PingFang SC", sans-serif;
}

.pass {
    width: min(1080px, 100%);
    margin: 16px auto 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pass li {
    flex: 1 1 220px;
    background: #fff;
    border-radius: 24px;
    padding: 16px 16px 8px;
}

.pass span {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--leaf);
    color: #fff;
    text-align: center;
    line-height: 28px;
    font-family: "Segoe UI", sans-serif;
}

.softs {
    width: min(1080px, 100%);
    margin: 16px auto 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.softs li {
    flex: 1 1 240px;
    background: var(--sage);
    border-radius: 28px;
    padding: 16px 18px 8px;
}

.softs h3,
.qa h3 {
    margin: 8px 0;
    font-size: 18px;
}

.sheet,
.faq {
    width: min(1080px, 100%);
    margin: 12px auto 24px;
    background: #fff;
    border-radius: 32px;
    padding: 28px 32px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Segoe UI", "PingFang SC", sans-serif;
    font-size: 15px;
}

th,
td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #e4ddd0;
    vertical-align: top;
}

th {
    background: var(--leaf);
    color: #fff;
}

.qa {
    background: var(--cream);
    border-radius: 20px;
    padding: 16px 18px 8px;
    margin-bottom: 12px;
}

.foot {
    background: var(--wood);
    color: #f3ebe3;
    text-align: center;
    padding: 28px 16px 36px;
    font-family: "Segoe UI", "PingFang SC", sans-serif;
}

.foot p {
    margin: 0 0 8px;
}

@media (max-width: 800px) {
    .band-inner,
    .band-flip .band-inner {
        grid-template-columns: 1fr;
    }

    .band-flip .band-inner .illus,
    .band-flip .band-inner .copy {
        order: 0;
    }

    .hero,
    .sheet,
    .faq {
        padding: 22px 18px;
        border-radius: 24px;
    }
}