/* ===========================================================
   prototype.st — speculative design studio
   Blobitecture · asymmetric · geometric-sans · complementary
   palette · typewriter narrative · watercolor · tech-scaffold
   =========================================================== */

/* ---------- Tokens ---------- */
:root {
    --kiln-clay:        #B85C38;
    --deep-loam:        #2D2018;
    --patina-teal:      #3A7D6E;
    --raw-canvas:       #F2EDE4;
    --smudge-graphite:  #6B6560;
    --wash-ochre:       #D4A843;

    --raw-canvas-90:    rgba(242, 237, 228, 0.90);
    --raw-canvas-80:    rgba(242, 237, 228, 0.80);
    --loam-50:          rgba(45, 32, 24, 0.50);
    --graphite-08:      rgba(107, 101, 96, 0.08);
    --graphite-30:      rgba(107, 101, 96, 0.30);
    --graphite-60:      rgba(107, 101, 96, 0.60);
    --teal-30:          rgba(58, 125, 110, 0.30);

    --font-display:     'Jost', 'Futura', 'Inter', sans-serif;
    --font-body:        'Albert Sans', 'Inter', system-ui, sans-serif;
    --font-mono:        'Jost', 'Inter', sans-serif;

    --grid-size:        24px;
    --measure:          62ch;

    --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-soft:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--deep-loam);
    background-color: var(--raw-canvas);
    background-image:
        radial-gradient(circle, var(--smudge-graphite) 1.2px, transparent 1.4px);
    background-size: var(--grid-size) var(--grid-size);
    background-position: 0 0;
    background-attachment: fixed;
    /* dot grid at 8% via opacity overlay technique */
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
    /* lighten the dot grid to 8% with a wash overlay */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-color: var(--raw-canvas);
    opacity: 0.92;
    z-index: -1;
    pointer-events: none;
}

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---------- Header / footer rails ---------- */
.site-header,
.site-footer {
    position: fixed;
    left: 0;
    right: 0;
    padding: 18px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--smudge-graphite);
    text-transform: uppercase;
    z-index: 30;
    pointer-events: none;
    background:
        linear-gradient(to bottom, var(--raw-canvas-80), transparent);
}

.site-header {
    top: 0;
}

.site-footer {
    bottom: 0;
    background:
        linear-gradient(to top, var(--raw-canvas-80), transparent);
}

.meta-left,
.meta-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.meta-label {
    display: inline-block;
}

.meta-divider {
    color: var(--graphite-60);
    font-weight: 300;
}

/* ---------- Floating navigation pill ---------- */
.nav-pill {
    position: fixed;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    width: 64px;
    background: var(--raw-canvas-80);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--graphite-30);
    border-radius: 80px;
    padding: 22px 0 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    box-shadow: 0 8px 30px rgba(45, 32, 24, 0.06);
}

.nav-pill .nav-label {
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 9px;
    letter-spacing: 0.22em;
    color: var(--smudge-graphite);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin-bottom: 14px;
}

.nav-svg {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 320px;
    pointer-events: none;
    z-index: 0;
}

.nav-line {
    stroke-dasharray: 2 4;
}

.nav-dots {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 36px;
    align-items: center;
    z-index: 2;
    position: relative;
    margin-top: 4px;
}

.nav-dot {
    position: relative;
    width: 14px;
    height: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-dot .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.4px solid var(--smudge-graphite);
    background: var(--raw-canvas);
    transition: all 0.4s var(--ease-soft);
}

.nav-dot.active .dot {
    background: var(--kiln-clay);
    border-color: var(--kiln-clay);
    transform: scale(1.25);
    box-shadow: 0 0 0 4px rgba(184, 92, 56, 0.15);
}

.nav-dot .dot-label {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--deep-loam);
    background: var(--raw-canvas-90);
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease-soft);
    border: 1px solid var(--graphite-30);
}

.nav-dot:hover .dot-label,
.nav-dot.active .dot-label {
    opacity: 1;
    transform: translateY(-50%) translateX(2px);
}

.nav-dot.active .dot-label {
    color: var(--kiln-clay);
    border-color: rgba(184, 92, 56, 0.35);
}

/* ---------- Workshop main ---------- */
.workshop {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
    position: relative;
    z-index: 1;
}

/* ---------- Stations (general) ---------- */
.station {
    position: relative;
    min-height: 100vh;
    padding: 120px 0;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-auto-rows: minmax(20px, auto);
    gap: 24px;
}

.station-tag {
    grid-column: 1 / span 6;
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 24px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--smudge-graphite);
    align-self: start;
}

