/* ============================================================
   muhan.studio
   Glassmorphism + leather-craft, organic-flow tutorial
   Palette: #FFF5EB #F2D9C7 #D4A96A #B8CCBA #3B2E25 #7A6455
            #C9B8D9 #E8DDD3 #F8F0E6
   Typography: Space Grotesk, Inter, IBM Plex Mono
   ============================================================ */

:root {
    --c-cream: #FFF5EB;
    --c-blush: #F2D9C7;
    --c-brass: #D4A96A;
    --c-sage: #B8CCBA;
    --c-espresso: #3B2E25;
    --c-walnut: #7A6455;
    --c-lavender: #C9B8D9;
    --c-pearl: #E8DDD3;
    --c-parchment: #F8F0E6;
    --c-suede: #D4B896;

    --glass-bg: rgba(255, 245, 235, 0.35);
    --glass-bg-strong: rgba(255, 245, 235, 0.55);
    --glass-border: rgba(232, 221, 211, 0.55);
    --glass-border-warm: rgba(212, 169, 106, 0.5);

    --font-head: "Space Grotesk", "Inter", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    color: var(--c-espresso);
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.05vw + 0.7rem, 1.15rem);
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
    background: var(--c-parchment);
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(1200px 800px at 12% 6%, rgba(201, 184, 217, 0.35), transparent 60%),
        radial-gradient(900px 700px at 88% 40%, rgba(212, 169, 106, 0.22), transparent 65%),
        radial-gradient(1000px 800px at 30% 90%, rgba(184, 204, 186, 0.28), transparent 60%),
        linear-gradient(180deg, #F8F0E6 0%, #F2D9C7 60%, #FFF5EB 100%);
    background-attachment: fixed;
}

/* ------------------------------------------------------------
   Depth layers (z-0 leather, z-1 blobs, z-2 content)
   ------------------------------------------------------------ */

.depth-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.depth-leather {
    z-index: 0;
    opacity: 0.08;
    background-image:
        repeating-linear-gradient(15deg,
            rgba(59, 46, 37, 0.12) 0px,
            rgba(59, 46, 37, 0.12) 1px,
            transparent 1px,
            transparent 4px),
        repeating-linear-gradient(105deg,
            rgba(122, 100, 85, 0.08) 0px,
            rgba(122, 100, 85, 0.08) 1px,
            transparent 1px,
            transparent 6px),
        radial-gradient(circle at 18% 22%, rgba(122, 100, 85, 0.45) 0px, rgba(122, 100, 85, 0.45) 2px, transparent 3px),
        radial-gradient(circle at 64% 38%, rgba(122, 100, 85, 0.45) 0px, rgba(122, 100, 85, 0.45) 2px, transparent 3px),
        radial-gradient(circle at 82% 78%, rgba(59, 46, 37, 0.35) 0px, rgba(59, 46, 37, 0.35) 1.5px, transparent 2.5px),
        radial-gradient(circle at 36% 86%, rgba(122, 100, 85, 0.4) 0px, rgba(122, 100, 85, 0.4) 2px, transparent 3px),
        linear-gradient(135deg, rgba(122, 100, 85, 0.18), rgba(59, 46, 37, 0.1));
    background-size: 14px 14px, 22px 22px, 80px 80px, 100px 100px, 60px 60px, 120px 120px, 100% 100%;
    transition: opacity 1.2s var(--ease-out);
}

.depth-leather.deep {
    opacity: 0.13;
}

.depth-leather.full {
    opacity: 0.22;
}

.depth-blobs {
    z-index: 1;
    overflow: hidden;
    filter: blur(40px);
    opacity: 0.85;
}

