/* Portfolio front page (index.html).
   Everything is visible by default. Motion only runs when home.js has added .hm-js to <html>
   (a failsafe in the <head> removes it again if home.js never loads) and the reader has not
   asked for reduced motion: the hero enters once, the portrait trace draws itself, section
   rules and wires draw as they scroll in, stats count up, cards lift on hover. */

:root{
  --bg:#0B0E13; --bg-soft:#10141B; --panel:#151A23; --panel-border:#232A36;
  --text:#ECEEF2; --text-muted:#8C94A3; --text-dim:#7A8291;
  --accent:#4ADE80; --accent-dim:#2E8B57; --gold:#F0B429; --red:#F2545B; --sky:#38BDF8;
  /* one hue per layer of the stack; reused for stats, cards and quotes */
  --h-client:#38BDF8; --h-api:#4ADE80; --h-data:#2DD4BF; --h-ai:#A78BFA; --h-ship:#FBBF24; --h-sec:#FB7185;
  --glow:rgba(74,222,128,.11); --grid:rgba(255,255,255,.028); --shadow:rgba(0,0,0,.55);
  --font-display:'Space Grotesk', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --font-body:'Inter', sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="light"]{
  --bg:#F6F5F1; --bg-soft:#EFEDE7; --panel:#FFFFFF; --panel-border:#DDD9CE;
  --text:#15181E; --text-muted:#4F5664; --text-dim:#5F6673;
  --accent:#15803D; --accent-dim:#4CAF7A; --gold:#B45309; --red:#DC2626; --sky:#0369A1;
  --h-client:#0369A1; --h-api:#15803D; --h-data:#0F766E; --h-ai:#7C3AED; --h-ship:#B45309; --h-sec:#BE123C;
  --glow:rgba(21,128,61,.09); --grid:rgba(0,0,0,.045); --shadow:rgba(40,36,24,.22);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{ background:var(--accent); color:#0B0E13; }
:root[data-theme="light"] ::selection{ color:#fff; }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:1000px; margin:0 auto; padding:0 28px; }

/* ---------- background grid texture ---------- */
.bg-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 80%);
          mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 80%);
}