.station-tag.right {
    grid-column: 11 / span 6;
    justify-content: flex-end;
}

.station-tag.center {
    grid-column: 6 / span 6;
    justify-content: center;
}

.station-num {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 64px;
    line-height: 1;
    color: var(--kiln-clay);
    letter-spacing: -0.02em;
    position: relative;
}

.station-num::after {
    content: '';
    position: absolute;
    inset: -6px -10px;
    border: 1.4px dashed var(--teal-30);
    border-radius: 50%;
    pointer-events: none;
    transform: rotate(-3deg);
}

.station-name {
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--deep-loam);
    align-self: end;
    padding-bottom: 8px;
}

/* ---------- Blob shells ---------- */
.blob {
    position: relative;
    isolation: isolate;
    transition:
        transform 500ms var(--ease-soft),
        clip-path 400ms var(--ease-soft);
    will-change: transform, clip-path;
}

.blob.in-view {
    /* defaulted via JS observer to scale animation */
    animation: blobEnter 700ms var(--ease-soft) both;
}

@keyframes blobEnter {
    0%   { opacity: 0; transform: translateY(30px) scale(0.85); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.blob-wash,
.blob-outline {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.blob-wash {
    z-index: 1;
    mix-blend-mode: multiply;
    opacity: 0.92;
}

.blob-outline {
    z-index: 2;
    overflow: visible;
}

.blob-outline .outline-path {
    transition: stroke-dashoffset 900ms var(--ease-soft), stroke 400ms var(--ease-soft);
}

.blob-outline .control-points circle {
    fill: var(--patina-teal);
    transition: r 380ms var(--ease-soft), fill 380ms var(--ease-soft);
}

.blob:hover .blob-outline .control-points circle {
    fill: var(--kiln-clay);
}

.blob:hover .blob-wash {
    filter: saturate(1.1);
    opacity: 1;
}

.blob-content {
    position: relative;
    z-index: 3;
    padding: 72px 88px;
    color: var(--deep-loam);
    max-width: 100%;
}

.blob-content.small {
    padding: 56px 60px;
}

.blob-content.tiny {
    padding: 44px 48px;
}

/* ---------- Station 1: The Brief ---------- */
.station-1 {
    align-items: center;
    min-height: 100vh;
    padding-top: 130px;
}

.station-1 .station-tag {
    grid-column: 1 / span 4;
    margin-bottom: 0;
    align-self: start;
}

.blob-1a {
    grid-column: 1 / span 10;
    grid-row: 2;
    aspect-ratio: 6/5;
    /* organic clip-path with 12 control points (animated by JS) */
    clip-path: polygon(
        18% 6%, 38% 2%, 60% 8%, 82% 4%, 96% 22%,
        99% 46%, 92% 68%, 96% 86%, 78% 96%,
        56% 99%, 32% 95%, 12% 92%,
        4% 72%, 2% 50%, 8% 28%
    );
    margin-right: -40px;
    z-index: 2;
}

.blob-1b {
    grid-column: 10 / span 6;
    grid-row: 2;
    aspect-ratio: 1/1;
    align-self: center;
    clip-path: polygon(
        20% 8%, 42% 2%, 62% 6%, 82% 12%, 94% 30%,
        98% 52%, 94% 74%, 80% 90%, 60% 96%,
        38% 94%, 18% 86%, 6% 68%, 2% 48%, 8% 26%
    );
    margin-left: -40px;
    margin-top: 40px;
    z-index: 1;
}

.connector-1 {
    grid-column: 1 / -1;
    grid-row: 3;
    height: 80px;
    width: 100%;
    margin-top: 30px;
    opacity: 0.6;
}

.kicker {
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--patina-teal);
    margin-bottom: 22px;
}

.display-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(48px, 8vw, 96px);
    line-height: 0.96;
    letter-spacing: -0.025em;
    color: var(--deep-loam);
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.caret {
    display: inline-block;
    color: var(--kiln-clay);
    font-weight: 300;
    margin-left: 4px;
    animation: caretBlink 530ms steps(2) infinite;
}

.caret.done {
    animation: caretBlinkOff 1590ms steps(6) 1 forwards;
}

@keyframes caretBlink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

@keyframes caretBlinkOff {
    0%, 16% { opacity: 1; }
    16.5%, 33% { opacity: 0; }
    33.5%, 50% { opacity: 1; }
    50.5%, 66% { opacity: 0; }
    66.5%, 83% { opacity: 1; }
    83.5%, 100% { opacity: 0; }
}

.lede {
    font-family: var(--font-body);
    font-size: 19px;
    line-height: 1.6;
    color: var(--deep-loam);
    max-width: var(--measure);
    margin-bottom: 22px;
}

.lede em {
    font-style: italic;
    color: var(--kiln-clay);
    font-weight: 500;
}

.signature {
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--smudge-graphite);
    text-transform: uppercase;
}

.micro {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--smudge-graphite);
    max-width: 30ch;
}