.blob {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

.blob-1 {
    top: 6%; left: -8%;
    width: 380px; height: 380px;
    background: radial-gradient(circle at 35% 30%, var(--c-lavender), transparent 70%);
    animation: drift1 28s ease-in-out infinite alternate;
}
.blob-2 {
    top: 28%; right: -6%;
    width: 320px; height: 320px;
    background: radial-gradient(circle at 40% 40%, var(--c-blush), transparent 70%);
    animation: drift2 34s ease-in-out infinite alternate;
}
.blob-3 {
    top: 52%; left: 10%;
    width: 420px; height: 420px;
    background: radial-gradient(circle at 50% 50%, var(--c-sage), transparent 70%);
    animation: drift3 40s ease-in-out infinite alternate;
}
.blob-4 {
    top: 66%; right: 12%;
    width: 280px; height: 280px;
    background: radial-gradient(circle at 35% 50%, var(--c-brass), transparent 75%);
    opacity: 0.7;
    animation: drift4 32s ease-in-out infinite alternate;
}
.blob-5 {
    bottom: -6%; left: 30%;
    width: 360px; height: 360px;
    background: radial-gradient(circle at 50% 40%, var(--c-suede), transparent 70%);
    animation: drift5 38s ease-in-out infinite alternate;
}
.blob-6 {
    top: 80%; right: -4%;
    width: 300px; height: 300px;
    background: radial-gradient(circle at 40% 40%, var(--c-pearl), transparent 75%);
    animation: drift6 30s ease-in-out infinite alternate;
}

@keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(80px, 60px) scale(1.08); } }
@keyframes drift2 { from { transform: translate(0,0) scale(1.05); } to { transform: translate(-70px, 90px) scale(0.96); } }
@keyframes drift3 { from { transform: translate(0,0) scale(1); } to { transform: translate(60px, -70px) scale(1.1); } }
@keyframes drift4 { from { transform: translate(0,0) scale(0.95); } to { transform: translate(-50px, -60px) scale(1.05); } }
@keyframes drift5 { from { transform: translate(0,0) scale(1); } to { transform: translate(70px, -90px) scale(1.08); } }
@keyframes drift6 { from { transform: translate(0,0) scale(1.02); } to { transform: translate(-80px, -50px) scale(0.98); } }

/* ------------------------------------------------------------
   Ambient bubbles
   ------------------------------------------------------------ */

.ambient-bubbles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.bubble-ambient {
    position: absolute;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05) 55%, transparent 75%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        inset 0 -2px 6px rgba(212, 169, 106, 0.18),
        inset 2px 2px 4px rgba(255, 255, 255, 0.6);
    pointer-events: none;
    will-change: transform;
}

/* ------------------------------------------------------------
   Cursor bubble
   ------------------------------------------------------------ */

.cursor-bubble {
    position: fixed;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.7), rgba(212, 169, 106, 0.15) 60%, transparent 80%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        inset 0 -1px 4px rgba(212, 169, 106, 0.3),
        inset 1px 1px 2px rgba(255, 255, 255, 0.7);
    transform: translate3d(-50px, -50px, 0);
    pointer-events: none;
    z-index: 9999;
    transition: opacity 220ms var(--ease-out), width 200ms var(--ease-out), height 200ms var(--ease-out);
    opacity: 0;
}

.cursor-bubble.live { opacity: 0.9; }

.cursor-bubble.popping {
    animation: cursorPop 360ms var(--ease-out) forwards;
}

@keyframes cursorPop {
    0% { transform: translate3d(var(--bx,0), var(--by,0), 0) scale(1); opacity: 0.9; }
    100% { transform: translate3d(var(--bx,0), var(--by,0), 0) scale(0); opacity: 0; }
}

.micro-bubble {
    position: fixed;
    top: 0;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(212,169,106,0.4) 60%, transparent 90%);
    pointer-events: none;
    z-index: 9999;
}

/* ------------------------------------------------------------
   Floating navigation
   ------------------------------------------------------------ */

.floating-nav {
    position: fixed;
    top: 28px;
    right: 28px;
    width: 56px;
    height: 56px;
    z-index: 9000;
}

.nav-toggle {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: var(--c-espresso);
    cursor: pointer;
    box-shadow:
        inset 0 -2px 6px rgba(212, 169, 106, 0.18),
        inset 2px 2px 6px rgba(255, 255, 255, 0.55),
        0 8px 24px rgba(59, 46, 37, 0.12);
    display: grid;
    place-items: center;
    transition: transform 400ms var(--spring), border-color 300ms var(--ease-out), background 300ms var(--ease-out);
    z-index: 2;
}

.nav-toggle:hover {
    border-color: var(--glass-border-warm);
    background: var(--glass-bg-strong);
}

.floating-nav.open .nav-toggle {
    transform: rotate(45deg) scale(1.05);
    border-color: var(--glass-border-warm);
}

