/* ============================================================
   Gangadhar Gaikwad — Liquid Portfolio (production)
   Self-contained: design tokens + portfolio styles.
   Fonts are loaded via <link> in index.html.
   ============================================================ */

:root {
  /* === Core palette === */
  --ink:#0A0A0C; --ink-2:#14141A; --ink-3:#1F1F28;
  --bone:#F2EFE6; --bone-2:#D9D6CD; --bone-3:#9A988F;
  --mercury:#D7D9E0; --mercury-2:#8A8C95;
  --voltage:#C8FF3D; --voltage-2:#9FE015;
  --plasma:#FF5B2E; --plasma-2:#E03A0F;

  /* === Translucent layers ===
     Each token declares an rgba() fallback first, then the color-mix()
     override. Browsers that don't support color-mix(in oklab, …)
     (older Safari/Firefox) keep the rgba() value — progressive enhancement. */
  --bone-04:rgba(242,239,230,.04); --bone-04:color-mix(in oklab, var(--bone) 4%, transparent);
  --bone-08:rgba(242,239,230,.08); --bone-08:color-mix(in oklab, var(--bone) 8%, transparent);
  --bone-12:rgba(242,239,230,.12); --bone-12:color-mix(in oklab, var(--bone) 12%, transparent);
  --bone-20:rgba(242,239,230,.20); --bone-20:color-mix(in oklab, var(--bone) 20%, transparent);
  --bone-30:rgba(242,239,230,.30); --bone-30:color-mix(in oklab, var(--bone) 30%, transparent);
  --ink-60:rgba(10,10,12,.60);     --ink-60:color-mix(in oklab, var(--ink) 60%, transparent);
  --voltage-20:rgba(200,255,61,.20); --voltage-20:color-mix(in oklab, var(--voltage) 20%, transparent);
  --voltage-40:rgba(200,255,61,.40); --voltage-40:color-mix(in oklab, var(--voltage) 40%, transparent);
  --plasma-20:rgba(255,91,46,.20); --plasma-20:color-mix(in oklab, var(--plasma) 20%, transparent);

  /* === Type families === */
  --font-display:'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:'Bricolage Grotesque', system-ui, sans-serif;
  --font-serif:'Instrument Serif', 'Times New Roman', serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  /* === Spacing (4px base) === */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:144px; --s-11:220px;

  /* === Radii === */
  --r-3:16px; --r-pill:999px;

  /* === Shadows / glows === */
  --shadow-glass:inset 0 1px 0 var(--bone-20), 0 30px 80px -30px rgba(0,0,0,.6);
  --shadow-voltage:0 0 60px -10px var(--voltage-40);

  /* === Blur === */
  --blur-card:blur(18px) saturate(1.4);

  /* === Easing === */
  --ease-out-quint:cubic-bezier(.22,1,.36,1);
  --ease-in-out-cubic:cubic-bezier(.65,0,.35,1);

  /* === Durations === */
  --dur-micro:120ms; --dur-quick:240ms; --dur-macro:480ms;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

html, body {
  margin: 0; padding: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  cursor: none;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-feature-settings: "ss01","ss02";
}

a, button, .btn, .work-card, summary { touch-action: manipulation; }
img { max-width: 100%; }

::selection { background: var(--voltage); color: var(--ink); }

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 800; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--bone); text-decoration: none; }

.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }

/* Skip link (a11y) */
.skip-link {
  position: fixed; top: -60px; left: 50%; transform: translateX(-50%);
  z-index: 10000; background: var(--voltage); color: var(--ink);
  padding: 10px 18px; border-radius: 0 0 12px 12px; font: 600 13px/1 var(--font-mono);
  transition: top var(--dur-quick) var(--ease-out-quint);
}
.skip-link:focus { top: 0; }

/* Focus ring for keyboard users */
:focus-visible { outline: 2px solid var(--voltage); outline-offset: 3px; border-radius: 4px; }

