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

        body {
            background: #d9d2ca;
            margin: 0;
            padding: 0;
            overflow: hidden; /* no scroll — navigation is button-driven */
        }

        /* ── Splash / loading screen ── */
        #splash {
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: #d9d2ca;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.8s ease;
        }
        #splash.fade-out {
            opacity: 0;
            pointer-events: none;
        }
        .splash-content {
            text-align: center;
        }
        .splash-hint {
            font-family: 'Caveat', cursive;
            font-size: 22px;
            color: #8a7e72;
            letter-spacing: 0.04em;
            opacity: 0;
            animation: splashFadeIn 0.9s ease forwards;
            animation-delay: 0.3s;
        }
        .splash-title {
            font-family: 'Special Elite', monospace;
            font-size: 36px;
            font-weight: 400;
            color: #4a433b;
            letter-spacing: 0.03em;
            margin-top: 12px;
            opacity: 0;
            animation: splashFadeIn 0.9s ease forwards;
            animation-delay: 1.2s;
        }
        .splash-loading-text {
            font-family: 'Special Elite', monospace;
            font-size: 13px;
            color: #8a7e72;
            letter-spacing: 0.06em;
            margin-top: 28px;
            opacity: 0;
            animation: splashFadeIn 0.6s ease forwards;
            animation-delay: 2.0s;
        }
        .splash-progress {
            width: 200px;
            height: 3px;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 2px;
            margin: 10px auto 0;
            overflow: hidden;
            opacity: 0;
            animation: splashFadeIn 0.6s ease forwards;
            animation-delay: 2.0s;
        }
        .splash-progress-bar {
            height: 100%;
            width: 0%;
            background: #8a7e72;
            border-radius: 2px;
            transition: width 0.3s ease;
        }
        .splash-percent {
            font-family: 'Special Elite', monospace;
            font-size: 13px;
            color: #8a7e72;
            letter-spacing: 0.08em;
            margin-top: 8px;
            opacity: 0;
            animation: splashFadeIn 0.6s ease forwards;
            animation-delay: 2.0s;
        }
        @keyframes splashFadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ── Hide viewport until JS is ready ── */
        :root {
            /* Height of the top nav bar — referenced by #viewport and by
               updateSceneScale() in js/shared.js. Change here + in shared.js
               together if you want a different nav height. */
            --nav-height: 44px;
        }
        #viewport {
            position: fixed;
            top: var(--nav-height);
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
            background: #d9d2ca;
            touch-action: none; /* we handle touch drag ourselves */
            opacity: 0;
            transition: opacity 0.6s ease;
        }
        #viewport.revealed {
            opacity: 1;
        }

        /* ── Desk cursor — signals the surface is draggable ── */
        #viewport { cursor: grab; }

        /* ── Scale wrapper — scales the whole scene to fill viewport height ── */
        #scene-scale-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            /* Scene scaling is applied via the CSS `zoom` property in
               js/shared.js → updateSceneScale(). We use `zoom` (not
               `transform: scale`) so Safari renders contents at native
               resolution rather than rasterising at 1x then stretching
               the bitmap (which softens photos, text and line art). */
        }

        /* ══════════════════════════════════════════════════════════════════
           MOBILE LANDING PAGE
           Shown only on phones (via body.mobile-block-active). A scrollable
           single-column view with hero image, intro, action buttons, and
           four work cards (SPH · ZMP · MIC · Prism) linking to PDFs or
           inline swipeable galleries.
        ══════════════════════════════════════════════════════════════════ */
        #mobile-block {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: none;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            background: #f5f1e8;
            color: #3c2d23;
            font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
        }
        body.mobile-block-active #mobile-block { display: block; }
        body.mobile-block-active #viewport,
        body.mobile-block-active #splash,
        body.mobile-block-active .nav-chevron,
        body.mobile-block-active .top-nav,
        body.mobile-block-active #fullscreen-btn { display: none !important; }

        .m-page {
            max-width: 640px;
            margin: 0 auto;
            padding-bottom: 40px;
        }

        /* ── Hero ── */
        .m-hero {
            width: 100%;
            aspect-ratio: 1200 / 630;
            background: #d9d2ca;
            overflow: hidden;
        }
        .m-hero img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* ── Limited-version notice ── */
        .m-notice {
            margin: 0;
            padding: 14px 22px;
            background: rgba(27, 110, 106, 0.08);
            border-left: 3px solid #1b6e6a;
            font-size: 13px;
            line-height: 1.5;
            color: #3c2d23;
        }
        .m-notice strong {
            color: #1b6e6a;
            font-weight: 600;
        }

        /* ── Intro ── */
        .m-intro {
            display: flex;
            gap: 18px;
            padding: 26px 22px 10px;
            align-items: flex-start;
        }
        .m-polaroid {
            flex-shrink: 0;
            width: 110px;
            background: #fff;
            padding: 8px 8px 22px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            transform: rotate(-4deg);
            margin-top: 6px;
            border-radius: 2px;
        }
        .m-polaroid img {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            display: block;
            border-radius: 1px;
        }
        .m-polaroid-cap {
            display: block;
            text-align: center;
            font-family: 'Caveat', 'Georgia', serif;
            font-size: 14px;
            color: #666;
            margin-top: 6px;
        }
        .m-intro-copy {
            flex: 1;
            min-width: 0;
        }
        .m-intro-copy p {
            margin: 0 0 10px;
            font-size: 15px;
            line-height: 1.55;
            color: #3c2d23;
        }
        .m-intro-copy p strong {
            color: #1b6e6a;
            font-weight: 600;
        }

        /* ── Actions ── */
        .m-actions {
            display: flex;
            gap: 10px;
            padding: 14px 22px 28px;
            flex-wrap: wrap;
        }
        .m-btn {
            flex: 1;
            min-width: 140px;
            text-align: center;
            padding: 14px 18px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-decoration: none;
            border-radius: 6px;
            transition: background 0.15s, transform 0.1s;
        }
        .m-btn:active { transform: translateY(1px); }
        .m-btn-primary {
            background: #1b6e6a;
            color: #fff;
        }
        .m-btn-primary:hover { background: #145754; }
        .m-btn-secondary {
            background: transparent;
            color: #1b6e6a;
            border: 1px solid #1b6e6a;
        }
        .m-btn-secondary:hover { background: #1b6e6a; color: #fff; }

        /* ── "Best viewed on desktop" callout ── */
        .m-best-viewed {
            margin: 4px 22px 28px;
            padding: 16px 18px;
            background: #fff;
            border: 1px solid rgba(27, 110, 106, 0.25);
            border-radius: 8px;
            text-align: center;
        }
        .m-best-viewed-title {
            font-family: 'Caveat', 'Georgia', serif;
            font-size: 22px;
            color: #1b6e6a;
            margin-bottom: 6px;
            line-height: 1.2;
        }
        .m-best-viewed p {
            margin: 0;
            font-size: 13px;
            line-height: 1.55;
            color: #3c2d23;
        }

        /* ── Work section ── */
        .m-work {
            padding: 0 22px;
        }
        .m-section-title {
            font-family: 'Caveat', 'Georgia', serif;
            font-size: 28px;
            font-weight: 400;
            color: #1b6e6a;
            text-align: center;
            margin: 10px 0 22px;
        }
        .m-card {
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
            margin-bottom: 22px;
        }
        .m-card-image {
            width: 100%;
            aspect-ratio: 16 / 10;
            background: #eee;
            overflow: hidden;
        }
        .m-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .m-card-body {
            padding: 18px 20px 20px;
        }
        .m-card-body h3 {
            margin: 0 0 2px;
            font-size: 18px;
            font-weight: 600;
            color: #2a2a2a;
            letter-spacing: 0.01em;
        }
        .m-card-sub {
            margin: 0 0 12px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #1b6e6a;
        }
        .m-card-body p:not(.m-card-sub) {
            margin: 0 0 14px;
            font-size: 14px;
            line-height: 1.55;
            color: #3c2d23;
        }
        .m-card-cta {
            display: inline-block;
            padding: 10px 18px;
            background: #1b6e6a;
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-decoration: none;
            border-radius: 6px;
            transition: background 0.15s;
        }
        .m-card-cta:hover { background: #145754; }

        /* ── Horizontal swipeable gallery ── */
        .m-gallery {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            padding: 4px 20px 12px;
            scrollbar-width: none;
        }
        .m-gallery::-webkit-scrollbar { display: none; }
        .m-gallery img {
            flex: 0 0 auto;
            height: 200px;
            width: auto;
            scroll-snap-align: start;
            border-radius: 6px;
            object-fit: cover;
            background: #eee;
        }
        .m-gallery-hint {
            text-align: right;
            padding: 0 22px 14px;
            font-family: 'Caveat', 'Georgia', serif;
            font-size: 14px;
            color: #888;
        }

        /* ── Footer ── */
        .m-footer {
            padding: 28px 22px 10px;
            text-align: center;
        }
        .m-footer-note {
            font-size: 13px;
            line-height: 1.55;
            color: #666;
            font-style: italic;
            margin: 0 0 22px;
        }
        .m-footer-note strong { color: #1b6e6a; font-style: normal; }
        .m-footer-contact {
            font-size: 13px;
            line-height: 1.7;
            margin: 0 0 22px;
            color: #3c2d23;
        }
        .m-footer-contact a {
            color: #1b6e6a;
            text-decoration: none;
        }
        .m-footer-copy {
            font-size: 11px;
            color: #999;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin: 0;
        }
        body.is-dragging,
        body.is-dragging * { cursor: grabbing !important; }

        /* ── Edge chevrons — subtle "more this way" indicators ── */
        .nav-chevron {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            z-index: 500;
            width: 32px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(188, 144, 151, 0.20);
            border: none;
            color: rgba(255, 255, 255, 0.75);
            font-size: 20px;
            font-weight: 300;
            cursor: pointer;
            user-select: none;
            transition: opacity 400ms ease, background 200ms ease;
            pointer-events: auto;
        }
        .nav-chevron:hover {
            background: rgba(188, 144, 151, 0.55);
            color: #fff;
        }
        .nav-chevron:active {
            background: rgba(188, 144, 151, 0.75);
        }
        .nav-chevron.hidden {
            opacity: 0;
            pointer-events: none;
        }
        #nav-back {
            left: 0;
            border-radius: 0 8px 8px 0;
        }
        #nav-fwd {
            right: 0;
            border-radius: 8px 0 0 8px;
        }

        /* ══════════════════════════════════════════
           SCENE — fixed canvas, not liquid
        ══════════════════════════════════════════ */
        .sceneWrap {
            position: absolute;
            top: 0;
            left: 0;
            width: var(--world-w, 1456px);
            height: 816px;
            overflow: visible; /* allow lifted shadows to render */
        }

        .sceneClip {
            position: absolute;
            inset: 0;
            overflow: hidden; /* clip ONLY the desk background */
            pointer-events: none;
        }

        .desk {
            position: absolute;
            inset: 0;
            background-image: url('web-elements/desk-grain.jpg');
            background-repeat: repeat;
            background-size: 1456px 816px;
            background-position: left top;
        }

        /* Soft light spill from the lamp (screen blend) */
        #light-glow {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 40;
            opacity: 0.85;
            mix-blend-mode: screen;
            background:
                radial-gradient(
                    520px 520px at var(--lx, 80px) var(--ly, 60px),
                    rgba(255, 246, 214, 0.72),
                    rgba(255, 246, 214, 0) 70%
                );
        }

        /* ══════════════════════════════════════════
           BASE OBJECT — all elements absolute pixels
        ══════════════════════════════════════════ */
        .obj {
            position: absolute;
        }
        .obj img {
            display: block;
            width: 100%;
            height: auto;
            pointer-events: none;
        }

        /* Shadow nodes are separate elements so they can cast across other items (z-index aware) */
        #shadow-layer,
        #content-layer {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        #content-layer > * {
            pointer-events: auto;
        }

        .shadowNode {
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
            transform-origin: 50% 50%;
            overflow: visible;
            pointer-events: none;
            will-change: transform, opacity, filter;
        }

        .shadowNode .contact,
        .shadowNode .castWrap,
        .shadowNode .castRect {
            position: absolute;
            inset: 0;
            transform: translateZ(0);
        }

        .shadowNode .castWrap {
            transform-origin: 50% 50%;
            pointer-events: none;
        }

        .shadowNode .contact {
            border-radius: 9999px;
            background: radial-gradient(closest-side, rgba(70, 50, 35, 0.24), rgba(70, 50, 35, 0));
            filter: blur(3px);
            opacity: 0.18;
        }

        .shadowNode .castWrap .cast {
            width: 100%;
            height: auto;
            display: block;
            filter: blur(16px) brightness(0) saturate(0);
            opacity: 0.14;
        }

        .shadowRect {
            width: 100%;
            height: 100%;
            border-radius: 6px;
            background: rgba(70, 50, 35, 0.18);
            filter: blur(10px);
            opacity: 0.22;
        }

        .shadowNode .castRect {
            border-radius: 10px;
            background: rgba(70, 50, 35, 0.18);
            filter: blur(16px);
            opacity: 0.14;
        }

        /* ══════════════════════════════════════════
           LIFTABLE — only photos, post-its, CV
        ══════════════════════════════════════════ */
        .liftable {
            cursor: pointer;
            transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
                        filter 0.35s ease;
        }
        /* Hover handled via JS to preserve base rotation */

        /* ══════════════════════════════════════════
           OBJECT POSITIONS — pixel perfect to composite
        ══════════════════════════════════════════ */

        /* ── positions from layout.json (applied by JS) ── */
        #lamp {
            z-index: 60; /* lamp sits in front of everything */
        }
        #vase {
            z-index: 5;
        }
        #latte {
            z-index: 5;
        }
        #phone {
            z-index: 6;
        }
        #laptop {
            z-index: 5;
        }
        #notepad {
            z-index: 6;
        }
        #styling-guide {
            z-index: 7;
            cursor: pointer;
        }
        #glasses {
            z-index: 7;
        }
        #gold-pen {
            z-index: 7;
        }
        #polaroid-a {
            z-index: 8;
        }
        #polaroid-b {
            z-index: 8;
        }
        #polaroid-c {
            z-index: 8;
        }

        /* ══════════════════════════════════════════
           CONTACT MODAL (business card click)
        ══════════════════════════════════════════ */
        #contact-modal {
            position: fixed;
            inset: 0;
            z-index: 2000;
            display: none;
            background: rgba(0, 0, 0, 0.32);
            -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
        }
        body.contact-open #contact-modal {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .contact-card {
            pointer-events: auto;
            width: min(480px, 90vw);
            background: #f9f4ee;
            border-radius: 10px;
            box-shadow: 0 40px 140px rgba(0, 0, 0, 0.45);
            position: relative;
            overflow: hidden;
        }
        .contact-content {
            padding: 40px 40px 32px;
        }
        .contact-name {
            font-family: Georgia, serif;
            font-size: 28px;
            letter-spacing: 0.04em;
            color: #3a1a05;
            margin: 0 0 4px;
        }
        .contact-tagline {
            font-family: Georgia, serif;
            font-size: 13px;
            color: #1b6e6a;
            font-style: italic;
            letter-spacing: 0.06em;
            margin: 0 0 16px;
        }
        .contact-content hr {
            border: 0;
            height: 1px;
            background: rgba(27, 110, 106, 0.3);
            margin: 16px 0;
        }
        .contact-details {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .contact-row {
            display: flex;
            align-items: baseline;
            gap: 12px;
        }
        .contact-label {
            font-family: Arial, sans-serif;
            font-size: 10px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #1b6e6a;
            width: 70px;
            flex-shrink: 0;
        }
        .contact-link {
            font-family: Georgia, serif;
            font-size: 14px;
            color: #3a1a05;
            text-decoration: none;
        }
        .contact-link:hover {
            color: #1b6e6a;
            text-decoration: underline;
        }
        .contact-value {
            font-family: Georgia, serif;
            font-size: 14px;
            color: #3a1a05;
        }
        .contact-form {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .contact-input {
            font-family: Georgia, serif;
            font-size: 13px;
            color: #3a1a05;
            background: #fff;
            border: 1px solid rgba(0, 0, 0, 0.12);
            border-radius: 6px;
            padding: 10px 14px;
            /* Using a transparent outline so keyboard focus gets a visible
               ring via :focus-visible without double-drawing with the border. */
            outline: 2px solid transparent;
            outline-offset: 2px;
            transition: border-color 0.2s, outline-color 0.2s;
        }
        .contact-input:focus {
            border-color: #1b6e6a;
        }
        .contact-input:focus-visible {
            outline-color: #1b6e6a;
        }
        .contact-input::placeholder {
            color: rgba(0, 0, 0, 0.3);
        }
        .contact-textarea {
            resize: vertical;
            min-height: 60px;
        }
        .contact-submit {
            font-family: Arial, sans-serif;
            font-size: 12px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #fff;
            background: #1b6e6a;
            border: none;
            border-radius: 6px;
            padding: 12px 20px;
            cursor: pointer;
            transition: background 0.2s;
            align-self: flex-start;
        }
        /* Download CV button — sits between contact details and enquiry form */
        .contact-cv-download {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            align-self: center;
            margin: 6px auto 2px;
            font-family: Arial, sans-serif;
            font-size: 12px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #1b6e6a;
            background: transparent;
            border: 1px solid #1b6e6a;
            border-radius: 6px;
            padding: 10px 18px;
            text-decoration: none;
            transition: background 0.2s, color 0.2s, transform 0.15s;
        }
        .contact-cv-download:hover {
            background: #1b6e6a;
            color: #fff;
            transform: translateY(-1px);
        }
        .contact-cv-download .cv-download-icon {
            font-size: 14px;
            line-height: 1;
            transform: translateY(1px);
        }
        .contact-submit:hover {
            background: #145754;
        }
        .contact-submit:disabled {
            opacity: 0.5;
            cursor: default;
        }
        .contact-thankyou {
            text-align: center;
            padding: 20px 0 0;
        }
        .thankyou-icon {
            font-size: 36px;
            color: #1b6e6a;
            margin: 0 0 8px;
        }
        .thankyou-title {
            font-family: Georgia, serif;
            font-size: 22px;
            color: #3a1a05;
            margin: 0 0 6px;
        }
        .thankyou-text {
            font-family: Georgia, serif;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.6);
            margin: 0;
        }

        /* ══════════════════════════════════════════
           POST-IT NOTES — CSS divs, no images
        ══════════════════════════════════════════ */
        .postit {
            position: absolute;
            z-index: 9;
            padding: 12px 14px;
            font-family: 'Indie Flower', cursive;
            font-style: normal;
            font-size: var(--fs-postit, 14px);
            line-height: 1.4;
            color: #4a3a3a;
            cursor: pointer;
            transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
                        filter 0.35s ease;
        }

        #postit-green {
            background: #C8DCC0;
            color: #3A4A3A;
        }

        #postit-pink {
            background: #E8C8C0;
        }

        #postit-blue {
            background: #C8D0D8;
            color: #3A404A;
        }

        /* ══════════════════════════════════════════
           POLAROIDS — photo insert behind frame
        ══════════════════════════════════════════ */
        .polaroid {
            position: absolute;
            transform-origin: 50% 78%;
        }
        .polaroid .photo {
            position: absolute;
            left: 8%;
            right: 8%;
            top: 8%;
            bottom: 21%;
            overflow: hidden;
            border-radius: 2px;
            background: rgba(0,0,0,0.08);
            /* Photo sits IN FRONT of the (now solid-white) polaroid frame
               so the image fills the window edge-to-edge. */
            z-index: 3;
        }
        .polaroid .photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .polaroid .frame {
            position: relative;
            z-index: 2;
        }

        /* Prompt ("Click Here") is unused — the caption now plays that role */
        .polaroid .prompt {
            display: none;
        }

        .polaroid .desc {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 6%;
            height: 16%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: Georgia, serif;
            font-size: var(--fs-polaroid-desc, 11px);
            color: rgba(0, 0, 0, 0.72);
            z-index: 4;
            /* Faded caption visible at rest (invites a click).
               Brightens on hover, solid when picked up. */
            opacity: 0.4;
            transform: translateY(0);
            transition: opacity 160ms ease, transform 160ms ease;
            pointer-events: none;
        }
        .polaroid:hover .desc {
            opacity: 1;
        }
        .polaroid[data-picked="1"] .desc {
            opacity: 1;
            transform: translateY(0);
        }


        /* ══════════════════════════════════════════
           FULLSCREEN TOGGLE (touch devices only)
        ══════════════════════════════════════════ */
        .fullscreen-btn {
            position: fixed;
            top: 10px;
            left: 10px;
            z-index: 8000;
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(0, 0, 0, 0.45);
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 10px 18px;
            font-size: 15px;
            letter-spacing: 0.04em;
            cursor: pointer;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            transition: background 0.2s, opacity 0.3s;
            opacity: 0.7;
        }
        .fullscreen-btn:hover,
        .fullscreen-btn:active {
            background: rgba(0, 0, 0, 0.7);
            opacity: 1;
        }
        .fs-icon {
            font-size: 20px;
            line-height: 1;
        }

        /* ══════════════════════════════════════════
           SCROLL HINT
        ══════════════════════════════════════════ */
        /* ══════════════════════════════════════════
           QUICK-LINKS MENU — sticky bottom-left
        ══════════════════════════════════════════ */
        /* ══════════════════════════════════════════
           TOP NAVIGATION BAR
           Sleek black strip pinned to viewport top with
           three entry points: Contact · Download CV · Quick Links.
           ══════════════════════════════════════════ */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 44px;
            background: #cec3bc;
            color: #484848;
            z-index: 200;
            /* White hairline underneath + a 2px inner shadow on the bottom
               edge only, giving the bar a subtle recessed lip against the desk. */
            border-bottom: 1px solid #ffffff;
            box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.15);
            font-family: Arial, sans-serif;
        }
        .top-nav-inner {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 28px;
        }
        .top-nav-group {
            display: flex;
            align-items: center;
            gap: 26px;
        }
        .top-nav-item {
            background: transparent;
            border: none;
            color: #484848;
            font-family: Arial, sans-serif;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            padding: 6px 2px;
            cursor: pointer;
            text-decoration: none;
            transition: color 0.2s, transform 0.15s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .top-nav-item:hover,
        .top-nav-item:focus-visible {
            color: #000;
            outline: none;
        }
        .top-nav-item:active {
            transform: translateY(1px);
        }
        .ql-caret {
            font-size: 10px;
            line-height: 1;
            transform: translateY(1px);
        }
        /* Quick-links dropdown — now anchored under the nav item */
        .quicklinks-wrap {
            position: relative;
        }
        .quicklinks-panel {
            display: none;
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            background: #cec3bc;
            border: 1px solid #ffffff;
            border-radius: 0 0 6px 6px;
            padding: 0;
            min-width: 240px;
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
            flex-direction: column;
            z-index: 201;
        }
        .quicklinks-panel.open { display: flex; }
        .ql-item {
            background: none;
            border: none;
            /* Divider between items: a 1px white hairline at 50% opacity.
               :last-child removes the bottom divider so the panel border
               handles the final edge cleanly. */
            border-bottom: 1px solid rgba(255, 255, 255, 0.5);
            color: #484848;
            font-family: Arial, sans-serif;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 0.06em;
            padding: 10px 16px;
            text-align: left;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
        }
        .ql-item:last-child {
            border-bottom: none;
        }
        .ql-item:hover,
        .ql-item:focus-visible {
            background: rgba(0, 0, 0, 0.08);
            color: #000;
            outline: none;
        }

        /* Hide the top nav on the mobile-block screen (no desk shown there) */
        body.mobile-block-active .top-nav { display: none; }

        /* On phones (even in landscape), hide the top nav and let the desk
           use the full viewport height. Zoe's portrait-phone prompt asks
           them to rotate; in landscape they get a scaled-down tablet-style
           experience without the 44px nav strip taking precious height.
           Quick-links / Contact / CV are still accessible via the business
           card and folders on the desk itself. */
        body.is-phone .top-nav { display: none; }
        body.is-phone #viewport {
            /* Override var(--nav-height) shift since nav is hidden */
            top: 0;
        }
        /* iOS Safari has a strict per-tab memory limit (~300-400MB). Our
           portfolio loads ~262MB of images plus the shadow engine clones
           every desk image into the shadow layer — easily pushing Safari
           over the edge on rotation/re-raster. Drop shadows entirely on
           phones to keep memory pressure low. Looks slightly flatter but
           the scene still reads fine at this tiny scale. */
        body.is-phone #shadow-layer,
        body.is-phone #light-glow {
            display: none !important;
        }

        .scroll-hint {
            position: fixed;
            bottom: 20px;
            z-index: 100;
            font-family: 'Georgia', serif;
            font-size: 11px;
            font-style: italic;
            color: rgba(60, 45, 35, 0.55);
            letter-spacing: 0.12em;
            display: flex;
            align-items: center;
            gap: 8px;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }
        .scroll-hint-right {
            right: 24px;
        }
        .scroll-hint-left {
            left: 24px;
        }
        .scroll-hint-right .arrow {
            display: inline-block;
            animation: nudgeRight 2.2s ease-in-out infinite;
        }
        .scroll-hint-left .arrow {
            display: inline-block;
            animation: nudgeLeft 2.2s ease-in-out infinite;
        }
        /* Hint pan — pull right (wind up), release left (explore), echo, settle */
        @keyframes hintPan {
            0%   { transform: translate3d(0, 0, 0); }
            11%  { transform: translate3d(20px, 0, 0); }       /* pull right — wind up */
            18%  { transform: translate3d(20px, 0, 0); }       /* hold tension */
            28%  { transform: translate3d(-100px, 0, 0); }     /* release left — fast snap */
            48%  { transform: translate3d(0, 0, 0); }          /* return home */
            58%  { transform: translate3d(-20px, 0, 0); }      /* echo 1 — lazy */
            70%  { transform: translate3d(0, 0, 0); }          /* return */
            78%  { transform: translate3d(-8px, 0, 0); }       /* echo 2 — fading */
            88%  { transform: translate3d(0, 0, 0); }          /* settled */
            100% { transform: translate3d(0, 0, 0); }          /* rest */
        }

        @keyframes hintChevron {
            0%, 100% { opacity: 0; transform: translateX(0); }
            30%, 70% { opacity: 0.7; }
            50%      { opacity: 1; transform: translateX(6px); }
        }
        @keyframes nudgeRight {
            0%, 100% { transform: translateX(0); opacity: 0.4; }
            50%       { transform: translateX(7px); opacity: 1; }
        }
        @keyframes nudgeLeft {
            0%, 100% { transform: translateX(0); opacity: 0.4; }
            50%       { transform: translateX(-7px); opacity: 1; }
        }

        /* CV modal */
        #cv-modal {
            position: fixed;
            inset: 0;
            z-index: 2000;
            display: none;
            background: rgba(0, 0, 0, 0.32);
            -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
        }
        body.cv-open #cv-modal {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        body.cv-open #viewport {
            pointer-events: none;
        }
        .cv-modal-card {
            pointer-events: auto;
            width: min(980px, 92vw);
            height: min(92vh, 860px);
            background: #f9f4ee;
            border-radius: 10px;
            box-shadow: 0 40px 140px rgba(0, 0, 0, 0.45);
            position: relative;
            overflow: hidden;
        }
        .cv-modal-close {
            position: absolute;
            right: 14px;
            top: 12px;
            z-index: 10;
            width: 38px;
            height: 38px;
            border-radius: 10px;
            border: 1px solid rgba(0, 0, 0, 0.14);
            background: rgba(255, 255, 255, 0.8);
            color: rgba(0, 0, 0, 0.7);
            font-size: 18px;
            cursor: pointer;
        }
        .cv-modal-close:hover {
            background: rgba(255, 255, 255, 0.95);
        }
        .cv-modal-scroll {
            position: absolute;
            inset: 0;
            overflow: auto;
            padding: 44px 44px 40px;
        }
        .cv-full h1 {
            margin: 0 0 6px;
            font-family: Georgia, serif;
            font-size: 34px;
            letter-spacing: 0.04em;
        }
        .cv-full .tagline {
            margin: 0 0 14px;
            font-family: Georgia, serif;
            font-size: 14px;
            color: #1b6e6a;
            font-style: italic;
            letter-spacing: 0.06em;
        }
        .cv-full .meta {
            font-family: Arial, sans-serif;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.62);
            margin: 0 0 18px;
        }
        .cv-full hr {
            border: 0;
            height: 1px;
            background: rgba(27, 110, 106, 0.35);
            margin: 16px 0 18px;
        }
        .cv-full h2 {
            font-family: Arial, sans-serif;
            font-size: 12px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #1b6e6a;
            margin: 18px 0 8px;
        }
        .cv-full p,
        .cv-full li {
            font-family: Georgia, serif;
            font-size: 14px;
            line-height: 1.7;
            color: rgba(0, 0, 0, 0.76);
        }
        .cv-full ul {
            margin: 8px 0 0;
            padding-left: 18px;
        }
        .cv-role {
            margin-top: 14px;
        }
        .cv-role .role-title {
            font-family: Arial, sans-serif;
            font-weight: 700;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.78);
            margin: 0;
        }
        .cv-role .role-meta {
            font-family: Arial, sans-serif;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.58);
            margin: 4px 0 10px;
        }
        .cv-role .role-summary {
            margin: 0 0 8px;
        }

        /* ── Case study modal ───────────────────── */
        #case-study-modal {
            position: fixed;
            inset: 0;
            z-index: 2000;
            display: none;
            background: rgba(0, 0, 0, 0.32);
            -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
        }
        body.case-study-open #case-study-modal {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        body.case-study-open #viewport {
            pointer-events: none;
        }
        .case-study-card {
            pointer-events: auto;
            width: min(980px, 92vw);
            height: min(92vh, 860px);
            background: #f9f4ee;
            border-radius: 10px;
            box-shadow: 0 40px 140px rgba(0, 0, 0, 0.45);
            position: relative;
            overflow: hidden;
        }
        .case-study-content h1 {
            margin: 0 0 6px;
            font-family: Georgia, serif;
            font-size: 34px;
            letter-spacing: 0.04em;
            color: #3a1a05;
        }
        .case-study-content .tagline {
            margin: 0 0 14px;
            font-family: Georgia, serif;
            font-size: 14px;
            color: #1b6e6a;
            font-style: italic;
            letter-spacing: 0.06em;
        }
        .case-study-content hr {
            border: 0;
            height: 1px;
            background: rgba(27, 110, 106, 0.35);
            margin: 16px 0 18px;
        }
        .case-study-content h2 {
            font-family: Arial, sans-serif;
            font-size: 12px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #1b6e6a;
            margin: 24px 0 8px;
        }
        .case-study-content h2:first-of-type {
            margin-top: 0;
        }
        .case-study-content p {
            font-family: Georgia, serif;
            font-size: 14px;
            line-height: 1.7;
            color: rgba(0, 0, 0, 0.76);
            margin: 0 0 12px;
        }

        /* ══════════════════════════════════════════
           MANILA FOLDER — click-to-open, fanned children
        ══════════════════════════════════════════ */
        .folder-piece {
            position: absolute;
            /* 3D context only active during flip animation — prevents
               Firefox backface-visibility bug on hover transforms */
        }
        .folder-piece.flip-active {
            transform-style: preserve-3d;
            perspective: 1500px;
        }
        .folder-piece img {
            width: 100%;
            height: auto;
            display: block;
            pointer-events: none;
        }

        /* Base: the open folder background, hidden until opened */
        /* pointer-events managed exclusively by JS (setFolderPiecesInteractive) */
        #folder-sph-base .base {
            opacity: 0; /* shown when open */
        }

        /* Closed face: cursor + hover feedback */
        #manilla-folder-closed {
            cursor: pointer;
            /* position:absolute comes from .obj/.folder-piece;
               overflow:visible so flip can extend outside bounds */
            overflow: visible;
        }
        /* NOTE: no CSS filter on :hover — filter creates a containing block
           in Firefox that breaks backface-visibility on the nested flip cover.
           Visual hover feedback is handled by the group hover lift in hover.js. */
        #manilla-folder-closed:active {
            filter: brightness(0.98);
        }


        /* Text labels overlaid on closed face — text-frame boxes */
        .folder-label {
            position: absolute;
            font-family: 'Special Elite', 'Courier New', monospace;
            font-size: var(--fs-folder-label, 13px);
            color: #4a2e0a;
            pointer-events: none;
            white-space: pre-wrap;
            line-height: 1.2;
            transform-origin: left top;
            border-radius: 3px;
            padding: 1px 3px;
            box-sizing: border-box;
            overflow: hidden;
            word-break: break-word;
        }

        /* Open folder base: clickable to close */
        #folder-sph-base {
            cursor: pointer;
        }

        /* "Click to close" hint on open folder base — hidden until folder opens */
        .folder-close-hint {
            position: absolute;
            bottom: 8%;
            left: 6%;
            font-family: 'Special Elite', 'Courier New', monospace;
            font-size: 11px;
            color: #8a7560;
            opacity: 0;
            pointer-events: none;
            letter-spacing: 0.04em;
            transition: opacity 300ms ease;
        }
        .folder-close-hint.visible {
            opacity: 0.7;
        }

        /* Right-side body: visible when closed, hidden when folder fully open */

        /* Flip cover: sits on top of right-side, flips open */
        .folder-flip {
            position: relative;
            width: 100%;
            transform-style: preserve-3d;
            transform-origin: 0% 50%;
            will-change: transform;
        }
        .folder-flip img {
            width: 100%;
            height: auto;
            display: block;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            pointer-events: none;
        }
        /* Labels sit on the cover face, disappear when cover flips to -180° */
        .folder-flip .folder-label {
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        /* Child items: hidden until folder opens — fade in via opacity, not display */
        /* pointer-events managed exclusively by JS (setFolderChildrenInteractive) */
        .folder-child {
            opacity: 0;
            cursor: pointer;
            position: absolute;
            /* transition managed exclusively by JS — no CSS transition */
        }
        .folder-child img {
            width: 100%;
            height: auto;
            display: block;
            pointer-events: none;
        }
        /* folder-child hover is handled by JS wireHoverStates (layout.json config) */

        /* ── Folder inner page (handwritten case-study note) ── */
        #sph-folder-page,
        #zmp-folder-page,
        #mic-folder-page {
            background: #faf6ee;
            border-radius: 3px;
            box-shadow: 0 3px 14px rgba(60,40,10,0.25), 0 1px 4px rgba(60,40,10,0.15);
            padding: 14px 16px 16px;
            cursor: pointer;
            box-sizing: border-box;
            overflow: hidden;
        }
        #sph-folder-page:hover,
        #zmp-folder-page:hover,
        #mic-folder-page:hover {
            filter: brightness(1.03);
        }
        .folder-page-lines {
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                transparent, transparent 22px, rgba(100,140,200,0.12) 22px, rgba(100,140,200,0.12) 23px
            );
            pointer-events: none;
        }
        /* Page label inherits .folder-label positioning; override line-height for note page */
        #folder-sph-page-label,
        #folder-zmp-page-label,
        #folder-mic-page-label {
            line-height: 1.5;
            overflow: hidden;
        }
        .folder-page-hint {
            position: absolute;
            bottom: 7px;
            right: 10px;
            font-family: Arial, sans-serif;
            font-size: 7px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(100,70,20,0.5);
            pointer-events: none;
        }

        /* Subtle click hint on PDF covers */
        .pdf-click-hint {
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
            font-family: Arial, sans-serif;
            font-size: 7px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.85);
            background: rgba(0,0,0,0.38);
            border-radius: 999px;
            padding: 3px 8px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 150ms ease;
            white-space: nowrap;
        }
        .folder-child:hover .pdf-click-hint {
            opacity: 1;
        }

        /* Centred click hint — sits in the middle of the image (not at the
           bottom like .pdf-click-hint). Used by MIC folio covers and the ZMP
           photo-spread. Same 7px sizing as .pdf-click-hint for consistency. */
        .mic-click-hint {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: Arial, sans-serif;
            font-size: 7px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.92);
            background: rgba(20, 16, 12, 0.78);
            border-radius: 999px;
            padding: 4px 10px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 150ms ease;
            white-space: nowrap;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
        }
        .folder-child:hover .mic-click-hint {
            opacity: 1;
        }

        /* ══════════════════════════════════════════
           PDF VIEWER MODAL
        ══════════════════════════════════════════ */
        #pdf-modal {
            position: fixed;
            inset: 0;
            /* Raised above the MIC mood-board modal (9000) so PDFs opened from
               a mood board sit on top. Other mood-board-layered modals use
               9100–9200 — PDF goes above those too. */
            z-index: 9300;
            display: none;
            background: rgba(18, 13, 8, 0.60);
            -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
        }
        body.pdf-open #pdf-modal {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        body.pdf-open #viewport {
            pointer-events: none;
        }
        .pdf-modal-card {
            pointer-events: auto;
            position: relative;
            background: #1c1814;
            border-radius: 12px;
            box-shadow: 0 50px 160px rgba(0, 0, 0, 0.75);
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 96vw;
            max-height: 96vh;
            overflow: hidden;
        }
        .pdf-modal-close {
            position: absolute;
            right: 12px;
            top: 10px;
            z-index: 10;
            width: 34px;
            height: 34px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.07);
            color: rgba(255, 255, 255, 0.65);
            font-size: 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 160ms ease, color 160ms ease;
        }
        .pdf-modal-close:hover {
            background: rgba(255, 255, 255, 0.16);
            color: #fff;
        }
        .pdf-book-spread {
            display: flex;
            align-items: flex-start;
            flex-shrink: 0;
            position: relative;
        }
        .pdf-page-canvas {
            display: block;
            flex-shrink: 0;
            cursor: pointer;
        }
        #pdf-canvas-left {
            box-shadow: 4px 0 16px rgba(0, 0, 0, 0.40);
        }
        #pdf-canvas-right {
            box-shadow: -4px 0 16px rgba(0, 0, 0, 0.40);
        }
        .pdf-spine {
            width: 5px;
            align-self: stretch;
            background: linear-gradient(to right,
                rgba(0,0,0,0.42) 0%,
                rgba(70,45,25,0.28) 50%,
                rgba(0,0,0,0.42) 100%);
            flex-shrink: 0;
            z-index: 2;
        }
        .pdf-nav-bar {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 9px 20px;
            background: #1c1814;
            width: 100%;
            justify-content: center;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            position: relative;
        }
        .pdf-nav-btn {
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.14);
            color: rgba(255, 255, 255, 0.75);
            width: 36px;
            height: 36px;
            border-radius: 6px;
            font-size: 24px;
            font-weight: 300;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            transition: background 160ms ease, color 160ms ease;
        }
        .pdf-nav-btn:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.16);
            color: #fff;
        }
        .pdf-close-link {
            position: absolute;
            right: 20px;
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.45);
            font-family: Georgia, serif;
            font-size: 12px;
            letter-spacing: 0.04em;
            cursor: pointer;
            padding: 4px 0;
            transition: color 160ms ease;
        }
        .pdf-close-link:hover {
            color: rgba(255, 255, 255, 0.9);
        }

        .pdf-nav-btn:disabled {
            opacity: 0.22;
            cursor: default;
        }
        #pdf-page-info {
            font-family: 'Georgia', serif;
            font-size: 12px;
            font-style: italic;
            color: rgba(255, 255, 255, 0.42);
            letter-spacing: 0.07em;
            min-width: 110px;
            text-align: center;
        }

        /* ── iPad screen drawing (main menu image) ── */
        .ipad-screen-img {
            position: absolute;
            top: 2.5%; left: 2.8%; right: 2.8%; bottom: 2.5%;
            border-radius: 8px;
            overflow: hidden;
            filter: brightness(0.45);
            transition: filter 0.4s ease;
            pointer-events: none;
        }
        .ipad-screen-img img {
            width: 100%;
            height: 100%;
            object-fit: fill;
            display: block;
        }
        #ipad-front:hover .ipad-screen-img {
            filter: brightness(1);
        }
        #ipad-front._up .ipad-screen-img {
            filter: brightness(1);
        }

        /* Invisible clickable squares over the hand-drawn menu squares.
           Hidden entirely until the iPad is picked up — otherwise the
           button elements would intercept the click that opens the iPad. */
        .ipad-hotspots {
            position: absolute;
            inset: 0;
            display: none;
        }
        #ipad-front._up .ipad-hotspots {
            display: block;
        }
        .ipad-hotspot {
            position: absolute;
            background: transparent;
            border: none;
            cursor: pointer;
            border-radius: 4px;
            transition: background 0.2s;
        }
        #ipad-front._up .ipad-hotspot:hover {
            background: rgba(27, 110, 106, 0.18);
        }

        /* iPad close button — hidden on the desk, shown only when picked up.
           Positioned outside the iPad top-right corner so it doesn't overlap
           screen content. Defaults fully hidden (display + visibility +
           pointer-events) as a belt-and-braces safeguard so it can never
           accidentally show on the resting iPad. */
        .ipad-close {
            position: absolute;
            top: -10px;
            right: -10px;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border: none;
            background: rgba(30, 26, 22, 0.85);
            color: #f4ede3;
            font-size: 13px;
            font-weight: 600;
            line-height: 1;
            cursor: pointer;
            display: none !important;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            z-index: 10;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: background 0.15s, transform 0.15s;
        }
        #ipad-front[data-picked="1"] .ipad-close {
            display: flex !important;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        .ipad-close:hover {
            background: rgba(60, 50, 40, 0.95);
            transform: scale(1.1);
        }

        /* iPad BACK button — two stacked images (base + hover). Position/size
           come from layout.json ipad-front.backButton (left/top/width in %
           of the iPad) and are applied by js/ipad.js as inline styles.
           Hidden unless iPad is picked up AND on screen-02. */
        .ipad-back {
            position: absolute;
            /* sensible defaults if layout.json doesn't override */
            top: 4%;
            left: 3%;
            width: 10%;
            aspect-ratio: 1;
            cursor: pointer;
            display: none !important;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            z-index: 10;
        }
        #ipad-front[data-picked="1"][data-active-screen="screen-02"] .ipad-back {
            display: block !important;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        .ipad-back-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: opacity 0.15s ease;
            pointer-events: none;
        }
        .ipad-back-hover {
            opacity: 0;
        }
        .ipad-back:hover .ipad-back-hover {
            opacity: 1;
        }
        .ipad-back:hover .ipad-back-base {
            opacity: 0;
        }

        /* ── iPad gallery overlay ── */
        .ipad-screen {
            position: absolute;
            top: 6%; left: 5%; right: 5%; bottom: 6%;
            display: none;
            flex-direction: column;
            padding: 10px;
            background: #1a1a1a;
            border-radius: 4px;
            pointer-events: none;
            overflow: hidden;
        }
        .ipad-screen.active {
            display: flex;
            pointer-events: auto;
        }

        /* Close button on iPad screen */
        .ipad-close-btn {
            position: absolute;
            top: 6px;
            right: 6px;
            z-index: 5;
            width: 24px;
            height: 24px;
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
            border: none;
            border-radius: 50%;
            font-size: 16px;
            line-height: 1;
            cursor: pointer;
        }
        .ipad-close-btn:hover { background: rgba(255, 255, 255, 0.3); }

        /* Featured video card */
        .ipad-featured {
            position: relative;
            flex: 1;
            min-height: 0;
        }
        .ipad-thumb {
            cursor: pointer;
            border-radius: 4px;
            overflow: hidden;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            display: flex;
            flex-direction: column;
            background: #222;
        }
        .ipad-thumb:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        }
        .ipad-thumb img {
            width: 100%;
            height: auto;
            object-fit: cover;
            aspect-ratio: 16/9;
            display: block;
            border-radius: 4px;
        }
        .ipad-thumb .thumb-title {
            font-size: 8px;
            color: #ccc;
            padding: 5px 4px 2px;
            font-family: 'Special Elite', monospace;
            text-align: center;
        }

        /* Play icon overlay */
        .ipad-play-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -60%);
            width: 36px;
            height: 36px;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            pointer-events: none;
        }

        /* Caption below thumbnail */
        .ipad-caption {
            font-family: Georgia, serif;
            font-size: 6.5px;
            color: rgba(255, 255, 255, 0.5);
            text-align: center;
            padding: 4px 6px 0;
            line-height: 1.4;
            font-style: italic;
        }

        /* ── Video player modal ── */
        #video-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.88);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
        }
        body.video-open #video-modal {
            opacity: 1;
            pointer-events: auto;
        }
        #video-modal[aria-hidden="true"] {
            display: none;
        }
        .video-modal-card {
            position: relative;
            width: 90vw;
            max-width: 1200px;
        }
        .video-modal-card .cv-modal-close {
            position: absolute;
            top: -36px;
            right: 0;
        }
        .video-container iframe {
            width: 100%;
            aspect-ratio: 16/9;
            border: none;
            border-radius: 8px;
            display: block;
        }
        .video-container.portrait {
            display: flex;
            justify-content: center;
        }
        .video-container.portrait iframe {
            width: auto;
            height: 80vh;
            aspect-ratio: 9/16;
        }

        /* ══════════════════════════════════════════
           EKKA IMAGE MODAL
        ══════════════════════════════════════════ */
        #ekka-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.82);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
        }
        body.ekka-open #ekka-modal {
            opacity: 1;
            pointer-events: auto;
        }
        #ekka-modal[aria-hidden="true"] {
            display: none;
        }
        .ekka-modal-card {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            max-width: min(700px, 90vw);
        }
        .ekka-modal-card .cv-modal-close {
            position: absolute;
            top: -14px;
            right: -14px;
        }
        .ekka-modal-img {
            width: auto;
            max-width: min(700px, 90vw);
            max-height: 82vh;
            border-radius: 6px;
            display: block;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        }
        .ekka-modal-caption {
            font-family: Georgia, serif;
            font-size: 13px;
            color: rgba(255,255,255,0.7);
            text-align: center;
            letter-spacing: 0.02em;
            margin: 0;
        }

        /* ══════════════════════════════════════════
           PHONE — lock screen + scrollable Instagram feed
        ══════════════════════════════════════════ */

        /* Lock screen — visible on desk, dims like a sleeping phone */
        .phone-lockscreen {
            position: absolute;
            top: 1.8%; left: 5.5%; right: 5.5%; bottom: 1.7%;
            border-radius: 19px;
            overflow: hidden;
            pointer-events: none;
            filter: brightness(0.4);
            transition: filter 0.4s ease;
        }
        #phone-front:hover .phone-lockscreen {
            filter: brightness(1);
        }
        /* Hide lock screen when phone is picked up */
        #phone-front._up .phone-lockscreen {
            opacity: 0;
            transition: opacity 0.3s ease, filter 0.4s ease;
        }
        .phone-lockscreen img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Date label — positioned like iOS lock screen */
        .lockscreen-date {
            position: absolute;
            top: 16%;
            left: 0; right: 0;
            text-align: center;
            font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
            font-size: 10px;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.9);
            letter-spacing: 0.03em;
            pointer-events: none;
        }

        /* Time — large bold clock */
        .lockscreen-time {
            position: absolute;
            top: 19%;
            left: 0; right: 0;
            text-align: center;
            font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
            font-size: 48px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.95);
            letter-spacing: -1px;
            line-height: 1;
            pointer-events: none;
        }

        .phone-screen {
            position: absolute;
            top: 1.8%; left: 5.5%; right: 5.5%; bottom: 1.7%;
            display: none;
            overflow-y: auto;
            overflow-x: hidden;
            background: #fafafa;
            border-radius: 19px;
            pointer-events: none;
            /* Hide scrollbar across browsers */
            scrollbar-width: none;          /* Firefox */
            -ms-overflow-style: none;       /* IE/Edge */
        }
        .phone-screen::-webkit-scrollbar {
            display: none;                  /* Chrome/Safari */
        }
        .phone-screen.active {
            display: block;
            pointer-events: auto;
        }
        .phone-feed-img {
            width: 100%;
            height: auto;
            display: block;
            pointer-events: none;
            user-select: none;
            -webkit-user-select: none;
        }

        /* Scroll navigation buttons (for mouse users) */
        .phone-scroll-btn {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            padding: 0;
            border: 0.5px solid rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            background: rgba(20, 20, 20, 0.35);
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
            color: rgba(255, 255, 255, 0.9);
            font-size: 8px;
            line-height: 1;
            text-align: center;
            cursor: pointer;
            z-index: 2;
            opacity: 0.65;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
            transition: opacity 0.2s ease, background 0.2s ease,
                        transform 0.15s ease, box-shadow 0.2s ease;
            pointer-events: auto;
            user-select: none;
            -webkit-user-select: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .phone-scroll-btn:hover {
            opacity: 1;
            background: rgba(20, 20, 20, 0.6);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            transform: translateX(-50%) scale(1.08);
        }
        .phone-scroll-btn:active {
            transform: translateX(-50%) scale(0.92);
        }
        .phone-scroll-up   { top: 8px; }
        .phone-scroll-down { bottom: 8px; }

        /* Nav overlay — sibling of #phone-feed, matches its bounds exactly
           but does NOT scroll. Buttons live here so they stay pinned while
           the feed image scrolls underneath. */
        .phone-nav-overlay {
            position: absolute;
            top: 1.8%;
            left: 5.5%;
            right: 5.5%;
            bottom: 1.7%;
            display: none;
            pointer-events: none;  /* overlay itself is transparent to clicks */
            z-index: 3;
        }
        .phone-nav-overlay.active {
            display: block;
        }
        /* Buttons inside the overlay DO receive pointer events */
        .phone-nav-overlay .phone-scroll-btn {
            pointer-events: auto;
        }
        /* Hide the appropriate arrow at the extremes of scroll.
           Scale down slightly while fading out for a softer feel. */
        .phone-scroll-btn.hidden {
            opacity: 0;
            pointer-events: none;
            transform: translateX(-50%) scale(0.7);
        }

        /* (Removed — old sticky fade-edge pseudo-elements were eating 20px
           of flow space at top and bottom, leaving a white gap above and
           below the feed image. Image now fills the screen edge-to-edge.) */

/* ══════════════════════════════════════════════════════════════════
   WAGGLS MOOD BOARD MODAL
   ══════════════════════════════════════════════════════════════════ */

#waggls-moodboard-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
}
#waggls-moodboard-modal[aria-hidden="false"] {
    display: flex;
    animation: wbFadeIn 0.25s ease;
}
@keyframes wbFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.waggls-moodboard-canvas {
    position: fixed;
    aspect-ratio: 10 / 7;
    width: min(90vw, calc(90vh * 10 / 7));
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url('Portfolio/Waggls/pattern-02.jpg');
    background-repeat: repeat;
    border-radius: 6px;
    overflow: visible;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Mood board images */
.wb-img {
    position: absolute;
    filter: drop-shadow(2px 4px 10px rgba(0, 0, 0, 0.45));
    cursor: default;
    line-height: 0;
}
.wb-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* Mood board text labels */
.wb-label {
    position: absolute;
    transform: translateX(-50%);
    text-align: center;
    cursor: default;
    outline: none;
    line-height: 1.3;
    user-select: text;
    -webkit-user-select: text;
}
.wb-label:focus {
    outline: 1px dashed rgba(255, 255, 255, 0.5);
    outline-offset: 3px;
}

/* Close button */
.wb-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
}
.wb-close:hover {
    background: rgba(0, 0, 0, 0.65);
}

