/* Design tokens: color palette, fonts, and the shared tab-bar height used across the site */
  :root{
    --bg:#0B0F17;
    --bg-panel:#101623;
    --bg-panel-2:#0D1220;
    --line:#1E2A3D;
    --line-soft:#161F2C;
    --text:#E9EDF3;
    --text-muted:#8C96A8;
    --text-dim:#5C6779;
    --rust:#C9622A;
    --rust-muted:#A96B42;
    --rust-soft:rgba(201,98,42,0.14);
    --rust-dim:rgba(201,98,42,0.45);
    --teal:#3AAFA3;
    --teal-soft:rgba(58,175,163,0.14);
    --teal-dim:rgba(58,175,163,0.45);
    --blue:#75AADB;
    --blue-soft:rgba(117,170,219,0.14);
    --blue-dim:rgba(117,170,219,0.45);
    --gold:#F2C811;
    --gold-soft:rgba(242,200,17,0.14);
    --gold-dim:rgba(242,200,17,0.45);
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;
    --tabbar-h:60px;
    }
  /* Light mode theme */
  [data-theme="light"]{
    --bg:#F8F9FA;
    --bg-panel:#FFFFFF;
    --bg-panel-2:#F5F6F8;
    --line:#E5E9F0;
    --line-soft:#ECEFF4;
    --text:#1A202C;
    --text-muted:#4A5568;
    --text-dim:#718096;
    --rust:#C9622A;
    --rust-muted:#D17E42;
    --rust-soft:rgba(201,98,42,0.08);
    --rust-dim:rgba(201,98,42,0.3);
    --teal:#3AAFA3;
    --teal-soft:rgba(58,175,163,0.08);
    --teal-dim:rgba(58,175,163,0.3);
    --blue:#5B8FD6;
    --blue-soft:rgba(91,143,214,0.08);
    --blue-dim:rgba(91,143,214,0.3);
    --gold:#D4A017;
    --gold-soft:rgba(212,160,23,0.08);
    --gold-dim:rgba(212,160,23,0.3);
    }
  /* Light mode UI component adjustments */
  [data-theme="light"] .site-bg{ opacity:.12; }
  [data-theme="light"] .contour-path{
    opacity:0.5 !important;
  }
  [data-theme="light"] .tabbar-inner{
    border-color:rgba(0,0,0,0.1);
    background:rgba(255,255,255,0.75);
    box-shadow:0 10px 22px rgba(0,0,0,0.1), inset 0 1px 0 rgba(0,0,0,0.05);
  }
  [data-theme="light"] .brand{
    color:rgba(0,0,0,1);
  }
  [data-theme="light"] .brand:hover{
    background:rgba(0,0,0,0.05);
    border-color:rgba(0,0,0,0.1);
  }
  [data-theme="light"] .tab{
    color:rgba(26,32,44,0.6);
    background:transparent;
    border:1px solid transparent;
  }
  [data-theme="light"] .tab:hover{
    background:rgba(0,0,0,0.08);
    border-color:rgba(0,0,0,0.12);
  }
  [data-theme="light"] .tab.active{
    background:rgba(0,0,0,0.1);
    border-color:rgba(0,0,0,0.15);
    box-shadow:inset 0 1px 0 rgba(0,0,0,0.05), 0 6px 14px rgba(0,0,0,0.1);
  }
  [data-theme="light"] .btn-primary{
    background:var(--text);
    color:var(--bg);
  }
  [data-theme="light"] .btn-primary:hover{
    background:var(--teal);
    color:#05100E;
  }
  [data-theme="light"] .btn-ghost{
    border-color:rgba(0,0,0,0.12);
    color:var(--text-muted);
    background:rgba(0,0,0,0.04);
  }
   [data-theme="light"] .btn-ghost:hover{
     border-color:rgba(201,98,42,0.5);
     color:var(--text);
     background:rgba(201,98,42,0.15);
   }
    [data-theme="light"] .meta-card{
     border-color:rgba(0,0,0,0.12);
     background:rgba(255,255,255,0.75);
     box-shadow:0 10px 24px rgba(0,0,0,0.08);
    }
  [data-theme="light"] .hero-tag{
    border-color:rgba(0,0,0,0.1);
    background:transparent;
  }
  [data-theme="light"] .tl2::before{
    background:rgba(0,0,0,0.25);
  }
  [data-theme="light"] .tl2-dot{
    border-color:rgba(0,0,0,0.85);
    box-shadow:none;
  }
  [data-theme="light"] .tl2-dot::before{
    background-color:rgba(255,255,255,0.98);
  }
  [data-theme="light"] .hero-desc{
    border-color:rgba(58,175,163,0.5);
  }
  [data-theme="light"] .sheet-head{
    border-color:rgba(0,0,0,0.1);
  }
  [data-theme="light"] .reveal-item{
    opacity:0;
    transform:translateY(12px);
  }
  [data-theme="light"] .exp-card{
    border-color:rgba(0,0,0,0.1);
    background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,249,250,0.88));
  }
  [data-theme="light"] .exp-card:hover{
    border-color:rgba(0,0,0,0.15);
    background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,249,250,0.95));
  }
  [data-theme="light"] .stack-card{
    border-color:rgba(0,0,0,0.08);
    background:rgba(255,255,255,0.6);
  }
  [data-theme="light"] .stack-card:hover{
    border-color:rgba(0,0,0,0.12);
    background:rgba(255,255,255,0.8);
  }
  [data-theme="light"] .project-card{
    border-color:rgba(0,0,0,0.1);
    background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(245,246,248,0.9));
  }
  [data-theme="light"] .project-card:hover{
    border-color:rgba(0,0,0,0.15);
    background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,246,248,0.95));
  }
  [data-theme="light"] #project-modal{
    box-shadow:none;
  }
  [data-theme="light"] .modal-nav{
    border-color:rgba(0,0,0,0.1);
    background:var(--bg);
  }
  [data-theme="light"] .modal-nav:hover{
    border-color:rgba(201,98,42,0.3);
    background:var(--bg);
  }
  [data-theme="light"] .modal-dots .dot{
    background:rgba(0,0,0,0.2);
  }
  [data-theme="light"] .modal-dots .dot.active{
    background:var(--text);
  }
  [data-theme="light"] .lightbox-backdrop{
    background:var(--bg);
  }
  [data-theme="light"] .lightbox-content{
    background:var(--bg);
    border-radius:8px;
    box-shadow:none;
  }
  [data-theme="light"] .lightbox-close{
    background:var(--bg);
    border-color:rgba(0,0,0,0.12);
    color:var(--text);
    box-shadow:none;
  }
  [data-theme="light"] .lightbox-close:hover{
    background:var(--bg);
    border-color:rgba(0,0,0,0.18);
  }
  [data-theme="light"] .lightbox-pdf-fallback{
    background:var(--bg);
    border-color:rgba(0,0,0,0.1);
  }
  [data-theme="light"] input,
  [data-theme="light"] textarea{
    background:rgba(255,255,255,0.7);
    border-color:rgba(0,0,0,0.1);
    color:var(--text);
  }
  [data-theme="light"] input:focus,
  [data-theme="light"] textarea:focus{
    border-color:var(--teal);
    background:rgba(255,255,255,0.95);
  }
  [data-theme="light"] .tetris-board{
    background:rgba(248,249,250,0.8);
    border-color:rgba(0,0,0,0.1);
  }
  [data-theme="light"] .tetris-stat{
    background:rgba(255,255,255,0.7);
    border-color:rgba(0,0,0,0.08);
  }
  [data-theme="light"] .tetris-btn{
    background:rgba(248,249,250,0.8);
    border-color:rgba(0,0,0,0.1);
    color:var(--text);
  }
  [data-theme="light"] .tetris-btn:hover{
    background:rgba(248,249,250,0.95);
    border-color:rgba(0,0,0,0.2);
  }
  [data-theme="light"] .card{
    border:1px solid rgba(0,0,0,0.06);
    background:rgba(255,255,255,0.75);
    box-shadow:0 10px 22px rgba(0,0,0,0.08);
  }
  [data-theme="light"] .card:hover{
    border-color:var(--accent, rgba(58,175,163,0.4));
    background:rgba(255,255,255,0.85);
    box-shadow:0 16px 28px -18px rgba(0,0,0,0.15), 0 0 20px var(--accent);
  }
  [data-theme="light"] .card.rust:hover{
    border-color:var(--accent, var(--rust-dim));
  }
  [data-theme="light"] .card.teal:hover{
    border-color:var(--accent, var(--teal-dim));
  }
  [data-theme="light"] .card p{
    color:var(--text-muted);
  }
  [data-theme="light"] .card-top{
    color:var(--text-dim);
  }
  [data-theme="light"] .card-link{
    color:var(--text);
  }
  [data-theme="light"] .card.rust .card-link{
    color:var(--accent, var(--rust));
  }
  [data-theme="light"] .card.rust .card-link:hover{
    color:var(--accent, var(--rust));
  }
  [data-theme="light"] .card.teal .card-link{
    color:var(--accent, var(--teal));
  }
  [data-theme="light"] .card.teal .card-link:hover{
    color:var(--accent, var(--teal));
  }
  [data-theme="light"] .group-title{
    border-color:rgba(0,0,0,0.1);
  }
  [data-theme="light"] .project-group{
    border-color:rgba(0,0,0,0.1);
  }
  [data-theme="light"] .pdf-expand{
    background:rgba(248,249,250,0.8);
    border-color:rgba(0,0,0,0.15);
    color:var(--text);
  }
  [data-theme="light"] .pdf-expand:hover{
    border-color:var(--rust-dim);
    background:rgba(248,249,250,0.95);
  }
  [data-theme="light"] .pdf-fallback{
    background:#fff;
    border-color:rgba(0,0,0,0.1);
  }
  [data-theme="light"] .pdf-fallback-link{
    color:var(--rust);
  }
  [data-theme="light"] .pdf-fallback-link:hover{
    color:var(--teal);
  }
  /* Project modal + photo lightbox: semi-transparent overlay in both modes so you can see the page underneath */
   [data-theme="light"] .modal-backdrop,
   [data-theme="light"] .lightbox-backdrop{
     background:rgba(255,255,255,0.10);
     backdrop-filter:blur(14px) saturate(1.1);
   }
  [data-theme="light"] .modal-panel,
  [data-theme="light"] .modal-slides,
  [data-theme="light"] .modal-body,
  [data-theme="light"] .modal-slide,
  [data-theme="light"] .lightbox-content,
  [data-theme="light"] .lightbox-caption,
  [data-theme="light"] .lightbox-img,
  [data-theme="light"] .lightbox-pdf,
  [data-theme="light"] .modal-close,
  [data-theme="light"] .lightbox-close,
  [data-theme="light"] .modal-nav,
  [data-theme="light"] .lightbox-nav{
    background:var(--bg) !important;
    border-color:rgba(0,0,0,0.10) !important;
  }
  [data-theme="light"] .modal-panel{
    background:rgba(255,255,255,0.75);
    border:1px solid rgba(0,0,0,0.10);
    box-shadow:none;
  }
  [data-theme="light"] .modal-slides{
    background:rgba(255,255,255,0.75);
    border-bottom:1px solid rgba(0,0,0,0.10);
  }
  [data-theme="light"] .modal-close,
  [data-theme="light"] .lightbox-close{
    color:var(--text);
    box-shadow:none;
  }
  [data-theme="light"] .modal-close:hover,
  [data-theme="light"] .lightbox-close:hover{
    color:var(--text);
    background:var(--bg) !important;
    border-color:rgba(0,0,0,0.18) !important;
  }
  [data-theme="light"] .lightbox-nav,
  [data-theme="light"] .modal-nav{
    color:var(--text);
  }
  [data-theme="light"] .lightbox-nav:hover,
  [data-theme="light"] .modal-nav:hover{
    background:var(--bg) !important;
    border-color:var(--rust-dim) !important;
  }
  [data-theme="light"] .modal-dots .dot{
    background:rgba(0,0,0,0.15);
  }
  [data-theme="light"] .modal-dots .dot.active{
    background:var(--text);
  }
  [data-theme="light"] #modal-eyebrow{
    color:var(--text-dim);
  }
  [data-theme="light"] #modal-title{
    color:var(--text);
  }
  [data-theme="light"] #modal-desc{
    color:var(--text-muted);
  }
  [data-theme="light"] #modal-repo{
    color:var(--text);
  }
  [data-theme="light"] #modal-repo:hover{
    border-color:var(--accent, var(--rust));
    color:var(--accent, var(--rust));
  }
  [data-theme="light"] .lightbox-caption{
    color:var(--text);
  }
  [data-theme="light"] .lightbox-img,
  [data-theme="light"] .lightbox-pdf{
    box-shadow:0 0 0 1px rgba(0,0,0,0.10);
  }
  [data-theme="light"] .meta-card,
  [data-theme="light"] .tetris-stat,
  [data-theme="light"] .tetris-btn{
    background:var(--bg-panel-2) !important;
    border-color:rgba(0,0,0,0.10) !important;
  }
  [data-theme="light"] .tetris-side,
  [data-theme="light"] .tetris-stat,
  [data-theme="light"] .tetris-btn,
  [data-theme="light"] #tetris-canvas{
    box-shadow:none;
  }
  [data-theme="light"] #tetris-canvas,
  [data-theme="light"] .tetris-stat,
  [data-theme="light"] .tetris-btn{
    border-color:rgba(0,0,0,0.12);
  }

  /* Reset + base page setup */
  *{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
  html,body{ height:100%; }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
    }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
    transition:background-color .3s ease, color .3s ease;
    }
  a{ color:inherit; text-decoration:none; }
  .wrap{ max-width:1180px; margin:0 auto; padding:0 32px; width:100%; }
  h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em; }
  ::selection{ background:var(--teal-soft); color:var(--text); }
  button{ font:inherit; background:none; border:none; cursor:pointer; color:inherit; }

  /* ==================================================
  GLOBAL CHROME (background, tab bar, footer)
  ================================================== */
  /* ---------- global site background ---------- */
  /* Faint animated topographic contour lines drifting behind everything, purely decorative */
  .site-bg{ position:fixed; inset:0; z-index:0; opacity:.5; pointer-events:none; }
  .site-bg svg{ width:100%; height:100%; }
  .contour-path{ fill:none; stroke-width:1; animation:drift 26s ease-in-out infinite; }
  @keyframes drift{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

  /* ---------- top tab bar ---------- */
  /* Fixed nav bar with the brand mark + slide tabs (About/Experience/Projects/etc.) */
  #tabbar{
    position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:100;
    width:min(980px, calc(100vw - 40px));
    height:calc(var(--tabbar-h) - 2px);
    display:flex; align-items:center;
    pointer-events:none;
    }
  .tabbar-inner{
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    gap:16px;
    padding:8px 16px;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:999px;
    background:rgba(18,23,31,0.52);
    box-shadow:0 10px 22px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(255,255,255,0.02);
    backdrop-filter:blur(14px) saturate(1.1);
    -webkit-backdrop-filter:blur(14px) saturate(1.1);
    pointer-events:auto;
    overflow:visible;
    }
  .brand,
  .tabs,
  .tab{
    display:flex;
    align-items:center;
    justify-content:center;
    }
  .brand{
    font-family:var(--font-mono);
    font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
    display:flex; align-items:center; justify-content:center;
    white-space:nowrap;
    flex-shrink:0;
    cursor:pointer;
    min-height:34px;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid transparent;
    background:transparent;
    transition:color .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease;
    color:rgba(233,237,243,0.9);
    }
  .brand:hover{
    background:rgba(255,255,255,0.03);
    border-color:rgba(255,255,255,0.06);
    color:var(--text);
    }
   .tabs{
    display:flex; align-items:center; justify-content:center; gap:4px;
    overflow-x:auto; overflow-y:visible;
    scrollbar-width:none;
    flex:0 0 auto;
    min-width:0;
    max-width:100%;
    }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{
    font-family:var(--font-mono);
    font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
    color:rgba(233,237,243,0.74);
    padding:8px 12px;
    white-space:nowrap;
    position:relative;
    border-radius:999px;
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:1px solid transparent;
    transition:color .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease;
    }
  .tab::before{
    content:attr(data-index);
    color:rgba(201,98,42,0.8);
    margin-right:7px;
    }
  .tab:hover{
    color:var(--text);
    background:rgba(255,255,255,0.03);
    border-color:rgba(255,255,255,0.06);
  }
  .tab:focus-visible{ outline:2px solid rgba(255,255,255,0.22); outline-offset:-2px; }
  .tab.active{
    color:var(--text);
    background:rgba(255,255,255,0.075);
    border-color:rgba(255,255,255,0.1);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 14px rgba(0,0,0,0.12);
  }
  .tab.active::after{
    content:none;
    }

  /* ---------- deck shell ---------- */
  /* Full-height sections that snap vertically like a one-page portfolio landing page */
  #deck{ position:relative; z-index:1; width:100vw; height:100vh; overflow-y:auto; scroll-snap-type:y proximity; scroll-behavior:smooth; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; }
  .slide{
    position:relative;
    min-height:100vh;
    height:auto;
    padding-top:var(--tabbar-h);
    overflow:visible;
    scrollbar-width:none;
    -ms-overflow-style:none;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    opacity:1; visibility:visible;
    transform:none;
    transition:opacity .35s ease;
    }
  .slide::-webkit-scrollbar{ display:none; }
  .slide.active{
    opacity:1; visibility:visible;
    transform:none;
    }
  .slide-inner{ padding:72px 0 96px; min-height:calc(100vh - var(--tabbar-h)); display:flex; flex-direction:column; justify-content:center; }
  .slide.dense .slide-inner{ justify-content:flex-start; padding-top:64px; }
  #s5 .slide-inner{ justify-content:center; padding-top:0; }
  #s5 .wrap{ margin-top:-6vh; }

  /* ---------- sheet section header ---------- */
  /* Numbered heading used at the top of every slide (e.g. "01 About") */
  .sheet-head{
    display:flex; align-items:baseline; gap:18px;
    margin-bottom:44px;
    border-bottom:1px solid var(--line-soft);
    padding-bottom:18px;
    flex-wrap:wrap;
    }
  .sheet-num{ font-family:var(--font-mono); font-size:13px; color:var(--rust); letter-spacing:.1em; white-space:nowrap; }
  .sheet-head h2{ font-size:clamp(24px,3vw,32px); }
  .sheet-sub{ margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--text-dim); white-space:nowrap; }

  /* ---------- staggered reveal ---------- */
  /* Utility class for scroll-triggered fade/slide-in of content within a slide */
  .reveal-item{
    opacity:0; transform:translateY(12px);
    transition:opacity .28s ease, transform .28s ease;
    }
  .reveal-item.in{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .reveal-item{ opacity:1; transform:none; }
    }

  /* ==================================================
  SLIDE 0 — COVER / HERO
  ================================================== */
  /* ---------- hero (cover slide) ---------- */
  /* Cover slide: name, rotating role labels, scrambled tagline, CTA buttons */
  .hero{ position:relative; overflow:visible; }
  .hero::before{
    content:"";
    position:absolute; inset:0; z-index:1;
    pointer-events:none;
    opacity:0;
    transition:opacity .4s ease;
    background:radial-gradient(480px circle at var(--mx,50%) var(--my,50%), rgba(58,175,163,0.10), transparent 70%);
    }
  .hero.glow-on::before{ opacity:1; }
  .hero-inner{ position:relative; z-index:2; }
  .hero-tag{
    display:inline-flex; align-items:center; gap:10px;
    padding:6px 12px; border:1px solid rgba(255,255,255,0.08); border-radius:999px;
    font-family:var(--font-mono); font-size:12px; color:var(--text-muted);
    margin-bottom:28px;
    background:transparent;
    }
  .hero-tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--rust); box-shadow:0 0 10px rgba(201,98,42,0.4); }
  .hero h1{ font-size:clamp(48px,7vw,88px); line-height:.98; color:var(--text); }
  .role-line{
    margin-top:22px; font-family:var(--font-mono);
    font-size:clamp(14px,1.6vw,18px); color:var(--text-muted);
    display:flex; flex-wrap:wrap;
    }
  .role-line .role{ position:relative; opacity:.5; transition:color .5s ease, opacity .5s ease; }
  .role-line .sep{ margin:0 12px; color:rgba(255,255,255,0.22); }
  .role-line .role.active{ color:var(--teal); opacity:1; }
  .hero-desc{
    max-width:620px; margin-top:32px;
    font-family:var(--font-display); font-weight:500;
    font-size:clamp(20px,2.6vw,28px); line-height:1.3;
    color:var(--text); letter-spacing:-0.01em;
    border-left:2px solid rgba(58,175,163,0.7); padding-left:20px;
    }
  /* Per-character styling used by the JS "scramble/decode" effect on the hero tagline */
  /* ---------- scramble text char styling ---------- */
  .hero-desc .schar{ color:var(--text-dim); transition:color .1s ease; }
  .hero-desc .schar.locked{ color:var(--text); }
  .hero-cta{ display:flex; gap:16px; margin-top:40px; flex-wrap:wrap; }
  .btn{
    font-family:var(--font-mono); font-size:13px; letter-spacing:.04em;
    padding:13px 22px; border-radius:999px;
    display:inline-flex; align-items:center; gap:10px;
    transition:all .2s ease; border:1px solid transparent;
    }
  .btn-primary{ background:var(--text); color:var(--bg); }
  .btn-primary:hover{ background:var(--teal); color:#05100E; }
  .btn-ghost{ border:1px solid rgba(255,255,255,0.08); color:var(--text-muted); background:rgba(11,15,23,0.24); }
  .btn-ghost:hover{ border-color:rgba(201,98,42,0.5); color:#fff; background:rgba(201,98,42,0.18); }
  .hero-stamp{
    margin-top:56px;
    font-family:var(--font-mono); font-size:11px; color:var(--text-dim);
    }
  .hero-stamp .coords{ color:var(--text-muted); }

  /* ==================================================
  SLIDE 1 — ABOUT
  ================================================== */
  /* Two-column layout: bio copy on the left, quick-fact cards on the right */
  /* ---------- about ---------- */
  .about-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:64px; }
  .about-copy p{ color:var(--text-muted); margin:0 0 20px; }
  .about-copy p:last-child{ margin-bottom:0; }
  .pull{
    font-family:var(--font-display); font-size:22px; color:var(--text);
    border-left:2px solid var(--teal); padding-left:20px; margin:28px 0;
    }
  .about-meta{ display:flex; flex-direction:column; gap:22px; }
  .meta-card{ border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:18px 20px; background:rgba(18,23,31,0.95); box-shadow:0 10px 22px rgba(0,0,0,0.35); }
  .meta-card .label{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim); margin-bottom:6px; }
  .meta-card .value{ font-size:15px; color:var(--text); }

  /* Extra interactive polish for the About slide: hover shifts on paragraphs, an underline
  sweep on the pulled quote, glow/spotlight on the meta cards, and a slow orbiting ring +
  floating dot in the corner for visual interest */
  /* ---------- animated about page ---------- */
  .about-grid{ position:relative; }
  .about-copy p{ transition:transform .35s ease, color .35s ease; }
  .about-copy p:hover{ transform:translateX(6px); }
  .about-copy .pull{
    position:relative;
    overflow:hidden;
    }
  .about-copy .pull::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:42px; height:2px;
    background:var(--teal);
    transform:scaleX(.35);
    transform-origin:left;
    transition:transform .45s ease;
    }
  .about-copy .pull:hover::after{ transform:scaleX(1); }

  .about-meta{
    position:relative;
    }
  .meta-card.location-card{ position:relative; padding-right:64px; }
  .years-badge{
    position:absolute; right:20px; top:50%; transform:translateY(-50%);
    display:flex; align-items:baseline; line-height:1;
    font-family:var(--font-display); font-weight:700; color:var(--teal);
    }
  .years-num{ font-size:34px; letter-spacing:-0.01em; }
  .years-plus{ font-size:19px; margin-left:1px; }
  @media (max-width:420px){
    .meta-card.location-card{ position:relative; padding-right:50px; }
    .years-badge{ position:absolute; right:12px; top:50%; transform:translateY(-50%); }
    .years-num{ font-size:26px; }
    .years-plus{ font-size:15px; }
    }
  .meta-card{
    position:relative;
    overflow:hidden;
    transition:transform .35s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease;
    transform:perspective(1000px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)) translateY(0);
    box-shadow:0 10px 22px rgba(0,0,0,0.35);
    }
  .meta-card::before{
    content:"";
    position:absolute;
    inset:-2px;
    background:radial-gradient(180px circle at var(--card-x,50%) var(--card-y,50%),
    rgba(58,175,163,.13), transparent 65%);
    opacity:0;
    transition:opacity .25s ease;
    pointer-events:none;
    }
  .meta-card::after{
    content:"";
    position:absolute;
    width:7px; height:7px;
    border-radius:50%;
    background:var(--teal);
    box-shadow:0 0 14px var(--teal-dim);
    right:14px; top:14px;
    opacity:0;
    transform:scale(.4);
    transition:opacity .25s ease, transform .25s ease;
    }
  .meta-card:hover{
    transform:perspective(1000px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)) translateY(-3px);
    border-color:rgba(58,175,163,0.18);
    background:rgba(18,23,31,0.95);
    box-shadow:0 16px 28px -18px rgba(0,0,0,0.15), 0 0 20px rgba(58,175,163,0.3);
    }
  .meta-card:hover::before{ opacity:1; }
  .meta-card:hover::after{ opacity:1; transform:scale(1); }
  .meta-card .label,
  .meta-card .value{ position:relative; z-index:1; }

  .about-grid::before{
    content:"";
    position:absolute;
    width:180px; height:180px;
    border:1px solid rgba(58,175,163,.12);
    border-radius:50%;
    right:-90px; top:-70px;
    animation:aboutOrbit 12s linear infinite;
    pointer-events:none;
    }
  .about-grid::after{
    content:"";
    position:absolute;
    width:8px; height:8px;
    border-radius:50%;
    background:var(--rust);
    right:0; top:20px;
    box-shadow:0 0 18px var(--rust-dim);
    animation:aboutFloat 4s ease-in-out infinite;
    pointer-events:none;
    }
  @keyframes aboutOrbit{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
    }
  @keyframes aboutFloat{
    0%,100%{ transform:translate(0,0); }
    50%{ transform:translate(-18px,12px); }
    }

  @media (prefers-reduced-motion: reduce){
    .about-grid::before,
    .about-grid::after{ animation:none; }
    .about-copy p,
    .meta-card{ transition:none; }
    }

  /* ==================================================
  SLIDE 2 — EXPERIENCE (timeline)
  ================================================== */
  /* Two-column timeline: education entries align right, work entries align left, with a
  vertical center line and a dot marking each entry (collapses to a single left-aligned
  column on narrow screens, see the media query below) */
  /* ---------- experience + education timeline (two-sided) ---------- */
  .tl2-head{ display:grid; grid-template-columns:1fr 40px 1fr; margin-bottom:28px; }
  .tl2-head span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); }
  .tl2-head .edu-label{ text-align:right; padding-right:28px; }
  .tl2-head .work-label{ grid-column:3; text-align:left; padding-left:28px; }
  .tl2{ position:relative; }
  .tl2::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; background:rgba(255,255,255,0.45); transform:translateX(-0.5px); }
  .tl2-row{ display:grid; grid-template-columns:1fr 40px 1fr; align-items:start; position:relative; }
  .tl2-row + .tl2-row{ margin-top:44px; }
  .tl2-dot-col{ grid-column:2; display:flex; justify-content:center; padding-top:6px; }
  .tl2-dot{
    width:38px; height:38px; border-radius:50%;
    border:1.5px solid rgba(255,255,255,0.98);
    box-shadow:0 0 14px rgba(255,255,255,0.10);
    position:relative; z-index:1;
    display:flex; align-items:center; justify-content:center;
  }
  .tl2-dot::before{
    content:""; width:16px; height:16px;
    background-color:rgba(0,0,0,0.85);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain; mask-size:contain;
  }
  .tl2-row.edu .tl2-dot{ background:var(--teal); }
  .tl2-row.edu .tl2-dot::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E");
  }
  .tl2-row.work .tl2-dot{ background:var(--rust); }
  .tl2-row.work .tl2-dot::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='7' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='7' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
  }
  .tl2-card{ display:flex; flex-direction:column; gap:4px; }
  .tl2-row.edu .tl2-card{ grid-column:1; align-items:flex-end; text-align:right; padding-right:28px; }
  .tl2-row.work .tl2-card{ grid-column:3; align-items:flex-start; text-align:left; padding-left:28px; }
  .tl2-date{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim); order:-1; margin-bottom:2px; }
  .tl2-row.current .tl2-date{ color:var(--teal); }
  .tl2-role{ font-family:var(--font-display); font-size:18px; }
  .tl2-org{ color:var(--text-muted); font-size:13.5px; }
  .tl2-org a:hover{ color:var(--teal); }
  .tl2-row.edu .tl2-org,
  .tl2-row.edu .tl2-org a{
    color:#4A8F82;
    font-weight:600;
  }
  .tl2-row.edu .tl2-org a:hover{
    color:#88ECDC;
    font-weight:600;
  }
  .tl2-row.work .tl2-org,
  .tl2-row.work .tl2-org a{
    color:#C2774E;
    font-weight:600;
  }
  .tl2-row.work .tl2-org a:hover{
    color:#F9954A;
    font-weight:600;
  }
  .tl2-dist{ color:var(--teal); font-size:12px; font-family:var(--font-mono); }
  .tl2-desc{ color:var(--text-muted); font-size:14px; max-width:440px; margin-top:6px; }
  .tl2-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
  .tl2-row.edu .tl2-tags{ justify-content:flex-end; }
  .tl2-tags .pill{ font-size:11px; padding:4px 9px; }
  .tl2-core{ margin-top:10px; font-family:var(--font-mono); font-size:12px; color:var(--text-dim); }
  .tl2-core a{ color:var(--text-muted); border-bottom:1px dotted var(--line); }
  .tl2-core a:hover{ color:var(--teal); border-color:var(--teal); }

  @media (max-width:860px){
    .tl2-head{ grid-template-columns:1fr; gap:6px; }
    .tl2-head .edu-label, .tl2-head .work-label{ grid-column:1; text-align:left; padding:0; }
    .tl2::before{ left:16px; }
    .tl2-row{ grid-template-columns:32px 1fr; column-gap:16px; }
    .tl2-dot-col{ grid-column:1; padding-top:0; }
    .tl2-dot{ width:32px; height:32px; border:1px solid rgba(255,255,255,0.96); box-shadow:0 0 12px rgba(255,255,255,0.08); }
    .tl2-dot::before{ width:14px; height:14px; }
    .tl2-row.work .tl2-card, .tl2-row.edu .tl2-card{ grid-column:2; align-items:flex-start; text-align:left; padding:0; }
    .tl2-row.edu .tl2-dot-col{ grid-column:1; justify-content:flex-start; padding-top:2px; order:1; }
    .tl2-row.edu .tl2-card{ order:2; }
    .tl2-row.edu .tl2-tags{ justify-content:flex-start; }
    [data-theme="light"] .tl2-dot{
      border-color:rgba(0,0,0,0.85);
      box-shadow:none;
    }
    [data-theme="light"] .tl2-dot::before{
      background-color:rgba(255,255,255,0.98);
    }
    }

  /* ==================================================
  SLIDE 3 — PROJECTS (cards, project modal, photo lightbox)
  ================================================== */
  /* Project cards grouped by tool (R Shiny, ArcGIS, Power BI, etc.); clicking a card opens
  the project modal below */
  /* ---------- projects ---------- */
  .project-group{ margin-bottom:56px; } .project-group:last-child{ margin-bottom:0; }
  .group-title{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
  .group-title .swatch{ width:10px; height:10px; border-radius:2px; }
  .group-title h3{ font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); font-weight:500; }
  .subgroup-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; align-items:stretch; }
  .subgroup{ display:flex; flex-direction:column; }
  .subgroup .card-grid{ flex:1; display:flex; }
  .subgroup .card-grid .card{ flex:1; }
  .card-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
  .card{
    border:1px solid rgba(255,255,255,0.06); border-radius:6px; padding:26px; background:rgba(18,23,31,0.95);
    box-shadow:0 10px 22px rgba(0,0,0,0.35);
    transition:border-color .2s ease, transform .2s ease, box-shadow .25s ease, background .2s ease;
    display:flex; flex-direction:column; gap:12px;
    }
  .card:hover{
    border-color:var(--accent, rgba(117,170,219,0.24));
    transform:translateY(-2px);
    background:rgba(18,23,31,0.95);
    box-shadow:0 16px 28px -18px rgba(0,0,0,0.15), 0 0 20px var(--accent);
  }
  .card.rust:hover{ border-color:var(--accent, var(--rust-dim)); }
  .card.teal:hover{ border-color:var(--accent, var(--teal-dim)); }
  .card-top{ display:flex; justify-content:space-between; align-items:flex-start; font-family:var(--font-mono); font-size:11px; color:var(--text-dim); }
  .card h4{ font-family:var(--font-display); font-size:19px; margin:0; }
  .card p{ color:var(--text-muted); font-size:14.5px; margin:0; flex-grow:1; }
  .card-link{ font-family:var(--font-mono); font-size:12.5px; color:var(--text); display:inline-flex; align-items:center; gap:6px; margin-top:4px; }
  .card.rust .card-link{ color:var(--accent, var(--rust)); }
  .card.rust .card-link:hover{ color:var(--accent, var(--rust)); }
  .card.teal .card-link{ color:var(--accent, var(--teal)); }
  .card.teal .card-link:hover{ color:var(--accent, var(--teal)); }
  .card-link{ padding:6px 12px; border-radius:4px; transition:background .2s ease, color .2s ease; }
  .card-link .arrow{ transition:transform .2s ease; }
  .card-link:hover .arrow{ transform:translateX(3px); }
  .more-note{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); margin-top:24px; }
  .card{ text-align:left; width:100%; font:inherit; text-decoration:none; color:inherit; }

  /* Shared modal chrome (backdrop, panel, close button) reused by both the project detail
  modal and the Stack Tetris game modal */
  /* ---------- project modal ---------- */
  #project-modal, #tetris-modal{
    position:fixed; inset:0; z-index:200;
    display:flex; align-items:center; justify-content:center;
    padding:32px;
    opacity:0; visibility:hidden;
    transition:opacity .25s ease, visibility 0s linear .25s;
    }
  #project-modal.open, #tetris-modal.open{
    opacity:1; visibility:visible;
    transition:opacity .25s ease, visibility 0s linear 0s;
    }
  .modal-backdrop{
    position:absolute; inset:0;
    background:rgba(5,7,12,0.78);
    backdrop-filter:blur(4px);
    }
  .modal-panel{
    position:relative; z-index:1;
    width:100%; max-width:760px; max-height:88vh;
    overflow-y:auto;
    background:rgba(18,23,31,0.95); border:1px solid var(--line);
    border-radius:6px;
    transform:translateY(14px); transition:transform .25s ease;
    }
  #project-modal.open .modal-panel, #tetris-modal.open .modal-panel{ transform:translateY(0); }
  #project-modal.open.settled .modal-panel{ transform:none; }
  .modal-close{
    position:absolute; top:14px; right:14px; z-index:2;
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-panel-2); border:1px solid var(--line);
    color:var(--text-muted); font-size:16px;
    transition:color .2s ease, border-color .2s ease;
    }
  .modal-close:hover{ color:var(--text); border-color:var(--rust-dim); }

  /* Swipeable photo/video/PDF carousel inside the project modal */
  .modal-slides{ position:relative; aspect-ratio:16/10; background:rgba(18,23,31,0.95); overflow:hidden; padding:18px; }
  .modal-slide-track{ display:flex; height:100%; transition:transform .4s ease; }
  .modal-slide{ flex:0 0 100%; height:100%; display:flex; align-items:center; justify-content:center; }
  .modal-slide img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; border-radius:3px; box-shadow:0 0 0 1px var(--line); cursor:zoom-in; }
  .modal-slide video{ max-width:100%; max-height:100%; width:auto; height:auto; display:block; border-radius:3px; box-shadow:0 0 0 1px var(--line); background:#000; }
  .modal-slide-pdf-wrap{ position:relative; width:100%; height:100%; }
  .modal-slide-pdf-wrap iframe{ width:100%; height:100%; border:0; border-radius:3px; box-shadow:0 0 0 1px var(--line); background:#fff; display:block; }
  .pdf-expand{
    position:absolute; bottom:12px; right:12px; z-index:1;
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(11,15,23,0.75); border:1px solid var(--line);
    color:var(--text); font-size:15px; cursor:zoom-in;
    transition:border-color .2s ease, background .2s ease;
    }
  .pdf-expand:hover{ border-color:var(--teal-dim); background:rgba(11,15,23,0.9); }
  .pdf-fallback{
    width:100%; height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:14px; text-align:center; padding:24px;
    background:#fff; border-radius:3px; box-shadow:0 0 0 1px var(--line);
    }
  .pdf-fallback p{ font-family:var(--font-mono); font-size:12.5px; color:#5C6779; max-width:260px; }
  .pdf-fallback-link{
    font-family:var(--font-mono); font-size:13px;
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 18px; border-radius:3px;
    border:1px solid var(--line-soft);
    color:var(--bg); background:var(--teal);
    }
  .modal-slide-empty{
    height:100%; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim);
    text-align:center; padding:24px;
    }
  .modal-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:36px; height:36px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(11,15,23,0.65); border:1px solid var(--line);
    color:var(--text); font-size:16px;
    transition:border-color .2s ease, background .2s ease;
    }
  .modal-nav:hover{ border-color:var(--teal-dim); background:rgba(11,15,23,0.85); }
  .modal-nav.prev{ left:14px; }
  .modal-nav.next{ right:14px; }
  .modal-dots{
    position:absolute; bottom:12px; left:0; right:0;
    display:flex; justify-content:center; gap:6px;
    }
  .modal-dot{ width:6px; height:6px; border-radius:50%; background:var(--line); transition:background .2s ease, transform .2s ease; }
  .modal-dot.active{ background:var(--teal); transform:scale(1.25); }
  .modal-photo-caption{
    color:var(--text-muted); font-size:14.5px; margin-bottom:22px;
    display:none;
    }
  .modal-photo-caption.visible{ display:block; }
  .modal-body{ padding:28px 30px 32px; }
  .modal-eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-bottom:10px; }
  .modal-body h3{ font-family:var(--font-display); font-size:24px; margin-bottom:12px; }
  .modal-body p{ color:var(--text-muted); font-size:14.5px; margin-bottom:22px; }
  .modal-repo-link{
    font-family:var(--font-mono); font-size:13px;
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 18px; border-radius:3px;
    border:1px solid var(--line);
    color:var(--text); transition:border-color .2s ease, color .2s ease, background .2s ease;
    }
  .modal-repo-link:hover{ border-color:var(--accent, var(--teal-dim)); color:var(--accent, var(--teal-dim)); }
  .modal-repo-link .arrow{ transition:transform .2s ease; }
  .modal-repo-link:hover .arrow{ transform:translate(2px,-2px); }


  /* Full-screen viewer for zooming into a single project image or PDF from the modal */
  /* ---------- photo lightbox ---------- */
  #img-lightbox{
    position:fixed; inset:0; z-index:300;
    display:flex; align-items:center; justify-content:center;
    padding:28px;
    opacity:0; visibility:hidden;
    transition:opacity .25s ease, visibility 0s linear .25s;
    }
  #img-lightbox.open{
    opacity:1; visibility:visible;
    transition:opacity .25s ease, visibility 0s linear 0s;
    }
  .lightbox-backdrop{ position:absolute; inset:0; background:rgba(5,7,12,0.94); }
  .lightbox-content{
    position:relative; z-index:1;
    display:flex; flex-direction:column; align-items:stretch;
    max-width:94vw; max-height:90vh;
    transform:scale(.97); transition:transform .25s ease;
    }
  #img-lightbox.open .lightbox-content{ transform:scale(1); }
  #img-lightbox.open.settled .lightbox-content{ transform:none; }
  .lightbox-img{
    display:block; width:auto; height:auto;
    max-width:100%; max-height:100%;
    min-height:0; flex:0 1 auto;
    object-fit:contain;
    border-radius:4px;
    box-shadow:0 0 0 1px var(--line);
    }
  .lightbox-pdf{
    display:none;
    align-self:center;
    width:min(760px,90vw); height:min(85vh,1000px);
    border:0; border-radius:4px;
    box-shadow:0 0 0 1px var(--line);
    background:#fff;
    -webkit-overflow-scrolling:touch;
    }
  .lightbox-pdf.visible{ display:block; }
  .lightbox-pdf-fallback{
    display:none;
    align-self:center;
    width:min(760px,90vw); height:min(85vh,1000px);
    }
  .lightbox-pdf-fallback.visible{ display:flex; }
  .lightbox-close{
    position:absolute; top:20px; right:24px; z-index:2;
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-panel-2); border:1px solid var(--line);
    color:var(--text-muted); font-size:18px;
    transition:color .2s ease, border-color .2s ease;
    }
  .lightbox-close:hover{ color:var(--text); border-color:var(--rust-dim); }
  .lightbox-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(11,15,23,0.65); border:1px solid var(--line);
    color:var(--text); font-size:18px;
    transition:border-color .2s ease, background .2s ease;
    }
  .lightbox-nav:hover{ border-color:var(--teal-dim); background:rgba(11,15,23,0.85); }
  .lightbox-nav.prev{ left:20px; }
  .lightbox-nav.next{ right:20px; }
  .lightbox-caption{
    width:100%; box-sizing:border-box; flex:0 0 auto;
    margin-top:10px;
    display:none;
    padding:10px 20px; text-align:center;
    font-family:var(--font-mono); font-size:13px;
    color:var(--text-muted);
    background:rgba(11,15,23,0.75);
    border:1px solid var(--line); border-radius:4px;
    }
  .lightbox-caption.visible{ display:block; }
  @media (max-width:560px){
    .lightbox-nav{ width:36px; height:36px; font-size:16px; }
    .lightbox-nav.prev{ left:8px; }
    .lightbox-nav.next{ right:8px; }
    .lightbox-close{ top:10px; right:10px; }
    .lightbox-caption{ font-size:12px; padding:8px 14px; }
    }

  /* ==================================================
  SLIDE 4 — RESEARCH (reuses .project-group / .card styles from Projects, above — no unique rules)
  ================================================== */

  /* ==================================================
  SLIDE 5 — STACK (tech stack grid, stack tetris cta + modal)
  ================================================== */
  /* Tech-stack grid, grouped by category (languages, databases, BI tools, geospatial) */
  /* ---------- stack ---------- */
  .stack-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
  .stack-cell{ background:rgba(18,23,31,0.92); padding:26px 24px; }
   [data-theme="light"] .stack-cell{ background:rgba(255,255,255,0.75); }
  .stack-cell .label{ font-family:var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--text); margin-bottom:16px; font-weight:700; }
  .pill-row{ display:flex; flex-wrap:wrap; gap:8px; }
  .pill{ font-family:var(--font-mono); font-size:12.5px; padding:6px 10px; border:1px solid var(--line); border-radius:3px; color:var(--text-muted); background:transparent; transition:border-color .2s ease, color .2s ease, background-color .2s ease, transform .15s ease; }
  .pill:hover{ transform:translateY(-3px) rotate(-2deg); }
  .stack-cell.lang .pill{ border-color:var(--teal-dim); color:var(--teal); background:var(--teal-soft); }
  .stack-cell.db .pill{ border-color:var(--rust-dim); color:var(--rust); background:var(--rust-soft); }
  .stack-cell.bi .pill{ border-color:var(--gold-dim); color:var(--gold); background:var(--gold-soft); }
  .stack-cell.geo .pill{ border-color:var(--blue-dim); color:var(--blue); background:var(--blue-soft); }
  .stack-cell .pill:hover{ filter:brightness(1.25); }
  /* Pills start invisible and "fall" into place with a bounce (see pillFall keyframes) */
  .stack-cell .pill{ opacity:0; }
  .stack-cell .pill.fall{ position:relative; z-index:2; animation-name:pillFall; animation-timing-function:cubic-bezier(.36,.66,.24,1); animation-fill-mode:both; }
  .pill.hop{ animation:pillHop .4s ease; }
  @keyframes pillFall{
    0%{ transform:translateY(calc(-1 * var(--dropY, 220px))) translateX(var(--drift,0px)) rotate(var(--rot,0deg)); opacity:0; }
    45%{ opacity:1; }
    78%{ transform:translateY(10px) translateX(calc(var(--drift,0px) * 0.12)) rotate(calc(var(--rot,0deg) * 0.12)); }
    89%{ transform:translateY(-4px) translateX(0) rotate(0deg); }
    100%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:1; }
    }
  @keyframes pillHop{
    0%{ transform:translateY(0) rotate(0deg); }
    40%{ transform:translateY(-10px) rotate(-4deg); }
    100%{ transform:translateY(0) rotate(0deg); }
    }
  /* Pills fly off toward the Tetris board when "Play Stack Tetris" is clicked */
  .stack-cell .pill.sucking{
    position:relative; z-index:6;
    animation:pillSuck .78s cubic-bezier(.42,0,.58,1) forwards;
    animation-delay:var(--sdelay,0s);
    pointer-events:none;
    will-change:transform, opacity;
    }
  @keyframes pillSuck{
    0%{ transform:translate(0,0) scale(1) rotate(0deg); opacity:1; }
    16%{ transform:translate(calc(var(--sx,0px) * 0.02), calc(var(--sy,0px) * 0.02)) scale(1.06) rotate(calc(var(--srot,320deg) * 0.03)); opacity:1; }
    45%{ transform:translate(calc(var(--sx,0px) * 0.22), calc(var(--sy,0px) * 0.22)) scale(.82) rotate(calc(var(--srot,320deg) * 0.3)); opacity:1; }
    78%{ transform:translate(calc(var(--sx,0px) * 0.68), calc(var(--sy,0px) * 0.68)) scale(.4) rotate(calc(var(--srot,320deg) * 0.72)); opacity:.85; }
    100%{ transform:translate(var(--sx,0px),var(--sy,0px)) scale(.1) rotate(var(--srot,320deg)); opacity:0; }
    }


  /* Mini Tetris game built from the stack pills — canvas board, on-screen controls, and stats */
  /* ---------- stack tetris cta + modal ---------- */
  .tetris-cta{ margin-top:44px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
  .tetris-cta-btn{ position:relative; }
  .tetris-cta-btn.suck-pulse{ animation:tetrisBtnPulse .68s ease; }
  @keyframes tetrisBtnPulse{
    0%{ transform:scale(1); box-shadow:0 0 0 0 var(--teal-dim); }
    35%{ transform:scale(1.07); box-shadow:0 0 0 10px transparent; }
    100%{ transform:scale(1); box-shadow:0 0 0 0 transparent; }
    }
  .tetris-cta-hint{ font-family:var(--font-mono); font-size:13.5px; color:var(--text-dim); }
  .tetris-modal-panel{ max-width:740px; }
  .tetris-modal-panel .modal-eyebrow{ margin-top:6px; }
  .tetris-modal-panel .modal-body{ padding:16px 30px 20px; }
  .tetris-modal-panel .modal-body h3{ margin-bottom:6px; }
  .tetris-intro{ color:var(--text-muted); font-size:14.5px; margin:0 auto 10px; max-width:680px; text-align:center; }
  @media (max-width:420px){
    .tetris-intro-break{ display:none; }
    }
  .tetris-wrap{ display:flex; gap:36px; flex-wrap:wrap; align-items:flex-start; justify-content:center; }
  .tetris-side{ order:1; min-width:220px; flex:1; display:flex; flex-direction:column; gap:10px; max-width:260px; }
  .tetris-board-col{ order:2; display:flex; flex-direction:column; align-items:center; gap:12px; flex-shrink:0; }
  #tetris-canvas{
    background:var(--bg-panel-2); border:1px solid var(--line); border-radius:5px;
    box-shadow:0 18px 36px -18px rgba(0,0,0,.6); touch-action:none; display:block;
    }
  .tetris-controls{ display:grid; grid-template-columns:repeat(4,44px); gap:8px; justify-content:center; }
  .tetris-btn{
    width:44px; height:44px; border-radius:5px; border:1px solid var(--line);
    background:var(--bg-panel); color:var(--text); font-family:var(--font-mono); font-size:16px;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .2s ease, color .2s ease, background .2s ease, transform .1s ease;
    user-select:none;
    }
  .tetris-btn:hover{ border-color:var(--teal-dim); color:var(--teal); }
  .tetris-btn:active{ transform:scale(.92); }
  .tetris-btn.wide{ grid-column:1 / span 4; width:100%; height:40px; font-size:11.5px; letter-spacing:.1em; }
  .tetris-stat{
    display:flex; justify-content:space-between; align-items:baseline;
    border:1px solid var(--line); border-radius:4px; padding:11px 16px; background:var(--bg-panel);
    }
  .tetris-stat .label{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim); }
  .tetris-stat .value{ font-family:var(--font-display); font-size:16px; color:var(--text); text-align:right; }
  .modal-body p.tetris-hint{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim); line-height:1.6; margin-bottom:0; }
  .tetris-gameover{
    font-family:var(--font-mono); font-size:12px; color:var(--rust);
    border:1px solid var(--rust-dim); border-radius:4px; padding:10px 14px; background:var(--rust-soft);
    }
  @media (max-width:760px){
    .tetris-wrap{ justify-content:center; }
    .tetris-side{ width:100%; max-width:340px; }
    }

  /* ==================================================
  SLIDE 6 — CONNECT
  ================================================== */
  /* Closing slide: email/GitHub/LinkedIn links over an animated radar background */
  /* ---------- connect ---------- */
   .connect{ overflow:hidden; }
   .connect .slide-inner{ text-align:center; position:relative; z-index:1; }
    .connect .sheet-head{ justify-content:center; border:none; }
    #s6 .sheet-head{ display:none; }
   .connect-copy{ color:var(--text-muted); max-width:480px; margin:0 auto 28px; }
   .connect-links{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:32px; }
   .connect-or{ color:var(--text-dim); font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:20px; position:relative; display:inline-block; text-align:center; }
   .connect-or::before,
   .connect-or::after{ content:""; position:absolute; top:50%; width:28px; height:1px; background:var(--line); }
   .connect-or::before{ right:calc(100% + 12px); }
   .connect-or::after{ left:calc(100% + 12px); }
       .connect-form{ max-width:520px; margin:0 auto 28px; text-align:center; padding:28px; border:1px solid var(--line); border-radius:8px; background:rgba(18,23,31,0.95); box-shadow:0 10px 22px rgba(0,0,0,0.35); }
      .form-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:16px; }
     .form-field{ margin-bottom:16px; text-align:center; }
     .form-field input::placeholder,
     .form-field textarea::placeholder{ color:var(--text-dim); opacity:.7; }
      .form-field input,
      .form-field textarea{
        width:100%; padding:14px 14px; box-sizing:border-box;
        background:var(--bg); border:1px solid var(--line); border-radius:4px;
        color:var(--text); font-family:var(--font-body); font-size:14px; text-align:left;
        outline:none; transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
      }
     .form-field input:focus,
     .form-field textarea:focus{ border-color:var(--teal); background:rgba(18,23,31,0.95); box-shadow:0 0 0 3px var(--teal-soft); }
    .form-field textarea{ resize:vertical; min-height:100px; }
    .connect-form .btn-primary{ display:inline-block; margin:4px auto 0; }
   .form-success{ color:var(--teal); font-family:var(--font-mono); font-size:13px; margin-top:12px; text-align:center; }
    [data-theme="light"] .connect-form{ background:rgba(255,255,255,0.75); border-color:rgba(0,0,0,0.08); box-shadow:0 10px 22px rgba(0,0,0,0.06); }
   [data-theme="light"] .form-field input,
   [data-theme="light"] .form-field textarea{ background:rgba(255,255,255,0.7); border-color:rgba(0,0,0,0.1); color:var(--text); }
    [data-theme="light"] .form-field input::placeholder,
    [data-theme="light"] .form-field textarea::placeholder{ color:var(--text-dim); opacity:.7; }
     [data-theme="light"] .form-field input:focus,
     [data-theme="light"] .form-field textarea:focus{ border-color:var(--teal); background:rgba(255,255,255,0.75); box-shadow:0 0 0 3px rgba(58,175,163,0.15); }
    @media (max-width:600px){ .form-row{ grid-template-columns:1fr; } .connect-form{ padding:20px; } }

   /* Pulsing radar rings + sweeping beam + blipping dots, purely decorative */
  /* ---------- connect: radar background ---------- */
  .radar-bg{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    }
  .radar-ring{
    position:absolute; top:50%; left:50%;
    border:1px solid var(--teal-dim); border-radius:50%;
    transform:translate(-50%,-50%);
    }
  .radar-ring.r1{ width:320px; height:320px; opacity:.22; }
  .radar-ring.r2{ width:540px; height:540px; opacity:.15; }
  .radar-ring.r3{ width:780px; height:780px; opacity:.09; }
  .radar-sweep{
    position:absolute; top:50%; left:50%;
    width:780px; height:780px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:conic-gradient(from 0deg, rgba(58,175,163,0.13), transparent 28%);
    -webkit-mask-image:radial-gradient(circle, transparent 30%, black 45%, transparent 92%);
    mask-image:radial-gradient(circle, transparent 30%, black 45%, transparent 92%);
    animation:radarSpin 9s linear infinite;
    }
  @keyframes radarSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
  .radar-dot{
    position:absolute; top:var(--y); left:var(--x);
    width:var(--s,10px); height:var(--s,10px); border-radius:50%;
    background:var(--teal);
    box-shadow:0 0 16px var(--teal-dim);
    animation:clockPulse 2.6s ease-in-out infinite;
    animation-delay:var(--delay,0s);
    }
  @media (max-width:700px){
    .radar-ring.r1{ width:220px; height:220px; }
    .radar-ring.r2{ width:380px; height:380px; }
    .radar-ring.r3{ width:540px; height:540px; }
    .radar-sweep{ width:540px; height:540px; }
    }
  @media (prefers-reduced-motion: reduce){
    .radar-sweep{ animation:none; }
    .radar-dot{ animation:none; }
    }

   /* Live Christchurch local-time readout, updated via JS */
  .connect-clock{
    margin-top:26px; font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim);
    display:inline-flex; align-items:center; gap:8px;
    }
  .connect-clock .dot{
    width:6px; height:6px; border-radius:50%; background:var(--teal);
    box-shadow:0 0 8px var(--teal-dim); animation:clockPulse 2.4s ease-in-out infinite;
    }
  @keyframes clockPulse{ 0%,100%{ opacity:.3; transform:scale(.75); } 50%{ opacity:1; transform:scale(1.1); } }

  /* Animated paper plane that flies off-screen when the "Email me" link is clicked */
  /* ---------- paper plane send animation ---------- */
  .paper-plane{
    position:fixed; z-index:500; width:26px; height:26px;
    color:var(--teal); pointer-events:none; opacity:1;
    transform:translate(0,0) rotate(-6deg);
    }
  .paper-plane svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 0 6px var(--teal-dim)); }
  .paper-plane.launch{ animation:planeFly 1.6s cubic-bezier(.4,.55,.3,1) forwards; }
  @keyframes planeFly{
    0%{ transform:translate(0,0) rotate(-6deg) scale(1); opacity:1; }
    22%{ transform:translate(48px,-32px) rotate(3deg) scale(1.05); opacity:1; }
    100%{ transform:translate(135vw,-75vh) rotate(22deg) scale(.4); opacity:0; }
    }
  @media (prefers-reduced-motion: reduce){
    .connect-clock .dot{ animation:none; }
    }

  /* ==================================================
  SITE FOOTER
  ================================================== */
  /* Small copyright line, faded in once the user has scrolled past the hero */
  #site-footer{
    position:fixed; left:0; right:0; bottom:14px; z-index:50;
    text-align:center;
    font-family:var(--font-mono); font-size:11px; color:var(--text-dim);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .4s ease, visibility 0s linear .4s;
    }
  #site-footer.visible{
    opacity:1; visibility:visible;
    transition:opacity .4s ease, visibility 0s linear 0s;
    }

  /* ==================================================
  GLOBAL OVERRIDES (focus states, responsive breakpoints)
  ================================================== */
  /* Keyboard-focus outline, kept consistent across all interactive elements */
  a:focus-visible, button:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

  /* ---------- theme toggle button ---------- */
  #theme-toggle{
    position:fixed; bottom:32px; right:32px; z-index:99;
    width:50px; height:50px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(11,15,23,0.8);
    backdrop-filter:blur(0.5rem);
    -webkit-backdrop-filter:blur(0.5rem);
    border:1px solid rgba(255,255,255,0.1);
    cursor:pointer;
    transition:all .3s ease;
    color:var(--teal);
    box-shadow:0 20px 25px -5px rgba(0,0,0,0.3), 0 8px 10px -6px rgba(0,0,0,0.2);
    outline:none;
    -webkit-tap-highlight-color:transparent;
    }
  [data-theme="light"] #theme-toggle{
    background:rgba(255,255,255,0.85);
    border-color:rgba(0,0,0,0.08);
    color:var(--rust);
    box-shadow:0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.06);
    }
  #theme-toggle:hover{
    transform:scale(1.15);
    }
  [data-theme="light"] #theme-toggle:hover{
    transform:scale(1.15);
    }
  #theme-toggle:active{
    transform:scale(1.05);
    }
  .theme-icon-sun,
  .theme-icon-moon{
    width:24px; height:24px;
    stroke-width:2;
    position:absolute;
    transition:opacity .3s ease, transform .3s ease;
    }
  .theme-icon-sun{
    opacity:0;
    transform:rotate(-180deg) scale(0);
    }
  .theme-icon-moon{
    opacity:1;
    transform:rotate(0deg) scale(1);
    }
  [data-theme="light"] .theme-icon-sun{
    opacity:1;
    transform:rotate(0deg) scale(1);
    }
  [data-theme="light"] .theme-icon-moon{
    opacity:0;
    transform:rotate(180deg) scale(0);
    }
  @media (max-width:560px){
    #theme-toggle{
      width:40px; height:40px; bottom:20px; right:20px;
    }
    .theme-icon-sun,
    .theme-icon-moon{
      width:18px; height:18px;
    }
  }

  /* Tablet breakpoint: stack columns, drop to 2-up grids, normal top bar */
  @media (max-width:860px){
    .about-grid{ grid-template-columns:1fr; gap:40px; }
    .stack-grid{ grid-template-columns:repeat(2,1fr); }
    .card-grid{ grid-template-columns:1fr; }
    .subgroup-grid{ grid-template-columns:1fr; gap:32px; }
    #tabbar{ top:0; left:0; transform:none; width:100%; height:auto; }
    .tabbar-inner{ width:100%; min-height:48px; padding:8px 12px; gap:4px; border-radius:0; background:rgba(18,23,31,0.95); border:none; border-bottom:1px solid rgba(255,255,255,0.06); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; display:flex; align-items:center; justify-content:center; }
    .brand{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:8px 12px; min-height:34px; display:flex; align-items:center; justify-content:center; }
    .tabs{ flex:1; gap:4px; justify-content:flex-start; display:flex; align-items:center; overflow-x:auto; overflow-y:visible; }
    .tab{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:8px 12px; min-height:34px; background:transparent; border:1px solid transparent; display:flex; align-items:center; justify-content:center; transition:color .2s ease, background .2s ease, border-color .2s ease; }
    .tab:hover{ background:rgba(255,255,255,0.03); border-color:rgba(255,255,255,0.06); }
    [data-theme="light"] .tabbar-inner{ background:rgba(255,255,255,0.95); border-bottom:1px solid rgba(0,0,0,0.1); box-shadow:none; }
    [data-theme="light"] .tab{ color:rgba(0,0,0,0.74); }
    [data-theme="light"] .tab:hover{ background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.08); }
    [data-theme="light"] .tab.active{ background:rgba(0,0,0,0.06); border-color:rgba(0,0,0,0.1); box-shadow:none; }
    .hero{ padding-top:56px; }
    #s5 .slide-inner{ justify-content:flex-start; padding-top:64px; }
    #s5 .wrap{ margin-top:0; }
    }
  /* Phone breakpoint: tighter side padding, single-column stack grid, normal top bar */
  @media (max-width:560px){
    #tabbar{ top:0; left:0; transform:none; width:100%; height:auto; }
    .tabbar-inner{ width:100%; min-height:48px; padding:8px 12px; gap:4px; border-radius:0; background:rgba(18,23,31,0.95); border:none; border-bottom:1px solid rgba(255,255,255,0.06); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; display:flex; align-items:center; justify-content:center; }
    .brand{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:8px 12px; min-height:34px; display:flex; align-items:center; justify-content:center; }
    .tabs{ flex:1; gap:4px; justify-content:flex-start; display:flex; align-items:center; overflow-x:auto; overflow-y:visible; }
    .tab{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:8px 12px; min-height:34px; background:transparent; border:1px solid transparent; display:flex; align-items:center; justify-content:center; transition:color .2s ease, background .2s ease, border-color .2s ease; }
    .tab:hover{ background:rgba(255,255,255,0.03); border-color:rgba(255,255,255,0.06); }
    .tab.active{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.09); box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 5px 12px rgba(0,0,0,0.12); }
    [data-theme="light"] .tabbar-inner{ background:rgba(255,255,255,0.95); border-bottom:1px solid rgba(0,0,0,0.1); box-shadow:none; }
    [data-theme="light"] .tab{ color:rgba(0,0,0,0.74); }
    [data-theme="light"] .tab:hover{ background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.08); }
    [data-theme="light"] .tab.active{ background:rgba(0,0,0,0.06); border-color:rgba(0,0,0,0.1); box-shadow:none; }
    .hero{ padding-top:56px; }
    .wrap{ padding:0 20px; }
    .stack-grid{ grid-template-columns:1fr; }
    .sheet-sub{ display:none; }
    }