/* ==========================================================================
   Lian Duan — portfolio
   Frosted glass with a cosy farm-dusk palette and a few pixel touches. Colours are tokens on :root; dark is the default.
   ========================================================================== */

:root {
  --bg: #142247;
  --sky-top: #0b1330;
  --sky-bottom: #1f3266;
  --text: #f5efe4;
  --muted: #c2b8a8;
  --faint: #a2988a;

  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-strong: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.22);
  --glass-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.55);
  --glass-fallback: rgba(24, 32, 58, 0.94);

  --accent: #f2b46d;
  --accent-2: #a6d98f;
  --accent-3: #f29a7a;
  --grad: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%);

  --glow-1: #c2620f;
  --glow-2: #3f7a2a;
  --glow-mix: 24%;

  --chip-bg: rgba(255, 255, 255, 0.07);
  --btn-primary-text: #1c140c;

  --radius: 16px;
  --radius-sm: 10px;

  --tex-hills: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 50' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Cpath fill='%231a2a52' d='M0 19h2v31h-2zM2 17h2v33h-2zM4 16h2v34h-2zM6 15h2v35h-2zM8 15h2v35h-2zM10 14h2v36h-2zM12 14h2v36h-2zM14 15h2v35h-2zM16 15h2v35h-2zM18 16h2v34h-2zM20 17h2v33h-2zM22 18h2v32h-2zM24 19h2v31h-2zM26 20h2v30h-2zM28 21h2v29h-2zM30 22h2v28h-2zM32 22h2v28h-2zM34 23h2v27h-2zM36 24h2v26h-2zM38 24h2v26h-2zM40 24h2v26h-2zM42 24h2v26h-2zM44 24h2v26h-2zM46 24h2v26h-2zM48 24h2v26h-2zM50 24h2v26h-2zM52 24h2v26h-2zM54 24h2v26h-2zM56 24h2v26h-2zM58 24h2v26h-2zM60 24h2v26h-2zM62 24h2v26h-2zM64 25h2v25h-2zM66 25h2v25h-2zM68 25h2v25h-2zM70 26h2v24h-2zM72 26h2v24h-2zM74 26h2v24h-2zM76 26h2v24h-2zM78 26h2v24h-2zM80 25h2v25h-2zM82 25h2v25h-2zM84 24h2v26h-2zM86 23h2v27h-2zM88 22h2v28h-2zM90 21h2v29h-2zM92 20h2v30h-2zM94 19h2v31h-2zM96 17h2v33h-2zM98 16h2v34h-2zM100 15h2v35h-2zM102 14h2v36h-2zM104 14h2v36h-2zM106 13h2v37h-2zM108 13h2v37h-2zM110 14h2v36h-2zM112 14h2v36h-2zM114 15h2v35h-2zM116 17h2v33h-2zM118 18h2v32h-2zM120 20h2v30h-2zM122 22h2v28h-2zM124 23h2v27h-2zM126 25h2v25h-2zM128 27h2v23h-2zM130 29h2v21h-2zM132 30h2v20h-2zM134 31h2v19h-2zM136 32h2v18h-2zM138 32h2v18h-2zM140 32h2v18h-2zM142 32h2v18h-2zM144 31h2v19h-2zM146 30h2v20h-2zM148 28h2v22h-2zM150 27h2v23h-2zM152 25h2v25h-2zM154 24h2v26h-2zM156 22h2v28h-2zM158 20h2v30h-2z'/%3E%3Cpath fill='%23142144' d='M0 30h2v20h-2zM2 30h2v20h-2zM4 30h2v20h-2zM6 30h2v20h-2zM8 31h2v19h-2zM10 32h2v18h-2zM12 34h2v16h-2zM14 36h2v14h-2zM16 38h2v12h-2zM18 40h2v10h-2zM20 42h2v8h-2zM22 43h2v7h-2zM24 43h2v7h-2zM26 42h2v8h-2zM28 41h2v9h-2zM30 40h2v10h-2zM32 37h2v13h-2zM34 35h2v15h-2zM36 33h2v17h-2zM38 31h2v19h-2zM40 30h2v20h-2zM42 29h2v21h-2zM44 29h2v21h-2zM46 29h2v21h-2zM48 30h2v20h-2zM50 31h2v19h-2zM52 32h2v18h-2zM54 33h2v17h-2zM56 34h2v16h-2zM58 35h2v15h-2zM60 35h2v15h-2zM62 36h2v14h-2zM64 36h2v14h-2zM66 36h2v14h-2zM68 36h2v14h-2zM70 36h2v14h-2zM72 36h2v14h-2zM74 37h2v13h-2zM76 38h2v12h-2zM78 39h2v11h-2zM80 40h2v10h-2zM82 40h2v10h-2zM84 40h2v10h-2zM86 40h2v10h-2zM88 39h2v11h-2zM90 38h2v12h-2zM92 36h2v14h-2zM94 34h2v16h-2zM96 32h2v18h-2zM98 30h2v20h-2zM100 28h2v22h-2zM102 27h2v23h-2zM104 27h2v23h-2zM106 28h2v22h-2zM108 29h2v21h-2zM110 30h2v20h-2zM112 33h2v17h-2zM114 35h2v15h-2zM116 37h2v13h-2zM118 39h2v11h-2zM120 40h2v10h-2zM122 41h2v9h-2zM124 41h2v9h-2zM126 41h2v9h-2zM128 40h2v10h-2zM130 39h2v11h-2zM132 38h2v12h-2zM134 37h2v13h-2zM136 36h2v14h-2zM138 35h2v15h-2zM140 35h2v15h-2zM142 34h2v16h-2zM144 34h2v16h-2zM146 34h2v16h-2zM148 34h2v16h-2zM150 34h2v16h-2zM152 34h2v16h-2zM154 33h2v17h-2zM156 32h2v18h-2zM158 31h2v19h-2z'/%3E%3C/svg%3E");
  --tex-grasscap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' shape-rendering='crispEdges'%3E%3Cpath fill='%23a8dc5a' d='M0 2h1v1h-1zM2 2h1v1h-1zM4 2h1v1h-1zM5 1h1v1h-1zM6 3h1v1h-1zM9 2h1v1h-1zM9 3h1v1h-1z'/%3E%3Cpath fill='%238fcf45' d='M0 3h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 1h1v1h-1zM3 2h1v1h-1zM3 3h1v1h-1zM4 1h1v1h-1zM4 3h1v1h-1zM5 2h1v1h-1zM5 3h1v1h-1zM6 2h1v1h-1zM7 3h1v1h-1zM8 1h1v1h-1zM8 2h1v1h-1zM8 3h1v1h-1zM10 3h1v1h-1zM11 3h1v1h-1zM12 3h1v1h-1zM13 3h1v1h-1zM14 3h1v1h-1zM15 3h1v1h-1z'/%3E%3Cpath fill='%236db43a' d='M0 4h1v1h-1zM0 5h1v1h-1zM4 4h1v1h-1zM4 5h1v1h-1zM6 4h1v1h-1zM7 4h1v1h-1zM7 5h1v1h-1zM11 4h1v1h-1zM11 5h1v1h-1zM13 4h1v1h-1zM13 5h1v1h-1zM14 4h1v1h-1zM14 5h1v1h-1zM15 4h1v1h-1zM15 5h1v1h-1z'/%3E%3Cpath fill='%235ea530' d='M0 6h1v1h-1zM0 7h1v1h-1zM1 5h1v1h-1zM1 6h1v1h-1zM1 7h1v1h-1zM1 8h1v1h-1zM2 4h1v1h-1zM2 6h1v1h-1zM2 7h1v1h-1zM3 4h1v1h-1zM3 5h1v1h-1zM3 6h1v1h-1zM3 7h1v1h-1zM4 6h1v1h-1zM5 4h1v1h-1zM5 6h1v1h-1zM5 7h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM7 7h1v1h-1zM8 4h1v1h-1zM8 6h1v1h-1zM9 5h1v1h-1zM9 6h1v1h-1zM9 7h1v1h-1zM10 5h1v1h-1zM11 6h1v1h-1zM12 5h1v1h-1zM13 6h1v1h-1zM14 6h1v1h-1z'/%3E%3Cpath fill='%233f7a1f' d='M0 8h1v1h-1zM1 9h1v1h-1zM2 8h1v1h-1zM3 8h1v1h-1zM4 7h1v1h-1zM5 8h1v1h-1zM6 7h1v1h-1zM7 8h1v1h-1zM8 7h1v1h-1zM9 8h1v1h-1zM10 6h1v1h-1zM11 7h1v1h-1zM12 6h1v1h-1zM13 7h1v1h-1zM14 7h1v1h-1zM15 6h1v1h-1z'/%3E%3Cpath fill='%237cc140' d='M1 4h1v1h-1zM2 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM8 5h1v1h-1zM9 4h1v1h-1zM10 4h1v1h-1zM12 4h1v1h-1z'/%3E%3C/svg%3E");
  --blur: 22px;
  --maxw: 1080px;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #cfe8fb;
  --sky-top: #7fbff0;
  --sky-bottom: #dcefff;
  --text: #2a1f14;
  --muted: #5c4f40;
  --faint: #75685a;

  --glass-bg: rgba(255, 255, 255, 0.45);
  --glass-bg-strong: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-highlight: rgba(255, 255, 255, 0.95);
  --glass-shadow: 0 10px 40px -14px rgba(90, 60, 20, 0.25);
  --glass-fallback: rgba(250, 251, 255, 0.94);

  --accent: #b0601c;
  --accent-2: #3d7a2a;
  --accent-3: #b84a2e;

  --glow-1: #f6c46b;
  --glow-2: #a9d68a;
  --glow-mix: 40%;

  --chip-bg: rgba(255, 255, 255, 0.6);
  --btn-primary-text: #ffffff;
  --tex-hills: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 50' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Cpath fill='%23c4e0a8' d='M0 19h2v31h-2zM2 17h2v33h-2zM4 16h2v34h-2zM6 15h2v35h-2zM8 15h2v35h-2zM10 14h2v36h-2zM12 14h2v36h-2zM14 15h2v35h-2zM16 15h2v35h-2zM18 16h2v34h-2zM20 17h2v33h-2zM22 18h2v32h-2zM24 19h2v31h-2zM26 20h2v30h-2zM28 21h2v29h-2zM30 22h2v28h-2zM32 22h2v28h-2zM34 23h2v27h-2zM36 24h2v26h-2zM38 24h2v26h-2zM40 24h2v26h-2zM42 24h2v26h-2zM44 24h2v26h-2zM46 24h2v26h-2zM48 24h2v26h-2zM50 24h2v26h-2zM52 24h2v26h-2zM54 24h2v26h-2zM56 24h2v26h-2zM58 24h2v26h-2zM60 24h2v26h-2zM62 24h2v26h-2zM64 25h2v25h-2zM66 25h2v25h-2zM68 25h2v25h-2zM70 26h2v24h-2zM72 26h2v24h-2zM74 26h2v24h-2zM76 26h2v24h-2zM78 26h2v24h-2zM80 25h2v25h-2zM82 25h2v25h-2zM84 24h2v26h-2zM86 23h2v27h-2zM88 22h2v28h-2zM90 21h2v29h-2zM92 20h2v30h-2zM94 19h2v31h-2zM96 17h2v33h-2zM98 16h2v34h-2zM100 15h2v35h-2zM102 14h2v36h-2zM104 14h2v36h-2zM106 13h2v37h-2zM108 13h2v37h-2zM110 14h2v36h-2zM112 14h2v36h-2zM114 15h2v35h-2zM116 17h2v33h-2zM118 18h2v32h-2zM120 20h2v30h-2zM122 22h2v28h-2zM124 23h2v27h-2zM126 25h2v25h-2zM128 27h2v23h-2zM130 29h2v21h-2zM132 30h2v20h-2zM134 31h2v19h-2zM136 32h2v18h-2zM138 32h2v18h-2zM140 32h2v18h-2zM142 32h2v18h-2zM144 31h2v19h-2zM146 30h2v20h-2zM148 28h2v22h-2zM150 27h2v23h-2zM152 25h2v25h-2zM154 24h2v26h-2zM156 22h2v28h-2zM158 20h2v30h-2z'/%3E%3Cpath fill='%23a9d18a' d='M0 30h2v20h-2zM2 30h2v20h-2zM4 30h2v20h-2zM6 30h2v20h-2zM8 31h2v19h-2zM10 32h2v18h-2zM12 34h2v16h-2zM14 36h2v14h-2zM16 38h2v12h-2zM18 40h2v10h-2zM20 42h2v8h-2zM22 43h2v7h-2zM24 43h2v7h-2zM26 42h2v8h-2zM28 41h2v9h-2zM30 40h2v10h-2zM32 37h2v13h-2zM34 35h2v15h-2zM36 33h2v17h-2zM38 31h2v19h-2zM40 30h2v20h-2zM42 29h2v21h-2zM44 29h2v21h-2zM46 29h2v21h-2zM48 30h2v20h-2zM50 31h2v19h-2zM52 32h2v18h-2zM54 33h2v17h-2zM56 34h2v16h-2zM58 35h2v15h-2zM60 35h2v15h-2zM62 36h2v14h-2zM64 36h2v14h-2zM66 36h2v14h-2zM68 36h2v14h-2zM70 36h2v14h-2zM72 36h2v14h-2zM74 37h2v13h-2zM76 38h2v12h-2zM78 39h2v11h-2zM80 40h2v10h-2zM82 40h2v10h-2zM84 40h2v10h-2zM86 40h2v10h-2zM88 39h2v11h-2zM90 38h2v12h-2zM92 36h2v14h-2zM94 34h2v16h-2zM96 32h2v18h-2zM98 30h2v20h-2zM100 28h2v22h-2zM102 27h2v23h-2zM104 27h2v23h-2zM106 28h2v22h-2zM108 29h2v21h-2zM110 30h2v20h-2zM112 33h2v17h-2zM114 35h2v15h-2zM116 37h2v13h-2zM118 39h2v11h-2zM120 40h2v10h-2zM122 41h2v9h-2zM124 41h2v9h-2zM126 41h2v9h-2zM128 40h2v10h-2zM130 39h2v11h-2zM132 38h2v12h-2zM134 37h2v13h-2zM136 36h2v14h-2zM138 35h2v15h-2zM140 35h2v15h-2zM142 34h2v16h-2zM144 34h2v16h-2zM146 34h2v16h-2zM148 34h2v16h-2zM150 34h2v16h-2zM152 34h2v16h-2zM154 33h2v17h-2zM156 32h2v18h-2zM158 31h2v19h-2z'/%3E%3C/svg%3E");

  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #cfe8fb;
    --sky-top: #7fbff0;
    --sky-bottom: #dcefff;
    --text: #2a1f14;
    --muted: #5c4f40;
    --faint: #75685a;

    --glass-bg: rgba(255, 255, 255, 0.45);
    --glass-bg-strong: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.75);
    --glass-highlight: rgba(255, 255, 255, 0.95);
    --glass-shadow: 0 10px 40px -14px rgba(90, 60, 20, 0.25);
    --glass-fallback: rgba(250, 251, 255, 0.94);

    --accent: #b0601c;
    --accent-2: #3d7a2a;
    --accent-3: #b84a2e;

    --glow-1: #f6c46b;
    --glow-2: #a9d68a;
    --glow-mix: 40%;

    --chip-bg: rgba(255, 255, 255, 0.6);
    --btn-primary-text: #ffffff;
    --tex-hills: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 50' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Cpath fill='%23c4e0a8' d='M0 19h2v31h-2zM2 17h2v33h-2zM4 16h2v34h-2zM6 15h2v35h-2zM8 15h2v35h-2zM10 14h2v36h-2zM12 14h2v36h-2zM14 15h2v35h-2zM16 15h2v35h-2zM18 16h2v34h-2zM20 17h2v33h-2zM22 18h2v32h-2zM24 19h2v31h-2zM26 20h2v30h-2zM28 21h2v29h-2zM30 22h2v28h-2zM32 22h2v28h-2zM34 23h2v27h-2zM36 24h2v26h-2zM38 24h2v26h-2zM40 24h2v26h-2zM42 24h2v26h-2zM44 24h2v26h-2zM46 24h2v26h-2zM48 24h2v26h-2zM50 24h2v26h-2zM52 24h2v26h-2zM54 24h2v26h-2zM56 24h2v26h-2zM58 24h2v26h-2zM60 24h2v26h-2zM62 24h2v26h-2zM64 25h2v25h-2zM66 25h2v25h-2zM68 25h2v25h-2zM70 26h2v24h-2zM72 26h2v24h-2zM74 26h2v24h-2zM76 26h2v24h-2zM78 26h2v24h-2zM80 25h2v25h-2zM82 25h2v25h-2zM84 24h2v26h-2zM86 23h2v27h-2zM88 22h2v28h-2zM90 21h2v29h-2zM92 20h2v30h-2zM94 19h2v31h-2zM96 17h2v33h-2zM98 16h2v34h-2zM100 15h2v35h-2zM102 14h2v36h-2zM104 14h2v36h-2zM106 13h2v37h-2zM108 13h2v37h-2zM110 14h2v36h-2zM112 14h2v36h-2zM114 15h2v35h-2zM116 17h2v33h-2zM118 18h2v32h-2zM120 20h2v30h-2zM122 22h2v28h-2zM124 23h2v27h-2zM126 25h2v25h-2zM128 27h2v23h-2zM130 29h2v21h-2zM132 30h2v20h-2zM134 31h2v19h-2zM136 32h2v18h-2zM138 32h2v18h-2zM140 32h2v18h-2zM142 32h2v18h-2zM144 31h2v19h-2zM146 30h2v20h-2zM148 28h2v22h-2zM150 27h2v23h-2zM152 25h2v25h-2zM154 24h2v26h-2zM156 22h2v28h-2zM158 20h2v30h-2z'/%3E%3Cpath fill='%23a9d18a' d='M0 30h2v20h-2zM2 30h2v20h-2zM4 30h2v20h-2zM6 30h2v20h-2zM8 31h2v19h-2zM10 32h2v18h-2zM12 34h2v16h-2zM14 36h2v14h-2zM16 38h2v12h-2zM18 40h2v10h-2zM20 42h2v8h-2zM22 43h2v7h-2zM24 43h2v7h-2zM26 42h2v8h-2zM28 41h2v9h-2zM30 40h2v10h-2zM32 37h2v13h-2zM34 35h2v15h-2zM36 33h2v17h-2zM38 31h2v19h-2zM40 30h2v20h-2zM42 29h2v21h-2zM44 29h2v21h-2zM46 29h2v21h-2zM48 30h2v20h-2zM50 31h2v19h-2zM52 32h2v18h-2zM54 33h2v17h-2zM56 34h2v16h-2zM58 35h2v15h-2zM60 35h2v15h-2zM62 36h2v14h-2zM64 36h2v14h-2zM66 36h2v14h-2zM68 36h2v14h-2zM70 36h2v14h-2zM72 36h2v14h-2zM74 37h2v13h-2zM76 38h2v12h-2zM78 39h2v11h-2zM80 40h2v10h-2zM82 40h2v10h-2zM84 40h2v10h-2zM86 40h2v10h-2zM88 39h2v11h-2zM90 38h2v12h-2zM92 36h2v14h-2zM94 34h2v16h-2zM96 32h2v18h-2zM98 30h2v20h-2zM100 28h2v22h-2zM102 27h2v23h-2zM104 27h2v23h-2zM106 28h2v22h-2zM108 29h2v21h-2zM110 30h2v20h-2zM112 33h2v17h-2zM114 35h2v15h-2zM116 37h2v13h-2zM118 39h2v11h-2zM120 40h2v10h-2zM122 41h2v9h-2zM124 41h2v9h-2zM126 41h2v9h-2zM128 40h2v10h-2zM130 39h2v11h-2zM132 38h2v12h-2zM134 37h2v13h-2zM136 36h2v14h-2zM138 35h2v15h-2zM140 35h2v15h-2zM142 34h2v16h-2zM144 34h2v16h-2zM146 34h2v16h-2zM148 34h2v16h-2zM150 34h2v16h-2zM152 34h2v16h-2zM154 33h2v17h-2zM156 32h2v18h-2zM158 31h2v19h-2z'/%3E%3C/svg%3E");

    color-scheme: light;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.65 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .2s ease, color .2s ease;
}