/* Post-it note trigger */
.wb-postit {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 64px;
    height: 64px;
    background: #ffe066;
    border-radius: 2px;
    cursor: pointer;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.3);
    transform: rotate(3deg);
    transition: transform 0.2s, box-shadow 0.2s;
}
.wb-postit:hover {
    transform: rotate(0deg) scale(1.08);
    box-shadow: 3px 5px 12px rgba(0, 0, 0, 0.35);
}
.wb-postit-text {
    font-family: 'Caveat', cursive;
    font-size: 14px;
    color: #5a4a20;
    text-align: center;
    line-height: 1.2;
    pointer-events: none;
}

/* Case study story panel */
.wb-story-panel {
    position: absolute;
    top: 30px;
    right: -320px;
    width: 300px;
    bottom: 30px;
    background: #fefcf3;
    border-radius: 6px;
    box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.35);
    z-index: 15;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: right 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.25s ease;
}
.wb-story-panel.open {
    right: -140px;
    opacity: 1;
    pointer-events: auto;
}

/* Smaller screens / tablets: story panel slides up from bottom */
@media (max-width: 1200px) {
    .waggls-moodboard-canvas {
        width: min(96vw, calc(94vh * 10 / 7));
    }
    .wb-story-panel {
        top: auto;
        right: 0;
        bottom: -100%;
        left: 0;
        width: 100%;
        height: 60%;
        border-radius: 8px 8px 0 0;
        transition: bottom 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.25s ease;
    }
    .wb-story-panel.open {
        right: 0;
        bottom: 0;
    }
    .wb-postit {
        width: 50px;
        height: 50px;
    }
    .wb-postit-text {
        font-size: 11px;
    }
}

