/*
  Portfolio styles
  - Mobile-first, responsive
  - Light/Dark via [data-theme] on html
*/

:root {
  --bg: #0b0c0f;
  --bg-elev: #141720;
  --text: #e6e8ef;
  --muted: #a6adbb;
  --accent: #7c5cff;
  --accent-2: #2dd4bf;
  --border: #2a2f3a;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  /* spotlight position for 3D glow */
  --spot-x: 50%;
  --spot-y: 50%;
  /* baseline gloss intensity for overlays */
  --gloss-opacity: .44;
}

html[data-theme="light"] {
  --bg: #ffffff;
  --bg-elev: #f7f7fb;
  --text: #0b0c0f;
  --muted: #4a5568;
  --accent: #5b34ff;
  --accent-2: #14b8a6;
  --border: #e5e7eb;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

/* Smooth scroll between in-page links */
html { scroll-behavior: smooth; }

/* Themed background: black → purple emphasis */
html[data-theme="dark"] body {
  /* Deep navy base with brighter, shinier purple glow */
  background-image:
    /* Core bright glow that follows the spotlight */
    radial-gradient(520px 360px at var(--spot-x, 50%) var(--spot-y, 50%), rgba(146, 102, 255, 0.60) 0%, rgba(146, 102, 255, 0.00) 60%),
    /* Larger soft halo for smoother falloff */
    radial-gradient(1200px 820px at var(--spot-x, 50%) var(--spot-y, 50%), rgba(124, 92, 255, 0.38) 0%, rgba(124, 92, 255, 0.00) 70%),
  /* Subtle specular highlight near the top (a bit stronger) */
  radial-gradient(600px 420px at 60% 18%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.00) 55%),
  /* Secondary soft highlight near bottom */
  radial-gradient(700px 480px at 40% 85%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.00) 60%),
    /* Edge vignette for depth */
    radial-gradient(closest-side at 50% 50%, rgba(0, 0, 0, 0.00) 60%, rgba(0, 0, 0, 0.38) 100%),
    /* Base navy */
    linear-gradient(180deg, #0a0b16 0%, #0b1020 100%);
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed;
  background-repeat: no-repeat;
}

html[data-theme="light"] body {
  /* Brighter purple tint with gentle highlight for light mode */
  background-image:
    radial-gradient(520px 360px at var(--spot-x, 50%) var(--spot-y, 50%), rgba(146, 102, 255, 0.22) 0%, rgba(146, 102, 255, 0.00) 60%),
    radial-gradient(1000px 700px at var(--spot-x, 50%) var(--spot-y, 50%), rgba(124, 92, 255, 0.12) 0%, rgba(124, 92, 255, 0.00) 70%),
    radial-gradient(600px 420px at 60% 18%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.00) 60%),
    linear-gradient(180deg, #f7f7fb 0%, #eef0f6 100%);
  background-attachment: fixed, fixed, fixed, fixed;
  background-repeat: no-repeat;
}

/* Glossy overlay that adds a sheen across the page */
@media (prefers-reduced-motion: no-preference) {
  /* Animated diagonal sweep for ULTRA gloss */
  html[data-theme="dark"] body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image:
      /* sheen sweep */
      linear-gradient(115deg,
        rgba(255,255,255,0.00) 32%,
        rgba(255,255,255,0.05) 42%,
        rgba(255,255,255,0.18) 49%,
        rgba(255,255,255,0.07) 54%,
        rgba(255,255,255,0.00) 64%),
      /* repeating sparkle layers */
      radial-gradient(circle at center, rgba(255,255,255,0.12) 0 1.2px, rgba(255,255,255,0) 2px),
      radial-gradient(circle at center, rgba(255,255,255,0.10) 0 1px, rgba(255,255,255,0) 1.6px),
      radial-gradient(circle at center, rgba(255,255,255,0.08) 0 1.4px, rgba(255,255,255,0) 2.2px);
    background-size: 200% 200%, 120px 120px, 90px 90px, 160px 160px;
    background-position: -120% -120%, 0 0, 35px 55px, 70px 20px;
    mix-blend-mode: screen;
    animation: sparkleDrift 18s linear infinite;
    opacity: .06;
  }
  html[data-theme="light"] body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image:
      linear-gradient(115deg,
        rgba(255,255,255,0.00) 32%,
        rgba(255,255,255,0.25) 45%,
        rgba(255,255,255,0.10) 52%,
        rgba(255,255,255,0.00) 64%),
      radial-gradient(circle at center, rgba(255,255,255,0.20) 0 1.2px, rgba(255,255,255,0) 2px),
      radial-gradient(circle at center, rgba(255,255,255,0.14) 0 1px, rgba(255,255,255,0) 1.6px),
      radial-gradient(circle at center, rgba(255,255,255,0.12) 0 1.4px, rgba(255,255,255,0) 2.2px);
    background-size: 200% 200%, 120px 120px, 90px 90px, 160px 160px;
    background-position: -120% -120%, 0 0, 35px 55px, 70px 20px;
    mix-blend-mode: overlay;
    animation: sparkleDrift 22s linear infinite;
    opacity: .04;
  }
  @keyframes sparkleDrift {
    to {
      background-position: 120% 120%, 40px 60px, 5px 85px, 90px 0;
    }
  }

  html[data-theme="dark"] body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image:
      radial-gradient(var(--gloss-size, 520px 380px) at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255,255,255,0.18), rgba(255,255,255,0) 70%);
    mix-blend-mode: soft-light;
    opacity: var(--gloss-opacity, .12); transition: opacity .25s ease;
    background-repeat: no-repeat;
  }
  html[data-theme="light"] body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image:
      radial-gradient(var(--gloss-size, 520px 380px) at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255,255,255,0.22), rgba(255,255,255,0) 70%);
    mix-blend-mode: overlay;
    opacity: var(--gloss-opacity, .10); transition: opacity .25s ease;
    background-repeat: no-repeat;
  }
  /* pulse via variable to allow JS control */
  html.gloss-active { --gloss-opacity: .10; }
}