/* ---------- nav ---------- */
header.nav{
  position:sticky; top:0; z-index:50;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom:1px solid var(--panel-border);
}
.nav-inner{ max-width:1000px; margin:0 auto; padding:14px 28px; display:flex; align-items:center; justify-content:space-between; }
.nav-mark{ font-family:var(--font-mono); font-size:13px; color:var(--accent); display:flex; align-items:center; gap:8px; }
.nav-mark .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
.nav-links{ margin-left:auto; display:flex; align-items:center; gap:26px; font-family:var(--font-mono); font-size:12.5px; color:var(--text-muted); }
.nav-links a{ position:relative; white-space:nowrap; transition:color .15s; }
.nav-links a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
.nav-links a:hover{ color:var(--accent); }
.nav-links a:not(.nav-cta):hover::after{ transform:scaleX(1); }
.nav-links .nav-cta:hover{ background:var(--accent); color:#0B0E13; }
:root[data-theme="light"] .nav-links .nav-cta:hover{ color:#fff; }
/* Résumé and Study share one pill design: same height, font and padding, centred with the theme toggle.
   Study is shown next to Résumé once the reader has signed in on the study pages. */
.nav-links .nav-cta, .nav-study{
  display:inline-flex; align-items:center; height:34px; padding:0 12px; box-sizing:border-box;
  font-family:var(--font-mono); font-size:12px; line-height:1; color:var(--accent);
  border:1px solid var(--accent-dim); border-radius:8px; white-space:nowrap; transition:background-color .15s, color .15s;
}
.nav-study{ margin-left:10px; }
.nav-study[hidden]{ display:none; } /* the pill's display:inline-flex would otherwise override [hidden] */
.nav-study:hover{ background:var(--accent); color:#0B0E13; }
:root[data-theme="light"] .nav-study:hover{ color:#fff; }
.nav-study:not([hidden]) + .install-btn, .nav-study:not([hidden]) + .install-btn[hidden] + .theme-toggle, .nav-study:not([hidden]) + .theme-toggle{ margin-left:10px; }
/* Small phones: logo + Résumé + Study + install + theme must fit in 375px without sideways scroll. */
@media (max-width:480px){
  .nav-inner{ padding-left:14px; padding-right:14px; }
  .nav-mark{ font-size:12px; gap:6px; }
  .nav-links .nav-cta, .nav-study{ padding:0 9px; font-size:11.5px; }
  .nav-study{ margin-left:6px; }
  .nav-study:not([hidden]) + .install-btn, .nav-study:not([hidden]) + .install-btn[hidden] + .theme-toggle,
  .nav-study:not([hidden]) + .theme-toggle, .install-btn:not([hidden]) + .theme-toggle{ margin-left:6px; }
}
.theme-toggle{
  margin-left:16px; width:34px; height:34px; border-radius:8px; border:1px solid var(--panel-border);
  background:var(--panel); color:var(--text); font-size:15px; line-height:1; cursor:pointer; flex-shrink:0;
  transition:border-color .15s, transform .25s var(--ease);
}
.theme-toggle:hover{ border-color:var(--accent); }
#theme-toggle:active{ transform:rotate(-30deg) scale(.94); }
.install-btn{ display:inline-flex; align-items:center; justify-content:center; color:var(--accent); }
.install-btn[hidden]{ display:none; }
.install-btn:not([hidden]) + .theme-toggle{ margin-left:8px; }
@media (max-width:900px){ .nav-links{ gap:18px; } }
@media (max-width:640px){ .nav-links a:not(.nav-cta){ display:none; } .nav-links{ gap:0; } .nav-inner{ padding:12px 16px; } }

.install-sheet{
  position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:60;
  max-width:420px; margin:0 auto; background:var(--panel); border:1px solid var(--accent-dim); border-radius:12px;
  padding:14px 16px 6px; box-shadow:0 10px 30px rgba(0,0,0,.35); font-size:14px; color:var(--text-muted);
}
.install-sheet[hidden]{ display:none; }
.install-sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; color:var(--text); font-family:var(--font-mono); font-size:13px; }
.install-sheet-close{ background:none; border:none; color:var(--text-dim); font-size:15px; cursor:pointer; padding:4px 6px; }
.install-sheet ol{ margin:0 0 8px 18px; }
.install-sheet li{ margin-bottom:6px; }
.install-sheet b{ color:var(--text); }
.install-sheet svg{ vertical-align:-2px; color:var(--accent); }

/* ---------- hero ---------- */
.hero{ padding:84px 0 64px; position:relative; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:48px; align-items:start; }
.eyebrow{ font-family:var(--font-mono); font-size:13px; color:var(--accent); display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.eyebrow .blink{ flex-shrink:0; width:8px; height:14px; background:var(--accent); animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

h1.name{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(42px, 7vw, 74px); line-height:.98; letter-spacing:-.035em;
  margin:0 0 20px -.03em;
}
h1.name .surname{ color:var(--text-muted); font-weight:500; }
.hook{ font-family:var(--font-display); font-weight:500; font-size:clamp(19px, 2.6vw, 25px); line-height:1.3; letter-spacing:-.01em; color:var(--text); margin:0 0 14px; max-width:640px; }
.role-line{ font-family:var(--font-mono); font-size:clamp(13.5px, 1.9vw, 15.5px); color:var(--text-muted); max-width:680px; margin-bottom:28px; line-height:1.7; }
.role-line .pipe{ color:var(--text-dim); margin:0 8px; }
.role-line .hl{ color:var(--text); }

/* at-a-glance: three colour-coded rows that match the three nodes on the portrait trace */
.glance{
  max-width:700px; border:1px solid var(--panel-border); border-radius:12px; margin:0 0 28px; overflow:hidden;
  background:linear-gradient(180deg, var(--panel), var(--bg-soft));
}
.glance-row{
  --h:var(--sky);
  position:relative; display:grid; grid-template-columns:96px 1fr; gap:6px 14px; align-items:center; padding:13px 18px;
  transition:background-color .2s ease;
}
.glance-row.ai{ --h:var(--accent); }
.glance-row.plat{ --h:var(--gold); }
.glance-row::before{
  content:""; position:absolute; left:0; top:10px; bottom:10px; width:2px; border-radius:2px; background:var(--h);
  opacity:.5; transform:scaleY(.5); transition:transform .25s var(--ease), opacity .25s ease;
}
.glance-row:hover{ background:color-mix(in srgb, var(--h) 5%, transparent); }
.glance-row:hover::before{ opacity:1; transform:scaleY(1); }
.glance-row + .glance-row{ border-top:1px solid var(--panel-border); }
.glance-label{ font-family:var(--font-display); font-size:13.5px; font-weight:500; color:var(--h); }
.glance-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.glance-chips span{
  font-family:var(--font-mono); font-size:12.5px; padding:4px 11px; border-radius:6px; color:var(--h);
  border:1px solid color-mix(in srgb, var(--h) 38%, transparent); background:color-mix(in srgb, var(--h) 8%, transparent);
}
@media (max-width:560px){ .glance-row{ grid-template-columns:1fr; } }

.summary-text{ max-width:680px; font-size:16px; color:var(--text-muted); }
.summary-text strong{ color:var(--text); font-weight:600; }
.hero .summary-text{ margin:0 0 26px; }
.meta-row{ display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; margin-bottom:34px; }
.meta-item{ font-family:var(--font-mono); font-size:13px; color:var(--text-muted); display:flex; align-items:center; gap:7px; min-width:0; overflow-wrap:anywhere; }
.meta-item svg{ width:14px; height:14px; stroke:var(--accent); flex-shrink:0; }

.cta-row{ display:flex; flex-wrap:wrap; gap:12px; }
.btn{
  font-family:var(--font-mono); font-size:13px; padding:11px 20px; border-radius:8px;
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--panel-border);
  transition:transform .2s var(--ease), border-color .15s, background-color .15s, color .15s, box-shadow .2s ease;
}
.btn-primary{ background:var(--accent); color:#0B0E13; font-weight:600; border-color:var(--accent); }
:root[data-theme="light"] .btn-primary{ color:#fff; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -10px color-mix(in srgb, var(--accent) 75%, transparent); }
.btn-ghost{ color:var(--text); background:var(--panel); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--accent); color:var(--accent); }

/* portrait with a self-drawing trace and three nodes (domains, AI, platform) */
.hero-portrait{ position:relative; width:250px; margin-top:6px; }
.hero-portrait::before{
  content:""; position:absolute; z-index:-1; inset:-70px; pointer-events:none;
  background:radial-gradient(closest-side, var(--glow), transparent);
}
.hero-photo{
  position:relative; margin:0; border:1px solid var(--panel-border); border-radius:18px; overflow:hidden;
  background:var(--panel); box-shadow:0 28px 60px -30px var(--shadow);
}
.hero-photo img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
.hero-trace{ position:absolute; inset:-12px; width:calc(100% + 24px); height:auto; overflow:visible; pointer-events:none; }
.trace-path, .trace-ring{ fill:none; stroke:color-mix(in srgb, var(--accent) 38%, var(--panel-border)); stroke-width:1.2; }
.trace-ring{ display:none; }
.trace-node .dot{ fill:var(--bg); stroke:var(--h); stroke-width:2.2; transition:fill .25s ease; }
.trace-node .halo{
  fill:var(--h); fill-opacity:0; stroke:var(--h); stroke-opacity:.35; stroke-width:1;
  transform-box:fill-box; transform-origin:center; transition:fill-opacity .25s ease, transform .3s var(--ease);
}
.trace-node.is-hot .dot{ fill:var(--h); }
.trace-node.is-hot .halo{ fill-opacity:.18; stroke-opacity:.7; transform:scale(1.45); }
.trace-node[data-node="dom"]{ --h:var(--sky); transform:translate(84px, 1px); }
.trace-node[data-node="ai"]{ --h:var(--accent); transform:translate(273px, 118px); }
.trace-node[data-node="plat"]{ --h:var(--gold); transform:translate(150px, 273px); }

@media (max-width:820px){
  .hero{ padding-top:56px !important; }
  .hero-grid{ grid-template-columns:1fr; gap:26px; }
  .hero-portrait{ order:-1; width:104px; margin:8px 0 0 8px; }
  .hero-portrait::before{ inset:-50px; }
  .hero-photo{ height:104px; border-radius:50%; }
  .hero-photo img{ height:100%; object-position:center 28%; }
  .hero-trace{ inset:-8px; width:calc(100% + 16px); }
  .trace-path{ display:none; }
  .trace-ring{ display:inline; stroke-width:2.6; }
  .trace-node[data-node="dom"]{ transform:translate(79.5px, 13.7px) scale(1.7); }
  .trace-node[data-node="ai"]{ transform:translate(270.9px, 113.4px) scale(1.7); }
  .trace-node[data-node="plat"]{ transform:translate(113.4px, 270.9px) scale(1.7); }
}

/* ---------- stats ---------- */
.stat-row{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:44px; }
.stat{
  --h:var(--h-api);
  position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--panel-border);
  border-radius:12px; padding:20px 20px 18px;
}
.stat:nth-child(2){ --h:var(--h-client); }
.stat:nth-child(3){ --h:var(--h-ship); }
.stat:nth-child(4){ --h:var(--h-data); }
.stat::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--h); transform-origin:left;
}
.stat::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(180px circle at 0 0, color-mix(in srgb, var(--h) 10%, transparent), transparent 70%);
}
.stat-val{ position:relative; font-family:var(--font-display); font-size:clamp(26px, 3.4vw, 32px); font-weight:700; letter-spacing:-.02em; color:var(--h); font-variant-numeric:tabular-nums; line-height:1.15; }
.stat-label{ position:relative; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--text-dim); margin-top:6px; }
@media (max-width:760px){ .stat-row{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; } .stat{ padding:16px; } }

