/* =============================================================
   Portfolio — stylesheet
   Sections: tokens · base · utilities · header · hero · marquee
             about · services · resume · skills · work
             testimonials · blog · contact · footer · responsive
   ============================================================= */

/* ------------------------------ TOKENS ------------------------------ */
:root {
  /* EDIT: change --accent and --accent-2 to re-skin the whole site */
  --accent: #22d3ee;
  --accent-2: #0e7490;
  --accent-soft: rgba(34, 211, 238, .12);
  --accent-line: rgba(34, 211, 238, .28);

  --font-display: "Sora", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-y: clamp(72px, 9vw, 140px);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .45s;
}

/* Dark theme (default) */
[data-theme="dark"] {
  --bg: #0b0d0c;
  --bg-2: #101312;
  --surface: #14181700;
  --surface-solid: #141817;
  --surface-2: #1b201e;
  --text: #f1f4f2;
  --text-2: #b8c0bb;
  --text-muted: #7e8a84;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, .7);
  --glow: rgba(34, 211, 238, .18);
  --on-accent: #04181d;
  color-scheme: dark;
}

/* Light theme */
[data-theme="light"] {
  --bg: #f8f7f4;
  --bg-2: #ffffff;
  --surface: #ffffff00;
  --surface-solid: #ffffff;
  --surface-2: #f1f0ec;
  --text: #111413;
  --text-2: #4d5551;
  --text-muted: #666666; /* was #7c857f — pre-existing AA fail (3.55–3.81:1) on
                            small text; unrelated to the accent, fixed in passing */
  --line: rgba(17, 20, 19, .10);
  --line-strong: rgba(17, 20, 19, .18);
  --shadow: 0 22px 50px -24px rgba(17, 30, 24, .28);
  --glow: rgba(14, 116, 144, .16);
  --accent: #0e7490;
  --accent-2: #155e75;
  --accent-soft: rgba(14, 116, 144, .10);
  --accent-line: rgba(14, 116, 144, .30);
  --on-accent: #ffffff;
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

body.nav-lock { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--text);
}

p { margin: 0 0 1.1em; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute;
  left: 50%;
  top: -60px;
  z-index: 200;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ---------------------------- UTILITIES ---------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section-alt { background: var(--bg-2); }
[data-theme="dark"] .section-alt {
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(34, 211, 238, .05), transparent 70%),
    var(--bg-2);
}

.ic { width: 20px; height: 20px; flex: none; fill: none; }

/* Cyan gradient headings. To make headings solid instead (the ZenG reference
   does this), replace both rules with: .grad { color: var(--text); } */