.nav-bubbles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.nav-bubble {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%) scale(0.4);
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    color: var(--c-espresso);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    display: grid;
    place-items: center;
    text-align: center;
    opacity: 0;
    box-shadow:
        inset 0 -2px 6px rgba(212, 169, 106, 0.18),
        inset 2px 2px 6px rgba(255, 255, 255, 0.55),
        0 6px 20px rgba(59, 46, 37, 0.1);
    transition: opacity 260ms var(--ease-out), transform 500ms var(--spring), border-color 260ms var(--ease-out);
}

.floating-nav.open .nav-bubble {
    opacity: 1;
    transform:
        translate(
            calc(-50% + var(--nav-x, 0px)),
            calc(-50% + var(--nav-y, 0px))
        ) scale(1);
    pointer-events: auto;
    transition-delay: var(--nav-delay, 0ms);
}

.nav-bubble:hover {
    border-color: var(--glass-border-warm);
    color: var(--c-brass);
}

/* ------------------------------------------------------------
   Foreground content layout
   ------------------------------------------------------------ */

.foreground {
    position: relative;
    z-index: 5;
}

.lesson {
    position: relative;
    width: 100%;
    padding: clamp(60px, 10vh, 120px) clamp(20px, 5vw, 80px);
    overflow: visible;
}

/* ------------------------------------------------------------
   Lesson 00 - The Workshop
   ------------------------------------------------------------ */

.lesson-00 {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 0;
}

.hero-glass {
    position: relative;
    width: min(86vw, 1100px);
    min-height: 78vh;
    border-radius: 48px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--hero-blur, 22px)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--hero-blur, 22px)) saturate(180%);
    box-shadow:
        inset 0 -3px 8px rgba(212, 169, 106, 0.18),
        inset 3px 3px 8px rgba(255, 255, 255, 0.55),
        0 30px 80px rgba(59, 46, 37, 0.18);
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: clamp(28px, 6vw, 80px);
}

.hero-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(201, 184, 217, 0.25), transparent 55%),
        radial-gradient(circle at 80% 70%, rgba(212, 169, 106, 0.18), transparent 55%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    text-align: center;
    color: var(--c-espresso);
    max-width: 680px;
}

.lesson-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-walnut);
    padding: 6px 14px;
    border: 1px solid rgba(122, 100, 85, 0.25);
    border-radius: 999px;
    background: rgba(255, 245, 235, 0.4);
    margin-bottom: 28px;
}

.hero-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(2.6rem, 7vw, 6rem);
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0 0 18px;
    background: linear-gradient(120deg, var(--c-espresso) 0%, var(--c-walnut) 60%, var(--c-brass) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-sub {
    font-family: var(--font-mono);
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    letter-spacing: 0.06em;
    color: var(--c-walnut);
    margin: 0 auto 28px;
    max-width: 480px;
}

.hero-divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-brass), transparent);
    margin: 0 auto 28px;
}

.hero-meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-walnut);
    opacity: 0.8;
    margin: 0 0 20px;
}

.scroll-cue {
    margin: 30px auto 0;
    width: 22px;
    height: 38px;
    border: 1px solid rgba(122, 100, 85, 0.4);
    border-radius: 12px;
    position: relative;
}

.scroll-cue-line {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 1px;
    height: 12px;
    background: var(--c-walnut);
    transform: translateX(-50%);
    opacity: 0.6;
}

.scroll-cue-dot {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--c-brass);
    animation: scrollCue 2.2s ease-in-out infinite;
}

@keyframes scrollCue {
    0%, 100% { transform: translate(-50%, 0); opacity: 1; }
    50% { transform: translate(-50%, 16px); opacity: 0.2; }
}

.hero-bubble-rise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.rise-bubble {
    position: absolute;
    bottom: -80px;
    left: var(--left, 50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), rgba(212,169,106,0.15) 60%, transparent 85%);
    border: 1px solid rgba(255,255,255,0.4);
    transform: translateX(-50%);
    animation: heroRise 12s var(--delay, 0s) ease-in-out infinite;
}