/* ---------- section shell ---------- */
section{ padding:76px 0; border-top:1px solid var(--panel-border); }
.sec-head{ display:flex; align-items:center; gap:16px; margin-bottom:38px; }
.sec-title{ font-family:var(--font-display); font-size:clamp(24px, 3.4vw, 32px); font-weight:600; letter-spacing:-.02em; line-height:1.15; }
.sec-rule{
  flex:1; height:1px; transform-origin:left;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 20%, var(--panel-border)) 30%, var(--panel-border));
}

/* ---------- experience: a timeline whose line draws down as it scrolls in ---------- */
.job{ position:relative; padding:0 0 42px 30px; }
.job::after{
  content:""; position:absolute; left:0; top:6px; bottom:-6px; width:1px; background:var(--panel-border); transform-origin:top;
}
.job:last-child{ padding-bottom:0; }
.job:last-child::after{ bottom:0; }
.job::before{
  content:""; position:absolute; z-index:1; left:-5px; top:5px; width:11px; height:11px;
  border-radius:50%; background:var(--bg); border:2px solid var(--accent-dim);
}
#experience > .sec-head + .job::before{ border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 50%, transparent); }
.job-status{ font-family:var(--font-mono); font-size:11.5px; color:var(--accent); margin-bottom:6px; }
.job-head{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:4px; }
.job-role{ font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:-.01em; line-height:1.35; }
.job-org{ display:flex; align-items:center; gap:7px; color:var(--text-muted); font-size:14.5px; }
.job-client{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:7px; font-family:var(--font-mono); font-size:12px; color:var(--gold);
  margin:4px 0 12px; padding:4px 10px 4px 6px; border-radius:7px;
  background:color-mix(in srgb, var(--gold) 8%, transparent); border:1px solid color-mix(in srgb, var(--gold) 22%, transparent);
}
.org-logo{ width:22px; height:22px; flex-shrink:0; border-radius:6px; object-fit:contain; background:#fff; border:1px solid var(--panel-border); padding:2px; }
.job-client .org-logo, .job-org .org-logo{ width:17px; height:17px; border-radius:4px; padding:1.5px; }
.org-badge{ display:inline-flex; align-items:center; justify-content:center; padding:0; border:none; color:#fff; font-family:var(--font-mono); font-weight:700; letter-spacing:-.02em; }
.job-head .org-badge{ font-size:9px; }
.job-client .org-badge, .job-org .org-badge{ font-size:7.5px; }
.job-client .loc{ color:var(--text-muted); }
.job-client + .job-points{ margin-bottom:22px; }
.job-date{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); margin-bottom:12px; }
.job-points{ list-style:none; max-width:760px; }
.job-points li{ position:relative; padding-left:18px; margin-bottom:9px; font-size:14.5px; color:var(--text-muted); }
.job-points li::before{ content:'›'; position:absolute; left:0; color:var(--accent); font-family:var(--font-mono); }
.more-jobs[hidden]{ display:none; }
.jobs-toggle{
  display:inline-flex; align-items:center; gap:6px; margin:-8px 0 40px 30px;
  font-family:var(--font-mono); font-size:12.5px; color:var(--accent);
  background:none; border:none; padding:4px 0; cursor:pointer;
}
.jobs-toggle:hover{ text-decoration:underline; }
.jobs-toggle .chev{ display:inline-block; transition:transform .2s var(--ease); }
.jobs-toggle.open .chev{ transform:rotate(180deg); }

/* ---------- stack: layered system map, one hue per layer, joined by a wire ---------- */
.stack-intro{ color:var(--text-muted); font-size:15px; max-width:640px; margin:-14px 0 20px; }
.stack-legend{ display:flex; flex-wrap:wrap; gap:18px; font-family:var(--font-mono); font-size:12px; color:var(--text-muted); margin-bottom:24px; }
.stack-legend i{ display:inline-block; width:22px; height:10px; border-radius:3px; vertical-align:-1px; margin-right:7px; }
.stack-legend .k-prod{ border:1px solid var(--text-dim); background:color-mix(in srgb, var(--text-dim) 18%, transparent); }
.stack-legend .k-build{ border:1px dashed var(--gold); }
.stack-map{ display:flex; flex-direction:column; }
.stack-map > :nth-child(1){ --h:var(--h-client); }
.stack-map > :nth-child(2){ --hp:var(--h-client); --h:var(--h-api); }
.stack-map > :nth-child(3){ --h:var(--h-api); }
.stack-map > :nth-child(4){ --hp:var(--h-api); --h:var(--h-data); }
.stack-map > :nth-child(5){ --h:var(--h-data); }
.stack-map > :nth-child(6){ --hp:var(--h-data); --h:var(--h-ai); }
.stack-map > :nth-child(7){ --h:var(--h-ai); }
.stack-map > :nth-child(8){ --hp:var(--h-ai); --h:var(--h-ship); }
.stack-map > :nth-child(9){ --h:var(--h-ship); }
.stack-map > :nth-child(10){ --hp:var(--h-ship); --h:var(--h-sec); }
.stack-map > :nth-child(11){ --h:var(--h-sec); }
.layer{
  --h:var(--accent);
  position:relative; overflow:hidden; display:grid; grid-template-columns:170px 1fr; gap:8px 22px;
  background:var(--panel); border:1px solid var(--panel-border); border-radius:12px; padding:18px 22px 16px 24px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.layer::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--h); }