h1, h2, h3 {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}
/* the one pixel touch in the type: big headlines */
.hero h1, .section-head h2, .contact h2 {
  font-family: "Jersey 10", "Space Grotesk", sans-serif;
  font-weight: 400; letter-spacing: .01em; line-height: 1.05;
}

a { color: inherit; }
img { max-width: 100%; display: block; }
svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.fill, svg .fill { fill: currentColor; stroke: none; }
svg.px { fill: currentColor; stroke: none; shape-rendering: crispEdges; }

/* pixel-art icons on cards */
.pxi { width: 40px; height: 40px; stroke: none; shape-rendering: crispEdges; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .18)); }
.stat > .pxi, .bg-grid .card > .pxi { position: absolute; top: 18px; right: 18px; }
.bg-grid h3 { padding-right: 44px; }
.focus .ico .pxi { width: 28px; height: 28px; filter: none; }
.card-title { display: flex; align-items: center; gap: 12px; }
.card-title .pxi { width: 32px; height: 32px; }

::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); }

:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 8px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 10px;
  background: var(--glass-fallback); color: var(--text); text-decoration: none;
}
.skip:focus { top: 16px; }

/* ---------- Backdrop: two soft, static glows ---------- */
.backdrop {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    var(--tex-hills) 0 100% / 640px 200px repeat-x,
    radial-gradient(60vmax 40vmax at 100% 0%, color-mix(in srgb, var(--glow-1) var(--glow-mix), transparent), transparent 70%),
    linear-gradient(var(--sky-top), var(--sky-bottom));
}