.grad {
  background: linear-gradient(96deg, var(--accent) 8%, var(--accent-2) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
[data-theme="dark"] .grad {
  background: linear-gradient(96deg, #7ce9fa 0%, var(--accent) 55%, #0891b2 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.eyebrow, .section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 7px 16px 7px 13px;
  border: 1px solid var(--accent-line);
  border-radius: 100px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-line); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.section-head { max-width: 660px; margin-bottom: clamp(40px, 5vw, 68px); }
.section-title { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
.section-sub { color: var(--text-2); font-size: 1.05rem; margin-bottom: 0; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform .25s var(--ease), background-color .25s var(--ease),
              border-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
}
.btn .ic { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.btn:hover { transform: translateY(-3px); }
.btn:hover .ic { transform: translate(2px, -2px); }
.btn:active { transform: translateY(-1px); }

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 10px 30px -12px var(--glow);
}
.btn-primary:hover { box-shadow: 0 18px 40px -12px var(--glow); }

.btn-ghost {
  border-color: var(--line-strong);
  color: var(--text);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-sm { padding: 11px 20px; font-size: .88rem; }
.btn-block { width: 100%; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  transition: border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* Cards */
.card {
  position: relative;
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-solid);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.cards {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.tick li {
  position: relative;
  padding-left: 22px;
  font-size: .9rem;
  color: var(--text-muted);
}
.tick li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 12px;
  height: 6px;
  border: 2px solid var(--accent);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
}

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list li {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--surface-2);
  font-size: .82rem;
  color: var(--text-2);
}
.tag-list.sm li { padding: 4px 11px; font-size: .76rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 600;
  color: var(--accent);
}
.link-arrow .ic { width: 15px; height: 15px; transition: transform .3s var(--ease); }

/* Reveal-on-scroll (JS adds .is-in) */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------ HEADER ------------------------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-block: 18px;
  transition: padding .3s var(--ease), background-color .3s var(--ease),
              border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  padding-block: 10px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  [data-theme="dark"] .site-header.is-stuck { background: rgba(11, 13, 12, .86); }
  [data-theme="light"] .site-header.is-stuck { background: rgba(248, 247, 244, .88); }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
}
.brand-text {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}
.brand-text em { font-style: normal; color: var(--accent); }

.nav-list { display: flex; align-items: center; gap: clamp(4px, 1.4vw, 10px); }
.nav-list a {
  position: relative;
  display: block;
  padding: 9px 14px;
  border-radius: 100px;
  font-size: .94rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.nav-list a:hover { color: var(--text); background: var(--surface-2); }
.nav-list a.is-active { color: var(--accent); background: var(--accent-soft); }

.nav-close, .nav-foot, .nav-open { display: none; }
.header-actions { display: flex; align-items: center; gap: 10px; }

.theme-toggle .ic-moon { display: none; }
[data-theme="light"] .theme-toggle .ic-sun { display: none; }
[data-theme="light"] .theme-toggle .ic-moon { display: block; }

.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .1s linear;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(0, 0, 0, .6);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.nav-backdrop.is-open { opacity: 1; }

/* ------------------------------- HERO ------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(120px, 15vw, 190px);
  padding-bottom: clamp(60px, 7vw, 100px);
  overflow: hidden;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .75;
  pointer-events: none;
}
[data-theme="light"] .hero-canvas { opacity: .5; }

.hero-glow {
  position: absolute;
  top: -28%;
  right: -12%;
  width: 62vw;
  height: 62vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 62%);
  filter: blur(24px);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}

.hero-title {
  /* Capped lower than a full-width hero would allow: this heading sits in a
     two-column grid, so an oversized cap wrapped it onto five lines. */
  font-size: clamp(2.05rem, 4.4vw, 3.4rem);
  font-weight: 800;
  margin-bottom: 22px;
}

/* The sizer holds the largest-rendering phrase and is invisible but laid out, so
   the wrapper's width AND height are fixed to the worst case. The animated span
   is absolutely positioned on top of it, which means typing changes no geometry
   and nothing below the heading shifts. */
.rotator-wrap {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
/* Keep each phrase on one line so it never breaks mid-phrase. Both the sizer and
   the animated span need this or the two boxes disagree. */
.rotator-sizer,
.rotator { white-space: nowrap; }
.rotator-sizer { visibility: hidden; }

.rotator {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  color: var(--accent);
}
/* Before JS runs the sizer is empty, so keep the initial text in flow to avoid
   a collapsed heading if scripts are slow or blocked. */
.rotator-wrap:not([data-sized]) .rotator { position: static; width: auto; }
.rotator::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: .95em;
  margin-left: 4px;
  vertical-align: -.12em;
  background: var(--accent);
  animation: caret .9s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.hero-lead {
  max-width: 54ch;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  color: var(--text-2);
  margin-bottom: 32px;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }

.hero-social { display: flex; gap: 10px; }
.hero-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-2);
  background: var(--surface-2);
  transition: transform .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.hero-social a:hover { transform: translateY(-4px); color: var(--accent); border-color: var(--accent); }

/* Code card — stands in for a profile photo, no image assets required */
.hero-visual { position: relative; }

.code-card {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.code-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(200deg, var(--accent-soft), transparent 45%);
  pointer-events: none;
}

.code-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.code-dots { display: flex; gap: 7px; }
.code-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--line-strong);
}
.code-dots i:nth-child(1) { background: #ec6a5e; }
.code-dots i:nth-child(2) { background: #dfb040; }
.code-dots i:nth-child(3) { background: var(--accent); }
.code-file {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--text-muted);
}

.code-body {
  margin: 0;
  padding: clamp(18px, 2.2vw, 26px);
  font-family: var(--font-mono);
  font-size: clamp(.74rem, 1.05vw, .87rem);
  line-height: 1.9;
  color: var(--text-2);
  overflow-x: auto;
  tab-size: 2;
}
/* Syntax colours stay in the cyan/teal family so the code card reads as one
   hue rather than mixing in the old mint-era sage-green/gold (measured and
   picked to clear 4.5:1 against the card background in each theme). */
.c-kw   { color: var(--accent); }
.c-var  { color: var(--text); font-weight: 500; }
.c-prop { color: var(--text-2); }
.c-str  { color: #7ce9fa; }
.c-num  { color: #2dd4bf; }
.c-bool { color: var(--accent); font-weight: 600; }
[data-theme="light"] .c-str { color: #0f766e; }
[data-theme="light"] .c-num { color: #164e63; }

/* No per-element accent override is needed: each theme's --accent clears AA as
   text on its own backgrounds, so `color: var(--accent)` is safe everywhere.
   See the contrast note near the bottom of this file for the measured ratios. */

.code-caret {
  display: inline-block;
  width: 8px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -.2em;
  background: var(--accent);
  animation: caret .9s steps(1) infinite;
}

.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
  font-size: .78rem;
  line-height: 1.35;
  color: var(--text-muted);
  animation: bob 5.5s var(--ease) infinite;
}
.float-card strong {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--accent);
}
.float-exp { top: -24px; left: -26px; }
.float-stack { bottom: -24px; right: -22px; animation-delay: -2.6s; flex-direction: column; align-items: flex-start; gap: 8px; }
.pills { display: flex; gap: 6px; }
.pills i {
  padding: 4px 9px;
  border-radius: 100px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-style: normal;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(30px, 4vw, 46px);
  border-top: 1px solid var(--line);
}
.stats li { display: flex; flex-direction: column; gap: 4px; }
.stats b {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}
/* Direct child only — the counter <span> lives inside <b> and must inherit its size. */
.stats li > span { font-size: .88rem; color: var(--text-muted); }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.scroll-hint span {
  position: relative;
  width: 1px;
  height: 30px;
  background: var(--line-strong);
  overflow: hidden;
}
.scroll-hint span::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 12px;
  background: var(--accent);
  animation: trickle 2s var(--ease) infinite;
}
@keyframes trickle {
  0%   { transform: translateY(-14px); }
  100% { transform: translateY(32px); }
}

/* ------------------------------ MARQUEE ------------------------------ */
.marquee-wrap {
  padding-block: 26px;
  border-block: 1px solid var(--line);
  background: var(--bg-2);
}
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  animation: slide 32s linear infinite;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.7vw, 1.4rem);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------- ABOUT ------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}
.about-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 260px;
  margin-top: 26px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
  font-size: .84rem;
  line-height: 1.4;
  color: var(--text-2);
}
.about-badge .ic { width: 26px; height: 26px; color: var(--accent); }
.about-badge em { font-style: normal; color: var(--text-muted); }

.fact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 28px;
  margin: 30px 0 34px;
}
.fact-list li {
  display: flex;
  flex-direction: column;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.fact-list span { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.fact-list b { font-family: var(--font-display); font-size: .98rem; color: var(--text); }
.fact-list b.ok { color: var(--accent); }
.fact-list a:hover { color: var(--accent); }

/* ----------------------------- WORK WITH ME ----------------------------- */
.fork {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}
.fork-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-solid);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.fork-panel:hover { transform: translateY(-5px); border-color: var(--accent-line); box-shadow: var(--shadow); }
.fork-panel--accent {
  border-color: var(--accent-line);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-soft), transparent 62%),
    var(--surface-solid);
}

