:root{
    --ink:#0a0a0a;
    --ink-2:#1F1638;
    --ink-3:#291E48;
    --paper:#F6EFDF;
    --paper-dim:#C9BFAE;
    --marigold:#FF9F1C;
    --magenta:#E8447A;
    --teal:#2FD3C6;
    --line: rgba(246,239,223,0.14);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ink);
    color:var(--paper);
    font-family:'Space Grotesk', sans-serif;
    overflow-x:hidden;
  }
  ::selection{background:var(--marigold); color:var(--ink);}

  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:600;
    line-height:1.05;
  }
  .mono{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.06em;
  }
  a{color:inherit;}

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    html{scroll-behavior:auto;}
  }

  /* ---------- Track rail (signature element) ---------- */
  .rail{
    position:fixed;
    left:0; top:0; bottom:0;
    width:64px;
    z-index:50;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:28px;
    border-right:1px solid var(--line);
    background:rgba(21,15,38,0.6);
    backdrop-filter:blur(6px);
  }

  /* ---------- Top navigation ---------- */
  .top-nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:300;
    display:flex;
    justify-content:center;
    padding:18px 24px;
    pointer-events:none;
  }
  .top-nav-inner{
    pointer-events:auto;
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(10,10,10,0.55);
    backdrop-filter:blur(10px);
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .top-nav-inner::-webkit-scrollbar{display:none;}
  .top-nav-logo{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:15px;
    padding:8px 14px 8px 16px;
    white-space:nowrap;
    color:var(--paper);
    border-right:1px solid var(--line);
    margin-right:4px;
  }
  .top-nav-link{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:0.04em;
    white-space:nowrap;
    color:var(--paper-dim);
    text-decoration:none;
    padding:9px 16px;
    border-radius:999px;
    border:1px solid transparent;
    transition:all .25s ease;
  }
  .top-nav-link:hover{color:var(--paper);}
  .top-nav-link.active{
    color:var(--paper);
    background:var(--ink-2);
    border-color:var(--marigold);
  }
  @media (max-width:600px){
    .top-nav{padding:14px 14px;}
    .top-nav-logo{display:none;}
    .top-nav-link{padding:8px 12px; font-size:10px;}
  }
  .rail-track{
    position:relative;
    width:3px;
    height:24px;
    background:var(--paper-dim);
    opacity:0.35;
    border-radius:2px;
    cursor:pointer;
    transition:all .35s ease;
  }
  .rail-track.active{
    opacity:1;
    height:40px;
    background:var(--marigold);
    box-shadow:0 0 12px var(--marigold);
  }
  .rail-num{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    font-size:10px;
    white-space:nowrap;
    opacity:0;
    transition:opacity .25s ease;
    pointer-events:none;
  }
  .rail-track:hover .rail-num, .rail-track.active .rail-num{opacity:0.85;}
  @media (max-width:820px){ .rail{display:none;} }

  .wrap{
    max-width:1100px;
    margin:0 auto;
    padding:0 32px;
  }
  @media (max-width:820px){ .wrap{padding:0 22px;} body{padding-left:0;} }
  body{padding-left:64px;}
  @media (max-width:820px){ body{padding-left:0;} }

  /* ---------- Hero ---------- */
  .hero{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    padding:120px 0 80px;
  }
  .hero::before{
    content:"";
    position:absolute;
    top:-10%; right:-10%;
    width:60%; height:70%;
    background:radial-gradient(circle at center, rgba(255,159,28,0.16), transparent 65%);
    pointer-events:none;
  }
  .hero::after{
    content:"";
    position:absolute;
    bottom:-15%; left:-5%;
    width:50%; height:60%;
    background:radial-gradient(circle at center, rgba(47,211,198,0.12), transparent 65%);
    pointer-events:none;
  }
  .hero-photo{
    position:absolute;
    top:130px;
    right:0;
    width:280px;
    aspect-ratio:3/4;
    border-radius:20px;
    overflow:hidden;
    transform:rotate(3deg);
    border:1px solid var(--line);
    box-shadow:0 30px 70px rgba(0,0,0,0.5), 0 0 60px rgba(255,159,28,0.12);
    z-index:1;
  }
  .hero-photo img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    filter:saturate(1.05);
  }
  .hero-photo::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 55%, rgba(10,10,10,0.55));
    pointer-events:none;
  }
  @media (max-width:900px){
    .hero-photo{
      position:relative;
      top:auto; right:auto;
      width:220px;
      margin:36px auto 0;
      transform:rotate(2deg);
    }
  }
  .kicker{
    font-size:12px;
    text-transform:uppercase;
    color:var(--teal);
    margin-bottom:22px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .kicker .bars{display:flex; gap:3px; align-items:flex-end; height:12px;}
  .kicker .bars span{width:3px; background:var(--teal); animation:eq 1.1s ease-in-out infinite;}
  .kicker .bars span:nth-child(1){height:40%; animation-delay:0s;}
  .kicker .bars span:nth-child(2){height:100%; animation-delay:.15s;}
  .kicker .bars span:nth-child(3){height:65%; animation-delay:.3s;}
  .kicker .bars span:nth-child(4){height:80%; animation-delay:.45s;}
  @keyframes eq{0%,100%{transform:scaleY(0.4);}50%{transform:scaleY(1);}}

  .hero h1{
    font-size:clamp(48px, 9vw, 108px);
    letter-spacing:-0.02em;
    max-width:900px;
    position:relative;
    z-index:1;
  }
  .hero h1 em{
    font-style:italic;
    background:linear-gradient(90deg, var(--marigold), var(--magenta));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero-role{
    margin-top:26px;
    font-size:clamp(16px, 2.4vw, 22px);
    color:var(--paper-dim);
    max-width:640px;
    line-height:1.55;
  }
  .hero-tags{
    margin-top:34px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
  }
  .tag{
    font-size:12px;
    padding:8px 14px;
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--paper-dim);
  }
  .tag b{color:var(--paper); font-weight:500;}
  .hero-meta{
    margin-top:56px;
    display:flex;
    gap:36px;
    flex-wrap:wrap;
    font-size:13px;
    color:var(--paper-dim);
  }
  .hero-meta a{text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px;}
  .hero-meta a:hover{border-color:var(--marigold); color:var(--marigold);}

  .scroll-cue{
    position:absolute;
    bottom:36px; left:32px;
    font-size:11px;
    color:var(--paper-dim);
    display:flex;
    align-items:center;
    gap:8px;
  }
  .scroll-cue .line{width:28px; height:1px; background:var(--paper-dim);}

  /* ---------- "There's more" transition + constellation ---------- */
  .reveal-transition{
    padding:110px 0;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    border-top:1px solid var(--line);
  }
  .reveal-eyebrow{
    font-size:12px;
    color:var(--marigold);
    margin-bottom:16px;
  }
  .reveal-title{
    font-size:clamp(28px,4.5vw,44px);
    max-width:640px;
    margin-bottom:14px;
  }
  .reveal-sub{
    font-size:14px;
    color:var(--paper-dim);
    max-width:480px;
    margin-bottom:8px;
  }
  .constellation-wrap{
    position:relative;
    width:100%;
    max-width:640px;
    height:280px;
    margin:44px 0 8px;
    cursor:grab;
    touch-action:none;
  }
  .constellation-wrap.dragging{cursor:grabbing;}
  .constellation-wrap canvas{display:block; width:100%; height:100%;}
  .constellation-label{
    position:absolute;
    top:0; left:0;
    transform:translate(-50%,-50%);
    font-size:12px;
    font-family:'IBM Plex Mono',monospace;
    letter-spacing:0.05em;
    padding:6px 12px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(21,15,38,0.55);
    backdrop-filter:blur(3px);
    white-space:nowrap;
    pointer-events:auto;
    cursor:pointer;
    transition:border-color .25s ease, color .25s ease;
  }
  .constellation-label:hover{border-color:var(--paper); color:var(--paper);}
  .constellation-hint{
    font-size:11px;
    color:var(--paper-dim);
    margin-top:4px;
  }
  .constellation-hint b{color:var(--marigold); font-weight:500;}
  @media (max-width:700px){
    .constellation-wrap{height:220px;}
  }

  /* ---------- Sections ---------- */
  section.track{
    padding:140px 0 100px;
    border-top:1px solid var(--line);
    position:relative;
  }
  .track-head{
    display:flex;
    align-items:baseline;
    gap:18px;
    margin-bottom:56px;
    flex-wrap:wrap;
  }
  .track-num{
    font-size:13px;
    color:var(--accent, var(--marigold));
  }
  .track-title{
    font-size:clamp(34px, 5.5vw, 58px);
  }
  .track-sub{
    font-size:14px;
    color:var(--paper-dim);
    max-width:520px;
    margin-left:auto;
  }
  @media (max-width:700px){ .track-sub{margin-left:0;} }

  /* CODE */
  #code{--accent:var(--teal);}

  /* ---------- Center-spine experience timeline ---------- */
  .exp-timeline{
    position:relative;
    margin-top:20px;
  }
  .exp-spine{
    position:absolute;
    left:50%;
    top:0; bottom:0;
    width:2px;
    background:var(--line);
    transform:translateX(-50%);
  }
  .exp-spine-progress{
    position:absolute;
    left:50%;
    top:0;
    width:2px;
    height:0%;
    background:linear-gradient(var(--teal), var(--marigold));
    box-shadow:0 0 14px rgba(47,211,198,0.7);
    transform:translateX(-50%);
  }
  .exp-row{
    display:grid;
    grid-template-columns:1fr 96px 1fr;
    align-items:center;
    column-gap:28px;
    padding:64px 0;
    position:relative;
  }
  .exp-row:first-child{padding-top:16px;}
  .exp-row:last-child{padding-bottom:16px;}

  .exp-spine-mark{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
  }
  .exp-num-outline{
    font-family:'Fraunces',serif;
    font-weight:700;
    font-size:56px;
    color:transparent;
    -webkit-text-stroke:1.5px var(--line);
    text-stroke:1.5px var(--line);
    line-height:1;
    transition:all .5s ease;
  }
  .exp-row.passed .exp-num-outline{
    -webkit-text-stroke:1.5px var(--teal);
    text-stroke:1.5px var(--teal);
    color:rgba(47,211,198,0.10);
  }
  .exp-dot{
    width:13px; height:13px;
    border-radius:50%;
    border:2px solid var(--line);
    background:var(--ink);
    transition:all .4s ease;
  }
  .exp-row.passed .exp-dot{
    background:var(--teal);
    border-color:var(--teal);
    box-shadow:0 0 10px var(--teal);
  }

  .exp-card{
    background:var(--ink-2);
    border:1px solid var(--line);
    border-radius:16px;
    padding:28px;
    opacity:0.45;
    transform:translateY(10px);
    transition:opacity .5s ease, transform .5s ease, border-color .5s ease;
  }
  .exp-row.passed .exp-card{
    opacity:1;
    transform:translateY(0);
    border-color:rgba(47,211,198,0.35);
  }
  .exp-card-empty{}

  .exp-logo{
    width:52px; height:52px;
    border-radius:50%;
    background:var(--ink-3);
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Fraunces',serif;
    font-size:19px;
    font-weight:600;
    color:var(--teal);
    margin-bottom:16px;
  }
  .exp-role{font-size:19px; font-family:'Fraunces',serif; font-weight:500;}
  .exp-org{color:var(--teal); font-size:13px; margin-top:4px;}
  .exp-date{
    display:inline-block;
    font-size:11px;
    color:var(--paper-dim);
    white-space:nowrap;
    border:1px solid var(--line);
    border-radius:999px;
    padding:5px 12px;
    margin-top:12px;
  }
  .exp-bullets{
    list-style:none;
    margin-top:14px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .exp-bullets li{
    font-size:13px;
    color:var(--paper-dim);
    line-height:1.6;
    padding-left:18px;
    position:relative;
  }
  .exp-bullets li::before{
    content:"—";
    position:absolute;
    left:0;
    color:var(--teal);
  }

  @media (max-width:760px){
    .exp-row{grid-template-columns:44px 1fr; column-gap:18px;}
    .exp-spine{left:22px;}
    .exp-spine-progress{left:22px;}
    .exp-spine-mark{flex-direction:row; gap:8px; justify-content:flex-start;}
    .exp-num-outline{font-size:26px;}
    .exp-row .exp-card-empty{display:none;}
    .exp-row .exp-card{grid-column:2;}
    .exp-row .exp-spine-mark{grid-column:1; grid-row:1;}
  }

  .skills-grid{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:50px;
  }
  .skill-pill{
    font-size:12px;
    padding:9px 16px;
    background:var(--ink-2);
    border:1px solid var(--line);
    border-radius:8px;
    color:var(--paper-dim);
  }

  /* ---------- Skills globe (drag to rotate) ---------- */
  .globe-section{
    margin-top:60px;
    display:grid;
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
  .globe-eyebrow{
    font-size:12px;
    color:var(--teal);
    margin-bottom:6px;
  }
  .globe-title{
    font-size:clamp(20px,3vw,26px);
    font-family:'Fraunces',serif;
    font-weight:500;
    margin-bottom:6px;
  }
  .globe-hint{
    font-size:12px;
    color:var(--paper-dim);
    margin-bottom:28px;
  }
  .globe-hint b{color:var(--marigold); font-weight:500;}
  .globe-wrap{
    width:100%;
    max-width:480px;
    aspect-ratio:1/1;
    perspective:1000px;
    touch-action:none;
    cursor:grab;
    position:relative;
  }
  .globe-wrap.dragging{cursor:grabbing;}
  .globe-wrap::before{
    content:"";
    position:absolute;
    inset:6%;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, rgba(47,211,198,0.10), transparent 60%);
    border:1px solid var(--line);
    pointer-events:none;
  }
  .globe{
    width:100%;
    height:100%;
    position:relative;
    transform-style:preserve-3d;
  }
  .globe-tag{
    position:absolute;
    top:50%; left:50%;
    padding:7px 13px;
    font-size:12px;
    white-space:nowrap;
    background:var(--ink-2);
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--paper);
    transform-style:preserve-3d;
    user-select:none;
    pointer-events:none;
  }

  .proj-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:2px;
    margin-top:60px;
    background:var(--line);
  }
  @media (max-width:700px){ .proj-grid{grid-template-columns:1fr;} }
  .proj-card{
    background:var(--ink);
    padding:32px;
  }
  .proj-name{font-size:20px; font-family:'Fraunces',serif; font-weight:500; margin-bottom:10px;}
  .proj-name .stat{color:var(--teal); font-size:12px; font-family:'IBM Plex Mono',monospace; display:block; margin-top:6px;}
  .proj-desc{font-size:14px; color:var(--paper-dim); line-height:1.6;}

  .blog-strip{
    margin-top:60px;
    padding:24px 28px;
    border:1px solid var(--line);
    border-radius:14px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
  }
  .blog-strip a{
    font-size:13px;
    color:var(--teal);
    text-decoration:none;
    border-bottom:1px solid var(--teal);
  }

  /* RAGA */
  #raga{--accent:var(--magenta);}
  .raga-feature{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    align-items:center;
  }
  @media (max-width:800px){ .raga-feature{grid-template-columns:1fr;} }
  .raga-badge{
    display:inline-block;
    font-size:12px;
    color:var(--magenta);
    border:1px solid rgba(232,68,122,0.4);
    padding:6px 12px;
    border-radius:999px;
    margin-bottom:20px;
  }
  .raga-feature h3{font-size:clamp(26px,4vw,36px); margin-bottom:16px;}
  .raga-feature p{color:var(--paper-dim); font-size:15px; line-height:1.7; margin-bottom:14px;}

  .raga-video-wrap{
    margin:8px 0 56px;
  }
  .raga-video-eyebrow{
    font-size:12px;
    color:var(--marigold);
    margin-bottom:14px;
  }
  .raga-video{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    border-radius:16px;
    overflow:hidden;
    border:1px solid var(--line);
    background:var(--ink-2);
  }
  .raga-video iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
  }
  .raga-video-fallback{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:14px;
    font-size:12px;
    color:var(--paper-dim);
    text-decoration:none;
    border-bottom:1px solid var(--line);
    padding-bottom:2px;
  }
  .raga-video-fallback:hover{color:var(--marigold); border-color:var(--marigold);}

  .raga-award{
    margin-top:56px;
    border-radius:16px;
    overflow:hidden;
    border:1px solid var(--line);
    position:relative;
  }
  .raga-award img{width:100%; max-height:480px; object-fit:cover; display:block;}
  .raga-award figcaption{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:18px 22px;
    font-size:12px;
    color:var(--paper);
    background:linear-gradient(0deg, rgba(10,10,10,0.85), transparent);
  }

  .raga-photos{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:50px;
  }
  .raga-photo{
    position:relative;
    aspect-ratio:4/5;
    border-radius:14px;
    overflow:hidden;
    border:1px solid var(--line);
  }
  .raga-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  .raga-photo figcaption{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:14px 16px;
    font-size:11px;
    color:var(--paper);
    background:linear-gradient(0deg, rgba(10,10,10,0.85), transparent);
  }
  @media (max-width:560px){ .raga-photos{grid-template-columns:1fr;} }
  .team-line{font-size:13px; color:var(--paper-dim); margin-top:20px;}
  .team-line b{color:var(--paper);}
  .influences{
    display:flex;
    gap:14px;
    margin-top:26px;
    flex-wrap:wrap;
  }
  .influence-chip{
    font-size:12px;
    padding:10px 16px;
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--paper-dim);
  }
  .vinyl{
    aspect-ratio:1;
    position:relative;
  }
  .vinyl canvas{display:block; width:100%; height:100%;}
  .media-links{
    margin-top:24px;
    display:flex;
    gap:14px;
    flex-wrap:wrap;
  }
  .pill-btn{
    font-size:12px;
    text-decoration:none;
    padding:10px 18px;
    border-radius:999px;
    border:1px solid var(--magenta);
    color:var(--paper);
    transition:background .25s ease;
  }
  .pill-btn:hover{background:rgba(232,68,122,0.15);}

  /* STAGE */
  #stage{--accent:var(--marigold);}
  .stage-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2px;
    background:var(--line);
    margin-top:10px;
  }
  @media (max-width:700px){ .stage-grid{grid-template-columns:1fr;} }
  .stage-card{
    background:var(--ink);
    padding:34px 32px;
  }
  .stage-card h3{font-size:20px; font-weight:500; margin-bottom:12px;}
  .stage-card p{font-size:14px; color:var(--paper-dim); line-height:1.7;}
  .photo-slot{
    aspect-ratio:4/3;
    border-radius:12px;
    border:1px dashed var(--line);
    background:var(--ink-2);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--paper-dim);
    font-size:12px;
    text-align:center;
    padding:20px;
    margin-top:18px;
  }
  .stage-photo{
    aspect-ratio:4/3;
    border-radius:12px;
    overflow:hidden;
    border:1px solid var(--line);
    margin-top:18px;
    position:relative;
  }
  .stage-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  .theme-gallery{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:18px;
  }
  .theme-gallery .stage-photo{margin-top:0;}
  .photo-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:50px;
  }
  @media (max-width:700px){ .photo-row{grid-template-columns:1fr 1fr;} }

  /* COURT */
  #court{--accent:var(--teal);}
  .court-wrap{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:60px;
    align-items:center;
  }
  @media (max-width:800px){ .court-wrap{grid-template-columns:1fr;} }
  .court-wrap p{color:var(--paper-dim); font-size:15px; line-height:1.75; margin-bottom:14px;}
  .stat-block{
    display:flex;
    gap:40px;
    margin-top:30px;
    flex-wrap:wrap;
  }
  .stat-num{font-family:'Fraunces',serif; font-size:38px; color:var(--teal);}
  .stat-label{font-size:12px; color:var(--paper-dim); margin-top:4px;}
  .court-visual{
    aspect-ratio:1/1;
    border-radius:16px;
    border:1px solid var(--line);
    background:var(--ink-2);
    position:relative;
    overflow:hidden;
    cursor:grab;
    touch-action:none;
  }
  .court-visual.dragging{cursor:grabbing;}
  .court-visual canvas{display:block; width:100%; height:100%;}
  .court-hint{
    text-align:center;
    font-size:11px;
    color:var(--paper-dim);
    margin-top:14px;
  }
  .court-hint b{color:var(--teal); font-weight:500;}

  .court-photo{
    margin-top:56px;
    border-radius:16px;
    overflow:hidden;
    border:1px solid var(--line);
    position:relative;
  }
  .court-photo img{width:100%; max-height:420px; object-fit:cover; display:block;}
  .court-photo figcaption{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:18px 22px;
    font-size:12px;
    color:var(--paper);
    background:linear-gradient(0deg, rgba(10,10,10,0.85), transparent);
  }

  /* CONTACT */
  #contact{
    padding:140px 0 100px;
    border-top:1px solid var(--line);
    text-align:center;
  }
  #contact h2{
    font-size:clamp(36px,7vw,72px);
    max-width:800px;
    margin:0 auto 28px;
  }
  #contact p{color:var(--paper-dim); font-size:15px; max-width:480px; margin:0 auto 40px;}
  .contact-links{
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
  }
  .contact-links a{
    font-size:13px;
    text-decoration:none;
    padding:14px 26px;
    border-radius:999px;
    border:1px solid var(--line);
    transition:all .25s ease;
  }
  .contact-links a:hover{
    border-color:var(--marigold);
    color:var(--marigold);
    transform:translateY(-2px);
  }
  footer{
    text-align:center;
    padding:40px 0 60px;
    font-size:11px;
    color:var(--paper-dim);
  }

  .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .reveal.in{
    opacity:1;
    transform:translateY(0);
  }

  /* ---------- Fire intro + verse ---------- */
  body.intro-active{overflow:hidden; height:100vh;}
  #intro{
    position:fixed;
    inset:0;
    z-index:9999;
    background:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    transition:opacity 1s ease;
  }
  #intro.fade-out{opacity:0; pointer-events:none;}
  #intro canvas{position:absolute; inset:0; width:100%; height:100%;}
  .intro-verse{
    position:relative;
    z-index:2;
    text-align:center;
    padding:0 28px;
    max-width:760px;
    opacity:0;
    transform:translateY(16px);
    transition:opacity 1.4s ease, transform 1.4s ease;
  }
  .intro-verse.show{opacity:1; transform:translateY(0);}
  .intro-quote{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:500;
    font-size:clamp(22px,4.2vw,40px);
    color:var(--paper);
    line-height:1.45;
    text-shadow:0 0 30px rgba(255,159,28,0.25);
  }
  .intro-ref{
    margin-top:20px;
    font-size:12px;
    letter-spacing:0.14em;
    color:var(--marigold);
  }
  .intro-skip{
    position:absolute;
    bottom:30px;
    right:30px;
    z-index:3;
    background:none;
    border:1px solid var(--line);
    color:var(--paper-dim);
    font-size:11px;
    padding:10px 18px;
    border-radius:999px;
    cursor:pointer;
    font-family:'IBM Plex Mono',monospace;
    transition:all .25s ease;
  }
  .intro-skip:hover{border-color:var(--marigold); color:var(--marigold);}

  /* ---------- Galaxy starfield backdrop ---------- */
  #starfield{
    position:fixed;
    inset:0;
    z-index:-1;
    display:block;
  }

  /* Soft ambient nebula glow that drifts toward the cursor */
  .spotlight{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:radial-gradient(
      700px circle at var(--x,50%) var(--y,50%),
      rgba(255,159,28,0.08),
      rgba(232,68,122,0.05) 32%,
      transparent 65%
    );
  }

  /* ---------- Comet cursor canvas ---------- */
  #comet{
    position:fixed;
    inset:0;
    z-index:200;
    pointer-events:none;
  }
  @media (hover:none), (pointer:coarse){
    #starfield{opacity:0.5;}
    #comet, .spotlight{display:none;}
  }
  body{cursor:auto;}
  @media (hover:hover) and (pointer:fine){
    a, button, .rail-track, .pill-btn, .tag, .skill-pill{cursor:none;}
    body{cursor:none;}
  }

  /* ---------- Magnetic elements ---------- */
  .magnetic{
    display:inline-block;
    transition:transform .18s ease-out;
    will-change:transform;
  }