/* ===========================================================================
   mujun.studio  --  a herbarium of contradictions
   Blobitecture container architecture rendered through botanical illustration,
   anchored in a midnight-blue void.
   =========================================================================== */

/* ---------- Palette tokens (exact hex from DESIGN.md) ---------- */
:root {
    /* Backgrounds */
    --abyssal-blue:   #0A1628;   /* main page background, the night sky */
    --deep-indigo:    #111D35;   /* blob interiors for dark sections */

    /* Surfaces */
    --parchment:      #E8D5B7;   /* light blob fills, the "paper" */
    --frost-sage:     #C8D5C4;   /* secondary light surfaces, leaf highlights */

    /* Accents */
    --antique-bronze: #8B6B4A;   /* borders, stems, interactive highlights */
    --muted-teal:     #4A7C8B;   /* links, secondary accents */
    --dried-rose:     #9B6B6B;   /* floral accents, hover states */

    /* Text */
    --silver-mist:    #B8C4D0;   /* body on dark */
    --dusty-slate:    #5A6B7A;   /* captions, metadata */
    --midnight-ink:   #1A2332;   /* text on light surfaces */

    /* Type stacks (Righteous + Dela Gothic One + Outfit per DESIGN.md;
       lora/space/inter present as descriptive fallbacks for the metadata) */
    --font-display:    'Righteous', 'Lora', 'Inter', serif;
    --font-accent:     'Dela Gothic One', 'Space Mono', 'Inter', sans-serif;
    --font-body:       'Outfit', 'Inter', system-ui, sans-serif;
}

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

html {
    scroll-behavior: smooth;
    background: var(--abyssal-blue);
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.65;
    letter-spacing: 0.01em;
    color: var(--silver-mist);
    background: var(--abyssal-blue);
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: var(--muted-teal);
    text-decoration: none;
    transition: color 0.4s ease;
}

a:hover {
    color: var(--dried-rose);
}

em {
    font-style: italic;
    color: var(--parchment);
}

/* SVG defs container is invisible but present */
.defs-svg {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ===========================================================================
   Drifting seeds and spores (background atmosphere)
   =========================================================================== */
.seed-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.seed {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--antique-bronze);
    opacity: 0.35;
    box-shadow: 0 0 6px rgba(139, 107, 74, 0.25);
    will-change: transform;
}

/* unique-per-seed positioning + drift cycles 8s-20s */
.seed-1  { top: 8%;  left: 12%; width: 3px;  height: 3px; background: var(--antique-bronze); animation: drift-a 14s ease-in-out infinite; }
.seed-2  { top: 17%; left: 78%; width: 5px;  height: 5px; background: var(--muted-teal);     animation: drift-b 18s ease-in-out infinite; }
.seed-3  { top: 24%; left: 42%; width: 2px;  height: 2px; background: var(--parchment);      animation: drift-c 11s ease-in-out infinite; }
.seed-4  { top: 33%; left: 88%; width: 6px;  height: 6px; background: var(--dried-rose);     animation: drift-d 16s ease-in-out infinite; }
.seed-5  { top: 41%; left: 6%;  width: 3px;  height: 3px; background: var(--antique-bronze); animation: drift-a 12s ease-in-out infinite; }
.seed-6  { top: 49%; left: 60%; width: 4px;  height: 4px; background: var(--muted-teal);     animation: drift-b 19s ease-in-out infinite; }
.seed-7  { top: 56%; left: 22%; width: 2px;  height: 2px; background: var(--parchment);      animation: drift-c 9s  ease-in-out infinite; }
.seed-8  { top: 63%; left: 92%; width: 5px;  height: 5px; background: var(--antique-bronze); animation: drift-d 17s ease-in-out infinite; }
.seed-9  { top: 70%; left: 38%; width: 3px;  height: 3px; background: var(--frost-sage);     animation: drift-a 13s ease-in-out infinite; }
.seed-10 { top: 76%; left: 70%; width: 4px;  height: 4px; background: var(--dried-rose);     animation: drift-b 15s ease-in-out infinite; }
.seed-11 { top: 82%; left: 14%; width: 2px;  height: 2px; background: var(--parchment);      animation: drift-c 10s ease-in-out infinite; }
.seed-12 { top: 88%; left: 56%; width: 5px;  height: 5px; background: var(--muted-teal);     animation: drift-d 20s ease-in-out infinite; }
.seed-13 { top: 14%; left: 50%; width: 3px;  height: 3px; background: var(--antique-bronze); animation: drift-a 17s ease-in-out infinite; }
.seed-14 { top: 28%; left: 32%; width: 2px;  height: 2px; background: var(--frost-sage);     animation: drift-b 14s ease-in-out infinite; }
.seed-15 { top: 45%; left: 75%; width: 4px;  height: 4px; background: var(--dried-rose);     animation: drift-c 16s ease-in-out infinite; }
.seed-16 { top: 60%; left: 48%; width: 3px;  height: 3px; background: var(--antique-bronze); animation: drift-d 12s ease-in-out infinite; }
.seed-17 { top: 73%; left: 84%; width: 2px;  height: 2px; background: var(--parchment);      animation: drift-a 19s ease-in-out infinite; }
.seed-18 { top: 90%; left: 30%; width: 4px;  height: 4px; background: var(--muted-teal);     animation: drift-b 8s  ease-in-out infinite; }