.liquid-defs { position: absolute; width: 0; height: 0; }

/* Grain overlay */
body::before {
  content: ""; position: fixed; inset: 0;
  background-image: url("/assets/noise.svg");
  opacity: .04; pointer-events: none; mix-blend-mode: screen; z-index: 1000;
}

section { position: relative; scroll-margin-top: 96px; }

/* ===== Custom cursor ===== */
.cursor {
  position: fixed; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--voltage); pointer-events: none; z-index: 9999;
  mix-blend-mode: difference; transform: translate(-50%,-50%);
  transition: width .2s var(--ease-out-quint), height .2s var(--ease-out-quint), background-color .2s var(--ease-out-quint);
  will-change: left, top;
}
.cursor.big  { width: 56px; height: 56px; background: var(--bone); }
.cursor.melt { width: 80px; height: 80px; background: var(--voltage); }

/* ===== Floating nav ===== */
.nav {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
  z-index: 100; display: inline-flex; align-items: center; gap: 6px; padding: 7px;
  background: var(--ink-60); border: 1px solid var(--bone-12); border-radius: var(--r-pill);
  backdrop-filter: var(--blur-card); -webkit-backdrop-filter: var(--blur-card);
  box-shadow: var(--shadow-glass);
}
.nav a {
  padding: 9px 16px; border-radius: var(--r-pill); font-size: 13px; color: var(--bone-2);
  letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: all var(--dur-micro) var(--ease-out-quint);
}
.nav a:hover { color: var(--bone); background: var(--bone-08); }
.nav a.active { background: var(--bone); color: var(--ink); }
.nav a.nav-cta { color: var(--bone); }
.nav a .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--voltage); }

/* ===== Side rails ===== */
.rail, .rail-right {
  position: fixed; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  color: var(--bone-3); writing-mode: vertical-rl;
  display: flex; gap: 28px; align-items: center; z-index: 90;
}
.rail { left: 20px; }
.rail-right { right: 20px; }
.rail .num { color: var(--bone); font-weight: 500; }
.rail .scroll-track {
  writing-mode: horizontal-tb; width: 2px; height: 90px;
  background: var(--bone-12); border-radius: 2px; position: relative;
}
.rail .scroll-fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 0;
  background: var(--voltage); border-radius: 2px; transition: height var(--dur-micro) linear;
}
.rail-right .live { color: var(--plasma); }

/* ===== Section scaffolding ===== */
.section-pad { padding: var(--s-11) var(--s-8); max-width: 1280px; margin: 0 auto; }
.section-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--bone-3);
  display: flex; align-items: center; gap: 12px; margin-bottom: var(--s-7);
}
.section-eyebrow .line { flex: 1; height: 1px; background: var(--bone-12); }
.section-eyebrow .line.short { max-width: 120px; }