.layer::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.6; transition:opacity .25s ease;
  background:radial-gradient(300px circle at 0 0, color-mix(in srgb, var(--h) 9%, transparent), transparent 70%);
}
.layer > *{ position:relative; z-index:1; }
.layer:hover, .layer:focus-within{ border-color:color-mix(in srgb, var(--h) 45%, var(--panel-border)); box-shadow:0 12px 28px -20px color-mix(in srgb, var(--h) 60%, transparent); }
.layer:hover::after, .layer:focus-within::after{ opacity:1; }
@media (max-width:700px){ .layer{ grid-template-columns:1fr; padding:16px 16px 14px 19px; } }
.layer-name{ font-family:var(--font-display); font-size:16px; font-weight:600; letter-spacing:-.005em; color:var(--h); line-height:1.3; }
.layer-desc{ font-size:13px; font-weight:400; color:var(--text-dim); margin-top:3px; font-family:var(--font-body); }
.layer-arrow{ position:relative; height:26px; font-size:0; color:transparent; }
.layer-arrow::before{
  content:""; position:absolute; left:32px; top:0; bottom:5px; width:2px; border-radius:1px;
  background:linear-gradient(var(--hp), var(--h)); transform-origin:top;
}
.layer-arrow::after{
  content:""; position:absolute; left:29px; bottom:0; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--h);
}
.layer-tools{ display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start; }
.tool{
  font-family:var(--font-mono); font-size:12px; padding:5px 10px; border-radius:6px; cursor:pointer;
  background:var(--bg-soft); color:var(--text); border:1px solid color-mix(in srgb, var(--h) 35%, var(--panel-border));
  transition:border-color .15s, background-color .15s, color .15s, transform .15s var(--ease);
}
.tool.building{ border:1px dashed var(--gold); color:var(--text-muted); }
.tool:hover, .tool:focus-visible, .tool.on{ border-color:var(--h); background:color-mix(in srgb, var(--h) 12%, var(--bg-soft)); color:var(--h); transform:translateY(-1px); }
.tool.building:hover, .tool.building:focus-visible, .tool.building.on{ border-color:var(--gold); background:color-mix(in srgb, var(--gold) 12%, var(--bg-soft)); color:var(--gold); }
.tool:focus-visible{ outline-color:var(--h); }
.layer-proof{ grid-column:1 / -1; font-family:var(--font-mono); font-size:12px; color:var(--text-dim); min-height:18px; padding-top:8px; border-top:1px dashed var(--panel-border); margin-top:4px; }
.layer-proof b{ color:var(--text); font-weight:500; }
@media (min-width:701px){ .layer-proof{ grid-column:2; } }

