:root{
    --paper:#FDFDFD; --ink:#17181C; --accent:#B4371F;
    --sans:ui-monospace, 'SF Mono', 'JetBrains Mono', 'IBM Plex Mono', Menlo, Consolas, monospace;
    --header-h: 3.25rem;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; scroll-behavior:smooth; overflow-x:hidden; overscroll-behavior:none; }

  /* 4 long vertical lines across the home hero */
  .home-lines{ position:fixed; top:0; left:0; right:0; bottom:0; z-index:1; pointer-events:none; }
  .home-lines .hl{
    position:absolute;
    top:0; bottom:0;
    width:1px; height:100%;
    background:#dfe2e5;
  }
  .home-lines .hl-1{ left:3%; }    /* near left end */
  .home-lines .hl-2{ left:33%; }   /* between */
  .home-lines .hl-3{ left:67%; }   /* between */
  .home-lines .hl-4{ left:97%; }   /* near right end */
  .home-lines .hlh{
    position:absolute;
    left:0; right:0;
    width:100%; height:1px;
    background:#dfe2e5;
  }
  .home-lines .hlh-1{ top:33%; }
  .home-lines .hlh-2{ top:67%; }

  /* ===== Intro grid-build (loader -> home) =====
     The grid lines draw out from center while the plus marks fly out from
     the center to their own intersections, then the page content reveals.
     Each plus carries its center offset in --dx / --dy (see index.html).    */
  /* Intro (JS / Web Animations API): the two horizontal lines collapse into a
     single line at center, spin a full 360°, then split apart to their rows —
     nothing fades away, the spinning line becomes the grid. The vertical lines
     and plus marks fly out from center meanwhile. Keep those hidden until the
     fly-out drives them (fallback; JS overrides). */
  body.grid-build .home-lines .hl,
  body.grid-build .home-lines .plus{ opacity:0; }

  /* paragraph in the left-middle grid cell (between 3%-33% x, 33%-67% y) */
  .home-blurb{
    position:fixed;
    left:3%; top:27.5%;
    width:30%; height:34%;
    box-sizing:border-box;
    padding:1.4rem 1.6rem;
    margin:0;
    display:flex; align-items:center;
    font-family:var(--sans);
    font-weight:300;
    font-size:0.82rem;
    line-height:1.7;
    color:var(--ink);
    z-index:2;
  }
  .home-blurb .blurb-text{ display:block; width:100%; }
  .home-blurb u{ white-space:nowrap; }   /* keep multi-word phrases on one line */
  /* in-blurb links ("Interested in collaborating?" -> contact, "UI/UX design" -> ui-ux)
     inherit the surrounding type so only the <u> underline marks them */
  .home-blurb a.collab-link,
  .home-blurb a.blurb-link{ color:inherit; text-decoration:none; cursor:pointer; }
  /* big letter C in row 1, column 3 (67%-97% x, 0-33% y) */
  .cell-c{
    position:fixed;
    left:67%; top:12%;
    width:30%; height:33%;
    display:flex; align-items:center; justify-content:flex-start;
    padding-left:1.6rem;
    box-sizing:border-box;
    font-family:var(--sans);
    font-weight:300;
    font-size:3.8vh;
    line-height:1;
    color:var(--ink);
    user-select:none;
    white-space:nowrap;
    z-index:2;
  }
  /* the "ONTACT" is collapsed (only "C" shows); it expands + fades in when
     hovering the collaborating line -> C becomes CONTACT */
  .cell-c-rest{
    overflow:hidden;
    max-width:0;
    opacity:0;
    white-space:nowrap;
    transition:max-width 0.4s ease, opacity 0.4s ease;
  }
  .home-blurb-3:has(u:hover) ~ .cell-c .cell-c-rest{
    max-width:6em; opacity:1;
  }
  /* letter A -> ABOUT ME on hover, row 3 column 1 (bottom-left) */
  .cell-a{
    position:fixed;
    left:34.5%; top:61%;
    display:flex; align-items:center;
    font-family:var(--sans);
    font-weight:300;
    font-size:3.8vh;
    line-height:1;
    color:var(--ink);
    white-space:nowrap;
    user-select:none;
    z-index:2;
  }
  .cell-a-rest{
    overflow:hidden;
    max-width:0;
    opacity:0;
    white-space:nowrap;
    transition:max-width 0.4s ease, opacity 0.4s ease;
  }
  .home-blurb:has(.u-vc:hover) ~ .cell-a .cell-a-rest{ max-width:8em; opacity:1; }
  /* letter A -> AI/ML Engineering on hover, row 2 column 2 (center) */
  .cell-ai{
    position:fixed;
    left:34.5%; top:35%;
    display:flex; align-items:center;
    font-family:var(--sans);
    font-weight:300;
    font-size:3.8vh;
    line-height:1;
    color:var(--ink);
    white-space:nowrap;
    user-select:none;
    z-index:2;
  }
  .cell-ai-rest{
    overflow:hidden;
    max-width:0;
    opacity:0;
    white-space:nowrap;
    transition:max-width 0.4s ease, opacity 0.4s ease;
  }
  .home-blurb:has(.u-ai:hover) ~ .cell-ai .cell-ai-rest{ max-width:14em; opacity:1; }
  /* letter J -> JEWELRY DESIGN on hover, row 3 column 3 (bottom-right) */
  .cell-j{
    position:fixed;
    left:68.5%; top:94%;
    display:flex; align-items:center;
    font-family:var(--sans);
    font-weight:300;
    font-size:3.8vh;
    line-height:1;
    color:var(--ink);
    white-space:nowrap;
    user-select:none;
    z-index:2;
  }
  .cell-j-rest{
    overflow:hidden;
    max-width:0;
    opacity:0;
    white-space:nowrap;
    transition:max-width 0.4s ease, opacity 0.4s ease;
  }
  .home-blurb:has(.u-jw:hover) ~ .cell-j .cell-j-rest{ max-width:12em; opacity:1; }
  /* letter D -> DATA SCIENCE on hover, row 2 column 3 (right-aligned) */
  .cell-d{
    position:fixed;
    left:67%; top:46%;
    width:30.5%; height:34%;
    box-sizing:border-box;
    padding-right:1.6rem;
    display:flex; align-items:center; justify-content:flex-end;
    font-family:var(--sans);
    font-weight:300;
    font-size:3.8vh;
    line-height:1;
    color:var(--ink);
    white-space:nowrap;
    user-select:none;
    z-index:2;
  }
  .cell-d-rest{
    overflow:hidden;
    max-width:0;
    opacity:0;
    white-space:nowrap;
    transition:max-width 0.4s ease, opacity 0.4s ease;
  }
  .home-blurb:has(.u-ds:hover) ~ .cell-d .cell-d-rest{ max-width:12em; opacity:1; }
  /* letter S -> SOFTWARE DEVELOPMENT on hover, row 1 column 1 (right-aligned) */
  .cell-s{
    position:fixed;
    left:3%; top:12%;
    width:30%; height:33%;
    box-sizing:border-box;
    padding-right:1.6rem;
    display:flex; align-items:center; justify-content:flex-end;
    font-family:var(--sans);
    font-weight:300;
    font-size:3.8vh;
    line-height:1;
    color:var(--ink);
    white-space:nowrap;
    user-select:none;
    z-index:2;
  }
  .cell-s-rest{
    overflow:hidden;
    max-width:0;
    opacity:0;
    white-space:nowrap;
    transition:max-width 0.4s ease, opacity 0.4s ease;
  }
  .home-blurb:has(.u-sd:hover) ~ .cell-s .cell-s-rest{ max-width:18em; opacity:1; }
  /* the letter cells are display-only (triggered by hovering the text), so
     their boxes must not intercept hover on the paragraphs beneath them */
  .cell-c, .cell-a, .cell-ai, .cell-j, .cell-d, .cell-s, .cell-u{ pointer-events:none; }
  /* stacked U's -> UI (top) / UX DESIGN (bottom) on hover, row 3 column 1 */
  .cell-u{
    position:fixed;
    left:4.5%; top:90%;
    display:flex; flex-direction:column;
    font-family:var(--sans);
    font-weight:300;
    font-size:3.8vh;
    line-height:1.1;
    color:var(--ink);
    user-select:none;
    z-index:2;
  }
  .cell-u-line{ display:flex; align-items:center; white-space:nowrap; }
  .cell-u-rest{
    overflow:hidden;
    max-width:0;
    opacity:0;
    white-space:nowrap;
    transition:max-width 0.4s ease, opacity 0.4s ease;
  }
  .home-blurb:has(.u-ux:hover) ~ .cell-u .cell-u-rest{ max-width:12em; opacity:1; }
  .home-blurb .ref{
    font-size:0.6em;
    vertical-align:super;
    line-height:0;
    margin-left:1px;
    color:var(--ink);
  }
  /* row 3, column 2 cell (33%-67% x, 67%-100% y) */
  .home-blurb-2{
    left:33%; top:75%;
    width:34%; height:25%;
    justify-content:flex-end;
    text-align:right;
  }
  /* column 3, row 3 cell (67%-97% x, 67%-100% y) */
  .home-blurb-3{
    left:67%; top:67%;
    width:30%; height:33%;
    align-items:flex-start;
    justify-content:flex-end;
    text-align:right;
  }
  /* emphasized "+" at each line intersection */
  .home-lines .plus{
    position:absolute;
    transform:translate(calc(-50% + 0.5px), calc(-50% + 0.5px));
    width:9px; height:9px;
    z-index:2;
    color:#b3b9bf;   /* arm color (via currentColor) — animated on intro */
  }
  .home-lines .plus::before,
  .home-lines .plus::after{
    content:"";
    position:absolute;
    background:currentColor;
  }
  .home-lines .plus::before{ left:0; right:0; top:50%; height:1.5px; transform:translateY(-50%); }
  .home-lines .plus::after{ top:0; bottom:0; left:50%; width:1.5px; transform:translateX(-50%); }
  body{
    background:var(--paper); color:var(--ink);
    font-family:var(--sans);
    font-weight:300;
    padding-top:var(--header-h);
  }
  .home-cluster{
    display:flex; flex-direction:row; align-items:center;
    gap:0.5rem;
    position:absolute;
    left:50%;
    margin-left:-2rem;   /* half the 4rem logo -> true horizontal center */
    margin-top:-0.35rem;
  }
  .header-logo{
    display:block;
    width:4rem; height:auto;
    margin-left:0;
  }
  .v-logo{
    position:relative;
    width:0.9rem; height:1.03rem;
    flex-shrink:0;
    margin-left:-0.7rem;
  }
  .v-logo .menu-label{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%) scale(0.7);
    font-family:var(--sans);
    font-weight:300;
    font-size:0.7rem;
    line-height:0.85;
    letter-spacing:0.04em;
    text-transform:uppercase;
    text-align:center;
    color:var(--ink);
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.25s ease, transform 0.25s ease;
  }
  .v-logo .menu-label span{
    display:block;
  }
  .v-logo:hover .menu-label{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
  }
  .v-logo .menu-lines{
    position:absolute;
    left:50%; top:50%;
    width:0.6rem;
    transform:translate(-50%, -50%) scale(0.7);
    display:flex;
    flex-direction:column;
    gap:6px;
    opacity:0;
    pointer-events:none;
    animation:v-swipe-lines 3.5s ease-in-out infinite;
  }
  .v-logo .menu-lines span{
    display:block;
    height:1.3px;
    background:#000;
  }
  .v-logo:hover .menu-lines{
    animation:none;
    opacity:0;
  }
  body.menu-open .v-logo .menu-lines{
    animation:none;
    opacity:0;
  }
  @keyframes v-swipe-lines{
    0%, 35%{ opacity:0; transform:translate(-50%, -50%) scale(0.7); }
    50%, 85%{ opacity:1; transform:translate(-50%, -50%) scale(1); }
    100%{ opacity:0; transform:translate(-50%, -50%) scale(0.7); }
  }
  .v-divider{
    position:fixed;
    top:0;
    width:1px;
    background:#fff;
    mix-blend-mode:difference;
    z-index:9996;
    pointer-events:none;
  }
  .v-logo .px{
    position:absolute;
    width:calc(100% / 7);
    height:calc(100% / 8);
    background:#000;
    transition:transform 0.35s cubic-bezier(.4,0,.2,1);
    animation:v-swipe-px 3.5s ease-in-out infinite;
  }
  .v-logo:hover .px{
    animation:none;
  }
  body.menu-open .v-logo .px{
    animation:none;
  }
  @keyframes v-swipe-px{
    0%, 35%{ transform:translate(0, 0) scale(1); }
    50%, 85%{ transform:translate(var(--dx), var(--dy)) scale(0.2); }
    100%{ transform:translate(0, 0) scale(1); }
  }
  .v-logo-close{
    position:absolute;
    left:50%; top:50%;
    width:5rem; height:2.4rem;
    transform:translate(-50%, -50%) scale(0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.25s ease, transform 0.25s ease;
  }
  .v-logo-close .close-text{
    font-family:var(--sans);
    font-weight:500;
    font-size:0.7rem;
    letter-spacing:0.01em;
    text-transform:uppercase;
    color:var(--ink);
    white-space:nowrap;
  }
  body.menu-open .v-logo .px{ opacity:0; }
  body.menu-open .v-logo .menu-label{ opacity:0 !important; }
  body.menu-open .v-logo-close{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
  }

  body.menu-open, body.menu-open *{
    cursor:url("assets/icons/mac-cursor.svg") 2 2, auto;
  }
  body.on-black-divider .cursor-box{
    display:none;
  }
  body.menu-open .cursor-box{
    display:none;
  }
  body.menu-open .menu-image-box:hover,
  body.menu-open .menu-image-box:hover *,
  body.menu-open .menu-scatter:hover,
  body.menu-open .menu-scatter:hover *,
  body.menu-open .v-logo:hover,
  body.menu-open .v-logo:hover *{
    cursor:url("assets/icons/mac-hand-cursor.png") 13 8, pointer;
  }
  .menu-overlay{
    position:fixed;
    inset:0;
    z-index:9990;
    background:rgba(23,24,28,0.4);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.3s ease, visibility 0.3s ease;
  }
  .menu-overlay.is-open{
    opacity:1;
    visibility:visible;
  }
  .menu-panel{
    width:100%;
    height:100%;
    background:var(--paper);
    border-radius:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    transform:scale(0.9);
    transition:transform 0.3s ease;
  }
  .menu-panel img{
    width:100%;
    height:100%;
    object-fit:contain;
    filter:contrast(1.08) saturate(1.15);
    transform:scale(1.8);
  }
  .menu-scatter{
    position:absolute;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.4rem;
  }
  .menu-scatter img{
    object-fit:contain;
    border-radius:0.15rem;
    box-shadow:0 8px 32px rgba(0,0,0,0.25);
    transition:transform 0.2s ease;
    transform-origin:center bottom;
  }
  .menu-scatter:hover img{
    transform:scale(1.15) !important;
    border:7px solid rgba(255,255,255,0.35);
    box-shadow:0 8px 32px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.5);
  }
  .menu-scatter-label{
    font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
    font-weight:700;
    font-size:0.58rem;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,0.6);
    white-space:nowrap;
    padding:0.22rem 0.55rem;
    border-radius:0.2rem;
    background:transparent;
    transition:background 0.2s ease;
  }
  .menu-money:hover .menu-scatter-label,
  .menu-cat1:hover .menu-scatter-label,
  .menu-cat2:hover .menu-scatter-label,
  .menu-dog:hover .menu-scatter-label{ background:#2A5FDA; }
  .menu-money{
    left:27%; top:28%;
  }
  .menu-money img{
    width:5.5rem; height:5.5rem;
    transform:none;
    filter:none;
  }
  .menu-cat1{
    right:39%; top:28%;
  }
  .menu-cat1 img{
    width:5.5rem; height:5.5rem;
    transform:none;
    filter:none;
  }
  .menu-cat2{
    left:44%; bottom:36%;
    transform:translateX(-50%);
  }
  .menu-cat2 img{
    width:auto; height:auto;
    max-width:8rem;
    max-height:8rem;
    transform:none;
    filter:none;
  }
  .menu-dog{
    right:26%; bottom:32%;
  }
  .menu-dog img{
    width:5.5rem; height:5.5rem;
    transform:none;
    filter:none;
  }
  .menu-image-box{
    position:absolute;
    left:50%; bottom:2.5rem;
    width:8.5rem; height:4rem;
    transform:translateX(-50%);
    border-radius:1rem;
    background:rgba(255,255,255,0.25);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 8px 32px rgba(0,0,0,0.15);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.6rem;
    overflow:hidden;
  }
  .menu-image-box img{
    height:1.75rem;
    width:auto;
    object-fit:contain;
  }
  .menu-overlay.is-open .menu-panel{
    transform:scale(1);
  }

  header{
    position:fixed; top:0; left:0; width:100%; z-index:9996;
    min-height:var(--header-h);
    display:flex; justify-content:space-between;
    align-items:flex-start;
    padding:0.6rem 2rem;
    background:transparent;
    box-sizing:border-box;
  }
  /* live cursor / fps readout — column 2, row 1, directly under the logo.
     Centred with left/right:0 rather than a transform, because .reveal animates
     translateY on this element and a transform here would override it. */
  .hud{
    position:fixed;
    /* the column-2 / row-1 cell: vertical lines at 33%/67%, row line at 33% */
    left:33%; right:33%;
    top:33%;
    margin-top:-1.9rem;          /* sit the row above the cell's bottom line */
    z-index:9995;
    /* X hugs the bottom-left corner, Y the bottom-right, FPS centred between them */
    display:flex; justify-content:space-between; align-items:flex-end;
    padding:0 1.5rem;            /* pulls X and Y inward, off the cell edges */
    font-family:var(--sans);
    font-size:0.72rem;
    font-weight:400;
    letter-spacing:0.06em;
    color:var(--ink);
    opacity:0.45;
    white-space:pre;
    pointer-events:none;
    user-select:none;
  }
  .h-bottom-line{
    position:fixed;
    left:0;
    width:100%;
    height:1px;
    background:#fff;
    mix-blend-mode:difference;
    z-index:9996;
    pointer-events:none;
  }
  header a{ color:var(--ink); text-decoration:none; }
  .home-link{
    font-family:var(--sans), 'Noto Sans Khmer', 'Noto Sans Thai', sans-serif;
    font-weight:400;
    color:var(--ink);
    font-size:0.8rem;
    letter-spacing:0.02em;
    width:16rem;
    height:1.8rem;
    margin-left:1.8rem;
    margin-top:-0.3rem;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
  }
  .home-link:lang(km), .home-link:lang(th){
    font-size:0.88rem;
  }
  .time-badge{
    justify-self:end;
    margin-right:1.7rem;
    margin-top:0.15rem;
    display:inline-flex; align-items:center; gap:0.5rem;
    color:var(--ink);
    font-family:var(--sans);
    font-size:0.8rem;
    font-weight:500;
    letter-spacing:0.03em;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .time-badge .dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--ink);
    flex-shrink:0;
    animation:blink-dot 1s ease-in-out infinite;
  }
  @keyframes blink-dot{
    0%, 100%{ opacity:1; }
    50%{ opacity:0; }
  }
  nav{ grid-column:2; display:flex; gap:2.5rem; font-size:0.7rem; font-weight:200; letter-spacing:0.03em; text-transform:uppercase; }
  nav a{ opacity:0.6; transition:opacity 0.15s; }
  nav a:hover, nav a.current{ opacity:1; }
  nav a::before{ content:'['; opacity:0; transition:opacity 0.15s; }
  nav a::after{ content:']'; opacity:0; transition:opacity 0.15s; }
  nav a:hover::before, nav a:hover::after{ opacity:1; }

  .cursor-box{
    position:fixed;
    top:0; left:0;
    width:12px; height:12px;
    background:#fff;
    mix-blend-mode:difference;
    border-radius:50%;
    pointer-events:none;
    z-index:9998;
    display:flex; align-items:center; justify-content:center;
    transform:translate(-50%, -50%);
    transition:width 0.25s ease, height 0.25s ease, border-radius 0.25s ease, background 0.25s ease;
  }
  .cursor-box.is-viewing{
    width:5rem; height:2rem;
    border-radius:0;
    background:var(--paper);
    border:1px solid var(--ink);
    gap:0.4rem;
    mix-blend-mode:normal;
  }
  .cursor-label, .cursor-arrow{
    opacity:0;
    font-family:var(--sans);
    font-weight:400;
    font-size:0.7rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--ink);
    transition:opacity 0.2s ease;
  }
  .cursor-box.is-viewing .cursor-label,
  .cursor-box.is-viewing .cursor-arrow{ opacity:1; }

  .cursor-box.is-menu{
    width:1.7rem; height:1.7rem;
    background:transparent;
    border-radius:0;
    mix-blend-mode:normal;
  }
  .cursor-corner{
    position:absolute;
    width:5px; height:5px;
    border-radius:50%;
    background:#000;
    opacity:0;
    transition:opacity 0.2s ease;
  }
  .cursor-box.is-menu .cursor-corner{ opacity:1; }
  .cursor-corner.tl{ top:-4px; left:-4px; }
  .cursor-corner.tr{ top:-4px; right:-4px; }
  .cursor-corner.bl{ bottom:-4px; left:-4px; }
  .cursor-corner.br{ bottom:-4px; right:-4px; }

  .hero-greet{
    position:relative;
    z-index:1;
    margin:0;
    align-self:flex-start;
    width:100%;
    margin-top:-1.2rem;
    margin-bottom:90vh;
    padding-left:clamp(1.25rem, 3.7vw, 4rem);
    font-family:var(--sans), 'Noto Sans Khmer', 'Noto Sans Thai', sans-serif;
    font-size:clamp(0.6rem, 1.25vw, 1rem);
    font-weight:400;
    letter-spacing:0.04em;
    color:var(--ink);
    text-align:left;
    white-space:nowrap;
    height:2.6rem;
    line-height:2.6rem;      /* fixed line box so scripts don't shift the layout */
  }
  .hero-greet > span{
    display:inline-block;
    vertical-align:middle;   /* keep every script centered in the fixed line box */
    line-height:1.15;
  }
  /* Latin-script phrases render in the mono font, which looks larger than the
     Khmer/Thai/CJK fallbacks at the same size — shrink them to match. */
  #heroGreet:lang(en),
  #heroGreet:lang(es),
  #heroGreet:lang(fr),
  #heroGreet:lang(vi){ font-size:0.82em; }
  .hero{
    position:sticky; top:0;
    z-index:0;
    isolation:isolate;
    background:var(--paper);
    min-height:calc(100vh - var(--header-h));
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2rem;
    overflow:hidden;
    padding:2rem;
  }
  a.btn{
    text-decoration:none;
    font-size:0.7rem;
    font-weight:300;
    letter-spacing:0.05em;
    text-transform:uppercase;
    padding:0.9em 1.6em;
    border:1px solid var(--ink);
    color:var(--ink);
    transition:background 0.15s, color 0.15s;
  }
  a.btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--paper); }

  .projects{
    position:relative;
    z-index:1;
    min-height:calc(150vh - var(--header-h));
    background:var(--paper);
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    gap:0.25rem;
    padding:0.5rem 2rem 6rem;
    border-top:1px solid rgba(23,24,28,0.1);
  }
  .projects h2{
    align-self:flex-start;
    font-family:var(--sans);
    font-weight:300;
    text-transform:uppercase;
    letter-spacing:0.02em;
    font-size:clamp(1.8rem, 4.5vw, 3rem);
    opacity:0.9;
    margin:3.5rem 0 0 4rem;
    flex-shrink:0;
  }
  .projects-grid{
    width:100%;
    max-width:650px;
    max-height:480px;
    margin-top:4rem;
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    grid-template-rows:repeat(12, 1fr);
    gap:0.2rem;
  }
  .project-box{
    position:relative;
    border:2px solid rgba(23,24,28,0.3);
    padding:1.5rem;
    display:flex; flex-direction:column; justify-content:space-between;
    color:var(--ink);
    background:transparent;
    opacity:0.6;
    text-decoration:none;
    box-shadow:0 8px 20px rgba(23,24,28,0.06);
    transition:background 0.2s, transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  }
  .corner-dot{
    position:absolute;
    width:6px; height:6px;
    border-radius:50%;
    background:currentColor;
    pointer-events:none;
  }
  .corner-dot.tl{ top:-4px; left:-4px; }
  .corner-dot.tr{ top:-4px; right:-4px; }
  .corner-dot.bl{ bottom:-4px; left:-4px; }
  .corner-dot.br{ bottom:-4px; right:-4px; }
  .project-box:nth-child(1){ grid-column:1/8; grid-row:1/7; transform:rotate(-1.4deg); z-index:3; }
  .project-box:nth-child(2){ grid-column:7/13; grid-row:1/5; transform:rotate(1.1deg) translateY(0.75rem); z-index:2; }
  .project-box:nth-child(3){ grid-column:2/6; grid-row:6/13; transform:rotate(1deg) translateY(-0.5rem); z-index:1; }
  .project-box:nth-child(4){ grid-column:6/13; grid-row:5/13; transform:rotate(-0.7deg); z-index:2; }
  a.project-box:hover{
    background:var(--ink);
    color:var(--paper);
    opacity:1;
    transform:rotate(0deg) scale(1.03);
    z-index:10;
    box-shadow:0 14px 28px rgba(23,24,28,0.14);
  }
  a.project-box:hover .num,
  a.project-box:hover .title{ color:var(--paper); }
  a.project-box:nth-child(1):hover{
    background:#33FF57;
    color:var(--ink);
  }
  a.project-box:nth-child(1):hover .num,
  a.project-box:nth-child(1):hover .title{ color:var(--ink); }
  a.project-box:nth-child(2):hover{
    background:#FFC300;
    color:var(--ink);
  }
  a.project-box:nth-child(2):hover .num,
  a.project-box:nth-child(2):hover .title{ color:var(--ink); }
  a.project-box:nth-child(3):hover{
    background:#3357FF;
    color:var(--paper);
  }
  a.project-box:nth-child(3):hover .num,
  a.project-box:nth-child(3):hover .title{ color:var(--paper); }
  a.project-box:nth-child(4):hover{
    background:#FF5733;
    color:var(--paper);
  }
  a.project-box:nth-child(4):hover .num,
  a.project-box:nth-child(4):hover .title{ color:var(--paper); }
  .project-box.is-placeholder{ opacity:0.4; }
  .project-box .num{
    font-family:var(--sans);
    font-weight:400;
    font-size:0.75rem;
    letter-spacing:0.03em;
    color:var(--ink);
    transition:color 0.2s;
  }
  .project-box .title{
    font-family:var(--sans);
    font-weight:400;
    font-size:clamp(1.2rem, 3vw, 1.7rem);
    color:var(--ink);
    transition:color 0.2s;
  }

  @media (max-width:600px){
    .projects-grid{
      grid-template-columns:1fr;
      grid-template-rows:none;
      gap:0.75rem;
    }
    .project-box{
      grid-column:auto !important;
      grid-row:auto !important;
      transform:none !important;
    }
  }

  .black-divider{
    position:relative; z-index:2;
    min-height:100vh;
    background:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .black-divider .cursor-circle{
    position:absolute;
    left:0; top:0;
    width:16px; height:16px;
    margin:-8px 0 0 -8px;
    border-radius:50%;
    background:#fff;
    pointer-events:none;
    z-index:2;
    opacity:0;
    transition:opacity 0.15s ease-out;
  }
  .dot-grid{
    position:absolute;
    inset:0;
    z-index:0;
    width:100%; height:100%;
    display:block;
    pointer-events:none;
  }
  .black-divider span{
    position:absolute;
    top:1.5rem;
    left:3.5rem;
    z-index:1;
    color:#fff;
    font-family:'Press Start 2P', var(--sans);
    font-weight:700;
    letter-spacing:0.06em;
    font-size:clamp(1.1rem, 2.5vw, 1.6rem);
    text-transform:uppercase;
  }
  .black-divider span .lead{
    font-size:1em;
  }
  .about{
    position:relative; z-index:2;
    min-height:calc(160vh - var(--header-h));
    display:flex; flex-direction:column; justify-content:flex-start;
    background:#EBFF00; color:var(--ink);
    padding:0 2rem 4rem;
  }
  .about h2{
    position:relative;
    z-index:1;
    pointer-events:none;
    color:#fff;
    mix-blend-mode:difference;
    font-family:'Silkscreen', var(--sans);
    font-weight:400;
    text-transform:uppercase;
    font-size:clamp(6rem, 34vw, 24rem);
    letter-spacing:0.03em;
    margin:-5.5rem 0 1.25rem;
    text-align:center;
    transform:translateX(0.5rem);
  }
  .cartoon-eyes{
    position:absolute;
    z-index:2;
    top:calc(50% + 4rem); left:50%;
    transform:translate(-50%, -50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1rem;
    pointer-events:none;
  }
  .cartoon-eyes .eyes-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.1rem;
  }
  .cartoon-eyes .caption-row{
    display:flex;
    align-items:center;
    gap:1.5rem;
    transform:translateX(4rem);
  }
  .cartoon-eyes .woody-img{
    width:5rem;
    height:6.8rem;
    object-fit:contain;
    flex-shrink:0;
    transform:translate(-0.75rem, -0.2rem);
  }
  .cartoon-eyes .eyes-caption{
    font-family:'Boogaloo', var(--sans);
    font-size:3.2rem;
    font-weight:400;
    line-height:1.20;
    text-align:center;
    color:var(--ink);
    margin:0;
    white-space:nowrap;
  }
  .cartoon-eyes .eye{
    position:relative;
    width:3.5rem;
    height:4.75rem;
    background:#fff;
    border-radius:50% / 60%;
    transform:rotate(-6deg);
    overflow:hidden;
    transition:transform 0.12s ease;
  }
  .cartoon-eyes .eye:last-child{
    transform:rotate(6deg);
  }
  .cartoon-eyes .eye.is-blinking{
    transform:rotate(-6deg) scaleY(0.08);
  }
  .cartoon-eyes .eye:last-child.is-blinking{
    transform:rotate(6deg) scaleY(0.08);
  }
  .cartoon-eyes .pupil{
    position:absolute;
    left:50%; top:50%;
    width:1.3rem;
    height:1.3rem;
    background:#000;
    border-radius:50%;
    transform:translate(-50%, -50%);
    will-change:transform;
  }
  .about-divider{
    position:relative;
    z-index:1;
    pointer-events:none;
    width:auto;
    height:1px;
    background:#fff;
    mix-blend-mode:difference;
    /* full-bleed by escaping the section's 2rem padding — scrollbar-safe (no 100vw) */
    margin:16vh -2rem 2rem;
  }
  .about p{
    font-size:0.85rem;
    font-weight:300;
    line-height:1.7;
    opacity:0.65;
    max-width:60ch;
    margin:3rem 0 0;
  }
  .tag-cloud{
    position:absolute;
    top:0; bottom:0;
    left:0;
    width:100%;
    z-index:0;
    overflow:hidden;
  }
  .tag-badge{
    position:absolute;
    top:0; left:0;
    display:inline-flex;
    align-items:center;
    gap:0.45rem;
    white-space:nowrap;
    cursor:grab;
    touch-action:none;
    user-select:none;
    font-family:var(--sans);
    font-size:0.85rem;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--ink);
    background:transparent;
    border:1px solid rgba(23,24,28,0.35);
    border-radius:999px;
    padding:0.65rem 1.1rem;
    box-shadow:0 6px 14px rgba(23,24,28,0.18);
    will-change:transform;
    transition:background 0.15s ease, color 0.15s ease;
  }
  .tag-badge:hover{
    background:var(--ink);
    color:#EBFF00;
  }
  .tag-badge svg{
    width:1rem;
    height:1rem;
    flex-shrink:0;
  }
  .tag-badge.is-circle{
    width:3.2rem;
    height:3.2rem;
    padding:0;
    border-radius:50%;
    justify-content:center;
  }
  .tag-badge.is-circle svg{
    width:1.35rem;
    height:1.35rem;
  }
  .tag-badge.is-dragging{
    box-shadow:0 18px 30px rgba(23,24,28,0.32);
    z-index:80;
    cursor:grabbing;
  }
  .contact{
    position:relative; z-index:3;
    min-height:calc(100vh - var(--header-h));
    display:flex; flex-direction:column; justify-content:center;
    background:var(--paper); color:var(--ink);
    border-top:1px solid rgba(23,24,28,0.1);
    padding:4rem 2rem;
  }
  .contact-inner{ max-width:100%; margin:0; transform:translateY(-3rem); }
  .contact h2.contact-marquee{
    margin:auto -2rem -4rem;
    overflow:hidden;
    width:auto;
  }
  .contact-marquee-track{
    display:inline-flex;
    width:max-content;
    white-space:nowrap;
    will-change:transform;
  }
  .contact-marquee-track span{
    display:inline-block;
    padding:0 0.6rem;
    font-family:var(--sans);
    font-weight:900;
    text-transform:uppercase;
    font-size:clamp(2.5rem, 8vw, 6rem);
    letter-spacing:0.01em;
    -webkit-text-stroke:3.5px currentColor;
    paint-order:stroke fill;
  }
  .contact-progress{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    margin:2rem 0 0;
  }
  .contact-progress .tick{
    width:2px;
    height:1rem;
    background:currentColor;
    opacity:0.3;
    border-radius:1px;
    transition:width 0.2s ease-out, opacity 0.2s ease-out, background 0.2s ease-out;
  }
  .contact-progress .tick.active{
    width:2.4rem;
    height:1rem;
    background:none;
    border:1px solid currentColor;
    opacity:1;
  }
  .contact-boxes{
    --box-w: 42rem;
    --box-gap: 1.5rem;
    display:flex;
    align-items:center;
    gap:var(--box-gap);
    margin:3.5rem -2rem 0;
    padding-top:2.25rem;
    padding-bottom:0.5rem;
    padding-left:max(0px, calc((100vw - var(--box-w)) / 2 - 2rem));
    padding-right:max(0px, calc((100vw - var(--box-w)) / 2 - 2rem));
    overflow-x:auto;
    scrollbar-width:none;
    scroll-snap-type:none;
    transition:transform 0.4s ease-out;
  }
  .contact-boxes::-webkit-scrollbar{ display:none; }
  .contact-boxes.is-scrolled{
    transform:translateY(2.5rem);
  }
  .contact-box{
    position:relative;
    background:var(--paper);
    color:var(--ink);
    text-decoration:none;
    display:flex; align-items:center;
    flex-shrink:0;
    width:var(--box-w);
    min-height:25rem;
    padding:3.25rem;
    border:1px solid rgba(23,24,28,0.15);
    font-family:var(--sans);
    font-size:2.3rem;
    font-weight:400;
    letter-spacing:0.03em;
    text-transform:uppercase;
    transition:background 0.15s, color 0.15s, width 0.4s ease-out, min-height 0.4s ease-out, padding 0.4s ease-out, font-size 0.4s ease-out;
  }
  .contact-box[data-label]::before{
    content:attr(data-label);
    position:absolute;
    bottom:100%; left:0;
    margin-bottom:0.6rem;
    font-size:0.78rem;
    font-weight:400;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--ink);
    opacity:0.55;
  }
  .contact-boxes.is-scrolled .contact-box{
    width:calc(var(--box-w) * 0.7);
    min-height:17.5rem;
    padding:2.28rem;
    font-size:1.61rem;
  }
  .contact-info{
    position:relative;
    overflow:hidden;
    flex-direction:column; align-items:stretch; justify-content:center;
    gap:0;
    font-size:1.1rem;
    font-weight:400;
    letter-spacing:0;
    text-transform:none;
    opacity:1;
    border-top:1px solid rgba(23,24,28,0.2);
  }
  .info-circle{
    position:absolute;
    top:50%;
    /* rest position (matches what the scroll handler computes at scrollLeft 0:
       diameter 30rem, left -radius) so the very first paint is already correct */
    left:-15rem;
    width:30rem; height:30rem;
    border-radius:50%;
    background:#0000FF;
    transform:translateY(-50%);
    z-index:0;
    pointer-events:none;
  }
  .info-row span.on-circle{
    color:#fff;
  }
  .info-row{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:2rem;
    padding:1.4rem 0;
    border-bottom:1px solid rgba(23,24,28,0.2);
  }
  .info-label{ color:var(--ink); opacity:1; }
  a.contact-box:hover{ background:var(--ink); color:var(--paper); }
  /* just-copied confirmation — listed after :hover, and repeated with :hover, so it
     still shows green while the cursor is still sitting on the box after the click */
  a.contact-box.is-copied,
  a.contact-box.is-copied:hover{ background:#00B34A; color:var(--paper); }
  .contact-box[data-label="Instagram"]{
    background:linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80, #405DE6);
    background-size:400% 400%;
    animation:insta-flow 2.8s ease infinite;
  }
  a.contact-box[data-label="Instagram"]:hover{
    background:linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80, #405DE6);
    background-size:400% 400%;
  }
  @keyframes insta-flow{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
  }
  .contact-box[data-label="LinkedIn"]{
    text-transform:none;
    justify-content:center;
    color:#0A66C2;
    font-size:13rem;
    font-weight:700;
  }
  a.contact-box[data-label="LinkedIn"]:hover{
    background:#0A66C2;
    color:#fff;
  }
  .li-clip{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .li-letter{
    display:inline-block;
  }
  .contact-box[data-label="GitHub"]{
    justify-content:center;
  }
  a.contact-box[data-label="GitHub"]:hover .github-icon{
    filter:invert(1);
  }
  .github-icon{
    width:11rem;
    height:11rem;
    image-rendering:pixelated;
    image-rendering:crisp-edges;
  }
  .contact-boxes.is-scrolled .contact-box[data-label="LinkedIn"]{
    font-size:9.5rem;
  }
  .contact-box[data-label="Resume/CV"]{
    padding:1.5rem;
    background:#FFFF00;
    color:#000;
  }
  a.contact-box[data-label="Resume/CV"]:hover{
    background:#FF0000;
    color:#B9D7D4;
  }
  .resume-line{
    position:absolute;
    display:block;
    font-size:2.5rem;
    font-weight:300;
    line-height:1;
  }
  .resume-line.corner-tl{ top:1.5rem; left:1.5rem; }
  .resume-line.corner-tr{ top:1.5rem; right:1.5rem; }
  .resume-line.corner-bl{ bottom:1.5rem; left:1.5rem; }
  .resume-line.corner-br{ bottom:1.5rem; right:1.5rem; }
  .contact-box[data-label="Threads"]{
    justify-content:center;
  }
  a.contact-box[data-label="Threads"]:hover{
    background:#D3D3D3;
  }
  .threads-icon{
    width:22rem;
    height:12.5rem;
    border-radius:20%;
  }
  .contact-box[data-label="X"]{
    background:var(--paper);
    color:#000;
    justify-content:center;
  }
  a.contact-box[data-label="X"]:hover{
    background:#000;
    color:#fff;
  }
  .x-glyph{
    font-family:'Press Start 2P', var(--sans);
    font-size:9rem;
    line-height:1;
  }
  .contact-box[data-label="Email"]{
    justify-content:center;
    text-align:center;
    font-size:11.5rem;
    font-weight:900;
    white-space:nowrap;
  }
  .contact-boxes.is-scrolled .contact-box[data-label="Email"]{
    font-size:8.1rem;
  }
  .email-clip{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .email-glyph{
    display:inline-block;
  }
  @media (max-width:600px){
    .contact{ padding:3rem 1.25rem; }
  }

  .top-btn{
    position:absolute; right:0.5rem; top:0.5rem; z-index:20;
    display:flex; align-items:center; justify-content:center;
    width:4.5rem; height:4.5rem;
    background:none;
    cursor:pointer;
    border:none;
    color:var(--ink);
    opacity:0.7;
    transition:color 0.15s, opacity 0.15s;
  }
  .top-btn-wrap{
    position:relative;
    display:inline-block;
    width:1.8rem; height:1.8rem;
    overflow:hidden;
  }
  .top-btn-stack{
    display:flex; flex-direction:column;
    transform:translateY(0);
    transition:transform 0.4s ease;
  }
  .top-btn:hover .top-btn-stack{ transform:translateY(-1.8rem); }
  .top-btn svg{
    width:1.8rem; height:1.8rem;
    flex-shrink:0;
    stroke:currentColor;
    fill:none;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .top-btn:hover{ color:var(--accent); opacity:1; }
  /* back button: arrows sit side-by-side and slide LEFT on hover (reads as "back") */
  .back-btn .top-btn-stack{ flex-direction:row; }
  .back-btn:hover .top-btn-stack{ transform:translateX(-1.8rem); }

  .reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity 0.9s cubic-bezier(.16,1,.3,1),
               transform 0.9s cubic-bezier(.16,1,.3,1);
    will-change:opacity, transform;
  }
  body.loaded .reveal{
    opacity:1;
    transform:translateY(0);
  }
  .reveal-1{ transition-delay:40ms; }
  .reveal-2{ transition-delay:120ms; }
  .reveal-3{ transition-delay:260ms; }
  .reveal-4{ transition-delay:380ms; }
  .reveal-5{ transition-delay:460ms; }

  /* Home-page hero logo (static) */
  .hero-logo-wrap{
    display:inline-block;
    line-height:0;
  }
  .hero-logo{
    width:clamp(8rem, 22vw, 18rem);
    height:auto;
  }

  /* Loading animation: full-screen white overlay with a counting percentage */
  .loader{
    position:fixed; left:0; right:0; top:0;
    width:100%; height:100vh;
    z-index:99999;            /* above header and everything else */
    pointer-events:none;
    color:#17181C;
    transition:opacity 0.8s cubic-bezier(0.65,0,0.35,1);
  }
  /* fade the loading page out as the video settles in beneath it */
  .loader.is-done{ opacity:0; }
  .loader-panels{
    position:absolute; inset:0; z-index:1;
    display:flex;
  }
  .loader-panels span{
    flex:1; height:100%;
    background:#fff;
    opacity:1;
    transition:opacity 1s cubic-bezier(0.37,0,0.63,1);
  }
  .loader-content{
    position:absolute; inset:0; z-index:2;
    display:flex; flex-direction:column; justify-content:flex-end;
  }
  .loader-count-wrap{
    display:flex; align-items:flex-end;
    padding:0 2rem 1.4rem;
    font-family:var(--sans);
    font-weight:400;
    line-height:0.85;
    letter-spacing:-0.03em;
  }
  .loader-count{
    font-size:clamp(3rem, 10vw, 8rem);
    font-variant-numeric:tabular-nums;
  }
  .loader-pct{
    display:inline-block;
    width:clamp(1.2rem, 2.8vw, 2.1rem);
    opacity:0.5;
    margin:0 0 0.5rem 0.3rem;
  }
  .loader-pct svg{ display:block; width:100%; height:auto; }
  .loader-line{
    position:absolute; left:0; top:50%;
    transform:translateY(-50%);
    width:100%; height:3px;
    background:rgba(23,24,28,0.12);
  }
  .loader-line-fill{
    display:block; height:100%; width:0%;
    background:#17181C;
  }
  body.is-loading{ overflow:hidden; }