/* ===== HERO ===== */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; padding: 120px 64px 0;
  overflow: hidden; display: block;
}
.hero-bg-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-bg-glow .g1 {
  position: absolute; width: 800px; height: 800px; left: -200px; bottom: -200px;
  background: radial-gradient(circle, var(--voltage) 0%, transparent 60%);
  opacity: .28; filter: blur(60px);
}
.hero-bg-glow .g2 {
  position: absolute; width: 600px; height: 600px; right: -100px; top: -100px;
  background: radial-gradient(circle, var(--plasma) 0%, transparent 60%);
  opacity: .22; filter: blur(60px);
}
.hero-liquid { position: absolute; inset: 0; filter: url(#hero-goo); pointer-events: none; z-index: 1; }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(1px); will-change: transform, translate; }
.hero-blob.hb1 { width: 560px; height: 560px; right: 4%;  bottom: 6%;  background: var(--voltage); opacity: .55; animation: float1 11s ease-in-out infinite; }
.hero-blob.hb2 { width: 300px; height: 300px; right: 22%; top: 10%;    background: var(--plasma);  opacity: .42; animation: float2 9s  ease-in-out infinite; }
.hero-blob.hb3 { width: 240px; height: 240px; right: 36%; bottom: 28%; background: var(--voltage); opacity: .45; animation: float3 13s ease-in-out infinite; }
.hero-blob.hb4 { width: 180px; height: 180px; right: 2%;  top: 40%;    background: var(--mercury); opacity: .32; animation: float4 8s  ease-in-out infinite; }
@keyframes float1 { 0%,100%{translate:0 0; scale:1} 50%{translate:-30px 40px; scale:1.05} }
@keyframes float2 { 0%,100%{translate:0 0} 50%{translate:40px 30px} }
@keyframes float3 { 0%,100%{translate:0 0; scale:1} 50%{translate:60px -20px; scale:.95} }
@keyframes float4 { 0%,100%{translate:0 0} 50%{translate:-40px -30px} }

.hero-grid {
  position: relative; z-index: 3; display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.5fr);
  align-items: end; gap: var(--s-6); width: 100%; max-width: 1480px; margin: 0 auto;
  min-height: calc(100vh - 120px); min-height: calc(100svh - 120px);
}
.hero-text { align-self: center; display: flex; flex-direction: column; gap: var(--s-4); padding-bottom: var(--s-8); }
.hero-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--bone-3);
  display: inline-flex; align-items: center; gap: 12px; width: fit-content;
  padding: 8px 14px; border: 1px solid var(--bone-12); border-radius: var(--r-pill);
  background: var(--bone-04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--voltage);
  box-shadow: 0 0 0 0 var(--voltage-40); animation: pulse 2s ease-out infinite;
}
@keyframes pulse { 0%{box-shadow:0 0 0 0 var(--voltage-40)} 100%{box-shadow:0 0 0 18px transparent} }

.hero-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, 8vw, 7.5rem); line-height: .88; letter-spacing: -.05em;
  color: var(--bone); margin: 0;
}
.hero-name .dot { color: var(--voltage); }
.hero-subline {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.1rem, 1.7vw, 1.5rem); letter-spacing: -.02em; line-height: 1.2;
  color: var(--bone-2); margin: 0;
}
.hero-subline .serif { color: var(--bone); }
.hero-blurb { max-width: 480px; font-size: clamp(15px,1.2vw,17px); line-height: 1.55; color: var(--bone-2); margin: var(--s-2) 0 0; }
.hero-blurb em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--voltage); font-size: 1.08em; }
.hero-ctas { display: flex; gap: 12px; margin-top: var(--s-4); flex-wrap: wrap; }

.hero-portrait-col {
  position: relative; align-self: end; width: 100%;
  height: clamp(560px, 92svh, 980px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.hero-portrait-wrap {
  position: relative; width: 100%; max-width: 980px; height: 100%;
  display: flex; align-items: flex-end; justify-content: center; cursor: none;
}
.hero-portrait {
  width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  filter: url(#hero-displace); transition: filter var(--dur-macro) var(--ease-in-out-cubic);
  user-select: none; -webkit-user-drag: none; pointer-events: auto; display: block;
}
.hero-hint {
  position: absolute; top: 32px; right: 8px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .16em; color: var(--bone-2);
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
  background: var(--ink-60); border: 1px solid var(--bone-12); border-radius: var(--r-pill);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 5; pointer-events: none;
}
.hero-hint .pulse { width: 6px; height: 6px; }

.hero-scroll {
  position: absolute; bottom: 28px; left: 64px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .16em; color: var(--bone-3);
  display: flex; align-items: center; gap: 10px; z-index: 4; pointer-events: none; mix-blend-mode: difference;
}
.hero-scroll .arrow { display: inline-block; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* ===== ABOUT ===== */
.about-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s-9); align-items: start; }
.about-h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: .95; letter-spacing: -.04em; color: var(--bone);
}
.about-h2 .serif { color: var(--bone-2); }
.about-body p { font-size: 20px; line-height: 1.5; color: var(--bone-2); margin: 0 0 var(--s-5); letter-spacing: -.01em; }
.about-body p em { font-family: var(--font-serif); font-style: italic; color: var(--bone); }
.stack { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--bone-3); display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-6); }
.stack span { padding: 6px 12px; border: 1px solid var(--bone-12); border-radius: var(--r-pill); }
.stack span.hot { color: var(--voltage); border-color: var(--voltage-40); }