/* ---------- Glass primitive ---------- */
.glass {
  position: relative;
  background: linear-gradient(145deg, var(--glass-bg-strong), var(--glass-bg));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow), inset 0 1px 0 0 var(--glass-highlight);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(170%);
  backdrop-filter: blur(var(--blur)) saturate(170%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-fallback); }
}

/* cursor-follow sheen on interactive cards */
.card::after, .mini::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.12), transparent 45%);
  opacity: 0; transition: opacity .15s ease;
}
.card:hover::after, .mini:hover::after { opacity: 1; }

/* gradient ring for highlight panels */
.glow::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .55;
}

/* ---------- Nav ---------- */
.nav-wrap {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: center; padding: 0 16px;
}
.nav {
  display: flex; align-items: center; gap: 6px;
  padding: 6px; border-radius: 999px;
  max-width: 100%;
}
.brand {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  font: 700 14px/1 "Space Grotesk", sans-serif; letter-spacing: .02em;
  text-decoration: none; color: var(--btn-primary-text);
  background: var(--grad);
}
.nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; }
.nav-links a {
  display: block; padding: 8px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none;
  transition: color .12s, background-color .12s;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); background: var(--chip-bg); box-shadow: inset 0 0 0 1px var(--glass-border); }

.theme-toggle {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  transition: color .12s, background-color .12s;
}
.theme-toggle:hover { color: var(--text); background: var(--chip-bg); }
.theme-toggle svg { width: 18px; height: 18px; }
.i-sun { display: none; }
:root[data-theme="light"] .i-sun { display: block; }
:root[data-theme="light"] .i-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .i-sun { display: block; }
  :root:not([data-theme="dark"]) .i-moon { display: none; }
}