/* Shape variants for the cursor-following glow */
@media (prefers-reduced-motion: no-preference) {
  /* RING (donut) shape - dark */
  html[data-glow-shape="ring"][data-theme="dark"] body::after {
    background-image:
      /* ring on top */
      radial-gradient(
        var(--gloss-size, 420px 420px) at var(--spot-x, 50%) var(--spot-y, 50%),
        rgba(255,255,255,0) 35%,
        rgba(255,255,255,0.34) 44%,
        rgba(255,255,255,0.10) 52%,
        rgba(255,255,255,0) 60%
      ),
      /* faint core */
      radial-gradient(180px 140px at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255,255,255,0.06), rgba(255,255,255,0) 70%),
      /* angled streaks */
      linear-gradient(120deg,
        rgba(255,255,255,0.00) 15%,
        rgba(255,255,255,0.06) 32%,
        rgba(255,255,255,0.12) 37%,
        rgba(255,255,255,0.00) 44%,
        rgba(255,255,255,0.08) 52%,
        rgba(255,255,255,0.00) 60%);
  }
  /* RING (donut) shape - light */
  html[data-glow-shape="ring"][data-theme="light"] body::after {
    background-image:
      radial-gradient(
        var(--gloss-size, 420px 420px) at var(--spot-x, 50%) var(--spot-y, 50%),
        rgba(255,255,255,0) 35%,
        rgba(255,255,255,0.28) 44%,
        rgba(255,255,255,0.10) 52%,
        rgba(255,255,255,0) 60%
      ),
      radial-gradient(180px 140px at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255,255,255,0.12), rgba(255,255,255,0) 70%),
      linear-gradient(120deg,
        rgba(255,255,255,0.00) 18%,
        rgba(255,255,255,0.20) 38%,
        rgba(255,255,255,0.10) 45%,
        rgba(255,255,255,0.00) 55%);
  }
}

/* Subtle AURA shape: soft multi-radius glow, no hard edges or streaks */
@media (prefers-reduced-motion: no-preference) {
  html[data-glow-shape="aura"][data-theme="dark"] body::after {
    background-image:
      radial-gradient(var(--gloss-size, 560px 420px) at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255,255,255,0.14), rgba(255,255,255,0) 65%),
      radial-gradient(1100px 800px at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255,255,255,0.05), rgba(255,255,255,0) 72%);
  }
  html[data-glow-shape="aura"][data-theme="light"] body::after {
    background-image:
      radial-gradient(var(--gloss-size, 560px 420px) at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255,255,255,0.20), rgba(255,255,255,0) 65%),
      radial-gradient(1100px 800px at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255,255,255,0.08), rgba(255,255,255,0) 72%);
  }
}

.container {
  width: min(1100px, 92%);
  margin: 0 auto;
}