/* Touch devices: slightly smaller mood board, larger close button */
@media (hover: none) and (pointer: coarse) {
    .waggls-moodboard-canvas {
        width: min(96vw, calc(92vh * 10 / 7));
    }
    .wb-close {
        width: 44px;
        height: 44px;
        font-size: 26px;
    }
    .wb-label {
        user-select: none;
        -webkit-user-select: none;
    }
}

.wb-story-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    z-index: 2;
}
.wb-story-close:hover { color: #333; }

.wb-story-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 20px 18px 16px;
    scrollbar-width: thin;
}
.wb-story-scroll::-webkit-scrollbar { width: 4px; }
.wb-story-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

.wb-story-title {
    font-family: 'Caveat', cursive;
    font-size: 22px;
    color: #3a2e1a;
    margin: 0 0 12px;
    outline: none;
    border-bottom: 1px solid #e8e0d0;
    padding-bottom: 8px;
}

.wb-story-body {
    font-family: Georgia, serif;
    font-size: 13px;
    line-height: 1.7;
    color: #4a3f2f;
    outline: none;
}
.wb-story-body p {
    margin: 0 0 10px;
}

/* ══════════════════════════════════════════════════════════════════
   PHOTO GALLERY MODAL
   ══════════════════════════════════════════════════════════════════ */