/* ---------- Layout ---------- */
main { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
.section { padding: 72px 0; }
.section-head { margin-bottom: 28px; }
.section-head h2 { font-size: clamp(36px, 5vw, 52px); }

.kicker {
  margin: 0 0 10px;
  font: 600 12px/1 "Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-2);
}
.kicker.small { margin-bottom: 8px; font-size: 11px; }
.meta { margin: 4px 0 0; color: var(--faint); font-size: 14px; }
.card { padding: 26px; }
.card p { margin: 0 0 14px; color: var(--muted); }
.card p:last-child { margin-bottom: 0; }
.card strong { color: var(--text); font-weight: 600; }
.card-title { font-size: 18px; margin-bottom: 16px; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  padding: 110px 0 48px;
}
.hero-card {
  display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center;
  padding: 44px;
  border-radius: 30px;
}
.avatar-ring {
  padding: 4px; border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 10px 40px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.avatar { width: 132px; height: 132px; border-radius: 50%; border: 3px solid var(--bg); object-fit: cover; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--muted);
  background: var(--chip-bg); border: 1px solid var(--glass-border);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .2); }
.hero h1 { font-size: clamp(46px, 7.4vw, 80px); margin-bottom: 14px; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { margin: 0; font-size: clamp(16px, 1.6vw, 18px); color: var(--muted); max-width: 58ch; }

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.cta-row.center { justify-content: center; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px;
  font-weight: 600; font-size: 15px; text-decoration: none;
  color: var(--text); background: var(--chip-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s;
}
.btn:hover { transform: translateY(-2px); background: var(--glass-bg-strong); }
.btn.primary {
  color: var(--btn-primary-text); border-color: transparent;
  background: var(--grad); background-size: 160% 100%;
  box-shadow: 0 8px 26px -8px color-mix(in srgb, var(--accent) 80%, transparent);
}
.btn.primary:hover { background-position: 100% 0; box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--accent-3) 70%, transparent); }