/* Education block */
.edu { margin-top: var(--s-7); border-top: 1px solid var(--bone-12); }
.edu-row { padding: var(--s-4) 0; border-bottom: 1px solid var(--bone-08); }
.edu-deg { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: var(--bone); }
.edu-place { font-size: 14px; color: var(--bone-2); margin-top: 2px; }
.edu-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--bone-3); margin-top: 6px; }

/* ===== WORK ===== */
.work-title, .stack-title, .wins-title { margin-bottom: var(--s-7); }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.work-card {
  position: relative; background: var(--ink-2); border: 1px solid var(--bone-12); border-radius: 20px;
  padding: var(--s-6); overflow: hidden; display: flex; flex-direction: column; gap: var(--s-5);
  min-height: 380px; color: var(--bone); cursor: none;
  transition: border-color var(--dur-quick) var(--ease-out-quint), background var(--dur-quick) var(--ease-out-quint), transform var(--dur-quick) var(--ease-out-quint);
}
a.work-card:hover { border-color: var(--bone-30); background: var(--ink-3); transform: translateY(-3px); }
article.work-card:hover { border-color: var(--bone-20); background: var(--ink-3); }
.work-card::before {
  content: ""; position: absolute; width: 360px; height: 360px;
  left: calc(var(--mx,50%) - 180px); top: calc(var(--my,50%) - 180px);
  background: radial-gradient(circle, var(--voltage-40), transparent 60%);
  filter: blur(30px); pointer-events: none; opacity: 0;
  transition: opacity var(--dur-quick) var(--ease-out-quint);
}
.work-card:hover::before { opacity: 1; }
.work-card.plasma:hover::before { background: radial-gradient(circle, var(--plasma-20), transparent 60%); }
.work-card .yr {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--bone-3);
  display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1;
}
.work-card .yr .live, .work-card .yr .intern { display: inline-flex; align-items: center; gap: 6px; }
.work-card .yr .live { color: var(--voltage); }
.work-card .yr .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--voltage); }
.work-card .yr .intern { color: var(--bone-2); }
.work-card.plasma .yr .live { color: var(--plasma); }
.work-card.plasma .yr .live::before { background: var(--plasma); }
.work-card h3 {
  font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -.03em;
  line-height: 1.02; color: var(--bone); margin: 0; position: relative; z-index: 1;
}
.work-card h3 .serif { color: var(--bone-2); font-size: .92em; }
.work-card p { font-size: 15px; line-height: 1.5; color: var(--bone-2); margin: 0; position: relative; z-index: 1; }
.card-foot {
  margin-top: auto; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--bone-3);
  position: relative; z-index: 1;
}
.card-foot .arr { font-size: 18px; color: var(--bone); transition: transform var(--dur-quick) var(--ease-out-quint); }
.card-foot .arr.static { color: var(--bone-3); }
a.work-card:hover .card-foot .arr { transform: translate(3px,-3px); }

/* stack chips inside cards */
.stack.stack-card { margin: 4px 0; }
.stack.stack-card span { background: var(--bone-04); border-color: var(--bone-12); color: var(--bone-2); font-size: 11px; letter-spacing: .04em; padding: 5px 10px; }