/* ---------- projects ---------- */
.proj-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
@media (max-width:760px){ .proj-grid{ grid-template-columns:1fr; } }
.proj-card{
  --h:var(--h-ai);
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--panel-border); border-radius:14px; padding:24px;
  transition:border-color .2s ease, transform .2s var(--ease), box-shadow .2s ease;
}
.proj-card:nth-child(4n+2){ --h:var(--h-ship); }
.proj-card:nth-child(4n+3){ --h:var(--h-api); }
.proj-card:nth-child(4n+4){ --h:var(--h-client); }
.proj-card::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55; transition:opacity .25s ease;
  background:radial-gradient(320px circle at 0 0, color-mix(in srgb, var(--h) 12%, transparent), transparent 70%);
}
.proj-card > *{ position:relative; }
a.proj-card:hover, a.proj-card:focus-visible{
  border-color:color-mix(in srgb, var(--h) 60%, var(--panel-border)); transform:translateY(-3px);
  box-shadow:0 16px 34px -20px color-mix(in srgb, var(--h) 60%, transparent);
}
a.proj-card:hover::before, a.proj-card:focus-visible::before{ opacity:1; }
a.proj-card:focus-visible{ outline-color:var(--h); border-radius:14px; }
.proj-body{ display:flex; flex-direction:column; height:100%; }
.proj-title-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-bottom:6px; }
.proj-title{ font-family:var(--font-display); font-size:21px; font-weight:600; letter-spacing:-.015em; line-height:1.25; }
.proj-badge{
  font-family:var(--font-mono); font-size:10.5px; color:var(--h); padding:3px 8px; border-radius:5px;
  border:1px solid color-mix(in srgb, var(--h) 35%, transparent); background:color-mix(in srgb, var(--h) 9%, transparent);
}
.proj-period{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); margin-bottom:12px; }
.proj-desc{ color:var(--text-muted); font-size:14.5px; margin-bottom:18px; }
.tag-list{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{ font-family:var(--font-mono); font-size:12px; padding:5px 10px; background:var(--bg-soft); border:1px solid var(--panel-border); border-radius:6px; color:var(--text-muted); }
.proj-body .tag-list{ margin-top:auto; }
.proj-private{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin-top:14px; font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim); }
.proj-private > span::before{ content:'\1F512\00a0'; }
.proj-more{ align-self:flex-start; font-family:var(--font-mono); font-size:12.5px; color:var(--h); margin-top:16px; transition:transform .2s var(--ease); }
a.proj-card:hover .proj-more, a.proj-card:focus-visible .proj-more{ transform:translateX(4px); }
.project-link{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:12.5px; color:var(--accent); }
.project-link:hover{ text-decoration:underline; }