#photo-gallery-modal,
#cards-gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    background: rgba(0, 0, 0, 0.85);
}
#photo-gallery-modal[aria-hidden="false"],
#cards-gallery-modal[aria-hidden="false"] {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wbFadeIn 0.25s ease;
}

/* Gallery card — fills viewport with padding, no scroll */
.photo-gallery-card {
    position: fixed;
    inset: 3vh 3vw;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.photo-gallery-close {
    position: fixed;
    top: 16px;
    right: 20px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
}
.photo-gallery-close:hover { background: rgba(255, 255, 255, 0.25); }

/* Thumbnail grid — photography uses 3 rows, cards uses 5 rows.
   Columns fill top-to-bottom visually, DOM order is column-first so the
   lightbox's prev/next navigate left-to-right reading order. */
.photo-gallery-grid {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
    flex: 1;
    min-height: 0;
}
/* Cards gallery — 7 rows fits 88 cards into ~13 columns */
#cards-gallery-grid {
    grid-template-rows: repeat(7, 1fr);
}

.photo-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    background: #1a1a1a;
}
.photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
}
.photo-thumb:hover img {
    transform: scale(1.05);
    filter: brightness(1.15);
}

/* ── Lightbox (full-screen single image) ── */
.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9010;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wbFadeIn 0.2s ease;
}
.photo-lb-img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 3px;
    user-select: none;
}
.photo-lb-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s;
}
.photo-lb-close:hover { background: rgba(255, 255, 255, 0.25); }

