/* ============================================================
   mujun.studio — Earthy Botanical Pixel-Art Parallax
   Palette: Burgundy-Cream with Moss accents
   ============================================================ */

/* --- Color Reference (from DESIGN.md) ---
   #3D2817 - Primary Dark / Deep Burgundy
   #6B4423 - Primary Warm / Burnt Sienna
   #8B6F47 - Secondary Warm / Warm Tan
   #D4A574 - Accent Warm / Golden Earth
   #E8D4C4 - Primary Light / Cream
   #F2EBE3 - Background / Natural Off-White
   #5A6B4A - Accent Green / Moss
   #7A8B6A - Accent Green 2 / Sage
   #F4D4A8 - Highlight / Pale Gold
   #5C2E1D - Pixel Accent / Deep Maroon
   #4A3728 - Body text
--- */

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden;
}

body {
    background-color: #F2EBE3;
    color: #4A3728;
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.015em;
    overflow-x: hidden;
}

/* --- Typography --- */
h1, h2, h3, .section-heading {
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
}

.section-heading {
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    color: #3D2817;
    margin-bottom: 1.2rem;
}

.annotation-heading {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-weight: 500;
    font-size: clamp(1rem, 2.5vw, 1.8rem);
    color: #6B4423;
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.body-text {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.8vw, 1.125rem);
    color: #4A3728;
    line-height: 1.7;
    letter-spacing: 0.015em;
}

.body-text-sm {
    font-size: clamp(0.8rem, 1.4vw, 0.95rem);
    line-height: 1.6;
}

.caveat-annotation {
    font-family: 'Caveat', cursive;
    font-weight: 500;
    color: #5C2E1D;
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.caveat-annotation.visible {
    opacity: 0.6;
}

.specimen-label {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-weight: 500;
    font-size: clamp(0.85rem, 1.6vw, 1.1rem);
    color: #6B4423;
    letter-spacing: 0.04em;
    margin-top: 0.8rem;
}

.specimen-common-name {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: 0.85rem;
    color: #8B6F47;
    font-style: italic;
    margin-bottom: 0.6rem;
}

.card-label {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 11px;
    color: #8B6F47;
    display: block;
    margin-top: 4px;
    text-align: center;
}

/* --- Section Layout --- */
.section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.section-threshold {
    height: 100vh;
    min-height: 600px;
}

.section-garden {
    height: 120vh;
    min-height: 800px;
}

.section-overgrowth {
    height: 120vh;
    min-height: 800px;
}

.section-nomenclature {
    height: 120vh;
    min-height: 800px;
}

.section-roots {
    height: 120vh;
    min-height: 800px;
}

.section-spiral {
    height: 120vh;
    min-height: 800px;
}

.section-archive {
    height: 120vh;
    min-height: 800px;
}

.section-return {
    height: 80vh;
    min-height: 500px;
}

/* --- Parallax Layers --- */
.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
}

.layer-bg {
    z-index: 1;
}