/* ---------- recommendations ---------- */
.rec-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
@media (max-width:760px){ .rec-grid{ grid-template-columns:1fr; } }
.rec{
  --h:var(--h-api);
  position:relative; margin:0; background:var(--panel); border:1px solid var(--panel-border); border-radius:14px;
  padding:22px 24px; display:flex; flex-direction:column; gap:16px; transition:border-color .2s ease;
}
.rec:nth-child(2){ --h:var(--h-client); }
.rec:nth-child(3){ --h:var(--h-ai); }
.rec:nth-child(4){ --h:var(--h-ship); }
.rec:hover{ border-color:color-mix(in srgb, var(--h) 45%, var(--panel-border)); }
.rec blockquote{ font-size:14.5px; line-height:1.7; color:var(--text-muted); }
.rec blockquote::before{
  content:'\201C'; display:block; height:26px; margin-bottom:6px; color:var(--h);
  font-family:var(--font-display); font-weight:700; font-size:54px; line-height:1;
}
.rec figcaption{ margin-top:auto; font-size:13px; color:var(--text-dim); padding-top:14px; border-top:1px solid var(--panel-border); }
.rec figcaption strong{ display:block; color:var(--text); font-family:var(--font-display); font-weight:600; font-size:15px; }

/* ---------- education ---------- */
.edu-row{
  position:relative; overflow:hidden; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  background:var(--panel); border:1px solid var(--panel-border); border-radius:14px; padding:22px 24px;
}
.edu-row::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(320px circle at 100% 50%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
}
.edu-row > *{ position:relative; }
.edu-deg{ font-family:var(--font-display); font-size:17px; font-weight:600; }
.edu-school{ color:var(--text-muted); font-size:14px; margin-top:3px; }
.edu-grade{ font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--accent); align-self:center; font-variant-numeric:tabular-nums; }