.socials { display: flex; gap: 8px; list-style: none; margin: 22px 0 0; padding: 0; }
.socials a {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  color: var(--muted); background: var(--chip-bg); border: 1px solid var(--glass-border);
  transition: color .12s, transform .12s;
}
.socials a:hover { color: var(--text); transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stat { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; border-radius: var(--radius-sm); }
.stat strong { font: 700 28px/1.1 "Space Grotesk", sans-serif; }
.stat strong em { font-style: normal; font-size: 15px; font-weight: 500; color: var(--faint); }
.stat span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.stat small {
  margin-top: auto; padding-top: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2);
}

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; }
.focus { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.focus li { display: flex; gap: 14px; align-items: center; }
.focus .ico {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 12px; background: var(--chip-bg); border: 1px solid var(--glass-border); font-size: 18px;
}
.focus b { display: block; font-weight: 600; }
.focus small { color: var(--faint); font-size: 13px; }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; display: grid; gap: 18px; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--accent), var(--accent-2), var(--accent-3));
  opacity: .5;
}
.job::before {
  content: ""; position: absolute; left: -27px; top: 44px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent-2);
}
.job-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.job h3 { font-size: 20px; }
.logo {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  font: 700 15px/1 "Space Grotesk", sans-serif; letter-spacing: .02em; color: #fff;
  background: linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 55%, #000));
  box-shadow: 0 8px 20px -8px var(--c), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.role { margin: 2px 0 0; font-weight: 500; color: var(--text); opacity: .85; font-size: 15px; }
.card .job-head p { margin: 0; }
.card .job-head .meta { margin-top: 3px; font-size: 13.5px; }
.pill {
  flex: none; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: #34d399; background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .3);
}
.job-head .pill { align-self: start; }
.card .job-summary { margin: 18px 0 16px; color: var(--text); opacity: .9; font-size: 15.5px; }

.metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 18px; }
.metric {
  padding: 12px 14px; border-radius: 12px;
  background: var(--chip-bg); border: 1px solid var(--glass-border);
}
.metric b { display: block; font: 700 21px/1.15 "Space Grotesk", sans-serif; }
.metric span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--faint); }