.photo-lb-prev,
.photo-lb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: none;
    width: 48px;
    height: 64px;
    font-size: 24px;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s;
    border-radius: 4px;
}
.photo-lb-prev { left: 12px; }
.photo-lb-next { right: 12px; }
.photo-lb-prev:hover,
.photo-lb-next:hover { background: rgba(255, 255, 255, 0.2); }
.photo-lb-prev:disabled,
.photo-lb-next:disabled { opacity: 0.2; cursor: default; }

.photo-lb-counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    letter-spacing: 0.06em;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════
   WORD SEARCH GAME
   ══════════════════════════════════════════════════════════════════ */

#wordsearch-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    background: rgba(0, 0, 0, 0.7);
}
#wordsearch-modal[aria-hidden="false"] {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wbFadeIn 0.25s ease;
}

.ws-card {
    position: relative;
    width: min(780px, 94vw);
    /* dvh = dynamic viewport height (matches actually-visible area on iOS Safari
       where the URL bar shrinks/grows the visible viewport). vh fallback for
       older browsers. */
    max-height: 92vh;
    max-height: 92dvh;
    background: #f5f0e6;
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
}

.ws-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    flex: 1;
    min-height: 0;
}

/* Grid — always square. Size is the smaller of:
   • 700px (desktop max)
   • 60dvh (leaves ~32dvh for title + word list + card padding on short screens)
   • 86vw (stops overflow on narrow phones where the card itself is 94vw) */
