/* ── VISION PAGE STYLES ── */
/* Requires base.css */

.vision-main {
    max-width: 680px;
    margin: 0 auto;
    padding: 140px 24px 100px;
}

/* ── HEADER ── */
.vision-header {
    margin-bottom: 72px;
}

.vision-hed {
    font-family: var(--serif);
    font-size: clamp(44px, 5.5vw, 80px);
    font-weight: 400;
    line-height: 1.06;
    color: var(--ink);
    letter-spacing: -1.5px;
    margin-top: 24px;
}
.vision-hed em {
    font-style: italic;
    color: var(--teal);
}

/* ── BODY COPY ── */
.vision-body {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.vision-body p {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.9;
    color: var(--ink-soft);
}

/* Pull quote */
.vision-pull {
    font-family: var(--serif);
    font-size: clamp(22px, 2.8vw, 36px);
    font-weight: 400;
    font-style: italic;
    line-height: 1.4;
    color: var(--ink);
    padding-left: 28px;
    border-left: 2px solid var(--teal);
    margin: 16px 0;
}

/* "But here's the real thing." */
.vision-but {
    font-family: var(--serif);
    font-size: 22px !important;
    font-style: italic;
    color: var(--ink) !important;
    font-weight: 400 !important;
}

/* "Puzzverse is that way in." */
.vision-emphasis {
    font-family: var(--serif);
    font-size: clamp(28px, 3.2vw, 44px) !important;
    font-weight: 400 !important;
    color: var(--ink) !important;
    letter-spacing: -0.5px;
    line-height: 1.2 !important;
}

/* Closing line */
.vision-closing {
    font-family: var(--serif);
    font-size: clamp(32px, 4vw, 56px) !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    color: var(--ink) !important;
    letter-spacing: -1px;
    margin-top: 24px;
}
.vision-closing em {
    font-style: italic;
    color: var(--teal);
}

/* ── CHAMPIONSHIP IMAGE ── */
.vision-figure {
    margin: 16px 0;
}

.vision-figure img {
    width: 100%;
    border-radius: 4px;
    display: block;
    box-shadow: 0 12px 40px rgba(26,31,54,0.10);
}

.vision-figure figcaption {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 300;
    color: var(--ink-muted);
    letter-spacing: 0.3px;
    text-align: center;
}

/* ── MOBILE ── */
@media (max-width: 768px) {
    .vision-main {
        padding: 100px 24px 72px;
    }
    .vision-hed {
        letter-spacing: -0.8px;
    }
    .vision-body p {
        font-size: 16px;
    }
    .vision-pull {
        padding-left: 20px;
    }
}