.layer-content {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.layer-fg {
    z-index: 3;
    pointer-events: none;
}

/* --- Background Botanical SVGs --- */
.bg-botanical {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- Pixel Grid Overlay --- */
.pixel-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(to right, #5A6B4A 1px, transparent 1px),
        linear-gradient(to bottom, #7A8B6A 1px, transparent 1px);
    background-size: 16px 16px;
    opacity: 0.03;
}

.pixel-grid-overlay.crosshatch {
    opacity: 0.02;
    background-size: 8px 8px;
}

/* --- Organic Blob Shapes --- */
.blob {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 2.5rem;
    animation: blobBreathe 10s ease-in-out infinite;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.blob::before {
    content: '';
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    border-radius: 42% 58% 63% 37% / 45% 55% 45% 55%;
    z-index: -1;
    animation: blobMorph 12s ease-in-out infinite alternate;
}

.blob:hover {
    transform: scale(1.03);
    filter: saturate(1.02);
}

@keyframes blobBreathe {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.02) rotate(0.5deg); }
    50% { transform: scale(0.98) rotate(-0.5deg); }
    75% { transform: scale(1.01) rotate(0.3deg); }
}

@keyframes blobMorph {
    0% { border-radius: 42% 58% 63% 37% / 45% 55% 45% 55%; }
    25% { border-radius: 55% 45% 50% 50% / 38% 62% 48% 52%; }
    50% { border-radius: 48% 52% 40% 60% / 55% 45% 58% 42%; }
    75% { border-radius: 38% 62% 55% 45% / 48% 52% 40% 60%; }
    100% { border-radius: 45% 55% 48% 52% / 42% 58% 55% 45%; }
}

/* --- Section 1: The Threshold --- */
.section-threshold {
    background: linear-gradient(160deg, #F2EBE3 0%, #E8D4C4 50%, #F2EBE3 100%);
}

.section-threshold .layer-content {
    flex-direction: row;
    gap: 3rem;
    flex-wrap: wrap;
}

.threshold-blob-left {
    max-width: 360px;
}

.threshold-blob-left::before {
    background-color: rgba(61, 40, 23, 0.55);
}

.title-mujun {
    font-family: 'Courier Prime', monospace;
    font-weight: 700;
    font-size: clamp(2.4rem, 7vw, 5rem);
    color: #E8D4C4;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
    text-align: center;
}

.threshold-blob-right {
    max-width: 280px;
}

.threshold-blob-right::before {
    background-color: rgba(232, 212, 196, 0.65);
}

.title-studio {
    font-family: 'Courier Prime', monospace;
    font-weight: 700;
    font-size: clamp(2rem, 5.5vw, 4rem);
    color: #3D2817;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
    text-align: center;
}

/* Pixel seed (hero) */
.pixel-seed {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: seedRotate 20s linear infinite;
    image-rendering: pixelated;
}

.pixel-seed svg {
    image-rendering: pixelated;
}

@keyframes seedRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Pixel leaves (foreground) */
.pixel-leaf {
    position: absolute;
    opacity: 0;
    transition: opacity 0.4s ease-out;
    image-rendering: pixelated;
}

.pixel-leaf svg {
    image-rendering: pixelated;
}

.pixel-leaf.visible {
    opacity: 0.85;
}

.pixel-leaf-1 {
    top: 20%;
    right: 8%;
    transform: rotate(-15deg);
}

.pixel-leaf-2 {
    bottom: 25%;
    left: 6%;
    transform: rotate(22deg);
}

.pixel-leaf-3 {
    top: 60%;
    right: 15%;
    transform: rotate(-8deg);
}

/* Section indicator */
.section-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    opacity: 0.6;
    background: rgba(242, 235, 227, 0.7);
    padding: 4px;
    border-radius: 2px;
}

.indicator-cell {
    fill: #E8D4C4;
    stroke: #8B6F47;
    stroke-width: 0.5;
    transition: fill 0.3s ease;
}

.indicator-cell.active {
    fill: #5C2E1D;
}

/* --- Section 2: The Garden Grid --- */
.section-garden {
    background: linear-gradient(170deg, #F2EBE3 0%, #E8D4C4 40%, #F2EBE3 100%);
}

.section-garden .layer-content {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
    justify-content: center;
    padding: 6rem 3rem;
}

.blob-garden {
    flex: 1;
    min-width: 220px;
    max-width: 360px;
}

.blob-garden-left::before {
    background-color: rgba(212, 165, 116, 0.35);
}

.blob-garden-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.blob-garden-center::before {
    background-color: rgba(232, 212, 196, 0.4);
}

.blob-garden-right::before {
    background-color: rgba(138, 111, 71, 0.25);
}

.pixel-flower {
    image-rendering: pixelated;
}

.specimen-list {
    list-style: none;
    padding: 0;
}

.specimen-list li {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.8rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(139, 111, 71, 0.15);
}

.specimen-name {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    font-size: 0.85rem;
    color: #6B4423;
    letter-spacing: 0.04em;
    font-style: italic;
}

.specimen-common {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 11px;
    color: #8B6F47;
}

/* Pixel seedpods (foreground) */
.pixel-seedpod {
    position: absolute;
    image-rendering: pixelated;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

.pixel-seedpod svg {
    image-rendering: pixelated;
}

.pixel-seedpod.visible {
    opacity: 0.8;
}

.pixel-seedpod-1 {
    top: 15%;
    left: 12%;
    transform: rotate(12deg);
}

.pixel-seedpod-2 {
    bottom: 20%;
    right: 10%;
    transform: rotate(-18deg);
}

/* --- Section 3: The Overgrowth --- */
.section-overgrowth {
    background: linear-gradient(175deg, #E8D4C4 0%, #F2EBE3 60%, #E8D4C4 100%);
}

.section-overgrowth .layer-content {
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 6rem 3rem;
}

.blob-overgrowth-main {
    flex: 0 0 auto;
    max-width: 500px;
}

.blob-overgrowth-main::before {
    background-color: rgba(122, 139, 106, 0.3);
}

.pixel-fern {
    image-rendering: pixelated;
}

.overgrowth-text {
    max-width: 400px;
    padding: 2rem;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.overgrowth-text.visible {
    opacity: 1;
    transform: translateY(0);
}

.annotation-1 {
    position: absolute;
    top: 18%;
    right: 12%;
    font-size: 1.8rem;
    transform: rotate(-8deg);
}

.annotation-2 {
    position: absolute;
    bottom: 25%;
    left: 5%;
    font-size: 1.2rem;
    transform: rotate(14deg);
}

.annotation-3 {
    position: absolute;
    top: 55%;
    right: 6%;
    font-size: 1rem;
    transform: rotate(-4deg);
}

/* Foreground leaves in Overgrowth */
.pixel-leaf-fg-1 {
    position: absolute;
    top: 10%;
    right: 5%;
    image-rendering: pixelated;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pixel-leaf-fg-1.visible {
    opacity: 0.75;
}

.pixel-leaf-fg-1 svg {
    image-rendering: pixelated;
}

.pixel-leaf-fg-2 {
    position: absolute;
    bottom: 12%;
    left: 8%;
    image-rendering: pixelated;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pixel-leaf-fg-2.visible {
    opacity: 0.7;
}

.pixel-leaf-fg-2 svg {
    image-rendering: pixelated;
}

/* --- Section 4: The Nomenclature --- */
.section-nomenclature {
    background: linear-gradient(165deg, #F2EBE3 0%, #E8D4C4 100%);
}

.section-nomenclature .layer-content {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: center;
    align-items: flex-start;
    padding: 6rem 3rem;
}

.nomenclature-blob {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1.8rem;
    animation: blobBreathe 10s ease-in-out infinite;
    transition: transform 0.4s ease, filter 0.4s ease;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.nomenclature-blob::before {
    content: '';
    position: absolute;
    top: -8%;
    left: -8%;
    width: 116%;
    height: 116%;
    border-radius: 50% 50% 45% 55% / 48% 52% 50% 50%;
    z-index: -1;
    animation: blobMorph 14s ease-in-out infinite alternate;
}

.nomenclature-blob.visible {
    opacity: 1;
    transform: translateY(0);
}

.nomenclature-blob:hover {
    transform: scale(1.03);
    filter: saturate(1.02);
}

.nomen-blob-1 {
    max-width: 260px;
}
.nomen-blob-1::before {
    background-color: rgba(212, 165, 116, 0.3);
}

.nomen-blob-2 {
    max-width: 240px;
    margin-top: 3rem;
}
.nomen-blob-2::before {
    background-color: rgba(122, 139, 106, 0.25);
}

.nomen-blob-3 {
    max-width: 230px;
}
.nomen-blob-3::before {
    background-color: rgba(139, 111, 71, 0.28);
}

.nomen-blob-4 {
    max-width: 250px;
    margin-top: 2rem;
}
.nomen-blob-4::before {
    background-color: rgba(232, 212, 196, 0.4);
}

.nomen-blob-5 {
    max-width: 220px;
}
.nomen-blob-5::before {
    background-color: rgba(90, 107, 74, 0.22);
}

.pixel-plant-small {
    image-rendering: pixelated;
}

/* --- Section 5: The Root Depths --- */
.section-roots {
    background: linear-gradient(180deg, #E8D4C4 0%, #D4A574 30%, #E8D4C4 70%, #F2EBE3 100%);
}

.section-roots .layer-content {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 5rem 3rem;
    align-items: center;
    justify-content: center;
}

.blob-roots-main {
    max-width: 520px;
}

.blob-roots-main::before {
    background-color: rgba(107, 68, 35, 0.25);
}

.pixel-roots {
    image-rendering: pixelated;
}

.roots-annotations {
    flex: 1;
    min-width: 280px;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.roots-note-1 {
    font-size: 1.4rem;
    transform: rotate(-6deg);
}

.roots-note-2 {
    font-size: 1.1rem;
    transform: rotate(10deg);
    align-self: flex-end;
}

.roots-note-3 {
    font-size: 1.2rem;
    transform: rotate(-3deg);
}

.roots-text {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.roots-text.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Soil particles */
.soil-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #8B6F47;
    opacity: 0;
    image-rendering: pixelated;
}

.soil-particle-1 { top: 15%; left: 20%; width: 3px; height: 3px; background: #6B4423; }
.soil-particle-2 { top: 30%; right: 25%; width: 4px; height: 4px; background: #8B6F47; }
.soil-particle-3 { top: 50%; left: 10%; width: 3px; height: 3px; background: #D4A574; }
.soil-particle-4 { top: 65%; right: 15%; width: 5px; height: 5px; background: #6B4423; }
.soil-particle-5 { top: 25%; right: 8%; width: 3px; height: 3px; background: #8B6F47; }
.soil-particle-6 { top: 72%; left: 30%; width: 4px; height: 4px; background: #D4A574; }
.soil-particle-7 { top: 40%; left: 5%; width: 3px; height: 3px; background: #5C2E1D; }
.soil-particle-8 { top: 80%; right: 35%; width: 4px; height: 4px; background: #8B6F47; }

/* --- Section 6: The Growth Spiral --- */
.section-spiral {
    background: linear-gradient(155deg, #F2EBE3 0%, #E8D4C4 50%, #F2EBE3 100%);
}

.section-spiral .layer-content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 5rem 3rem;
}

.blob-spiral-tl {
    max-width: 450px;
    align-self: flex-start;
    margin-left: 5%;
}

.blob-spiral-tl::before {
    background-color: rgba(232, 212, 196, 0.4);
}

.blob-spiral-br {
    max-width: 350px;
    align-self: flex-end;
    margin-right: 5%;
}

.blob-spiral-br::before {
    background-color: rgba(212, 165, 116, 0.3);
}

.spiral-container {
    position: relative;
    width: 400px;
    height: 400px;
}

.spiral-item {
    position: absolute;
    image-rendering: pixelated;
    opacity: 0;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    cursor: pointer;
}

.spiral-item svg {
    image-rendering: pixelated;
}

.spiral-item.visible {
    opacity: 1;
}

.spiral-item:active {
    animation: pixelPulse 0.1s ease-out;
}

@keyframes pixelPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Position spiral items in a circular pattern */
.spiral-item-0  { top: 5%; left: 45%; }
.spiral-item-1  { top: 12%; left: 70%; }
.spiral-item-2  { top: 30%; left: 82%; }
.spiral-item-3  { top: 50%; left: 80%; }
.spiral-item-4  { top: 68%; left: 68%; }
.spiral-item-5  { top: 78%; left: 45%; }
.spiral-item-6  { top: 68%; left: 22%; }
.spiral-item-7  { top: 50%; left: 12%; }
.spiral-item-8  { top: 30%; left: 10%; }
.spiral-item-9  { top: 12%; left: 22%; }
.spiral-item-10 { top: 35%; left: 40%; }
.spiral-item-11 { top: 55%; left: 50%; }

.spiral-note {
    font-size: 1.5rem;
    transform: rotate(6deg);
}

/* --- Section 7: The Archive --- */
.section-archive {
    background: linear-gradient(170deg, #F2EBE3 0%, #E8D4C4 100%);
}

.archive-paper-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(to right, #F4D4A8 1px, transparent 1px),
        linear-gradient(to bottom, #D4A574 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.04;
}

.section-archive .layer-content {
    flex-direction: column;
    gap: 2rem;
    padding: 5rem 3rem;
}

.blob-archive-main {
    max-width: 800px;
    width: 100%;
}

.blob-archive-main::before {
    background-color: rgba(232, 212, 196, 0.35);
}

.specimen-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    padding: 1rem;
}

.specimen-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.8rem;
    cursor: pointer;
    transition: transform 0.1s ease;
    image-rendering: pixelated;
}

.specimen-card svg {
    image-rendering: pixelated;
}

.specimen-card:active {
    animation: pixelPulse 0.1s ease-out;
}

.archive-text {
    max-width: 600px;
    text-align: center;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.archive-text.visible {
    opacity: 1;
    transform: translateY(0);
}

.archive-note-1 {
    position: absolute;
    top: 10%;
    right: 8%;
    font-size: 1.3rem;
    transform: rotate(12deg);
}

.archive-note-2 {
    position: absolute;
    bottom: 15%;
    left: 6%;
    font-size: 1.1rem;
    transform: rotate(-9deg);
}

/* --- Section 8: The Return --- */
.section-return {
    background: linear-gradient(180deg, #F2EBE3 0%, #E8D4C4 50%, #F2EBE3 100%);
}

.section-return .layer-content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

.blob-return-main {
    max-width: 560px;
    text-align: center;
}

.blob-return-main::before {
    background-color: rgba(212, 165, 116, 0.3);
}

.return-quote {
    font-family: 'Caveat', cursive;
    font-weight: 600;
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
    color: #3D2817;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.return-attribution {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 13px;
    color: #8B6F47;
}

.return-title {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.return-title.visible {
    opacity: 0.05;
}

.return-title span {
    font-family: 'Courier Prime', monospace;
    font-weight: 700;
    font-size: clamp(3rem, 8vw, 6rem);
    color: #3D2817;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* --- Background botanical final fade --- */
.final-botanical {
    transition: opacity 1.5s ease-out;
}

/* --- Scroll-triggered animations --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for annotations */
.annotation-1.visible { transition-delay: 0.1s; }
.annotation-2.visible { transition-delay: 0.25s; }
.annotation-3.visible { transition-delay: 0.4s; }

.roots-note-1.visible { transition-delay: 0.1s; }
.roots-note-2.visible { transition-delay: 0.2s; }
.roots-note-3.visible { transition-delay: 0.35s; }

.archive-note-1.visible { transition-delay: 0.15s; }
.archive-note-2.visible { transition-delay: 0.3s; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .section-threshold .layer-content {
        flex-direction: column;
        gap: 1.5rem;
    }

    .threshold-blob-left,
    .threshold-blob-right {
        max-width: 260px;
    }

    .section-garden .layer-content {
        flex-direction: column;
        padding: 4rem 1.5rem;
    }

    .blob-garden {
        max-width: 100%;
    }

    .section-overgrowth .layer-content {
        flex-direction: column;
        padding: 4rem 1.5rem;
    }

    .blob-overgrowth-main {
        max-width: 100%;
    }

    .pixel-fern {
        width: 260px;
        height: 260px;
    }

    .section-nomenclature .layer-content {
        gap: 1.5rem;
        padding: 4rem 1.5rem;
    }

    .nomenclature-blob {
        max-width: 100% !important;
        margin-top: 0 !important;
    }

    .section-roots .layer-content {
        flex-direction: column;
        padding: 4rem 1.5rem;
    }

    .blob-roots-main {
        max-width: 100%;
    }

    .pixel-roots {
        width: 300px;
        height: 300px;
    }

    .spiral-container {
        width: 280px;
        height: 280px;
    }

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

    .annotation-1,
    .annotation-2,
    .annotation-3 {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 0.5rem 0;
    }
}

@media (max-width: 480px) {
    .title-mujun {
        font-size: clamp(2rem, 10vw, 3.5rem);
    }

    .title-studio {
        font-size: clamp(1.6rem, 8vw, 2.8rem);
    }

    .specimen-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .spiral-container {
        width: 220px;
        height: 220px;
    }
}