@keyframes heroRise {
    0% { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
    20% { opacity: 0.9; }
    100% { transform: translate(calc(-50% + 30px), -90vh) scale(1.1); opacity: 0; }
}

/* ------------------------------------------------------------
   Filament connectors
   ------------------------------------------------------------ */

.filament {
    display: block;
    width: 100%;
    height: clamp(140px, 18vh, 240px);
    margin: -40px 0;
    pointer-events: none;
}

.filament path {
    fill: none;
    stroke: rgba(212, 184, 150, 0.55);
    stroke-width: 0.6;
    stroke-linecap: round;
    stroke-dasharray: 2 4;
    vector-effect: non-scaling-stroke;
}

/* ------------------------------------------------------------
   Pods (bubble glass containers)
   ------------------------------------------------------------ */

.pod {
    position: relative;
    border-radius: clamp(24px, 3vw, 44px);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
        inset 0 -3px 8px rgba(212, 169, 106, 0.18),
        inset 3px 3px 8px rgba(255, 255, 255, 0.55),
        0 18px 50px rgba(59, 46, 37, 0.13);
    padding: clamp(28px, 3.4vw, 52px);
    color: var(--c-espresso);
    overflow: hidden;
    transform: translateY(60px);
    opacity: 0;
    transition:
        transform 600ms var(--spring),
        opacity 600ms var(--ease-out),
        backdrop-filter 320ms var(--ease-out),
        border-color 320ms var(--ease-out),
        box-shadow 320ms var(--ease-out);
}

.pod.in-view {
    transform: translateY(0);
    opacity: 1;
}

.pod:hover {
    backdrop-filter: blur(16px) saturate(190%);
    -webkit-backdrop-filter: blur(16px) saturate(190%);
    border-color: var(--glass-border-warm);
    box-shadow:
        inset 0 -3px 8px rgba(212, 169, 106, 0.28),
        inset 3px 3px 8px rgba(255, 255, 255, 0.6),
        0 24px 60px rgba(59, 46, 37, 0.18);
}

.pod::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(20deg,
            rgba(122, 100, 85, 0.5) 0px,
            rgba(122, 100, 85, 0.5) 1px,
            transparent 1px,
            transparent 5px),
        radial-gradient(circle at 20% 30%, rgba(122,100,85,0.5) 1px, transparent 2px),
        radial-gradient(circle at 70% 60%, rgba(59,46,37,0.4) 1px, transparent 2px);
    background-size: 14px 14px, 60px 60px, 80px 80px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms var(--ease-out);
    mix-blend-mode: multiply;
}

.pod:hover::after { opacity: 0.15; }

.pod-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 18px;
}

.pod-label {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-walnut);
}

.pod-corner-num {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--c-brass);
    letter-spacing: -0.02em;
}

.pod-title {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 22px;
    color: var(--c-espresso);
}

.pod-text {
    margin: 0 0 16px;
    color: var(--c-espresso);
    max-width: 60ch;
}

.pod-text:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   Watermark numerals
   ------------------------------------------------------------ */

.watermark-num {
    position: absolute;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(8rem, 22vw, 22rem);
    line-height: 0.85;
    color: var(--c-brass);
    opacity: 0.12;
    letter-spacing: -0.05em;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

.lesson-01 .watermark-num { top: 4%; left: 6%; }
.lesson-02 .watermark-num { top: 6%; right: 4%; }
.lesson-02 .watermark-cool { color: var(--c-sage); opacity: 0.18; }
.lesson-03 .watermark-num { top: 8%; left: 50%; transform: translateX(-50%); }

/* ------------------------------------------------------------
   Lesson 01 layout (organic flow, left-leaning main + satellites)
   ------------------------------------------------------------ */

.lesson-01 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    position: relative;
    min-height: 110vh;
}

.pod-01-main {
    width: min(58vw, 720px);
    margin-left: clamp(20px, 6vw, 90px);
    margin-top: 40px;
}

.pod-leather-detail {
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background:
        repeating-linear-gradient(110deg,
            rgba(122, 100, 85, 0.35) 0px,
            rgba(122, 100, 85, 0.35) 1px,
            transparent 1px,
            transparent 5px),
        radial-gradient(circle at 30% 30%, rgba(212, 169, 106, 0.4), transparent 70%);
    opacity: 0.18;
    pointer-events: none;
    filter: blur(0.6px);
}

.pod-satellite {
    width: clamp(180px, 22vw, 240px);
    padding: clamp(18px, 2vw, 26px);
    border-radius: clamp(20px, 2.4vw, 32px);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 4px 14px;
    align-items: baseline;
}

.pod-satellite .sat-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--c-brass);
    grid-row: 1;
}

.pod-satellite .sat-word {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    color: var(--c-espresso);
    letter-spacing: -0.02em;
    grid-column: 2;
    grid-row: 1;
}

.pod-satellite .sat-meta {
    grid-column: 1 / -1;
    grid-row: 2;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--c-walnut);
    letter-spacing: 0.08em;
}