.fork-badge {
  align-self: flex-start;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fork-panel--accent .fork-badge {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

.fork-panel h3 { margin: 0; font-size: clamp(1.2rem, 2vw, 1.5rem); }
.fork-panel > p { margin: 0; font-size: .96rem; color: var(--text-2); }
.fork-panel .tick { display: grid; gap: 8px; }
.fork-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }

/* ------------------------------- TRACKS ------------------------------- */
.track-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin: clamp(34px, 4vw, 54px) 0 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.track-head:first-of-type { margin-top: 0; }
.track-title {
  margin: 0;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  white-space: nowrap;
}
.track-sub { margin: 0; max-width: 62ch; font-size: .9rem; color: var(--text-muted); }

/* Two client projects read better as wider cards than as thirds. */
.work-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

.work-body .work-note {
  font-size: .88rem;
  color: var(--text-muted);
  padding-left: 13px;
  border-left: 2px solid var(--accent-line);
}

.work-wip {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 13px;
  border-radius: 100px;
  background: var(--surface-solid);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.work-card .work-body .link-arrow { margin-top: 16px; }
.work-card:hover .link-arrow .ic { transform: translate(3px, -3px); }

/* ------------------------------- PROCESS ------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(18px, 2.2vw, 26px);
  counter-reset: step;
}
.step {
  position: relative;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-solid);
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.step:hover { transform: translateY(-5px); border-color: var(--accent-line); }
.step-num {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent);
}
.step h3 { font-size: 1.08rem; margin-bottom: .45em; }
.step p { margin: 0; font-size: .92rem; color: var(--text-2); }

/* ------------------------------ SERVICES ------------------------------ */
.service { padding-top: 40px; overflow: hidden; }
.service::after {
  content: "";
  position: absolute;
  inset: auto -30% -70% auto;
  left: -30%;
  height: 140%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 100%, var(--accent-soft), transparent 60%);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.service:hover { transform: translateY(-6px); border-color: var(--accent-line); box-shadow: var(--shadow); }
.service:hover::after { opacity: 1; }
.service > * { position: relative; z-index: 1; }

.service-num {
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--line-strong);
  transition: color .35s var(--ease);
}
.service:hover .service-num { color: var(--accent-line); }

.service-ic {
  width: 30px;
  height: 30px;
  margin-bottom: 20px;
  color: var(--accent);
}
.service h3 { font-size: 1.25rem; }
.service p { font-size: .95rem; color: var(--text-2); }
.service .tick { display: grid; gap: 6px; margin-top: 18px; }

/* ------------------------------- RESUME ------------------------------- */
.timeline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 70px);
}
.timeline-heading {
  font-size: 1.15rem;
  padding-bottom: 16px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.timeline { position: relative; padding-left: 30px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--accent-line), var(--line) 70%);
}
.timeline li { position: relative; padding-bottom: 34px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 8px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--bg-2);
  transition: box-shadow .3s var(--ease);
}
.timeline li:hover::before { box-shadow: 0 0 0 5px var(--accent-soft); }