/* Dense seeds for Section 4 - the dissolution */
.dense-seeds {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.dense-seeds .seed { opacity: 0.5; }

.seed-d1  { top: 5%;  left: 8%;  width: 4px;  height: 4px; background: var(--parchment);      animation: drift-a 10s ease-in-out infinite; }
.seed-d2  { top: 12%; left: 24%; width: 6px;  height: 6px; background: var(--dried-rose);     animation: drift-b 13s ease-in-out infinite; }
.seed-d3  { top: 18%; left: 42%; width: 3px;  height: 3px; background: var(--antique-bronze); animation: drift-c 15s ease-in-out infinite; }
.seed-d4  { top: 24%; left: 66%; width: 5px;  height: 5px; background: var(--parchment);      animation: drift-d 12s ease-in-out infinite; }
.seed-d5  { top: 30%; left: 86%; width: 4px;  height: 4px; background: var(--dried-rose);     animation: drift-a 18s ease-in-out infinite; }
.seed-d6  { top: 36%; left: 12%; width: 3px;  height: 3px; background: var(--muted-teal);     animation: drift-b 11s ease-in-out infinite; }
.seed-d7  { top: 42%; left: 38%; width: 5px;  height: 5px; background: var(--antique-bronze); animation: drift-c 14s ease-in-out infinite; }
.seed-d8  { top: 48%; left: 60%; width: 4px;  height: 4px; background: var(--parchment);      animation: drift-d 17s ease-in-out infinite; }
.seed-d9  { top: 55%; left: 90%; width: 6px;  height: 6px; background: var(--dried-rose);     animation: drift-a 9s  ease-in-out infinite; }
.seed-d10 { top: 61%; left: 16%; width: 3px;  height: 3px; background: var(--frost-sage);     animation: drift-b 16s ease-in-out infinite; }
.seed-d11 { top: 67%; left: 44%; width: 4px;  height: 4px; background: var(--parchment);      animation: drift-c 13s ease-in-out infinite; }
.seed-d12 { top: 73%; left: 70%; width: 5px;  height: 5px; background: var(--antique-bronze); animation: drift-d 19s ease-in-out infinite; }
.seed-d13 { top: 79%; left: 22%; width: 4px;  height: 4px; background: var(--dried-rose);     animation: drift-a 11s ease-in-out infinite; }
.seed-d14 { top: 85%; left: 50%; width: 3px;  height: 3px; background: var(--muted-teal);     animation: drift-b 15s ease-in-out infinite; }
.seed-d15 { top: 90%; left: 78%; width: 5px;  height: 5px; background: var(--parchment);      animation: drift-c 12s ease-in-out infinite; }
.seed-d16 { top: 8%;  left: 56%; width: 3px;  height: 3px; background: var(--antique-bronze); animation: drift-d 17s ease-in-out infinite; }
.seed-d17 { top: 22%; left: 4%;  width: 4px;  height: 4px; background: var(--dried-rose);     animation: drift-a 14s ease-in-out infinite; }
.seed-d18 { top: 50%; left: 28%; width: 6px;  height: 6px; background: var(--parchment);      animation: drift-b 10s ease-in-out infinite; }
.seed-d19 { top: 64%; left: 80%; width: 3px;  height: 3px; background: var(--frost-sage);     animation: drift-c 18s ease-in-out infinite; }
.seed-d20 { top: 76%; left: 60%; width: 4px;  height: 4px; background: var(--antique-bronze); animation: drift-d 13s ease-in-out infinite; }
.seed-d21 { top: 92%; left: 14%; width: 5px;  height: 5px; background: var(--dried-rose);     animation: drift-a 16s ease-in-out infinite; }
.seed-d22 { top: 38%; left: 48%; width: 3px;  height: 3px; background: var(--parchment);      animation: drift-b 9s  ease-in-out infinite; }

@keyframes drift-a {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25%      { transform: translate(18px, -12px) rotate(8deg); }
    50%      { transform: translate(-8px, -22px) rotate(-4deg); }
    75%      { transform: translate(-14px, 8px) rotate(6deg); }
}

@keyframes drift-b {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33%      { transform: translate(-20px, 14px) rotate(-10deg); }
    66%      { transform: translate(12px, -18px) rotate(8deg); }
}

@keyframes drift-c {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(16px, 24px); }
}

