/*
 * fl718-nook-mobile.css
 * Nook Nook Mats Biography — Mobile styles
 *
 * Integration changes applied from prototype:
 *   - Bare * reset replaced with :where(.nook-story-page) scoped version
 *   - body { ... } changed to .nook-story-page { ... }
 *   - .hinge-text, .hinge-period, .ch5-transition, img scoped to .nook-story-page
 *   - @keyframes gameOverBlink → nook-game-over-blink
 *   - @keyframes cell-shake → nook-cell-shake
 *   - font-style:italic removed from .nook-brand-logo__mats (Dancing Script iOS bug)
 *
 * Enqueued via functions.php: fl718-nook-mobile
 * Gate: @media (max-width: 768px) wraps mobile-only sections in the prototype,
 *       but this file is enqueued only on is_page('nook-nook') alongside fl718-nook.css.
 */

@media (max-width: 768px) {


        /* ============================================
           RESET & BASE STYLES
           ============================================ */
        :where(.nook-story-page) *,
        :where(.nook-story-page) *::before,
        :where(.nook-story-page) *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .nook-story-page {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            overflow-x: hidden;
            background: #FFFEF9;
        }

        /* ============================================
           CSS CUSTOM PROPERTIES
           ============================================ */
        :root {
            /* Font Families */
            --nook-font-serif: Georgia, serif;
            --nook-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

            /* Desktop Font Sizes */
            --nook-text-hero: 48px;
            --nook-text-body: 18px;

            /* Line Heights */
            --nook-lh-relaxed: 1.6;
            --nook-lh-loose: 1.8;

            /* Colors */
            --nook-white: #FFFFFF;
            --nook-cream-warm: #FFFEF9;
            --nook-text-charcoal: #2B2B2B;
            --nook-text-light: #6B6B6B;

            /* Chapter 2 / Descent colors */
            --nook-terracotta:  #d4664a;
            --nook-tan:         #c8a882;
            --nook-ghost:       #DDD4C8;
            --nook-caption:     #9B8B7E;
            --nook-warm-dark:   #3D3935;
            --nook-cream-paper: #FBF8F3;
            --nook-gold:        #C9A86A;
            --nook-cool-gray:   #B8B4AE;

            /* Descent section aliases — map to existing nook variables */
            --cream:    var(--nook-cream-warm);
            --terra:    var(--nook-terracotta);
            --tan:      var(--nook-tan);
            --ghost:    var(--nook-ghost);
            --charcoal: var(--nook-text-charcoal);
            --light:    var(--nook-text-light);
            --gold:     var(--nook-gold);
            --white:    var(--nook-white);

            /* Chapter 5 terminal colors */
            --terminal-green: rgba(76, 175, 80, 0.9);
            --amber-warm: rgba(201, 168, 106, 1);
        }

        /* Mobile Typography Adjustments */
        @media (max-width: 768px) {
            :root {
                --nook-text-hero: 32px;
                --nook-text-body: 16px;
            }
        }

        /* ============================================
           CHAPTER TRANSITION HEADER
           ============================================ */
        .nook-chapter-transition {
            position: relative;
            width: 100%;
            height: 300px;
            background: linear-gradient(to bottom,
                #ebebeb 0%,
                #f0ebe5 100%);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 80px;
            overflow: hidden;
        }

        /* LEFT: Wavy Textile Lines - Sequential weaving animation */
        .nook-textile-pattern {
            width: 180px;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .nook-textile-pattern svg {
            width: 100%;
            height: 200px;
        }

        .nook-textile-pattern path {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            transition: stroke-dashoffset 0.4s ease-out;
        }

        .nook-textile-pattern.animate path:nth-child(1) {
            animation: nook-draw-line 0.4s ease-out 0.0s forwards;
        }

        .nook-textile-pattern.animate path:nth-child(2) {
            animation: nook-draw-line 0.4s ease-out 0.1s forwards;
        }

        .nook-textile-pattern.animate path:nth-child(3) {
            animation: nook-draw-line 0.4s ease-out 0.2s forwards;
        }

        .nook-textile-pattern.animate path:nth-child(4) {
            animation: nook-draw-line 0.4s ease-out 0.3s forwards;
        }

        .nook-textile-pattern.animate path:nth-child(5) {
            animation: nook-draw-line 0.4s ease-out 0.4s forwards;
        }

        .nook-textile-pattern.animate path:nth-child(6) {
            animation: nook-draw-line 0.4s ease-out 0.5s forwards;
        }

        .nook-textile-pattern.animate path:nth-child(7) {
            animation: nook-draw-line 0.4s ease-out 0.6s forwards;
        }

        .nook-textile-pattern.animate path:nth-child(8) {
            animation: nook-draw-line 0.4s ease-out 0.7s forwards;
        }

        @keyframes nook-draw-line {
            to {
                stroke-dashoffset: 0;
            }
        }

        /* CENTER: Brand Typography - Character by character fade */
        .nook-brand-logo {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0;
            flex-direction: column;
        }

        .nook-brand-logo__main {
            display: flex;
            align-items: center;
            gap: 0;
            line-height: 1;
        }

        .nook-brand-logo__nook {
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 84px;
            font-weight: 900;
            color: #000000;
            letter-spacing: -0.02em;
            line-height: 0.9;
        }

        .nook-brand-logo__nook span {
            display: inline-block;
            opacity: 0;
            transform: translateY(10px);
        }

        .nook-brand-logo__dot {
            width: 16px;
            height: 16px;
            background: #d4664a;
            border-radius: 50%;
            margin: 0 8px;
            align-self: center;
            position: relative;
            top: -8px;
            opacity: 0;
            transform: scale(0.5);
        }

        .nook-brand-logo__mats {
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 100px;
            font-weight: 900;
            color: #000000;
            letter-spacing: -0.02em;
            margin-top: 8px;
            opacity: 0;
            transform: translateY(10px);
        }

        /* RIGHT: Organic Blob Shape - Spinning/expanding */
        .nook-organic-shape {
            width: 280px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            opacity: 0;
            transform: scale(0.3) rotate(-90deg);
            transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .nook-organic-shape.animate {
            opacity: 1;
            transform: scale(1.0) rotate(0deg);
        }

        .nook-organic-shape svg {
            width: 220px;
            height: 220px;
        }

        /* ============================================
           DOT SEPARATOR ROW
           ============================================ */
        .nook-dot-separator {
            width: 100%;
            background: #FFFEF9;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 32px 80px 0;
        }

        .nook-dot-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        .nook-journey-dot {
            width: 7px;
            height: 7px;
            background: #c8a882;
            border-radius: 50%;
            flex-shrink: 0;

            /* Initial state — invisible and collapsed */
            opacity: 0;
            transform: scale(0);

            /* Same spring bounce easing as the blob */
            transition:
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity   0.2s ease;
            will-change: transform, opacity;
        }

        /* Visible state — triggered by JS */
        .nook-journey-dot.visible {
            opacity: 1;
            transform: scale(1);
        }

        /* ============================================
           SECTION 1: THE OPENING DUALITY
           ============================================ */

        /* Section 1 Container */
        .nook-section-1 {
            position: relative;
            width: 100%;
        }

        /* Opening Text Stage — full viewport, pinned during fill animation */
        .nook-product-reveal {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            background-color: var(--nook-cream-warm);
            padding: 0 80px 10vh;
            position: relative;
            z-index: 3;
        }

        /* Opening paragraph text */
        .nook-opening-text {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: clamp(20px, 5vw, 36px);
            font-weight: 500;
            line-height: 1.65;
            letter-spacing: 0.005em;
            width: 100%;
        }

        /* Individual word spans — start as ghost, fill on scroll */
        .nook-opening-word {
            display: inline;
            color: #DDD4C8;
            will-change: transform;
        }

        /* ============================================
           THRESHOLD IMAGE — end of Section 1
           ============================================ */
        .nook-threshold-section {
            width: 100%;
            background: var(--nook-cream-warm);
            overflow: hidden;
        }

        .nook-threshold-container {
            width: 100%;
            height: 82vh;
            overflow: hidden;
            position: relative;
        }

        .nook-threshold-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 45%;
            opacity: 0;
            will-change: transform;
            display: block;
        }

        .nook-threshold-vignette {
            position: absolute;
            inset: 0;
            background: radial-gradient(
                ellipse 90% 90% at 50% 50%,
                transparent 55%,
                rgba(20, 16, 10, 0.28) 100%
            );
            pointer-events: none;
            z-index: 3;
            opacity: 0;
        }

        /* Door panels — two halves that part to reveal the photo */
        .nook-door-panel {
            position: absolute;
            top: 0;
            width: 50%;
            height: 100%;
            background: var(--nook-cream-warm);
            z-index: 2;
            will-change: transform;
        }

        .nook-door-panel--left {
            left: 0;
            background: linear-gradient(
                90deg,
                var(--nook-cream-warm) 0%,
                var(--nook-cream-warm) 22%,
                #F5EFE7 23%,
                var(--nook-cream-warm) 24%,
                var(--nook-cream-warm) 55%,
                #F4EEE7 56%,
                var(--nook-cream-warm) 57%,
                var(--nook-cream-warm) 100%
            );
        }

        .nook-door-panel--right {
            right: 0;
            background: linear-gradient(
                90deg,
                var(--nook-cream-warm) 0%,
                #F5EFE7 1%,
                var(--nook-cream-warm) 2%,
                var(--nook-cream-warm) 38%,
                #F4EEE7 39%,
                var(--nook-cream-warm) 40%,
                var(--nook-cream-warm) 72%,
                #F5EFE7 73%,
                var(--nook-cream-warm) 74%
            );
        }

        /* Door panel texture — inset shadow for depth + subtle grain */
        .nook-door-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-shadow: inset 0 0 20px rgba(180, 160, 130, 0.12);
            pointer-events: none;
        }

        /* "nook" label on each door half */
        .nook-door-label {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 28px;
            font-weight: 900;
            color: rgba(180, 160, 130, 0.25);
            letter-spacing: -0.02em;
            line-height: 1;
            pointer-events: none;
        }

        .nook-door-label--left {
            right: 0;
            text-align: right;
        }

        .nook-door-label--right {
            left: 0;
            text-align: left;
        }

        .nook-door-seam {
            position: absolute;
            top: 0;
            left: 50%;
            width: 1px;
            height: 100%;
            background: rgba(180, 160, 130, 0.35);
            z-index: 4;
            transform: translateX(-50%);
            will-change: opacity;
        }

        /* ============================================
           CHAPTER BREAK — breathing room after photo
           ============================================ */
        .nook-chapter-break {
            width: 100%;
            height: 220px;
            background: var(--nook-cream-warm);
        }

        /* ============================================
           CHAPTER 2 — SPLIT STAGE
           ============================================ */
        .nook-story-page .ch2-stage {
            display: flex;
            width: 100%;
            height: 100vh;
            background: var(--nook-cream-warm);
            position: relative;
        }

        /* LEFT: paragraph + cycling highlight */
        .nook-story-page .ch2-left {
            width: 44%;
            height: 100%;
            position: relative;
            border-right: 1px solid #e4ddd4;
            flex-shrink: 0;
        }

        .nook-story-page .ch2-left-state {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 64px 56px 80px 80px;
            opacity: 0;
            pointer-events: none;
        }

        .nook-story-page .ch2-left-state.is-first {
            opacity: 1;
        }

        .ch2-chapter-label {
            font-family: var(--nook-font-sans);
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.22em;
            color: var(--nook-tan);
            margin-bottom: 28px;
        }

        .ch2-opening-para {
            font-family: var(--nook-font-serif);
            font-size: 17px;
            line-height: 1.9;
            color: var(--nook-text-light);
            width: 100%;
        }

        .ch2-body-copy {
            font-family: 'Lora', Georgia, serif;
        }

        .ch2-opening-para mark {
            background: none;
            color: var(--nook-text-charcoal);
            border-bottom: 1.5px solid var(--nook-terracotta);
            padding-bottom: 1px;
        }


        /* State counter dots */
        .ch2-state-counter {
            position: absolute;
            bottom: 32px;
            left: 80px;
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .ch2-sc-dots {
            display: flex;
            gap: 7px;
        }

        .ch2-sc-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--nook-ghost);
            transition: background 0.4s ease;
            flex-shrink: 0;
        }

        .ch2-sc-dot.on {
            background: var(--nook-terracotta);
        }

        .ch2-sc-label {
            font-family: var(--nook-font-sans);
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.16em;
            color: var(--nook-caption);
        }

        .ch2-scroll-hint {
            position: absolute;
            bottom: 34px;
            right: 32px;
            font-family: var(--nook-font-sans);
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.16em;
            color: var(--nook-ghost);
        }

        /* RIGHT: film strip */
        .nook-story-page .ch2-right {
            flex: 1;
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        /* Cream fade overlays top and bottom of right panel */
        .ch2-strip-fade-top,
        .ch2-strip-fade-bottom {
            position: absolute;
            left: 0; right: 0;
            height: 100px;
            pointer-events: none;
            z-index: 3;
        }

        .ch2-strip-fade-top    { top: 0;    background: linear-gradient(to bottom, var(--nook-cream-warm), transparent); }
        .ch2-strip-fade-bottom { bottom: 0; background: linear-gradient(to top,    var(--nook-cream-warm), transparent); }

        /* Scroll position track */
        .ch2-strip-track {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            height: 70px;
            width: 1px;
            background: var(--nook-ghost);
            z-index: 4;
        }

        .ch2-strip-thumb {
            width: 100%;
            background: var(--nook-terracotta);
            position: absolute;
            top: 0;
        }


        .ch2-frame-caption.light-bg {
            color: var(--nook-caption);
        }

        /* Placeholder image treatments */
        .ch2-ph {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            position: relative;
        }

        .ch2-ph-lbl {
            font-family: var(--nook-font-sans);
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: rgba(255,255,255,0.4);
            position: relative;
            z-index: 2;
            text-align: center;
        }

        .ch2-ph-sub {
            font-family: var(--nook-font-sans);
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: rgba(255,255,255,0.2);
            position: relative;
            z-index: 2;
        }

        .ch2-ph-founding { background: linear-gradient(145deg, #3d2a14 0%, #6b4420 50%, #8b5e2a 100%); }
        .ch2-ph-product  { background: #ede6d9; }
        .ch2-ph-product .ch2-ph-lbl { color: var(--nook-caption); }
        .ch2-ph-product .ch2-ph-sub { color: #c0b0a0; }
        .ch2-ph-product img {
            width: 52%;
            height: auto;
            object-fit: contain;
            position: relative;
            z-index: 2;
        }
        .ch2-ph-artisan  { background: linear-gradient(160deg, #2e1e0e 0%, #5c3c20 55%, #7a5434 100%); }
        .ch2-ph-texture  {
            background-color: #7a6040;
            background-image:
                repeating-linear-gradient(0deg,   transparent, transparent 5px, rgba(0,0,0,0.2)  5px, rgba(0,0,0,0.2)  6px),
                repeating-linear-gradient(90deg,  transparent, transparent 4px, rgba(0,0,0,0.14) 4px, rgba(0,0,0,0.14) 5px);
        }
        .ch2-ph-ethics   { background: linear-gradient(170deg, #2a1e14 0%, #4a3222 50%, #6a4a34 100%); }

        .ch2-weave-svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0.18;
        }

        /* Full-height single scroll image */
        .ch2-full-scroll-img {
            width: 100%;
            height: auto;
            display: block;
            will-change: transform;
        }

        /* ============================================
           CH2 → CH3 TRANSITION BREATH
           ============================================ */
        .nook-chapter-breath {
            width: 100%;
            background: var(--nook-cream-warm);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 14vh 0 12vh;
            gap: 0;
        }

        .nook-breath-rule {
            width: 1px;
            height: 60px;
            background: #d8cfc4;
            margin-bottom: 32px;
        }

        .nook-breath-label {
            font-family: var(--nook-font-sans);
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.22em;
            color: #c8a882;
        }

        /* ============================================
           CH3 → CH4 COLD TYPE MARKER
           ============================================ */
        .nook-descent-zone {
            height: 115vh;
            background: linear-gradient(
                to bottom,
                #FFFFFF            0%,
                #FFFFFF            8%,
                #FDFCF8            16%,
                #FAF9F4            24%,
                #F5F4EF            34%,
                #EEEDE8            44%,
                #E8E8E4            52%,
                #EEEDE8            60%,
                #F5F4EF            70%,
                #FAF8F3            80%,
                #FDFBF6            88%,
                var(--nook-cream-warm) 95%,
                var(--nook-cream-warm) 100%
            );
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .nook-descent-marker {
            display: flex;
            flex-direction: column;
            align-items: center;
            pointer-events: none;
            user-select: none;
            margin-top: -32px;
            gap: 0;
            width: 400px;
            max-width: 90vw;
        }

        /* "CHAPTER FOUR" supertitle — word-by-word fade */
        .nook-ch4-marker__super {
            font-family: var(--nook-font-sans);
            font-size: 10px;
            font-weight: 300;
            letter-spacing: 0.38em;
            text-transform: uppercase;
            color: var(--nook-tan);
            margin-bottom: 14px;
            display: flex;
            gap: 0.5em;
            align-items: center;
            justify-content: center;
        }

        .nook-ch4-super-word {
            opacity: 0;
            display: inline-block;
        }

        /* "THE DESCENT" — character-by-character type-on */
        .nook-ch4-marker__title {
            font-family: 'Courier New', Courier, monospace;
            font-size: 13px;
            font-weight: 400;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: var(--nook-charcoal);
            margin-bottom: 18px;
            display: flex;
            align-items: baseline;
            white-space: nowrap;
            justify-content: center;
        }

        .nook-ch4-title-char {
            opacity: 0;
            display: inline-block;
        }

        .nook-ch4-title-char--space {
            width: 0.4em;
        }

        /* Thin unbroken rule */
        .nook-ch4-rule-wrap {
            width: 120px;
            height: 1px;
            overflow: hidden;
        }

        .nook-ch4-rule-line {
            height: 1px;
            width: 0;
            background: var(--nook-charcoal);
            opacity: 0.3;
        }

        /* ============================================
           SECTION 3 — THE SUMMIT & THE SHADOW
           ============================================ */
        .nook-section-3 {
            width: 100%;
            background: var(--nook-cream-warm);
        }

        /* Part A: Victory Display */
        .nook-summit-victory {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10vh 80px;
        }

        .nook-summit-grid {
            display: grid;
            grid-template-columns: minmax(320px, 1fr) 20px 1.4fr 20px minmax(320px, 1fr);
            column-gap: 2.5rem;
            max-width: 1200px;
            width: 100%;
            align-items: center;
        }

        .nook-col-divider {
            height: 624px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .nook-summit-metric {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            transform: scale(1.25);
            transform-origin: top center;
        }

        .nook-metric-number {
            font-family: Georgia, serif;
            font-weight: 700;
            font-size: clamp(52px, 7vw, 96px);
            line-height: 1.05;
            color: var(--nook-text-charcoal);
            letter-spacing: -0.03em;
            margin-bottom: 16px;
            opacity: 0;
        }

        .nook-metric-caption {
            font-family: var(--nook-font-sans);
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            color: var(--nook-text-light);
            line-height: 1.6;
            opacity: 0;
        }

        .nook-metric-rating {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 10px;
            margin-bottom: 16px;
        }

        .nook-rating-number {
            font-family: Georgia, serif;
            font-weight: 700;
            font-size: clamp(40px, 5.5vw, 72px);
            line-height: 1.05;
            color: var(--nook-text-charcoal);
            letter-spacing: -0.03em;
            opacity: 0;
        }

        .nook-rating-stars {
            display: flex;
            gap: 3px;
        }

        .nook-rating-stars .star {
            font-size: 22px;
            color: #ddd4c8;
            transition: color 0.3s ease;
        }

        /* Center column photos */
        .nook-summit-photos {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .nook-summit-photo-wrap {
            width: 100%;
            overflow: hidden;
            border-radius: 2px;
        }

        .nook-summit-photo {
            width: 100%;
            height: 240px;
            object-fit: cover;
            display: block;
            filter: saturate(1.05);
            opacity: 0;
        }

        /* Photo placeholders */
        .nook-summit-photo-ph {
            width: 100%;
            height: 240px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 2px;
            opacity: 0;
        }

        .nook-summit-photo-ph:nth-child(1) { background: #d4c4b0; }
        .nook-summit-photo-ph:nth-child(2) { background: #c8b89a; }
        .nook-summit-photo-ph:nth-child(3) { background: #bca882; }

        .nook-ph-label {
            font-family: var(--nook-font-sans);
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            color: rgba(255,255,255,0.5);
        }

        @media (max-width: 768px) {
            .nook-summit-grid {
                grid-template-columns: 1fr;
                gap: 5rem;
            }

            .nook-chapter-breath {
                padding: 10vh 0 8vh;
            }
        }

        /* ============================================
           CH3 INTRO — TRIPTYCH + PAPER AIRPLANE
           ============================================ */
        .nook-ch3-intro {
            min-height: 100vh;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 24vh 80px 0;
            overflow: visible;
            background: var(--nook-cream-warm);
        }

        .nook-triptych-line {
            font-family: Georgia, serif;
            font-size: clamp(26px, 3.2vw, 42px);
            font-weight: 400;
            line-height: 1.4;
            color: var(--nook-text-charcoal);
            text-align: center;
            margin: 0 0 14px 0;
            opacity: 0;
            transform: translateY(8px);
            position: relative;
            z-index: 2;
        }

        .nook-triptych-line:last-of-type {
            font-style: italic;
            font-size: clamp(28px, 3.5vw, 46px);
            margin-bottom: 0;
        }

        /* "launched" starts terracotta, transitions to charcoal via JS */
        .nook-tri-launched {
            color: var(--nook-terracotta);
        }

        /* Plane wrapper — absolutely positioned, flies across section */
        .nook-plane-wrap {
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            opacity: 0;
            z-index: 3;
            will-change: transform;
        }

        .nook-paper-plane {
            width: 130px;
            height: auto;
            display: block;
            /* removes white image background on cream bg */
            mix-blend-mode: multiply;
        }

        /* Trail canvas — sits behind text and plane */
        #nook-plane-canvas {
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 1;
        }

        @media (max-width: 768px) {
            .nook-ch3-intro {
                padding: 18vh 40px 0;
            }

            .nook-paper-plane {
                width: 90px;
            }
        }

        /* ============================================
           CH3 VICTORY — TICKER (LEFT COLUMN)
           ============================================ */
        .nook-ticker-context {
            font-family: var(--nook-font-sans);
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: 0.22em;
            color: #a89a8c;
            margin-bottom: 10px;
            opacity: 0;
            width: 100%;
            text-align: center;
        }

        .nook-ticker-display {
            font-family: var(--nook-font-serif);
            font-weight: 700;
            font-size: clamp(64px, 8vw, 100px);
            line-height: 1.0;
            color: var(--nook-text-charcoal);
            letter-spacing: -0.04em;
            min-width: 5ch;
            text-align: center;
            transition: color 0.5s ease;
            opacity: 0;
            font-variant-numeric: tabular-nums;
        }

        .nook-ticker-display.landed { color: var(--nook-terracotta); }

        .nook-ticker-badge {
            font-family: var(--nook-font-sans);
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.22em;
            color: var(--nook-terracotta);
            margin-top: 6px;
            opacity: 0;
            transform: translateY(4px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .nook-ticker-badge.show { opacity: 1; transform: translateY(0); }

        /* Concept A: "Top 10" hero text that replaces the number */
        .nook-hero-top10 {
            font-family: var(--nook-font-serif);
            font-weight: 700;
            font-size: clamp(56px, 12vw, 88px);
            line-height: 1.0;
            color: var(--nook-terracotta);
            letter-spacing: -0.02em;
            text-align: center;
            opacity: 0;
            transform: scale(0.9);
            display: none;
        }

        .nook-summit-mini-ladder {
            display: flex;
            gap: 5px;
            align-items: flex-end;
            height: 28px;
            margin-top: 18px;
            opacity: 0;
        }

        .nook-summit-mini-bar {
            width: 9px;
            border-radius: 1px;
            background: var(--nook-tan);
            height: 0;
            flex-shrink: 0;
        }

        .nook-summit-mini-bar.is-you { background: var(--nook-terracotta); }

        .nook-metric-whisper {
            font-family: var(--nook-font-sans);
            font-size: 10px;
            color: #a89a8c;
            letter-spacing: 0.03em;
            font-style: italic;
            text-transform: none;
        }

        /* ============================================
           CH3 VICTORY — POLAROID DROP (CENTER COLUMN)
           ============================================ */
        .nook-photo-outer {
            width: 100%;
            will-change: transform;
        }

        .nook-photo-inner {
            width: 100%;
            transform-origin: center center;
            will-change: transform, opacity;
            opacity: 0;
        }

        /* Override nth-child colors (now nested inside .nook-photo-outer) */
        #nook-pc1 { background: #d4c4b0; }
        #nook-pc2 { background: #c8b89a; }
        #nook-pc3 { background: #bca882; }

        /* ============================================
           CH3 VICTORY — RIGHT COLUMN (REVIEW FRAGMENT)
           ============================================ */
        .nook-summit-right {
            height: 624px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .nook-rc-revenue-block {
            margin-bottom: 32px;
        }

        .nook-rc-rating-block {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Shared large number style (revenue + rating) */
        .nook-victory-large {
            font-family: Georgia, serif;
            font-weight: 700;
            font-size: clamp(40px, 5.5vw, 68px);
            line-height: 1.05;
            letter-spacing: -0.03em;
            margin-bottom: 10px;
        }

        /* 4.7 rating number — hidden until Phase 2 animates it in */
        #nook-rc-rat { opacity: 0; }

        /* Split-flap number container */
        .nook-sf-num {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Individual split-flap characters */
        .nook-sf-char {
            display: inline-block;
            min-width: 0.58em;
            text-align: center;
            opacity: 0;
        }

        /* Review quote — clip-path start state */
        .nook-victory-quote {
            font-family: Georgia, serif;
            font-size: 15px;
            font-style: italic;
            line-height: 1.6;
            color: var(--nook-text-charcoal);
            max-width: 200px;
            margin: 0 auto 16px;
            clip-path: inset(0 0 100% 0);
            transition: color 1.2s ease;
        }

        .nook-victory-quote.faded {
            color: #9a8e84;
        }

        /* Thin rule under quote */
        .nook-victory-q-rule {
            width: 60%;
            height: 1px;
            background: rgba(200, 168, 130, 0.4);
            transform-origin: left center;
            transform: scaleX(0);
            margin: 0 auto 20px;
            opacity: 0;
        }

        /* Stars row */
        .nook-victory-stars {
            display: flex;
            gap: 3px;
            justify-content: center;
            margin-bottom: 12px;
            opacity: 0;
        }

        .nook-story-page .v-star {
            font-size: 20px;
            color: var(--nook-ghost);
            transition: color 0.3s ease;
        }

        .nook-story-page .v-star.lit {
            color: var(--nook-gold);
        }

        /* ============================================
           SECTION 3 — PEAK ZONE
           Transitional space + summit quote
           Follows immediately after the Victory Display
           ============================================ */

        .nook-peak-zone {
            position: relative;
        }

        /* The Space: cream opens up to white as you scroll.
           Padding compresses 80px → 40px to match quote zone. */
        .nook-peak-space {
            min-height: 115vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--nook-cream-warm);
            position: relative;
        }

        /* Gradient bridge: cream → white, sits between peak-space and peak-quote */
        .nook-cream-white-bridge {
            width: 100%;
            height: 80px;
            background: linear-gradient(
                to bottom,
                #FFFEF9  0%,
                #FFFEFC  10%,
                #FFFCF8  24%,
                #FDFAF4  38%,
                #FBFAF2  52%,
                #FAFAF2  66%,
                #FEFEFE  80%,
                #FFFFFF  100%
            );
        }

        /* Split-fade whisper: two words drift in from opposite sides */
        .nook-split-whisper {
            display: flex;
            align-items: baseline;
            gap: 28px;
            pointer-events: none;
            user-select: none;
        }

        .nook-split-word {
            font-family: var(--nook-font-sans);
            font-size: 13px;
            font-weight: 300;
            text-transform: uppercase;
            letter-spacing: 0.32em;
            color: #bfb9b0;
            opacity: 0;
        }

        .nook-split-dot {
            font-family: var(--nook-font-sans);
            font-size: 13px;
            font-weight: 300;
            color: var(--nook-tan);
            opacity: 0;
            line-height: 1;
            position: relative;
            top: -1px;
        }

        @media (prefers-reduced-motion: reduce) {
            .nook-split-word { opacity: 0.72; }
            .nook-split-dot  { opacity: 0.62; }
        }

        /* The Quote: lives on white, dissolves in scroll-driven */
        .nook-peak-quote {
            min-height: 100vh;
            background: #FFFFFF;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 10vh 40px 52vh;
        }

        .nook-peak-quote-text {
            font-family: var(--nook-font-serif);
            font-size: clamp(24px, 2.9vw, 42px);
            font-weight: 400;
            line-height: 1.65;
            color: var(--nook-text-charcoal);
            text-align: center;
            max-width: 1140px;
            width: 100%;
        }

        /* Word-by-word clip reveal */
        .nook-word-clip {
            display: inline-block;
            overflow: hidden;
            vertical-align: bottom;
            margin-right: 0.22em;
        }

        .nook-word-clip:last-child {
            margin-right: 0;
        }

        .nook-word-inner {
            display: inline-block;
            transform: translateY(110%);
        }

        .nook-peak-quote-rule {
            width: 1px;
            height: 64px;
            background: #c8a882;
            margin-top: 52px;
            opacity: 0;
        }

        @media (prefers-reduced-motion: reduce) {
            .nook-word-inner { transform: none !important; }
            .nook-peak-quote-rule { opacity: 0.7 !important; }
        }

        /* The Crease — cool gray rule marking the divide */
        .nook-peak-crease-rule {
            width: 1px;
            height: 64px;
            background: #B8B4AE;
            margin-top: 32px;
            opacity: 0.7;
        }

        .nook-peak-crease-label {
            font-family: var(--nook-font-sans);
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: #d4664a;
            margin-top: 28px;
            opacity: 0.5;
        }

        /* ════════════════════════════════════════════
           CHAPTER 4 — THE DESCENT
           ════════════════════════════════════════════ */

        /* LEDGER SECTION */
        .nook-story-page .ledger-section {
            position: relative;
            padding: 10vh 80px 32vh;
            background: var(--cream);
        }
        .ledger-grid-overlay {
            position: absolute; inset: 0;
            pointer-events: none;
            opacity: 0;
            will-change: opacity;
        }
        .ledger-grid-overlay svg {
            width: 100%; height: 100%;
        }
        .ledger-grid-overlay line {
            stroke: rgba(0,0,0,0.16);
            stroke-width: 1;
            vector-effect: non-scaling-stroke;
            filter: drop-shadow(0 0 1px rgba(0,0,0,0.08));
        }
        .ledger-grid-overlay line.drawing {
            stroke: rgba(76,175,80,0.4);
            filter: drop-shadow(0 0 3px rgba(76,175,80,0.3));
        }
        .nook-story-page .ledger-header {
            display: flex; border-bottom: 1.5px solid rgba(0,0,0,0.18);
            padding-bottom: 9px; position: relative; z-index: 2;
            margin-left: -80px; margin-right: -80px;
            padding-left: 80px; padding-right: 80px;
        }
        .ledger-col-head {
            font-size: 8px; text-transform: uppercase; letter-spacing: 0.18em;
            color: rgba(90,90,90,0.32); font-family: 'Courier New', monospace;
        }
        .ledger-col-head.num { width: 72px; flex-shrink: 0; }

        .nook-story-page .ledger-row {
            display: flex; align-items: flex-end;
            border-bottom: 1px solid rgba(0,0,0,0.14);
            height: 72px; padding-bottom: 9px;
            position: relative; z-index: 2;
            margin-left: -80px; margin-right: -80px;
            padding-left: 80px; padding-right: 80px;
        }
        .nook-story-page .ledger-row-num {
            width: 72px; flex-shrink: 0;
            font-size: 9px; color: rgba(90,90,90,0.26);
            font-family: 'Courier New', monospace;
        }
        .nook-story-page .ledger-row-text {
            font-family: 'Courier Prime', 'Courier New', monospace; font-size: 18px;
            line-height: 1.85; color: var(--light); flex: 1;
            letter-spacing: 0.01em;
        }
        .nook-story-page .ledger-row-text .char {
            opacity: 0;
            display: inline;
        }
        .nook-story-page .ledger-row-text .char.space {
            white-space: pre-wrap;
        }
        .nook-story-page .ledger-row-text .char.typing {
            color: rgba(76,175,80,0.85);
            text-shadow: 0 0 8px rgba(76,175,80,0.4);
        }
        .nook-story-page .ledger-row.less-life .ledger-row-text { color: var(--charcoal); font-style: italic; font-weight: 700; letter-spacing: 0.005em; }
        .nook-story-page .ledger-row.less-life .ledger-row-num  { color: rgba(90,90,90,0.1); }
        .nook-story-page .ledger-row.less-life .ledger-row-text .char.typing {
            color: rgba(212,102,74,0.9);
            text-shadow: 0 0 12px rgba(212,102,74,0.5);
        }

        /* NETWORK SECTION */
        .nook-story-page .network-section {
            position: relative;
            padding: 8vh 0 10vh;
            overflow: hidden;
            background: var(--cream);
        }
        .nook-story-page .network-eyebrow {
            font-size: 12px; text-transform: uppercase; letter-spacing: 0.22em;
            color: rgba(159,170,187,0.85); text-align: center; margin-bottom: 40px;
            opacity: 0;
        }

        .nook-story-page .network-svg {
            width: 100%; display: block;
        }
        .nook-story-page .network-svg-h { display: block; }
        .nook-story-page .network-svg-v { display: none; }

        .net-node-circle {
            fill: var(--white);
            stroke: var(--tan);
            stroke-width: 1.5;
            opacity: 0;
        }
        .net-node-circle.stressed { stroke: #9FAABB; }
        .net-node-circle.you      { stroke: var(--terra); }

        .net-node-label {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            fill: var(--light);
            opacity: 0;
            text-anchor: middle;
        }
        .net-node-label.you { fill: var(--terra); }

        .net-cost-label {
            font-family: 'Courier New', monospace;
            font-size: 11px;
            font-weight: 600;
            fill: #7A8FA0;
            opacity: 0;
            text-anchor: middle;
        }

        .net-line {
            stroke: var(--ghost);
            stroke-width: 1;
            fill: none;
            stroke-dasharray: 600;
            stroke-dashoffset: 600;
        }
        .net-line.chaos {
            stroke: rgba(159,170,187,0.4);
            stroke-width: 0.7;
            stroke-dasharray: 3 4;
        }

        @keyframes nook-game-over-blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.15; }
        }
        .game-over-blink {
            animation: nook-game-over-blink 0.4s ease-in-out 4;
        }

        /* CRISIS TRANSITION */
        .nook-story-page .crisis-transition {
            min-height: 50vh;
            background: linear-gradient(to bottom,
                var(--cream) 0%,
                #FDFCF7 25%,
                #FAFAF8 50%,
                #F8F8F9 75%,
                var(--white) 100%
            );
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8vh 80px;
            position: relative;
        }
        .nook-story-page .crisis-divider {
            width: 1px;
            height: 80px;
            background: linear-gradient(to bottom,
                rgba(200,168,130,0.3) 0%,
                rgba(159,170,187,0.2) 50%,
                rgba(159,170,187,0.1) 100%
            );
            margin-bottom: 24px;
        }
        .nook-story-page .crisis-whisper {
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: 0.28em;
            color: rgba(159,170,187,0.35);
            text-align: center;
        }

        /* THE HINGE */
        .nook-story-page .hinge-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--white);
            padding: 0 80px;
        }
        .nook-story-page .hinge-text {
            font-family: 'Libre Baskerville', Georgia, serif;
            font-weight: 700;
            font-size: clamp(34px, 4.2vw, 62px);
            letter-spacing: -0.03em;
            line-height: 1.1;
            color: rgba(43,43,43,0.6);
            text-align: center;
            opacity: 0;
        }
        .nook-story-page .hinge-period {
            color: var(--terra);
        }

        /* EXCEL BLOW */
        .nook-story-page .blow-excel {
            min-height: 80vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0 80px;
            background: var(--white);
        }
        .nook-story-page .blow-excel-text {
            font-family: 'Libre Baskerville', Georgia, serif;
            font-size: clamp(26px, 3vw, 42px);
            font-style: italic;
            font-weight: 400;
            letter-spacing: -0.02em;
            color: var(--charcoal);
            text-align: center;
            white-space: nowrap;
            line-height: 1.3;
            opacity: 0;
            transform: translateY(8px);
        }

        /* THE CELL */
        .nook-story-page .cell-section {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: var(--white);
        }
        .nook-story-page .spreadsheet-cell-wrap {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            opacity: 0;
        }
        .nook-story-page .cell-formula-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 320px;
            background: #ececea;
            border: 1px solid #d0cecc;
            border-bottom: none;
            padding: 7px 14px;
        }
        .nook-story-page .cell-fx {
            font-family: 'Courier New', monospace;
            font-size: 11px;
            color: #999;
            font-style: italic;
        }
        .nook-story-page .cell-expr {
            font-family: 'Courier New', monospace;
            font-size: 11px;
            color: #555;
        }
        .nook-story-page .spreadsheet-cell {
            width: 320px;
            height: 96px;
            border: 2px solid #4CAF50;
            background: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: border-color 0.12s ease, background 0.3s ease, box-shadow 0.15s ease;
        }
        .nook-story-page .spreadsheet-cell.error {
            border-color: #D32F2F;
            background: rgba(211,47,47,0.04);
            box-shadow: 0 0 0 5px rgba(211,47,47,0.07);
            animation: nook-cell-shake 0.38s ease;
        }
        @keyframes nook-cell-shake {
            0%,100% { transform: translateX(0); }
            20%     { transform: translateX(-5px); }
            40%     { transform: translateX(5px); }
            60%     { transform: translateX(-3px); }
            80%     { transform: translateX(2px); }
        }
        .nook-story-page .cell-value {
            font-family: Georgia, serif;
            font-size: 38px;
            font-weight: 700;
            letter-spacing: -0.03em;
            color: var(--charcoal);
            transition: color 0.3s ease;
        }
        .nook-story-page .spreadsheet-cell.error .cell-value {
            color: #D32F2F;
        }
        .nook-story-page .cell-caption {
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: rgba(60,60,60,0.82);
            font-family: 'Courier New', monospace;
            margin-top: 20px;
            opacity: 0;
        }

        /* CONCLUSION — compression + disappearance */
        .nook-story-page .conclusion-section {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 12vh 80px;
            background: var(--white);
            position: relative;
        }
        .nook-story-page .conclusion-text-container {
            max-width: 720px;
            width: 100%;
            transition: none;
        }
        .nook-story-page .conclusion-para {
            font-family: 'Libre Baskerville', Georgia, serif;
            font-weight: 400;
            font-size: clamp(18px, 2vw, 24px);
            line-height: 1.9;
            color: #555555;
            margin-bottom: 28px;
            opacity: 0;
        }
        .nook-story-page .conclusion-para:last-child {
            margin-bottom: 0;
            font-style: italic;
            color: rgba(55,55,55,0.85);
        }

        /* ════════════════════════════════════════════
           CHAPTER 5 — THE EQUATION REWRITE
           ════════════════════════════════════════════ */

        /* CH4 → CH5 TRANSITION — THE BREATH */
        .nook-story-page .ch5-transition {
            position: relative;
            width: 100%;
            min-height: 80vh;
            background: linear-gradient(to bottom,
                var(--white) 0%,
                #f0f0f0 15%,
                #c0c0c0 35%,
                #808080 55%,
                #404040 75%,
                #1a1a1a 90%,
                #0a0a0a 100%
            );
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: clip;
        }

        /* SVG bloom — sits behind everything */
        .nook-breath-svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        /* Label wrap — sits above SVG */
        .nook-breath-label-wrap {
            position: relative;
            z-index: 2;
            text-align: center;
        }

        /* Eyebrow: "CHAPTER FIVE ·" */
        .nook-breath-eyebrow {
            display: block;
            font-family: var(--nook-font-sans);
            font-size: 13px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.30em;
            color: rgba(200, 168, 130, 1);
            margin-bottom: 14px;
            opacity: 0;
        }

        /* "Acceptance" */
        .nook-breath-word {
            display: block;
            font-family: Georgia, 'Times New Roman', serif;
            font-size: clamp(18px, 2.2vw, 28px);
            font-weight: 400;
            letter-spacing: 0.06em;
            color: rgba(201, 168, 106, 0.88);
            line-height: 1;
            opacity: 0;
        }

        /* Thin horizontal rules */
        .nook-breath-lines {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 18px;
            margin-top: 22px;
            opacity: 0;
        }

        .nook-breath-rule-left,
        .nook-breath-rule-right {
            height: 1px;
            width: 0;
            background: linear-gradient(
                to left,
                transparent 0%,
                rgba(201, 168, 106, 0.30) 100%
            );
        }

        .nook-breath-rule-right {
            background: linear-gradient(
                to right,
                transparent 0%,
                rgba(201, 168, 106, 0.30) 100%
            );
        }

        /* TERMINAL SECTION */
        .nook-story-page .terminal-section {
            min-height: 300vh;
            background: linear-gradient(to bottom,
                var(--white) 0%,
                #1a1a1a 10%,
                #0a0a0a 20%,
                #0a0a0a 100%
            );
            padding: 0;
            position: relative;
        }

        .terminal-stage {
            position: sticky;
            top: 8vh;
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
            padding: 0 80px;
        }

        .nook-story-page .terminal-window {
            background: #0a0a0a;
            border: 1px solid rgba(76, 175, 80, 0.3);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 0 60px rgba(76, 175, 80, 0.15);
        }

        .terminal-header {
            background: #1a1a1a;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 1px solid rgba(76, 175, 80, 0.2);
        }

        .terminal-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(76, 175, 80, 0.3);
        }

        .terminal-title {
            font-family: 'Courier New', monospace;
            font-size: 11px;
            color: rgba(76, 175, 80, 0.7);
            margin-left: 12px;
        }

        .nook-story-page .terminal-body {
            padding: 40px 32px;
            min-height: 500px;
        }

        .terminal-line {
            font-family: 'Courier New', monospace;
            font-size: 20px;
            line-height: 2.2;
            margin-bottom: 16px;
            position: relative;
        }

        .terminal-prompt {
            color: rgba(76, 175, 80, 0.6);
            margin-right: 8px;
        }

        .terminal-text {
            color: var(--terminal-green);
            text-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
        }

        /* Equation states */
        .eq-old {
            opacity: 1;
            will-change: opacity;
        }

        .eq-arrow {
            display: inline-block;
            color: rgba(201, 168, 106, 0.6);
            margin: 0 12px;
            opacity: 0;
        }

        .eq-new {
            opacity: 0;
            will-change: opacity;
        }

        /* Cursor — opacity controlled entirely by ScrollTrigger JS (inline style) */
        .nook-story-page .cursor {
            display: inline-block;
            width: 10px;
            height: 24px;
            background: var(--terminal-green);
            margin-left: 4px;
            vertical-align: middle;
            opacity: 0;
        }

        /* Font morphing classes */
        .nook-story-page .morph-serif {
            font-family: Georgia, serif;
            color: var(--amber-warm);
            text-shadow: 0 0 12px rgba(201, 168, 106, 0.3);
        }

        /* Final equation - special styling */
        .final-equation {
            margin-top: 48px;
            padding-top: 32px;
            border-top: 1px solid rgba(201, 168, 106, 0.2);
            font-size: 24px;
            text-align: center;
        }

        /* Comment lines */
        .terminal-comment {
            color: rgba(76, 175, 80, 0.4);
            font-size: 14px;
            font-style: italic;
            margin-bottom: 24px;
            opacity: 0;
        }

        /* CLOSING GRADIENT TRANSITION — dark to light, no text here */
        .nook-story-page .closing-section {
            min-height: 130vh;
            background: linear-gradient(to bottom,
                #0a0a0a 0%,
                #1a1410 18%,
                #2e2018 32%,
                #5a3d28 48%,
                #9e7a55 62%,
                #d4b896 76%,
                #ebe8dc 88%,
                #FFFEF9 100%
            );
        }

        /* CLOSING LIGHT SECTION — fully in the light, text lives here */
        .nook-story-page .closing-light-section {
            background: var(--cream);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 14vh 80px 16vh;
        }

        .nook-story-page .closing-text {
            max-width: 820px;
            font-family: 'Libre Baskerville', Georgia, serif;
            font-size: 20px;
            line-height: 1.95;
            color: var(--charcoal);
        }

        .nook-story-page .closing-text p {
            margin-bottom: 32px;
            opacity: 0;
        }

        .nook-story-page .closing-text p:last-child {
            margin-bottom: 0;
        }

        .nook-story-page .closing-highlight {
            font-weight: 500;
            font-style: italic;
        }

        /* Decorative rule before P3 */
        .nook-story-page .closing-engraving-rule-wrap {
            margin-top: 48px;
            margin-bottom: 48px;
            overflow: visible;
            opacity: 0;
        }

        .nook-story-page .closing-engraving-rule-svg {
            display: block;
            width: 100%;
            max-width: 320px;
            height: 18px;
            overflow: visible;
        }

        /* P3 climax phrase — warms to terracotta during emergence */
        .nook-story-page .closing-climax-phrase {
            font-style: italic;
            color: var(--charcoal);
        }

        /* ============================================
           ENDING — Dark bridge + door wipe onto mat photo
           ============================================ */
        .nook-dark-bridge {
            width: 100%;
            height: 120px;
            background: linear-gradient(to bottom, #FFFEF9 0%, #18160f 100%);
        }

        .nook-ending-door {
            position: relative;
            width: 100%;
            background: #18160f;
            padding: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .nook-door-stage {
            position: relative;
            width: 100%;
            height: 700px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .nook-door-light {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            clip-path: inset(0 100% 0 0%);
            overflow: hidden;
        }

        /* picture must be block + full-height so the img fills the light container.
           The img is absolutely positioned within picture so object-fit:cover
           stretches it to the full 320px stage height regardless of intrinsic size. */
        .nook-door-light picture {
            display: block;
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }

        /* Higher specificity than desktop's bare .nook-door-photo rule so height:100%
           wins over the intrinsic-ratio fallback that width:100% triggers on <img>. */
        .nook-story-page .nook-door-photo {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 50%;
            display: block;
            filter: brightness(0.88);
        }

        .nook-door-thread-overlay {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
        }

        .nook-door-thread-path {
            fill: none;
            stroke: rgba(255, 255, 255, 0.28);
            stroke-width: 1;
            stroke-linecap: round;
        }

        .nook-door-vignette {
            position: absolute;
            inset: 0;
            background: radial-gradient(
                ellipse at 50% 40%,
                transparent 40%,
                rgba(18, 16, 14, 0.55) 100%
            );
            pointer-events: none;
        }

        .nook-door-frame-lines {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 3;
            opacity: 0;
        }

        .nook-door-dot-row-wrap {
            width: 100%;
            background: #18160f;
            padding: 48px 80px 0;
            opacity: 0;
        }

        .nook-door-dot-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        .nook-door-journey-dot {
            width: 6px;
            height: 6px;
            background: #c8a882;
            border-radius: 50%;
            opacity: 0;
            flex-shrink: 0;
        }

        .nook-door-closing-wrap {
            width: 100%;
            background: #18160f;
            padding: 36px 40px 100px;
            text-align: center;
            opacity: 0;
        }

        .nook-door-closing-text {
            font-family: Georgia, serif;
            font-size: 12px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(200, 168, 130, 0.55);
            line-height: 2;
        }

        .nook-door-closing-period {
            color: #d4664a;
            opacity: 0.7;
        }

        .nook-mascot-figure {
            position: absolute;
            bottom: -30px;
            left: 44px;
            height: 260px;
            width: auto;
            opacity: 0.82;
            pointer-events: none;
            z-index: 5;
        }

        /* ============================================
           PRODUCT FEATURES SECTION
           ============================================ */
        .nook-product-features {
            width: 100%;
            background: var(--nook-cream-paper);
            padding: 56px 24px 64px;
            border-top: 1px solid var(--nook-ghost);
            border-bottom: 1px solid var(--nook-ghost);
        }

        .nook-features-eyebrow {
            font-family: var(--nook-font-sans);
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.24em;
            color: var(--nook-tan);
            text-align: center;
            margin-bottom: 8px;
        }

        .nook-features-heading {
            font-family: var(--nook-font-serif);
            font-size: 22px;
            font-weight: normal;
            color: var(--nook-text-charcoal);
            text-align: center;
            margin: 0 0 40px;
            line-height: 1.4;
        }

        .nook-features-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px 20px;
            max-width: 380px;
            margin: 0 auto;
        }

        .nook-feature-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .nook-feature-icon {
            width: 48px;
            height: 48px;
            flex-shrink: 0;
        }

        .nook-feature-label {
            font-family: var(--nook-font-sans);
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--nook-text-charcoal);
            text-align: center;
            line-height: 1.5;
        }

        /* ============================================
           CHAPTER TWO — THE MAT: UNROLLING BROADSIDE
           ============================================ */
        .nook-story-page .nook-ch2b-section {
            width: 100%;
            background: var(--nook-cream-warm);
            padding: 56px 0;
        }

        .nook-ch2b-label {
            font-family: var(--nook-font-sans);
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.28em;
            color: var(--nook-tan);
            text-align: center;
            margin-bottom: 24px;
            padding: 0 24px;
            opacity: 0;
        }

        @media (prefers-reduced-motion: reduce) {
            .nook-ch2b-label { opacity: 1; }
        }

        .nook-ch2b-scroll-outer {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        .nook-ch2b-fold-shadow {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 36px;
            pointer-events: none;
            z-index: 4;
            background:
                linear-gradient(to bottom,
                    rgba(245, 238, 225, 0.0) 0%,
                    rgba(245, 238, 225, 0.6) 30%,
                    rgba(200, 180, 150, 0.55) 55%,
                    rgba(90, 60, 30, 0.22) 78%,
                    rgba(50, 30, 10, 0.0) 100%
                );
        }

        .nook-ch2b-fold-shadow.is-fully-open {
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .nook-ch2b-img {
            display: block;
            width: 100%;
            height: auto;
        }

        @media (prefers-reduced-motion: reduce) {
            .nook-ch2b-scroll-outer {
                height: auto !important;
                overflow: visible;
            }
            .nook-ch2b-fold-shadow { display: none; }
            .nook-ch2b-img { transform: none !important; }
        }

        .nook-ch2b-affordance {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 20px;
            padding: 0 24px;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .nook-ch2b-affordance.is-visible {
            opacity: 1;
        }

        .nook-ch2b-affordance-line {
            flex: 1;
            height: 1px;
            background: rgba(200, 168, 130, 0.35);
            max-width: 60px;
        }

        .nook-ch2b-affordance-text {
            font-family: var(--nook-font-mono);
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: 0.22em;
            color: rgba(200, 168, 130, 0.7);
            white-space: nowrap;
        }

        @media (prefers-reduced-motion: reduce) {
            .nook-ch2b-affordance { display: none; }
        }

        /* ============================================
           MOBILE BREAKPOINTS
           ============================================ */

        /* Brand logo + header — mobile layout fix */
        @media (max-width: 600px) {
            .nook-brand-logo__nook {
                font-size: 44px;
            }
            .nook-brand-logo__mats {
                font-size: 28px;
            }
            /* Hide decorative elements that break the header layout on small screens */
            .nook-textile-pattern,
            .nook-organic-shape {
                display: none;
            }
            /* Center the logo in the now-single-column header */
            .nook-chapter-transition {
                justify-content: center;
            }
        }

        /* Ch2 split-screen — stack vertically on mobile */
        @media (max-width: 768px) {
            .nook-story-page .ch2-stage {
                flex-direction: column;
                height: auto;
            }
            .nook-story-page .ch2-left {
                width: 100%;
                height: auto;
                min-height: 0;
                border-right: none;
                border-bottom: 1px solid #e4ddd4;
            }
            /* Show only the first state statically on mobile */
            .nook-story-page .ch2-left-state.is-first {
                position: relative;
                inset: auto;
                opacity: 1 !important;
                pointer-events: auto !important;
                padding: 48px 24px 56px;
            }
            .nook-story-page .ch2-left-state:not(.is-first) {
                display: none;
            }
            /* Hide scroll nav elements that only make sense in the pinned layout */
            .ch2-state-counter,
            .ch2-scroll-hint,
            .ch2-strip-track {
                display: none;
            }
            .nook-story-page .ch2-right {
                display: none;
            }
        }

        /* Terminal — reduce padding on mobile so content fits */
        @media (max-width: 768px) {
            .terminal-stage {
                padding: 0 16px;
            }
            .terminal-line {
                font-size: 13px;
                line-height: 1.9;
            }
        }

        /* Mobile: assorted layout fixes */
        @media (max-width: 768px) {
            /* Col dividers (woven thread SVGs) create a 624px phantom gap in
               single-column layout — hide them entirely on mobile */
            .nook-col-divider {
                display: none;
            }

            /* Excel blow-up sentence uses nowrap which clips on small screens */
            .nook-story-page .blow-excel-text {
                white-space: normal;
                text-align: center;
            }

            /* Pin the diagram while the animation plays out.
               Section is taller than viewport — sticky child stays fixed
               while user scrolls through the extra height. */
            .nook-story-page .network-section {
                overflow: visible;
                padding: 0;
                margin-top: 120px;
                height: calc(100vh + 1100px);
            }
            .nook-story-page .network-sticky {
                position: sticky;
                top: 0;
                height: 100vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding-top: 20px;
                background: var(--cream);
            }
            .nook-story-page .network-eyebrow {
                font-size: 10px;
                letter-spacing: 0.18em;
                margin-bottom: 24px;
            }
            .nook-story-page .network-svg-h {
                display: none;
            }
            .nook-story-page .network-svg-v {
                display: block;
                /* Scale to fit inside the sticky viewport — bumped ~20% for mobile readability */
                width: min(100%, calc((100vh - 60px) * 420 / 820));
                height: auto;
            }
        }

        /* ============================================================
           NOOK NOOK MOBILE — All new overrides below
           Added: 2026-03-15
           Rule: All changes are @media (max-width: 768px) only.
           Desktop behavior is completely unchanged.
           ============================================================ */

        @media (max-width: 768px) {

            /* === HEADER LOGO: single-row fix + blob restore === */

            /* Stack logo + blob vertically, centered */
            .nook-chapter-transition {
                padding: 28px 20px 20px;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: auto;
            }

            /* Each letter is its own <span> via JS — prevent inter-letter wrapping */
            .nook-brand-logo__main {
                white-space: nowrap;
            }

            .nook-brand-logo__nook {
                white-space: nowrap;
            }

            /* Restore blob — overrides display:none from the 600px block */
            .nook-organic-shape {
                display: flex;
                width: auto;
                height: auto;
                justify-content: center;
                margin-top: 8px;
            }

            /* Scale blob down to fit under the logo */
            .nook-organic-shape svg {
                width: 100px;
                height: 100px;
            }

            /* === THRESHOLD (DOORMAT) PHOTO === */

            /* 82vh on mobile = ~692px tall for a wide landscape image — crops badly.
               50vw keeps the container proportional to the image's landscape aspect ratio. */
            .nook-threshold-container {
                height: 56vw;
                min-height: 200px;
                max-height: 320px;
            }

            /* === STEP 1: GLOBAL IMAGE SCALING === */

            .nook-story-page img {
                max-width: 100%;
                height: auto;
            }

            /* === STEP 2: PADDING & SPACING PASS === */

            .nook-product-reveal {
                min-height: auto;
                justify-content: flex-start;
                padding: 84px 20px calc(8vh + 120px);
            }

            /* Word stagger: start invisible on mobile (desktop uses ghost color instead) */
            .nook-opening-word {
                color: var(--nook-text-charcoal);
                opacity: 0;
            }

            /* Reduced-motion: words visible immediately */
            @media (prefers-reduced-motion: reduce) {
                .nook-opening-word {
                    opacity: 1 !important;
                    transform: none !important;
                }
            }

            /* Ch3 intro already partially overridden (18vh 40px) — tighten further */
            .nook-ch3-intro {
                padding: 14vh 20px 0;
            }

            .nook-summit-victory {
                padding: 8vh 20px 400px;
                overflow: hidden;
            }

            /* Reduce 40vh dead space at bottom */
            .nook-peak-quote {
                padding: 400px 20px 16vh;
            }

            .nook-story-page .ledger-section {
                padding: 8vh 20px 16vh;
            }

            /* Ledger full-bleed: match new 20px section padding */
            .nook-story-page .ledger-header {
                margin-left: -20px;
                margin-right: -20px;
                padding-left: 20px;
                padding-right: 20px;
            }

            .nook-story-page .ledger-row {
                margin-left: -20px;
                margin-right: -20px;
                padding-left: 20px;
                padding-right: 20px;
                height: auto;
                min-height: 60px;
                padding-top: 12px;
                padding-bottom: 12px;
            }

            .nook-story-page .crisis-transition {
                padding: 6vh 20px;
            }

            .nook-story-page .hinge-section {
                padding: 0 20px;
            }

            .nook-story-page .blow-excel {
                padding: 0 20px;
            }

            .nook-story-page .conclusion-section {
                padding: 8vh 20px;
            }

            .nook-story-page .closing-light-section {
                padding: 10vh 20px 12vh;
            }

            .nook-dot-separator {
                padding: 8px 20px 0;
            }

            .nook-door-dot-row-wrap {
                padding: 32px 20px 0;
            }

            .nook-door-closing-wrap {
                padding: 28px 20px 60px;
            }

            .nook-door-closing-text {
                padding-left: 20px;
            }

            /* === STEP 3: VICTORY SECTION === */

            /* Scale up the whole metric block on mobile */
            .nook-summit-metric {
                transform: scale(1.2);
                transform-origin: top center;
            }

            /* Photos: taller on mobile so landscape images aren't sliced thin */
            .nook-summit-photo {
                height: 300px;
            }

            /* First photo: door scene — anchor to bottom so doormat stays visible */
            #nook-pc1 {
                object-position: center 85%;
            }

            /* Second photo: info graphic — show full image, auto height so it fills container */
            #nook-pc2 {
                object-fit: contain;
                background: #f0eeea;
                height: auto;
            }

            /* Right column: remove fixed height, scale to match left metric */
            .nook-summit-right {
                height: auto;
                padding-top: 40px;
                padding-bottom: 60px;
                transform: scale(1.2);
                transform-origin: top center;
                overflow: visible;
            }

            /* Ticker display — clamp to readable but not overwhelming */
            .nook-ticker-display {
                font-size: clamp(52px, 14vw, 80px);
            }

            /* Victory large numbers */
            .nook-victory-large {
                font-size: clamp(36px, 10vw, 56px);
            }

            /* === STEP 4: LEDGER TYPOGRAPHY === */

            .nook-story-page .ledger-row-text {
                font-size: 14px;
                line-height: 1.7;
                min-width: 0;
            }

            /* Row number column — narrow it */
            .nook-story-page .ledger-row-num {
                width: 36px;
                font-size: 8px;
            }

            .ledger-col-head.num {
                width: 36px;
            }

            /* === STEP 5: TERMINAL SECTION === */

            /* Reduce total scroll distance — 300vh is too long on mobile */
            .nook-story-page .terminal-section {
                min-height: 200vh;
            }

            /* Add breathing room above terminal window */
            .terminal-stage {
                padding: 8vh 16px 0;
            }

            /* Equation lines */
            .terminal-line {
                font-size: 13px;
                line-height: 1.8;
                margin-bottom: 10px;
            }

            /* Hide arrow on mobile — old and new are separate lines */
            .terminal-line .eq-arrow {
                display: none;
            }

            /* Old equation: its own line */
            .terminal-line .eq-old {
                display: block;
            }

            /* New equation: its own line below, with its own prompt */
            .terminal-line .eq-new {
                display: block;
            }

            /* Add a $ prompt before each new equation on mobile */
            .terminal-line .eq-new::before {
                content: '$ ';
                color: rgba(76, 175, 80, 0.6);
            }

            /* Final equation */
            .final-equation {
                font-size: 14px;
                margin-top: 28px;
                padding-top: 20px;
            }

            /* Terminal comment lines */
            .terminal-comment {
                font-size: 11px;
                margin-bottom: 16px;
            }

            /* Terminal body */
            .nook-story-page .terminal-body {
                padding: 24px 18px;
                min-height: auto;
            }

            /* Cursor: match smaller font */
            .nook-story-page .cursor {
                width: 7px;
                height: 18px;
            }

            /* === STEP 6: PEAK ZONE === */

            /* Gradient bridge: slightly shorter on mobile */
            .nook-cream-white-bridge { height: 60px; }

            /* Quote text: ensure readable and no overflow */
            .nook-peak-quote-text {
                font-size: clamp(18px, 5vw, 26px);
                text-align: center;
            }

            /* Peak space: kill the massive 115vh min-height, use fixed padding */
            .nook-peak-space {
                min-height: auto;
                padding: 0 20px;
            }

            /* Split whisper — readable but tight */
            .nook-split-word {
                font-size: 11px;
                letter-spacing: 0.26em;
            }

            /* === STEP 7: HINGE + CELL + CONCLUSION === */

            /* Cell width: fits on 390px with 20px side padding */
            .nook-story-page .spreadsheet-cell-wrap {
                width: 100%;
                max-width: 320px;
                align-items: stretch;
            }

            .nook-story-page .spreadsheet-cell,
            .nook-story-page .cell-formula-bar {
                width: 100%;
            }

            /* Cell value font */
            .nook-story-page .cell-value {
                font-size: clamp(28px, 8vw, 38px);
            }

            /* Conclusion text */
            .nook-story-page .conclusion-para {
                font-size: clamp(16px, 4.5vw, 22px);
                line-height: 1.85;
            }

            /* Closing text — extra left padding prevents italic glyph clipping */
            .nook-story-page .closing-text {
                font-size: 17px;
                line-height: 1.9;
                padding-left: 4px;
            }

            /* === STEP 8: DOOR ENDING === */

            /* Reduce stage height — still dramatic, not taller than the viewport */
            .nook-door-stage {
                height: 85vw;
                min-height: 320px;
                max-height: 520px;
            }

            /* Mascot: scale down slightly for narrower frame.
               !important required to override height: 260px !important in fl718-nook.css (desktop). */
            .nook-mascot-figure {
                height: 180px !important;
                bottom: -20px;
                left: 20px;
            }

        }

        /* ── Ch2 Mobile: "Ink Soaking In" animated underlines ──────────
           On mobile, key phrases get underlines that draw left-to-right
           via background-image + background-size animation. Each line
           fragment draws independently thanks to box-decoration-break.
           Desktop retains the existing cycling-state behavior. */
        @media (max-width: 768px) {
            .ch2-opening-para mark {
                color: var(--nook-text-charcoal);
                border-bottom: none;
                text-decoration: none;
                background-image: linear-gradient(var(--nook-terracotta), var(--nook-terracotta));
                background-position: left bottom;
                background-repeat: no-repeat;
                background-size: 0% 1.5px;
                padding-bottom: 3px;
                -webkit-box-decoration-break: clone;
                box-decoration-break: clone;
            }
        }

        /* Reduced motion: show underlines immediately */
        @media (prefers-reduced-motion: reduce) {
            .ch2-opening-para mark {
                background-size: 100% 1.5px !important;
            }
        }

}