@media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html, body { width:100%; height:100%; overflow:hidden; background:#0d0b08; font-family:'Georgia','Times New Roman',serif; }

    /* ============================================================
       ENTRY SCREEN
    ============================================================ */
    /* ═══════════════════════════════════════════════════════════
       LANDING SCREEN  — sky + trees + portal door
    ═══════════════════════════════════════════════════════════ */
    :root {
      --text-primary:   #1a1208;
      --text-secondary: rgba(26,18,8,0.72);
      --text-body:      #3d2e1c;
      --text-rule:      rgba(26,18,8,0.32);
      --hint-color:     rgba(30,18,6,0.72);
      --hint-shadow:    transparent;
    }
    #entry {
      position:fixed; inset:0; z-index:200;
      background:#3d6e96; /* medium-weight blue placeholder — neutral base that reads naturally
                              whether the scene resolves to day or night; JS no longer overrides
                              this with per-time-of-day solid colours (was flashing orange/purple) */
      overflow:hidden; cursor:default;
      font-family:Georgia,'Times New Roman',serif;
      transition:opacity 1.4s ease;
    }
    #entry.fade-out { opacity:0; pointer-events:none; }

    /* Sky + Trees — both cover-fill the screen exactly */
    #land-sky, #land-trees {
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit:cover; object-position:center;
      pointer-events:none;
    }
    #land-sky   { z-index:0; opacity:0; transition:opacity 3s ease; }
    #land-trees { z-index:1; transition:filter 5s ease; }
    #land-sky.sky-drifting {
      animation:land-sky-pan 90s ease-in-out infinite alternate;
    }
    @keyframes land-sky-pan {
      from { object-position:40% center; }
      to   { object-position:60% center; }
    }

    /* Ambient overlays — mirrors room TIME_CONFIGS */
    #land-ov-ambient, #land-ov-ambient2 {
      position:absolute; inset:0; z-index:2; pointer-events:none;
      /* Soft radial cutout centred on door (≈64% 50%) so portal isn't over-tinted */
      mask-image: radial-gradient(ellipse 22vw 36vh at 64% 50%,
        rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.55) 38%, rgba(0,0,0,1.00) 68%);
      -webkit-mask-image: radial-gradient(ellipse 22vw 36vh at 64% 50%,
        rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.55) 38%, rgba(0,0,0,1.00) 68%);
      transition:background 5s ease, opacity 5s ease;
    }
    #land-ov-ambient2 { mix-blend-mode:screen; }

    /* Entrance animations */
    @keyframes text-in {
      from { opacity:0; transform:translateY(-50%) translateX(-70px); }
      to   { opacity:1; transform:translateY(-50%) translateX(0); }
    }

    /* Text block */
    #entry-text {
      position:absolute; z-index:5;
      right:49%; top:50%;
      text-align:right; max-width:38%;
      opacity:0;
      animation:text-in 1.1s cubic-bezier(0.16,1,0.3,1) 0.35s forwards;
    }
    #entry-name-wrap { display:inline-block; text-align:right; margin-bottom:0.65rem; }
    #entry-name {
      display:block;
      font-family:'Big Caslon','Didot','Iowan Old Style','Georgia',serif;
      font-size:clamp(1.9rem,3vw,3.4rem);
      font-weight:400; letter-spacing:0.15em; text-transform:uppercase;
      color:var(--text-primary); line-height:1.0; white-space:nowrap;
      padding-bottom:0.55rem;
      border-bottom:1px solid var(--text-rule);
      transition:color 1.5s, border-color 1.5s;
    }
    #entry-tagline {
      font-family:'Iowan Old Style','Palatino Linotype','Georgia',serif;
      font-style:italic;
      font-size:max(0.78rem,12px); letter-spacing:0.04em;
      color:var(--text-secondary); margin-bottom:1.9rem;
      transition:color 1.5s;
    }
    #entry-desc {
      font-family:'Iowan Old Style','Palatino Linotype','Georgia',serif;
      font-size:max(0.9rem,14px); color:var(--text-body); line-height:1.9;
      transition:color 1.5s;
    }
    #entry-desc-mob {
      display:none; position:absolute; z-index:5;
      bottom:5%; left:50%; transform:translateX(-50%);
      width:82%; text-align:center;
      font-family:'Iowan Old Style','Palatino Linotype','Georgia',serif;
      font-size:max(0.78rem,12px); color:var(--text-body); line-height:1.9;
      transition:color 1.5s; pointer-events:none;
    }

    /* Door area */
    #door-area {
      /* FIXED (not absolute): #entry has overflow:hidden + (soon) a punch-hole
         clip-path, but neither of those create a containing block for
         fixed-position descendants — so a `position:fixed` #door-area (and
         its frame/leaf children) escape that clipping entirely and paint at
         true viewport coordinates, unaffected by whatever hole we cut into
         #entry. Since #entry is itself position:fixed;inset:0 (= the exact
         viewport), left/top percentages compute identically either way. */
      position:fixed; left:63%; top:50%; z-index:201;
      width:min(17vw,210px); aspect-ratio:80/140;
      /* Slides up into its resting spot on load. The door itself is opaque
         (white leaf) so the room stays hidden throughout — this is just the
         door's entrance, not a reveal of anything behind it. */
      opacity:0; transform:translate(-50%, -50%);
      animation: door-slide-in 1.1s cubic-bezier(0.22,1,0.36,1) 0.15s forwards;
    }
    /* Gentle ambient kiss — #door-area now paints ABOVE #land-ov-ambient
       (sibling, z-index:201), so without this it looks pasted on top of the
       scene's lighting rather than part of it ("painted over the lighting").
       A LOW-strength multiply wash (--door-ambient = same colour as the
       scene-wide overlay, but at a fraction of the opacity) integrates it
       into the mood while staying brighter than the fully-dimmed surroundings
       — which is what reads as the door "glowing"/spotlit relative to the
       room around it (that contrast, not a separate glow layer, was always
       the actual effect — see #land-ov-ambient's mask-image cutout). Soft
       blurred radial shape (not a hard-edged rect) so it doesn't read as a
       flat tinted box. */
    /* Soft halo bleeding into the background behind the door — recreated via
       box-shadow (not a separate spread-out pseudo-element) so it blurs
       smoothly outward from the door's exact silhouette, the way a light
       source bleeds into a dim room rather than sitting in a bounded box.
       --door-glow shifts warmth/intensity with time of day. */
    #door-area {
      box-shadow: 0 0 2.6vw 0.3vw var(--door-glow, rgba(255,214,166,0.16));
    }
    /* Lighting ON the door surface itself — a vignette: the white leaf is
       darkened/tinted toward its edges (multiply blend, which actually shows
       up against white — overlay/screen barely touch a white base) while the
       centre stays clear/bright, so the centre reads as "lit" by contrast.
       This is what was missing — the previous attempt brightened an
       already-white centre (invisible) instead of shading the surrounding
       surface (visible). Sits directly over the leaf/frame, exact size. */
    #door-area::before {
      content:''; position:absolute; inset:0; z-index:6; pointer-events:none;
      mix-blend-mode:multiply; opacity:0.56;
      background: radial-gradient(ellipse 60% 58% at 50% 42%,
        transparent 0%, transparent 38%, var(--door-ambient, rgba(90,80,140,0.6)) 100%);
      transition: background 2.4s ease, opacity 0.32s ease;
    }
    /* Both the vignette (::before) and the halo (box-shadow) are surface
       dressing for the CLOSED door — once it's opening/revealing the room,
       they must vanish quickly too, or the vignette rectangle visibly hangs
       over the live room as it's revealed (looked like a dark floating
       panel). Fade them out in lockstep with the leaf/frame. */
    #door-area.opening::before,
    #door-area.zoom-through::before {
      opacity: 0;
    }
    #door-area.opening,
    #door-area.zoom-through {
      transition: box-shadow 0.32s ease;
      box-shadow: 0 0 0 0 transparent;
    }
    @keyframes door-slide-in {
      0%   { opacity:0; transform:translate(-50%, calc(-50% + 14vh)); }
      60%  { opacity:1; }
      100% { opacity:1; transform:translate(-50%, -50%); }
    }

    #door-leaf, #frame-svg, #entry-door {
      position:absolute; inset:0; width:100%; height:100%;
    }

    /* Portal — layer 1: a glimpse of the room through the doorway.
       Pinned to the viewport at full scale (no scaling/zooming of the image
       itself — that's what caused pixelation). Visually "clipped" down to the
       doorway window via clip-path, which JS keeps in sync with the door's
       on-screen rect. To "walk through", we simply animate that clip-path
       outward until it covers the full viewport — an iris/tunnel reveal that
       lands the user at the room's true scale, no zoom-back-out needed. */
    #portal-wrap {
      /* RETIRED: we no longer composite a separate static room snapshot —
         instead we punch an expanding "hole" directly into #entry's
         clip-path, revealing the REAL, live room DOM underneath (always
         correct lighting/time-of-day, never a stale pre-rendered image).
         See syncEntryHole()/animateDoorReveal(). Kept in DOM/CSS but hidden
         to avoid touching the many other references to it. */
      display:none;
      position:fixed; inset:0; z-index:1;
      overflow:hidden; pointer-events:none;
      clip-path: inset(50% 50% 50% 50%);
      opacity:0;
      /* clip-path is driven frame-by-frame in JS during the reveal (see
         animateDoorReveal) — no CSS transition on it, so our manual values
         apply immediately each frame instead of fighting a transition. */
      transition: opacity 0.4s ease;
    }
    #portal-wrap.synced { opacity:1; }
    #portal-img {
      position:absolute; inset:0; width:100%; height:100%;
      object-fit:cover;
      object-position: 38% 62%;
    }
    /* NOTE: the clip-path expansion and the frame/door-leaf scale-up are NOT
       driven by CSS transitions — scale() (multiplicative) and clip-path inset
       (linear in px) accelerate at different perceptual rates even under an
       identical timing function, so they always look desynced. Instead both
       are driven every frame from one shared progress value in JS
       (see animateDoorReveal()) — they're two outputs of one number, so they
       can't drift apart. The rules below only define the END opacity states;
       transform/clip-path are set inline by the JS animation loop.
    */
    /* Opacity for the frame/leaf is now driven inline, frame-by-frame, from
       the SAME shared progress as the scale (see animateDoorReveal) — it only
       starts fading in the final stretch, once it has already grown past the
       viewport edges, so it reads as "zooming past you" rather than "vanishing
       mid-grow". No CSS transition here; JS writes win each frame. */
    #entry.zoom-through #entry-text,
    #entry.zoom-through #entry-desc-mob,
    #door-area.zoom-through .door-subhint,
    #door-area.zoom-through #portal-tint {
      transition: opacity 0.5s ease;
      opacity: 0;
    }
    /* .door-hint runs an infinite `breathe` opacity keyframe animation —
       animations win over plain opacity/transition declarations, so the
       rule above alone never actually hid it (it kept "breathing" at
       0.65–1 right through the reveal and into the room). Cancel the
       animation outright and force it to 0 so it actually disappears. */
    #door-area.zoom-through .door-hint {
      animation: none !important;
      transition: opacity 0.4s ease;
      opacity: 0 !important;
    }
    #entry.zoom-through #land-sky,
    #entry.zoom-through #land-trees,
    #entry.zoom-through #land-ov-ambient,
    #entry.zoom-through #land-ov-ambient2 {
      transition: opacity 0.9s ease 0.3s;
      opacity: 0;
    }
    #portal-tint {
      position:absolute; inset:0; z-index:2;
      pointer-events:none; mix-blend-mode:multiply;
      transition:background 5s ease;
    }

    /* Door leaf */
    #door-leaf {
      pointer-events:none; transform-origin:0% 50%; z-index:2;
      transition:transform 0.85s cubic-bezier(0.4,0,0.2,1) 0.05s,
                 opacity   0.35s ease 0.65s;
    }
    #door-area.opening #door-leaf { transform:scaleX(0); opacity:0; }

    /* Frame */
    #frame-svg { pointer-events:none; z-index:3; }

    /* Click target */
    #entry-door { cursor:pointer; z-index:7; }

    /* OPEN hint */
    .door-subhint {
      display:none;
    }
    .door-hint {
      position:absolute; bottom:-2.8rem; left:50%; transform:translateX(-50%);
      font-size:max(0.72rem,11px); letter-spacing:0.38em; text-transform:uppercase;
      font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;
      color:var(--hint-color);
      text-shadow:0 0 8px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.40);
      pointer-events:none; white-space:nowrap;
      animation:breathe 3.2s ease-in-out infinite;
      transition:color 1.5s;
    }
    @keyframes breathe { 0%,100%{opacity:0.65;} 50%{opacity:1;} }

    /* Mobile */
    @media (max-width:520px) {
      #entry-text {
        right:auto; left:50%; top:10%; transform:translateX(-50%);
        max-width:88%; text-align:center; animation:none; opacity:1;
      }
      #entry-name-wrap { display:block; text-align:center; }
      #entry-tagline   { text-align:center; margin-bottom:0; }
      #entry-desc      { display:none; }
      #entry-desc-mob  {
        display:block;
        top:26%; bottom:auto;
        left:50%; transform:translateX(-50%);
        width:min(80vw,300px);
        font-size:max(0.78rem,12px);
        line-height:1.55;
      }
      #door-area { left:50%; top:62%; width:min(54vw,198px); }
      .door-hint { bottom:-2.4rem; font-size:max(0.72rem,11px); }
      .door-subhint {
        display:block;
        position:absolute;
        bottom:-6rem; left:50%; transform:translateX(-50%);
        width:min(80vw,300px);
        text-align:center;
        font-size:max(0.78rem,12px); line-height:1.55;
        font-family:Georgia,'Times New Roman',serif;
        color:var(--text-primary);
        pointer-events:none;
      }
    }

    /* ============================================================
       ONBOARDING  (appears after entering, fades after 8s)
    ============================================================ */
    #onboarding {
      position:fixed; top:50%; left:50%;
      transform:translate(-50%, -50%);
      z-index:90;
      background:rgba(13,11,8,0.82);
      backdrop-filter:blur(14px);
      border:1px solid rgba(255,255,255,0.1);
      border-radius:18px;
      padding:1.6rem 2rem 1.4rem;
      display:flex; flex-direction:column; align-items:center; gap:0.9rem;
      opacity:0; pointer-events:none;
      transition:opacity 0.6s ease;
      min-width:260px; max-width:min(88vw, 468px);
      text-align:center;
    }
    #onboarding.visible { opacity:1; pointer-events:all; }
    #onboarding.fade-ob { opacity:0; pointer-events:none; }

    .ob-hint {
      color:rgba(240,226,200,0.8);
      font-size:0.78rem; letter-spacing:0.07em; line-height:1.5;
      display:flex; align-items:flex-start; gap:0.55rem;
      text-align:left; width:100%;
    }
    .ob-icon { font-size:0.9rem; flex-shrink:0; margin-top:0.05em; }
    .ob-divider { width:100%; height:1px; background:rgba(255,255,255,0.08); }
    .ob-desktop-note {
      font-size:0.65rem; letter-spacing:0.08em;
      color:rgba(240,226,200,0.35);
      font-style:italic;
    }
    .ob-actions {
      display:flex; flex-direction:column; gap:0.5rem;
      width:100%; margin-top:0.2rem;
    }
    #ob-tour {
      background:rgba(255,255,255,0.13);
      border:1px solid rgba(255,255,255,0.28);
      color:rgba(240,226,200,0.95);
      padding:0.4rem 1.2rem; border-radius:20px;
      font-size:0.72rem; letter-spacing:0.1em;
      cursor:pointer; font-family:inherit;
      transition:all 0.2s;
    }
    #ob-tour:hover { background:rgba(255,255,255,0.22); color:#fff; }
    #ob-explore {
      background:transparent; border:none;
      color:rgba(240,226,200,0.45);
      padding:0.2rem 0.5rem;
      font-size:0.65rem; letter-spacing:0.1em;
      cursor:pointer; font-family:inherit;
      transition:color 0.2s;
    }
    #ob-explore:hover { color:rgba(240,226,200,0.75); }

    /* ── Tour bar ─────────────────────────────────────────────── */
    #tour-bar {
      position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%);
      z-index:10001;
      display:flex; align-items:center; gap:0.8rem;
      background:rgba(13,11,8,0.88); backdrop-filter:blur(12px);
      border:1px solid rgba(255,255,255,0.12); border-radius:32px;
      padding:0.45rem 0.6rem 0.45rem 0.8rem;
      opacity:0; pointer-events:none;
      transition:opacity 0.35s ease, transform 0.35s ease;
      transform:translateX(-50%) translateY(8px);
      white-space:nowrap;
    }
    #tour-bar.visible {
      opacity:1; pointer-events:all;
      transform:translateX(-50%) translateY(0);
    }
    #tour-exit-btn {
      background:transparent; border:none;
      color:rgba(240,226,200,0.45); font-size:0.65rem;
      letter-spacing:0.08em; cursor:pointer; font-family:inherit;
      padding:0.2rem 0.5rem; border-radius:20px;
      transition:color 0.2s;
    }
    #tour-exit-btn:hover { color:rgba(240,226,200,0.9); }
    #tour-step-indicator {
      color:rgba(240,226,200,0.5); font-size:0.65rem;
      letter-spacing:0.1em; padding:0 0.2rem;
    }
    #tour-next-btn {
      background:rgba(255,255,255,0.1);
      border:1px solid rgba(255,255,255,0.2);
      color:rgba(240,226,200,0.9);
      padding:0.3rem 0.9rem; border-radius:20px;
      font-size:0.7rem; letter-spacing:0.08em;
      cursor:pointer; font-family:inherit;
      transition:all 0.2s;
    }
    #tour-next-btn:hover { background:rgba(255,255,255,0.2); color:#fff; }

    /* ── Tour end overlay ─────────────────────────────────────── */
    #tour-end {
      position:fixed; inset:0; z-index:10002;
      display:flex; align-items:center; justify-content:center;
      background:rgba(0,0,0,0.45); backdrop-filter:blur(4px);
      opacity:0; pointer-events:none;
      transition:opacity 0.4s ease;
    }
    #tour-end.visible { opacity:1; pointer-events:all; }
    #tour-end-card {
      background:rgba(13,11,8,0.92); backdrop-filter:blur(16px);
      border:1px solid rgba(255,255,255,0.12); border-radius:18px;
      padding:2rem 2.2rem 1.6rem;
      display:flex; flex-direction:column; align-items:center; gap:0.9rem;
      max-width:min(88vw,442px); text-align:center;
    }
    #tour-end-title {
      color:rgba(240,226,200,0.95); font-size:1rem;
      font-family:Georgia,serif; letter-spacing:0.04em;
    }
    #tour-end-body {
      color:rgba(240,226,200,0.6); font-size:0.76rem;
      line-height:1.6; letter-spacing:0.03em;
    }
    #tour-end-close {
      background:rgba(255,255,255,0.1);
      border:1px solid rgba(255,255,255,0.22);
      color:rgba(240,226,200,0.9);
      padding:0.4rem 1.4rem; border-radius:20px;
      font-size:0.72rem; letter-spacing:0.1em;
      cursor:pointer; font-family:inherit;
      transition:all 0.2s; margin-top:0.2rem;
    }
    #tour-end-close:hover { background:rgba(255,255,255,0.2); color:#fff; }

    /* ============================================================
       ROOM
    ============================================================ */
    #room-container {
      width:100vw; height:100vh; overflow:hidden;
      cursor:grab; position:relative; user-select:none;
      background:#3d6e96; /* medium-weight blue placeholder while the room sky/scene loads */
    }
    #room-container.dragging { cursor:grabbing; }
    #room-container.edit-active { cursor:default; }
    #room-wrapper { position:absolute; top:0; left:0; height:100%; will-change:transform; }
    /* All scene layers share identical sizing so they align pixel-perfectly */
    .room-layer {
      height:100vh; width:auto; display:block;
      position:absolute; top:0; left:0;
      pointer-events:none; -webkit-user-drag:none;
    }
    #sky-img  { z-index:0; transition:opacity 3s ease; }
    /* Cloud drift — pans the sky image slowly left↔right for overcast/cloudy */
    #sky-img.sky-drifting {
      animation: sky-img-pan 90s ease-in-out infinite alternate;
      will-change: transform;
    }
    @keyframes sky-img-pan {
      from { transform: translateX(0%); }
      to   { transform: translateX(-6%); }
    }
    /* sky-anim shares z-index:0 — DOM order puts it above sky-img, below tree-img */
    #sky-anim {
      position:absolute; top:0; left:0; height:100vh; width:100%;
      z-index:0; pointer-events:none; overflow:hidden;
    }
    #tree-img { z-index:1; transition:filter 5s ease; transform-origin:bottom center; }
    /* window-weather: same z-index as tree, DOM order puts it above tree, below room */
    #window-weather {
      position:absolute; top:0; left:0; width:100%; height:100%;
      z-index:1; pointer-events:none;
    }
    #room-image { z-index:2; transition:filter 5s ease; position:relative; }

    /* Cloud visuals handled by sky images — .sky-cloud CSS removed */

    /* Stars */
    .sky-star {
      position:absolute; border-radius:50%; background:#fff;
      animation:star-twinkle ease-in-out infinite;
      will-change:opacity, transform;
    }
    @keyframes star-twinkle {
      0%,100% { opacity:var(--sd,0.08); transform:scale(1); }
      50%      { opacity:var(--sb,0.75); transform:scale(1.35); }
    }

    /* ============================================================
       LIGHTING OVERLAYS
    ============================================================ */
    .overlay { position:absolute; pointer-events:none; transition:background 5s ease, opacity 5s ease, mix-blend-mode 0s; }
    #ov-ambient  { inset:0; z-index:2; }
    #ov-ambient2 { inset:0; z-index:2; mix-blend-mode:screen; }
    #ov-window  { left:18%; top:0; width:24%; height:72%; border-radius:0 0 60% 60%; filter:blur(50px); z-index:3; }
    /* Overcast flattening overlay — softens highlights/shadows when sky is overcast in daytime */
    #ov-overcast {
      position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none;
      background:rgba(185,195,210,0.14);
      transition:opacity 4s ease;
    }
    body.sky-overcast-day #ov-overcast { opacity:1; }
    body.sky-overcast-day #ov-window   { opacity:0.25 !important; } /* kill direct sun beam */

    /* Cold weather tone — desaturates warm orange and pushes room toward blue/grey */
    #ov-cold {
      position:absolute; inset:0; z-index:5; opacity:0; pointer-events:none;
      background:rgba(80,110,170,0.22);
      mix-blend-mode:multiply;
      transition:opacity 3s ease;
    }
    body.weather-rain  #ov-cold,
    body.weather-storm #ov-cold { opacity:1; }
    body.weather-snow  #ov-cold { opacity:0.75; background:rgba(140,165,210,0.20); }
    body.weather-fog   #ov-cold { opacity:0.65; background:rgba(100,120,160,0.18); }
    body.sky-overcast-day #ov-cold { opacity:0.50; background:rgba(100,125,175,0.18); }

    /* Also slightly desaturate + cool the room image itself during precipitation or overcast */
    body.weather-rain  #room-image,
    body.weather-storm #room-image { filter:saturate(0.75) hue-rotate(15deg) brightness(0.88) !important; }
    body.weather-snow  #room-image { filter:saturate(0.80) hue-rotate(10deg) brightness(0.92) !important; }
    body.weather-fog   #room-image { filter:saturate(0.70) brightness(0.90) !important; }
    body.sky-overcast-day #room-image { filter:saturate(0.78) brightness(0.93) !important; }
    #ov-lamp-cube {
      /* Upper lamp glow — close halo around the bulb */
      left:60%; top:2%; width:16%; height:38%;
      border-radius:50%; filter:blur(28px); z-index:3; opacity:0;
      transition:opacity 1.8s ease, background 1.8s ease;
    }
    #ov-lamp-pool {
      /* Wide warm pool — spills across desk, chair, half the floor */
      position:absolute;
      left:28%; top:18%; width:58%; height:72%;
      border-radius:50%; filter:blur(70px); z-index:3; opacity:0;
      background:radial-gradient(ellipse at 52% 18%,
        rgba(255,200,85,0.50) 0%,
        rgba(255,165,50,0.28) 30%,
        rgba(240,130,25,0.12) 58%,
        rgba(200,90,10,0.04) 78%,
        transparent 92%);
      transition:opacity 2s ease, background 2s ease;
      pointer-events:none;
    }
    #ov-lamp-flicker {
      /* Occasional flicker — driven by JS, no CSS loop */
      position:absolute;
      left:60%; top:2%; width:10%; height:26%;
      border-radius:50%; filter:blur(16px); z-index:4; opacity:0;
      background:radial-gradient(circle, rgba(255,235,150,0.65) 0%, transparent 70%);
      pointer-events:none;
      transition:opacity 0.06s ease;
    }
    #ov-lamp-edison {
      left:41%; top:10%; width:10%; height:35%;
      border-radius:50%; filter:blur(28px); z-index:3;
      background:radial-gradient(circle, rgba(255,200,80,0.22) 0%, transparent 70%);
    }
    #ov-rain {
      inset:0; opacity:0; transition:opacity 2s ease; pointer-events:none;
    }
    #ov-rain canvas, #ov-wind canvas { position:absolute; top:0; left:0; width:100%; height:100%; }

    /* ============================================================
       HOTSPOTS
    ============================================================ */
    .hotspot {
      position:absolute; z-index:10; transform:translate(-50%,-50%); cursor:pointer;
      /* Default ring color: white */
      --hs-r:255; --hs-g:255; --hs-b:255;
    }
    /* Hotspot rings/labels live on the REAL room DOM, which is now visible
       through the landing-page door peek (see syncEntryHole/animateDoorReveal
       — we reveal the live room rather than a static snapshot so lighting is
       always current). But the rings/pulsing animations shouldn't be visible
       or interactive until the user has actually walked through the door —
       otherwise they read as a stray glowing circle floating in the peek. */
    body:not(.room-entered) .hotspot {
      opacity:0; pointer-events:none; animation:none;
    }
    .hs-ring {
      width:38px; height:38px; border-radius:50%;
      border:1.5px solid rgba(var(--hs-r),var(--hs-g),var(--hs-b), 0.55);
      background:rgba(var(--hs-r),var(--hs-g),var(--hs-b), 0.08);
      backdrop-filter:blur(3px);
      transition:width 0.25s, height 0.25s, background 0.25s, border-color 0.25s;
      animation:hs-pulse 2.8s ease-in-out infinite;
    }
    .hotspot:focus-visible .hs-ring {
      width:46px; height:46px;
      background:rgba(var(--hs-r),var(--hs-g),var(--hs-b), 0.22);
      border-color:rgba(255,255,255,0.95);
      outline:2px solid rgba(255,255,255,0.85);
      outline-offset:3px;
      animation:none;
    }
    .hotspot:hover .hs-ring {
      width:46px; height:46px;
      background:rgba(var(--hs-r),var(--hs-g),var(--hs-b), 0.22);
      border-color:rgba(var(--hs-r),var(--hs-g),var(--hs-b), 0.90);
      animation:none;
    }
    @keyframes hs-pulse { 0%,100%{ transform:scale(1); opacity:0.65; } 50%{ transform:scale(1.12); opacity:1; } }
    /* Tour mode: warm amber highlight + visible label, no extra animation */
    .hotspot.hs-tour-active .hs-ring {
      animation:none !important;
      border-color:rgba(255,200,80,0.95) !important;
      background:rgba(255,180,40,0.22) !important;
      box-shadow:0 0 10px 2px rgba(255,190,60,0.35) !important;
      width:46px !important; height:46px !important;
      transition:none !important;
    }
    .hotspot.hs-tour-active .hs-label { opacity:1 !important; }
    .hs-label {
      position:absolute; top:46px; left:50%; transform:translateX(-50%);
      white-space:nowrap; background:rgba(13,11,8,0.72); color:rgba(240,226,200,0.9);
      font-size:0.68rem; padding:3px 10px; border-radius:20px;
      letter-spacing:0.08em; opacity:0; pointer-events:none; transition:opacity 0.25s;
    }
    .hotspot:hover .hs-label { opacity:1; }
    /* Invisible / easter-egg rings — truly hidden outside edit mode.
       Must use !important + animation:none to beat the hs-pulse keyframe opacity. */
    .hotspot.egg .hs-ring       { opacity:0 !important; animation:none !important; }
    .hotspot.egg:hover .hs-ring { opacity:0 !important; animation:none !important; }
    .hotspot.egg .hs-label      { opacity:0 !important; }

    /* Edit mode */
    body.edit-mode .hotspot { cursor:grab !important; }
    body.edit-mode .hotspot.dragging-hs { cursor:grabbing !important; z-index:20; }
    body.edit-mode .hotspot .hs-ring { animation:none !important; border:2px dashed rgba(255,180,50,0.85) !important; background:rgba(255,160,30,0.18) !important; opacity:1 !important; width:42px !important; height:42px !important; }
    body.edit-mode .hotspot:hover .hs-ring { border-color:rgba(255,220,80,1) !important; background:rgba(255,180,50,0.30) !important; }
    body.edit-mode .hotspot .hs-label { opacity:1 !important; background:rgba(200,120,0,0.85) !important; color:white !important; font-size:0.72rem !important; }
    body.edit-mode .hotspot.hs-locked .hs-ring { border:2px solid rgba(80,220,120,0.9) !important; background:rgba(60,200,100,0.18) !important; cursor:default !important; }
    /* Egg rings in edit mode: visible but clearly ghosted so you know they're invisible to visitors */
    body.edit-mode .hotspot.egg .hs-ring { opacity:0.32 !important; border:2px dashed rgba(200,160,255,0.65) !important; background:rgba(160,100,255,0.10) !important; animation:none !important; }
    body.edit-mode .hotspot.egg:hover .hs-ring { opacity:0.65 !important; border-color:rgba(220,180,255,0.9) !important; }
    body.edit-mode .hotspot.egg .hs-label { opacity:1 !important; background:rgba(100,60,180,0.85) !important; }
    body.edit-mode .hotspot.hs-locked { cursor:default !important; }
    body.edit-mode .hotspot.hs-locked .hs-label { background:rgba(30,140,70,0.85) !important; }
    body.edit-mode .hotspot.egg .hs-ring { opacity:1 !important; }

    /* ============================================================
       EDIT TOOLBAR & PANEL
    ============================================================ */
    #edit-toolbar {
      position:fixed; top:0; left:0; right:0; z-index:300;
      background:rgba(20,14,5,0.92); backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(255,180,50,0.3);
      padding:0.7rem 1.2rem;
      display:none; align-items:center; gap:1rem; flex-wrap:wrap;
    }
    body.edit-mode #edit-toolbar { display:flex; }
    #edit-toolbar .et-title { color:rgba(255,180,50,0.9); font-size:0.78rem; letter-spacing:0.14em; margin-right:0.5rem; }
    #edit-toolbar .et-hint  { color:rgba(240,226,200,0.45); font-size:0.72rem; letter-spacing:0.06em; }
    .et-btn { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); color:rgba(240,226,200,0.85); padding:0.38rem 1rem; border-radius:6px; font-size:0.75rem; letter-spacing:0.1em; cursor:pointer; font-family:inherit; transition:background 0.2s; white-space:nowrap; }
    .et-btn:hover { background:rgba(255,255,255,0.16); }
    .et-btn.danger { border-color:rgba(255,80,80,0.4); color:rgba(255,160,160,0.85); }

    #pos-panel {
      position:fixed; right:0; top:0; bottom:0; z-index:290; width:230px;
      background:rgba(13,11,8,0.92); backdrop-filter:blur(12px);
      border-left:1px solid rgba(255,180,50,0.2);
      padding-top:56px; overflow-y:auto;
      display:none; flex-direction:column;
      transition:transform 0.3s ease;
    }
    body.edit-mode #pos-panel { display:flex; }
    #pos-panel.collapsed { transform:translateX(200px); }
    #pp-collapse-btn {
      position:sticky; top:0; z-index:2;
      background:rgba(255,180,50,0.15); border:none; border-bottom:1px solid rgba(255,180,50,0.2);
      color:rgba(255,200,80,0.8); font-size:0.72rem; letter-spacing:0.1em;
      padding:0.4rem 1rem; cursor:pointer; font-family:inherit;
      text-align:left; width:100%;
      transition:background 0.2s;
    }
    #pp-collapse-btn:hover { background:rgba(255,180,50,0.25); }
    .pp-header { padding:0.9rem 1rem 0.5rem; color:rgba(240,226,200,0.5); font-size:0.68rem; letter-spacing:0.12em; border-bottom:1px solid rgba(255,255,255,0.06); }
    .pp-row { display:flex; align-items:center; justify-content:space-between; padding:0.45rem 1rem; border-bottom:1px solid rgba(255,255,255,0.04); }
    .pp-row.is-locked .pp-name { color:rgba(80,220,120,0.85); }
    .pp-name { font-size:0.72rem; color:rgba(240,226,200,0.65); letter-spacing:0.05em; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .pp-coords { font-size:0.65rem; color:rgba(255,180,50,0.6); letter-spacing:0.03em; text-align:right; }
    .pp-lock-icon { margin-left:6px; font-size:0.7rem; }
    .pp-copy-btn { margin:0.8rem 1rem; background:rgba(255,180,50,0.12); border:1px solid rgba(255,180,50,0.35); color:rgba(255,180,50,0.9); padding:0.5rem; border-radius:6px; font-size:0.73rem; letter-spacing:0.1em; cursor:pointer; font-family:inherit; transition:background 0.2s; }
    .pp-copy-btn:hover { background:rgba(255,180,50,0.22); }
    .pp-output { margin:0 1rem 1rem; background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.08); border-radius:6px; padding:0.6rem; font-size:0.62rem; color:rgba(240,226,200,0.5); font-family:'Courier New',monospace; white-space:pre-wrap; word-break:break-all; max-height:180px; overflow-y:auto; display:none; }
    .pp-output.visible { display:block; }

    /* Lamp-on glow ring */
    #hs-lamp-toggle .lamp-glow {
      position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%);
      width:58px; height:58px; border-radius:50%;
      background:radial-gradient(circle, rgba(255,210,80,0.55) 0%, rgba(255,175,40,0.18) 50%, transparent 75%);
      pointer-events:none;
      opacity:0; transition:opacity 1.2s ease;
      animation:lamp-glow-pulse 2.8s ease-in-out infinite;
    }
    body.lamp-on #hs-lamp-toggle .lamp-glow { opacity:1; }
    @keyframes lamp-glow-pulse {
      0%,100% { transform:translate(-50%,-50%) scale(1);   opacity:0.70; }
      50%      { transform:translate(-50%,-50%) scale(1.22); opacity:1.00; }
    }

    #edit-toggle {
      position:fixed; top:1.2rem; left:1.2rem; z-index:400;
      background:rgba(255,180,50,0.12); border:1px solid rgba(255,180,50,0.35);
      color:rgba(255,200,80,0.85); padding:0.38rem 0.9rem; border-radius:6px;
      font-size:0.72rem; letter-spacing:0.12em; cursor:pointer; font-family:inherit;
      transition:background 0.25s; display:none;
    }
    /* Hidden from the live UI — capability still works, just not exposed.
       To re-enable for testing, change this back to `display:block;`. */
    body.room-entered #edit-toggle { display:none; }
    #edit-toggle:hover { background:rgba(255,180,50,0.25); }
    body.edit-mode #edit-toggle { background:rgba(255,180,50,0.28); border-color:rgba(255,200,80,0.7); color:#fff; }

    #test-toggle {
      position:fixed; top:1.2rem; right:8rem; z-index:400;
      background:rgba(100,200,255,0.10); border:1px solid rgba(100,200,255,0.30);
      color:rgba(140,210,255,0.85); padding:0.38rem 0.9rem; border-radius:6px;
      font-size:0.72rem; letter-spacing:0.12em; cursor:pointer; font-family:inherit;
      transition:background 0.25s; display:none;
    }
    /* Hidden from the live UI — capability still works, just not exposed.
       To re-enable for testing, change this back to `display:block;`. */
    body.room-entered #test-toggle { display:none; }
    body.edit-mode #test-toggle { display:none; }
    #test-toggle:hover { background:rgba(100,200,255,0.22); }
    body.test-mode #test-toggle { background:rgba(100,200,255,0.22); border-color:rgba(140,220,255,0.7); color:#fff; }

    #test-panel {
      position:fixed; top:3.8rem; left:1.2rem; z-index:400;
      background:rgba(10,12,28,0.92); backdrop-filter:blur(16px);
      border:1px solid rgba(100,180,255,0.18); border-radius:12px;
      padding:0.6rem 0; min-width:210px;
      display:none; flex-direction:column;
      box-shadow:0 8px 32px rgba(0,0,0,0.5);
    }
    body.test-mode #test-panel { display:flex; }
    .tp-header {
      display:flex; align-items:center; justify-content:space-between;
      padding:0.2rem 0.85rem 0.5rem; border-bottom:1px solid rgba(255,255,255,0.07);
    }
    .tp-title { font-size:0.7rem; letter-spacing:0.12em; color:rgba(140,210,255,0.7); }
    .tp-close {
      background:none; border:none; color:rgba(255,255,255,0.4);
      font-size:1.1rem; cursor:pointer; line-height:1; padding:0 0.2rem;
    }
    .tp-close:hover { color:rgba(255,255,255,0.85); }
    .tp-section-label {
      font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase;
      color:rgba(255,255,255,0.22); padding:0.55rem 0.85rem 0.15rem;
    }
    .tp-item {
      background:none; border:none; text-align:left; width:100%;
      padding:0.38rem 0.85rem; font-size:0.75rem; font-family:inherit;
      color:rgba(220,230,255,0.75); cursor:pointer; letter-spacing:0.03em;
      transition:background 0.15s, color 0.15s;
    }
    .tp-item:hover { background:rgba(100,180,255,0.12); color:rgba(255,255,255,0.95); }
    /* Within a tp-group, only one item is active at a time (radio behaviour) */
    .tp-group .tp-item.active { color:rgba(140,220,255,1); background:rgba(100,180,255,0.18); }
    /* One-shot items flash briefly but don't stay active */
    .tp-oneshot.flash { color:rgba(180,255,200,1); background:rgba(80,200,120,0.18); }
    .tp-reset { color:rgba(255,180,100,0.6) !important; margin-top:0.3rem; border-top:1px solid rgba(255,255,255,0.06); padding-top:0.5rem; }

    /* ============================================================
       MODAL
    ============================================================ */
    #modal-bg { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,0.45); backdrop-filter:blur(10px); opacity:0; pointer-events:none; transition:opacity 0.4s ease; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
    #modal-bg.open { opacity:1; pointer-events:all; }
    #modal { background:#faf5ed; border-radius:14px; padding:2.5rem 2.5rem 2rem; max-width:580px; width:100%; max-height:80vh; overflow-y:auto; position:relative; transform:translateY(22px); transition:transform 0.4s ease; box-shadow:0 30px 80px rgba(0,0,0,0.35); }
    #modal-bg.open #modal { transform:translateY(0); }
    #modal-close { position:absolute; top:1.1rem; right:1.2rem; background:none; border:none; font-size:1.6rem; color:#6b5a42; cursor:pointer; line-height:1; transition:color 0.2s; }
    #modal-close:hover { color:#2a1f0e; }
    #modal h2 { font-size:1.3rem; font-weight:400; color:#2a1f0e; margin-bottom:1rem; padding-right:2rem; }
    #modal-body { color:#4a3f2f; line-height:1.75; font-size:0.93rem; }
    #modal-body p+p { margin-top:0.8rem; }
    #modal-body a { color:#7a5c2e; text-decoration:underline; text-underline-offset:3px; }

    /* ============================================================
       NAV MENU
    ============================================================ */
    /* ── Easter egg counter ── */
    /* Cohesive status bar — pairs the weather/time readout with the egg
       counter in one pill, dot-separated like the badge's own segments, with
       a translucent backing so the (often bright) art behind never swallows
       the text. */
    #status-bar {
      position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%); z-index:50;
      display:none; align-items:baseline; gap:0.6em;
      background:rgba(18,14,10,0.42); backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,0.08);
      border-radius:999px; padding:0.45rem 1.15rem;
      transition:opacity 0.4s ease;
    }
    body.room-entered #status-bar { display:flex; }
    body.edit-mode #status-bar { display:none; }
    .status-sep { color:rgba(240,226,200,0.5); font-size:0.72rem; }
    #egg-counter {
      display:flex; align-items:center; justify-content:center;
      pointer-events:none;
    }
    #egg-counter-label {
      font-size:0.72rem; letter-spacing:0.1em;
      color:rgba(245,236,220,0.92);
      /* Matches #time-badge's whimsical Georgia-serif voice (the page default)
         instead of the flatter sans-serif UI font. */
      font-family:'Georgia','Times New Roman',serif;
      white-space:nowrap; text-shadow:0 1px 5px rgba(0,0,0,0.55);
      transition:color 0.4s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
    }
    /* When an egg is found: pop up above everything, glow gold */
    #egg-counter.egg-found {
      z-index:10000;
    }
    #egg-counter.egg-found #egg-counter-label {
      color:rgba(255,210,80,1);
      transform:scale(1.5);
      text-shadow:0 0 12px rgba(255,200,60,0.8), 0 0 24px rgba(255,200,60,0.4);
    }
    #egg-counter.all-found #egg-counter-label {
      animation:egg-pulse 0.65s cubic-bezier(0.34,1.56,0.64,1) 3;
    }
    @keyframes egg-pulse {
      0%,100%{transform:scale(1.5);} 50%{transform:scale(2.0);}
    }
    /* Confetti pieces */
    .egg-confetti {
      position:fixed; pointer-events:none; z-index:10001;
      width:7px; height:7px; border-radius:2px;
      animation:egg-confetti-fall 1.2s ease-in forwards;
    }
    @keyframes egg-confetti-fall {
      0%   { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); }
      100% { opacity:0; transform:translate(var(--cx),var(--cy)) rotate(var(--cr)) scale(0.4); }
    }

    #nav-btn {
      position:fixed; top:1.6rem; right:2rem; z-index:50;
      width:42px; height:42px; border-radius:50%;
      background:rgba(18,14,10,0.42); backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,0.08); cursor:pointer;
      display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
      transition:background 0.3s;
      box-shadow:0 2px 10px rgba(0,0,0,0.25);
    }
    body.room-entered #nav-btn { display:flex; }
    #nav-btn:hover { background:rgba(28,22,16,0.58); }
    #nav-btn span { width:16px; height:1.5px; background:rgba(245,236,220,0.92); display:block; border-radius:2px; }
    #nav-menu { position:fixed; top:5.2rem; right:2rem; z-index:50; background:rgba(13,11,8,0.88); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:0.8rem 0.5rem; min-width:190px; opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity 0.25s, transform 0.25s; }
    #nav-menu.open { opacity:1; pointer-events:all; transform:translateY(0); }
    .nav-item { display:block; width:100%; padding:0.55rem 1rem; color:rgba(240,226,200,0.75); font-size:0.82rem; letter-spacing:0.07em; background:none; border:none; text-align:left; cursor:pointer; font-family:inherit; border-radius:8px; transition:background 0.2s, color 0.2s; }
    .nav-item:hover { background:rgba(255,255,255,0.08); color:rgba(240,226,200,1); }

    #time-badge {
      color:rgba(245,236,220,0.92); font-size:0.72rem; letter-spacing:0.1em;
      /* Keeps the page's default Georgia serif — the warmer, more whimsical
         voice you preferred — rather than the flatter sans-serif UI font. */
      white-space:nowrap;
      text-shadow:0 1px 5px rgba(0,0,0,0.55);
    }
    #time-badge .tb-sep { opacity:0.6; margin:0 0.35em; }
    #time-badge .tb-weather { color:rgba(225,238,255,0.92); }
    body.edit-mode #nav-btn { display:none; }

    /* ============================================================
       WINDOW AMBIENT ANIMATIONS
       Adjust --win-* variables to match your image's window position.
       left/top/width/height are % of image width and viewport height.
    ============================================================ */
    #window-anim {
      position: absolute;
      /* ↓ Tune these to align with your bay window */
      left:   14%;
      top:    0%;
      width:  28%;
      height: 54%;
      z-index: 5;
      overflow: hidden;
      pointer-events: none;
      /* Soft mask so edges blend into the image */
      -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, black 55%, transparent 100%);
      mask-image:         radial-gradient(ellipse 90% 90% at 50% 40%, black 55%, transparent 100%);
    }

    /* Clouds */
    /* CSS cloud divs removed — sky images handle cloud visuals */

    /* Falling leaves (replaces crude tree silhouettes) */
    .leaf {
      position: absolute;
      border-radius: 50% 0 50% 0;
      pointer-events: none;
      will-change: transform, opacity;
      transform-origin: 40% 40%;
      animation: leaf-fall linear forwards;
    }
    @keyframes leaf-fall {
      0%   { transform: translateY(-12px) translateX(0)              rotate(0deg);          opacity: 0;    }
      8%   { opacity: 0.88; }
      40%  { transform: translateY(calc(var(--lfy,260px)*0.45))  translateX(calc(var(--lfx,25px)*0.6))  rotate(calc(var(--lfr,190deg)*0.45)); }
      88%  { opacity: 0.55; }
      100% { transform: translateY(var(--lfy,260px)) translateX(var(--lfx,25px)) rotate(var(--lfr,190deg)); opacity: 0; }
    }

    /* Birds */
    .bird {
      position: absolute;
      pointer-events: none;
      will-change: transform;
    }
    .bird-body { position:relative; width:20px; height:8px; }
    .bird-wing-l, .bird-wing-r {
      position: absolute; top:0;
      width:10px; height:5px;
      border-top: 1.8px solid rgba(35,25,15,0.72);
      border-radius: 50% 50% 0 0;
    }
    .bird-wing-l { left:0;  transform-origin: right bottom; animation: wing-l 0.28s ease-in-out infinite alternate; }
    .bird-wing-r { right:0; transform-origin: left  bottom; animation: wing-r 0.28s ease-in-out infinite alternate; }
    @keyframes wing-l { from { transform: rotateX(0) rotateZ(-4deg); } to { transform: rotateX(40deg) rotateZ(6deg); } }
    @keyframes wing-r { from { transform: rotateX(0) rotateZ( 4deg); } to { transform: rotateX(40deg) rotateZ(-6deg); } }

    /* Bird shadow on room floor */
    #bird-shadow {
      position: absolute;
      width: 28px; height: 10px;
      background: radial-gradient(ellipse, rgba(0,0,0,0.22) 0%, transparent 70%);
      border-radius: 50%;
      filter: blur(4px);
      pointer-events: none;
      z-index: 6;
      opacity: 0;
      top: 64%; /* adjust to sit on your floor */
      will-change: left, opacity;
    }

    /* Dust motes in the light beam */
    .room-mote {
      position: absolute;
      width: 2px; height: 2px;
      border-radius: 50%;
      background: rgba(255,215,150,0.55);
      pointer-events: none;
      z-index: 6;
      will-change: transform, opacity;
      animation: mote-rise linear infinite;
    }
    @keyframes mote-rise {
      0%   { transform: translate(0,0); opacity:0; }
      12%  { opacity: 0.8; }
      88%  { opacity: 0.3; }
      100% { transform: translate(var(--mdx,12px), -130px); opacity:0; }
    }

    /* ============================================================
       WINDOW CALIBRATION BOX (edit mode only)
    ============================================================ */
    #win-calib-box {
      position:absolute; z-index:40;
      border:2px solid rgba(0,220,220,0.85);
      background:rgba(0,220,220,0.06);
      cursor:move; display:none; box-sizing:border-box;
    }
    body.edit-mode #win-calib-box { display:block; }
    .wcb-label {
      position:absolute; top:4px; left:6px;
      font-size:0.58rem; color:rgba(0,220,220,0.95);
      letter-spacing:0.07em; background:rgba(0,0,0,0.55);
      padding:2px 7px; border-radius:4px; white-space:nowrap;
      pointer-events:none; font-family:'Courier New',monospace;
    }
    .wcb-handle {
      position:absolute; width:11px; height:11px;
      background:rgba(0,220,220,0.9); border-radius:50%; z-index:2;
    }
    .wcb-se { bottom:-5px; right:-5px; cursor:se-resize; }
    .wcb-s  { bottom:-5px; left:50%; transform:translateX(-50%); cursor:s-resize; }
    .wcb-e  { right:-5px;  top:50%;  transform:translateY(-50%); cursor:e-resize; }
    .wcb-n  { top:-5px; left:50%; transform:translateX(-50%); cursor:n-resize; }
    .wcb-w  { left:-5px; top:50%; transform:translateY(-50%); cursor:w-resize; }

    /* ============================================================
       MODAL EDIT CONTROLS
    ============================================================ */
    #modal-edit-btn {
      position:absolute; top:1.1rem; right:3.4rem;
      background:none; border:1px solid rgba(122,92,46,0.28);
      color:rgba(122,92,46,0.55); font-size:0.68rem; padding:0.22rem 0.7rem;
      border-radius:12px; cursor:pointer; letter-spacing:0.1em;
      font-family:inherit; transition:all 0.2s;
    }
    #modal-edit-btn:hover { background:rgba(122,92,46,0.1); color:rgba(122,92,46,0.9); }
    #modal-edit-btn.editing { background:rgba(122,92,46,0.15); border-color:rgba(122,92,46,0.6); color:rgba(122,92,46,1); }
    #modal-body[contenteditable="true"] { outline:none; border:1px dashed rgba(122,92,46,0.3); padding:0.5rem; border-radius:6px; min-height:3rem; }
    #modal-reset-btn {
      font-size:0.67rem; color:rgba(200,80,80,0.45); background:none; border:none;
      cursor:pointer; padding:0.4rem 0; font-family:inherit; display:none; letter-spacing:0.06em;
    }
    #modal-reset-btn.visible { display:inline-block; }
    #modal-reset-btn:hover { color:rgba(200,80,80,0.9); }
    #modal-edit-hint {
      font-size:0.64rem; color:rgba(122,92,46,0.4); margin-top:0.6rem;
      font-style:italic; display:none;
    }
    #modal-edit-btn.editing ~ * #modal-edit-hint { display:block; }

    /* ============================================================
       PANEL — ADD RING + RENAME
    ============================================================ */
    .pp-add-section {
      padding:0.7rem 1rem 1rem; border-top:1px solid rgba(255,180,50,0.2); margin-top:0.3rem;
    }
    .pp-add-title { font-size:0.64rem; color:rgba(255,180,50,0.55); letter-spacing:0.12em; margin-bottom:0.45rem; }
    .pp-input {
      width:100%; background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.12);
      color:rgba(240,226,200,0.85); padding:0.3rem 0.6rem; border-radius:5px;
      font-size:0.7rem; font-family:inherit; margin-bottom:0.35rem; outline:none;
      box-sizing:border-box;
    }
    .pp-input:focus { border-color:rgba(255,180,50,0.5); }
    .pp-add-btn {
      width:100%; background:rgba(255,180,50,0.14); border:1px solid rgba(255,180,50,0.4);
      color:rgba(255,200,80,0.9); padding:0.38rem; border-radius:6px;
      font-size:0.72rem; letter-spacing:0.1em; cursor:pointer; font-family:inherit;
      transition:background 0.2s;
    }
    .pp-add-btn:hover { background:rgba(255,180,50,0.27); }
    .pp-row-actions { display:flex; gap:4px; align-items:center; }
    .pp-rename-btn { font-size:0.6rem; color:rgba(255,180,50,0.45); background:none; border:none; cursor:pointer; padding:2px 4px; line-height:1; }
    .pp-rename-btn:hover { color:rgba(255,180,50,0.9); }
    .pp-del-btn { font-size:0.62rem; color:rgba(255,80,80,0.35); background:none; border:none; cursor:pointer; padding:2px 4px; line-height:1; }
    .pp-del-btn:hover { color:rgba(255,80,80,0.85); }
    .pp-inline-edit { display:none; padding:0.3rem 1rem 0.5rem; border-bottom:1px solid rgba(255,255,255,0.05); }
    .pp-inline-edit.open { display:block; }
    .pp-inline-input {
      width:100%; background:rgba(0,0,0,0.35); border:1px solid rgba(255,180,50,0.4);
      color:rgba(240,226,200,0.9); padding:0.25rem 0.5rem; border-radius:4px;
      font-size:0.68rem; font-family:inherit; outline:none; box-sizing:border-box;
    }

    /* ============================================================
       LAMP REVEAL — masked second image that restores natural saturation
       in the lamp-lit area (no night filter inside the mask)
    ============================================================ */
    #lamp-reveal {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      pointer-events: none;
      z-index: 4;
      opacity: 0;
      transition: opacity 2.2s ease;
      /* Broad mask — lamp warmth restores the desk, chair, and floor area */
      -webkit-mask-image: radial-gradient(
        ellipse 48% 68% at 60% 42%,
        black 0%, rgba(0,0,0,0.92) 20%, rgba(0,0,0,0.60) 48%, rgba(0,0,0,0.20) 68%, transparent 85%
      );
      mask-image: radial-gradient(
        ellipse 48% 68% at 60% 42%,
        black 0%, rgba(0,0,0,0.92) 20%, rgba(0,0,0,0.60) 48%, rgba(0,0,0,0.20) 68%, transparent 85%
      );
      /* Warm incandescent correction */
      filter: sepia(0.12) saturate(1.08) brightness(1.05) hue-rotate(-5deg);
    }
    #lamp-reveal img {
      height: 100vh; width: auto; display: block;
      pointer-events: none; -webkit-user-drag: none;
    }

    /* ============================================================
       PANEL — COLOR PICKER + VISIBILITY TOGGLE
    ============================================================ */
    .pp-color-btn {
      width:16px; height:16px; border-radius:50%;
      border:1.5px solid rgba(255,255,255,0.3);
      cursor:pointer; padding:0; flex-shrink:0;
      transition:transform 0.15s, border-color 0.15s;
      position:relative;
    }
    .pp-color-btn:hover { transform:scale(1.25); border-color:rgba(255,255,255,0.7); }
    .pp-color-btn input[type="color"] {
      position:absolute; inset:0; opacity:0; cursor:pointer;
      width:100%; height:100%; border:none; padding:0;
    }
    .pp-vis-btn {
      font-size:0.65rem; color:rgba(160,200,255,0.45);
      background:none; border:none; cursor:pointer; padding:2px 4px; line-height:1;
    }
    .pp-vis-btn:hover { color:rgba(160,200,255,0.9); }
    .pp-vis-btn.is-egg { color:rgba(255,200,80,0.6); }

    /* ============================================================
       RICH MODAL UIs
    ============================================================ */

    /* ---- Coverflow (Music / Piano) ---- */
    .cf-scene {
      background:linear-gradient(160deg,#18100a 0%,#0e0905 100%);
      border-radius:10px; padding:1.6rem 0.5rem 1.2rem;
      margin:-0.5rem -0.5rem 0; overflow:hidden; position:relative;
    }
    .cf-stage {
      perspective:700px; height:192px;
      display:flex; align-items:center; justify-content:center;
      position:relative;
    }
    .cf-card {
      position:absolute; width:136px; height:136px; border-radius:6px;
      cursor:pointer; user-select:none;
      transition:transform 0.48s cubic-bezier(0.4,0,0.2,1), opacity 0.48s ease, box-shadow 0.48s ease;
    }
    .cf-art {
      width:100%; height:100%; border-radius:6px;
      display:flex; align-items:center; justify-content:center;
      font-size:2.8rem;
      box-shadow:0 6px 28px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.07);
    }
    .cf-mirror {
      width:100%; height:44px; margin-top:2px; border-radius:0 0 6px 6px;
      opacity:0.22; transform:scaleY(-1);
      -webkit-mask-image:linear-gradient(to top,transparent 0%,rgba(0,0,0,0.5) 100%);
      mask-image:linear-gradient(to top,transparent 0%,rgba(0,0,0,0.5) 100%);
      pointer-events:none;
    }
    .cf-info { text-align:center; margin-top:1.1rem; }
    .cf-info .cf-name { font-size:0.9rem; color:rgba(240,226,200,0.9); letter-spacing:0.03em; }
    .cf-info .cf-sub  { font-size:0.72rem; color:rgba(180,155,120,0.6); margin-top:0.18rem; letter-spacing:0.06em; }
    .cf-arrows { display:flex; justify-content:center; gap:2.2rem; margin-top:0.9rem; }
    .cf-arrow {
      background:none; border:1px solid rgba(255,255,255,0.18);
      color:rgba(255,255,255,0.55); width:30px; height:30px;
      border-radius:50%; cursor:pointer; font-size:1.05rem; line-height:28px;
      font-family:inherit; transition:all 0.18s;
    }
    .cf-arrow:hover { background:rgba(255,255,255,0.1); color:white; border-color:rgba(255,255,255,0.45); }
    .cf-dots { display:flex; justify-content:center; gap:5px; margin-top:0.6rem; }
    .cf-dot {
      width:5px; height:5px; border-radius:50%;
      background:rgba(255,255,255,0.2); transition:background 0.3s, transform 0.3s;
    }
    .cf-dot.active { background:rgba(255,255,255,0.75); transform:scale(1.3); }
    .cf-body-text {
      color:#5a4a2a; font-size:0.85rem; line-height:1.7; margin-top:1rem;
      padding:0 0.2rem;
    }
    .cf-body-text p+p { margin-top:0.6rem; }

    /* ---- Polaroid Wall (Community) ---- */
    .polaroid-wall {
      display:grid; grid-template-columns:repeat(3,1fr);
      gap:0.75rem; padding:0.3rem 0;
    }
    .polaroid {
      background:#fff; padding:0.45rem 0.45rem 1.4rem;
      box-shadow:0 4px 14px rgba(0,0,0,0.2);
      cursor:default; transition:transform 0.22s ease, box-shadow 0.22s ease;
    }
    .polaroid:hover { transform:scale(1.07) rotate(0deg) !important; box-shadow:0 10px 28px rgba(0,0,0,0.3); position:relative; z-index:2; }
    .pol-photo {
      width:100%; aspect-ratio:1;
      display:flex; align-items:center; justify-content:center;
      font-size:1.9rem; border-radius:1px;
      overflow:hidden;
    }
    .pol-caption {
      text-align:center; font-size:0.59rem; color:#555;
      margin-top:0.35rem; font-style:italic; letter-spacing:0.02em; line-height:1.35;
    }

    /* ---- Manila Folder (Consulting) ---- */
    .manila-wrap {
      position:relative; margin-top:1.4rem;
    }
    .manila-tab {
      position:absolute; top:-1.5rem; left:0;
      background:#d4b870; border:1px solid rgba(0,0,0,0.14); border-bottom:none;
      border-radius:6px 6px 0 0; padding:0.22rem 1.1rem;
      font-size:0.68rem; letter-spacing:0.14em; color:#5a3e10; font-weight:700;
    }
    .manila-folder {
      background:linear-gradient(160deg,#eed98a 0%,#e4c96a 100%);
      border-radius:0 8px 8px 8px;
      padding:1rem 1.1rem 1.2rem;
      box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1), 0 4px 18px rgba(0,0,0,0.12);
      position:relative;
    }
    .manila-stamp {
      position:absolute; top:0.8rem; right:1rem;
      border:2px solid rgba(175,35,35,0.48); color:rgba(175,35,35,0.48);
      font-size:0.58rem; letter-spacing:0.2em; font-weight:700;
      padding:2px 7px; border-radius:3px; transform:rotate(-8deg);
      font-family:'Courier New',monospace; pointer-events:none;
    }
    .manila-doc {
      background:#fffef8; padding:0.65rem 0.8rem; margin-bottom:0.55rem;
      border-radius:2px; box-shadow:0 1px 5px rgba(0,0,0,0.1); position:relative;
    }
    .manila-doc:last-child { margin-bottom:0; }
    .manila-tag  { font-size:0.58rem; letter-spacing:0.14em; color:#8a6a20; font-weight:700; text-transform:uppercase; margin-bottom:0.18rem; }
    .manila-title { font-size:0.8rem; color:#2a1f0e; font-weight:600; margin-bottom:0.28rem; }
    .manila-body  { font-size:0.71rem; color:#5a4a2a; line-height:1.6; }
    .manila-redact {
      display:inline-block; background:#2a1f0e; color:#2a1f0e;
      border-radius:1px; padding:0 4px; user-select:none;
    }
    .manila-paperclip {
      position:absolute; top:-8px; right:14px;
      width:28px; height:40px;
      border:2px solid #8a9ab0; border-bottom:none;
      border-radius:10px 10px 0 0;
      transform:rotate(-8deg);
    }
    .manila-group-label {
      font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase;
      color:#7a5a10; font-weight:700; margin:0.9rem 0 0.4rem;
      border-bottom:1px solid rgba(0,0,0,0.12); padding-bottom:0.25rem;
    }
    .manila-group-label:first-child { margin-top:0.2rem; }
    .manila-case-title { font-size:0.82rem; color:#1a1008; font-weight:700; margin-bottom:0.22rem; text-transform:uppercase; letter-spacing:0.04em; }
    .manila-client { font-size:0.68rem; color:#7a5a10; font-style:italic; display:block; margin-bottom:0.3rem; }
    .manila-chips { display:flex; flex-wrap:wrap; gap:0.25rem; margin-bottom:0.3rem; }
    .manila-chip {
      font-size:0.55rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:700;
      background:#2a6040; color:#e8f5ee; border-radius:20px; padding:2px 7px;
    }
    .manila-skills-line { font-size:0.64rem; color:#5a4a2a; margin-bottom:0.45rem; }
    .manila-section-hdr {
      font-size:0.58rem; letter-spacing:0.13em; text-transform:uppercase; font-weight:700;
      color:#fff; background:#2a6040; display:inline-block;
      padding:1px 6px; border-radius:2px; margin:0.45rem 0 0.2rem;
    }
    .manila-ul { margin:0.15rem 0 0 1rem; padding:0; }
    .manila-ul li { font-size:0.68rem; color:#5a4a2a; line-height:1.55; margin-bottom:0.18rem; }
    .manila-outcome-box {
      background:#2a5038; color:#d4ead8; border-radius:4px;
      padding:0.4rem 0.6rem; margin-top:0.3rem; font-size:0.68rem; line-height:1.55;
    }
    .manila-outcome-box .manila-section-hdr { background:#1a3828; margin-top:0; }

    /* ---- Sticky Note Board (Ideas) ---- */
    .sticky-board {
      background:#c2a97e;
      background-image:radial-gradient(circle,rgba(0,0,0,0.06) 1px,transparent 1px);
      background-size:12px 12px;
      border-radius:8px; padding:1rem;
      display:grid; grid-template-columns:repeat(2,1fr);
      gap:0.85rem; min-height:260px;
    }
    .sticky {
      padding:0.75rem 0.85rem 0.85rem;
      border-radius:1px;
      box-shadow:2px 4px 9px rgba(0,0,0,0.22), inset 0 -1px 0 rgba(0,0,0,0.06);
      font-size:0.8rem; line-height:1.6; color:#2a2018; position:relative;
      cursor:default; min-height:80px;
    }
    .sticky::before {
      content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%);
      width:18px; height:7px;
      background:rgba(0,0,0,0.14); border-radius:0 0 2px 2px;
    }
    .sticky-y { background:#fef08a; transform:rotate(-1.8deg); }
    .sticky-g { background:#bbf7d0; transform:rotate(0.9deg); }
    .sticky-b { background:#bfdbfe; transform:rotate(-0.6deg); }
    .sticky-p { background:#e9d5ff; transform:rotate(1.4deg); }
    .sticky-o { background:#fed7aa; transform:rotate(-1.1deg); }
    .sticky-hdr {
      font-size:0.68rem; font-weight:700; text-transform:uppercase;
      letter-spacing:0.1em; margin-bottom:0.35rem; opacity:0.5;
    }

    /* ---- Book Shelf (Reading) ---- */
    .book-shelf-wrap {
      background:#1e1008; border-radius:8px;
      padding:1.2rem 1.2rem 1rem; margin:-0.5rem -0.5rem 0;
    }
    .shelf-row {
      display:flex; align-items:flex-end; gap:3px;
      border-bottom:10px solid #3e2208; padding-bottom:0;
      margin-bottom:1.1rem; min-height:120px;
      position:relative;
    }
    .shelf-row::after {
      content:''; position:absolute; bottom:-5px; left:0; right:0;
      height:4px; background:rgba(255,255,255,0.04); border-radius:0 0 2px 2px;
    }
    .book {
      flex-shrink:0; border-radius:2px 3px 3px 2px;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      cursor:pointer; position:relative; overflow:hidden;
      box-shadow:2px 0 6px rgba(0,0,0,0.45), inset -2px 0 0 rgba(0,0,0,0.2), inset 1px 0 0 rgba(255,255,255,0.07);
      transition:transform 0.2s ease;
      padding:6px 3px;
    }
    .book:hover { transform:translateY(-8px); }
    .book-title {
      writing-mode:vertical-rl; transform:rotate(180deg);
      font-size:0.5rem; font-weight:700; letter-spacing:0.04em;
      line-height:1; text-align:center; padding:0 1px;
      overflow:hidden; word-break:break-word;
      font-family:'Georgia',serif;
    }
    .book-author {
      writing-mode:vertical-rl; transform:rotate(180deg);
      font-size:0.42rem; opacity:0.6; margin-top:4px;
      text-align:center; overflow:hidden;
    }
    .shelf-caption {
      text-align:center; color:rgba(240,226,200,0.3);
      font-size:0.64rem; letter-spacing:0.1em; margin-top:0; padding-bottom:0.2rem;
    }
    .shelf-bio {
      color:rgba(240,226,200,0.55); font-size:0.78rem; line-height:1.65;
      margin-top:0.9rem; padding:0 0.1rem;
    }
    .shelf-bio p+p { margin-top:0.55rem; }

    /* ---- Notepad (Contact) ---- */
    /* ---- Note.png stationery modal ---- */
    .note-modal-wrap {
      position:relative; margin:-0.5rem -0.5rem 0;
    }
    .note-bg-img {
      display:block; width:100%; height:auto; pointer-events:none;
      border-radius:6px;
    }
    /* ============================================================
       ZOOM BACKDROP — blurs / darkens scene behind zoom cards
    ============================================================ */
    #zoom-backdrop {
      position:fixed; inset:0; z-index:188;
      opacity:0; pointer-events:none;
      transition:opacity 0.5s ease;
      /* background set dynamically to match time-of-day */
      backdrop-filter:blur(0px);
      -webkit-backdrop-filter:blur(0px);
    }
    #zoom-backdrop.active {
      opacity:1;
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
    }

    /* Tree hover zone — invisible, positioned over window area */
    #tree-hover-zone {
      position:absolute; z-index:3;
      top:0; left:14%; width:28%; height:60%;
      pointer-events:all; cursor:default;
    }

    /* ============================================================
       SHARED ZOOM OVERLAY — pan+zoom into world objects
    ============================================================ */
    .world-zoom-overlay {
      position:fixed; inset:0; z-index:190;
      display:flex; align-items:center; justify-content:center;
      pointer-events:none; opacity:0;
      transition:opacity 0.45s ease, filter 0.6s ease;
      padding: 2vh 2vw;
    }
    .world-zoom-overlay.visible { opacity:1; pointer-events:all; }

    .zoom-back-btn {
      position:fixed; top:1.2rem; right:1.2rem; z-index:191;
      background:rgba(0,0,0,0.35); backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,0.22);
      color:rgba(255,255,255,0.9); padding:0.4rem 1rem;
      border-radius:20px; font-family:'Georgia',serif;
      font-size:0.76rem; letter-spacing:0.1em; cursor:pointer;
      display:none; transition:background 0.2s;
    }
    .zoom-back-btn:hover { background:rgba(0,0,0,0.5); }
    /* Hide back buttons during guided tour — tour bar handles navigation */
    body.tour-mode .zoom-back-btn { display:none !important; }

    /* During the guided tour, the room (hotspots + drag-to-pan) must not
       respond to clicks/taps/drags at all — a stray press while the camera
       is panning/zooming between steps was breaking the in-progress
       transition and freezing the tour. #room-container holds only the
       room image + hotspots; all overlays, modals, the project browser's
       close button, and #tour-bar live outside it and are unaffected. This
       is a hard CSS guarantee, independent of any JS click-guard timing. */
    body.tour-mode #room-container { pointer-events: none !important; }

    /* During the guided tour, closing the project browser via its window "✕"
       was leaving the tour in a stuck state (overlay closed but the tour
       still waiting on a step that's no longer open). Rather than rewiring
       the close behavior, simply make the button inert during the tour —
       it stays visible (so the window chrome still looks right) but
       clicks/taps pass through and do nothing. */
    body.tour-mode .browser-win-btn-close { pointer-events: none !important; }

    /* Full-viewport shield used during the guided tour (see index.html for
       why). Inert outside tour mode; during the tour it sits at z-index 50,
       below #modal-bg (100), .world-zoom-overlay (190), #zoom-backdrop (188)
       and #tour-bar (10001) — so those remain fully interactive — but above
       the room, catching any stray click/tap/drag that would otherwise reach
       #room-container or fall through to it. */
    #tour-click-shield {
      position:fixed; inset:0; z-index:50; pointer-events:none;
    }
    body.tour-mode #tour-click-shield { pointer-events:all !important; cursor:default; }

    /* ── NOTE card ─────────────────────────────────────────── */
    /* ── Pure CSS stationery notepad ──────────────────────────── */
    .notepad-css {
      position:relative;
      /* Notepad proportions: 8.5×11 ≈ 0.77 aspect ratio (portrait).
         Height drives the sizing: 80vh tall, width = height × 0.77 */
      height: min(80vh, 700px);
      width: min(80vw, calc(min(80vh, 700px) * 0.77));
      background:#fffdf4;
      border-radius:10px;
      /* Stationery double-border */
      box-shadow:
        0 0 0 1.5px rgba(170,140,100,0.5),
        0 0 0 6px rgba(255,250,230,0.9),
        0 0 0 8px rgba(170,140,100,0.35),
        0 28px 70px rgba(0,0,0,0.45);
      display:flex; flex-direction:column;
      flex-shrink:0;
      overflow:hidden;
    }
    /* Corner ornaments */
    .np-corner {
      position:absolute; font-size:0.9rem; color:rgba(160,120,80,0.55);
      pointer-events:none; line-height:1;
    }
    .np-tl { top:14px;  left:14px; }
    .np-tr { top:14px;  right:14px; }
    .np-bl { bottom:14px; left:14px; }
    .np-br { bottom:14px; right:14px; }

    .np-header {
      padding:1.2rem 1.6rem 0.8rem;
      text-align:center;
    }
    .np-header-deco {
      font-family:'Georgia',serif; font-size:max(0.85rem, 13px); font-style:italic;
      color:#5a3810; letter-spacing:0.12em;
    }
    .np-divider {
      height:1.5px;
      background:linear-gradient(to right, transparent, rgba(110,75,30,0.65) 20%, rgba(110,75,30,0.65) 80%, transparent);
      margin:0 1.2rem;
    }
    .np-body {
      padding:1.2rem 1.6rem;
      display:flex; flex-direction:column; gap:0.85rem;
      flex:1;
    }
    .np-field {
      display:flex; align-items:center; gap:0.6rem;
    }
    .np-msg-field { align-items:flex-start; flex:1; display:flex; }
    .np-label {
      font-size:max(0.75rem, 12px); letter-spacing:0.14em; text-transform:uppercase;
      color:rgba(55,30,5,1.0); font-family:'Georgia',serif;
      width:88px; flex-shrink:0; /* wide enough for LINKEDIN */
    }
    .np-input {
      flex:1; background:transparent; border:none; border-bottom:1.5px solid rgba(120,85,40,0.55);
      outline:none; font-family:'Georgia',serif; font-size:max(0.88rem, 13px); color:#1a0e04;
      padding:0.2rem 0; width:100%;
      transition:border-color 0.2s;
    }
    .np-input:focus { border-bottom-color:rgba(100,65,15,0.85); }
    /* Highlights a required field that's missing/invalid on submit attempt */
    .np-input.np-invalid { border-color:#c05a2a !important; }
    .np-input.np-invalid::placeholder { color:rgba(192,90,42,0.65); }
    .np-input::placeholder { color:rgba(110,75,35,0.60); font-style:italic; }
    .np-textarea {
      resize:none; flex:1; min-height:0; height:100%; align-self:stretch; line-height:1.7;
      border-bottom:none; border:1.5px solid rgba(120,85,40,0.45);
      border-radius:4px; padding:0.5rem 0.6rem;
      font-family:'Georgia',serif; font-size:max(0.88rem, 13px); color:#1a0e04;
      background:rgba(255,252,240,0.6);
    }
    .np-textarea:focus { border-color:rgba(100,65,15,0.75); outline:none; }
    .np-textarea::placeholder { color:rgba(110,75,35,0.60); font-style:italic; }
    .np-footer {
      display:flex; align-items:center; justify-content:space-between;
      padding:0.7rem 1.6rem 1.1rem;
    }
    .np-status { font-size:max(0.75rem, 12px); font-style:italic; color:#3d2008; flex:1; }
    .np-send {
      background:linear-gradient(135deg,#d4a43c,#b8861e);
      border:none; border-radius:20px; padding:0.42rem 1.2rem;
      font-family:'Georgia',serif; font-size:max(0.76rem, 12px); color:#fff8e8;
      letter-spacing:0.08em; cursor:pointer; font-weight:600;
      box-shadow:0 2px 10px rgba(180,120,20,0.3);
      transition:opacity 0.2s, transform 0.15s;
    }
    .np-send:hover { opacity:0.88; transform:translateY(-1px); }

    /* ── MONITOR card ──────────────────────────────────────── */
    .monitor-zoom-card {
      position:relative; flex-shrink:0;
      /* Image is 2752×1536 (ratio 1.792). Fill 90% of viewport height.
         width = height × 1.792, capped so it never overflows the viewport. */
      height: min(90vh, 96vw / 1.792);
      width:  min(96vw, 90vh * 1.792);
      aspect-ratio: 1.792; /* keeps both axes defined for child absolute % */
      filter: drop-shadow(0 16px 56px rgba(0,0,0,0.55));
    }
    .monitor-zoom-card .monitor-bg-img {
      width:100%; height:100%; object-fit:contain;
      display:block; border-radius:4px;
    }
    /* Browser injected into the monitor screen area.
       Percentages measured against the 2752×1536 source image:
       screen left≈3.5%, right≈3.5%, top≈5%, bottom of screen≈79.5% → bottom inset 20.5% */
    .monitor-screen-inset {
      position:absolute;
      /* 20% narrower (centred): original width was 93%, now 74.4%, each side +9.3% */
      top: 7%; left: 11%; right: 11%; bottom: 13%;
      display:flex; flex-direction:column;
      overflow:hidden; border-radius:12px 12px 12px 12px;
      background:#f8f6ff; /* solid backing so monitor image never bleeds through */
    }
    /* Override browser chrome to fit inside the monitor */
    .monitor-screen-inset .browser-chrome {
      margin:0; border-radius:12px 12px 0 0; flex-shrink:0;
      padding:0.4rem 0.6rem 0;
    }
    .monitor-screen-inset .browser-content {
      flex:1; margin:0; overflow-y:scroll;
      min-height:0; padding:0.9rem 1.1rem 1.1rem;
      background:linear-gradient(to bottom, #f8f6ff 0%, #f4f0fe 55%, #e0d8f4 80%, #c8bce8 100%);
      background-attachment:local;
    }
    .monitor-screen-inset .browser-tabs {
      margin-bottom:0;
    }
    .monitor-screen-inset .browser-dot { width:10px; height:10px; }
    .monitor-screen-inset .browser-url { font-size:0.65rem; }
    .monitor-screen-inset .browser-tab { font-size:0.6rem; padding:0.25rem 0.65rem; max-width:120px; }
    .monitor-screen-inset .browser-status {
      margin:0; font-size:0.58rem; padding:0.18rem 0.6rem; flex-shrink:0;
    }
    .monitor-screen-inset .project-title { font-size:1.05rem; }
    .monitor-screen-inset .project-desc  { font-size:0.82rem; line-height:1.65; }
    .monitor-screen-inset .project-demo  { height:90px; }
    .monitor-screen-inset .project-link  { font-size:0.75rem; }

    /* ── TROPHY CASE card ──────────────────────────────────────── */
    .trophy-zoom-wrap {
      display:flex; flex-direction:column; align-items:center;
      gap:0; flex-shrink:0; width:min(92vw, 860px);
    }
    .trophy-zoom-card {
      position:relative; flex-shrink:0;
      /* trophy-case.png is 2752×1536 (ratio 1.792), same as monitor.
         Use 46vh height so the blurb always fits below. */
      /* Width-driven: wider case so the blurb image has comfortable room */
      width: min(92vw, 860px);
      aspect-ratio: 1.792;   /* height = width ÷ 1.792, always defined for child % */
      overflow:hidden; border-radius:6px;
      filter: drop-shadow(0 14px 50px rgba(0,0,0,0.55));
    }
    .trophy-case-bg {
      width:100%; height:100%;
      object-fit:cover; object-position:center;
      display:block;
    }

    /* Trophy shelf — absolutely positioned inside the glass interior.
       Measured from trophy-case.png: interior ≈ left 8%, right 8%, top 22%, bottom 18% */
    .trophy-shelf {
      position:absolute;
      top:22%; bottom:18%; left:8%; right:8%;
      display:flex; align-items:flex-end; justify-content:space-around;
      gap:2%;
    }
    .trophy-btn {
      background:none; border:none; cursor:pointer;
      display:flex; flex-direction:column; align-items:center;
      justify-content:flex-end;
      padding:0; gap:4px; flex:1; height:100%;
      transition:transform 0.22s ease;
    }
    .trophy-btn:first-child { margin-left:10%; }
    .trophy-btn:last-child  { margin-right:10%; }
    .trophy-btn:hover { transform:translateY(-7px) scale(1.05); }
    .trophy-btn.active { transform:translateY(-9px) scale(1.07); }
    /* All trophies the same height — normalized */
    .trophy-btn img {
      height:78%; width:auto; max-width:85%;
      object-fit:contain;
      filter:drop-shadow(0 4px 10px rgba(0,0,0,0.30));
    }
    .trophy-label {
      font-size:0.52rem; letter-spacing:0.09em; text-transform:uppercase;
      color:rgba(70,45,15,0.80); font-family:'Georgia',serif;
      white-space:nowrap; background:rgba(255,248,230,0.88);
      padding:2px 6px; border-radius:8px; flex-shrink:0;
    }

    /* Award blurb — slides down below the case, matches card width */
    .award-blurb-panel {
      width: min(92vw, 860px);   /* same as .trophy-zoom-card width */
      background:#faf7f2;
      border-radius:0 0 8px 8px;
      box-shadow:0 10px 36px rgba(0,0,0,0.28);
      overflow:hidden;
      max-height:0; opacity:0;
      transition:max-height 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease;
    }
    .award-blurb-panel.open { max-height:600px; opacity:1; }
    .award-blurb-inner {
      display:flex; overflow:hidden;
    }
    /* Text side — matches Content format: award name + labelled fields */
    .award-blurb-text {
      flex:1; padding:1.1rem 1.4rem;
      border-right:1px solid rgba(0,0,0,0.07);
      overflow-y:auto;
    }
    .award-blurb-text h3 {
      font-size:max(1.05rem, 14px); color:#1a1208; margin-bottom:0.55rem; font-weight:700;
      font-style:italic;
    }
    .award-blurb-text p {
      font-size:max(0.82rem, 12px); color:#4a3a28; line-height:1.65; margin-bottom:0.3rem;
    }
    .award-blurb-text strong { color:#1a1208; font-weight:600; }
    /* Photo side — bleeds edge-to-edge, cropped top, matches Content format layout */
    .award-blurb-img {
      width:240px; flex-shrink:0; overflow:hidden;
    }
    .award-blurb-img img {
      width:100%; height:100%;
      object-fit:cover; object-position:center top;  /* show faces */
      display:block;
    }

    /* ── CONSULTING / CASE FILES card ─────────────────────────── */
    .casefiles-zoom-card {
      position:relative; flex-shrink:0;
      /* 923×646, ratio 1.4288 — fill 90% of viewport height */
      height: min(90vh, 90vw / 1.4288);
      width:  min(90vw, 90vh * 1.4288);
      aspect-ratio: 1.4288;
      filter: drop-shadow(0 16px 52px rgba(0,0,0,0.5));
    }
    .casefiles-bg { width:100%; height:100%; object-fit:contain; display:block; border-radius:4px; }

    /* Pages on right panel — BCG sticky/left flap remains visible */
    /* Full-width page container */
    .casefiles-pages {
      position:absolute;
      top:8%; bottom:9%; left:6%; right:4%;
      /* perspective lives in the transform itself for each turner */
    }

    /* Pages stop 0.5% short of center each side → 1% gap where folder shows through.
       Turner geometry stays at exactly 50% so ±180° still lands perfectly. */
    .cf-left-page {
      position:absolute;
      top:0; bottom:0; left:0; right:50.5%;
      background:#fdfcf6; border:1px solid #111;
      padding:1.8rem 1.5rem; overflow:hidden;
    }
    .cf-right-page {
      position:absolute;
      top:0; bottom:0; left:50.5%; right:0;
      background:#fdfcf6; border:1px solid #111;
      padding:1.8rem 1.5rem; overflow:hidden;
    }

    /* Forward turner — RIGHT panel, rotates LEFT around its left edge */
    .cf-turner {
      position:absolute;
      top:0; bottom:0; left:50%; right:0;
      transform-style:preserve-3d;
      transform-origin:0% 50%;
      z-index:10;
    }
    /* Back turner — LEFT panel, rotates RIGHT around its right edge */
    .cf-turner-left {
      position:absolute;
      top:0; bottom:0; left:0; right:50%;
      transform-style:preserve-3d;
      transform-origin:100% 50%;
      z-index:10;
    }
    .cf-turner-face, .cf-turner-back {
      position:absolute; inset:0;
      backface-visibility:hidden;
      border:1px solid #111;
      padding:2.4rem 1.75rem;
      overflow:hidden;
    }
    .cf-turner-face { background:#fdfcf6; }
    .cf-turner-back { background:#fdfcf6; transform:rotateY(180deg); }

    /* Smooth parabolic page turn — perspective() inside transform so each turner
       has its own centred perspective (no container distortion).
       5 keyframes trace a bell-curve arc: lift peaks at 50%, fades out at end
       so the snap from turner → static pages is invisible. */
    /* Arc completes at 88% — page is flat and stationary.
       Final 12% is a pure fade-out with no position change → no snap. */
    /* Rotation goes full 0→180° over 100% of the animation.
       With exact 50/50 geometry, the turner at ±180° sits precisely
       over the static page — content swap at animation end is invisible. */
    @keyframes cf-flip-fwd {
      0%   { transform:perspective(900px) rotateY(0deg)    translateZ(0px);   }
      22%  { transform:perspective(900px) rotateY(-40deg)  translateZ(60px);  }
      50%  { transform:perspective(900px) rotateY(-90deg)  translateZ(120px); }
      78%  { transform:perspective(900px) rotateY(-140deg) translateZ(60px);  }
      100% { transform:perspective(900px) rotateY(-180deg) translateZ(0px);   }
    }
    @keyframes cf-flip-bck {
      0%   { transform:perspective(900px) rotateY(0deg)   translateZ(0px);   }
      22%  { transform:perspective(900px) rotateY(40deg)  translateZ(60px);  }
      50%  { transform:perspective(900px) rotateY(90deg)  translateZ(120px); }
      78%  { transform:perspective(900px) rotateY(140deg) translateZ(60px);  }
      100% { transform:perspective(900px) rotateY(180deg) translateZ(0px);   }
    }
    .cf-turner.flip-fwd      { animation:cf-flip-fwd 0.5s ease-in-out forwards; }
    .cf-turner-left.flip-bck { animation:cf-flip-bck 0.5s ease-in-out forwards; }
    /* Reverse-forward: right-side turner starting at -180° sweeping back to 0° */
    .cf-turner.cf-turner-rev { transform:perspective(900px) rotateY(-180deg); }
    @keyframes cf-flip-rev {
      0%   { transform:perspective(900px) rotateY(-180deg) translateZ(0px);   }
      22%  { transform:perspective(900px) rotateY(-140deg) translateZ(60px);  }
      50%  { transform:perspective(900px) rotateY(-90deg)  translateZ(120px); }
      78%  { transform:perspective(900px) rotateY(-40deg)  translateZ(60px);  }
      100% { transform:perspective(900px) rotateY(0deg)    translateZ(0px);   }
    }
    .cf-turner.cf-turner-rev.flip-rev { animation:cf-flip-rev 0.5s ease-in-out forwards; }

    /* Hide left page when empty (nothing flipped yet) */
    .cf-left-page:empty { border-color:transparent; background:transparent; }

    /* Page numbers — bottom outer corner (right pages: bottom-right; left pages: bottom-left).
       Span is a direct child of the page container (position:absolute), so absolute coords
       are relative to that container's padding box. Offset inward from the panel edge. */
    .cf-pg-num {
      position:absolute; bottom:0.6rem;
      font-size:0.72rem; font-family:Georgia,serif;
      color:#6b5240; letter-spacing:0.04em;
      pointer-events:none; user-select:none;
    }
    .cf-pg-num-right { right:1.6rem; }
    .cf-pg-num-left  { left:1.6rem; }
    /* Mobile: single panel is always the right page — pin to bottom-right */
    @media (max-width:700px) {
      .cf-pg-num-left { left:auto; right:1.2rem; }
    }

    /* Page content typography */
    .cf-tag {
      display:inline-block; font-size:0.5rem; letter-spacing:0.14em;
      text-transform:uppercase; padding:2px 7px; border-radius:10px;
      background:rgba(0,100,60,0.12); color:rgba(0,80,45,0.85);
      margin-bottom:0.4rem; font-family:'Georgia',serif;
    }
    .cf-title { font-size:0.82rem; font-weight:700; color:#1a1a1a; margin-bottom:0.18rem; line-height:1.3; }
    .cf-sub   { font-size:0.56rem; color:#888; letter-spacing:0.06em; margin-bottom:0.5rem; font-family:'Courier New',monospace; }
    .cf-section { font-size:0.58rem; font-weight:700; letter-spacing:0.1em; color:#006633; text-transform:uppercase; margin:0.45rem 0 0.1rem; }
    .cf-body    { font-size:0.64rem; color:#333; line-height:1.6; }

    /* Shared flip arrow style */
    .cf-mobile-nav { display: none; } /* shown only in mobile media query */

    .cf-flip-arrow {
      position:absolute; top:50%; transform:translateY(-50%);
      background:rgba(255,255,255,0.88); border:1.5px solid rgba(0,0,0,0.18);
      border-radius:6px; padding:0.5rem 0.45rem;
      cursor:pointer; display:flex; flex-direction:column; align-items:center;
      gap:3px; box-shadow:0 2px 8px rgba(0,0,0,0.12);
      transition:background 0.15s, transform 0.15s;
      z-index:5;
    }
    .cf-flip-arrow:hover { background:#fff; transform:translateY(-50%) scale(1.06); }
    .cf-flip-arrow:disabled { opacity:0.28; cursor:default; transform:translateY(-50%); }
    .cf-arrow-label { font-size:0.46rem; letter-spacing:0.1em; text-transform:uppercase; color:#555; font-family:'Georgia',serif; }
    .cf-arrow-icon  { font-size:1rem; color:#333; line-height:1; }
    #cf-prev-arrow { left:1.5%; }
    #cf-next-arrow { right:1.5%; }

    /* Page counter bottom-right of page area */
    .cf-nav {
      position:absolute; bottom:1%; left:50%; right:4%;
      display:flex; justify-content:center; align-items:center;
      padding:0.2rem;
    }
    .cf-page-num { font-size:0.55rem; color:#666; font-family:'Courier New',monospace; }

    /* ── PDF-style page layouts ──────────────────────────────── */
    /* Page content wrapper — flex column distributes sections evenly */
    .cf-page-wrap {
      height:100%; box-sizing:border-box; overflow:hidden;
      display:flex; flex-direction:column; justify-content:space-between;
    }
    /* Outcome box: flex-shrink so it compresses when page is tight */
    .cf-outcome-box { flex-shrink:1; min-height:0; }

    /* TOC */
    .cf-toc-page { display:flex; height:100%; gap:0; overflow:hidden; }
    .cf-toc-vert {
      width:20%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
      writing-mode:vertical-lr; transform:rotate(180deg);
      font-size:clamp(1.1rem,2.5vw,2rem);
      font-weight:900; color:#1a4a2e; font-family:Georgia,serif;
      letter-spacing:0.03em; line-height:1;
      border-right:2px solid #1a4a2e;
    }
    .cf-toc-right {
      flex:1; overflow:hidden; padding:0.3rem 0.85rem 0.3rem 0.65rem;
      display:flex; flex-direction:column; justify-content:center; gap:1rem;
    }
    .cf-toc-section {} /* each is a flex child — space-between spreads them */
    .cf-toc-hdr {
      font-size:0.72rem; font-weight:700; color:#1a4a2e; font-family:Georgia,serif;
      margin:0 0 0.22rem; border-bottom:2px solid #1a4a2e;
      padding-bottom:0.1rem; text-transform:uppercase; letter-spacing:0.05em;
    }
    .cf-toc-item {
      display:flex; align-items:baseline; gap:0.4rem;
      margin-bottom:0.2rem;
    }
    .cf-toc-item-main { flex:1; min-width:0; }
    .cf-toc-link {
      font-size:0.73rem; color:#1a3a28; text-decoration:underline;
      text-underline-offset:2px; cursor:pointer; background:none;
      border:none; padding:0; text-align:left; font-family:Georgia,serif;
      line-height:1.35; display:block; width:100%;
    }
    .cf-toc-link:hover { color:#2a6040; }
    .cf-toc-tags {
      font-size:0.54rem; color:#1a4a2e; opacity:0.72; line-height:1.3;
      letter-spacing:0.01em; margin-top:0.06rem;
    }
    .cf-toc-pg {
      font-size:1rem; font-weight:900; color:#1a4a2e;
      font-family:Georgia,serif; min-width:1.1rem; text-align:right; flex-shrink:0;
    }

    /* Common section header banner */
    .cf-hdr {
      font-size:0.55rem; letter-spacing:0.10em; text-transform:uppercase;
      font-weight:700; color:#fff; background:#1a4a2e;
      display:inline-block; padding:1px 6px; border-radius:3px;
      margin:0 0 0.07rem; font-family:Arial,sans-serif;
    }
    .cf-outcome-box .cf-hdr { background:#0d2b1a; }

    /* Featured case pages */
    .cf-feat-title {
      font-size:0.9rem; font-weight:700; color:#111;
      text-transform:uppercase; letter-spacing:0.05em;
      margin-top:0.2rem; margin-bottom:0.14rem; line-height:1.2; font-family:Georgia,serif;
      border-bottom:1.5px solid #ccc; padding-bottom:0.14rem;
    }
    .cf-metaline { font-size:0.7rem; color:#333; margin-bottom:0.06rem; line-height:1.35; }
    .cf-metaline strong { color:#1a4a2e; }
    .cf-divider { border:none; border-top:1px solid #e0e0e0; margin:0; }
    .cf-body { font-size:0.75rem; color:#222; line-height:1.45; }
    .cf-ul { margin:0.06rem 0 0 0; padding:0 0 0 1.1rem; list-style:disc; }
    .cf-ul li { font-size:0.72rem; color:#222; line-height:1.3; margin-bottom:0.03rem; }
    .cf-outcome-box {
      background:#1a4a2e; border-radius:4px;
      padding:0.4rem 0.6rem; flex-shrink:0;
    }
    .cf-outcome-box .cf-body { color:#c8e6c9; }
    .cf-outcome-box .cf-divider { border-color:rgba(255,255,255,0.2); margin:0.15rem 0; }
    .cf-outcome-box .cf-body { font-size:0.72rem; line-height:1.38; }

    /* Tag strip — lightweight single-line alternative to pill chips for compact/social pages */
    .cf-tag-strip {
      font-size:0.58rem; letter-spacing:0.07em; text-transform:uppercase;
      color:#1a4a2e; opacity:0.7; font-family:Arial,sans-serif; font-weight:600;
      line-height:1.2; margin-bottom:0.18rem; white-space:nowrap;
      overflow:hidden; text-overflow:ellipsis;
    }

    /* Compact pages (2 cases, each a flex child) */
    .cf-cmp-case {}
    .cf-cmp-title {
      font-size:0.88rem; font-weight:700; color:#111;
      text-transform:uppercase; letter-spacing:0.04em; margin-bottom:0.12rem;
      font-family:Georgia,serif;
      border-bottom:1px solid #ccc; padding-bottom:0.1rem;
    }
    .cf-cmp-row { display:grid; grid-template-columns:1fr 1fr; gap:0.3rem; margin-top:0.04rem; align-items:start; }
    .cf-case-sep { border:none; border-top:2px solid #b8cbb8; margin:0.25rem 0; flex-shrink:0; }
    .cf-cmp-row .cf-body { display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
    .cf-cmp-row .cf-ul { max-height:none; overflow:hidden; }

    /* Social impact pages (3 cases, each a flex child) */
    .cf-soc-case {}
    .cf-soc-title {
      font-size:0.82rem; font-weight:700; color:#111;
      text-transform:uppercase; letter-spacing:0.04em; margin-bottom:0.08rem;
      font-family:Georgia,serif; line-height:1.2;
      border-bottom:1px solid #ccc; padding-bottom:0.08rem;
    }
    /* Clamp social summary so it fits within its 1/3 grid row */
    .cf-soc-body {
      overflow:hidden;
    }

    /* Mobile: single-page mode — right page fills full book card */
    @media (max-width:700px) {
      .casefiles-zoom-card {
        width:96vw; height:88vh;
        aspect-ratio:unset;
      }
      .casefiles-bg { display:none; }
      .casefiles-pages {
        top:0; bottom:8%; left:0; right:0;
        background:#fdfcf6; border:1px solid #888;
        border-radius:4px;
        box-shadow:0 4px 20px rgba(0,0,0,0.3);
      }
      .cf-left-page  { display:none !important; }
      .cf-right-page { left:0 !important; right:0 !important; transition:opacity 0.18s ease; }
      .cf-right-page.cf-fade { opacity:0; }
    }

    /* ── IPOD + SPOTIFY panel ──────────────────────────────────── */
    .speaker-zoom-wrap {
      display:flex; flex-direction:column; align-items:center; gap:1rem;
      flex-shrink:0; width: min(88vw, 320px);
    }
    /* iPod Nano body — white */
    .ipod-body {
      width:100%;
      background:linear-gradient(170deg,#f8f8f6 0%,#e8e8e4 100%);
      border-radius:26px;
      padding:12px 12px 16px;
      box-shadow:
        0 0 0 1px rgba(0,0,0,0.12),
        0 20px 56px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.9);
    }
    /* Screen — grows to contain Spotify embed */
    .ipod-screen {
      background:#000;
      border-radius:10px;
      overflow:hidden;
      margin-bottom:10px;
      border:1px solid rgba(0,0,0,0.15);
      display:flex; flex-direction:column;
    }
    /* Compact now-playing strip */
    .ipod-now-strip {
      display:flex; flex-direction:column;
      padding:6px 9px 5px;
      background:#111;
      border-bottom:1px solid rgba(255,255,255,0.06);
      flex-shrink:0;
    }
    .ipod-now-strip-label {
      font-size:0.4rem; letter-spacing:0.18em; text-transform:uppercase;
      color:rgba(255,255,255,0.3); font-family:'Courier New',monospace;
      margin-bottom:2px;
    }
    .ipod-now-strip-track {
      font-size:0.7rem; font-weight:700; color:#fff; line-height:1.2;
    }
    .ipod-now-strip-artist {
      font-size:0.56rem; color:rgba(255,255,255,0.5);
    }
    /* Spotify embed slot — fixed height so its on-screen rect is stable
       even though the actual iframe lives in #spotify-bg and is just
       visually overlaid on top of this slot (never reparented, so it
       never reloads). */
    .ipod-spotify-inset {
      flex:0 0 352px; height:352px; overflow:hidden; display:flex; flex-direction:column;
    }
    /* The real Spotify iframe lives in #spotify-bg, sized to match
       #ipod-spotify-slot's rect via JS, and fills that container. */
    #spotify-bg iframe {
      width:100% !important; height:100% !important; border:none; display:block;
    }
    /* Hint below wheel */
    .ipod-lofi-hint {
      text-align:center; font-size:0.5rem; letter-spacing:0.1em;
      color:rgba(0,0,0,0.3); font-family:'Courier New',monospace;
      margin-top:6px;
    }
    /* Click wheel */
    .ipod-wheel-wrap {
      display:flex; justify-content:center; margin-top:2px;
    }
    .ipod-wheel {
      width:106px; height:106px; border-radius:50%;
      background:radial-gradient(circle at 40% 35%, #d8d8d4, #b8b8b2);
      position:relative;
      box-shadow:0 2px 10px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.7);
    }
    .ipod-wheel-center {
      position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%);
      width:38px; height:38px; border-radius:50%;
      background:radial-gradient(circle at 40% 35%, #e8e8e4, #d0d0cc);
      box-shadow:0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.8);
    }
    .ipod-wheel-label {
      position:absolute; font-size:0.44rem;
      color:rgba(0,0,0,0.38); font-family:'Helvetica Neue',sans-serif;
      font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
    }
    .ipod-wheel-label.top    { top:8px;  left:50%; transform:translateX(-50%); }
    .ipod-wheel-label.bottom { bottom:8px; left:50%; transform:translateX(-50%); }
    .ipod-wheel-label.left   { left:8px;  top:50%; transform:translateY(-50%); }
    .ipod-wheel-label.right  { right:8px; top:50%; transform:translateY(-50%); }

    /* (spotify panel removed — embed is now inside iPod screen) */

    /* ── MUSIC / RECORD COVERFLOW ─────────────────────────────── */
    .music-zoom-wrap {
      display:flex; flex-direction:column; align-items:center;
      gap:1rem; flex-shrink:0; width:100vw; max-width:100vw;
    }
    .music-stage {
      width:100%; height:min(80vh, 720px);
      position:relative; overflow:hidden;
      display:flex; align-items:center; justify-content:center;
    }
    /* Center record: ~82% of viewport height, square */
    .record-slot {
      position:absolute;
      width:min(76vh, 650px); aspect-ratio:1;
      transition:transform 0.52s cubic-bezier(0.4,0,0.2,1),
                 opacity   0.52s ease,
                 filter    0.52s ease;
      cursor:pointer;
      perspective:1200px;
    }
    /* Circular coverflow — pos computed via modular arithmetic */
    .record-slot[data-pos="-1"] {
      transform:translateX(-64%) rotateY(38deg) scale(0.68);
      opacity:0.42; filter:brightness(0.52);
      z-index:1;
    }
    .record-slot[data-pos="0"] {
      transform:translateX(0) rotateY(0deg) scale(1);
      opacity:1; filter:brightness(1);
      z-index:3; cursor:default;
    }
    .record-slot[data-pos="1"] {
      transform:translateX(64%) rotateY(-38deg) scale(0.68);
      opacity:0.42; filter:brightness(0.52);
      z-index:1;
    }
    .record-card {
      width:100%; height:100%;
      position:relative;
      transform-style:preserve-3d;
      transition:transform 0.62s cubic-bezier(0.4,0,0.15,1);
      border-radius:10px;
      box-shadow:0 28px 80px rgba(0,0,0,0.75);
    }
    .record-card.flipped { transform:rotateY(-180deg); }
    .record-face, .record-back {
      position:absolute; inset:0; border-radius:10px;
      overflow:hidden; backface-visibility:hidden;
    }
    .record-back { transform:rotateY(180deg); }
    .record-face img, .record-back img {
      width:100%; height:100%; object-fit:cover; display:block;
    }
    /* Clickable link overlay — positioned over where text links appear in each image */
    .record-back-links {
      position:absolute; bottom:5.5%; left:4%;
      display:flex; gap:0.6em; align-items:center;
      font-size:clamp(0.6rem, 1.4vw, 0.85rem);
      font-family:'Georgia',serif;
      text-decoration:underline; pointer-events:all;
    }
    .record-back-links a {
      color:inherit; text-decoration:underline;
      cursor:pointer;
    }
    .record-back-links a:hover { opacity:0.75; }
    .record-back-links span { opacity:0.6; }
    /* Nav */
    .music-nav {
      display:flex; gap:1.4rem; align-items:center; padding-bottom:0.5rem;
    }
    .music-nav-btn {
      background:rgba(255,255,255,0.18); border:1.5px solid rgba(255,255,255,0.3);
      border-radius:50%; width:40px; height:40px;
      color:rgba(255,255,255,0.9); font-size:1.3rem;
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      transition:background 0.18s, transform 0.15s;
      flex-shrink:0;
    }
    .music-nav-btn:hover { background:rgba(255,255,255,0.32); transform:scale(1.08); }
    .music-record-title {
      font-size:0.88rem; color:rgba(240,226,200,0.78);
      font-family:'Georgia',serif; font-style:italic;
      min-width:200px; text-align:center; letter-spacing:0.03em;
    }
    .music-hint {
      font-size:0.52rem; letter-spacing:0.14em; text-transform:uppercase;
      color:rgba(240,226,200,0.25); font-family:'Courier New',monospace;
    }

    /* ── ABOUT card ────────────────────────────────────────────── */
    .about-zoom-card {
      width: min(88vw, 520px);
      flex-shrink:0;
      border-radius:14px;
      overflow:hidden;
      filter:drop-shadow(0 22px 60px rgba(0,0,0,0.55));
      display:flex; flex-direction:column;
      font-family:'Georgia',serif;
    }
    /* Top green section */
    .about-top {
      background:#ced7c2;
      display:flex; flex-direction:column; align-items:center;
      padding:1.4rem 1.6rem 1rem;
    }

    /* ── Mirror hanging from nail ──────────────────────────────── */
    .about-hanger-wrap {
      width: min(52%, 200px);
      display:flex; flex-direction:column; align-items:center;
      margin-bottom:1rem;
    }
    .about-hanger-svg { display:block; width:100%; }

    /* Mirror pulled up by 6.7% so wire endpoints (at y=27 in SVG) land
       exactly on the 10-o'clock / 2-o'clock positions of the circle arc */
    .about-photo-wrap {
      width:100%; aspect-ratio:1;
      border-radius:50%;
      border:9px solid #111;
      overflow:hidden;
      margin-top:-6.7%;
      box-shadow:
        0 0 0 2px #2a2a2a,
        0 12px 36px rgba(0,0,0,0.5);
    }
    .about-photo-wrap img {
      width:100%; height:100%; object-fit:cover; object-position:center 12%;
      display:block;
    }

    /* ABOUT / Me title */
    .about-title-block { text-align:center; }
    .about-title-about {
      font-size:2.2rem; font-weight:900; letter-spacing:0.2em;
      color:#1a2e26; display:block; line-height:1;
    }
    .about-title-me {
      font-size:1.5rem; font-style:italic; font-weight:400;
      color:#2e4a40; display:block; margin-top:-0.1rem;
    }
    /* Body — warm beige, matching the What's Next door modal background */
    .about-body {
      background:#f3e0d0;
      padding:1.2rem 2rem 0;
      flex:1;
      border-top:none;
    }
    .about-body p {
      font-size:1rem;
      color:#3a2f1e; line-height:1.75;
      text-align:center; margin-bottom:1rem;
    }
    .about-body p:last-of-type { margin-bottom:1rem; }
    /* Bottom green links strip — bleeds edge-to-edge out of the beige body */
    .about-links {
      text-align:center; font-size:0.92rem;
      background:#ced7c2;
      margin:0 -2rem;
      padding:0.85rem 2rem;
    }
    .about-links a {
      color:#1a2e26; text-decoration:underline; letter-spacing:0.06em;
      margin:0 0.5rem;
    }
    .about-links a:hover { color:#000; opacity:1; }

    /* ── BOOKSHELF card ────────────────────────────────────────── */
    .bookshelf-zoom-card {
      position:relative;
      height: min(88vh, 680px); width:auto; flex-shrink:0;
      filter: drop-shadow(0 16px 48px rgba(0,0,0,0.5));
    }
    .bookshelf-zoom-card img { height:100%; width:auto; display:block; border-radius:6px; }
    .note-row {
      display:flex; flex:none;
      align-items:baseline;
      margin-bottom:2px;
    }
    .note-lbl {
      font-size:0.55rem; letter-spacing:0.1em; color:rgba(120,85,45,0.7);
      text-transform:uppercase; white-space:nowrap;
      width:52px; flex-shrink:0; padding-top:3px;
      font-family:'Georgia',serif; font-weight:bold;
    }
    .note-input {
      flex:1; background:transparent; border:none; outline:none;
      font-family:'Georgia',serif; font-size:0.8rem; color:#1a0f05;
      padding:3px 2px 2px; line-height:1.3;
      border-bottom:1px solid rgba(180,150,110,0.4);
    }
    .note-input::placeholder { color:rgba(160,130,90,0.5); font-style:italic; }
    .note-textarea {
      flex:1; background:transparent; border:none; outline:none;
      font-family:'Georgia',serif; font-size:0.78rem; color:#1a0f05;
      padding:3px 2px; resize:none; line-height:1.5;
      border-bottom:1px solid rgba(180,150,110,0.3);
      min-height:58px;
    }
    .note-textarea::placeholder { color:rgba(160,130,90,0.5); font-style:italic; }
    .note-spacer { flex:1; }
    .note-send {
      flex:none; align-self:flex-end;
      background:linear-gradient(135deg,#c8914a,#a06828);
      border:none; border-radius:20px; padding:0.35rem 1rem;
      font-family:'Georgia',serif; font-size:0.72rem;
      color:#fdf5e8; letter-spacing:0.08em; cursor:pointer;
      box-shadow:0 2px 8px rgba(0,0,0,0.18);
      transition:opacity 0.2s, transform 0.15s;
      margin-top:4px;
    }
    .note-send:hover { opacity:0.88; transform:translateY(-1px); }
    .note-status {
      font-size:0.63rem; text-align:center; padding:0.2rem 0;
      font-style:italic; color:#7a5c2e; font-family:'Georgia',serif;
    }

    /* ---- Trophy Case legacy modal (scoped so it doesn't override the zoom card) ---- */
    .trophy-case {
      background:linear-gradient(160deg,#1a1208 0%,#0e0904 100%);
      border-radius:8px; padding:1.2rem 1rem 1.2rem;
      margin:-0.3rem -0.5rem 0;
    }
    .trophy-case .trophy-shelf {
      display:flex; align-items:flex-end; justify-content:center;
      gap:1.4rem; padding:0.5rem 0.5rem 0.5rem;
      border-bottom:6px solid #3e2a0a;
      margin-bottom:0.6rem;
      position:relative;
    }
    .trophy-case .trophy-shelf::after {
      content:''; position:absolute; bottom:-4px; left:0; right:0;
      height:3px; background:rgba(255,255,255,0.03);
    }
    .trophy-item {
      display:flex; flex-direction:column; align-items:center;
      gap:0.2rem; cursor:default;
      transition:transform 0.2s ease;
    }
    .trophy-item:hover { transform:translateY(-4px); }
    .trophy-icon { font-size:2.4rem; line-height:1; filter:drop-shadow(0 2px 8px rgba(255,200,60,0.4)); }
    .trophy-icon.big  { font-size:3rem; }
    .trophy-icon.sml  { font-size:1.8rem; }
    .trophy-name {
      font-size:0.55rem; color:rgba(240,220,150,0.7); text-align:center;
      letter-spacing:0.06em; max-width:72px; line-height:1.3;
    }
    .trophy-glow {
      position:absolute; bottom:0; left:50%; transform:translateX(-50%);
      width:60%; height:30px; border-radius:50%;
      background:radial-gradient(ellipse,rgba(255,200,60,0.12) 0%,transparent 70%);
      pointer-events:none;
    }
    .cert-row {
      display:grid; grid-template-columns:repeat(3,1fr); gap:0.6rem;
      padding:0.3rem 0 0;
    }
    .cert-frame {
      background:#f8f4ec; border-radius:3px;
      border:3px solid #c8a84a;
      box-shadow:2px 2px 8px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(200,170,70,0.3);
      padding:0.5rem 0.45rem 0.45rem;
      display:flex; flex-direction:column; align-items:center;
      cursor:default; transition:transform 0.2s;
    }
    .cert-frame:hover { transform:scale(1.04); }
    .cert-seal { font-size:1.1rem; margin-bottom:0.2rem; }
    .cert-title { font-size:0.52rem; font-weight:700; text-align:center; color:#2a1f0e; letter-spacing:0.04em; line-height:1.3; }
    .cert-org   { font-size:0.46rem; color:#7a6a4a; margin-top:0.15rem; text-align:center; letter-spacing:0.06em; }
    .cert-line  { width:60%; height:1px; background:#c8a84a; margin:0.2rem 0; opacity:0.5; }

    /* ---- Browser / Projects ---- */
    .browser-chrome {
      background:#b8b0e8;
      border-radius:12px 12px 0 0;
      padding:0.55rem 0.65rem 0;
      box-shadow:0 2px 12px rgba(30,10,70,0.28);
      margin:-0.5rem -0.5rem 0;
      border:1px solid #1a1208;
      border-bottom:none;
    }
    .browser-bar {
      display:flex; align-items:center; gap:0.4rem; margin-bottom:0.45rem;
    }
    .browser-dots { display:flex; gap:5px; }
    .browser-dot { width:11px; height:11px; border-radius:50%; }
    .browser-dot.red    { background:#ff5f57; }
    .browser-dot.yellow { background:#febc2e; }
    .browser-dot.green  { background:#28c840; }
    .browser-url-wrap {
      flex:1; display:flex; align-items:stretch;
      border-top:2px solid #5a3a7a;
      border-left:2px solid #5a3a7a;
      border-bottom:2px solid #f0e0f8;
      border-right:2px solid #f0e0f8;
      background:#f8f6ff;
    }
    .browser-url {
      flex:1; background:transparent; border:none; border-radius:0;
      font-size:0.62rem; color:#3a1a6e; padding:0.15rem 0.5rem;
      font-family:'Courier New',monospace; letter-spacing:0.02em;
      outline:none;
    }
    /* ── Windows IE-style toolbar nav buttons (connected, filled icons) ── */
    .browser-nav-btns {
      display:flex; gap:0; flex-shrink:0; align-items:stretch;
    }
    .browser-nav-btn {
      width:22px; height:20px;
      background:#d0b4dc;
      border-top:2px solid #f0e0f8;
      border-left:2px solid #f0e0f8;
      border-bottom:2px solid #5a3a7a;
      border-right:2px solid #5a3a7a;
      font-size:0.65rem; line-height:1; color:#1a0830;
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      padding:0; font-family:Georgia,serif; user-select:none;
      margin-right:-1px; /* collapse borders so they share one line */
    }
    .browser-nav-btn:last-child { margin-right:0; }
    .browser-nav-btn:active {
      border-top:2px solid #5a3a7a;
      border-left:2px solid #5a3a7a;
      border-bottom:2px solid #f0e0f8;
      border-right:2px solid #f0e0f8;
    }
    .browser-nav-btn:disabled {
      cursor:default; opacity:0.45;
    }
    /* ── Windows 95-style title bar buttons (top-right) ── */
    .browser-win-btns {
      display:flex; gap:2px; flex-shrink:0; align-items:center;
    }
    .browser-win-btn {
      width:18px; height:16px;
      background:#d0b4dc;
      border-top:2px solid #f0e0f8;
      border-left:2px solid #f0e0f8;
      border-bottom:2px solid #5a3a7a;
      border-right:2px solid #5a3a7a;
      font-size:0.6rem; line-height:1; color:#1a0830;
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      padding:0; font-family:Georgia,serif;
    }
    .browser-win-btn:active {
      border-top:2px solid #5a3a7a;
      border-left:2px solid #5a3a7a;
      border-bottom:2px solid #f0e0f8;
      border-right:2px solid #f0e0f8;
    }
    .browser-win-btn-close { background:#e8a0b8; }
    .browser-win-btn-close:hover { background:#d07090; }
    /* ── 1. Outer browser tabs — solid, opaque, folder-tab style ── */
    .browser-tabs {
      display:flex; gap:3px; align-items:flex-end;
      padding:0; flex-wrap:wrap;
    }
    .browser-tab {
      background:#eed8e8;
      border:1px solid #1a1208;
      border-bottom:none;
      border-radius:10px 10px 0 0;
      padding:0.32rem 0.85rem;
      font-size:0.7rem; color:#2a1040;
      cursor:pointer; white-space:nowrap;
      position:relative; z-index:0;
      transition:background 0.15s, color 0.15s;
      max-width:130px; overflow:hidden; text-overflow:ellipsis;
      font-family:Georgia,serif; letter-spacing:0.02em;
      margin-bottom:-2px;
    }
    .browser-tab.active {
      background:#f8f6ff;
      color:#1a0830; font-weight:600;
      border-color:#1a1208;
      z-index:2;
    }
    .browser-tab:hover:not(.active) {
      background:#e0c8d8; color:#1a0830;
    }
    .browser-content {
      background:linear-gradient(to bottom, #f8f6ff 0%, #f4f0fe 55%, #e0d8f4 80%, #c8bce8 100%);
      background-attachment:local;
      border:1px solid #1a1208;
      border-bottom:none;
      border-radius:0;
      margin:0 -0.5rem; padding:1.2rem 1.3rem 1.4rem;
      min-height:420px;
      overflow-y:scroll;
      position:relative; z-index:1;
    }
    /* ── Hide native scrollbar — custom JS scrollbar used instead ── */
    .browser-content::-webkit-scrollbar { width:0; height:0; }
    .browser-content { scrollbar-width:none; }

    /* ── Custom scrollbar layout ── */
    .browser-scroll-row {
      display:flex; flex:1; min-height:0;
      border:1px solid #1a1208; border-bottom:none;
    }
    .browser-scroll-row .browser-content {
      flex:1; min-width:0;
      border:none; border-radius:0; margin:0;
      overflow-y:scroll; scrollbar-width:none;
    }
    .browser-scrollbar {
      width:16px; flex-shrink:0;
      display:flex; flex-direction:column;
      background:#e8d0f0;
      border-left:1px solid #1a1208;
    }
    .bs-btn {
      flex-shrink:0; height:16px; width:100%;
      background:#d0b4dc; border:none;
      border-bottom:1px solid #1a1208;
      font-size:8px; line-height:1; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      color:#1a1208; padding:0; user-select:none;
    }
    .bs-btn-down { border-bottom:none; border-top:1px solid #1a1208; margin-top:auto; }
    .bs-btn:hover { background:#b898c8; }
    .bs-track {
      flex:1; position:relative; overflow:hidden;
    }
    .bs-thumb {
      position:absolute; left:0; right:0;
      background:#d0b4dc;
      border:1px solid #1a1208;
      border-left:none; border-right:none;
      cursor:grab; min-height:24px;
    }
    .bs-thumb:hover { background:#b898c8; }
    .bs-thumb:active { cursor:grabbing; background:#a880be; }

    .project-panel { display:none; }
    .project-panel.active {
      display:block;
      animation: proj-fadein 200ms ease-out both;
    }
    @keyframes proj-fadein {
      from { opacity:0; transform:translateY(6px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* ── 2. Project title block ──────────────────────────────── */
    .project-title {
      font-family:Georgia,serif;
      font-size:1.5rem; color:#2a1f0e; font-weight:700;
      margin-bottom:0.45rem; line-height:1.2; letter-spacing:-0.01em;
    }
    .project-tags  { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:0.5rem; }
    .project-tag   {
      font-size:0.58rem; letter-spacing:0.08em; padding:2px 8px;
      border-radius:3px; background:transparent;
      color:#7878c0; border:1px solid #9878c0;
      font-family:Georgia,serif; text-transform:uppercase;
    }
    /* Rule sits after tags, before desc */
    .project-title-rule {
      height:1px; background:#c4a8c8;
      margin:0.5rem 0 0.55rem;
    }
    .project-desc {
      font-size:0.9rem; color:#3a2510; line-height:1.7;
      margin-bottom:0.9rem; font-style:italic;
    }
    .project-demo  {
      background:linear-gradient(135deg,#1a1208,#0e0904);
      border-radius:6px; height:120px;
      display:flex; align-items:center; justify-content:center;
      font-size:2rem; cursor:pointer;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
      position:relative; overflow:hidden; transition:opacity 0.2s;
    }
    .project-demo:hover { opacity:0.85; }
    .project-demo-label {
      position:absolute; bottom:8px; right:10px;
      font-size:0.6rem; color:rgba(255,255,255,0.4); letter-spacing:0.1em;
    }
    .project-link { font-size:0.75rem; color:#7a5c2e; text-decoration:underline; cursor:pointer; margin-top:0.5rem; display:inline-block; }

    /* ── Project screenshot demo strip ──────────────────────── */
    .proj-section--demo { margin-top:0.5rem; }
    .proj-demo-live-link { font-size:0.65rem; font-style:normal; color:#7a5c2e; text-decoration:underline; letter-spacing:0.01em; font-family:Georgia,serif; }
    /* Captions and images sit in two separate grid rows so every image's
       top edge lines up regardless of how tall its caption is — captions
       no longer push their own image down independently. */
    .proj-demo-strip {
      display: grid;
      grid-template-rows: auto 1fr;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      gap: 1rem;
      padding-bottom: 0.5rem;
    }
    .proj-demo-item {
      display: contents;
      margin: 0;
    }
    .proj-demo-img {
      grid-row: 2;
      align-self: start;
      border-radius: 6px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.18);
      display: block;
      object-fit: cover;
      object-position: top;
      width: 100%;
    }
    .proj-demo-img--wide      { aspect-ratio: 4 / 3; }
    .proj-demo-img--ultrawide { aspect-ratio: 3 / 2; }
    .proj-demo-img--tall      { aspect-ratio: 3 / 5; }
    .proj-demo-caption {
      grid-row: 1;
      align-self: start;
      font-size: 0.82rem;
      line-height: 1.55;
      color: #3a2f1e;
      font-family: Georgia, serif;
      margin: 0;
      max-width: 100%;
    }
    .proj-demo-num {
      font-weight: 700;
      color: #7a5c2e;
      margin-right: 0.2em;
    }

    /* ── Back-to-overview chip ───────────────────────────────── */
    .proj-back-link {
      display:inline-flex; align-items:center; gap:0.25rem;
      font-size:0.6rem; font-family:Georgia,serif; letter-spacing:0.05em;
      color:#7878c0; text-decoration:none; cursor:pointer;
      border:1px solid #9878c0; border-radius:3px;
      padding:2px 9px; margin-bottom:0.8rem;
      transition:background 0.15s, color 0.15s;
      text-transform:uppercase;
    }
    .proj-back-link:hover { background:rgba(120,120,192,0.12); color:#3a1a52; }

    /* ── Overview bucket layout ───────────────────────────────── */
    .proj-overview { display:flex; flex-direction:column; gap:0; padding:0.2rem 0 0.5rem; }
    .proj-bucket { padding:1.1rem 0; }
    .proj-bucket + .proj-bucket { border-top:1px solid #c4a8c8; }
    .proj-bucket-label {
      display:flex; align-items:center; gap:0.4rem;
      font-size:0.7rem; text-transform:uppercase; letter-spacing:0.07em;
      color:#5b4a9e; margin-bottom:0.55rem;
      font-family:Georgia,serif; font-weight:700;
    }
    .proj-bucket-label::after { content:''; flex:1; height:1px; background:#c4a8c8; }
    .proj-bucket-links { display:flex; flex-direction:column; gap:0.35rem; }
    .proj-bucket-link {
      font-size:0.9rem; color:#2a1040; text-decoration:none; cursor:pointer;
      padding:0.4rem 0.6rem 0.45rem; border-radius:5px;
      transition:background 0.15s, color 0.15s; border:1px solid transparent;
      font-family:Georgia,serif; display:block;
    }
    .proj-bucket-link:hover { background:rgba(120,120,192,0.12); border-color:#9878c0; }
    .proj-bucket-link-name { display:inline; }
    .proj-bucket-link-sub {
      display:inline; font-size:0.78rem; color:#7a6252;
      font-style:italic; font-weight:400;
    }
    .proj-bucket-link-name::after { content:' — '; color:#b0a090; font-style:normal; }

    /* ── 3. Section cards — no borders, more padding, r:10px ─── */
    /* (tints + icons stay, just refining the card shell) */

    /* ── 4. Inner asset tabs — underline-only, subordinate ───── */
    .proj-inner-tabs {
      display:flex; gap:0; margin:0.75rem 0 0.65rem;
      padding-top:0.65rem;
      border-top:1px solid rgba(122,92,46,0.1);
      flex-wrap:wrap;
    }
    .proj-inner-tab {
      font-size:0.7rem; padding:4px 12px 5px;
      border:none; border-bottom:2px solid transparent;
      cursor:pointer; background:transparent;
      color:#7878c0; font-family:inherit;
      transition:color 0.15s, border-color 0.15s;
      letter-spacing:0.03em;
    }
    .proj-inner-tab.active {
      color:#2a1040; font-weight:600;
      border-bottom-color:#5b4a9e;
    }
    .proj-inner-tab:hover:not(.active) { color:#5b4a9e; }
    .proj-inner-panel { display:none; }
    .proj-inner-panel.active { display:block; }

    /* ── D. Pinned-paper iframe wrapper ──────────────────────── */
    .proj-inner-panel iframe { width:100%; border:none; border-radius:4px; display:block; }
    .proj-embed-wrap {
      background:#fdf9f2;
      border:1px solid rgba(122,92,46,0.15);
      border-radius:6px;
      padding:0.6rem;
      box-shadow:0 3px 12px rgba(42,31,14,0.1), 0 1px 3px rgba(42,31,14,0.06);
      transform:rotate(-0.3deg);
      margin:0.2rem 0.2rem 0.5rem;
    }
    .proj-embed-wrap iframe { border-radius:3px; }
    .proj-prompt-text {
      font-size:0.82rem; color:#4a3f2f; line-height:1.7;
      background:rgba(0,0,0,0.03); border-radius:6px; padding:0.8rem 1rem;
      border-left:3px solid rgba(122,92,46,0.3);
    }
    .proj-prompt-label { font-size:0.6rem; letter-spacing:0.1em; color:rgba(122,92,46,0.8); text-transform:uppercase; margin-bottom:0.4rem; font-weight:700; }
    /* ── 5. Standardized project section cards ───────────────── */
    .proj-sections {
      display:grid;
      grid-template-columns: 1.85fr 1fr;
      gap:1.3rem; margin-top:0.9rem;
    }
    /* C — Problem as callout (full-width anchor) */
    .proj-section[data-s="problem"] {
      grid-column:1 / -1;
      border-left:3px solid #7878c0;
      background:rgba(120,120,192,0.07);
      padding:0.65rem 1rem 0.7rem 1rem;
      border-radius:0 4px 4px 0;
    }
    .proj-section[data-s="built"]     { grid-column:1 / 2; grid-row:2; }
    /* RHS stack: outcome + learnings share one continuous border */
    .proj-rhs-stack {
      grid-column:2 / 3; grid-row:2;
      display:flex; flex-direction:column; gap:1.5rem;
      border-left:2px solid #9070b8;
      padding-left:1rem;
    }
    .proj-rhs-stack .proj-section {
      border-left:none; padding-left:0;
    }
    .proj-section {
      border-radius:0;
      padding:0rem 0.9rem 0rem 1rem;
      background:none;
      border-left:2px solid #9070b8;
    }
    /* B — Built lead sentence: bold anchor before bullets */
    .proj-built-lead {
      font-size:0.9rem; font-weight:600; color:#1a1208;
      line-height:1.5; margin:0 0 0.65rem; display:block;
    }
    /* A — Outcome stat chips */
    .proj-stat-chips {
      display:flex; flex-wrap:wrap; gap:0.35rem; margin-top:0.15rem;
    }
    .proj-stat-chip {
      font-size:0.75rem; font-family:Georgia,serif;
      background:rgba(120,120,192,0.1);
      border:1px solid #9878c0;
      border-radius:4px; padding:0.18rem 0.55rem;
      color:#3a1a5e; white-space:nowrap; line-height:1.5;
    }
    .proj-stat-chip.hi {
      background:#8a5ab8;
      border-color:#5b4a9e;
      font-weight:600; color:#fff;
    }
    /* Notion-style label: bold, uppercase, clear */
    .proj-section-label {
      display:flex; align-items:center; gap:0.4rem;
      font-size:0.7rem; font-style:normal; font-weight:700;
      text-transform:uppercase; letter-spacing:0.07em;
      color:#5b4a9e; margin-bottom:0.55rem;
      font-family:Georgia,serif;
    }
    .proj-section-label::after {
      content:''; flex:1; height:1px;
      background:#c4a8c8;
    }
    .proj-section-label::before {
      font-size:0.78rem; font-style:normal; opacity:0.75;
    }
    .proj-section[data-s="problem"]   .proj-section-label::before { content:"⚠"; }
    .proj-section[data-s="built"]     .proj-section-label::before { content:"🔨"; }
    .proj-section[data-s="outcome"]   .proj-section-label::before { content:"✦"; }
    .proj-section[data-s="learnings"] .proj-section-label::before { content:"💡"; }
    .proj-section-body {
      font-size:0.875rem; color:#2a1f0e; line-height:1.8; margin:0;
    }
    .proj-section-body strong { color:#1a1208; font-weight:600; }
    .proj-section-body ul { margin:0.3rem 0 0; padding-left:1.1rem; }
    .proj-section-body li { margin-bottom:0.4rem; }
    .proj-section-body li:last-child { margin-bottom:0; }
    /* DressingRoom timeline */
    .dr-timeline { display:flex; flex-direction:column; gap:1.2rem; padding:0.4rem 0; }
    .dr-step { display:flex; gap:1rem; align-items:flex-start; }
    .dr-img { width:130px; flex-shrink:0; border-radius:6px; object-fit:cover; height:100px; box-shadow:0 2px 8px rgba(0,0,0,0.12); }
    .dr-step-text { flex:1; }
    .dr-step-label { font-size:0.6rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(122,92,46,0.8); margin-bottom:0.3rem; }
    .dr-step-text p { font-size:0.8125rem; color:#3a2f1e; line-height:1.75; margin:0; }
    .dr-step-learnings { flex-direction:column; }
    .dr-step-learnings ul { margin:0.4rem 0 0; padding:0 0 0 1.2rem; }
    .dr-step-learnings li { font-size:0.82rem; color:#4a3f2f; line-height:1.7; margin-bottom:0.35rem; }
    .browser-status {
      background:#b8b0e8;
      border:1px solid #1a1208; border-top:none;
      padding:0.2rem 0.6rem; font-size:0.58rem; color:#2a1040;
      font-family:'Courier New',monospace; margin:0 -0.5rem;
      letter-spacing:0.04em;
      border-radius:0 0 12px 12px;
    }


    /* ---- Hobbies Bag ---- */
    .bag-scene {
      position:relative; display:flex; flex-direction:column; align-items:center;
      padding:0.5rem 0 0; min-height:260px;
    }
    .sports-bag {
      width:220px; height:110px; position:relative;
      background:linear-gradient(160deg,#2a3a5a 0%,#1a2840 100%);
      border-radius:50px 50px 40px 40px / 40px 40px 35px 35px;
      box-shadow:0 8px 28px rgba(0,0,0,0.4), inset 0 2px 0 rgba(255,255,255,0.08);
    }
    /* Bag zipper */
    .sports-bag::before {
      content:''; position:absolute; top:22px; left:15px; right:15px; height:2px;
      background:repeating-linear-gradient(90deg,#8090b0 0px,#8090b0 6px,#5a6a8a 6px,#5a6a8a 10px);
      border-radius:2px;
    }
    /* Bag stripe */
    .sports-bag::after {
      content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
      width:80px; height:100%; border-left:3px solid rgba(255,255,255,0.08); border-right:3px solid rgba(255,255,255,0.08);
      border-radius:inherit;
    }
    .bag-handle {
      width:70px; height:22px; position:absolute; top:-18px; left:50%; transform:translateX(-50%);
      border:4px solid #3a4a6a; border-bottom:none;
      border-radius:14px 14px 0 0;
    }
    .bag-label {
      position:absolute; top:34px; left:50%; transform:translateX(-50%);
      font-size:0.5rem; letter-spacing:0.18em; color:rgba(255,255,255,0.3);
      text-transform:uppercase; white-space:nowrap;
    }
    .bag-items {
      display:flex; align-items:flex-end; justify-content:center;
      gap:1.6rem; margin-top:0.8rem; padding:0 0.5rem;
      flex-wrap:wrap;
    }
    .bag-item {
      display:flex; flex-direction:column; align-items:center; gap:0.3rem;
      cursor:default; transition:transform 0.2s ease;
    }
    .bag-item:hover { transform:translateY(-5px); }
    .bag-item-icon { font-size:2.8rem; line-height:1; }
    .bag-item-name { font-size:0.62rem; color:#7a6a52; letter-spacing:0.06em; text-align:center; }
    .bag-item-desc { font-size:0.58rem; color:#9a8a72; text-align:center; max-width:80px; line-height:1.3; font-style:italic; }
    .hobbies-note {
      font-size:0.8rem; color:#7a6a52; line-height:1.7; margin-top:1.1rem;
      text-align:center; font-style:italic; padding:0 0.5rem;
    }

    /* ============================================================
       WEATHER OVERLAYS — CSS-driven atmosphere layers
    ============================================================ */
    /* Fog / Haze */
    #ov-fog {
      position: absolute; inset: 0; opacity: 0;
      pointer-events: none;
      transition: opacity 5s ease;
      background: radial-gradient(ellipse at 30% 40%, rgba(195,208,228,0.52) 0%, rgba(170,188,215,0.22) 55%, transparent 100%);
      filter: blur(8px);
      animation: fog-drift 22s ease-in-out infinite;
    }
    body.weather-fog #ov-fog { opacity: 1; }
    @keyframes fog-drift {
      0%, 100% { transform: translateX(0) scaleX(1); }
      50%       { transform: translateX(2.5%) scaleX(1.02); }
    }

    /* Wind — canvas-driven curly-q lines */
    #ov-wind {
      position: absolute; inset: 0; opacity: 0;
      pointer-events: none;
      transition: opacity 2s ease;
    }
    #ov-wind canvas { position:absolute; top:0; left:0; width:100%; height:100%; }
    body.weather-wind #ov-wind,
    body.weather-storm #ov-wind { opacity: 1; }

    /* Snow */
    #ov-snow {
      position: absolute; inset: 0; opacity: 0;
      pointer-events: none;
      transition: opacity 3s ease;
    }
    body.weather-snow #ov-snow { opacity: 1; }
    /* snow is now canvas-based — no .snow-flake CSS needed */

    /* ============================================================
       CLOCK WIDGET — animated hands overlaid on room illustration
    ============================================================ */
    #hs-clock {
      width: 72px; height: 72px;
      cursor: default;
    }
    /* In edit mode, show dashed ring so user knows it's draggable */
    body.edit-mode #hs-clock .hs-ring {
      display: block !important; opacity: 1 !important;
      width: 72px !important; height: 72px !important;
      border-radius: 50% !important;
    }
    #clock-svg {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 100%; height: 100%;
      overflow: visible; pointer-events: none;
    }
    .ck-hour   { stroke: rgba(50,32,14,0.90); stroke-width: 4; stroke-linecap: round; }
    .ck-minute { stroke: rgba(50,32,14,0.78); stroke-width: 2.5; stroke-linecap: round; }
    .ck-center { fill: rgba(50,32,14,0.92); }

    /* ============================================================
       MUSIC NOTES — float up from JBL speaker when music plays
    ============================================================ */
    #hs-music-notes { width:24px; height:24px; cursor:default; overflow:visible; }
    .music-note {
      position:absolute;
      bottom:50%; left:50%;
      pointer-events:none;
      font-size:1rem;
      color:rgba(255,215,80,0.95);
      text-shadow:0 0 8px rgba(255,190,0,0.5);
      animation:note-float linear forwards;
      will-change:transform,opacity;
    }
    /* Exponential curve right. Opacity eases in slowly over the first 40%
       so notes appear to drift in rather than flash on. */
    @keyframes note-float {
      0%   { transform:translate(0px, 0px)                  rotate(0deg)  scale(0.5); opacity:0;    }
      30%  { transform:translate(var(--x25), var(--y25))   rotate(6deg)  scale(0.8); opacity:0.28; }
      55%  { transform:translate(var(--x50), var(--y50))   rotate(14deg) scale(1.0); opacity:0.55; }
      78%  { transform:translate(var(--x75), var(--y75))   rotate(22deg) scale(1.05);opacity:0.28; }
      100% { transform:translate(var(--x100), var(--y100)) rotate(30deg) scale(1.1); opacity:0;    }
    }

    /* ============================================================
       MONITOR POWER LED
    ============================================================ */
    /* Monitor LED cluster — 3 equal dots, evenly spaced, rightmost blinks on schedule */
    #hs-monitor-led { width:12px; height:6px; cursor:default; }
    .monitor-dot-row {
      position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%);
      display:flex; align-items:center; gap:5px;
      pointer-events:none;
    }
    .monitor-dot {
      width:2.4px; height:2.4px; border-radius:50%;
      background:#7dffb8;
      box-shadow:0 0 3px rgba(120,255,180,0.75);
      flex-shrink:0;
    }
    .monitor-dot.blinking {
      animation:led-blink 1.5s ease-in-out infinite;
    }
    @keyframes led-blink {
      0%,100% { opacity:1;    box-shadow:0 0 3px rgba(120,255,180,0.75); }
      50%      { opacity:0.06; box-shadow:none; }
    }

    /* Subtle curtain flutter (overlay, not the actual curtain pixels) */
    #curtain-flutter {
      position: absolute;
      top: 0; left: 30%; /* roughly over the hanging curtains */
      width: 6%; height: 65%;
      background: rgba(240,225,190,0.025);
      transform-origin: top center;
      animation: curtain-flutter 7s ease-in-out infinite;
      pointer-events: none;
      z-index: 6;
      filter: blur(3px);
    }
    @keyframes curtain-flutter {
      0%,100% { transform: skewX(-0.4deg) scaleX(1.000); }
      35%      { transform: skewX( 0.8deg) scaleX(1.003); }
      70%      { transform: skewX(-0.6deg) scaleX(0.998); }
    }

    /* ── What's Next — 3 Doors ─────────────────────────────── */
    .door-zoom-card {
      display:flex; flex-direction:column; align-items:center;
      padding:2.2rem 2.5rem 2rem;
      background:rgba(252,248,238,0.97);
      border-radius:12px;
      box-shadow:0 24px 64px rgba(0,0,0,0.55);
      max-width:min(94vw,920px);
      width:100%;
      max-height:90vh;
      overflow-y:auto;
      box-sizing:border-box;
    }
    .door-zoom-title {
      font-family:Georgia,serif;
      font-size:1.4rem; font-weight:700; color:#3a2e1e;
      letter-spacing:0.04em; text-transform:uppercase;
      margin-bottom:0.5rem; text-align:center;
    }
    .door-zoom-intro {
      font-family:Georgia,serif;
      font-size:1rem; color:#444; line-height:1.6;
      text-align:center; max-width:680px;
      margin-bottom:1.6rem;
      font-style:italic;
    }
    .door-row {
      display:flex; gap:2rem; justify-content:center; align-items:flex-start;
      width:100%;
    }
    .door-col {
      display:flex; flex-direction:column; align-items:center;
      flex:1; max-width:240px; cursor:pointer;
      transition:transform 0.2s ease;
    }
    .door-col.door-open { transform:translateY(-5px); }
    .door-role-label {
      font-family:Georgia,serif;
      font-size:0.72rem; font-weight:700; color:#3a2e1e;
      text-transform:uppercase; letter-spacing:0.1em;
      text-align:center; margin-bottom:0.65rem;
      line-height:1.3; min-height:2.4em;
    }
    /* Perspective wrapper */
    .door-scene {
      perspective:700px; perspective-origin:50% 45%;
      width:100%; display:flex; justify-content:center;
    }
    /* Outer frame — stays static */
    .door-frame {
      position:relative;
      width:110px; height:170px;
      border-radius:10px 10px 0 0;
      display:flex; align-items:stretch;
      flex-shrink:0;
    }
    /* Colored arch surround — thin frame, sharp corners like the landing door */
    .door-frame::before {
      content:'';
      position:absolute; inset:0;
      border-radius:4px 4px 0 0;
      border:4px solid transparent;
      border-bottom:none;
      opacity:0.85;
      box-sizing:border-box;
      z-index:0;
    }
    /* Inside of frame (background when door opens) */
    .door-frame-interior {
      position:absolute; inset:0; border-radius:2px 2px 0 0;
      z-index:0;
    }
    /* The door panel that rotates open */
    .door-panel {
      position:absolute; inset:0; border-radius:2px 2px 0 0;
      transform-origin:left center;
      transform-style:preserve-3d;
      transition:transform 0.55s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease;
      z-index:2;
      box-shadow:inset -3px 0 8px rgba(0,0,0,0.18), 2px 0 8px rgba(0,0,0,0.25);
    }
    .door-col.door-open .door-panel {
      transform:rotateY(-72deg);
      box-shadow:inset -3px 0 8px rgba(0,0,0,0.18), 6px 4px 20px rgba(0,0,0,0.35);
    }
    /* Door face — sharp corners, pencil-sketch aesthetic */
    .door-panel-face {
      position:absolute; inset:0; border-radius:2px 2px 0 0;
      backface-visibility:hidden;
      display:flex; flex-direction:column; justify-content:space-between;
      padding:10px 8px 12px;
      box-sizing:border-box;
    }
    /* Center vertical divider — mirrors the landing door's center line */
    .door-panel-face::after {
      content:'';
      position:absolute; left:50%; top:10px; bottom:12px;
      width:0.5px; background:rgba(255,248,235,0.35);
      pointer-events:none;
    }
    /* Two inset decorative panels — outline only, like SVG rect strokes */
    .door-panel-inset {
      border-radius:1px;
      flex:1; margin:3px 4px;
      background:transparent;
      border:0.5px solid rgba(255,248,235,0.45);
      opacity:1;
    }
    /* Doorknob */
    .door-knob {
      position:absolute; right:10px; top:50%; transform:translateY(-50%);
      width:8px; height:8px; border-radius:50%;
      background:radial-gradient(circle at 35% 35%, #e8d5a0, #a07830);
      box-shadow:0 1px 3px rgba(0,0,0,0.4);
      z-index:3;
    }
    /* Floor sill */
    .door-sill {
      width:110px; height:7px; border-radius:0 0 3px 3px;
      flex-shrink:0;
    }
    /* Per-door color themes */
    .door-col-1 .door-role-label       { color:#3f5a8c; }
    .door-col-2 .door-role-label       { color:#a6628f; }
    .door-col-3 .door-role-label       { color:#6b5278; }

    /* Door 1: Lofi navy blue */
    .door-col-1 .door-frame::before    { border-color:#3f5a8c; }
    .door-col-1 .door-frame-interior   { background:#1f2a47; }
    .door-col-1 .door-panel-face       { background:#3a4f7a; }
    .door-col-1 .door-panel-inset      { background:transparent; border-color:rgba(255,248,235,0.4); }
    .door-col-1 .door-sill             { background:#1f2a47; }
    /* Door 2: Lofi purple-pink */
    .door-col-2 .door-frame::before    { border-color:#a6628f; }
    .door-col-2 .door-frame-interior   { background:#4a2740; }
    .door-col-2 .door-panel-face       { background:#8a4a6e; }
    .door-col-2 .door-panel-inset      { background:transparent; border-color:rgba(255,248,235,0.4); }
    .door-col-2 .door-sill             { background:#4a2740; }
    /* Door 3: Dusty plum */
    .door-col-3 .door-frame::before    { border-color:#6b5278; }
    .door-col-3 .door-frame-interior   { background:#3e2e52; }
    .door-col-3 .door-panel-face       { background:#7a5e8a; }
    .door-col-3 .door-panel-inset      { background:transparent; border-color:rgba(255,248,235,0.4); }
    .door-col-3 .door-sill             { background:#3e2e52; }

    /* Shared full-width info panel below the door row */
    .door-info-panel {
      width:100%; margin-top:1.1rem;
      max-height:0; overflow:hidden; opacity:0;
      transition:max-height 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease 0.08s;
    }
    .door-info-panel.open { max-height:800px; opacity:1; }
    /* Inline panels hidden on desktop, used on mobile only */
    .door-inline-panel { display:none; }
    .door-info-panel-inner {
      padding:1rem 1.4rem 1.1rem;
      background:#fff;
      border-radius:8px;
      border-top:4px solid var(--door-color, #1a4a2e);
      box-shadow:0 2px 16px rgba(0,0,0,0.1);
    }
    .door-info-excited {
      font-family:Georgia,serif; font-style:italic;
      font-size:1rem; color:#444; line-height:1.6; margin-bottom:0.8rem;
    }
    .door-info-cols {
      display:flex; gap:2rem;
    }
    .door-info-col { flex:1; }
    .door-info-hdr {
      font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;
      font-size:0.7rem; font-weight:700; letter-spacing:0.14em;
      text-transform:uppercase; margin-bottom:0.4rem;
      color:var(--door-color, #1a4a2e);
    }
    .door-info-list {
      margin:0; padding:0 0 0 1rem; list-style:disc;
    }
    .door-info-list li {
      font-size:0.95rem; color:#333; line-height:1.55; margin-bottom:0.2rem;
    }

    /* ── Tea zoom overlay ─────────────────────────────────────── */
    .tea-zoom-card {
      background:rgba(252,248,238,0.97); border-radius:14px;
      box-shadow:0 24px 64px rgba(0,0,0,0.55);
      max-width:min(94vw,700px); width:100%;
      max-height:90vh; overflow-y:auto; box-sizing:border-box;
      padding:2rem 2.2rem 1.6rem;
      display:flex; flex-direction:column; align-items:center; gap:1rem;
    }
    .tea-zoom-title {
      font-family:Georgia,serif; font-size:1.5rem; font-weight:700;
      color:#3a2010; letter-spacing:0.04em; text-align:center;
    }
    .tea-zoom-intro {
      font-family:Georgia,serif; font-size:1rem; color:#4a3828;
      line-height:1.65; text-align:center; max-width:560px;
    }
    .tea-carousel {
      width:100%; display:flex; align-items:center; gap:0.5rem;
    }
    .tea-car-track-wrap {
      flex:1; overflow:hidden; border-radius:10px;
    }
    .tea-car-track {
      display:flex; transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);
    }
    .tea-car-slide {
      min-width:100%; display:flex; flex-direction:column; align-items:center; gap:0.6rem;
    }
    .tea-car-video-wrap {
      position:relative; width:100%; padding-top:56.25%;
      border-radius:8px; overflow:hidden; background:#000;
    }
    .tea-car-video-wrap iframe {
      position:absolute; inset:0; width:100%; height:100%; border:none;
    }
    .tea-car-img {
      width:100%; max-height:360px; object-fit:cover; border-radius:8px;
      box-shadow:0 4px 16px rgba(0,0,0,0.2);
    }
    .tea-car-caption {
      font-family:Georgia,serif; font-size:0.85rem; color:#6a4f36;
      text-align:center;
    }
    .tea-car-btn {
      background:rgba(90,50,20,0.1); border:none; border-radius:50%;
      width:36px; height:36px; font-size:1.4rem; color:#5a3214;
      cursor:pointer; flex-shrink:0; transition:background 0.15s;
      display:flex; align-items:center; justify-content:center;
    }
    .tea-car-btn:hover { background:rgba(90,50,20,0.22); }
    .tea-car-dots {
      display:flex; gap:6px; justify-content:center;
    }
    .tea-car-dot {
      width:8px; height:8px; border-radius:50%;
      border:none; background:rgba(90,50,20,0.2); cursor:pointer;
      padding:0; transition:background 0.2s;
    }
    .tea-car-dot.active { background:rgba(90,50,20,0.75); }

    /* ── Hobbies zoom overlay ─────────────────────────────────── */
    .hobbies-zoom-wrap {
      display:flex; flex-direction:column; align-items:center;
      gap:0;
    }
    /* PNG bag image */
    .hobbies-bag-img-wrap {
      position:relative;
      width:min(82vw, 480px);
      flex-shrink:0;
    }
    .hobbies-bag-img {
      width:100%; height:auto; display:block;
      filter: drop-shadow(0 18px 44px rgba(0,0,0,0.55));
    }
    /* Buttons overlaid on the light-blue center panel of the bag */
    .hobbies-bag-interior {
      position:absolute;
      top:22%; left:24%; right:26%; bottom:5%;
      display:grid; grid-template-columns:repeat(3, 1fr);
      gap:1.1rem;
      align-content:center;
    }
    .hobby-btn {
      display:flex; align-items:center; justify-content:center;
      background:none; border:none;
      padding:0.2rem; cursor:pointer;
      transition:transform 0.2s ease, filter 0.2s ease;
      font-size:2.6rem; width:100%; line-height:1;
      filter:drop-shadow(0 2px 4px rgba(0,0,0,0.18));
    }
    .hobby-btn:hover { transform:translateY(-4px) scale(1.12); filter:drop-shadow(0 4px 8px rgba(0,0,0,0.25)); }
    .hobby-btn.active { transform:translateY(-6px) scale(1.18); filter:drop-shadow(0 6px 12px rgba(0,0,0,0.3)); }
    .hobby-btn-label { display:none; }
    /* Blurb panel — wider than bag, with gap above, no scrolling */
    .hobbies-blurb-panel {
      width:min(96vw, 820px);
      margin-top:0; /* gap handled by open state */
      background:#faf7f2;
      border-radius:16px;
      box-shadow:0 14px 40px rgba(0,0,0,0.3);
      overflow:hidden;
      max-height:0; opacity:0;
      transition:max-height 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease, margin-top 0.35s ease;
    }
    .hobbies-blurb-panel.open { max-height:600px; opacity:1; margin-top:1.4rem; }
    .hobbies-blurb-inner {
      display:flex; overflow:hidden;
    }
    .hobbies-blurb-text {
      flex:1; padding:1.3rem 1.6rem;
      border-right:1px solid rgba(0,0,0,0.07);
    }
    .hobbies-blurb-text h3 {
      font-size:1.15rem; color:#1a1208; margin-bottom:0.6rem; font-weight:700;
      font-style:italic; font-family:Georgia,serif; line-height:1.2;
    }
    .hobbies-blurb-text p {
      font-size:1.05rem; color:#4a3a28; line-height:1.65; margin-bottom:0.6rem;
    }
    .hobbies-blurb-text p:last-child { margin-bottom:0; }
    .hobbies-blurb-text strong { color:#1a1208; font-weight:600; }
    .hobbies-blurb-img {
      width:210px; flex-shrink:0; overflow:hidden;
    }
    .hobbies-blurb-img img {
      width:100%; height:100%;
      object-fit:cover;
      display:block;
    }

    @media (max-width:700px) {
      .door-row { flex-direction:column; align-items:center; gap:1.4rem; }
      .door-col { max-width:100%; width:100%; flex-direction:row; align-items:flex-start; gap:1rem; }
      .door-role-label { text-align:left; min-height:unset; margin-bottom:0; }
      .hobbies-blurb-inner { flex-direction:column; height:auto; }
      .hobbies-blurb-img { width:100%; height:160px; }
      /* Collapse project section grid to single column */
      .proj-sections { grid-template-columns:1fr; }
      .proj-section[data-s="built"],
      .proj-section[data-s="problem"] { grid-column:1 / -1; grid-row:auto; }
      .proj-rhs-stack { grid-column:1 / -1; grid-row:auto; border-left:2px solid rgba(122,92,46,0.22); }

      /* ── Modal: full-width, auto-height (no forced full-screen) ── */
      #modal-bg { padding:0.5rem; align-items:center; }
      #modal {
        max-width:100%; width:100%;
        max-height:90vh; height:auto;
        border-radius:10px;
        padding:2rem 1.4rem 1.5rem;
        margin:0;
      }

      /* ── Browser: full width, bar doesn't overflow ── */
      .browser-win-btns { flex-shrink:0; }
      .browser-nav-btns { flex-shrink:0; }
      .browser-url-wrap { min-width:0; overflow:hidden; }
      .browser-url      { min-width:0; }

      /* ── DressingRoom journey: stack image above text on mobile ── */
      .dr-step { flex-direction:column; }
      .dr-img  { width:100%; height:auto; max-height:220px; object-fit:cover; }

      /* ── Browser: mobile tab strip ── */
      .browser-tabs {
        flex-wrap:nowrap;
        overflow-x:auto;
        scrollbar-width:none;
      }
      .browser-tabs::-webkit-scrollbar { display:none; }
      /* All tabs: emoji only */
      .browser-tab .tab-text { display:none; }
      .browser-tab { padding:0.32rem 0.5rem; min-width:28px; max-width:none; }
      /* Overview tab keeps its full label */
      .browser-tab[data-tab="overview"] .tab-text { display:inline; }
      .browser-tab[data-tab="overview"] { max-width:110px; }

      /* ── Browser: URL bar single line ── */
      .browser-url {
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }

      /* ── Embeds: make pitch decks & videos responsive ── */
      .proj-embed-wrap {
        transform:none !important;
        margin:0 0 0.5rem;
        padding:0.3rem;
      }
      /* Pitch deck iframes (hardcoded height attr) → aspect-ratio override */
      .proj-embed-wrap > iframe,
      .proj-inner-panel > iframe {
        width:100% !important;
        height:auto !important;
        aspect-ratio:16 / 9;
        display:block;
      }
      /* Canva video wrapper already uses padding-top:56.25% — just ensure no overflow */
      .proj-embed-wrap > div[style*="padding-top"] {
        overflow:hidden;
      }
    }

    /* ── Sticky Notes scatter overlay ─────────────────────────── */
    #stickies-zoom-overlay {
      /* transparent — notes float over the room */
      background: transparent !important;
    }
    /* Centered flex scatter — 3 across on desktop, 1 col on mobile */
    #stickies-zoom-overlay {
      overflow-y: auto !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    .sticky-scatter {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      gap: 2.5rem 2rem;
      padding: 4rem 2rem 3rem;
      max-width: 900px;
      width: 100%;
      min-height: 100%;
      box-sizing: border-box;
    }
    .sn {
      position: relative;
      flex-shrink: 0;
      cursor: default;
      transition: transform 0.2s ease, filter 0.2s ease;
      filter: drop-shadow(3px 5px 14px rgba(0,0,0,0.28));
    }
    .sn:hover {
      transform: var(--base-rot) scale(1.06) translateY(-6px) !important;
      filter: drop-shadow(6px 10px 24px rgba(0,0,0,0.38));
      z-index: 20;
    }
    .sn-img {
      width: 100%; height: 100%;
      object-fit: fill;
      display: block;
      pointer-events: none;
      user-select: none;
    }
    /* Text layer sits precisely over the note paper area */
    .sn-text {
      position: absolute;
      inset: 0;
      display: flex; flex-direction: column; justify-content: center; align-items: center;
      text-align: center;
      padding: 20% 10% 10% !important; /* override inline styles; top pad accounts for note header area */
      pointer-events: none;
    }
    .sn-label {
      font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em;
      text-transform: uppercase; margin-bottom: 0.6rem;
      font-family: Arial, sans-serif; opacity: 0.55;
      color: #2a2015;
    }
    .sn-body {
      font-family: Georgia, serif; font-size: 0.75rem; line-height: 1.55;
      color: #2a2015;
    }
    /* Mobile: single column, full-width notes, scroll through all 6 */
    @media (max-width: 600px) {
      #stickies-zoom-overlay {
        overflow-y: auto !important;
        align-items: flex-start !important;
      }
      .sticky-scatter {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.4rem;
        padding: 1.4rem 1rem 3rem;
        max-width: 100vw;
        width: 100%;
        min-height: unset;
      }
      /* Each note: full width, natural aspect ratio */
      .sn {
        width: 88vw !important;
        height: auto !important;
        aspect-ratio: 250 / 264;
        transform: none !important;
      }
      .sn-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: fill;
      }
      /* Text: centered, large to fill note */
      .sn-text { padding: 18% 8% 8% !important; justify-content: center !important; align-items: center !important; text-align: center !important; }
      .sn-body  { font-size: 1.1rem !important; line-height: 1.5 !important; }
      .sn-label { font-size: 0.68rem !important; margin-bottom: 0.4rem !important; }
    }

    /* ── Community Polaroid Scatter ─────────────────────────── */
    #community-zoom-overlay {
      background: transparent !important;
      overflow: hidden !important; /* overridden to scroll on mobile below */
    }
    .community-scatter {
      position: relative;
      width: 100%; height: 100%;
    }
    /* Individual polaroid.
       Rotation is passed via --rot custom property in inline style so that CSS
       hover/active can compose on top of it (inline transform would block CSS overrides). */
    .cpol {
      position: absolute;
      cursor: pointer;
      transform: rotate(var(--rot, 0deg));
      filter: drop-shadow(3px 5px 14px rgba(0,0,0,0.28));
      transition: transform 0.30s cubic-bezier(0.34,1.56,0.64,1),
                  filter 0.30s ease;
      will-change: transform;
    }
    /* Pick-up: lifts off the surface, nearly levels rotation, casts deeper shadow */
    .cpol:hover, .cpol.active {
      transform: rotate(calc(var(--rot, 0deg) * 0.25)) translateY(-16px) scale(1.05);
      filter: drop-shadow(5px 20px 30px rgba(0,0,0,0.44));
      z-index: 20;
    }
    /* Press-down feedback on click */
    .cpol:active {
      transform: rotate(calc(var(--rot, 0deg) * 0.4)) translateY(-8px) scale(1.02);
      filter: drop-shadow(3px 10px 18px rgba(0,0,0,0.38));
      transition-duration: 0.10s;
    }
    .cpol-frame {
      background: #fff;
      padding: 10px 10px 42px;
      border-radius: 2px;
      width: 220px;
      user-select: none;
    }
    .cpol-photos {
      position: relative;
      width: 200px; height: 190px;
      overflow: hidden;
      background: #e8e4dd;
    }
    .cpol-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: 0; transition: opacity 0.35s ease;
    }
    .cpol-img.active { opacity: 1; }
    /* Nav arrows */
    .cpol-prev, .cpol-next {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(255,255,255,0.72); border: none;
      font-size: 1.1rem; color: #1a1208;
      width: 26px; height: 26px; border-radius: 50%;
      cursor: pointer; z-index: 5;
      opacity: 0; transition: opacity 0.2s;
      display: flex; align-items: center; justify-content: center;
      line-height: 1;
    }
    .cpol-prev { left: 5px; }
    .cpol-next { right: 5px; }
    .cpol-photos:hover .cpol-prev,
    .cpol-photos:hover .cpol-next { opacity: 1; }
    /* After selecting a polaroid, keep arrows hoverable (active state) */
    .cpol.active .cpol-photos:hover .cpol-prev,
    .cpol.active .cpol-photos:hover .cpol-next { opacity: 1; }
    /* arrows always interactive — pointer-events:none was never set, this is belt+suspenders */
    .cpol-prev, .cpol-next { pointer-events: all; }
    @media (hover: none) {
      /* Touch devices: always show arrows so users know they exist */
      .cpol-prev, .cpol-next { opacity: 0.7; }
    }
    .cpol-prev:disabled, .cpol-next:disabled { opacity: 0 !important; }
    /* Dot indicators */
    .cpol-dots {
      position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
      display: flex; gap: 4px; z-index: 5;
    }
    .cpol-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: rgba(255,255,255,0.5);
      transition: background 0.2s;
    }
    .cpol-dot.active { background: #fff; }
    /* Label strip */
    .cpol-label {
      margin-top: 10px;
      font-family: Georgia, serif; font-size: max(0.875rem, 14px);
      color: #3a2e1e; text-align: center;
      line-height: 1.35; letter-spacing: 0.02em;
      font-style: italic;
    }
    /* Community text blurb panel (same pattern as award-blurb) */
    #community-blurb-panel {
      position: fixed;
      top: 70%; left: 50%; transform: translateX(-50%);
      width: min(540px, 92vw);
      background: #faf7f2;
      border: 1px solid rgba(0,0,0,0.10);
      border-radius: 10px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.18);
      z-index: 210;
      max-height: 0; overflow: hidden; opacity: 0;
      transition: max-height 0.38s ease, opacity 0.28s ease;
    }
    #community-blurb-panel.open { max-height: 500px; opacity: 1; }
    .com-blurb-inner {
      padding: 1.4rem 1.6rem 1.2rem;
    }
    .com-blurb-title {
      font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;
      font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.14em; color: #7a6040; margin-bottom: 0.65rem;
    }
    .com-blurb-body {
      font-size: max(0.82rem, 13px); color: #2a1e10; line-height: 1.75;
    }
    .com-proj-link {
      color: #7a4f1a; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
    }
    .com-proj-link:hover { color: #3a1e05; }
    .com-blurb-close {
      position: absolute; top: 0.6rem; right: 0.9rem;
      background: none; border: none; font-size: 1rem;
      color: rgba(0,0,0,0.3); cursor: pointer; line-height: 1;
    }
    .com-blurb-close:hover { color: rgba(0,0,0,0.6); }
    @media (max-width: 600px) {
      /* ── Overlay scrolls like sticky notes ── */
      #community-zoom-overlay {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: block !important;
      }
      /* ── Single-column polaroid stack ── */
      .community-scatter {
        display: flex; flex-direction: column;
        align-items: center;
        gap: 1rem;
        /* Top padding keeps first polaroid below the back button;
           bottom padding gives room to scroll to last card */
        padding: 4rem 0 5rem;
        height: auto; width: 100%;
        box-sizing: border-box;
      }
      .cpol {
        position: relative !important;
        top: auto !important; left: auto !important;
        transform: none !important;
        --rot: 0deg;
      }
      .cpol:hover, .cpol.active {
        transform: translateY(-6px) scale(1.03) !important;
      }
      .cpol-frame { width: min(72vw, 260px); padding: 8px 8px 36px; }
      .cpol-photos { width: 100%; height: min(55vw, 200px); }

      /* Blurb panel: inline below polaroid, not fixed */
      #community-blurb-panel {
        position: relative !important;
        top: auto !important; left: auto !important;
        transform: none !important;
        width: min(85vw, 420px);
        margin: -0.4rem auto 0;
        box-shadow: 0 4px 18px rgba(0,0,0,0.15);
      }
      #community-blurb-panel.open { max-height: 600px; }
    }

    /* ══════════════════════════════════════════════════════
       MOBILE PASS — iPhone-sized screens (≤ 480px)
       ══════════════════════════════════════════════════════ */
    @media (max-width: 480px) {

      /* ── iPod / Spotify: constrain to screen ── */
      .speaker-zoom-wrap { width: min(88vw, 300px) !important; gap: 0.5rem !important; }
      .ipod-body   { transform: none !important; width: 100% !important; }
      .ipod-screen { overflow: hidden !important; }
      /* Constrain the embed slot to the iPod width on small screens —
         the real iframe (in #spotify-bg) is sized to match this slot's
         rect via JS, so it follows automatically. */
      .ipod-spotify-inset {
        overflow: hidden !important;
        width: 100% !important;
      }
      .ipod-album-art { height: min(44vw, 160px) !important; }

      /* Music: kill coverflow, show one card filling width */
      .music-zoom-wrap { width: 100vw !important; }
      .music-stage {
        height: auto !important;
        overflow: visible !important;
        padding: 0 0 1rem !important;
      }
      /* Hide side cards entirely */
      .record-slot[data-pos="-1"],
      .record-slot[data-pos="1"]  { display: none !important; }
      /* Center card: full width, natural height */
      .record-slot[data-pos="0"] {
        position: static !important;
        transform: none !important;
        width: 88vw !important;
        aspect-ratio: 1 !important;
        margin: 0 auto !important;
        opacity: 1 !important;
        filter: none !important;
      }
      .record-card {
        box-shadow: 0 12px 40px rgba(0,0,0,0.55) !important;
      }

      /* ── About me: narrower, capped to viewport ── */
      .about-zoom-card {
        width: 96vw !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
      }
      .about-hanger-wrap { width: min(40%, 140px) !important; }
      .about-body p { font-size: 0.9rem !important; }

      /* ── Bookshelf: full width, auto height ── */
      .bookshelf-zoom-card {
        height: auto !important;
        width: 92vw !important;
      }
      .bookshelf-zoom-card img {
        width: 100% !important;
        height: auto !important;
      }

      /* ── BCG Case files: full-screen document, no folder image ── */
      #consulting-zoom-overlay {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        padding: 0 !important;
        gap: 0 !important;
      }
      .casefiles-bg { display: none !important; }
      .casefiles-zoom-card {
        width: 100vw !important;
        height: auto !important;
        min-height: 0 !important;
        flex: 1 1 0 !important;  /* fill all space above nav bar */
        aspect-ratio: unset !important;
        filter: none !important;
        flex-shrink: 1 !important;
        position: relative !important;
      }
      .casefiles-pages {
        position: absolute !important;
        top: 0 !important; bottom: 0 !important;
        left: 0 !important; right: 0 !important;
        background: #fefcf5 !important;
        border: none !important; border-radius: 0 !important; box-shadow: none !important;
      }
      .cf-left-page { display: none !important; }
      .cf-right-page {
        position: absolute !important;
        top: 0 !important; bottom: 0 !important;
        left: 0 !important; right: 0 !important;
        padding: 1.2rem 1.1rem 1rem !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #fefcf5 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transition: opacity 0.18s ease !important;
      }
      .cf-right-page.cf-fade { opacity: 0 !important; }
      /* Existing desktop arrows: hide on mobile */
      #cf-prev-arrow, #cf-next-arrow { display: none !important; }
      .cf-nav { display: none !important; }
      /* Mobile nav bar below the document */
      .cf-mobile-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100vw !important;
        height: 3.5rem !important;
        padding: 0 1.2rem !important;
        flex-shrink: 0 !important;
        background: rgba(0,0,0,0.35) !important;
      }
      /* In tour mode, the bottom-fixed tour bar covers the bottom nav —
         move prev/next above the case files document instead. */
      body.tour-mode .cf-mobile-nav { order: -1 !important; }
      .cf-mob-btn {
        background: rgba(255,255,255,0.15) !important;
        border: 1px solid rgba(255,255,255,0.3) !important;
        border-radius: 6px !important;
        color: rgba(255,255,255,0.9) !important;
        font-size: 0.85rem !important;
        font-family: Georgia, serif !important;
        padding: 0.35rem 1rem !important;
        cursor: pointer !important;
      }
      .cf-mob-btn:disabled { opacity: 0.3 !important; }
      #cf-mob-pagenum {
        color: rgba(255,255,255,0.7) !important;
        font-size: 0.75rem !important;
        font-family: Georgia, serif !important;
      }
      /* Let inline height/overflow constraints expand */
      .cf-right-page > div, .cf-turner-face > div, .cf-turner-back > div {
        height: auto !important; overflow: visible !important; flex-shrink: 0 !important;
      }
      .cf-cmp-row .cf-body { -webkit-line-clamp: unset !important; overflow: visible !important; }
      .cf-cmp-row .cf-ul   { max-height: none !important; overflow: visible !important; }
      .cf-toc-page { height: 100% !important; overflow: visible !important; }
    .cf-page-wrap { height: auto !important; overflow: visible !important; }
      .cf-turner-face, .cf-turner-back {
        overflow-y: auto !important; padding: 1rem 0.9rem !important;
        background: #fefcf5 !important; border: 1px solid #111 !important;
      }
      /* Readable text */
      .cf-tag       { font-size: 0.62rem !important; }
      .cf-title     { font-size: 0.92rem !important; }
      .cf-sub       { font-size: 0.66rem !important; }
      .cf-section   { font-size: 0.7rem  !important; }
      .cf-body      { font-size: 0.78rem !important; line-height: 1.65 !important; }
      .cf-feat-title{ font-size: 0.9rem  !important; }
      .cf-feat-body { font-size: 0.78rem !important; }
      .cf-metaline  { font-size: 0.66rem !important; }
      .cf-cmp-title { font-size: 0.82rem !important; }
      .cf-soc-title { font-size: 0.82rem !important; }
      .cf-ul li     { font-size: 0.76rem !important; }

      /* ── Projects / Monitor: vertical phone shape ── */
      #monitor-zoom-overlay {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
      }
      .monitor-zoom-card {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        height: auto !important;
        max-height: 92vh !important;
        aspect-ratio: unset !important;
        background: #1a1a2e;
        border-radius: 0 !important;
        border: none !important;
        filter: none !important;
        overflow: hidden;
        align-self: center;
      }
      .monitor-bg-img { display: none !important; }
      .monitor-screen-inset {
        position: static !important;
        inset: unset !important;
        display: flex !important;
        flex-direction: column !important;
        height: 82vh !important;
        border-radius: 14px !important;
        overflow: hidden !important;
      }
      .monitor-screen-inset .browser-tab { font-size: 0.6rem !important; padding: 0.22rem 0.5rem !important; max-width: 90px !important; }
      .monitor-screen-inset .project-title { font-size: 0.9rem !important; }
      .monitor-screen-inset .project-desc  { font-size: 0.78rem !important; }

      /* ── Awards: trophy case pinned at top, blurb overflows for scroll ── */
      #trophy-zoom-overlay {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 !important;
      }
      .trophy-zoom-wrap {
        width: 96vw !important;
        min-height: unset !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: auto !important;
        padding: 3.5rem 0 3rem !important;
      }
      .trophy-zoom-wrap.trophy-selected { /* no layout change needed */ }
      .trophy-zoom-card { width: 96vw !important; max-width: unset !important; }
      .award-blurb-panel { width: 96vw !important; }
      .award-blurb-panel.open { max-height: none !important; }
      .award-blurb-inner { flex-direction: column !important; height: auto !important; }
      .award-blurb-text {
        border-right: none !important; border-bottom: 1px solid rgba(0,0,0,0.07) !important;
        /* Don't create a second, independently-scrollable region — the
           overlay itself handles scrolling on mobile (see .world-zoom-overlay) */
        overflow-y: visible !important; max-height: none !important;
      }
      .award-blurb-img  { width: 100% !important; height: 340px !important; }
      .award-blurb-img img { object-position: center center !important; }
      .award-blurb-text p { font-size: max(0.88rem, 12px) !important; }

      /* ── Hobbies: scrollable overlay, bag always visible at top ── */
      #hobbies-zoom-overlay {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 !important;
      }
      .hobbies-zoom-wrap {
        width: 96vw !important;
        min-height: unset !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: auto !important;
        padding: 3.5rem 0 3rem !important;
      }
      .hobbies-bag-img-wrap { width: min(90vw, 380px) !important; flex-shrink: 0 !important; }
      .hobbies-blurb-panel { width: 96vw !important; }
      .hobbies-blurb-panel.open {
        max-height: none !important;
        overflow-y: visible !important;
      }
      .hobbies-blurb-inner {
        flex-direction: column !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
      }
      .hobbies-blurb-text  { border-right: none !important; border-bottom: 1px solid rgba(0,0,0,0.07) !important; }
      .hobbies-blurb-img   { width: 100% !important; height: 280px !important; flex-shrink: 0 !important; overflow: hidden !important; }
      .hobbies-blurb-img img { object-fit: cover !important; height: 100% !important; object-position: center 60% !important; }

      /* ── What's Next: doors vertical, label above, panel inline below ── */
      .door-zoom-card { padding: 1.2rem 1rem 1rem !important; }
      .door-zoom-intro { font-size: 0.88rem !important; }
      .door-row { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; }
      .door-col {
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 0 !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        border-bottom: 1px solid rgba(0,0,0,0.12) !important;
      }
      .door-col:first-child { padding-top: 0.2rem !important; }
      .door-col:last-child { border-bottom: none !important; padding-bottom: 0.2rem !important; }
      .door-role-label {
        text-align: center !important;
        margin-bottom: 0.5rem !important;
        font-size: 0.8rem !important;
      }
      /* Info panel appears full-width inline, not below all doors */
      .door-info-panel { margin-top: 0.5rem !important; }
      /* Hide shared bottom panel on mobile; show inline panels instead */
      #door-info-panel { display: none !important; }
      .door-inline-panel { display: block !important; }
      .door-info-cols  { flex-direction: column !important; gap: 0.8rem !important; }
      .door-info-list li { font-size: 0.88rem !important; }
      .door-info-excited { font-size: 0.9rem !important; }
      /* Door frame smaller on mobile */
      .door-frame { width: 80px !important; height: 124px !important; }

      /* ── Tea carousel ── */
      .tea-zoom-card {
        padding: 1.2rem 1rem 1rem !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
      }
      .tea-zoom-intro { font-size: 0.88rem !important; }

      /* ── Note modal ── */
      .notepad-css {
        height: 70vh !important;
        width: 94vw !important;
      }

      /* ── General: overlays stay centered; only specific ones opt into flex-start+scroll ── */
      .world-zoom-overlay {
        align-items: center !important;
        justify-content: center !important;
        padding: 1rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
      }

      /* ── Override padding=0 for specific overlays (must come AFTER general rule) ── */
      #monitor-zoom-overlay {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
      }
      #consulting-zoom-overlay {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        flex-direction: column !important;
        overflow: hidden !important;
        gap: 0 !important;
      }

      /* ── Awards: scrollable, trophy case centered initially ── */
    }
  /* ---- World map picture-frame modal ---- */
  #modal-bg.wm-mode {
    background: rgba(0,0,0,0.72) !important;
    backdrop-filter: blur(4px) !important;
  }
  #modal-bg.wm-mode #modal {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: min(90vw, 860px) !important;
    width: min(90vw, 860px) !important;
    max-height: unset !important;
    overflow: visible !important;
    /* Outer frame — dark walnut */
    outline: 18px solid #5c3a1e;
    outline-offset: 0;
    /* Double-frame inner shadow */
    filter: drop-shadow(0 0 0 6px #3a2008) drop-shadow(0 16px 48px rgba(0,0,0,0.7));
  }
  /* Inner mat / lining */
  #modal-bg.wm-mode #modal::before {
    content: '';
    position: absolute;
    inset: -18px;
    border: 5px solid #8b6240;
    pointer-events: none;
    z-index: 2;
    box-shadow: inset 0 0 0 2px #3a2008, 0 0 0 2px #3a2008;
  }
  #modal-bg.wm-mode #modal-title,
  #modal-bg.wm-mode #modal-close,
  #modal-bg.wm-mode #modal-reset-btn { display: none !important; }
  #modal-bg.wm-mode #modal-body {
    margin: 0 !important; padding: 0 !important;
  }
  #modal-bg.wm-mode .wm-wrap { gap: 0 !important; }
  #modal-bg.wm-mode .wm-title,
  #modal-bg.wm-mode .wm-footnote { display: none !important; }
  /* Plaque label centered on the top frame border */
  #modal-bg.wm-mode #modal::after {
    content: '✦ places that shaped me ✦';
    position: absolute;
    top: -14px; left: 50%; transform: translateX(-50%);
    background: #7a5230;
    color: #f5e8cc;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.7rem; letter-spacing: 0.14em;
    padding: 0.22rem 1.1rem;
    border-radius: 3px;
    border: 1px solid #5c3a1e;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
  }
  #modal-bg.wm-mode #wm-leaflet {
    height: min(58vh, 520px) !important;
    border-radius: 0 !important;
  }

  /* ---- Leaflet world map ---- */
  .wm-wrap { display:flex; flex-direction:column; gap:0.8rem; }
  .wm-title { font-size:1rem; font-weight:500; color:#2a1f0e; letter-spacing:0.04em; }
  #wm-leaflet {
    width:100%; height:340px; border-radius:10px;
    overflow:hidden; z-index:0;
  }
  .wm-footnote { font-size:0.68rem; color:rgba(60,40,10,0.4); text-align:center; margin:0; letter-spacing:0.06em; }
  /* Custom pin marker */
  .wm-marker-pin {
    width:14px; height:14px; border-radius:50%;
    background:#c0622a; border:2.5px solid #fff;
    box-shadow:0 2px 6px rgba(0,0,0,0.35);
  }
  /* Leaflet popup styling to match room aesthetic */
  .leaflet-popup-content-wrapper {
    background:#faf7f2 !important;
    border-radius:8px !important;
    box-shadow:0 4px 18px rgba(0,0,0,0.18) !important;
    font-family:Georgia,'Times New Roman',serif !important;
  }
  .leaflet-popup-content {
    font-size:0.8rem !important; line-height:1.55 !important;
    color:#3a2a14 !important; margin:10px 14px !important;
  }
  .leaflet-popup-content strong { color:#1a1208 !important; }
  .leaflet-popup-tip { background:#faf7f2 !important; }
  .leaflet-popup-close-button { color:#a08060 !important; }
  /* ============================================================
     IPAD / TABLET  (≤ 1024px) — consulting, projects, community only
  ============================================================ */
  @media (max-width: 1024px) {

    /* ── Consulting: same mobile folder layout ── */
    #consulting-zoom-overlay {
      display: flex !important; flex-direction: column !important;
      align-items: center !important; justify-content: center !important;
      overflow-x: hidden !important; overflow-y: hidden !important;
      padding: 0 !important; gap: 0 !important;
    }
    .casefiles-bg { display: block !important; object-fit: fill !important; }
    .casefiles-zoom-card {
      width: 110vw !important; height: 82vh !important;
      aspect-ratio: unset !important; filter: none !important; flex-shrink: 0 !important;
    }
    .casefiles-pages {
      top: 6% !important; bottom: 6% !important;
      left: 16% !important; right: 16% !important;
      background: transparent !important;
      border: none !important; border-radius: 0 !important; box-shadow: none !important;
    }
    .cf-left-page { display: none !important; }
    .cf-right-page {
      left: 0 !important; right: 0 !important;
      padding: 1.2rem 1.1rem 0.5rem !important;
      overflow-y: auto !important; overflow-x: hidden !important;
      background: #fefcf5 !important;
      border: 1px solid #111 !important; border-radius: 2px !important;
      box-shadow: inset 0 0 0 3px rgba(200,180,140,0.12), 0 2px 10px rgba(0,0,0,0.15) !important;
      transition: opacity 0.18s ease !important;
    }
    .cf-right-page.cf-fade { opacity: 0 !important; }
    #cf-prev-arrow, #cf-next-arrow { display: none !important; }
    .cf-nav { display: none !important; }
    .cf-mobile-nav {
      display: flex !important; align-items: center !important;
      justify-content: space-between !important;
      width: 72vw !important; padding: 0.5rem 0 !important; flex-shrink: 0 !important;
    }
    /* In tour mode, the bottom-fixed tour bar covers the bottom nav —
       move prev/next above the case files document instead. */
    body.tour-mode .cf-mobile-nav { order: -1 !important; }
    .cf-mob-btn {
      background: rgba(255,255,255,0.15) !important;
      border: 1px solid rgba(255,255,255,0.3) !important;
      border-radius: 6px !important; color: rgba(255,255,255,0.9) !important;
      font-size: 0.85rem !important; font-family: Georgia, serif !important;
      padding: 0.35rem 1rem !important; cursor: pointer !important;
    }
    .cf-mob-btn:disabled { opacity: 0.3 !important; }
    #cf-mob-pagenum { color: rgba(255,255,255,0.7) !important; font-size: 0.75rem !important; font-family: Georgia, serif !important; }
    .cf-right-page > div, .cf-turner-face > div, .cf-turner-back > div {
      height: auto !important; overflow: visible !important; flex-shrink: 0 !important;
    }
    .cf-cmp-row .cf-body { -webkit-line-clamp: unset !important; overflow: visible !important; }
    .cf-cmp-row .cf-ul   { max-height: none !important; overflow: visible !important; }
    .cf-toc-page { height: 100% !important; overflow: visible !important; }
    .cf-page-wrap { height: auto !important; overflow: visible !important; }
    .cf-turner-face, .cf-turner-back {
      overflow-y: auto !important; padding: 1rem 0.9rem !important;
      background: #fefcf5 !important; border: 1px solid #111 !important;
    }

    /* ── Projects / Monitor: vertical phone shape ── */
    .monitor-zoom-card {
      width: 72vw !important; height: auto !important;
      max-height: 88vh !important; aspect-ratio: unset !important;
      background: #1a1a2e; border-radius: 28px !important;
      border: 6px solid #222 !important;
      filter: drop-shadow(0 10px 32px rgba(0,0,0,0.6)) !important;
      overflow: hidden;
    }
    .monitor-bg-img { display: none !important; }
    .monitor-screen-inset {
      position: static !important; inset: unset !important;
      display: flex !important; flex-direction: column !important;
      height: 76vh !important; border-radius: 22px !important;
      overflow: hidden !important;
    }
    .monitor-screen-inset .browser-tab { font-size: 0.65rem !important; padding: 0.25rem 0.65rem !important; max-width: 110px !important; }
    .monitor-screen-inset .project-title { font-size: 0.95rem !important; }
    .monitor-screen-inset .project-desc  { font-size: 0.82rem !important; }

    /* ── Community polaroids: single column ── */
    #community-zoom-overlay {
      overflow-y: auto !important; overflow-x: hidden !important;
      display: block !important;
    }
    .community-scatter {
      display: flex !important; flex-direction: column !important;
      align-items: center !important;
      gap: 1.2rem !important;
      padding: 4rem 0 5rem !important;
      height: auto !important; width: 100% !important;
      box-sizing: border-box !important;
    }
    .cpol {
      position: relative !important;
      top: auto !important; left: auto !important;
      transform: none !important; --rot: 0deg;
    }
    .cpol:hover, .cpol.active {
      transform: translateY(-6px) scale(1.03) !important;
    }
    .cpol-frame { width: min(52vw, 300px) !important; padding: 8px 8px 36px !important; }
    .cpol-photos { width: 100% !important; height: min(40vw, 230px) !important; }
    #community-blurb-panel {
      position: relative !important; top: auto !important;
      left: auto !important; transform: none !important;
      width: min(85vw, 420px) !important;
      margin: -0.4rem auto 0 !important;
      box-shadow: 0 4px 18px rgba(0,0,0,0.15) !important;
    }
    #community-blurb-panel.open { max-height: 600px !important; }
  }

  /* ============================================================
     PHONE FINAL PASS — must come AFTER the 1024px block so
     phone-specific !important rules aren't overridden by tablet rules
     ============================================================ */
  @media (max-width: 480px) {

    /* ── Projects / Monitor: fill the full viewport, back btn floats on top ── */
    #monitor-zoom-overlay {
      padding: 0 !important;
      align-items: stretch !important;
      justify-content: center !important;
    }
    /* Back button is redundant on mobile — the browser's own X closes it */
    #monitor-zoom-back {
      display: none !important;
    }
    .monitor-zoom-card {
      width: 100vw !important;
      max-width: 100vw !important;
      margin: 0 !important;
      height: 100vh !important;
      max-height: 100vh !important;
      aspect-ratio: unset !important;
      border-radius: 0 !important;
      border: none !important;
      filter: none !important;
      overflow: hidden !important;
      align-self: auto !important;
    }
    .monitor-screen-inset {
      position: static !important;
      inset: unset !important;
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      border-radius: 0 !important;
      overflow: hidden !important;
    }
    /* Remove rounded corners on browser chrome/status so no white gaps */
    .monitor-screen-inset .browser-chrome {
      border-radius: 0 !important;
      margin: 0 !important;
    }
    .monitor-screen-inset .browser-status {
      border-radius: 0 !important;
      margin: 0 !important;
    }
    /* Prevent horizontal overflow in browser content */
    .monitor-screen-inset .browser-content {
      overflow-x: hidden !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      padding: 1rem !important;
    }
    /* Demo strip: vertical stack on mobile, full-width images.
       Undo the desktop two-row grid — each item goes back to being
       its own caption-then-image column. */
    .proj-demo-strip {
      display: flex !important;
      flex-direction: column !important;
      overflow-x: hidden !important;
      overflow-y: visible !important;
      gap: 1.25rem !important;
    }
    .proj-demo-item {
      display: flex !important;
      flex-direction: column !important;
      gap: 0.6rem !important;
    }
    .proj-demo-caption,
    .proj-demo-img {
      grid-row: unset !important;
    }
    .proj-demo-img--wide,
    .proj-demo-img--ultrawide,
    .proj-demo-img--tall {
      width: 100% !important;
      height: auto !important;
    }
    .proj-demo-caption {
      max-width: 100% !important;
      font-size: 0.85rem !important;
    }
    /* Prevent proj-sections grid from causing overflow */
    .proj-sections {
      grid-template-columns: 1fr !important;
      overflow-x: hidden !important;
    }
    .proj-rhs-stack {
      grid-column: 1 !important;
      grid-row: auto !important;
      border-left: 2px solid #9070b8 !important;
    }

    /* ── Case files: portrait crop of right-half, tall card, centered ── */
    #consulting-zoom-overlay {
      padding: 0 !important;
      align-items: center !important;
      justify-content: center !important;
      flex-direction: column !important;
      overflow: hidden !important;
      gap: 0 !important;
    }
    /* Crop book image: show only right-page half via cover+right */
    .casefiles-bg {
      display: block !important;
      object-fit: cover !important;
      object-position: right center !important;
    }
    .casefiles-zoom-card {
      width: 100vw !important;
      height: 85vh !important;
      margin-top: 5vh !important;
      min-height: 0 !important;
      flex: 0 0 auto !important;
      aspect-ratio: unset !important;
      filter: none !important;
      position: relative !important;
      overflow: hidden !important;
      border-radius: 0 !important;
    }
    /* Page content area fills the visible right-page crop */
    .casefiles-pages {
      position: absolute !important;
      top: 4% !important; bottom: 5% !important;
      left: 1% !important; right: 1% !important;
      background: transparent !important;
      border: none !important;
    }
    .cf-left-page { display: none !important; }
    .cf-right-page {
      position: absolute !important;
      top: 0 !important; bottom: 0 !important;
      left: 0 !important; right: 0 !important;
      padding: 0.75rem 0.85rem !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      background: rgba(253,252,246,0.96) !important;
      border: 1px solid #111 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      font-size: 0.72rem !important;
      transition: opacity 0.18s ease !important;
    }
    /* TOC centering: fill full visual area (including cf-right-page padding) */
    .cf-toc-page {
      position: absolute !important;
      inset: 0 !important;
      height: auto !important;
    }
    .cf-toc-right {
      overflow: visible !important;
      padding-right: 0.85rem !important;
    }
    .cf-right-page.cf-fade { opacity: 0 !important; }
    /* Nav bar at BOTTOM, naturally after the card */
    .cf-mobile-nav {
      order: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      width: 100vw !important;
      height: 3.2rem !important;
      padding: 0 1rem !important;
      flex-shrink: 0 !important;
      background: rgba(0,0,0,0.35) !important;
      border-radius: 0 0 6px 6px !important;
    }
    /* In tour mode, the bottom-fixed tour bar covers the bottom nav —
       move prev/next above the case files document instead. Nudge it
       down a bit so it sits closer to the document below it, with a
       small breathing-room gap (not flush against the top edge, not
       overlapping the card). */
    body.tour-mode .cf-mobile-nav {
      order: -1 !important;
      border-radius: 6px 6px 0 0 !important;
      margin-top: 1.5rem !important;
    }
    body.tour-mode .casefiles-zoom-card {
      margin-top: 0.5rem !important;
    }
    .cf-mob-btn {
      background: rgba(255,255,255,0.15) !important;
      border: 1px solid rgba(255,255,255,0.3) !important;
      border-radius: 6px !important;
      color: rgba(255,255,255,0.9) !important;
      font-size: 0.85rem !important;
      font-family: Georgia, serif !important;
      padding: 0.35rem 1rem !important;
      cursor: pointer !important;
    }
    .cf-mob-btn:disabled { opacity: 0.3 !important; }
    #cf-mob-pagenum {
      color: rgba(255,255,255,0.7) !important;
      font-size: 0.75rem !important;
      font-family: Georgia, serif !important;
    }

    /* ── World map: auto-height frame so no black gap ── */
    #modal-bg.wm-mode {
      padding: 1.5rem !important;
      align-items: center !important;
    }
    #modal-bg.wm-mode #modal {
      height: auto !important;
      max-height: unset !important;
      width: 90vw !important;
      max-width: 90vw !important;
      outline-width: 10px !important;
      overflow: visible !important; /* allow ::after label to show above frame */
    }
    #modal-bg.wm-mode #wm-leaflet {
      height: min(56vw, 300px) !important;
      min-height: 200px !important;
      border-radius: 0 !important;
      overflow: hidden !important; /* clip map tiles to container */
    }
  }