/* case-study.css — layout for case-studies/*.html, layered on styles.css tokens */

.cs-header {
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.cs-back,
.cs-back:visited {
    color: var(--text-desc);
    font-size: 1rem;
    transition: color .2s;
}
.cs-back:hover {
    color: var(--sakura-text);
}

.cs-header h1 {
    margin: 0;
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.05;
    font-weight: 500;
}

.cs-subtitle {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 300;
    color: var(--text-desc);
}

.cs-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    margin-top: .5rem;
}

.cs-meta-label {
    margin: 0;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--sakura-text);
}

.cs-meta-value {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
}

.cs-overview {
    font-size: 1.35rem;
    line-height: 1.6;
    font-weight: 300;
    color: var(--text-desc);
    max-width: 46em;
    margin: 0;
}

/* at-a-glance stat strip */
.cs-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.cs-stat {
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 1.25rem;
    text-align: center;
}

.cs-stat-num {
    margin: 0;
    font-size: 2rem;
    font-weight: 500;
    color: var(--sakura-text);
}

.cs-stat-label {
    margin: .25rem 0 0;
    font-size: .85rem;
    font-weight: 300;
    color: var(--text-desc);
}

/* repeating content unit */
.cs-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cs-section h2 {
    text-align: left;
    font-size: 2rem;
    margin: 0;
}

/* numbered narrative label above each section heading */
.cs-kicker {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--sakura-text);
    margin-bottom: .4rem;
}

.cs-caption {
    margin: 0;
    max-width: 46em;
    font-size: 1.05rem;
    line-height: 1.6;
    font-weight: 300;
    color: var(--text-desc);
}

/* anchor phrases: one bolded claim per paragraph so the text doesn't
   read as an undifferentiated wash */
.cs-caption strong,
.cs-overview strong {
    color: var(--text);
    font-weight: 500;
}

.cs-section figure {
    margin: 0;
}

/* covers images in section figures AND the bare hero (figure.cs-section > img) */
.cs-section img {
    display: block;
    width: 100%;
    border-radius: 24px;
    border: 1px solid var(--btn-shadow);
}

/* page-shaped scans (portrait documents): cap width so a full-width
   letter page doesn't tower over the layout at desktop sizes */
.cs-section figure.cs-doc img,
figure.cs-section.cs-doc img {
    max-width: 42rem;
    margin: 0 auto;
}

/* tighter cap for phone-shaped media (9:16 gifs, story mockups) */
.cs-section figure.cs-doc-narrow img,
figure.cs-section.cs-doc-narrow img {
    max-width: 24rem;
    margin: 0 auto;
}

.cs-section figcaption {
    margin-top: .75rem;
    text-align: center;
    font-size: .85rem;
    font-weight: 300;
    color: var(--text-desc);
}

/* tighter rhythm than the homepage's 6rem section gap */
main {
    gap: 4rem;
}

.cs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* outcome: the page's TL;DR — a ledger-style totals line. Sakura rule on
   top, small label, results set big in full text colour so they pop
   against the muted captions. No box. */
.cs-outcome {
    border-top: 2px solid var(--sakura);
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cs-outcome h2 {
    text-align: left;
    margin: 0;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--sakura-text);
}

.cs-outcome ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 46em;
}

.cs-outcome li {
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: 400;
    color: var(--text);
}

/* closing call to action */
.cs-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
    padding: 1rem 0;
}

.cs-cta p {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 300;
    color: var(--text-desc);
    max-width: 30em;
}

/* prev / next pager — ruled off from the article so it and the footer
   read as one anchored end-block instead of chips floating in space */
.cs-pager {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    border-top: 1px solid var(--border);
    padding-top: 2.5rem;
}

.cs-pager a,
.cs-pager a:visited {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--btn-shadow);
    border-radius: 16px;
    background-color: var(--btn-bg);
    color: var(--text);
    box-shadow: 0 4px 0 var(--btn-shadow);
    transform: translateY(0);
    transition: transform .1s, box-shadow .1s;
}
.cs-pager a:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 0 var(--btn-shadow);
}
.cs-pager a:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 var(--btn-shadow);
}

.cs-pager .cs-pager-next {
    text-align: right;
    align-items: flex-end;
}

.cs-pager-label {
    margin: 0;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--sakura-text);
}

.cs-pager-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

@media (max-width: 48em) {
    .cs-grid {
        grid-template-columns: 1fr;
    }

    .cs-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .cs-overview,
    .cs-subtitle,
    .cs-cta p {
        font-size: 1.15rem;
    }

    .cs-outcome li {
        font-size: 1.25rem;
    }
}

@media (max-width: 30em) {
    .cs-pager {
        grid-template-columns: 1fr;
    }

    .cs-meta {
        gap: .75rem 1.5rem;
    }
}

/* ═══ layout kit — compose per page; no two pages the same shape ═══ */

/* full-bleed: break out into the body's side padding (edge-to-edge below
   the 75em cap, wide breakout above it — no 100vw, no overflow hacks) */
.cs-bleed {
    width: calc(100% + 4rem);
    margin-inline: -2rem;
}
.cs-bleed img {
    border-radius: 0;
    border-left: none;
    border-right: none;
}

/* 3-up grid (2-up is the existing .cs-grid) */
.cs-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* before / after pair with corner labels */
.cs-compare {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
.cs-compare > div {
    position: relative;
}
.cs-compare-label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--text);
    background-color: var(--btn-bg);
    border: 1px solid var(--btn-shadow);
}

/* pull moment: one big number or one big line, standalone */
.cs-pull {
    padding: 1rem 0;
    text-align: center;
}
.cs-pull-num {
    margin: 0;
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 600;
    line-height: 1;
    color: var(--sakura-text);
}
.cs-pull-line {
    margin: .75rem auto 0;
    max-width: 28em;
    font-size: 1.15rem;
    font-weight: 300;
    color: var(--text-desc);
}

/* logo tile: white plate so dark/transparent marks read in both themes.
   border-box is load-bearing: normalize.css keeps content-box, and
   width:100% + padding would overflow the grid column without it */
.cs-logo-tile img {
    box-sizing: border-box;
    background-color: #fff;
    padding: 2.5rem;
}

/* navy plate for white/reversed artwork (e.g. white SVG logos) */
.cs-logo-tile--dark img {
    background-color: #00295a;
}

/* in compare rows, force equal plates and letterbox the marks inside */
.cs-compare .cs-logo-tile img {
    aspect-ratio: 3 / 2;
    object-fit: contain;
}

@media (max-width: 48em) {
    .cs-grid-3,
    .cs-compare {
        grid-template-columns: 1fr;
    }
    .cs-logo-tile img {
        padding: 1.5rem;
    }
}