/* ===== STACK / marquees ===== */
.stack-lead { color: var(--bone-3); max-width: 620px; font-size: 16px; margin: calc(-1 * var(--s-4)) 0 var(--s-7); }
.skills .marquees { display: flex; flex-direction: column; gap: var(--s-5); }
.marquee-row { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: var(--s-5); padding: var(--s-4) 0; border-top: 1px solid var(--bone-08); }
.marquee-row:last-child { border-bottom: 1px solid var(--bone-08); }
.marquee-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: lowercase; color: var(--bone-3); }
.marquee {
  position: relative; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
}
.marquee-track { display: flex; gap: 0; width: max-content; animation: marquee-scroll 38s linear infinite; }
.marquee.reverse .marquee-track { animation-direction: reverse; animation-duration: 44s; }
.marquee-chip {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(28px,3.5vw,44px);
  letter-spacing: -.03em; color: var(--bone); display: inline-flex; align-items: center; gap: 28px;
  padding: 0 6px; white-space: nowrap;
}
.marquee.accent .marquee-chip { color: var(--voltage); }
.marquee-chip:hover { color: var(--plasma); }
.marquee-sep { color: var(--bone-12); font-weight: 400; font-size: .6em; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }

/* ===== WINS / stats ===== */
.stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-4); }
.stat-card {
  position: relative; background: var(--ink-2); border: 1px solid var(--bone-12); border-radius: 20px;
  padding: var(--s-6); min-height: 220px; display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--s-4); overflow: hidden;
  transition: border-color var(--dur-quick) var(--ease-out-quint), background var(--dur-quick) var(--ease-out-quint);
}
.stat-card:hover { border-color: var(--bone-30); background: var(--ink-3); }
.stat-card::after {
  content: ""; position: absolute; inset: auto -40% -60% auto; width: 320px; height: 320px;
  background: radial-gradient(circle, var(--voltage-40), transparent 60%); filter: blur(40px);
  opacity: 0; transition: opacity var(--dur-quick) var(--ease-out-quint); pointer-events: none;
}
.stat-card:hover::after { opacity: .6; }
.stat-card.plasma::after { background: radial-gradient(circle, var(--plasma-20), transparent 60%); }
.stat-big { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px,7vw,96px); line-height: .9; letter-spacing: -.05em; color: var(--bone); position: relative; z-index: 1; }
.stat-big .unit { color: var(--voltage); font-size: .55em; letter-spacing: -.04em; margin-left: 4px; }
.stat-card.plasma .stat-big .unit { color: var(--plasma); }
.stat-label { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.02em; line-height: 1.15; color: var(--bone); position: relative; z-index: 1; }
.stat-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; line-height: 1.55; color: var(--bone-3); position: relative; z-index: 1; }

/* ===== CONTACT ===== */
.contact { text-align: center; padding: var(--s-11) var(--s-8) var(--s-10); max-width: 1280px; margin: 0 auto; }
.contact-eyebrow { justify-content: center; }
.contact .big {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(3.5rem,9vw,8rem);
  line-height: .9; letter-spacing: -.05em; color: var(--bone); margin-bottom: var(--s-5);
}
.contact .big .serif { color: var(--voltage); display: inline; }
.contact-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--bone-3); margin: 0 0 var(--s-7); }
.contact .links { display: inline-flex; flex-direction: column; gap: var(--s-4); align-items: center; }
.contact a.big-link {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 4.6vw, 28px); letter-spacing: -.02em; color: var(--bone);
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--bone-12);
  max-width: 100%; overflow-wrap: anywhere; text-align: center;
  transition: color var(--dur-quick) var(--ease-out-quint), border-color var(--dur-quick) var(--ease-out-quint), transform var(--dur-quick) var(--ease-out-quint);
}
.contact a.big-link:hover { color: var(--voltage); border-bottom-color: var(--voltage); transform: translateY(-2px); }
.resume-btn { margin-top: var(--s-8); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: 500; font-size: 14px; letter-spacing: -.01em;
  border: 1px solid transparent; cursor: none; background: var(--bone); color: var(--ink);
  transition: all var(--dur-micro) var(--ease-out-quint);
}
.btn:hover { background: var(--voltage); box-shadow: var(--shadow-voltage); }
.btn.ghost { background: transparent; color: var(--bone); border-color: var(--bone-20); }
.btn.ghost:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); box-shadow: none; }