@keyframes drift-d {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20%      { transform: translate(10px, -16px) rotate(5deg); }
    40%      { transform: translate(-14px, -6px) rotate(-8deg); }
    60%      { transform: translate(-6px, 18px) rotate(4deg); }
    80%      { transform: translate(14px, 10px) rotate(-3deg); }
}

/* ===========================================================================
   Site title (appears once, slightly rotated)
   =========================================================================== */
.site-mark {
    position: fixed;
    top: 32px;
    left: 70px;
    z-index: 60;
    transform: rotate(-2.5deg);
    transform-origin: left top;
    pointer-events: none;
}

.site-title {
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--parchment);
    letter-spacing: 0.06em;
    line-height: 1;
}

.site-meta {
    display: block;
    margin-top: 4px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--dusty-slate);
}

/* ===========================================================================
   Side navigation: thin vertical line + botanical rosette dots
   =========================================================================== */
.side-nav {
    position: fixed;
    top: 0;
    left: 28px;
    height: 100vh;
    width: 24px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 60px;
    pointer-events: none;
}

.side-nav .nav-line {
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 50%;
    width: 1px;
    background: linear-gradient(
        to bottom,
        rgba(184, 196, 208, 0) 0%,
        rgba(139, 107, 74, 0.5) 18%,
        rgba(139, 107, 74, 0.5) 82%,
        rgba(184, 196, 208, 0) 100%
    );
}

.nav-dot {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--antique-bronze);
    background: var(--abyssal-blue);
    border-radius: 50%;
    pointer-events: auto;
    transition: color 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nav-dot:hover {
    color: var(--dried-rose);
    transform: scale(1.25);
}

.nav-dot.active {
    color: var(--parchment);
    transform: scale(1.15);
}

/* ===========================================================================
   Chamber (section) base
   =========================================================================== */
.chamber {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 120px 80px 100px 120px;
    overflow: hidden;
    background: var(--abyssal-blue);
}