.tl-date {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .75rem;
}
.timeline h4 { font-size: 1.1rem; margin-bottom: .3em; }
.tl-org { margin-bottom: .5em; font-size: .88rem; color: var(--accent); }
.timeline p:last-child { margin-bottom: 0; font-size: .93rem; color: var(--text-2); }

/* ------------------------------- SKILLS ------------------------------- */
.skills-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 70px);
}
.skill-bars { display: grid; gap: 22px; align-content: start; }
.bar-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.bar-top b { font-family: var(--font-display); font-size: .95rem; color: var(--text); }
.bar-top i { font-family: var(--font-mono); font-size: .8rem; font-style: normal; color: var(--accent); }
.bar-track {
  display: block;
  height: 6px;
  border-radius: 100px;
  background: var(--surface-2);
  overflow: hidden;
  border: 1px solid var(--line);
}
.bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width 1.2s var(--ease);
}

.skill-cols { display: grid; gap: 26px; align-content: start; }
.skill-col h3 { font-size: 1rem; margin-bottom: 14px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; }

/* -------------------------------- WORK -------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.chip {
  padding: 9px 20px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-2);
  transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--line-strong); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.work-grid {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}
.work-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-solid);
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease),
              box-shadow .35s var(--ease), opacity .3s var(--ease);
}
.work-card:hover { transform: translateY(-7px); border-color: var(--accent-line); box-shadow: var(--shadow); }
.work-card.is-hidden { display: none; }

.work-media { position: relative; display: block; overflow: hidden; }
.work-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.work-card:hover .work-media img { transform: scale(1.06); }
.work-open {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  opacity: 0;
  transform: translateY(10px) scale(.85);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.work-card:hover .work-open { opacity: 1; transform: none; }

.work-body { padding: 24px clamp(20px, 2vw, 28px) 28px; }
.work-meta {
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.work-body h3 { font-size: 1.16rem; }
.work-body h3 a { transition: color .25s var(--ease); }
.work-body h3 a:hover { color: var(--accent); }
.work-body p { font-size: .93rem; color: var(--text-2); }
.work-body .tag-list { margin-top: 16px; }

.work-empty { text-align: center; color: var(--text-muted); padding-block: 40px; }

/* ---------------------------- TESTIMONIALS ---------------------------- */
.slider { max-width: 900px; margin-inline: auto; }
.slider-viewport { overflow: hidden; }
.slider-track {
  display: flex;
  transition: transform .55s var(--ease);
}
.quote {
  flex: 0 0 100%;
  margin: 0;
  padding: clamp(28px, 3.4vw, 46px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-solid);
  text-align: center;
}
.quote-ic { width: 34px; height: 34px; margin: 0 auto 20px; color: var(--accent); fill: currentColor; }
.quote blockquote {
  margin: 0 0 26px;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.015em;
  color: var(--text);
}
.quote figcaption { display: flex; align-items: center; justify-content: center; gap: 13px; }
.avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
}
.avatar::after { content: attr(data-initials); }
.quote figcaption > span:last-child { text-align: left; }
.quote figcaption b { display: block; font-family: var(--font-display); font-size: .96rem; color: var(--text); }
.quote figcaption i { font-style: normal; font-size: .82rem; color: var(--text-muted); }

