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

        :root {
            --neon: #ff00de;
            --bg: #060606;
            --text: rgba(255,255,255,0.87);
            --text-dim: rgba(255,255,255,0.4);
            --mono: 'Space Mono', monospace;
            --flip-ms: 700ms;
        }

        html, body {
            width: 100%; height: 100%;
            overflow: hidden;
            background: var(--bg);
            font-family: var(--mono);
            color: var(--text);
        }

        /* NAV */
        .cv-nav {
            position: fixed; top: 0; left: 0; right: 0; z-index: 900;
            padding: 0.65rem 1.4rem;
            display: flex; align-items: center; justify-content: space-between;
            background: rgba(6,6,6,0.9);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid rgba(255,0,222,0.08);
        }
        .cv-nav-brand { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.3em; color: var(--neon); text-decoration: none; text-transform: lowercase; }
        .cv-nav-brand:hover { opacity: 0.6; }
        .cv-nav-back  { font-size: 0.57rem; letter-spacing: 0.14em; color: var(--text-dim); text-decoration: none; text-transform: uppercase; transition: color .2s; }
        .cv-nav-back:hover { color: var(--neon); }
        #nav-label { font-size: 0.5rem; letter-spacing: 0.22em; color: rgba(255,255,255,0.2); text-transform: lowercase; }

        /* BOOK STAGE  full viewport 3D scene */
        #book-stage {
            position: fixed;
            inset: 0;
            perspective: 3200px;
            perspective-origin: 50% 50%;
            overflow: hidden;
            transform-origin: 0 0;         /* translate+scale — origin top-left */
            transition: transform 380ms cubic-bezier(0.25,0.46,0.45,0.94);
            cursor: zoom-in;
            user-select: none;
        }
        #book-stage.is-zoomed   { cursor: zoom-out; }
        #book-stage.is-dragging { cursor: grabbing !important; transition: none; }

        /* Static left / right halves */
        #book-left, #book-right {
            position: absolute;
            top: 0; bottom: 0;
            width: 50%;
            overflow: hidden;
            background: var(--bg);
        }
        #book-left  { left: 0;   box-shadow: inset -8px 0 22px rgba(0,0,0,0.55); }
        #book-right { left: 50%; box-shadow: inset  8px 0 22px rgba(0,0,0,0.4); }

        /* Spine */
        .book-spine {
            position: absolute; left: 50%; top: 0; bottom: 0;
            width: 7px; margin-left: -3px;
            background: linear-gradient(to right,
                rgba(0,0,0,0.9) 0%,
                rgba(255,0,222,0.18) 50%,
                rgba(0,0,0,0.8) 100%);
            z-index: 40;
            pointer-events: none;
            box-shadow: 0 0 22px rgba(255,0,222,0.1);
        }

        /* FLIP PANELS */
        #flip-fwd, #flip-bwd {
            position: absolute;
            top: 0; bottom: 0;
            width: 50%;
            transform-style: preserve-3d;
            pointer-events: none;
            z-index: 30;
            will-change: transform;
        }
        #flip-fwd { left: 50%; transform-origin: left center; }
        #flip-bwd { left: 0;   transform-origin: right center; }

        .flip-face {
            position: absolute; inset: 0;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            overflow: hidden;
        }
        /* back face for forward flip: rotateY(180deg) in local space */
        .ff-back { transform: rotateY(180deg); }
        /* back face for backward flip: rotateY(-180deg) in local space */
        .fb-back { transform: rotateY(-180deg); }

        /* Shadow cast by turning page */
        #page-shadow {
            position: absolute; top: 0; bottom: 0;
            pointer-events: none; z-index: 28;
            width: 50%; opacity: 0;
            transition: opacity .12s linear;
        }
        #page-shadow.shadow-fwd {
            left: 0;
            background: linear-gradient(to left, rgba(0,0,0,0.55) 0%, transparent 100%);
        }
        #page-shadow.shadow-bwd {
            left: 50%;
            background: linear-gradient(to right, rgba(0,0,0,0.55) 0%, transparent 100%);
        }

        /* NAVIGATION BUTTONS */
        .book-btn {
            position: fixed;
            top: 50%; transform: translateY(-50%);
            z-index: 800;
            width: 42px; height: 88px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(6,6,6,0.5);
            border: 1px solid rgba(255,0,222,0.1);
            color: rgba(255,255,255,0.3);
            cursor: pointer;
            font-family: var(--mono);
            font-size: 1.55rem; line-height: 1;
            transition: color .18s, border-color .18s, background .18s;
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .book-btn:hover  { color: var(--neon); border-color: rgba(255,0,222,0.45); background: rgba(6,6,6,0.85); }
        .book-btn:active { opacity: .7; }
        .book-btn:disabled { opacity: .12; pointer-events: none; }
        #btn-prev { left: 0;   border-left: none;  border-radius: 0 4px 4px 0; }
        #btn-next { right: 0;  border-right: none; border-radius: 4px 0 0 4px; }

        /* PAGE COUNTER */
        #page-counter {
            position: fixed; bottom: 1rem; left: 50%;
            transform: translateX(-50%);
            z-index: 800;
            font-size: 0.48rem; letter-spacing: 0.3em;
            color: rgba(255,255,255,0.2);
            font-family: var(--mono);
            white-space: nowrap;
            pointer-events: none;
        }

        /* HALF CONTENT  split image technique */
        .half-img { position: absolute; inset: 0; overflow: hidden; }
        .half-img img {
            position: absolute; top: 0; height: 100%;
            width: 200%; /* 200% of container = 100vw, spans full spread */
            object-fit: cover; object-position: top;
            display: block;
        }
        .half-img-l img { left: 0; }         /* left half: show left portion */
        .half-img-r img { left: -100%; }     /* right half: show right portion */

        /* For the cover  full bleed on left side */
        .half-fill { position: absolute; inset: 0; overflow: hidden; }
        .half-fill img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

        /* Cover right panel */
        .cover-panel {
            position: absolute; inset: 0;
            display: flex; flex-direction: column;
            justify-content: flex-end; align-items: flex-start;
            padding: clamp(1.8rem,5vh,4rem) clamp(1.2rem,4vw,3rem);
            background: #000;
        }
        .cover-year  { font-size: .5rem; letter-spacing: .35em; color: var(--neon); text-transform: uppercase; margin-bottom: 1.4rem; }
        .cover-name  { font-size: clamp(.72rem,1.8vw,1.1rem); font-weight: 700; color: #fff; line-height: 1.4; margin-bottom: .55rem; text-transform: lowercase; letter-spacing: .06em; }
        .cover-label { font-size: clamp(.52rem,1.1vw,.66rem); color: rgba(255,255,255,.36); letter-spacing: .18em; text-transform: uppercase; line-height: 1.8; }
        .cover-brand { margin-top: 2.8rem; font-size: .48rem; letter-spacing: .5em; color: var(--neon); text-transform: lowercase; }

        /* Backcover text panel */
        .backcover-panel {
            position: absolute; inset: 0;
            overflow-y: auto;
            display: flex; flex-direction: column;
            justify-content: center;
            padding: clamp(3rem,8vh,5.5rem) clamp(1.1rem,2.8vw,2rem) clamp(2rem,5vh,3.5rem);
            background: #080808;
            scrollbar-width: thin;
            scrollbar-color: rgba(255,0,222,0.18) transparent;
        }
        .backcover-panel p {
            font-size: clamp(.52rem,.88vw,.7rem);
            line-height: 1.95; margin-bottom: 1.15em;
            color: rgba(255,255,255,.72);
        }
        .backcover-panel .text-verse {
            font-style: italic; color: var(--neon) !important;
            border-left: 2px solid var(--neon);
            padding-left: .8rem; margin: 1.3em 0 !important;
            line-height: 2 !important;
        }
        .backcover-panel .text-signature {
            margin-top: 1.4rem; padding-top: .75rem;
            border-top: 1px solid rgba(255,0,222,.12);
            font-size: .52rem !important; letter-spacing: .1em;
            color: rgba(255,255,255,.28) !important;
            font-style: italic; line-height: 1.9 !important;
        }

        /* Page numbers */
        .pnum {
            position: absolute; bottom: .75rem;
            font-family: var(--mono);
            font-size: .46rem; letter-spacing: .22em;
            color: rgba(255,255,255,.18); z-index: 5;
            pointer-events: none;
        }
        .pnum-l { left: .9rem; }
        .pnum-r { right: .9rem; }

        /* GRAIN */
        .grain {
            position: fixed; inset: 0; pointer-events: none; z-index: 990; opacity: .025;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-size: 200px 200px;
        }