.chamber + .chamber {
    border-top: 1px solid rgba(139, 107, 74, 0.07);
}

.chamber-title {
    font-family: var(--font-display);
    font-size: clamp(48px, 7.4vw, 96px);
    color: var(--parchment);
    letter-spacing: 0.03em;
    line-height: 1.05;
    transform: rotate(-1.5deg);
    margin-bottom: 28px;
    max-width: 60%;
}

.chamber-tagline {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 17px;
    color: var(--silver-mist);
    letter-spacing: 0.02em;
    max-width: 460px;
    margin-bottom: 60px;
    transform: rotate(-0.5deg);
}

.chamber-heading {
    font-family: var(--font-accent);
    font-size: clamp(28px, 3vw, 40px);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-teal);
    line-height: 1.05;
    margin-bottom: 32px;
}

.chamber-body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.65;
    color: var(--silver-mist);
    margin-bottom: 18px;
    max-width: 52ch;
}

.chamber-caption {
    margin-top: 28px;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--dusty-slate);
}

/* ===========================================================================
   Primary blob shell
   =========================================================================== */
.primary-blob {
    position: absolute;
    aspect-ratio: 1.05 / 1;
    z-index: 5;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.primary-blob .blob-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
    cursor: default;
}

.blob-inner::before {
    /* The clipped fill surface of the blob */
    content: "";
    position: absolute;
    inset: 0;
    background: var(--parchment);
    transition: background 0.5s ease, filter 0.5s ease;
    z-index: 0;
}

/* Section 1 -- Kunsthaus blob, parchment fill, right-of-center */
.primary-blob-1 {
    top: 20%;
    right: 6%;
    width: 62%;
    max-width: 760px;
}