.sat-01-a {
    position: relative;
    margin: -40px 0 0 auto;
    margin-right: clamp(20px, 8vw, 120px);
    transform: translateY(60px) translateX(40px);
}
.sat-01-b {
    position: relative;
    margin: 16px 0 0 auto;
    margin-right: clamp(60px, 14vw, 220px);
    transform: translateY(60px) translateX(-30px);
}
.sat-01-c {
    position: relative;
    margin: 16px 0 0 auto;
    margin-right: clamp(20px, 6vw, 80px);
    transform: translateY(60px) translateX(20px);
}

.pod-satellite.in-view {
    transform: translateY(0) translateX(0);
}

/* annotation svg overlays for lesson 01 */
.annotation-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.ann-line {
    stroke: var(--c-brass);
    stroke-width: 1;
    stroke-dasharray: 4 6;
    opacity: 0.45;
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 800ms var(--ease-out);
}

.pod.in-view .ann-line {
    stroke-dashoffset: 0;
}

/* ------------------------------------------------------------
   Lesson 02 layout (zigzag pods + bubble cluster)
   ------------------------------------------------------------ */

.lesson-02 {
    position: relative;
    min-height: 120vh;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.pod-medium {
    width: min(56vw, 640px);
    padding: clamp(28px, 3vw, 44px);
}

.pod-02-a {
    margin-left: clamp(20px, 5vw, 80px);
    margin-top: 20px;
}

.pod-02-b {
    margin-left: auto;
    margin-right: clamp(20px, 5vw, 80px);
    margin-top: 40px;
}

.step-list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.step-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: baseline;
    padding: 10px 0;
    border-top: 1px dashed rgba(122, 100, 85, 0.25);
    color: var(--c-espresso);
}

.step-list li:first-child { border-top: 0; }

.step-list-num {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    color: var(--c-brass);
}

.bubble-cluster {
    position: relative;
    width: 100%;
    height: 220px;
    margin: -20px 0;
    pointer-events: none;
}

.cluster-bubble {
    position: absolute;
    left: var(--cx);
    top: var(--cy);
    width: var(--cs);
    height: var(--cs);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), rgba(184,204,186,0.2) 65%, transparent 90%);
    border: 1px solid rgba(255,255,255,0.4);
    box-shadow: inset 0 -1px 4px rgba(184, 204, 186, 0.4), inset 1px 1px 3px rgba(255,255,255,0.6);
    animation: clusterFloat 6s ease-in-out infinite alternate;
    animation-delay: calc(var(--cs) * -50ms);
}

@keyframes clusterFloat {
    from { transform: translate(0, 0); }
    to { transform: translate(8px, -10px); }
}

/* ------------------------------------------------------------
   Lesson 03 - The Detail
   ------------------------------------------------------------ */

.lesson-03 {
    position: relative;
    min-height: 110vh;
    display: grid;
    place-items: center;
}

.pod-wide {
    width: min(85vw, 1100px);
    padding: clamp(32px, 4vw, 72px);
    position: relative;
}

.pod-tooling {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        repeating-linear-gradient(45deg,
            rgba(122, 100, 85, 0.4) 0px,
            rgba(122, 100, 85, 0.4) 1px,
            transparent 1px,
            transparent 8px),
        repeating-linear-gradient(-45deg,
            rgba(212, 169, 106, 0.35) 0px,
            rgba(212, 169, 106, 0.35) 1px,
            transparent 1px,
            transparent 14px),
        radial-gradient(circle at 20% 30%, rgba(122,100,85,0.45) 1.5px, transparent 2.5px),
        radial-gradient(circle at 80% 70%, rgba(122,100,85,0.45) 1.5px, transparent 2.5px);
    background-size: 22px 22px, 30px 30px, 100px 100px, 110px 110px;
    opacity: 0.15;
}

.manual-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(28px, 4vw, 72px);
    margin-top: 18px;
    position: relative;
}

.manual-body { position: relative; }

.annot-anchor {
    position: relative;
    border-bottom: 1px dashed rgba(212, 169, 106, 0.7);
    padding-bottom: 1px;
    cursor: help;
    color: var(--c-espresso);
    transition: color 220ms var(--ease-out), border-color 220ms var(--ease-out);
}