.circled-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--patina-teal);
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 16px;
    color: var(--patina-teal);
    margin-bottom: 18px;
    transform: rotate(-2deg);
    background: var(--raw-canvas-80);
}

.circled-num.small {
    width: 28px;
    height: 28px;
    font-size: 12px;
    margin-bottom: 10px;
}

/* ---------- Station 2: The Sketch ---------- */
.station-2 {
    align-items: start;
    min-height: 110vh;
    padding-top: 80px;
}

.blob-2a {
    grid-column: 7 / span 9;
    grid-row: 2;
    aspect-ratio: 6/5;
    clip-path: polygon(
        14% 4%, 36% 0%, 58% 4%, 78% 0%, 94% 18%,
        98% 40%, 94% 62%, 100% 80%, 84% 96%,
        62% 100%, 40% 94%, 18% 100%,
        2% 84%, 0% 60%, 6% 38%, 0% 18%
    );
    z-index: 2;
}

.blob-2b {
    grid-column: 1 / span 8;
    grid-row: 3 / span 2;
    margin-top: -120px;
    aspect-ratio: 5/4;
    clip-path: polygon(
        20% 4%, 42% 0%, 62% 8%, 82% 4%, 96% 22%,
        100% 46%, 92% 68%, 98% 86%, 78% 98%,
        56% 100%, 32% 96%, 10% 92%,
        2% 70%, 0% 48%, 6% 24%
    );
    z-index: 3;
}

.blob-2c {
    grid-column: 5 / span 6;
    grid-row: 4;
    margin-top: 60px;
    aspect-ratio: 5/4;
    clip-path: polygon(
        16% 6%, 40% 0%, 64% 4%, 86% 14%,
        98% 36%, 94% 60%, 86% 82%, 64% 96%,
        38% 100%, 16% 92%, 4% 72%, 0% 46%, 8% 22%
    );
    z-index: 1;
}

.connector-2 {
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
    height: 200px;
    pointer-events: none;
    align-self: end;
    opacity: 0.55;
    z-index: 0;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(34px, 4.5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--deep-loam);
    margin-bottom: 24px;
    max-width: 22ch;
    min-height: 1.05em;
}

.sub-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--patina-teal);
    margin-bottom: 18px;
    max-width: 22ch;
}

.body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--deep-loam);
    max-width: var(--measure);
}

.body em {
    color: var(--kiln-clay);
    font-style: italic;
    font-weight: 500;
}

.body.large {
    font-size: 20px;
    line-height: 1.55;
}

.quote {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
    color: var(--deep-loam);
    margin-bottom: 14px;
    font-style: italic;
}

/* ---------- Station 3: Iteration band ---------- */
.station-3 {
    min-height: 70vh;
    padding-top: 120px;
    padding-bottom: 120px;
    display: block;
    position: relative;
}

.station-3 .station-tag {
    margin-bottom: 14px;
}

.band-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--deep-loam);
    margin-bottom: 64px;
    max-width: 28ch;
    min-height: 1.1em;
}

.pill-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
    margin: 0 -10px;
}

.pill {
    background: var(--raw-canvas);
    border: 1.4px solid var(--smudge-graphite);
    border-radius: 999px;
    padding: 38px 44px 42px;
    position: relative;
    transition: transform 350ms var(--ease-soft), box-shadow 350ms var(--ease-soft);
    box-shadow: 0 6px 24px rgba(45, 32, 24, 0.04);
    background-image: linear-gradient(
        to bottom right,
        rgba(212, 168, 67, 0.06),
        rgba(58, 125, 110, 0.04)
    );
}

.pill::before {
    content: '';
    position: absolute;
    inset: -1.4px;
    border-radius: inherit;
    border: 1px dashed var(--graphite-30);
    pointer-events: none;
    transform: rotate(0.5deg);
}

.pill-1 {
    transform: rotate(-3deg) translateX(0);
    margin-right: -22px;
    z-index: 4;
}

.pill-2 {
    transform: rotate(2.5deg) translateY(8px);
    margin-right: -22px;
    z-index: 3;
}