.ws-grid-wrap {
    width: 100%;
    max-width: min(700px, 60vh, 86vw);
    max-width: min(700px, 60dvh, 86vw);
    margin: 0 auto;
    flex-shrink: 1;
    min-height: 0;
}

/* Short-but-wide viewports (iPad landscape, short laptop windows):
   switch to a HORIZONTAL layout — grid on the left, word list on the right.
   This makes much better use of landscape real estate and keeps the grid
   large and the word list readable without either overflowing. */
@media (max-height: 820px) and (min-width: 720px) {
    .ws-card {
        width: min(1000px, 95vw);
        padding: 22px 26px;
    }
    .ws-layout {
        flex-direction: row;
        align-items: center;
        gap: 28px;
    }
    .ws-grid-wrap {
        flex: 0 0 auto;
        max-width: min(560px, 80vh, 52vw);
        max-width: min(560px, 80dvh, 52vw);
    }
    .ws-wordlist {
        flex: 1 1 auto;
        min-width: 0;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .ws-wordlist-title {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .ws-wordlist ul {
        columns: 2;
        column-gap: 18px;
    }
    .ws-wordlist li {
        font-size: 13px;
    }
    .ws-found-count {
        font-size: 15px;
        margin-top: 8px;
    }
}

/* Very short viewports (phones in landscape, tiny laptop windows).
   Still horizontal layout, but tighten everything further. */
@media (max-height: 560px) and (min-width: 720px) {
    .ws-card {
        padding: 14px 18px;
    }
    .ws-layout {
        gap: 18px;
    }
    .ws-grid-wrap {
        max-width: min(440px, 80vh, 50vw);
        max-width: min(440px, 80dvh, 50vw);
    }
    .ws-cell {
        font-size: clamp(10px, 1.6vw, 15px);
    }
    .ws-wordlist-title {
        font-size: 12px;
        margin-bottom: 6px;
    }
    .ws-wordlist ul {
        columns: 2;
        column-gap: 14px;
    }
    .ws-wordlist li {
        font-size: 11px;
        padding: 2px 0;
    }
}

/* Narrow AND short (small phone landscape): keep vertical layout, tighten. */
@media (max-height: 640px) and (max-width: 720px) {
    .ws-card {
        padding: 12px;
    }
    .ws-layout {
        gap: 8px;
    }
    .ws-wordlist ul {
        columns: 4;
        column-gap: 12px;
    }
    .ws-wordlist li {
        font-size: 11px;
        padding: 2px 0;
    }
    .ws-grid-wrap {
        max-width: min(700px, 55vh, 88vw);
        max-width: min(700px, 55dvh, 88vw);
    }
    .ws-cell {
        font-size: clamp(10px, 2vw, 16px);
    }
}

.ws-title {
    font-family: 'Caveat', cursive;
    font-size: 28px;
    color: #3a2e1a;
    margin: 0 0 14px;
    text-align: center;
}

.ws-grid {
    display: grid;
    gap: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;  /* no iOS long-press callout */
    touch-action: none;            /* block iPad scroll/zoom on grid drag */
    cursor: crosshair;
}

.ws-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: clamp(14px, 3vw, 24px);
    font-weight: 300;
    color: #4a3f2f;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: background 0.1s;
}


/* SVG line overlay for selection and found words */
.ws-grid {
    position: relative;
}
.ws-cell.ws-selecting {
    background: transparent;
}
.ws-line-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
.ws-line-overlay line.ws-selecting-line {
    stroke: rgba(27, 110, 106, 0.35);
    stroke-width: 5;
    stroke-linecap: round;
}
.ws-line-overlay line.ws-found-line {
    stroke: rgba(27, 110, 106, 0.2);
    stroke-width: 5;
    stroke-linecap: round;
}

.ws-found-count {
    font-family: 'Caveat', cursive;
    font-size: 18px;
    color: #1b6e6a;
    text-align: center;
    margin: 12px 0 0;
}
.ws-found-count.ws-complete {
    font-size: 24px;
    color: #1b6e6a;
    font-weight: 600;
}

/* Win banner — centred over the grid when all words are found.
   Absolute-positioned so it doesn't push layout (no scroll bars). */
.ws-grid-wrap {
    position: relative;
}
.ws-win-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    background: #1b6e6a;
    color: #f5f0e6;
    padding: 22px 32px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    font-family: 'Caveat', cursive;
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ws-win-banner[hidden] {
    display: none;
}
.ws-win-banner.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
@media (max-height: 640px) {
    .ws-win-banner {
        font-size: 26px;
        padding: 16px 22px;
    }
}

/* Word list — below grid, horizontal wrap */
.ws-wordlist {
    width: 100%;
}

.ws-wordlist-title {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #3a2e1a;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 12px;
}

.ws-wordlist ul {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 3;
    column-gap: 24px;
}

.ws-wordlist li {
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #4a3f2f;
    padding: 3px 0;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ws-wordlist li.found {
    text-decoration: line-through;
    color: #1b6e6a;
    opacity: 0.5;
}



/* ══════════════════════════════════════════════════════════════════
   MAKE IT CRAFTY — 3 MOOD BOARDS (Ecommerce, Marketing, Education)
   ══════════════════════════════════════════════════════════════════ */

/* (Legacy MIC category-cover styles removed — the three cover children
   have been deleted in favour of real MIC deliverables per SPH/ZMP pattern.
   Mood board + newsletter iframe modals below are retained for reuse.) */

/* Mood board modal */
#mic-moodboard-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    background: rgba(0, 0, 0, 0.7);
}
#mic-moodboard-modal[aria-hidden="false"] {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wbFadeIn 0.25s ease;
}