/* ---------- footer / contact ---------- */
footer{ position:relative; padding:84px 0 50px; border-top:1px solid var(--panel-border); text-align:center; overflow:hidden; }
footer::before{
  content:""; position:absolute; z-index:-1; left:50%; top:0; width:760px; height:420px; transform:translate(-50%, -45%);
  pointer-events:none; background:radial-gradient(closest-side, var(--glow), transparent);
}
.foot-title{ font-family:var(--font-display); font-size:clamp(30px, 5vw, 48px); font-weight:700; letter-spacing:-.03em; line-height:1.08; margin:0 auto 16px; max-width:18em; text-wrap:balance; }
.foot-sub{ color:var(--text-muted); font-size:15.5px; max-width:480px; margin:0 auto 32px; }
.foot-links{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:50px; }
.foot-links .btn{ max-width:100%; overflow-wrap:anywhere; }
@property --border-angle{ syntax:'<angle>'; inherits:true; initial-value:0deg; }
.puzzle{
  position:relative; display:inline-flex; flex-direction:column; align-items:center; gap:8px; max-width:100%;
  margin:0 auto 40px; padding:14px 20px; border-radius:12px; border:2px solid transparent;
  font-family:var(--font-mono); font-size:13px; color:var(--text-muted);
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(from var(--border-angle), #F2545B, #F0B429, #4ADE80, #38BDF8, #A855F7, #F2545B) border-box;
  animation:puzzle-spin 5s linear infinite;
}
@keyframes puzzle-spin{ to{ --border-angle:360deg; } }
.puzzle-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.puzzle-q{ color:var(--text); font-size:15px; }
.puzzle input{ width:74px; font:inherit; font-size:16px; color:var(--accent); background:var(--bg-soft); border:1px solid var(--panel-border); border-radius:6px; padding:6px 10px; text-align:center; outline:none; }
.puzzle input:focus{ border-color:var(--accent); }
/* One focus ring: the green border plus a soft glow against it (an outline on top read as a double stroke). */
.puzzle input:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.puzzle-go{ font:inherit; font-size:13px; font-weight:600; color:#0B0E13; background:var(--accent); border:none; border-radius:6px; padding:7px 14px; cursor:pointer; min-height:34px; }
:root[data-theme="light"] .puzzle-go{ color:#fff; }
.puzzle-go:hover{ filter:brightness(1.1); }
.puzzle-go:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.puzzle-msg{ min-height:18px; font-size:12px; color:var(--text-dim); }
.puzzle.wrong{ animation:shake .35s; background:linear-gradient(var(--bg),var(--bg)) padding-box, linear-gradient(var(--gold),var(--gold)) border-box; }
.puzzle.right{ animation:none; background:linear-gradient(var(--bg),var(--bg)) padding-box, linear-gradient(var(--accent),var(--accent)) border-box; }
@keyframes shake{ 20%{ transform:translateX(-6px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(4px); } }
.foot-bottom{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim); }

@media (max-width:640px){
  .wrap{ padding:0 16px; }
  section{ padding:60px 0; }
  .sec-head{ margin-bottom:30px; }
  .proj-card, .rec{ padding:20px; }
}

/* ---------- motion (only with home.js, only without reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference){
  /* hero: one orchestrated entrance */
  .hm-js .hero-main > *{ animation:hm-rise .7s var(--ease) both; }
  .hm-js .hero-main > :nth-child(2){ animation-delay:.06s; }
  .hm-js .hero-main > :nth-child(3){ animation-delay:.14s; }
  .hm-js .hero-main > :nth-child(4){ animation-delay:.2s; }
  .hm-js .hero-main > :nth-child(5){ animation-delay:.26s; }
  .hm-js .hero-main > :nth-child(6){ animation-delay:.32s; }
  .hm-js .hero-main > :nth-child(7){ animation-delay:.38s; }
  .hm-js .hero-main > :nth-child(8){ animation-delay:.44s; }
  .hm-js .hero-photo{ animation:hm-fade .9s .1s ease both; }
  .hm-js .trace-path, .hm-js .trace-ring{ stroke-dasharray:1; animation:hm-draw 1.5s .35s cubic-bezier(.45,.1,.25,1) both; }
  .hm-js .trace-node .dot{ transform-box:fill-box; transform-origin:center; animation:hm-pop .45s cubic-bezier(.3,1.5,.5,1) both; }
  .hm-js .trace-node[data-node="dom"] .dot{ animation-delay:.6s; }
  .hm-js .trace-node[data-node="ai"] .dot{ animation-delay:.95s; }
  .hm-js .trace-node[data-node="plat"] .dot{ animation-delay:1.3s; }
  .hm-js .trace-node .halo{ animation:hm-breathe 7.5s ease-in-out infinite; }
  .hm-js .trace-node[data-node="dom"] .halo{ animation-delay:2s; }
  .hm-js .trace-node[data-node="ai"] .halo{ animation-delay:4.5s; }
  .hm-js .trace-node[data-node="plat"] .halo{ animation-delay:7s; }
  .hm-js .trace-node.is-hot .halo{ animation:none; }

  /* scroll-in: rules and lines draw, grouped cards rise in a short stagger */
  .hm-js .sec-rule{ transform:scaleX(0); transition:transform 1s var(--ease) .15s; }
  .hm-js .sec-head.in .sec-rule{ transform:none; }
  .hm-js .stat::before{ transform:scaleX(0); transition:transform .9s var(--ease); transition-delay:calc(.2s + var(--i, 0) * 90ms); }
  .hm-js .stat-row.in .stat::before{ transform:none; }

  .hm-js .job{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s var(--ease); }
  .hm-js .job::after{ transform:scaleY(0); transition:transform 1.1s var(--ease) .2s; }
  .hm-js .job.in{ opacity:1; transform:none; }
  .hm-js .job.in::after{ transform:none; }

  .hm-js [data-stagger] > *{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s var(--ease), border-color .2s ease, box-shadow .2s ease; transition-delay:calc(var(--i, 0) * 70ms); }
  .hm-js [data-stagger].in > *{ opacity:1; transform:none; }
  .hm-js [data-stagger].in > a.proj-card:hover, .hm-js [data-stagger].in > a.proj-card:focus-visible{ transform:translateY(-3px); transition-delay:0s; }
  .hm-js .stack-map > .layer-arrow{ opacity:1; transform:none; }
  .hm-js .stack-map > .layer-arrow::before{ transform:scaleY(0); transition:transform .35s ease; transition-delay:calc(.25s + var(--i, 0) * 70ms); }
  .hm-js .stack-map.in > .layer-arrow::before{ transform:none; }
}
@keyframes hm-rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes hm-fade{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }
@keyframes hm-draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes hm-pop{ from{ transform:scale(0); } to{ transform:scale(1); } }
@keyframes hm-breathe{
  0%, 22%, 100%{ transform:scale(1); stroke-opacity:.35; }
  9%{ transform:scale(1.6); stroke-opacity:.75; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .btn:hover, a.proj-card:hover, a.proj-card:focus-visible, .tool:hover, .tool.on, .tool:focus-visible{ transform:none; }
  a.proj-card:hover .proj-more{ transform:none; }
}