.pill-3 {
    transform: rotate(-2deg) translateY(-4px);
    margin-right: -22px;
    z-index: 2;
}

.pill-4 {
    transform: rotate(4deg) translateY(12px);
    z-index: 1;
}

.pill:hover {
    transform: translateY(-6px) rotate(0deg);
    box-shadow: 0 14px 40px rgba(45, 32, 24, 0.10);
    z-index: 10;
}

.pill-num {
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--patina-teal);
    display: block;
    margin-bottom: 12px;
}

.pill-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--kiln-clay);
    margin-bottom: 10px;
}

.pill-body {
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--deep-loam);
}

.connector-3 {
    width: 100%;
    height: 80px;
    margin-top: 60px;
    opacity: 0.5;
}

/* ---------- Station 4: The Test ---------- */
.station-4 {
    min-height: 110vh;
    padding-top: 100px;
    align-items: start;
    grid-template-columns: repeat(16, 1fr);
}

.blob-4a {
    grid-column: 4 / span 12;
    grid-row: 2;
    aspect-ratio: 7/5;
    clip-path: polygon(
        16% 6%, 38% 0%, 60% 6%, 80% 2%, 96% 18%,
        100% 40%, 96% 60%, 100% 80%, 84% 96%,
        62% 100%, 40% 92%, 18% 100%,
        2% 82%, 0% 58%, 8% 36%, 4% 16%
    );
    z-index: 2;
}

.test-list {
    list-style: none;
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 22px;
    max-width: 60ch;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--deep-loam);
}

.test-list li {
    padding-left: 0;
    color: var(--smudge-graphite);
}

.test-list .bullet {
    color: var(--kiln-clay);
    font-weight: 600;
    margin-right: 6px;
}

.orbit-group {
    grid-column: 1 / span 4;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-self: center;
    margin-top: 60px;
}

.orbit {
    position: relative;
    aspect-ratio: 11/10;
    clip-path: polygon(
        18% 8%, 42% 0%, 64% 6%, 86% 16%,
        98% 38%, 96% 62%, 84% 84%, 62% 96%,
        38% 100%, 14% 92%, 2% 70%, 0% 44%, 6% 22%
    );
    transition: transform 500ms var(--ease-soft);
}

.orbit-a { transform: translateX(20px) rotate(-2deg); }
.orbit-b { transform: translateX(-30px) translateY(0) rotate(3deg); }
.orbit-c { transform: translateX(40px) rotate(-1deg); }

.orbit:hover {
    transform: translateY(-4px) scale(1.03);
}

.orbit-content {
    position: relative;
    z-index: 3;
    padding: 36px 44px;
    color: var(--deep-loam);
}

.connector-4 {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    align-self: stretch;
    opacity: 0.5;
}

/* ---------- Station 5: The Ship ---------- */
.station-5 {
    min-height: 100vh;
    padding-top: 100px;
    padding-bottom: 140px;
    align-items: center;
    justify-items: center;
}

.station-5 .station-tag {
    grid-column: 6 / span 6;
    margin-bottom: 36px;
}

.blob-5a {
    grid-column: 4 / span 10;
    grid-row: 2;
    aspect-ratio: 6/5;
    /* slightly more refined / smoother shape */
    clip-path: polygon(
        22% 4%, 44% 0%, 60% 2%, 78% 6%, 92% 16%,
        100% 36%, 98% 56%, 94% 76%, 86% 92%,
        70% 100%, 50% 98%, 30% 100%,
        14% 90%, 4% 74%, 0% 54%, 4% 34%, 12% 16%
    );
    z-index: 2;
    text-align: center;
}

.blob-5a .blob-content {
    text-align: center;
    padding: 88px 96px;
}

.blob-5a .circled-num {
    margin-left: auto;
    margin-right: auto;
}

.blob-5a .body {
    margin-left: auto;
    margin-right: auto;
}

.closing-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--kiln-clay);
    margin-bottom: 28px;
    min-height: 1.05em;
}

.signoff {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 36px auto 14px;
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--patina-teal);
}

.signoff-line {
    flex: 1;
    height: 1px;
    background: var(--graphite-30);
    max-width: 80px;
    background: repeating-linear-gradient(
        to right,
        var(--smudge-graphite) 0,
        var(--smudge-graphite) 3px,
        transparent 3px,
        transparent 7px
    );
    opacity: 0.7;
}

/* ---------- Connectors (general) ---------- */
.connector path {
    stroke-dasharray: 6 5 2 5;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 1100ms var(--ease-soft);
}