.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus { position: static; width: auto; height: auto; padding: .5rem 1rem; background: var(--accent); color: #fff; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px); background: color-mix(in oklab, var(--bg) 85%, transparent); border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; }
.logo { font-weight: 700; letter-spacing: .3px; color: var(--text); text-decoration: none; }
.brand { display: flex; align-items: center; gap: 1rem; }
.nav { display: flex; gap: .75rem; align-items: center; }
.nav a { color: var(--text); text-decoration: none; padding: .5rem .7rem; border-radius: .5rem; }
.nav a:hover { background: var(--bg-elev); }
.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .35rem; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav-links a.active { color: color-mix(in oklab, var(--text) 85%, var(--accent)); background: color-mix(in oklab, var(--bg-elev) 70%, transparent); }
.nav-links a.active::after { transform: scaleX(1); }

.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1rem; border: 1px solid var(--border); border-radius: .6rem; color: var(--text); text-decoration: none; background: transparent; box-shadow: none; }
.btn:hover { border-color: color-mix(in oklab, var(--accent) 60%, var(--border)); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; }
.btn .icon { width: 16px; height: 16px; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: .55rem; padding: .45rem .6rem; cursor: pointer; line-height: 0; }
.btn-icon:hover { background: var(--bg-elev); }
.icon-link .icon { width: 18px; height: 18px; }

/* Starfield canvas behind content */
.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .18; /* default for dark */
}
html[data-theme="light"] .starfield { opacity: .10; }

/* Global background effect stack */
.bg-effect-layers { position:fixed; inset:0; pointer-events:none; z-index:0; }
.bg-effect-layers > * { position:absolute; inset:0; }

/* Low-performance mode (set by JS via html[data-perf="low"]) */
html[data-perf="low"] .bg-effect-layers { display: none; }
html[data-perf="low"] .glimmer-layer { display: none; }
html[data-perf="low"] .site-header { backdrop-filter: none; background: var(--bg); }
html[data-perf="low"] body::before,
html[data-perf="low"] body::after { content: none !important; }
html[data-perf="low"][data-theme="dark"] body,
html[data-perf="low"][data-theme="light"] body { background-attachment: scroll; }

/* Mobile/coarse pointer: apply the same performance fallbacks immediately */
@media (pointer: coarse) {
  .bg-effect-layers { display: none; }
  .glimmer-layer { display: none; }
  .site-header { backdrop-filter: none; background: var(--bg); }
  body::before,
  body::after { content: none !important; }
  html[data-theme="dark"] body,
  html[data-theme="light"] body { background-attachment: scroll; }
}

/* SHIMMER (global): slow gradient hue drift */
.bg-shimmer { background: linear-gradient(140deg, rgba(124,92,255,0.22), rgba(45,212,191,0.18), rgba(124,92,255,0.22)); mix-blend-mode: overlay; opacity:.32; }
html[data-theme="light"] .bg-shimmer { opacity:.25; }
@media (prefers-reduced-motion:no-preference) { .bg-shimmer { animation: bgShimmer 16s ease-in-out infinite alternate; background-size:200% 200%; } }
@keyframes bgShimmer { to { background-position: 100% 0; } }

/* SHINE (global): periodic diagonal sweep */
.bg-shine { background: linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.5) 49%, rgba(255,255,255,0) 64%); mix-blend-mode: screen; opacity:0; }
@media (prefers-reduced-motion:no-preference) { .bg-shine { animation: bgShineSweep 14s linear infinite; } }
@keyframes bgShineSweep { 0% { opacity:0; background-position:-120% 0; } 4% { opacity:.35; } 10% { opacity:.7; } 18% { opacity:.15; } 25% { opacity:0; background-position:120% 0; } 100% { opacity:0; background-position:120% 0; } }

/* GLIMMER (global): sparkles over full viewport */
.bg-glimmer-layer { mix-blend-mode: screen; }
.bg-glimmer-layer span { position:absolute; width:3px; height:3px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 70%); opacity:0; animation: glimmerPulseGlobal 7s linear infinite; box-shadow:0 0 6px rgba(255,255,255,.55); }
@keyframes glimmerPulseGlobal { 0% { transform:scale(.4); opacity:0; } 6% { opacity:.9; } 55% { opacity:.12; } 100% { transform:scale(1); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .bg-glimmer-layer span { animation:none; opacity:.45; } }

/* SHINE: directional sheen sweep on hover */
.shine { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .shine::after {
    content: ""; position: absolute; top:0; left:-120%; width:120%; height:100%;
    background: linear-gradient(100deg,
      rgba(255,255,255,0) 35%,
      rgba(255,255,255,.55) 48%,
      rgba(255,255,255,0) 62%
    );
    mix-blend-mode: screen; pointer-events: none; opacity:0; transform: skewX(-20deg);
  }
  .shine:hover::after { animation: shineSweep 1.2s ease forwards; }
  @keyframes shineSweep {
    0% { left:-120%; opacity:0; }
    10% { opacity:.25; }
    55% { opacity:.65; }
    100% { left:110%; opacity:0; }
  }
}

/* SHIMMER: subtle continuous gradient shift */
@media (prefers-reduced-motion: no-preference) {
  .shimmer, .btn-primary.shimmer, .accent-animated.shimmer {
    background-size: 250% 100%;
    animation: shimmerShift 8s ease-in-out infinite;
  }
  @keyframes shimmerShift { 50% { background-position: 100% 0; } }
}

/* GLIMMER: tiny sparkles pulsing around a layer */
.glimmer-layer { position:absolute; inset:0; pointer-events:none; z-index:2; }
.glimmer-layer span { position:absolute; width:3px; height:3px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%);
  opacity:0; animation: glimmerPulse 5s linear infinite;
  box-shadow:0 0 6px rgba(255,255,255,.6);
}
@media (prefers-reduced-motion: reduce) { .glimmer-layer span { animation:none; opacity:.4; } }
@keyframes glimmerPulse {
  0% { transform:scale(.4); opacity:0; }
  5% { opacity:.95; }
  55% { opacity:.15; }
  100% { transform:scale(1); opacity:0; }
}