.primary-blob-1 .blob-inner::before {
    clip-path: url(#blob-kunsthaus);
    background: var(--parchment);
}

/* Section 2 -- Selfridges dome, deep indigo, left side */
.chamber-2 .primary-blob,
.primary-blob-2 {
    top: 16%;
    left: 4%;
    width: 58%;
    max-width: 720px;
}

.primary-blob-2 .blob-inner::before {
    clip-path: url(#blob-selfridges);
    background: var(--deep-indigo);
}

/* Section 3 -- Heydar Aliyev wide, low, center-right, parchment */
.primary-blob-3 {
    top: 18%;
    right: 4%;
    left: 14%;
    width: auto;
    max-width: none;
    aspect-ratio: 1.8 / 1;
}

.primary-blob-3 .blob-inner::before {
    clip-path: url(#blob-heydar);
    background: var(--parchment);
}

/* Section 4 -- Blur Building, almost full viewport, gradient fill */
.primary-blob-4 {
    top: 8%;
    left: 6%;
    right: 6%;
    width: auto;
    max-width: none;
    aspect-ratio: 1.6 / 1;
}

.primary-blob-4 .blob-inner::before {
    clip-path: url(#blob-blur);
    background: linear-gradient(135deg, var(--abyssal-blue) 0%, var(--deep-indigo) 70%, #1A2A45 100%);
    filter: blur(0.4px);
}

/* ---------- Blob border (animated enso stroke) ---------- */
.blob-border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 4;
    pointer-events: none;
}

.border-path {
    fill: none;
    stroke: var(--antique-bronze);
    stroke-width: 0.6;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    transition: stroke 0.4s ease, stroke-width 0.4s ease;
    /* Initial state: hidden, set inline by JS via dasharray/dashoffset */
}

/* Section 4 border filtered for diffuse edge */
.blob-border-blur .border-path {
    stroke-width: 0.5;
    opacity: 0.6;
}

/* Hover: enso border breathes from bronze to dried rose */
.primary-blob:hover .border-path {
    stroke: var(--dried-rose);
    stroke-width: 0.9;
}

.primary-blob:hover .washi-layer rect {
    opacity: 0.075 !important;
}

/* ---------- Washi (paper noise) inside light blobs ---------- */
.washi-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.6s ease;
}

/* Apply a subtle 2px stroke version to primary blobs for visual weight */
.primary-blob .border-path {
    stroke-width: 0.7;
}

/* Increase visual stroke on the actual rendered output */
.primary-blob .blob-border {
    transform: scale(1);
}

/* ===========================================================================
   Specimen plates (botanical illustrations inside blobs)
   =========================================================================== */
.specimen {
    position: absolute;
    z-index: 2;
}

.specimen-strokes path,
.specimen-strokes line,
.specimen-strokes circle,
.specimen-strokes ellipse {
    transition: stroke 0.4s ease;
}

.specimen-ume {
    width: 56%;
    top: 14%;
    left: 22%;
    color: var(--midnight-ink);
}

.specimen-pine {
    width: 70%;
    top: 12%;
    left: 14%;
    color: var(--muted-teal);
}

.specimen-sakura {
    width: 86%;
    top: 8%;
    left: 7%;
    color: var(--parchment);
    opacity: 0.9;
}

/* ===========================================================================
   Section 1 specifics
   =========================================================================== */
.chamber-1 {
    z-index: 1;
}

.mon-roundel {
    position: absolute;
    top: 14%;
    left: 14%;
    z-index: 6;
    color: var(--muted-teal);
    animation: kamon-rotate 60s linear infinite;
    opacity: 0.55;
}

@keyframes kamon-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ===========================================================================
   Section 2 specifics -- The Collection
   =========================================================================== */
.chamber-2 {
    background: var(--abyssal-blue);
}

.section-divider {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
}

.mon-kamon {
    color: var(--antique-bronze);
    animation: kamon-rotate 60s linear infinite;
    opacity: 0.7;
}

.primary-blob-2 .blob-inner {
    color: var(--silver-mist);
}

.blob-content {
    position: absolute;
    inset: 16% 14% 14% 16%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--silver-mist);
}

.primary-blob-2 .chamber-heading {
    color: var(--muted-teal);
}

.primary-blob-2 .chamber-body {
    color: var(--silver-mist);
}

/* Secondary blob (pine) -- right side, smaller */
.secondary-blob {
    position: absolute;
    z-index: 5;
    aspect-ratio: 0.9 / 1;
}

.secondary-blob .blob-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.secondary-blob .blob-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--frost-sage);
    z-index: 0;
}

.secondary-blob-2 {
    top: 22%;
    right: 6%;
    width: 30%;
    max-width: 380px;
}

.secondary-blob-2 .blob-inner::before {
    clip-path: url(#blob-secondary-a);
}

.border-path-thin {
    stroke-width: 0.4;
}

/* Connecting vine */
.vine {
    position: absolute;
    top: 30%;
    left: 30%;
    width: 60%;
    height: 50%;
    z-index: 4;
    pointer-events: none;
    overflow: visible;
}

.vine-path {
    fill: none;
    stroke: var(--antique-bronze);
    stroke-width: 1.2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    /* JS will set dasharray/offset */
}

.vine-leaves {
    opacity: 0;
    transition: opacity 1.2s ease 1.5s;
}

.vine.vine-active .vine-leaves {
    opacity: 1;
}

/* ===========================================================================
   Section 3 specifics -- The Study
   =========================================================================== */
.chamber-3 {
    padding-bottom: 140px;
}

.rotated-quote {
    position: absolute;
    top: 50%;
    left: 70px;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    font-family: var(--font-accent);
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--antique-bronze);
    white-space: nowrap;
    z-index: 6;
    opacity: 0.85;
}

.study-grid {
    position: absolute;
    inset: 14% 8% 14% 14%;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
    z-index: 2;
}

.study-text {
    color: var(--midnight-ink);
}

.study-heading {
    color: var(--antique-bronze);
    margin-bottom: 22px;
}

.study-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: var(--midnight-ink);
    margin-bottom: 14px;
    max-width: 38ch;
}