/* ===== Footer ===== */
footer {
  border-top: 1px solid var(--bone-08); padding: var(--s-6) var(--s-8);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--bone-3);
}
footer .right { display: flex; gap: 24px; align-items: center; }
footer .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--voltage); display: inline-block; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .hero { padding: 110px 36px 0; }
  .hero-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: var(--s-5); min-height: auto; }
  .hero-text { order: 1; align-self: start; padding-bottom: var(--s-6); }
  .hero-portrait-col { order: 2; height: clamp(520px,70svh,760px); }
  .hero-portrait-wrap { max-width: 100%; }
  /* On stacked (mobile/tablet) layouts the wide photo would shrink the subject
     to a tiny figure. Switch to cover + framing on the subject so he fills the
     frame at a proper size without overlapping anything. */
  .hero-portrait { object-fit: cover; object-position: 45% bottom; }
  .work-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .section-pad { padding: var(--s-9) var(--s-5); }
  .about-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .work-grid { grid-template-columns: 1fr; }
  .marquee-row { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-3) 0; }
  .marquee-chip { font-size: clamp(22px,6vw,36px); gap: 18px; }
  .marquee-track { animation-duration: 28s; }
  .marquee.reverse .marquee-track { animation-duration: 34s; }
  .rail, .rail-right { display: none; }
  .nav a { padding: 8px 12px; font-size: 12px; }
  .cursor { display: none; }
  html, body, .btn, a, .work-card, .hero-portrait-wrap { cursor: auto; }
  .hero-scroll { display: none; }
  .hero-portrait-col { height: clamp(440px,56svh,620px); }
  .hero-hint { top: 18px; right: 8px; }
  footer { flex-direction: column; gap: 12px; text-align: center; padding: var(--s-5); }
  footer .right { flex-direction: column; gap: 8px; }
}
@media (max-width: 600px) {
  .hero { padding: 96px 20px 0; }
  .hero-portrait-col { height: clamp(420px,56svh,560px); }
  .hero-name { font-size: clamp(2.75rem,14vw,5rem); }
  .hero-eyebrow { font-size: 10px; padding: 6px 12px; }
  .hero-ctas .btn { padding: 12px 18px; font-size: 13px; flex: 1; justify-content: center; min-width: 140px; }
  .hero-hint { top: 12px; right: 4px; font-size: 9px; padding: 6px 10px; }
  .section-pad { padding: var(--s-8) var(--s-4); }
  .section-eyebrow { font-size: 10px; gap: 8px; margin-bottom: var(--s-5); }
  .about-h2 { font-size: clamp(2rem,10vw,3rem); }
  .about-body p { font-size: 16px; }
  .work-card { padding: var(--s-5); min-height: 300px; gap: var(--s-4); }
  .work-card h3 { font-size: 24px; }
  .stat-grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .stat-card { min-height: 180px; padding: var(--s-5); }
  .stat-big { font-size: clamp(48px,14vw,72px); }
  .stat-label { font-size: 16px; }
  .contact { padding: var(--s-9) var(--s-4) var(--s-8); }
  .contact-meta { font-size: 11px; letter-spacing: .1em; }
  .nav { top: 16px; padding: 5px; gap: 2px; }
  .nav a { padding: 7px 10px; font-size: 11px; }
  .marquee-label { font-size: 10px; }
}

/* ===== Reduced motion (a11y) ===== */
@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hero-blob { animation: none; }
  .marquee-track { animation: none; transform: none; }
  .hero-portrait { filter: none; }
  .cursor { display: none; }
  html, body { cursor: auto; }
}