.highlights { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.highlights li { position: relative; padding-left: 22px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.highlights li::before {
  content: ""; position: absolute; left: 3px; top: .62em;
  width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg);
  background: var(--grad);
}
.highlights b { color: var(--text); font-weight: 600; }

.tags, .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span, .chips span {
  padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; color: var(--muted);
  background: var(--chip-bg); border: 1px solid var(--glass-border);
}
.chips span { font-size: 13.5px; padding: 6px 12px; }

/* ---------- Projects ---------- */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.project {
  display: flex; flex-direction: column; padding: 0; overflow: hidden; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
a.project:hover { transform: translateY(-4px); box-shadow: var(--glass-shadow), 0 20px 50px -20px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 1px 0 0 var(--glass-highlight); }
.thumb {
  height: 170px; display: grid; place-items: center; overflow: hidden;
  border-bottom: 1px solid var(--glass-border);
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 70%), var(--chip-bg);
}
.thumb img {
  width: 110px; height: 110px; object-fit: cover; border-radius: 22px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5);
  transition: transform .12s ease;
}
.project:hover .thumb img { transform: scale(1.06) rotate(-2deg); }
.project.wide { grid-column: 1 / -1; flex-direction: row; }
.project.wide .thumb { width: 260px; height: auto; min-height: 200px; flex: none; border-bottom: 0; border-right: 1px solid var(--glass-border); }
.rack { width: 120px; height: 120px; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35)); }
.rack .led { animation: blink 1.6s steps(1) infinite; }
.rack .led:nth-of-type(2n) { animation-duration: 1.1s; animation-delay: -.4s; }
.rack .led:nth-of-type(3n) { animation-duration: 2.3s; }
@keyframes blink { 50% { opacity: .25; } }
.thumb.cover img { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.project:hover .thumb.cover img { transform: scale(1.04); }
.p-links { display: flex; gap: 16px; margin-top: 14px; }
.p-links a { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.p-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.p-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.p-body h3 { font-size: 20px; margin-bottom: 8px; }
.p-body p { font-size: 14.5px; }
.p-body .tags { margin-top: auto; padding-top: 4px; }
.p-year { margin: 0 0 6px !important; font-size: 12px !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint) !important; }

.featured {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: center;
  margin-bottom: 18px; padding: 30px; text-decoration: none;
  transition: transform .15s ease;
}
.featured:hover { transform: translateY(-4px); }
.featured h3 { font-size: 28px; margin-bottom: 10px; }
.featured .p-year { display: flex; align-items: center; gap: 10px; }
.featured .pill { letter-spacing: 0; text-transform: none; }
.f-points { margin: 0 0 18px; padding-left: 18px; color: var(--muted); font-size: 14.5px; }
.f-points li { margin-bottom: 6px; }
.f-points li::marker { color: var(--accent-2); }
.f-shot {
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55);
  transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
  transition: transform .25s ease;
}
.featured:hover .f-shot { transform: none; }
.f-shot img { width: 100%; height: auto; }

.mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.mini {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 18px; border-radius: var(--radius-sm); text-decoration: none;
  transition: transform .12s ease;
}
.mini:hover { transform: translateY(-2px); }
.mini b { font-weight: 600; font-size: 15px; }
.mini b::after { content: " ↗"; color: var(--faint); font-weight: 400; }
.mini span { font-size: 13px; color: var(--faint); }

/* ---------- Travel ---------- */
.travel { padding: 18px; border-radius: var(--radius); }
.travel-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding: 4px 6px 16px; }
.travel-stats { display: flex; gap: 28px; margin: 0; }
.travel-stats div { display: flex; flex-direction: column-reverse; }
.travel-stats dt { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.travel-stats dd { margin: 0; font: 700 28px/1.1 "Space Grotesk", sans-serif; }
.travel-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.travel-filters button {
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font: 500 13px/1.2 "Inter", sans-serif; color: var(--muted);
  background: var(--chip-bg); border: 1px solid var(--glass-border);
  transition: color .12s, background-color .12s;
}
.travel-filters button:hover { color: var(--text); }
.travel-filters button[aria-pressed="true"] { color: var(--btn-primary-text); background: var(--grad); border-color: transparent; }

.travel-map {
  height: 480px; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--glass-border); background: var(--chip-bg);
  isolation: isolate;
}
:root[data-theme="dark"] .travel-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.6); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .travel-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.6); }
}
.travel-map.map-error::after { content: "The map couldn't load."; display: grid; place-items: center; height: 100%; color: var(--faint); }

