.case-study { background: var(--paper); }
.case-study .site-header { position: absolute; }
.case-hero {
    padding: 145px 0 78px;
    color: var(--cream);
    background:
        radial-gradient(circle at 85% 20%, rgba(234,183,102,.13), transparent 24%),
        linear-gradient(120deg, var(--ink), #173a38);
}
.case-breadcrumbs {
    display: flex;
    gap: 9px;
    align-items: center;
    margin-bottom: 54px;
    color: rgba(244,240,231,.55);
    font-size: 11px;
}
.case-breadcrumbs a:hover { color: var(--cream); }
.case-hero-grid { display: grid; grid-template-columns: 1fr 310px; gap: 90px; align-items: end; }
.case-kicker {
    margin-bottom: 17px;
    color: var(--gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.case-hero h1 { max-width: 900px; margin-bottom: 26px; font-size: clamp(60px, 8vw, 110px); }
.case-lede { max-width: 770px; margin-bottom: 27px; color: rgba(244,240,231,.7); font-size: 17px; }
.case-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.case-tags span {
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.22);
    color: var(--mint);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.case-repo-card { padding: 24px; border: 1px solid rgba(255,255,255,.22); }
.case-repo-card small { display: block; margin-bottom: 7px; color: var(--mint); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.case-repo-card strong { display: block; margin-bottom: 17px; font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.15; }
.case-repo-card a { display: inline-flex; gap: 8px; padding-bottom: 2px; border-bottom: 1px solid currentColor; font-size: 12px; }
.case-facts { color: var(--ink); background: var(--gold); }
.case-facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.case-fact { min-height: 112px; padding: 25px 25px 20px 0; }
.case-fact + .case-fact { padding-left: 25px; border-left: 1px solid rgba(16,42,42,.25); }
.case-fact span { display: block; margin-bottom: 8px; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.case-fact strong { display: block; font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.05; }

.case-main { display: grid; grid-template-columns: 210px 1fr; gap: clamp(60px, 9vw, 125px); padding: 105px 0 120px; }
.case-index { position: sticky; top: 28px; align-self: start; border-top: 1px solid var(--line); }
.case-index p { margin: 18px 0 11px; color: var(--orange); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.case-index a { display: block; padding: 9px 0; color: #68746f; font-size: 11px; }
.case-index a:hover { color: var(--ink); }
.case-article { min-width: 0; }
.case-section { max-width: 890px; margin-bottom: 105px; scroll-margin-top: 30px; }
.case-section:last-child { margin-bottom: 0; }
.case-section-label { margin-bottom: 13px; color: var(--orange); font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.case-section h2 { max-width: 790px; margin-bottom: 26px; font-size: clamp(43px, 5vw, 67px); }
.case-section h3 { margin: 38px 0 13px; font-family: var(--serif); font-size: 29px; font-weight: 500; line-height: 1.1; }
.case-section > p, .case-copy p { max-width: 760px; color: #52605b; font-size: 15px; line-height: 1.75; }
.case-section .case-opening { color: var(--ink); font-family: var(--serif); font-size: clamp(24px, 2.8vw, 34px); line-height: 1.3; }
.case-note {
    max-width: 820px;
    margin: 36px 0;
    padding: 25px 28px;
    border-left: 4px solid var(--orange);
    background: var(--cream);
}
.case-note strong { display: block; margin-bottom: 6px; color: var(--orange); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.case-note p { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.35; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 38px 0; }
.metric-card { min-height: 155px; padding: 24px; color: var(--cream); background: var(--ink); }
.metric-card span { display: block; margin-bottom: 21px; color: var(--mint); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.metric-card strong { display: block; margin-bottom: 7px; color: var(--gold); font-family: var(--serif); font-size: 39px; font-weight: 500; line-height: 1; }
.metric-card p { margin: 0; color: rgba(244,240,231,.62); font-size: 10px; line-height: 1.4; }
.method-list { margin: 36px 0; border-top: 1px solid var(--line); }
.method-step { display: grid; grid-template-columns: 48px 180px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.method-step > span { color: var(--orange); font-size: 10px; font-weight: 700; }
.method-step h3 { margin: 0; font-family: var(--sans); font-size: 13px; font-weight: 700; }
.method-step p { margin: 0; color: #5c6964; font-size: 12px; }
.case-figure { max-width: 960px; margin: 44px 0; }
.case-figure img { width: 100%; height: auto; border: 1px solid var(--line); background: white; }
.case-figure figcaption { margin-top: 11px; color: #6a7571; font-size: 10px; line-height: 1.5; }
.figure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 960px; margin: 44px 0; }
.figure-grid .case-figure { margin: 0; }
.figure-grid img { height: 100%; max-height: 380px; object-fit: contain; }
.table-wrap { max-width: 960px; margin: 38px 0; overflow-x: auto; border: 1px solid var(--line); }
.case-table { width: 100%; border-collapse: collapse; background: #fffdf8; font-size: 11px; }
.case-table caption { padding: 16px 18px; color: var(--orange); background: var(--cream); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-align: left; text-transform: uppercase; }
.case-table th, .case-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.case-table th { color: #697570; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.case-table tr:last-child td { border-bottom: 0; }
.case-diagram {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin: 40px 0;
    padding: 34px;
    color: var(--cream);
    background: var(--ink);
}
.diagram-node { position: relative; min-height: 105px; padding: 16px; border: 1px solid rgba(255,255,255,.25); }
.diagram-node:not(:last-child)::after { content: "→"; position: absolute; right: -21px; top: 38px; color: var(--gold); }
.diagram-node span { display: block; margin-bottom: 11px; color: var(--gold); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.diagram-node strong { font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.2; }
.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 36px 0; background: var(--line); border: 1px solid var(--line); }
.feature-item { min-height: 120px; padding: 22px; background: var(--paper); }
.feature-item span { display: block; margin-bottom: 9px; color: var(--orange); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.feature-item h3 { margin: 0 0 6px; font-family: var(--sans); font-size: 14px; font-weight: 700; }
.feature-item p { margin: 0; color: #5e6a66; font-size: 11px; }
.case-caveat { padding: 30px; border: 1px solid var(--line); background: var(--cream); }
.case-caveat h3 { margin-top: 0; font-size: 26px; }
.case-caveat p { margin-bottom: 0; color: #596661; font-size: 13px; }
.case-next { padding: 62px 0; color: var(--cream); background: var(--orange); }
.case-next-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.case-next small { display: block; margin-bottom: 8px; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.case-next strong { font-family: var(--serif); font-size: clamp(31px, 4vw, 50px); font-weight: 500; line-height: 1; }
.case-next-arrow { font-size: 42px; }

@media (max-width: 900px) {
    .case-hero-grid { grid-template-columns: 1fr; gap: 45px; }
    .case-repo-card { max-width: 420px; }
    .case-facts-grid { grid-template-columns: 1fr 1fr; }
    .case-fact:nth-child(3) { border-left: 0; border-top: 1px solid rgba(16,42,42,.25); }
    .case-fact:nth-child(4) { border-top: 1px solid rgba(16,42,42,.25); }
    .case-main { grid-template-columns: 1fr; }
    .case-index { position: static; display: flex; flex-wrap: wrap; gap: 6px 20px; }
    .case-index p { flex-basis: 100%; }
}
@media (max-width: 620px) {
    .case-hero { padding-top: 115px; }
    .case-breadcrumbs { margin-bottom: 35px; }
    .case-hero h1 { font-size: 58px; }
    .case-lede { font-size: 15px; }
    .case-fact { min-height: 100px; padding: 19px 15px 16px 0; }
    .case-fact + .case-fact { padding-left: 15px; }
    .case-fact strong { font-size: 19px; }
    .case-main { padding: 74px 0 90px; }
    .case-section { margin-bottom: 78px; }
    .case-section h2 { font-size: 44px; }
    .metric-grid { grid-template-columns: 1fr; }
    .method-step { grid-template-columns: 34px 1fr; }
    .method-step p { grid-column: 2; }
    .figure-grid { grid-template-columns: 1fr; }
    .case-diagram { grid-template-columns: 1fr; gap: 25px; padding: 24px; }
    .diagram-node:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -24px; }
    .feature-list { grid-template-columns: 1fr; }
    .case-next-inner { align-items: flex-start; }
}