.connector.in-view path {
    stroke-dashoffset: 0;
}

/* ---------- Typewriter caret on typed titles ---------- */
.typed-title {
    position: relative;
}

.typed-title::after {
    content: '|';
    color: var(--kiln-clay);
    margin-left: 4px;
    font-weight: 300;
    opacity: 0;
}

.typed-title.typing::after {
    opacity: 1;
    animation: caretBlink 530ms steps(2) infinite;
}

.typed-title.done::after {
    opacity: 0;
}

/* ---------- Blob outline visibility / hover scaffolding ---------- */
.outline-path {
    vector-effect: non-scaling-stroke;
    opacity: 0.55;
}

/* control points: small circles drawn by JS */
.control-points circle {
    r: 3.2;
    stroke: var(--raw-canvas);
    stroke-width: 1;
}

.blob:hover .control-points circle {
    r: 4.2;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .workshop {
        padding: 0 48px;
    }
    .blob-content {
        padding: 56px 64px;
    }
    .pill-row {
        grid-template-columns: 1fr 1fr;
        gap: 14px 0;
    }
    .pill-1, .pill-2, .pill-3, .pill-4 {
        margin-right: 0;
    }
    .pill-1 { transform: rotate(-2deg); }
    .pill-2 { transform: rotate(2deg); }
    .pill-3 { transform: rotate(-2deg); }
    .pill-4 { transform: rotate(2deg); }

    .blob-1a, .blob-1b,
    .blob-2a, .blob-2b, .blob-2c,
    .blob-4a, .blob-5a {
        grid-column: 1 / -1;
        margin-left: 0;
        margin-right: 0;
    }
    .blob-1b {
        margin-top: 20px;
    }
    .blob-2b {
        margin-top: 0;
    }
    .orbit-group {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 40px;
    }
    .orbit {
        flex: 1 1 240px;
    }
}

@media (max-width: 720px) {
    body {
        font-size: 16px;
    }
    .workshop {
        padding: 0 22px;
    }
    .site-header,
    .site-footer {
        padding: 14px 18px;
        font-size: 9.5px;
    }
    .nav-pill {
        left: 12px;
        width: 48px;
        padding: 16px 0 18px;
    }
    .nav-dot .dot-label {
        display: none;
    }
    .station {
        padding: 80px 0;
        min-height: auto;
    }
    .blob-content {
        padding: 44px 38px;
    }
    .display-title {
        font-size: 44px;
    }
    .station-num {
        font-size: 44px;
    }
}

/* ---------- Subtle blob breath animation (idle) ---------- */
@keyframes blobBreath {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.005); }
}

.blob.in-view {
    animation: blobEnter 700ms var(--ease-soft) both,
               blobBreath 7s ease-in-out 800ms infinite;
}

/* ---------- Wash drift (animated turbulence-like motion) ---------- */
.blob-wash {
    animation: washDrift 18s ease-in-out infinite alternate;
}

.blob-1b .blob-wash { animation-duration: 14s; animation-delay: -3s; }
.blob-2a .blob-wash { animation-duration: 22s; animation-delay: -6s; }
.blob-2b .blob-wash { animation-duration: 19s; animation-delay: -2s; }
.blob-2c .blob-wash { animation-duration: 16s; animation-delay: -8s; }
.blob-4a .blob-wash { animation-duration: 24s; animation-delay: -4s; }
.blob-5a .blob-wash { animation-duration: 26s; animation-delay: -10s; }
.orbit-a .blob-wash { animation-duration: 11s; }
.orbit-b .blob-wash { animation-duration: 13s; animation-delay: -2s; }
.orbit-c .blob-wash { animation-duration: 15s; animation-delay: -4s; }

@keyframes washDrift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(2%, -1.5%) scale(1.04); }
    100% { transform: translate(-1.5%, 1%) scale(1.02); }
}

/* ---------- A pinned cluster: the brief overlap pool ---------- */
.blob-1a,
.blob-1b {
    position: relative;
}

.blob-1a::after,
.blob-1b::after {
    /* a faint corner crop to suggest hand-cut paper */
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: var(--raw-canvas);
    transform: rotate(45deg);
    top: -8px;
    left: 30%;
    box-shadow: 0 1px 0 var(--graphite-30);
    z-index: 4;
    opacity: 0.0;
}

/* ---------- Print niceties (purely cosmetic) ---------- */
@media print {
    .nav-pill, .site-header, .site-footer { display: none; }
    body::before { display: none; }
}