.study-body em {
    color: var(--dried-rose);
    font-style: italic;
}

.study-sketches {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    justify-content: flex-end;
}

.inline-sketch {
    width: 38%;
    min-width: 110px;
    color: var(--midnight-ink);
}

.sketch-bamboo {
    width: 36%;
}

.sketch-wisteria {
    width: 60%;
}

/* ===========================================================================
   Section 4 specifics -- The Dissolution
   =========================================================================== */
.chamber-4 {
    background: var(--abyssal-blue);
    min-height: 110vh;
    padding-bottom: 140px;
}

.chamber-4 .primary-blob {
    aspect-ratio: 1.55 / 1;
}

.specimen-sakura {
    width: 90%;
    top: 6%;
    left: 5%;
}

.closing-phrase {
    position: absolute;
    bottom: 80px;
    right: 10%;
    z-index: 7;
    text-align: right;
    transform: rotate(-2deg);
    transform-origin: right center;
}

.closing-text {
    font-family: var(--font-display);
    font-size: clamp(42px, 5vw, 72px);
    color: var(--parchment);
    letter-spacing: 0.04em;
    line-height: 1.05;
}

.closing-meta {
    margin-top: 14px;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--dusty-slate);
}

/* ===========================================================================
   Border-animate: initial state for IntersectionObserver-driven reveal
   =========================================================================== */
.border-path,
.vine-path {
    stroke-dasharray: var(--path-length, 1000);
    stroke-dashoffset: var(--path-length, 1000);
    transition: stroke-dashoffset var(--draw-duration, 2s) cubic-bezier(0.4, 0, 0.2, 1);
}

.border-active .border-path {
    /* Permanent enso gap: leave 8px offset (set by JS as well) */
    stroke-dashoffset: var(--path-final, 8);
}

.vine-active .vine-path {
    stroke-dashoffset: 0;
}

/* ===========================================================================
   Responsive adjustments
   =========================================================================== */
@media (max-width: 1024px) {
    .chamber {
        padding: 110px 50px 90px 88px;
    }

    .primary-blob-1 { width: 76%; right: 4%; top: 26%; }
    .primary-blob-2 { width: 76%; left: 4%;  top: 22%; }
    .primary-blob-3 { left: 8%;  right: 4%;  top: 22%; }
    .primary-blob-4 { left: 4%;  right: 4%;  top: 12%; }

    .secondary-blob-2 { width: 36%; top: 60%; right: 4%; }

    .chamber-title {
        max-width: 80%;
    }

    .study-grid {
        inset: 12% 6% 12% 12%;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .study-sketches {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    body {
        font-size: 15px;
    }

    .chamber {
        padding: 96px 24px 80px 64px;
    }

    .side-nav {
        left: 14px;
        gap: 36px;
    }

    .site-mark {
        top: 20px;
        left: 60px;
    }

    .site-title { font-size: 14px; }
    .site-meta  { font-size: 9px;  }

    .chamber-title {
        font-size: clamp(36px, 11vw, 60px);
        max-width: 100%;
    }

    .chamber-heading { font-size: 22px; }

    .primary-blob-1 { width: 90%; right: 2%; top: 28%; }
    .primary-blob-2 { width: 90%; left: 2%;  top: 26%; }
    .primary-blob-3 { left: 2%;   right: 2%; top: 24%; aspect-ratio: 1.3 / 1; }
    .primary-blob-4 { left: 2%;   right: 2%; top: 14%; aspect-ratio: 1.3 / 1; }

    .secondary-blob-2 { width: 56%; right: 4%; top: 64%; }

    .blob-content { inset: 18% 12% 18% 16%; }

    .study-body { font-size: 14px; }

    .rotated-quote { font-size: 14px; left: 50px; }

    .closing-text { font-size: clamp(32px, 8vw, 52px); }

    .mon-roundel { top: 8%; left: 30%; }
}