/* Sections */
.section { padding: 3.5rem 0; scroll-margin-top: 76px; }
.section-head { display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.section-head h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.section-sub { margin: 0; color: var(--muted); }

/* Hero */
.hero { padding-top: 2.5rem; padding-bottom: 2rem; min-height: 60vh; display: grid; place-items: center; }
.hero-inner { text-align: center; display: grid; gap: .9rem; justify-items: center; }
.hero h1 { margin: 0 0 .5rem; font-size: clamp(2rem, 6vw, 3rem); letter-spacing: .2px; }
.lead { color: var(--muted); font-size: 1.1rem; }
.cta { display: flex; gap: .75rem; margin-top: 1.25rem; }
.accent { color: var(--accent-2); }

/* Hero particle silhouette canvas (no box treatment) */
.simulation-container {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 4 / 5;
  display: block;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: crosshair;
  touch-action: pan-y;
}
@media (pointer: fine) { .simulation-container { touch-action: none; } }
html[data-perf="low"] .simulation-container { cursor: default; }
@media (prefers-reduced-motion: reduce) { .simulation-container { cursor: default; } }

/* Animated accent text (subtle gradient shift) */
.accent-animated {
  background: linear-gradient(90deg, #a78bfa, #7c5cff, #2dd4bf);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  html.ready .accent-animated { animation: hueShift 8s ease-in-out infinite alternate; }
  @keyframes hueShift { to { background-position: 100% 0; } }

  /* Entrance reveal */
  .reveal { opacity: 0; transform: translateY(12px) scale(.985); filter: blur(4px); }
  html.ready .reveal { animation: fadeUp .7s cubic-bezier(.22,1,.36,1) .05s both; }
  html.ready .reveal-2 { animation-delay: .18s; }
  html.ready .reveal-3 { animation-delay: .32s; }
  @keyframes fadeUp { to { opacity: 1; transform: none; filter: blur(0); } }
}

/* Typewriter caret */
.typewriter { position: relative; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .typewriter::after {
    content: "";
    display: inline-block;
    width: 1px; height: 1.1em; vertical-align: -0.2em;
    margin-left: .15rem; background: currentColor; opacity: .9;
    animation: caretBlink 1s steps(1) infinite;
  }
  @keyframes caretBlink { 50% { opacity: 0; } }
}

/* Grid */
.grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Ensure grid items stretch to equal height within each row */
.grid > * { align-self: stretch; }

/* Project Card */
.card { display: flex; flex-direction: column; gap: .65rem; padding: 1rem; border: 1px solid var(--border); border-radius: .9rem; background: color-mix(in oklab, var(--bg) 86%, var(--bg-elev)); position: relative; overflow: hidden; height: 100%; }
.card h3 { margin: 0; font-size: 1.05rem; }
.card p { margin: 0; color: var(--muted); }
.card .tags { margin-top: .25rem; }
/* Keep CTA aligned at bottom for visual symmetry */
.card .cta { margin-top: auto; }

/* Clamp text to keep card heights consistent */
.card h3 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-clamp: 2;
}
.card p {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  line-clamp: 3;
}

/* Project card interactive styling */
.project-card { --scale: 1; --ty: 0px; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty)) scale(var(--scale)) translateZ(0); transform-style: preserve-3d; will-change: transform, box-shadow, background-color, filter; transition: transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s ease, border-color .22s ease, background-color .32s ease, filter .32s ease; }
.project-card::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit; opacity: 0;
  background-image:
    radial-gradient(260px 180px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.26), rgba(255,255,255,0) 62%),
    radial-gradient(320px 220px at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--accent) 36%, transparent) 0%, transparent 72%);
  mix-blend-mode: screen; transition: opacity .16s ease; will-change: opacity, background-position;
}
.project-card:hover::before,
.project-card.touch-active::before { opacity: .22; }
html[data-theme="light"] .project-card::before { mix-blend-mode: overlay; }
.project-card:hover,
.project-card.touch-active {
  --scale: 1.12;
  --ty: -10px;
  border-color: color-mix(in oklab, var(--accent) 80%, var(--border));
  background: color-mix(in oklab, var(--bg) 74%, var(--bg-elev));
  filter: brightness(1.10) saturate(1.12);
  box-shadow:
    0 26px 56px rgba(0,0,0,.42),
    0 0 36px color-mix(in oklab, var(--accent) 34%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  /* glossy sweep on hover */
  .project-card::after {
    content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit;
    background: linear-gradient(100deg, rgba(255,255,255,0) 45%, rgba(255,255,255,.20) 50%, rgba(255,255,255,0) 55%);
    background-size: 200% 100%; background-position: -120% 0;
    opacity: 0; transition: opacity .2s ease;
  }
  .project-card:hover::after,
  .project-card.touch-active::after { opacity: .12; animation: cardSheen 1.05s ease; }
  @keyframes cardSheen { to { background-position: 120% 0; } }
}

/* Scroll-in reveal for project cards */
.proj-reveal { opacity: 0; transform: translateY(12px) scale(.985); filter: blur(4px); }
.proj-reveal.in { opacity: 1; transform: none; filter: none; transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1), filter .6s cubic-bezier(.22,1,.36,1); }