.slider-ui { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; }
.slider-dots { display: flex; gap: 8px; }
.slider-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line-strong);
  transition: width .3s var(--ease), background-color .3s var(--ease);
}
.slider-dots button.is-active { width: 26px; border-radius: 100px; background: var(--accent); }

/* ------------------------------- WRITING ------------------------------- */
/* A single wide card, so one publication doesn't sit alone in a 3-up grid. */
.pub-card {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: center;
  max-width: 860px;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-solid);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.pub-card:hover { transform: translateY(-5px); border-color: var(--accent-line); box-shadow: var(--shadow); }

.pub-media { display: block; border-radius: var(--r-md); overflow: hidden; }
.pub-media img {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.pub-card:hover .pub-media img { transform: scale(1.05); }

.pub-body { display: flex; flex-direction: column; gap: 8px; }
.pub-title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--text);
}
.pub-desc { font-size: .93rem; color: var(--text-2); }
.pub-card .link-arrow { margin-top: 4px; }
.pub-card:hover .link-arrow .ic { transform: translate(3px, -3px); }

@media (max-width: 640px) {
  .pub-card { grid-template-columns: 1fr; }
}

/* Emphasis inside body copy */
.about-copy strong { color: var(--text); font-weight: 600; }

/* -------------------------------- BLOG -------------------------------- */
.post { padding: 0; overflow: hidden; }
.post:hover { transform: translateY(-7px); border-color: var(--accent-line); box-shadow: var(--shadow); }
.post-media { display: block; overflow: hidden; }
.post-media img {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.post:hover .post-media img { transform: scale(1.05); }
.post-body { padding: 24px clamp(20px, 2vw, 28px) 28px; }
.post-body h3 { font-size: 1.14rem; }
.post-body h3 a:hover { color: var(--accent); }
.post-body p { font-size: .93rem; color: var(--text-2); }
.post:hover .link-arrow .ic { transform: translate(3px, -3px); }

/* ------------------------------- CONTACT -------------------------------
   Styled after the zen-g-seven reference's contact section: a bigger,
   editorial-feeling left column (email as its own large link, location as a
   caption beneath it) and a right-column form using underline-only fields
   and pill/chip choices instead of boxed inputs and <select> dropdowns. */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 70px);
  align-items: start;
}

.contact-email-big {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 600;
  color: var(--text);
  transition: color .25s var(--ease);
}
.contact-email-big:hover { color: var(--accent); }
.contact-location {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--text-muted);
}

.contact-list { display: grid; gap: 14px; margin: 30px 0 0; }
.contact-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-solid);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.contact-list li:hover { border-color: var(--accent-line); transform: translateX(4px); }
.contact-list .ic { width: 22px; height: 22px; color: var(--accent); }
.contact-list span { display: flex; flex-direction: column; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.contact-list b { font-family: var(--font-display); font-size: 1rem; text-transform: none; letter-spacing: -.01em; color: var(--text); }
.contact-list a:hover { color: var(--accent); }

.contact-social { display: flex; gap: 10px; margin-top: 20px; }
.contact-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-2);
  transition: transform .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.contact-social a:hover { transform: translateY(-4px); color: var(--accent); border-color: var(--accent); }

/* A distinct glassy card — rounded, bordered, a soft translucent glow in the
   top-left corner, matching the reference. The glow is drawn on a ::before
   behind the real fields (negative z-index within the form's own stacking
   context), so it never interferes with input hit-targets or focus rings.
   Reuses the existing --glow token so it adapts automatically in light mode. */
.contact-form {
  position: relative;
  display: grid;
  gap: 14px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
  overflow: hidden;
  isolation: isolate;
}
.contact-form::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(55% 45% at 12% 8%, var(--glow), transparent 70%);
}

