:root {
    --bg: #0A0C11;
    --bg2: #0E1218;
    --panel: #111721;
    --line: #202A36;
    --line2: #2B3644;
    --ink: #E4EBF2;         /* headings */
    --text: #AAB7C4;        /* body prose — lifted for readability */
    --dim: #7D8B99;         /* labels / secondary (WCAG AA vs bg/panel) */
    --orange: #FF7A1A;      /* signature neon */
    --orange-2: #FFA24D;
    --cyan: #37E0D6;        /* sparing secondary */
    --pink: #FF4D6D;        /* glitch chroma only */
    --lime: #7CE06A;        /* semantic: online */
    --dead: #5A6470;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
    --maxw: 1160px;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.65;
    overflow-x: clip; /* absorb the transient horizontal jitter of the glitch-in reveal */
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    background-image:
      radial-gradient(1100px 560px at 90% -10%, rgba(255,122,26,.10), transparent 62%),
      radial-gradient(760px 440px at -8% 6%, rgba(55,224,214,.045), transparent 58%);
    background-color: var(--bg); background-attachment: fixed;
  }
  body::after { content:""; position: fixed; inset:0; z-index: 90; pointer-events:none; opacity:.5;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.010) 0 1px, transparent 1px 4px); }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
  a { color: var(--orange); text-decoration: none; }
  a:hover { color: var(--orange-2); }
  .mono-lbl { font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }

  header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(9px); }
  .bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; max-width: var(--maxw); margin: 0 auto; gap: 14px; }
  .hid { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 600; letter-spacing: .03em; color: var(--ink); }
  .hid .logo { display: block; height: 21px; width: auto; }
  .nav { display: flex; align-items: center; gap: 18px; font-family: var(--mono); font-size: 13px; }
  .nav a { color: var(--dim); position: relative; transition: color .16s ease; }
  .nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px;
    background: var(--orange); transition: right .18s ease; }
  .nav a:hover { color: var(--orange); }
  .nav a:hover::after { right: 0; }
  .nav .st { color: var(--lime); white-space: nowrap; }
  .nav .st::before { content: "● "; }
  /* Hide the in-page section links on mobile. Match both the homepage form
     (href="#projects") and the gallery page form (href="/#projects"), so the
     header never overflows on /gallery. */
  @media (max-width: 760px){ .nav a[href*="#"]{ display: none; } }
  /* Reclaim space on the narrowest phones so the brand + language toggle fit
     without the header overflowing. */
  @media (max-width: 430px){ .nav .st{ display: none; } }

  /* lang toggle */
  .lang { display: inline-flex; border: 1px solid var(--line2); font-size: 12px; letter-spacing: .06em; }
  .lang button { background: transparent; border: 0; color: var(--dim); font-family: var(--mono); font-size: 12px; padding: 4px 9px; cursor: pointer; transition: color .16s ease, background .16s ease; }
  .lang button.on { background: var(--orange); color: var(--bg); font-weight: 700; }

  /* hero */
  .hero { padding: 66px 0 30px; }
  .glitch { font-size: clamp(40px, 8vw, 92px); line-height: .95; font-weight: 800; letter-spacing: -.03em;
    color: var(--ink); margin: 14px 0 0; position: relative; font-family: var(--mono); width: max-content; max-width: 100%; }
  .glitch .a { color: var(--orange); }
  .glitch::before, .glitch::after { content: attr(data-t); position: absolute; inset: 0; opacity: 0; pointer-events: none; }
  .glitch:hover::before { opacity:.85; color: var(--cyan); transform: translate(-2px,-1px); mix-blend-mode: screen; }
  .glitch:hover::after { opacity:.85; color: var(--pink); transform: translate(2px,1px); mix-blend-mode: screen; }
  .glitch.entrance::before { animation: glitch-entrance-cyan .62s steps(2, end); }
  .glitch.entrance::after { animation: glitch-entrance-pink .62s steps(2, end); }
  @keyframes glitch-entrance-cyan {
    0% { opacity: .9; color: var(--cyan); transform: translate(-16px,-6px); mix-blend-mode: screen; }
    20% { opacity: .85; color: var(--cyan); transform: translate(12px,3px); mix-blend-mode: screen; }
    40% { opacity: .7; color: var(--cyan); transform: translate(-9px,2px); mix-blend-mode: screen; }
    70% { opacity: .5; color: var(--cyan); transform: translate(5px,-1px); mix-blend-mode: screen; }
    100% { opacity: 0; color: var(--cyan); transform: translate(0,0); mix-blend-mode: screen; }
  }
  @keyframes glitch-entrance-pink {
    0% { opacity: .9; color: var(--pink); transform: translate(16px,6px); mix-blend-mode: screen; }
    20% { opacity: .85; color: var(--pink); transform: translate(-12px,-3px); mix-blend-mode: screen; }
    40% { opacity: .7; color: var(--pink); transform: translate(9px,-2px); mix-blend-mode: screen; }
    70% { opacity: .5; color: var(--pink); transform: translate(-5px,1px); mix-blend-mode: screen; }
    100% { opacity: 0; color: var(--pink); transform: translate(0,0); mix-blend-mode: screen; }
  }
  .bio { color: var(--text); max-width: 62ch; margin: 22px 0 0; font-size: 17px; line-height: 1.7; }
  .bio b { color: var(--ink); font-weight: 600; }
  .hstat { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--mono); }
  .hstat div { display: flex; flex-direction: column; }
  .hstat .k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
  .hstat .v { color: var(--orange); font-size: 15px; margin-top: 4px; }

  section { padding: 50px 0; }
  .sh { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
  .sh h2 { margin: 0; font-family: var(--mono); font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); font-weight: 700; }
  .sh .c { color: var(--orange); }
  .sh .rule { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--line2) 0 6px, transparent 6px 12px); }
  .sh .cnt { color: var(--dim); font-family: var(--mono); font-size: 12px; }

  /* projects deck */
  .deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
  .node {
    position: relative; background: var(--panel);
    border: 1px solid var(--line); border-radius: 4px; padding: 22px 22px 20px;
    transition: border-color .16s ease, transform .16s ease; display: flex; flex-direction: column;
  }
  .node::before { content:""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--l, var(--orange)); opacity: 0; transition: opacity .16s; }
  .node:hover { border-color: var(--l, var(--orange)); transform: translateY(-3px); }
  .node:hover::before { opacity: 1; }
  .node.dead { opacity: .8; }
  .node .row1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .node .em { font-size: 22px; line-height: 1; }
  .status { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--l, var(--orange)); color: var(--l, var(--orange)); white-space: nowrap; }
  .node h3 { margin: 15px 0 8px; font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
  .node h3 small { color: var(--dim); font-size: 13px; font-weight: 400; letter-spacing: 0; }
  .node p { margin: 0 0 16px; color: var(--text); font-size: 14.5px; line-height: 1.62; flex: 1; }
  .stack { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; font-family: var(--mono); }
  .stack span { font-size: 11px; color: var(--dim); border: 1px solid var(--line2); border-radius: 3px; padding: 2px 7px; }
  .lk { display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--mono); font-size: 13px; padding-top: 14px; border-top: 1px solid var(--line); }
  .lk a { display: inline-flex; align-items: center; gap: 6px; }
  .lk a .ar { color: var(--dim); }

  .c-dead { --l: var(--dead); }
  .status.wip { border-style: dashed; }
  .rd { background: #26303C; color: transparent; border-radius: 2px; padding: 0 .32em; user-select: none; }
  .lk .intern { color: var(--dim); font-family: var(--mono); }

  /* minmax(0,…) lets the tracks shrink below their content's min width, so a
     long unbreakable string (e.g. an email) can't blow the grid past the
     viewport. */
  .foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  @media (max-width: 640px){ .foot-grid { grid-template-columns: minmax(0, 1fr); } }
  .box { border: 1px solid var(--line); border-radius: 4px; background: var(--panel); padding: 26px; min-width: 0; }
  .box h3 { margin: 0 0 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
  .box p { margin: 0; color: var(--text); font-size: 15px; line-height: 1.68; }
  .soc { display: flex; flex-direction: column; gap: 2px; }
  .soc a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; min-width: 0; }
  .soc a:last-child { border-bottom: 0; }
  .soc a:hover { color: var(--orange); }
  .soc a .h { color: var(--dim); font-family: var(--mono); font-weight: 400; min-width: 0; overflow-wrap: anywhere; }

  footer { padding: 30px 0 64px; color: var(--dim); font-family: var(--mono); font-size: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); margin-top: 40px; }
  @media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } .glitch:hover::before,.glitch:hover::after{ opacity:0; } .glitch.entrance::before,.glitch.entrance::after{ animation: none !important; opacity:0 !important; } .lb-fig.glitch-in .lb-img::before,.lb-fig.glitch-in .lb-img::after{ animation: none !important; opacity:0 !important; } }

  /* scroll reveal — sliced / datamosh glitch-in (sections + gallery thumbnails) */
  .reveal { opacity: 0; }
  .reveal.revealed { animation: glitch-reveal .95s steps(1, end) both; }
  @keyframes glitch-reveal {
    0%   { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(-16px, 8px); filter: none; }
    8%   { opacity: 1; clip-path: inset(46% 0 46% 0); transform: translate(18px, 0); filter: drop-shadow(8px 0 var(--cyan)) drop-shadow(-8px 0 var(--pink)); }
    16%  { clip-path: inset(10% 0 70% 0); transform: translate(-20px, 0); filter: drop-shadow(-6px 0 var(--cyan)) drop-shadow(6px 0 var(--pink)); }
    26%  { clip-path: inset(72% 0 8% 0); transform: translate(14px, 0); filter: none; }
    36%  { clip-path: inset(24% 0 44% 0); transform: translate(-12px, 0); filter: drop-shadow(9px 0 var(--cyan)) drop-shadow(-9px 0 var(--pink)); }
    46%  { opacity: .55; clip-path: inset(6% 0 24% 0); transform: translate(16px, 0); filter: none; }
    56%  { opacity: 1; clip-path: inset(40% 0 12% 0); transform: translate(-9px, 0); filter: drop-shadow(-5px 0 var(--cyan)) drop-shadow(5px 0 var(--pink)); }
    68%  { clip-path: inset(4% 0 34% 0); transform: translate(7px, 0); filter: none; }
    80%  { clip-path: inset(0 0 10% 0); transform: translate(-4px, 0); filter: drop-shadow(3px 0 var(--cyan)) drop-shadow(-3px 0 var(--pink)); }
    90%  { clip-path: inset(2% 0 0 0); transform: translate(2px, 0); filter: none; }
    100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translate(0, 0); filter: none; }
  }
  @media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; clip-path: none; transform: none; animation: none; } }

  /* hero photo preview (homepage) */
  .hero-strip { padding: 8px 0 34px; }
  .hero-strip .mono-lbl { display: block; }
  .hero-strip .sh { margin-top: 12px; }
  .hero-strip .sh h2 a { color: inherit; text-decoration: none; }
  .hero-strip .sh h2 a:hover, .hero-strip .sh h2 a:hover .c { color: var(--orange-2); }
  .hero-strip .strip {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
  }
  .hero-strip .shot {
    display: block; width: 100%; aspect-ratio: 3 / 2; border: 1px solid var(--line); border-radius: 4px;
    overflow: hidden; background: var(--panel);
  }
  .hero-strip .shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .18s ease; }
  .hero-strip .shot:hover { border-color: var(--orange); }
  .hero-strip .shot:hover img { transform: scale(1.04); }
  .hero-strip .gallery-more {
    align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
    color: var(--dim); display: flex; font-family: var(--mono); font-size: 12px; justify-content: center;
    letter-spacing: .08em; min-height: 100%; padding: 16px; text-decoration: none; text-transform: uppercase;
  }
  .hero-strip .gallery-more:hover { border-color: var(--orange); color: var(--orange-2); }

  /* gallery grid (/gallery) */
  .gal { columns: 3 260px; column-gap: 14px; }
  .gal .ph { display: block; margin: 0 0 14px; break-inside: avoid; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--panel); }
  .gal .ph img { width: 100%; height: auto; display: block; }
  .gal .ph:hover { border-color: var(--orange); }

  /* lightbox overlay (built by gallery.js) */
  .lb { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
    overflow: hidden; background: rgba(6,8,12,.92); backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s ease; }
  .lb[hidden] { display: none; }
  .lb.open { opacity: 1; }
  .lb-fig { margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .lb-img { max-width: 92vw; max-height: 80vh; object-fit: contain; border: 1px solid var(--line2);
    transition: transform .15s ease; transform-origin: center center; touch-action: none; }
  .lb-img.zoomed { cursor: zoom-out; }
  .lb-img.zoomed.dragging { transition: none; cursor: grabbing; }
  .lb-img:not(.zoomed) { cursor: zoom-in; }
  .lb-cap { color: var(--ink); font-family: var(--mono); font-size: 13px; text-align: center; max-width: min(80ch, 92vw); overflow-wrap: anywhere; }
  .lb-close, .lb-prev, .lb-next {
    position: absolute; background: transparent; border: 0; color: var(--ink);
    font-size: 34px; line-height: 1; cursor: pointer; padding: 12px; user-select: none;
  }
  .lb-close { top: 8px; right: 12px; font-size: 26px; }
  .lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
  .lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
  .lb-prev:hover, .lb-next:hover, .lb-close:hover { color: var(--orange); }

  /* lightbox glitch-in entrance — reuses the .glitch chroma-split technique */
  @keyframes lb-glitch-cyan {
    0% { opacity: .85; transform: translate(-6px,-3px); }
    100% { opacity: 0; transform: translate(0,0); }
  }
  @keyframes lb-glitch-pink {
    0% { opacity: .85; transform: translate(6px,3px); }
    100% { opacity: 0; transform: translate(0,0); }
  }
  .lb-fig.glitch-in .lb-img { position: relative; }
  .lb-fig.glitch-in .lb-img::before, .lb-fig.glitch-in .lb-img::after {
    content: ""; position: absolute; inset: 0; mix-blend-mode: screen; pointer-events: none; opacity: 0;
  }
  .lb-fig.glitch-in .lb-img::before { background: var(--cyan); animation: lb-glitch-cyan .28s ease-out; }
  .lb-fig.glitch-in .lb-img::after { background: var(--pink); animation: lb-glitch-pink .28s ease-out; }

  /* contact form (connect box) */
  .contact-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
  .cf-row { display: flex; flex-direction: column; gap: 6px; }
  .cf-row label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
  .cf-row input, .cf-row textarea {
    background: var(--bg2); border: 1px solid var(--line2); border-radius: 3px; color: var(--ink);
    font-family: var(--sans); font-size: 14px; padding: 9px 10px; resize: vertical;
  }
  .cf-row input:focus, .cf-row textarea:focus { outline: none; border-color: var(--orange); }
  .cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .cf-submit {
    align-self: flex-start; background: var(--orange); color: var(--bg); border: 0; border-radius: 3px;
    font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .04em;
    padding: 10px 18px; cursor: pointer; transition: background .16s ease, transform .12s ease;
  }
  .cf-submit:hover { background: var(--orange-2); transform: translateY(-1px); }
  .cf-submit:active { transform: translateY(0); }
  .cf-submit:disabled { opacity: .6; cursor: default; }
  .cf-status { margin: 8px 0 0; font-size: 13px; color: var(--dim); min-height: 1.2em; }
  .cf-status.err { color: var(--pink); }
  .cf-status.ok { color: var(--lime); }