.mic-moodboard-canvas {
    position: fixed;
    aspect-ratio: 10 / 7;
    width: min(90vw, calc(90vh * 10 / 7));
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #faf6ee;
    border-radius: 6px;
    /* Clip items to the canvas — anything positioned outside the 0–100% bounds
       (e.g. dragged off-canvas in the position tool) won't show here. */
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    /* Establish a containment context so label font-sizes can scale with
       the canvas width via cqw units (see mic-moodboard.js renderBoard). */
    container-type: inline-size;
}

/* (The dedicated .mic-moodboard-title rule was removed — the board title is
   now rendered as a positioned text label inside .mic-moodboard-items, matching
   the Waggls mood board pattern, so it can be edited / dragged / styled via
   the position tool.) */

.mic-moodboard-items {
    position: absolute;
    inset: 0;
}

/* Individual items on the board — share .wb-img styling for consistency */
.mic-moodboard-items .mb-item {
    position: absolute;
    line-height: 0;
    /* Rotation + z-index read from per-item CSS variables so :hover can
       override them cleanly (inline style would beat a CSS :hover rule). */
    transform: rotate(var(--rot, 0deg));
    z-index: var(--z, 1);
    filter: drop-shadow(2px 4px 10px rgba(0, 0, 0, 0.35));
}
.mic-moodboard-items .mb-item.clickable {
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}
.mic-moodboard-items .mb-item.clickable:hover {
    /* Jump forward: scale up + jump to the top of the stack + lift the
       drop-shadow so the item pops clearly above every neighbour. */
    transform: rotate(var(--rot, 0deg)) scale(1.1);
    filter: drop-shadow(4px 8px 16px rgba(0, 0, 0, 0.45));
    z-index: 1000;
}
.mic-moodboard-items .mb-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}

