/* =========================================================
   CASE STUDY SYSTEM

   Shared styles for the compact game-jam case studies.
   The site-wide palette, navigation, typography, spacing
   tokens, footer, and base rules come from style.css.
========================================================= */

/* =========================================================
   ACCESSIBILITY
========================================================= */

.skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 2000;

    padding:
        var(--space-2)
        var(--space-3);

    color: var(--background);
    background: var(--text);
    border-radius: var(--radius);

    font-size: 0.88rem;
    font-weight: 700;

    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

.case-study a:focus-visible,
.case-study button:focus-visible,
.case-study summary:focus-visible,
.case-study video:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

/* =========================================================
   PAGE
========================================================= */

.case-study {
    --case-mono:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;

    --case-section-gutter: clamp(24px, 3vw, 52px);

    padding-bottom: var(--space-8);
}

body.case-page {
    overflow-anchor: none;
}

.case-study h1,
.case-study h2,
.case-study h3,
.case-study p {
    text-wrap: pretty;
}

/* =========================================================
   HERO
========================================================= */

.case-hero {
    max-width: 900px;

    padding:
        var(--space-8)
        0
        var(--space-4);
}

.case-kicker {
    margin-bottom: var(--space-4);

    color: var(--accent);

    font-family: var(--case-mono);

    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.case-hero h1 {
    max-width: 900px;

    font-size: clamp(4.2rem, 7.3vw, 7.8rem);
    line-height: 0.88;
    letter-spacing: -0.072em;
}

.case-lead {
    max-width: 780px;

    margin-top: var(--space-5);

    color: var(--text-soft);

    font-size: clamp(1.08rem, 1.55vw, 1.32rem);
    line-height: 1.62;
}

.case-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);

    margin-top: var(--space-6);
}

.case-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding:
        0
        var(--space-4);

    color: var(--text-soft);
    border: 1px solid var(--line-bright);
    border-radius: var(--radius);

    font-size: 0.9rem;
    font-weight: 700;

    transition:
        color var(--fast),
        background var(--fast),
        border-color var(--fast),
        transform var(--fast);
}

.case-button:hover {
    color: var(--text);
    border-color: var(--accent);
    transform: translateY(-1px);
}

.case-button-primary {
    color: var(--background);
    background: var(--text);
    border-color: var(--text);
}

.case-button-primary:hover {
    color: var(--background);
    background: var(--accent);
    border-color: var(--accent);
}

/* =========================================================
   HERO VIDEO
========================================================= */

.case-hero-media {
    overflow: hidden;

    margin-top: var(--space-2);

    background: var(--surface);
    border: 1px solid var(--line-bright);
    border-radius: var(--radius);
}

.case-hero-media video {
    display: block;

    width: 100%;
    aspect-ratio: 16 / 9;

    background: #080a08;

    object-fit: cover;
}

/* =========================================================
   PROJECT DETAILS
========================================================= */

.case-details {
    display: grid;
    grid-template-columns:
        minmax(360px, 2.15fr)
        repeat(4, minmax(120px, 0.72fr));

    margin-top: var(--space-5);

    border: 1px solid var(--line);
}

.case-details > div {
    padding:
        var(--space-4)
        var(--space-5);

    border-right: 1px solid var(--line);
}

.case-details > div:last-child {
    border-right: 0;
}