.field { display: grid; gap: 4px; }
/* `.field { display: grid }` outranks the UA `[hidden] { display: none }` rule,
   so the hidden attribute needs restating or the budget field never hides. */
.field[hidden] { display: none; }

/* Web3Forms honeypot — hidden from everyone (unlike .field label below, this
   isn't meant to be reachable via screen reader either, since it's a trap
   with no legitimate purpose for any real visitor). Still a real form
   control, so a bot that blindly fills every field still trips it. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Field labels are visually hidden to match the reference's placeholder-only
   look, but stay in the DOM (not aria-label) so screen readers still get a
   real, robustly-associated field name — the reference's actual gap is that
   its inputs have NO label anywhere, sighted or not. This keeps the look
   without reproducing that part. */
.field label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Underline-only fields: transparent fill, a hairline bottom border, no
   radius. Topic/budget are native <select> elements again (shorter form,
   one line each instead of a wrapped row of pills) styled to match — custom
   chevron via a background-image since `appearance: none` drops the native
   arrow entirely. */
.field input, .field textarea, .field select {
  width: 100%;
  padding: 10px 2px 10px;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: .95rem;
  transition: border-color .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 90px; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%237e8a84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 16px;
}
.field select option { background: var(--surface-solid); color: var(--text); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0;
  border-bottom-color: var(--accent);
}
.field.has-err input, .field.has-err textarea { border-bottom-color: #ef5f5f; }
/* No reserved height when empty — an always-present dead 13px slot under
   every field was a big share of the form's extra whitespace. It only takes
   space once there's an actual message to show. */
.err { display: block; color: #ef5f5f; font-size: .8rem; }
.err:empty { display: none; }

.button-submit { margin-top: 2px; }
.form-status { margin: 0; font-size: .88rem; color: var(--accent); }
.form-status:empty { display: none; }
.form-status.is-err { color: #ef5f5f; }

/* -------------------------------- FOOTER -------------------------------- */
.site-footer {
  padding-block: 40px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-nav a { font-size: .92rem; color: var(--text-2); transition: color .25s var(--ease); }
.footer-nav a:hover { color: var(--accent); }
.copy { margin: 0; font-size: .86rem; color: var(--text-muted); }

.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface-solid);
  color: var(--text);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  box-shadow: var(--shadow);
  transition: opacity .3s var(--ease), transform .3s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--accent); border-color: var(--accent); }

/* ------------------------------ RESPONSIVE ------------------------------ */
@media (max-width: 1080px) {
  /* Headline leads on narrow screens; the code card follows it. */
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 560px; }
  .float-exp { top: -20px; left: auto; right: 12px; }
  .float-stack { right: auto; left: -12px; bottom: -20px; }
  .about-grid, .skills-grid, .contact-grid, .timeline-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 80px; }

  /* A `backdrop-filter` makes the header the containing block for any
     position:fixed descendant, which collapses the drawer below to the
     header's own height. Opt out on mobile and use an opaque bar instead. */
  .site-header.is-stuck {
    backdrop-filter: none;
    background: var(--bg);
  }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    width: min(320px, 84vw);
    padding: 80px 32px 40px;
    overflow-y: auto;
    background: var(--bg-2);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform .38s var(--ease);
  }
  .nav.is-open { transform: none; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav-list a { padding: 13px 16px; font-size: 1.05rem; border-radius: var(--r-sm); }

  .nav-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
  }
  .nav-foot { display: flex; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
  .nav-foot a { color: var(--text-2); transition: color .25s var(--ease); }
  .nav-foot a:hover { color: var(--accent); }
  .nav-open { display: grid; }

  .stats { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
  .fact-list { grid-template-columns: 1fr; }
  .scroll-hint { display: none; }
}

@media (max-width: 620px) {
  .hire-btn { display: none; }
  .float-card { padding: 11px 14px; font-size: .72rem; }
  .float-card strong { font-size: 1.35rem; }
  .btn { padding: 13px 22px; }
  .quote { padding: 26px 20px; }
  .footer-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 420px) {
  .float-stack { display: none; }
  .brand-text { display: none; }
}

/* --------------------------- MOTION PREFERENCES --------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-canvas { display: none; }
}

/* ------------------------------- PRINT ------------------------------- */
@media print {
  .site-header, .to-top, .hero-canvas, .hero-glow, .marquee-wrap,
  .contact-form, .slider-ui, .filters { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 24px; }
}