/* Centred hover hint on mood-board items (e.g. "Click to view Newsletter").
   Only rendered when an item explicitly sets `hoverHint` in mic-moodboard.js.
   Lives inside the rotated .mb-item so it inherits the tilt — fine since
   rotations are small (±3°). */
.mic-moodboard-items .mb-hover-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f5f0e6;
    background: rgba(20, 16, 12, 0.85);
    border-radius: 999px;
    padding: 6px 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    line-height: 1;
}
.mic-moodboard-items .mb-item:hover .mb-hover-hint {
    opacity: 1;
}

/* Touch devices (iPad, phones) have no hover state, so clickable items
   would be indistinguishable from decorative ones. Show hint pills
   permanently so users can see at a glance which images are interactive.
   Covers: MIC mood boards, folder children with PDFs, MIC folios. */
@media (hover: none) {
    .mic-moodboard-items .mb-item.clickable .mb-hover-hint,
    .folder-child .pdf-click-hint,
    .folder-child .mic-click-hint {
        opacity: 0.92;
    }
}

.mic-moodboard-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
}
.mic-moodboard-close:hover {
    background: rgba(0, 0, 0, 0.65);
}

/* Tablet */
@media (max-width: 1200px) {
    .mic-moodboard-canvas {
        width: min(96vw, calc(94vh * 10 / 7));
    }
    .mic-moodboard-title { font-size: 28px; }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
    .mic-moodboard-close {
        width: 44px;
        height: 44px;
        font-size: 26px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   NEWSLETTER IFRAME MODAL
   ══════════════════════════════════════════════════════════════════ */
#newsletter-modal {
    position: fixed;
    inset: 0;
    z-index: 9100;
    display: none;
    background: rgba(0, 0, 0, 0.8);
}
#newsletter-modal[aria-hidden="false"] {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wbFadeIn 0.2s ease;
}

.newsletter-card {
    position: relative;
    width: min(720px, 92vw);
    height: min(86vh, 900px);
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.newsletter-card iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.newsletter-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
}
.newsletter-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* ══════════════════════════════════════════════════════════════════
   MIC IMAGE VIEWER MODAL — scrollable, full-size image (e.g. long tutorial).
   Opens on top of the mood board modal; closing it returns to the mood board.
   ══════════════════════════════════════════════════════════════════ */
#mic-image-modal {
    position: fixed;
    inset: 0;
    z-index: 9200;
    display: none;
    background: rgba(0, 0, 0, 0.85);
}
#mic-image-modal[aria-hidden="false"] {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wbFadeIn 0.2s ease;
}
.mic-image-card {
    position: relative;
    width: min(90vw, 900px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.mic-image-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 90vh;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    -webkit-overflow-scrolling: touch;
    background: #fff;
}
.mic-image-scroll img {
    display: block;
    width: 100%;
    height: auto;
}
.mic-image-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.mic-image-close:hover {
    background: rgba(0, 0, 0, 0.85);
}

/* ══════════════════════════════════════════════════════════════════
   iPad-over-mood-board mode — class applied to <body> while the mood
   board's education videos thumb has opened the iPad. Keeps the REAL
   desk iPad (so its size + screen inset + hotspots stay perfectly
   aligned — no resizing), but lifts the whole scene above the mood
   board modal and hides everything in the scene except the iPad.
   ══════════════════════════════════════════════════════════════════ */
/* #viewport is position:fixed which creates its own stacking context, so
   boosting #scene-scale-wrapper alone isn't enough — we have to raise the
   viewport itself above the mood board modal (which lives at body level). */
body.ipad-over-moodboard #viewport {
    z-index: 9500;
    background: transparent !important;  /* let mood board show through */
}
body.ipad-over-moodboard #scene-scale-wrapper {
    z-index: 9500;
}
/* Hide everything in the scene except the iPad — just the iPad floats
   over the mood board, everything else stays out of sight. */
body.ipad-over-moodboard #scene > .sceneClip,
body.ipad-over-moodboard #scene > .desk,
body.ipad-over-moodboard #light-glow,
body.ipad-over-moodboard #shadow-layer {
    display: none !important;
}
body.ipad-over-moodboard #content-layer > *:not(#ipad-front) {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   (Legacy) MIC iPad-above-mood-board MODAL — no longer used. The HTML
   element #mic-ipad-modal has been removed; styles kept harmless-and-
   dormant in case any stale references land.
   ══════════════════════════════════════════════════════════════════ */
#mic-ipad-modal {
    position: fixed;
    inset: 0;
    z-index: 9200;
    display: none;
    background: rgba(0, 0, 0, 0.78);
}
#mic-ipad-modal[aria-hidden="false"] {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wbFadeIn 0.22s ease;
}
.mic-ipad-frame {
    position: relative;
    /* Must match the DESK iPad element's exact aspect ratio (width/height
       from layout.json: 550 / 391 ≈ 1.40664). If this differs, hotspots
       positioned on the desk drift when shown here. */
    width: min(85vw, calc(85vh * 1.40664));
    aspect-ratio: 1.40664;
}
.mic-ipad-body {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}
/* Screen inset matches the live desk iPad's inset values. */
.mic-ipad-screen {
    position: absolute;
    top: 5.1%;
    left: 3.7%;
    right: 3.9%;
    bottom: 5.9%;
    width: auto;
    height: auto;
    object-fit: fill;
    border-radius: 15px;
    pointer-events: none;
}
.mic-ipad-hotspots {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.mic-ipad-hotspots .ipad-hotspot {
    position: absolute;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
    pointer-events: auto;
}
.mic-ipad-hotspots .ipad-hotspot:hover {
    background: rgba(27, 110, 106, 0.22);
}
.mic-ipad-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(20, 16, 12, 0.9);
    color: #f4ede3;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.mic-ipad-close:hover {
    background: rgba(60, 50, 40, 0.95);
    transform: scale(1.08);
}

/* ══════════════════════════════════════════════════════════════════
   REDUCED MOTION
   Respects the OS-level "reduce motion" preference (accessibility
   setting some users enable for vestibular / motion-sickness reasons).
   Shortens animations and disables non-essential transitions so the
   desk still works but doesn't move constantly.
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    /* Kill all animations + transitions globally (everything becomes instant). */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* The splash is purely decorative — hide it so visitors go straight
       to the desk without the fake progress bar. */
    #splash { display: none !important; }
    #viewport { opacity: 1 !important; }
}