.case-details dt {
    margin-bottom: var(--space-2);

    color: var(--accent);

    font-family: var(--case-mono);

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.case-details dd {
    color: var(--text);

    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.55;
}

.case-details strong {
    color: var(--text);

    font-size: 1rem;
}

/* =========================================================
   MY WORK OPENER
========================================================= */

.case-work-heading {
    position: absolute;

    overflow: hidden;

    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;

    white-space: nowrap;
}

.case-work-heading h2 {
    color: var(--accent);

    font-family: var(--case-mono);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.case-work-heading > p {
    max-width: 470px;

    color: var(--text-soft);

    font-size: 0.95rem;
    line-height: 1.6;
}

.work-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    margin-top: -1px;
    margin-bottom: var(--space-7);

    border: 1px solid var(--line);
}

.work-summary-grid article {
    min-height: 220px;
    padding:
        var(--space-5)
        var(--space-6)
        var(--space-6);
}

.work-summary-grid article + article {
    border-left: 1px solid var(--line);
}

.work-summary-grid h3 {
    margin-bottom: var(--space-4);

    color: var(--text);

    font-size: clamp(1.18rem, 1.6vw, 1.42rem);
    line-height: 1.22;
    letter-spacing: -0.03em;
}

.work-summary-grid article > p:last-child {
    color: var(--text-soft);

    font-size: 0.98rem;
    line-height: 1.7;
}

/* =========================================================
   SHARED SECTIONS
========================================================= */

.case-section {
    padding:
        var(--space-9)
        0;

    border-bottom: 1px solid var(--line);
}

.case-section-heading {
    display: grid;
    grid-template-columns:
        minmax(220px, 0.52fr)
        minmax(0, 1.48fr);
    gap: var(--space-8);
    align-items: start;

    margin-bottom: var(--space-7);
}

.case-section-title {
    color: var(--text);

    font-size: clamp(1.55rem, 2.2vw, 2.15rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.case-section-lead,
.case-section-subtitle {
    max-width: 800px;

    color: var(--text-soft);

    font-size: clamp(1.05rem, 1.55vw, 1.25rem);
    line-height: 1.68;
}

.case-section-subtitle {
    margin-top: var(--space-3);
}

/* =========================================================
   STORY SECTIONS
========================================================= */

.case-story-heading {
    display: grid;
    grid-template-columns:
        minmax(330px, 0.9fr)
        minmax(0, 1.1fr);
    gap: var(--space-9);
    align-items: start;

    margin-bottom: var(--space-7);
}

.case-story-title {
    max-width: 650px;

    margin-top: var(--space-4);

    color: var(--text);

    font-size: clamp(2.75rem, 4.4vw, 4.8rem);
    line-height: 0.96;
    letter-spacing: -0.058em;
}

.case-story-copy {
    max-width: 690px;
}

.case-story-copy p {
    color: var(--text-soft);

    font-size: 1rem;
    line-height: 1.76;
}

.case-story-copy p + p {
    margin-top: var(--space-5);
}

/* Quiet alternating surfaces distinguish every top-level section. */
.case-study > .case-section {
    margin-right: calc(var(--case-section-gutter) * -1);
    margin-left: calc(var(--case-section-gutter) * -1);
    padding-right: var(--case-section-gutter);
    padding-left: var(--case-section-gutter);

    border-top: 1px solid var(--line);
}

.case-study > .case-section + .case-section {
    border-top: 0;
}

.case-study > .case-section:nth-of-type(even) {
    background: rgba(255, 255, 255, 0.018);
}

.case-study > .case-section:nth-of-type(odd) {
    background: rgba(0, 0, 0, 0.075);
}

/* Focused story hierarchy for the current case studies. */
.case-study-ttt .case-story-heading,
.case-study-shuddap .case-story-heading,
.case-study-apart .case-story-heading,
.case-study-biscuit .case-story-heading {
    grid-template-columns:
        minmax(340px, 0.88fr)
        minmax(0, 1.12fr);
    gap: clamp(var(--space-7), 6vw, var(--space-9));
}

.case-study-ttt .case-story-intro .case-section-title,
.case-study-shuddap .case-story-intro .case-section-title,
.case-study-apart .case-story-intro .case-section-title,
.case-study-biscuit .case-story-intro .case-section-title {
    margin-bottom: var(--space-4);

    color: var(--accent);

    font-family: var(--case-mono);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.case-study-ttt .case-story-title,
.case-study-shuddap .case-story-title,
.case-study-apart .case-story-title,
.case-study-biscuit .case-story-title {
    max-width: 590px;

    margin-top: 0;

    font-size: clamp(2.55rem, 3.75vw, 4.05rem);
    line-height: 0.98;
}

.case-study-ttt .case-story-copy,
.case-study-shuddap .case-story-copy,
.case-study-apart .case-story-copy,
.case-study-biscuit .case-story-copy {
    max-width: 720px;
}

.case-study-ttt .case-story-copy p,
.case-study-shuddap .case-story-copy p,
.case-study-apart .case-story-copy p,
.case-study-biscuit .case-story-copy p {
    color: var(--text);

    font-size: 1.02rem;
    line-height: 1.78;
}

.case-study-ttt .case-story-copy p + p,
.case-study-shuddap .case-story-copy p + p {
    margin-top: var(--space-4);
}

/* =========================================================
   FEATURE MEDIA
========================================================= */

.case-feature-media,
.case-comparison-media {
    overflow: hidden;

    margin: 0;

    background: var(--surface);
    border: 1px solid var(--line-bright);
    border-radius: var(--radius);
}

.case-feature-media img {
    display: block;

    width: 100%;
    aspect-ratio: 16 / 9;

    background: #080a08;

    object-fit: cover;
}

.case-feature-media figcaption,
.case-comparison-media figcaption {
    padding:
        var(--space-3)
        var(--space-4);

    color: var(--muted);

    border-top: 1px solid var(--line);

    font-size: 0.82rem;
    line-height: 1.5;
}

/* =========================================================
   COMPARISON MEDIA
========================================================= */

.comparison-showcase {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.comparison-card {
    display: grid;
    grid-template-rows:
        auto
        auto
        auto;

    overflow: visible;
    margin: 0;

    background: transparent;
    border: 0;
    border-radius: 0;
}

.comparison-card-revised {
    box-shadow: none;
}

.comparison-card-header {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    align-items: center;

    min-height: 0;
    padding:
        0
        var(--space-1)
        var(--space-3);

    border: 0;
}

.comparison-card-header > div {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.comparison-state {
    display: inline-flex;
    align-items: center;

    min-height: 28px;
    padding:
        0
        0.62rem;

    color: var(--text-soft);
    border: 1px solid var(--line-bright);
    border-radius: 1px;

    font-family: var(--case-mono);

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.comparison-card-revised .comparison-state {
    color: var(--background);
    background: var(--accent);
    border-color: var(--accent);
}

.comparison-card-header strong {
    color: var(--text);

    font-size: 0.94rem;
    line-height: 1.2;
}

.comparison-card-note {
    color: var(--muted);

    font-size: 0.78rem;
    line-height: 1.3;
    text-align: right;
}

.comparison-card img {
    display: block;

    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;

    background: #080a08;
    border: 1px solid var(--line-bright);
    border-radius: var(--radius);

    object-fit: contain;
}

.comparison-card-revised img {
    border-color: rgba(239, 105, 73, 0.58);
}

.comparison-card figcaption {
    min-height: 0;
    padding:
        var(--space-3)
        var(--space-1)
        0;

    color: var(--text-soft);
    border: 0;

    font-size: 0.84rem;
    line-height: 1.5;
}

/* =========================================================
   ORIENTATION LOGIC
========================================================= */

.orientation-logic {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);

    margin:
        0
        0
        var(--space-6);
    padding:
        var(--space-3)
        0;

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.orientation-logic strong {
    margin-right: var(--space-2);

    color: var(--accent);

    font-family: var(--case-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.orientation-logic span {
    position: relative;

    color: var(--text-soft);

    font-family: var(--case-mono);
    font-size: 0.76rem;
    line-height: 1.4;
}

.orientation-logic span + span::before {
    content: "→";
    margin-right: var(--space-2);
    color: var(--accent);
}

/* =========================================================
   DIFFICULTY LOOP
========================================================= */

.pressure-loop {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    margin-bottom: var(--space-7);

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.pressure-loop span {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 82px;
    padding:
        var(--space-4)
        var(--space-5);

    color: var(--text);

    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.35;
}

.pressure-loop span:first-child {
    padding-left: 0;
}

.pressure-loop span:last-child {
    padding-right: 0;
}

.pressure-loop span + span {
    border-left: 1px solid var(--line);
}

.pressure-loop span:not(:last-child)::after {
    content: "→";

    position: absolute;
    right: calc(var(--space-3) * -0.5);
    z-index: 1;

    padding: 0 0.25rem;

    color: var(--accent);
    background: var(--background);
}

/* =========================================================
   PLAYTESTERS
========================================================= */

.inline-link {
    display: inline-block;

    padding-bottom: var(--space-1);

    color: var(--text-soft);
    border-bottom: 1px solid var(--line-bright);

    font-size: 0.88rem;
    font-weight: 700;

    transition:
        color var(--fast),
        border-color var(--fast);
}

.inline-link:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* =========================================================
   OTHER SYSTEMS
========================================================= */

.other-systems .case-section-heading {
    margin-bottom: var(--space-6);
}

.other-systems-list {
    display: grid;
    gap: var(--space-3);
}

.system-detail {
    overflow: hidden;

    background: rgba(255, 255, 255, 0.012);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.system-detail[open] {
    background:
        linear-gradient(
            135deg,
            rgba(239, 105, 73, 0.035),
            transparent 48%
        ),
        rgba(255, 255, 255, 0.012);

    border-color: var(--line-bright);
}

.system-detail summary {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(290px, 0.78fr)
        minmax(0, 1.22fr);
    gap: var(--space-7);
    align-items: center;

    min-height: 88px;
    padding:
        var(--space-4)
        calc(var(--space-7) + 1.1rem)
        var(--space-4)
        var(--space-5);

    cursor: pointer;
    list-style: none;

    transition:
        background var(--fast),
        color var(--fast);
}

.system-detail summary::-webkit-details-marker {
    display: none;
}

.system-detail summary:hover {
    background: rgba(255, 255, 255, 0.018);
}

.system-detail summary::after {
    content: "+";

    position: absolute;
    right: var(--space-5);

    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

    color: var(--accent);
    border: 1px solid var(--line-bright);
    border-radius: 50%;

    font-family: var(--case-mono);

    font-size: 0.95rem;
    font-weight: 700;
}

.system-detail[open] summary::after {
    content: "−";

    color: var(--background);
    background: var(--accent);
    border-color: var(--accent);
}

.system-detail[open] summary {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--line);
}

.system-summary-title {
    display: flex;
    flex-wrap: wrap;
    gap:
        var(--space-2)
        var(--space-3);
    align-items: center;
}

.system-summary-title strong {
    color: var(--text);

    font-size: 1rem;
    line-height: 1.35;
}

.system-tag {
    display: inline-flex;
    align-items: center;

    min-height: 24px;
    padding:
        0
        0.55rem;

    color: var(--accent);
    border: 1px solid rgba(239, 105, 73, 0.34);
    border-radius: 1px;

    font-family: var(--case-mono);

    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.system-summary-copy {
    max-width: 690px;

    color: var(--text-soft);

    font-size: 0.92rem;
    line-height: 1.55;
}

.system-detail-body {
    padding:
        var(--space-5);
}

.system-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

.system-detail-grid > div {
    min-width: 0;
    padding:
        0
        var(--space-5);
}

.system-detail-grid > div:first-child {
    padding-left: 0;
}

.system-detail-grid > div:last-child {
    padding-right: 0;
}

.system-detail-grid > div + div {
    border-left: 1px solid var(--line);
}

.system-detail-wide {
    grid-column: auto;
    padding-top: 0;
    border-top: 0;
}

.system-detail-label {
    display: block;

    margin-bottom: var(--space-2);

    color: var(--accent);

    font-family: var(--case-mono);

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.system-detail-grid p,
.feedback-intro {
    max-width: 760px;

    color: var(--text);

    font-size: 0.94rem;
    line-height: 1.68;
}

.feedback-intro {
    margin-bottom: var(--space-5);
}

.system-detail-body .inline-link {
    margin-top: var(--space-5);
}

/* =========================================================
   TEAM
========================================================= */

.team-list {
    border-top: 1px solid var(--line);
}

.team-row {
    display: grid;
    grid-template-columns:
        minmax(250px, 0.7fr)
        minmax(0, 1.3fr);
    gap: var(--space-8);

    padding:
        var(--space-6)
        0;

    border-bottom: 1px solid var(--line);
}

.team-row:last-child {
    border-bottom: 0;
}

.team-role {
    margin-bottom: var(--space-2);

    color: var(--muted-dark);

    font-family: var(--case-mono);

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.team-name h3 {
    color: var(--text);

    font-size: 1.45rem;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.team-name a {
    border-bottom: 1px solid transparent;

    transition:
        color var(--fast),
        border-color var(--fast);
}

.team-name a:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.team-row > p,
.team-row > div:last-child > p {
    max-width: 740px;

    color: var(--text-soft);

    font-size: 0.98rem;
    line-height: 1.72;
}

.voice-note {
    margin-top: var(--space-4);

    color: var(--text) !important;

    font-weight: 700;
}

/* =========================================================
   RESULT
========================================================= */

.case-result {
    display: grid;
    grid-template-columns:
        minmax(280px, 0.72fr)
        minmax(0, 1.28fr);
    gap: var(--space-9);
    align-items: center;
}

.result-number strong {
    display: block;

    margin-top: var(--space-5);

    color: var(--text);

    font-size: clamp(5rem, 9vw, 9.4rem);
    line-height: 0.78;
    letter-spacing: -0.08em;
}

.result-number > p {
    margin-top: var(--space-3);

    color: var(--muted);

    font-size: 1rem;
}

.result-copy {
    max-width: 740px;
}

.result-ranks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);

    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);

    border-bottom: 1px solid var(--line);
}

.result-ranks span {
    color: var(--muted);

    font-family: var(--case-mono);

    font-size: 0.78rem;
}

.result-ranks strong {
    margin-right: var(--space-1);

    color: var(--text);
}

.result-copy > p {
    color: var(--text-soft);

    font-size: clamp(1.06rem, 1.55vw, 1.25rem);
    line-height: 1.7;
}

.result-copy .case-button {
    margin-top: var(--space-6);
}

/* =========================================================
   REFLECTION
========================================================= */

.case-reflection {
    display: grid;
    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);
    gap: var(--space-8);
    align-items: center;
}

.case-reflection-copy {
    max-width: 620px;
}

.case-reflection-copy p {
    margin-top: var(--space-5);

    color: var(--text-soft);

    font-size: clamp(1.06rem, 1.55vw, 1.25rem);
    line-height: 1.72;
}

.case-reflection-media {
    justify-self: end;

    width: min(500px, 100%);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin: 0;

    background: #080a08;
    border: 1px solid var(--line-bright);
    border-radius: var(--radius);
}

.case-reflection-media img {
    display: block;

    width: 100%;
    height: 100%;

    background: #080a08;

    object-fit: contain;
}

/* =========================================================
   NEXT PROJECT
========================================================= */

.case-next {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    align-items: center;

    min-height: 116px;
    padding:
        var(--space-6)
        0;

    border-bottom: 1px solid var(--line);

    transition:
        color var(--fast),
        padding var(--fast);
}

.case-next > span {
    color: var(--muted);

    font-size: 0.92rem;
    font-weight: 700;
}

.case-next > strong {
    font-size: clamp(1.55rem, 2.4vw, 2.35rem);
    letter-spacing: -0.045em;
}

.case-next:hover {
    color: var(--accent);

    padding-left: var(--space-3);
    padding-right: var(--space-3);
}

/* =========================================================
   TRAIN TRACK TROUBLE — POLISH
========================================================= */

.case-study-ttt .case-details {
    grid-template-columns:
        minmax(410px, 2.45fr)
        repeat(4, minmax(118px, 0.8fr));
}

.case-study-ttt .case-section-lead,
.case-study-ttt .case-section-subtitle {
    color: var(--text);
}

.case-study-ttt .case-feature-media figcaption {
    color: var(--text-soft);
}

.case-study-ttt summary,
.case-study-shuddap summary,
.case-study-biscuit summary {
    scroll-margin-top: 96px;
}

/* =========================================================
   TRAIN TRACK TROUBLE — MEDIA
========================================================= */

/* The overview keeps the wide case-study frame.
   Square source footage is centered with black side bars. */
.case-study-ttt .case-hero-media {
    width: 100%;
    background: #080a08;
}

.case-study-ttt .case-hero-media video {
    width: 100%;
    aspect-ratio: 16 / 9;

    background: #080a08;

    object-fit: contain;
    object-position: center;
}

/* Gameplay GIFs are authored at 800 × 800. */
.case-study-ttt .case-feature-media {
    width: min(800px, 100%);
    margin-inline: auto;
}

.case-study-ttt .case-feature-media img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.case-study-ttt .comparison-showcase {
    max-width: 1160px;
    margin-inline: auto;
}

.case-study-ttt .comparison-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;

    object-fit: contain;
}

/* Square media is taller than the original 16:9 treatment. */
.case-study-ttt .case-section {
    padding:
        var(--space-8)
        0;
}

.case-study-ttt .case-story-heading {
    margin-bottom: var(--space-6);
}

/* =========================================================
   SHUDDAP — CHARACTER MODEL
========================================================= */

.character-model {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    margin-top: var(--space-6);

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.character-column {
    min-width: 0;
    padding:
        var(--space-6)
        var(--space-7)
        var(--space-6)
        0;
}

.character-column + .character-column {
    padding-right: 0;
    padding-left: var(--space-7);
    border-left: 1px solid var(--line);
}

.character-column-heading {
    display: grid;
    grid-template-columns: minmax(150px, 0.52fr) minmax(0, 1.48fr);
    gap: var(--space-5);
    align-items: start;

    margin-bottom: var(--space-5);
}

.character-column-heading h3 {
    color: var(--text);
    font-size: clamp(1.8rem, 2.4vw, 2.6rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.character-column-heading > div > p {
    margin-top: var(--space-2);

    color: var(--accent);

    font-family: var(--case-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.character-column-heading > p {
    color: var(--text-soft);
    font-size: 0.92rem;
    line-height: 1.6;
}

.character-values {
    border-top: 1px solid var(--line);
}

.character-values > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-4);
    align-items: baseline;

    min-height: 42px;
    padding:
        var(--space-2)
        0;

    border-bottom: 1px solid var(--line);
}

.character-values span {
    color: var(--muted);
    font-size: 0.88rem;
}

.character-values strong {
    color: var(--text);

    font-family: var(--case-mono);
    font-size: 0.82rem;
}

.character-behaviors {
    margin-top: var(--space-5);
    list-style: none;

    border-top: 1px solid var(--line);
}

.character-behaviors li {
    display: grid;
    grid-template-columns: minmax(145px, 0.58fr) minmax(0, 1.42fr);
    gap: var(--space-4);

    padding:
        var(--space-3)
        0;

    border-bottom: 1px solid var(--line);
}

.character-behaviors strong {
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.45;
}

.character-behaviors span {
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

/* =========================================================
   SHUDDAP — AI SIMULATION
========================================================= */

.case-study-shuddap .ai-balancing-story {
    padding-bottom: var(--space-8);
}

.case-study-shuddap .ai-balancing-story > .case-story-heading {
    margin-bottom: var(--space-6);
}

.case-study-shuddap .ai-simulation-section {
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
}

.case-study-shuddap .ai-simulation-heading {
    max-width: 760px;
    margin-bottom: var(--space-5);
}

.case-study-shuddap .ai-simulation-heading h3 {
    margin-bottom: var(--space-2);

    color: var(--text);
    font-size: 1.3rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.case-study-shuddap .ai-simulation-heading p {
    color: var(--text-soft);
    font-size: 0.96rem;
    line-height: 1.6;
}

.case-study-shuddap .ai-simulation-grid {
    display: grid;
    grid-template-columns:
        minmax(300px, 0.62fr)
        minmax(0, 1.38fr);
    gap: clamp(var(--space-5), 4vw, var(--space-7));
    align-items: start;
}

.case-study-shuddap .simulation-figure {
    justify-self: start;

    width: min(312px, 100%);
    margin: 0;
}

.case-study-shuddap .simulation-terminal {
    overflow: hidden;
    width: 100%;

    background: #17191a;
    border: 1px solid var(--line-bright);
    border-radius: var(--radius);
}

.case-study-shuddap .simulation-terminal img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}

.case-study-shuddap .simulation-caption {
    margin-top: var(--space-2);

    color: var(--muted);

    font-family: var(--case-mono);
    font-size: 0.68rem;
    line-height: 1.45;
}

.case-study-shuddap .ai-simulation-copy {
    max-width: 720px;
}

/* =========================================================
   SHUDDAP — DIALOGUE CONSTRUCTION
========================================================= */

.case-study-shuddap .dialogue-formula {
    margin-top: var(--space-5);
    padding: var(--space-5);

    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.018);
}

.case-study-shuddap .dialogue-formula-code {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;

    margin-bottom: var(--space-4);

    font-family: var(--case-mono);
    font-weight: 700;
}

.case-study-shuddap .dialogue-token {
    padding:
        var(--space-1)
        var(--space-3);

    color: var(--accent);
    border: 1px solid rgba(239, 105, 73, 0.58);
    border-radius: 1px;
}

.case-study-shuddap .dialogue-example-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);

    margin:
        var(--space-4)
        0;
}

.case-study-shuddap .dialogue-example-grid article {
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}

.case-study-shuddap .dialogue-example-grid h3 {
    margin-bottom: var(--space-2);

    color: var(--accent);

    font-family: var(--case-mono);
    font-size: 0.82rem;
}

.case-study-shuddap .dialogue-example-grid p {
    margin-top: var(--space-1);
    color: var(--text-soft);
}

.case-study-shuddap .dialogue-formula > p {
    color: var(--text-soft);
    font-size: 0.92rem;
    line-height: 1.65;
}

/* =========================================================
   SHUDDAP — MEDIA / SPACING
========================================================= */

.case-study-shuddap .case-hero-media {
    background: #080a08;
}

.case-study-shuddap .case-hero-media video {
    object-fit: contain;
    object-position: center;
}

.case-study-shuddap .case-section {
    padding:
        var(--space-8)
        0;
}

.case-study-shuddap .case-story-heading {
    margin-bottom: var(--space-6);
}

.case-study-shuddap .case-reflection-media {
    align-self: center;

    height: auto;
    min-height: 0;
    aspect-ratio: auto;

    overflow: hidden;
    background: transparent;
}

.case-study-shuddap .case-reflection-media img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;

    object-fit: contain;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {

    .case-study-shuddap .ai-simulation-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .case-study-shuddap .simulation-figure {
        width: min(393px, 100%);
        justify-self: start;
    }

    .case-section-heading,
    .case-story-heading,
    .case-result,
    .case-reflection {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    /*
       Project-specific desktop story selectors are more specific than
       .case-story-heading, so explicitly collapse them here too.
       Without this, the second column can sit off-screen on mobile.
    */
    .case-study-ttt .case-story-heading,
    .case-study-shuddap .case-story-heading,
    .case-study-apart .case-story-heading,
    .case-study-biscuit .case-story-heading {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }

    .case-story-intro,
    .case-story-copy {
        min-width: 0;
        width: 100%;
    }

    .case-details,
    .case-study-ttt .case-details {
        grid-template-columns:
            minmax(280px, 1.8fr)
            repeat(2, minmax(140px, 1fr));
    }

    .case-details > div {
        border-bottom: 1px solid var(--line);
    }

    .case-details > div:nth-child(3) {
        border-right: 0;
    }

    .case-details > div:nth-child(4),
    .case-details > div:nth-child(5) {
        border-bottom: 0;
    }

    .case-story-copy {
        max-width: 780px;
    }

    .pressure-loop {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pressure-loop span:nth-child(4) {
        border-left: 0;
    }

    .pressure-loop span:nth-child(n + 4) {
        border-top: 1px solid var(--line);
    }

    .system-detail summary {
        grid-template-columns:
            minmax(240px, 0.82fr)
            minmax(0, 1.18fr);
        gap: var(--space-5);
    }

    .case-reflection-copy {
        max-width: 820px;
    }

}

@media (max-width: 900px) {

    .system-detail-grid {
        grid-template-columns: 1fr;
    }

    .system-detail-grid > div,
    .system-detail-grid > div:first-child,
    .system-detail-grid > div:last-child {
        padding:
            var(--space-4)
            0;
    }

    .system-detail-grid > div:first-child {
        padding-top: 0;
    }

    .system-detail-grid > div:last-child {
        padding-bottom: 0;
    }

    .system-detail-grid > div + div {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

}

@media (max-width: 760px) {

    .character-model {
        grid-template-columns: 1fr;
    }

    .character-column,
    .character-column + .character-column {
        padding:
            var(--space-5)
            0;
        border-left: 0;
    }

    .character-column + .character-column {
        border-top: 1px solid var(--line);
    }

    .character-column-heading {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .character-behaviors li {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }

    .case-study-shuddap .dialogue-example-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .orientation-logic {
        display: grid;
        justify-items: start;
    }

    .orientation-logic span + span::before {
        content: "↓";
        display: inline-block;
        width: 1rem;
        margin-right: var(--space-2);
    }

    .case-hero {
        padding-top: var(--space-7);
    }

    .case-hero h1 {
        font-size: clamp(3.6rem, 15vw, 6.2rem);
    }

    .case-details,
    .case-study-ttt .case-details,
    .case-study-biscuit .case-details {
        grid-template-columns: 1fr 1fr;
    }

    .case-details-role {
        grid-column: 1 / -1;
    }

    .case-details > div {
        padding: var(--space-4);
    }

    .case-details > div:nth-child(even) {
        border-right: 0;
    }

    .case-details-role {
        border-right: 0 !important;
    }

    .work-summary-grid,
    .comparison-showcase {
        grid-template-columns: 1fr;
    }

    .work-summary-grid article {
        min-height: 0;
        padding: var(--space-5);
    }

    .work-summary-grid article + article {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .comparison-card figcaption {
        min-height: 0;
    }

    .pressure-loop {
        grid-template-columns: 1fr;
    }

    .pressure-loop span,
    .pressure-loop span:first-child,
    .pressure-loop span:last-child {
        min-height: 0;
        padding:
            var(--space-4)
            0;
    }

    .pressure-loop span + span,
    .pressure-loop span:nth-child(4) {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .pressure-loop span:not(:last-child)::after {
        content: "↓";

        right: auto;
        bottom: -0.65rem;
        left: 0;

        padding:
            0
            var(--space-2)
            0
            0;
    }

    .system-detail summary {
        grid-template-columns: 1fr;
        gap: var(--space-2);

        padding:
            var(--space-4)
            calc(var(--space-6) + 1.1rem)
            var(--space-4)
            var(--space-4);
    }

    .system-detail summary::after {
        right: var(--space-4);
    }

    .system-detail-body {
        padding:
            var(--space-4)
            var(--space-4)
            var(--space-5);
    }

    .team-row {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .case-study-ttt .case-feature-media,
    .case-study-ttt .comparison-showcase {
        width: 100%;
        max-width: none;
    }

    .case-reflection-media {
        justify-self: start;

        width: min(500px, 100%);
    }

}

@media (max-width: 560px) {

    .case-details,
    .case-study-ttt .case-details,
    .case-study-biscuit .case-details {
        grid-template-columns: 1fr;
    }

    .case-details-role {
        grid-column: auto;
    }

    .case-details > div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .case-details > div:last-child {
        border-bottom: 0;
    }

    .case-section,
    .case-result {
        padding:
            var(--space-7)
            0;
    }

    .case-section-heading {
        margin-bottom: var(--space-6);
    }

    .case-story-title {
        font-size: clamp(2.4rem, 12vw, 3.6rem);
    }

    .case-feature-media figcaption,
    .case-comparison-media figcaption {
        padding:
            var(--space-3)
            var(--space-3);
    }

    .comparison-card-header {
        align-items: flex-start;
    }

    .comparison-card-note {
        max-width: 120px;
    }

    .system-summary-title {
        display: grid;
        justify-items: start;
    }

    .case-next {
        align-items: flex-end;
    }

}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .case-button,
    .case-next,
    .inline-link,
    .team-name a {
        transition: none;
    }

}

/* =========================================================
   CASE STUDY — GAME-SPECIFIC BACKGROUNDS
========================================================= */

/*
   HTML body classes:
   Shuddap:
   <body class="case-page case-page-shuddap">

   Train Track Trouble:
   <body class="case-page case-page-ttt">

   Apart:
   <body class="case-page case-page-apart">

   Image paths are relative to css/caseStudy.css:
   ../assets/images/BG/ShuddapBG.jpg
   ../assets/images/BG/TTTBG.png
   ../assets/images/BG/ApartBG.png
   ../assets/images/BG/BiscuitBanditsBG.png
*/

body.case-page {
    --case-bg-y: 0px;

    background-color: #0b0e0b;

    /*
       Layer 1 = dark overlay
       Layer 2 = game-specific artwork
    */
    background-position:
        center,
        center var(--case-bg-y);

    background-repeat:
        no-repeat,
        repeat-y;

    /*
       The artwork fits to browser width and then tiles vertically.
       This avoids the aggressive cropping caused by "cover".
    */
    background-size:
        cover,
        100% auto;

    background-attachment:
        fixed,
        fixed;
}

/* SHUDDAP */
body.case-page-shuddap {
    background-image:
        linear-gradient(
            rgba(5, 7, 5, 0.36),
            rgba(5, 7, 5, 0.36)
        ),
        url("../assets/images/BG/ShuddapBG.jpg");
}

/* TRAIN TRACK TROUBLE — intentionally darker */
body.case-page-ttt {
    background-image:
        linear-gradient(
            rgba(5, 7, 5, 0.53),
            rgba(5, 7, 5, 0.53)
        ),
        url("../assets/images/BG/TTTBG.png");
}

/* APART — tile the small background art horizontally and vertically */
body.case-page-apart {
    background-image:
        linear-gradient(
            rgba(5, 7, 5, 0.46),
            rgba(5, 7, 5, 0.46)
        ),
        url("../assets/images/BG/ApartBG.png");

    background-position:
        center,
        center var(--case-bg-y);

    background-repeat:
        no-repeat,
        repeat;

    background-size:
        cover,
        320px 320px;
}

/* =========================================================
   CASE STUDY — CENTRAL CONTENT PANEL
========================================================= */

/*
   Slightly wider than the normal content width so the extra width
   becomes panel padding instead of shrinking the existing layouts.
*/
body.case-page .case-study {
    width: min(
        calc(var(--content) + 104px),
        calc(100% - 48px)
    );

    padding-right: var(--case-section-gutter);
    padding-left: var(--case-section-gutter);

    background: rgba(16, 20, 16, 0.93);

    border-right: 1px solid rgba(255, 255, 255, 0.055);
    border-left: 1px solid rgba(255, 255, 255, 0.055);

    box-shadow:
        -28px 0 70px rgba(0, 0, 0, 0.26),
        28px 0 70px rgba(0, 0, 0, 0.26);

    backdrop-filter: blur(5px);
}

/* Continue the same panel treatment through the footer. */
body.case-page .footer {
    width: min(
        calc(var(--content) + 104px),
        calc(100% - 48px)
    );

    padding-right: clamp(24px, 3vw, 52px);
    padding-left: clamp(24px, 3vw, 52px);

    background: rgba(16, 20, 16, 0.93);

    border-right: 1px solid rgba(255, 255, 255, 0.055);
    border-left: 1px solid rgba(255, 255, 255, 0.055);
}

/* Shuddap uses a slightly warmer surface against its wood/card background. */
body.case-page-shuddap .case-study,
body.case-page-shuddap .footer {
    background: rgba(20, 16, 13, 0.94);
}

/* =========================================================
   CASE STUDY BACKGROUND — RESPONSIVE / REDUCED MOTION
========================================================= */

@media (max-width: 760px) {

    body.case-page-apart {
        background-size:
            cover,
            260px 260px;

        background-repeat:
            no-repeat,
            repeat;
    }

    body.case-page {
        /*
           Fixed backgrounds are unreliable and expensive on some
           mobile browsers, so use normal scrolling there.
        */
        background-attachment:
            scroll,
            scroll;

        background-position:
            center,
            center top;
    }

    body.case-page .case-study,
    body.case-page .footer {
        width: calc(100% - 20px);

        padding-right: 15px;
        padding-left: 15px;
    }

    body.case-page .case-study {
        --case-section-gutter: 15px;
    }

}

@media (prefers-reduced-motion: reduce) {

    body.case-page {
        --case-bg-y: 0px;

        background-attachment:
            scroll,
            scroll;

        background-position:
            center,
            center top;
    }

}

/* =========================================================
   CASE STUDY — IMAGE / GIF LIGHTBOX
========================================================= */

.case-zoomable-image {
    cursor: zoom-in;
}

.case-zoomable-image:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

body.case-lightbox-open {
    overflow: hidden;
}

.case-lightbox {
    position: fixed;
    inset: 0;
    z-index: 5000;

    display: grid;
    place-items: center;

    padding: clamp(18px, 3vw, 42px);

    background: rgba(5, 7, 5, 0.88);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 140ms ease,
        visibility 140ms ease;
}

.case-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.case-lightbox-dialog {
    position: relative;

    display: grid;
    justify-items: center;
    gap: var(--space-3);

    max-width: 94vw;
    max-height: 92vh;
}

.case-lightbox-image {
    display: block;

    width: auto;
    max-width: 92vw;
    height: auto;
    max-height: 84vh;

    background: #080a08;
    border: 1px solid var(--line-bright);
    border-radius: var(--radius);

    object-fit: contain;

    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);

    transform: scale(0.985);

    transition: transform 140ms ease;
}

.case-lightbox.is-open .case-lightbox-image {
    transform: scale(1);
}

.case-lightbox-caption {
    max-width: min(760px, 88vw);

    color: var(--text-soft);

    font-size: 0.84rem;
    line-height: 1.5;
    text-align: center;
}

.case-lightbox-close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 1;

    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    padding: 0;

    color: var(--text);
    background: var(--background);
    border: 1px solid var(--line-bright);
    border-radius: var(--radius);

    font-family: var(--case-mono);
    font-size: 1.4rem;
    line-height: 1;

    cursor: pointer;

    transition:
        color var(--fast),
        background var(--fast),
        border-color var(--fast);
}

.case-lightbox-close:hover,
.case-lightbox-close:focus-visible {
    color: var(--background);
    background: var(--accent);
    border-color: var(--accent);
}

@media (max-width: 760px) {

    .case-lightbox {
        padding: 14px;
    }

    .case-lightbox-dialog {
        max-width: 100%;
        max-height: 94vh;
    }

    .case-lightbox-image {
        max-width: calc(100vw - 28px);
        max-height: 82vh;
    }

    .case-lightbox-close {
        top: 8px;
        right: 8px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .case-lightbox,
    .case-lightbox-image {
        transition: none;
    }

}

/* =========================================================
   APART COMPARISON TAGS
========================================================= */

.case-study-apart .comparison-state {
    color: var(--text);
}

.case-study-apart .comparison-card-blue .comparison-state {
    color: #dfeefe;
    background: #234a6b;
    border-color: #35688f;
}

.case-study-apart .comparison-card-red .comparison-state {
    color: var(--background);
    background: var(--accent);
    border-color: var(--accent);
}

/* =========================================================
   APART — CONVERGENCE / FINAL HANDOFF
========================================================= */

.case-study-apart .apart-final-handoff {
    display: grid;
    grid-template-columns:
        minmax(300px, 0.72fr)
        minmax(0, 1.28fr);
    gap: clamp(var(--space-6), 5vw, var(--space-8));

    margin-top: var(--space-8);
    padding-top: var(--space-7);

    border-top: 1px solid var(--line);
}

.case-study-apart .apart-final-handoff-label {
    margin-bottom: var(--space-3);

    color: var(--accent);

    font-family: var(--case-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.case-study-apart .apart-final-handoff-heading h3 {
    max-width: 520px;

    color: var(--text);

    font-size: clamp(1.85rem, 2.8vw, 3rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.case-study-apart .apart-final-handoff-copy {
    max-width: 720px;
}

.case-study-apart .apart-final-handoff-copy p {
    color: var(--text);

    font-size: 1.02rem;
    line-height: 1.78;
}

.case-study-apart .apart-final-handoff-copy p + p {
    margin-top: var(--space-4);
}

/* =========================================================
   APART — SOUL COMBINATION LAB MEDIA
========================================================= */

/*
   Keep the final lab GIF consistent with the square gameplay
   media used throughout Apart instead of letting the generic
   16:9 feature-media rule stretch the section wide.
*/
.case-study-apart .apart-lab-media {
    width: min(800px, 100%);

    margin:
        var(--space-6)
        auto
        0;
}

.case-study-apart .apart-lab-media img {
    display: block;

    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;

    background: #080a08;

    object-fit: contain;
    object-position: center;
}

@media (max-width: 980px) {

    .case-study-apart .apart-final-handoff {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

}

/* =========================================================
   APART — TOP BAR CROP FOR RECORDED GIFS
========================================================= */

/*
   These recordings contain a baked-in black strip across the
   top. The source GIF is 768px square and the strip is about
   29px tall, so this frame crops roughly 4% from the top while
   enlarging the image just enough to keep the visible result
   square without leaving an empty strip at the bottom.
*/

.case-study-apart .apart-gif-crop-frame {
    position: relative;

    overflow: hidden;

    width: 100%;
    aspect-ratio: 1 / 1;

    background: #080a08;
    border: 1px solid var(--line-bright);
    border-radius: var(--radius);
}

.case-study-apart .apart-gif-crop-frame .apart-gif-crop-source {
    position: absolute;
    top: -4%;
    left: -2.05%;

    display: block;

    width: 104.1%;
    max-width: none;
    height: 104.1%;

    aspect-ratio: auto;

    background: #080a08;
    border: 0;
    border-radius: 0;

    object-fit: cover;
    object-position: center;
}

/* The reflection figure already supplies its own outer border. */
.case-study-apart .case-reflection-media .apart-gif-crop-frame {
    width: 100%;
    height: 100%;

    border: 0;
    border-radius: 0;
}

/* =========================================================
   BISCUIT BANDITS — LONG-TERM CASE STUDY
========================================================= */

/* BISCUIT BANDITS
   Slightly zoomed out and tiled in both directions so the artwork
   can wrap at the edges instead of ending as a single full-width strip. */
body.case-page-biscuit {
    background-image:
        linear-gradient(
            rgba(5, 7, 5, 0.26),
            rgba(5, 7, 5, 0.26)
        ),
        url("../assets/images/BG/BiscuitBanditsBG.png");

    background-position:
        center,
        center var(--case-bg-y);

    background-repeat:
        no-repeat,
        repeat;

    background-size:
        cover,
        90% auto;
}

@media (max-width: 760px) {
    body.case-page-biscuit {
        background-position:
            center,
            center top;

        background-size:
            cover,
            120% auto;
    }
}

body.case-page-biscuit .case-study,
body.case-page-biscuit .footer {
    background: rgba(17, 20, 15, 0.95);
}

.case-study-biscuit .case-details {
    grid-template-columns: minmax(380px, 2.25fr) repeat(4, minmax(122px, 0.78fr));
}

.case-study-biscuit .case-section {
    padding: var(--space-8) 0;
}

.case-study-biscuit .case-story-heading {
    margin-bottom: var(--space-6);
}

.case-study-biscuit .case-section-lead,
.case-study-biscuit .case-section-subtitle {
    color: var(--text);
}

/* Hero */
.case-study-biscuit .bb-hero-media video {
    object-fit: contain;
    object-position: center;
}

.case-study-biscuit .bb-hero-caption {
    padding: var(--space-3) var(--space-4);
    color: var(--text-soft);
    border-top: 1px solid var(--line);
    font-size: 0.84rem;
    line-height: 1.55;
}

/* Jam / demo comparison */

.case-study-biscuit .bb-section-label {
    color: var(--accent);
    font-family: var(--case-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

/* In Meaningful Decisions, the system name is the primary heading. */
.case-study-biscuit .bb-decision-group .bb-section-label {
    display: block;

    color: var(--text);

    font-family: inherit;
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;
    text-transform: none;
}

.case-study-biscuit .bb-roll-media-slot span,
.case-study-biscuit .bb-evidence-slot > span,
.case-study-biscuit .bb-reflection-slot > span {
    color: var(--accent);
    font-family: var(--case-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* Substories: intentionally smaller than main story headings. */
.case-study-biscuit .bb-substory {
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
    gap: var(--space-8);
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}

.case-study-biscuit .bb-substory-heading h3 {
    max-width: 520px;
    margin-top: var(--space-2);
    color: var(--text);
    font-size: clamp(1.35rem, 2.05vw, 1.95rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.case-study-biscuit .bb-substory-copy {
    max-width: 720px;
}

.case-study-biscuit .bb-substory-copy p {
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.74;
}

.case-study-biscuit .bb-substory-copy p + p {
    margin-top: var(--space-4);
}

/* Evidence slots */
.case-study-biscuit .bb-evidence-slot {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    min-height: 180px;
    padding: var(--space-4);
    background: linear-gradient(145deg, rgba(239,105,73,0.04), rgba(255,255,255,0.012));
    border: 1px dashed rgba(255,255,255,0.16);
    border-radius: var(--radius);
}

.case-study-biscuit .bb-evidence-slot-wide {
    min-height: 260px;
}

.case-study-biscuit .bb-evidence-slot strong {
    display: block;
    margin-top: var(--space-2);
    color: var(--text);
    font-size: 1rem;
    line-height: 1.35;
}

.case-study-biscuit .bb-evidence-slot p {
    margin-top: var(--space-2);
    color: var(--text-soft);
    font-size: 0.82rem;
    line-height: 1.5;
}

.case-study-biscuit .bb-evidence-slot code {
    margin-top: var(--space-2);
    color: var(--muted);
    font-family: var(--case-mono);
    font-size: 0.65rem;
}

/* Arenas */

.case-study-biscuit .bb-small-note {
    margin-top: var(--space-3);
    color: var(--muted);
    font-family: var(--case-mono);
    font-size: 0.7rem;
    line-height: 1.55;
}

/* Narrative */
.case-study-biscuit .bb-scale-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.case-study-biscuit .bb-scale-strip > div {
    padding: var(--space-5) var(--space-6);
}

.case-study-biscuit .bb-scale-strip > div:first-child { padding-left: 0; }
.case-study-biscuit .bb-scale-strip > div:last-child { padding-right: 0; }
.case-study-biscuit .bb-scale-strip > div + div { border-left: 1px solid var(--line); }

.case-study-biscuit .bb-scale-strip strong {
    display: block;
    color: var(--text);
    font-size: clamp(2.5rem, 4.5vw, 4.4rem);
    line-height: 0.9;
    letter-spacing: -0.07em;
}

.case-study-biscuit .bb-scale-strip span {
    display: block;
    margin-top: var(--space-2);
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 700;
}

.case-study-biscuit .bb-scale-strip small {
    display: block;
    margin-top: var(--space-1);
    color: var(--muted);
    font-family: var(--case-mono);
    font-size: 0.66rem;
    line-height: 1.45;
}

.case-study-biscuit .bb-narrative-media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-5);
}

/* JSON */
.case-study-biscuit .bb-json-evidence {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
    gap: var(--space-6);
    align-items: stretch;
}

.case-study-biscuit .bb-json-artifact-slot { min-height: 330px; }

.case-study-biscuit .bb-json-drives dl {
    margin-top: var(--space-3);
    border-top: 1px solid var(--line);
}

.case-study-biscuit .bb-json-drives dl > div {
    display: grid;
    grid-template-columns: minmax(120px, 0.52fr) minmax(0, 1.48fr);
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line);
}

.case-study-biscuit .bb-json-drives dt {
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 700;
}

.case-study-biscuit .bb-json-drives dd {
    color: var(--text-soft);
    font-size: 0.84rem;
    line-height: 1.5;
}

/* Reflection */
.case-study-biscuit .bb-reflection-media {
    display: grid;
    place-items: stretch;
}

.case-study-biscuit .bb-reflection-slot {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: var(--space-5);
    background: linear-gradient(145deg, rgba(239,105,73,0.04), rgba(0,0,0,0.15));
}

.case-study-biscuit .bb-reflection-slot strong {
    margin-top: var(--space-2);
    color: var(--text);
}

.case-study-biscuit .bb-reflection-slot code {
    margin-top: var(--space-2);
    color: var(--muted);
    font-family: var(--case-mono);
    font-size: 0.68rem;
}

@media (max-width: 980px) {
    .case-study-biscuit .case-details {
        grid-template-columns: minmax(280px, 1.8fr) repeat(2, minmax(140px, 1fr));
    }

    .case-study-biscuit .bb-substory,
.case-study-biscuit .bb-json-evidence{
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    

    

    
}

@media (max-width: 760px) {
    .case-study-biscuit .bb-scale-strip,
.case-study-biscuit .bb-narrative-media{
        grid-template-columns: 1fr;
    }

    .case-study-biscuit .bb-scale-strip > div,
.case-study-biscuit .bb-scale-strip > div:first-child,
.case-study-biscuit .bb-scale-strip > div:last-child{
        padding: var(--space-4) 0;
    }

    .case-study-biscuit .bb-scale-strip > div + div{
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    

    

    
}

/* =========================================================
   BISCUIT BANDITS — IN-STORY JAM / DEMO EVIDENCE
========================================================= */

.case-study-biscuit .bb-story-evidence {
    margin-top: var(--space-6);
    padding-top: var(--space-5);

    border-top: 1px solid var(--line);
}

.case-study-biscuit .bb-story-evidence-heading {
    display: grid;
    grid-template-columns:
        minmax(260px, 0.72fr)
        minmax(0, 1.28fr);
    gap: var(--space-7);
    align-items: start;

    margin-bottom: var(--space-5);
}

.case-study-biscuit .bb-story-evidence-heading h3 {
    max-width: 480px;

    margin-top: var(--space-2);

    color: var(--text);

    font-size: clamp(1.2rem, 1.7vw, 1.62rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.case-study-biscuit .bb-story-evidence-heading > p {
    max-width: 700px;

    color: var(--text-soft);

    font-size: 0.95rem;
    line-height: 1.68;
}

.case-study-biscuit .bb-roll-showcase {
    max-width: 1160px;
    margin-inline: auto;
}

.case-study-biscuit .bb-roll-media-slot {
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--space-2);

    width: 100%;
    aspect-ratio: 1 / 1;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.018),
            rgba(0, 0, 0, 0.22)
        );
    border: 1px dashed var(--line-bright);
    border-radius: var(--radius);
}

.case-study-biscuit .bb-roll-media-slot-current {
    border-color: rgba(239, 105, 73, 0.48);
}

.case-study-biscuit .bb-roll-media-slot span {
    color: var(--accent);

    font-family: var(--case-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.case-study-biscuit .bb-roll-media-slot strong {
    color: var(--text-soft);

    font-family: var(--case-mono);
    font-size: 0.8rem;
}

.case-study-biscuit .bb-polish-note {
    display: grid;
    grid-template-columns:
        minmax(150px, 0.28fr)
        minmax(0, 1.72fr);
    gap: var(--space-5);

    margin-top: var(--space-4);
    padding-top: var(--space-4);

    border-top: 1px solid var(--line);
}

.case-study-biscuit .bb-polish-note > span {
    color: var(--accent);

    font-family: var(--case-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.case-study-biscuit .bb-polish-note p {
    max-width: 830px;

    color: var(--text-soft);

    font-size: 0.9rem;
    line-height: 1.65;
}

@media (max-width: 900px) {

    .case-study-biscuit .bb-story-evidence-heading,
    .case-study-biscuit .bb-polish-note {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

}

/* =========================================================
   BISCUIT BANDITS — MEDIA + DECISION SYSTEMS
========================================================= */

/* Biscuit Bandits gameplay footage is 16:9. */
.case-study-biscuit .bb-roll-media-slot,
.case-study-biscuit .bb-evidence-slot,
.case-study-biscuit .bb-evidence-slot-wide,
.case-study-biscuit .bb-json-artifact-slot,
.case-study-biscuit .bb-reflection-slot{
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
}

.case-study-biscuit .bb-roll-showcase .comparison-card {
    align-content: start;
}

.case-study-biscuit .bb-roll-showcase .comparison-card figcaption {
    min-height: 0;
}

/* Main Story 2: one argument, two supporting systems. */

.case-study-biscuit .bb-arena-substory {
    margin-top: var(--space-7);
}

/* Arena examples use the same 16:9 shape as the game. */

/* Keep shorter Other Systems titles on one line when space allows. */
.case-study-biscuit .system-summary-title strong {
    white-space: nowrap;
}

@media (max-width: 980px) {

}

@media (max-width: 760px) {

    .case-study-biscuit .system-summary-title strong {
        white-space: normal;
    }

}

/* =========================================================
   BISCUIT BANDITS — SYSTEM BROWSERS + RUN PLANNER
========================================================= */

/* ---------------------------------------------------------
   MEANINGFUL DECISIONS — SUBGROUPS
--------------------------------------------------------- */

.case-study-biscuit .bb-decision-systems {
    margin-top: var(--space-4);
}

.case-study-biscuit .bb-decision-group {
    padding: var(--space-4);

    background: rgba(255, 255, 255, 0.022);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.case-study-biscuit .bb-decision-group + .bb-decision-group {
    margin-top: var(--space-5);
}

.case-study-biscuit .bb-decision-group .bb-substory {
    grid-template-columns:
        minmax(250px, 0.62fr)
        minmax(0, 1.38fr);
    gap: var(--space-6);

    margin-top: 0;
    padding-top: 0;
    padding-bottom: var(--space-3);

    border-top: 0;
}

.case-study-biscuit .bb-decision-group .bb-substory-heading h3 {
    max-width: 420px;
    margin-top: var(--space-2);

    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0;
}

.case-study-biscuit .bb-decision-group .bb-substory-copy p {
    max-width: 600px;

    color: var(--text-soft);
    font-size: 0.88rem;
    line-height: 1.55;
}

.case-study-biscuit .bb-decision-group .bb-arena-browser {
    margin-top: var(--space-2);
}

.case-study-biscuit .bb-decision-group .bb-small-note {
    margin-top: var(--space-3);
}

/* ---------------------------------------------------------
   ARENA MODIFIER BROWSER
--------------------------------------------------------- */

.case-study-biscuit .bb-arena-browser {
    margin-top: var(--space-2);
}

.case-study-biscuit .bb-arena-tabs {
    display: flex;
    gap: 0;

    background: rgba(255, 255, 255, 0.012);
    border: 1px solid var(--line);
}

.case-study-biscuit .bb-arena-tab {
    min-height: 40px;
    padding:
        0
        var(--space-3);

    color: var(--muted);
    background: transparent;
    border: 0;
    border-right: 1px solid var(--line);

    font-family: var(--case-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        color var(--fast),
        background var(--fast);
}

.case-study-biscuit .bb-arena-tab:last-child {
    border-right: 1px solid var(--line);
}

.case-study-biscuit .bb-arena-tab:hover {
    color: var(--text);
}

.case-study-biscuit .bb-arena-tab.is-active {
    color: var(--background);
    background: var(--accent);
}

.case-study-biscuit .bb-arena-panel {
    display: grid;
    grid-template-columns:
        minmax(230px, 0.58fr)
        minmax(0, 1.42fr);
    gap: var(--space-5);
    align-items: center;

    margin-top: var(--space-3);
    padding: var(--space-3);

    background: rgba(255, 255, 255, 0.014);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.case-study-biscuit .bb-arena-panel[hidden] {
    display: none;
}

.case-study-biscuit .bb-arena-panel-copy {
    max-width: 430px;
}

.case-study-biscuit .bb-arena-panel-copy > span {
    display: block;

    margin-bottom: var(--space-2);

    color: var(--accent);

    font-family: var(--case-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.case-study-biscuit .bb-arena-panel-copy h3 {
    color: var(--text);

    font-size: clamp(1.2rem, 1.7vw, 1.62rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.case-study-biscuit .bb-arena-panel-copy > p {
    margin-top: var(--space-3);

    color: var(--text-soft);

    font-size: 0.86rem;
    line-height: 1.55;
}

.case-study-biscuit .bb-arena-media-slot {
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--space-2);

    justify-self: end;
    width: min(590px, 100%);
    aspect-ratio: 16 / 9;

    background:
        linear-gradient(
            145deg,
            rgba(239, 105, 73, 0.035),
            rgba(0, 0, 0, 0.18)
        );
    border: 1px dashed var(--line-bright);
    border-radius: var(--radius);
}

.case-study-biscuit .bb-arena-media-slot span {
    color: var(--accent);

    font-family: var(--case-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.case-study-biscuit .bb-arena-media-slot strong {
    color: var(--text-soft);

    font-family: var(--case-mono);
    font-size: 0.8rem;
}

/* ---------------------------------------------------------
   VOYAGE LOG SCREENSHOTS
--------------------------------------------------------- */

.case-study-biscuit .bb-voyage-log-screens {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);

    margin-top: var(--space-5);
    padding-top: var(--space-5);

    border-top: 1px solid var(--line);
}

.case-study-biscuit .bb-log-screen-slot {
    margin: 0;
}

.case-study-biscuit .bb-log-screen-slot > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    width: 100%;
    aspect-ratio: 16 / 9;

    padding: var(--space-4);

    background:
        linear-gradient(
            145deg,
            rgba(239, 105, 73, 0.035),
            rgba(0, 0, 0, 0.16)
        );
    border: 1px dashed var(--line-bright);
    border-radius: var(--radius);
}

.case-study-biscuit .bb-log-screen-slot span {
    color: var(--accent);

    font-family: var(--case-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.case-study-biscuit .bb-log-screen-slot strong {
    margin-top: var(--space-2);

    color: var(--text);

    font-size: 1rem;
}

.case-study-biscuit .bb-log-screen-slot code {
    margin-top: var(--space-2);

    color: var(--muted);

    font-family: var(--case-mono);
    font-size: 0.66rem;
}

.case-study-biscuit .bb-log-screen-slot figcaption {
    padding:
        var(--space-3)
        var(--space-1)
        0;

    color: var(--text-soft);

    font-size: 0.82rem;
    line-height: 1.5;
}

/* ---------------------------------------------------------
   MEDIUM STORY PLANNER
--------------------------------------------------------- */

.case-study-biscuit .bb-medium-planner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    margin-top: var(--space-5);

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.case-study-biscuit .bb-medium-planner-step {
    position: relative;

    min-width: 0;

    padding:
        var(--space-4)
        var(--space-5);
}

.case-study-biscuit .bb-medium-planner-step:first-child {
    padding-left: 0;
}

.case-study-biscuit .bb-medium-planner-step:last-child {
    padding-right: 0;
}

.case-study-biscuit .bb-medium-planner-step + .bb-medium-planner-step {
    border-left: 1px solid var(--line);
}

.case-study-biscuit .bb-medium-planner-step > span {
    display: block;

    margin-bottom: var(--space-2);

    color: var(--accent);

    font-family: var(--case-mono);
    font-size: 0.64rem;
    font-weight: 700;
}

.case-study-biscuit .bb-medium-planner-step > strong {
    color: var(--text);

    font-size: 0.9rem;
    line-height: 1.4;
}

.case-study-biscuit .bb-medium-planner-step > p {
    margin-top: var(--space-2);

    color: var(--text-soft);

    font-size: 0.8rem;
    line-height: 1.55;
}

/* Finale state strip was intentionally removed. */

@media (max-width: 980px) {

    .case-study-biscuit .bb-arena-panel {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .case-study-biscuit .bb-medium-planner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .case-study-biscuit .bb-medium-planner-step:nth-child(3) {
        border-left: 0;
    }

    .case-study-biscuit .bb-medium-planner-step:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }

}

@media (max-width: 760px) {

    .case-study-biscuit .bb-decision-group {
        padding: var(--space-4);
    }

    .case-study-biscuit .bb-decision-group .bb-substory {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .case-study-biscuit .bb-arena-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .case-study-biscuit .bb-arena-tab {
        padding:
            0
            var(--space-2);
    }

    .case-study-biscuit .bb-voyage-log-screens,
    .case-study-biscuit .bb-medium-planner {
        grid-template-columns: 1fr;
    }

    .case-study-biscuit .bb-medium-planner-step,
    .case-study-biscuit .bb-medium-planner-step:first-child,
    .case-study-biscuit .bb-medium-planner-step:last-child {
        padding:
            var(--space-4)
            0;
    }

    .case-study-biscuit .bb-medium-planner-step + .bb-medium-planner-step,
    .case-study-biscuit .bb-medium-planner-step:nth-child(3) {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

}

/*
   Keep only the alternating section surface and outer boundary full-width.
   Section content and internal dividers align with the My Work gutter.
*/
.case-study-ttt > .case-section,
.case-study-shuddap > .case-section,
.case-study-apart > .case-section,
.case-study-biscuit > .case-section {
    padding-right: var(--case-section-gutter);
    padding-left: var(--case-section-gutter);
}