.annot-anchor::before {
    content: attr(data-annot);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--c-brass);
    margin-right: 4px;
    letter-spacing: 0.1em;
    vertical-align: super;
    text-transform: uppercase;
}

.annot-anchor:hover,
.annot-anchor.is-active {
    color: var(--c-brass);
    border-bottom-color: var(--c-brass);
}

.manual-notes {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-top: 30px;
    border-left: 1px dashed rgba(122, 100, 85, 0.25);
    padding-left: clamp(20px, 2vw, 36px);
}

.margin-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}

.margin-note.dim { opacity: 0.45; }
.margin-note.lit { transform: translateX(4px); }

.note-num {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--c-brass);
    letter-spacing: 0.06em;
}

.note-text {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--c-walnut);
    line-height: 1.6;
}

.annotation-03 {
    z-index: 0;
    opacity: 0.6;
}

/* ------------------------------------------------------------
   Lesson 04 - The Invitation
   ------------------------------------------------------------ */

.lesson-04 {
    min-height: 80vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding-top: 80px;
    padding-bottom: 80px;
}

/* When invitation is reached, leather-grain becomes more visible */
body.invite-active .depth-leather { opacity: 0.22; }
body.invite-active .depth-blobs { opacity: 0.4; }

.invitation {
    position: relative;
    max-width: 720px;
    padding: clamp(20px, 4vw, 40px);
}

.invite-tag { margin-bottom: 28px; }

.invite-title {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 24px;
    background: linear-gradient(120deg, var(--c-espresso), var(--c-walnut), var(--c-brass));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.invite-text {
    margin: 0 auto 36px;
    color: var(--c-espresso);
    max-width: 540px;
}

.invite-meta {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--c-walnut);
    margin-bottom: 50px;
    border-top: 1px dashed rgba(122, 100, 85, 0.3);
    border-bottom: 1px dashed rgba(122, 100, 85, 0.3);
    padding: 16px 24px;
}

.invite-meta-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 18px;
}

.meta-key {
    color: var(--c-brass);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.meta-val {
    color: var(--c-espresso);
}

.invite-bubble {
    display: inline-grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: var(--c-espresso);
    text-decoration: none;
    box-shadow:
        inset 0 -3px 8px rgba(212, 169, 106, 0.18),
        inset 3px 3px 8px rgba(255, 255, 255, 0.55),
        0 14px 40px rgba(59, 46, 37, 0.16);
    animation: invitePulse 2.6s ease-in-out infinite;
    transition: border-color 320ms var(--ease-out), color 320ms var(--ease-out);
}

.invite-bubble:hover {
    border-color: var(--glass-border-warm);
    color: var(--c-brass);
}

@keyframes invitePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ------------------------------------------------------------
   Page foot
   ------------------------------------------------------------ */

.page-foot {
    text-align: center;
    padding: 40px 20px 60px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-walnut);
    opacity: 0.7;
}

/* ------------------------------------------------------------
   Reveal: pods animate in via .in-view (handled in JS)
   Stagger fall back to CSS: each pod inside a section has
   transition-delay calculated by JS via --reveal-delay var.
   ------------------------------------------------------------ */

.pod[style*="--reveal-delay"] {
    transition-delay: var(--reveal-delay, 0ms);
}

/* ------------------------------------------------------------
   Responsive tweaks
   ------------------------------------------------------------ */

@media (max-width: 900px) {
    .pod-01-main { width: 88vw; margin-left: 6vw; }
    .pod-satellite { width: 70vw; margin-right: 6vw !important; }
    .pod-medium { width: 88vw; margin-left: 6vw !important; margin-right: 6vw !important; }
    .pod-wide { width: 92vw; }
    .manual-grid { grid-template-columns: 1fr; }
    .manual-notes { border-left: 0; padding-left: 0; border-top: 1px dashed rgba(122,100,85,0.25); padding-top: 22px; }
    .floating-nav { top: 18px; right: 18px; }
}

@media (max-width: 560px) {
    .hero-glass { width: 92vw; min-height: 70vh; border-radius: 32px; padding: 28px; }
    .pod { padding: 24px; border-radius: 24px; }
    .invite-bubble { width: 80px; height: 80px; }
    .invite-meta-row { grid-template-columns: 70px 1fr; }
}

/* Backdrop-filter fallback */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .pod, .hero-glass, .nav-toggle, .nav-bubble, .invite-bubble {
        background: rgba(255, 245, 235, 0.85);
    }
}