.pin {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.leaflet-marker-icon .pin, .travel-map .pin { width: 16px; height: 16px; transition: transform .15s ease; }
.travel-map .pin:hover { transform: scale(1.25); }
.pin-recent { background: #e0892e; }
.pin-mid { background: #6aa84f; }
.pin-early { background: #b48ead; }
.pin-home { background: #f43f5e; box-shadow: 0 0 0 4px rgba(244, 63, 94, .3), 0 2px 6px rgba(0, 0, 0, .35); }

.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0; padding: 14px 6px 2px; font-size: 13px; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend .pin { width: 12px; height: 12px; }

/* Leaflet popups and controls in the glass style */
.travel-map .leaflet-popup-content-wrapper {
  background: var(--glass-fallback); color: var(--text);
  border: 1px solid var(--glass-border); border-radius: 12px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.travel-map .leaflet-popup-tip { background: var(--glass-fallback); }
.travel-map .leaflet-popup-content { margin: 10px 14px; font: 14px/1.4 "Inter", sans-serif; display: flex; flex-direction: column; }
.travel-map .leaflet-popup-content strong { font-family: "Space Grotesk", sans-serif; font-size: 16px; }
.travel-map .leaflet-popup-content span { color: var(--muted); font-size: 13px; }
.travel-map .leaflet-popup-content em { font-style: normal; color: var(--accent-2); font-weight: 600; font-size: 13px; margin-top: 4px; }
.travel-map .leaflet-container a.leaflet-popup-close-button { color: var(--faint); }
.travel-map .leaflet-bar a {
  background: var(--glass-fallback); color: var(--text); border-color: var(--glass-border);
}
.travel-map .leaflet-control-attribution { background: var(--glass-fallback); color: var(--faint); font-size: 10px; }
.travel-map .leaflet-control-attribution a { color: var(--muted); }

/* ---------- Skills & background ---------- */
.skills-grid, .bg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bg-grid { margin-top: 18px; }
.bg-grid h3 { font-size: 18px; }

/* ---------- Contact ---------- */
.contact { text-align: center; padding: 56px 28px; border-radius: 30px; }
.contact h2 { font-size: clamp(38px, 6vw, 60px); margin-bottom: 12px; }
.contact .lede { margin: 0 auto; }

.footer { text-align: center; padding: 8px 16px 40px; color: var(--faint); font-size: 14px; }
.footer p { margin: 0; }

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .mini-grid { grid-template-columns: repeat(2, 1fr); }
  .featured { grid-template-columns: 1fr; }
  .f-shot { order: -1; transform: none; }
  .skills-grid, .bg-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --blur: 16px; }
  .section { padding: 56px 0; }
  .hero { padding-top: 96px; }
  .hero-card { grid-template-columns: 1fr; padding: 28px 22px; gap: 22px; text-align: left; }
  .avatar, .avatar-ring { width: 96px; height: 96px; }
  .avatar { width: 88px; height: 88px; }
  .stats { grid-template-columns: 1fr; gap: 10px; }
  .stat { padding: 16px 18px; }
  .stat strong { font-size: 22px; }
  .project-grid, .mini-grid { grid-template-columns: 1fr; }
  .project.wide { flex-direction: column; }
  .project.wide .thumb { width: auto; min-height: 0; height: 170px; border-right: 0; border-bottom: 1px solid var(--glass-border); }
  .card { padding: 22px; }
  .card.project { padding: 0; }
  .timeline { padding-left: 22px; }
  .timeline::before { left: 4px; }
  .job::before { left: -23px; top: 40px; }
  .job-head { grid-template-columns: auto 1fr; gap: 12px; }
  .job-head .pill { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  .logo { width: 42px; height: 42px; font-size: 13px; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .nav-links a { padding: 8px 10px; font-size: 13px; }
  .brand, .theme-toggle { width: 34px; height: 34px; }
  .contact { padding: 40px 20px; }
  .travel { padding: 12px; }
  .travel-map { height: 380px; }
  .travel-stats { gap: 20px; }
  .travel-stats dd { font-size: 24px; }
  .nav-links a { padding: 8px 7px; font-size: 12.5px; }
  .travel-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -6px; padding: 0 6px 2px; }
  .travel-filters::-webkit-scrollbar { display: none; }
  .travel-filters button { flex: none; }
  .travel-bar { flex-direction: column; align-items: stretch; }
}

@media (max-width: 440px) {
  .brand { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .rack .led { animation: none; }
  * { transition-duration: 0s !important; }
}