/* Tags */
.tags { list-style: none; padding: 0; margin: .25rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.tags li { padding: .25rem .5rem; border: 1px solid var(--border); border-radius: .5rem; font-size: .85rem; color: var(--muted); }

/* About */
.about-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 800px) {
  .about-grid { grid-template-columns: 1.35fr 1fr; align-items: start; }
}
@media (min-width: 1100px) {
  .about-grid { grid-template-columns: 1.25fr 1fr; }
}

/* About photo styles */
.about-photo { align-self: start; justify-self: center; width: min(560px, 100%); position: relative; perspective: 1000px; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; }

@media (min-width: 800px) { .about-photo { justify-self: end; } }
.about-photo > img { width: 100%; height: auto; display: block; border-radius: 1rem; border: 0; box-shadow: none; background: transparent; object-fit: cover; aspect-ratio: 4/5; transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0); transition: transform .2s ease-out, box-shadow .25s ease; will-change: transform; }
.about-photo-source { display: none !important; }
.about-photo .photo-simulation { border-radius: 1rem; }
/* Optional: make photo perfectly round by adding class .round to .about-photo */
.about-photo.round img { border-radius: 50%; aspect-ratio: 1 / 1; }
.about-photo::before,
.about-photo::after {
  content: none !important;
}

.skills-block { margin-top: 1.25rem; }
.skills-block h3 { margin: 0 0 .5rem; }

/* Contact */
.contact-card { border: 1px solid var(--border); border-radius: 1rem; padding: 1rem; background: color-mix(in oklab, var(--bg) 86%, var(--bg-elev)); }
.socials { display: flex; gap: .75rem; margin-top: .5rem; }
.social { text-decoration: none; color: var(--text); padding: .5rem .6rem; border-radius: .5rem; border: 1px solid var(--border); }
.social:hover { background: var(--bg-elev); }

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding: 1.25rem 0; color: var(--muted); }

/* Focus styles */
:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 70%, white); outline-offset: 2px; border-radius: .3rem; }

/* Experience timeline */
.experience-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.experience-item { position: relative; padding: 1.1rem 1rem 1.1rem 1.3rem; border: 1px solid var(--border); border-radius: .9rem; background: color-mix(in oklab, var(--bg) 86%, var(--bg-elev)); }
.experience-item::before { content: ""; position: absolute; left: .55rem; top: 1rem; bottom: 1rem; width: 3px; border-radius: 2px; background: linear-gradient(var(--accent), var(--accent-2)); opacity: .85; }
.exp-meta { display: flex; flex-wrap: wrap; gap: .45rem 1rem; font-size: .78rem; font-weight: 600; letter-spacing: .3px; }
.exp-role { color: var(--text); }
.exp-company { color: var(--accent); }
.exp-dates { color: var(--muted); font-weight: 500; }
.exp-desc { margin: .55rem 0 .45rem; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.exp-tags { margin-top: .25rem; }