:root {
  --paper: #f3f1ea;
  --paper-2: #ebe8df;
  --ink: #111111;
  --muted: #6b6963;
  --line: rgba(17,17,17,.16);
  --accent: #315cff;
  --signal: #74d66a;
  --radius: 2px;
  --max: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
::selection { background: var(--accent); color: #fff; }

.page-noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.shell { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; }
.rule { border-top: 1px solid var(--line); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.nav { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-size: 15px; font-weight: 750; letter-spacing: -.02em; }
.nav-links { display: flex; gap: 28px; font-size: 13px; color: var(--muted); }
.nav-links a { transition: color .2s ease; }
.nav-links a:hover { color: var(--accent); }
.nav-cta { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(116,214,106,.12); }

.hero { min-height: 86vh; display: grid; align-content: end; padding: 96px 0 54px; }
.eyebrow, .section-kicker, .meta, .project-label, .tiny {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-transform: uppercase; letter-spacing: .08em; font-size: 11px;
}
.eyebrow { display: flex; gap: 10px; align-items: center; color: var(--muted); margin-bottom: 34px; }
.hero h1 {
  margin: 0;
  max-width: 1120px;
  font-size: clamp(54px, 7.2vw, 108px);
  line-height: .94;
  letter-spacing: -.058em;
  font-weight: 720;
}
.hero h1 .soft { color: #77736a; }
.hero h1 .soft em { color: var(--accent); font-style: normal; }
.hero-bottom {
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 70px;
  align-items: end; margin-top: 48px;
}
.hero-copy { max-width: 660px; font-size: clamp(18px, 2vw, 25px); line-height: 1.35; letter-spacing: -.025em; }
.hero-actions { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 0 17px; border: 1px solid var(--ink);
  font-size: 13px; transition: transform .2s ease, background .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn.dark { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.dark:hover { background: var(--ink); border-color: var(--ink); }
.btn.ghost { border-color: var(--line); }
.hero-notes { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.hero-note { border-top: 1px solid var(--line); padding-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.hero-note strong { display: block; color: var(--ink); font-size: 13px; margin-bottom: 3px; font-weight: 600; }

.section { padding: 120px 0; }
.section-head { display: grid; grid-template-columns: 1fr 2.3fr; gap: 80px; align-items: start; margin-bottom: 70px; }
.section-kicker { color: var(--accent); padding-top: 10px; font-weight: 700; }
.section-title { margin: 0; max-width: 980px; font-size: clamp(34px, 4.5vw, 66px); line-height: 1.02; letter-spacing: -.05em; font-weight: 650; }
.section-title .muted { color: #7d786e; }
.lede { max-width: 800px; font-size: clamp(22px, 2.7vw, 39px); line-height: 1.16; letter-spacing: -.04em; font-weight: 520; }
.lede p { margin: 0; }
.lede .muted { color: #77736a; }

.project-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.project-card { position: relative; display: block; border-top: 1px solid var(--line); padding-top: 12px; }
.project-card.span-12 { grid-column: span 12; }
.project-card.span-7 { grid-column: span 7; }
.project-card.span-5 { grid-column: span 5; }
.project-card.span-6 { grid-column: span 6; }
.project-meta { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 13px; }
.project-name { font-size: 17px; font-weight: 650; letter-spacing: -.025em; transition:color .2s ease; }
.project-card:hover .project-name { color:var(--accent); }
.project-role { color: var(--muted); font-size: 12px; text-align: right; }
.project-visual {
  min-height: 430px; position: relative; overflow: hidden;
  border: 1px solid rgba(17,17,17,.08); background: #ddd8cc;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.project-card:hover .project-visual { transform: translateY(-6px); }
.project-card:hover .arrow { transform: translate(4px,-4px); }
.project-description { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: start; padding: 16px 0 34px; }
.project-description p { margin: 0; max-width: 610px; color: var(--muted); line-height: 1.55; font-size: 14px; }
.arrow { font-size: 22px; color: var(--accent); transition: transform .2s ease; }

/* project art */
.visual-up { background: #101214; color: #fff; }
.visual-up::before { content:""; position:absolute; inset:-30%; background: radial-gradient(circle at 40% 45%, rgba(0,255,157,.28), transparent 22%), radial-gradient(circle at 70% 55%, rgba(0,204,255,.22), transparent 24%); filter: blur(15px); }
.up-map { position:absolute; inset: 10%; border: 1px solid rgba(255,255,255,.12); background-image: linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size: 54px 54px; transform: perspective(800px) rotateX(55deg) rotateZ(-11deg) scale(1.1); }
.up-pulse { position:absolute; left: 54%; top: 46%; width: 16px; height:16px; border-radius:50%; background:#00e6bd; box-shadow: 0 0 0 14px rgba(0,255,157,.11), 0 0 0 38px rgba(0,204,255,.06); }
.up-word { position:absolute; left:36px; bottom:28px; font-size: clamp(64px, 9vw, 130px); line-height:.8; letter-spacing:-.08em; font-weight:800; }
.up-caption { position:absolute; right:30px; top:28px; width:240px; font-family: ui-monospace, monospace; font-size:10px; line-height:1.5; color:rgba(255,255,255,.6); text-transform:uppercase; }

.visual-trader { background: #0b0d10; color: #f4f0e6; }
.chart-grid { position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size: 46px 46px; }
.chart-line { position:absolute; left:8%; right:6%; top:27%; height:48%; }
.chart-line svg { width:100%; height:100%; overflow:visible; }
.trader-ui { position:absolute; left:28px; right:28px; bottom:28px; display:flex; align-items:end; justify-content:space-between; }
.trader-ui strong { font-size: clamp(46px, 6vw, 86px); letter-spacing:-.065em; }
.trader-ui span { font-family:ui-monospace,monospace; font-size:10px; color:#8f949c; text-transform:uppercase; }

.visual-qvrse { background: #d7d9f9; }
.q-orb { position:absolute; border-radius:50%; filter: blur(.2px); }
.q1 { width:240px;height:240px; background:#fd6d4b; left:8%; top:12%; }
.q2 { width:330px;height:330px; background:#6a68ff; right:-5%; top:20%; mix-blend-mode:multiply; }
.q3 { width:180px;height:180px; background:#f7ec68; left:40%; bottom:5%; mix-blend-mode:multiply; }
.qvrse-type { position:absolute; left:26px; bottom:24px; font-size: clamp(46px, 6vw, 84px); font-weight:800; letter-spacing:-.07em; z-index:3; }
.qvrse-sub { position:absolute; right:24px; top:22px; font:10px/1.5 ui-monospace,monospace; text-transform:uppercase; width:170px; z-index:3; }

.visual-fresh { background:#f7f7f2; }
.browser { position:absolute; inset:8% 6%; border:1px solid #222; background:#fff; box-shadow:12px 14px 0 #111; }
.browser-top { height:38px; border-bottom:1px solid #222; display:flex; align-items:center; gap:6px; padding:0 12px; }
.browser-top i { width:7px;height:7px;border-radius:50%;background:#222; }
.tool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px; }
.tool { min-height:85px; border:1px solid #d8d8d3; padding:10px; display:flex; flex-direction:column; justify-content:space-between; }
.tool b { font-size:11px; }
.tool span { font:9px ui-monospace,monospace; color:#777; }
.fresh-title { position:absolute; right:4%; bottom:4%; background:#dfff64; padding:10px 14px; font-size:16px; font-weight:800; transform:rotate(-3deg); border:1px solid #111; }

.visual-scs { background:#101526; color:#f6f4ed; }
.visual-scs::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:48px 48px; }
.scs-code { position:absolute; inset:10% 9% 20%; border:1px solid rgba(255,255,255,.22); background:rgba(7,10,20,.72); padding:24px; box-shadow:14px 16px 0 var(--accent); font:11px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace; color:#b8c3ff; }
.scs-code .white { color:#f5f3eb; }
.scs-code .lime { color:#dfff64; }
.scs-code .dim { color:#69728d; }
.scs-title { position:absolute; left:24px; bottom:20px; z-index:2; font-size:clamp(42px,5.7vw,82px); line-height:.84; letter-spacing:-.07em; font-weight:800; }
.scs-badge { position:absolute; right:22px; top:20px; z-index:2; background:#dfff64; color:#111; padding:9px 12px; border:1px solid #111; transform:rotate(2deg); font:800 11px ui-monospace,monospace; text-transform:uppercase; }


.experience { border-top: 1px solid var(--line); }
.experience-row { display:grid; grid-template-columns: 150px 1fr 1.25fr 100px; gap:34px; padding:24px 0; border-bottom:1px solid var(--line); align-items:start; }
.experience-row .year { color:var(--muted); font:11px ui-monospace,monospace; }
.experience-row h3 { margin:0; font-size:20px; letter-spacing:-.03em; }
.experience-row .role { font-size:13px; color:var(--muted); margin-top:4px; }
.experience-row p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; max-width:580px; }
.experience-row .tag { text-align:right; font:10px ui-monospace,monospace; text-transform:uppercase; color:var(--accent); }

.quests { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.quest { min-height:320px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px; display:flex; flex-direction:column; justify-content:space-between; transition:background .25s ease, transform .25s ease; }
.quest:hover { background:var(--paper-2); }
.quest-num { font:10px ui-monospace,monospace; color:var(--accent); font-weight:700; }
.quest h3 { margin:0; font-size:clamp(28px,3vw,45px); letter-spacing:-.05em; line-height:.95; }
.quest p { margin:14px 0 0; color:var(--muted); font-size:13px; line-height:1.5; max-width:280px; }
.quest-mark { font-size:60px; line-height:1; letter-spacing:-.1em; color:var(--accent); }

.how-work-kicker { margin-bottom:34px; }
.capabilities { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
.capability { padding:34px 34px 52px 0; border-right:1px solid var(--line); min-height:380px; }
.capability + .capability { padding-left:34px; }
.capability:last-child { border-right:0; }
.capability .num { font:10px ui-monospace,monospace; color:var(--accent); font-weight:700; }
.capability h3 { font-size:clamp(38px,4.2vw,60px); margin:62px 0 24px; letter-spacing:-.06em; }
.capability ul { list-style:none; padding:0; margin:0; color:var(--muted); font-size:14px; line-height:1.9; }
.capability-note { margin-top:44px; font-size:16px; font-style:italic; color:var(--muted); }

.about-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; }
.portrait-photo { width:min(540px,100%); aspect-ratio:1 / 1; margin-inline:auto; background:#ded9ce; border-radius:50%; border:1px solid rgba(17,17,17,.08); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.portrait-photo::before { content:""; position:absolute; inset:8%; border-radius:50%; background:var(--accent); opacity:.08; }
.portrait-photo img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center 31%; display:block; }
.about-copy { display:flex; flex-direction:column; justify-content:space-between; gap:60px; }
.about-copy p { margin:0; font-size:clamp(23px,2.7vw,38px); line-height:1.2; letter-spacing:-.04em; }
.fact-list { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.fact { border-top:1px solid var(--line); padding-top:12px; }
.fact small { display:block; color:var(--muted); font:10px ui-monospace,monospace; text-transform:uppercase; margin-bottom:6px; }
.fact strong { font-size:13px; font-weight:600; }

.contact { padding:130px 0 60px; min-height:70vh; display:flex; flex-direction:column; justify-content:space-between; }
.contact h2 { margin:0; font-size:clamp(64px,9.5vw,138px); line-height:.84; letter-spacing:-.075em; max-width:1200px; }
.contact h2 .quote { color:var(--accent); }
.contact-links a:hover { color:var(--accent); border-color:var(--accent); }
.contact-bottom { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end; margin-top:80px; }
.contact-copy { max-width:540px; font-size:18px; color:var(--muted); line-height:1.5; }
.contact-links { display:flex; gap:20px; flex-wrap:wrap; justify-content:flex-end; font-size:13px; }
.contact-links a { border-bottom:1px solid var(--ink); padding-bottom:3px; }

.footer { border-top:1px solid var(--line); padding:22px 0 40px; display:flex; justify-content:space-between; color:var(--muted); font:10px ui-monospace,monospace; text-transform:uppercase; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease, transform .65s ease; }
.reveal.in { opacity:1; transform:none; }


/* iOS-inspired glass refinement */
body {
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.08)),
    var(--paper);
  overflow-x:hidden;
}
main, footer, .site-header { position:relative; z-index:2; }
.ambient-bg { position:fixed; inset:-12vh -10vw; z-index:0; pointer-events:none; overflow:hidden; opacity:.92; }
.ambient-orb { position:absolute; display:block; border-radius:50%; filter:blur(90px); opacity:.075; will-change:transform; }
.orb-a { width:52vw; aspect-ratio:1; background:radial-gradient(circle at 36% 34%, #315cff, rgba(49,92,255,.18) 42%, transparent 72%); left:-10vw; top:2vh; animation:ambientA 26s ease-in-out infinite alternate; }
.orb-b { width:46vw; aspect-ratio:1; background:radial-gradient(circle at 50% 50%, #65d8ff, rgba(101,216,255,.16) 42%, transparent 72%); right:-7vw; top:32vh; animation:ambientB 31s ease-in-out infinite alternate; }
.orb-c { width:42vw; aspect-ratio:1; background:radial-gradient(circle at 50% 50%, #8c78ff, rgba(140,120,255,.15) 44%, transparent 72%); left:31vw; bottom:-14vh; animation:ambientC 34s ease-in-out infinite alternate; }
.ambient-sheen { position:absolute; inset:0; opacity:.14; background:radial-gradient(ellipse at 28% 16%, rgba(255,255,255,.92), transparent 32%), radial-gradient(ellipse at 76% 58%, rgba(255,255,255,.72), transparent 28%); animation:sheenDrift 24s ease-in-out infinite alternate; }
@keyframes ambientA { from { transform:translate3d(-2vw,-1vh,0) scale(.96); } to { transform:translate3d(15vw,14vh,0) scale(1.08); } }
@keyframes ambientB { from { transform:translate3d(4vw,-3vh,0) scale(1.02); } to { transform:translate3d(-15vw,13vh,0) scale(.93); } }
@keyframes ambientC { from { transform:translate3d(-8vw,5vh,0) scale(.92); } to { transform:translate3d(8vw,-13vh,0) scale(1.1); } }
@keyframes sheenDrift { from { transform:translate3d(-2vw,0,0) scale(1); } to { transform:translate3d(3vw,-3vh,0) scale(1.04); } }
.site-header { top:12px; width:min(calc(100% - 28px), 1360px); margin:0 auto; border:1px solid rgba(255,255,255,.5); border-radius:24px; background:rgba(248,247,243,.58); box-shadow:0 10px 34px rgba(36,45,76,.07), inset 0 1px 0 rgba(255,255,255,.72); -webkit-backdrop-filter:blur(26px) saturate(145%); backdrop-filter:blur(26px) saturate(145%); }
.site-header.scrolled { border-color:rgba(255,255,255,.62); background:rgba(248,247,243,.68); }
.nav { height:64px; padding:0 18px; }
.hero-note, .quest, .capability, .experience-row, .contact-bottom { position:relative; background:rgba(255,255,255,.26); border:1px solid rgba(255,255,255,.46); box-shadow:0 14px 42px rgba(50,58,88,.045), inset 0 1px 0 rgba(255,255,255,.68); -webkit-backdrop-filter:blur(18px) saturate(130%); backdrop-filter:blur(18px) saturate(130%); }
.hero-note { border-radius:18px; padding:14px 15px; }
.hero-notes { gap:12px; }
.project-visual { border-radius:30px; border:1px solid rgba(255,255,255,.58); box-shadow:0 24px 70px rgba(43,50,75,.10), inset 0 1px 0 rgba(255,255,255,.58); }
.project-card:hover .project-visual { transform:translateY(-7px) scale(1.003); box-shadow:0 30px 82px rgba(43,50,75,.14), inset 0 1px 0 rgba(255,255,255,.62); }
.experience { border-top:0; display:grid; gap:10px; }
.experience-row { grid-template-columns:150px 1fr 1.25fr 100px; border-radius:22px; border-bottom:1px solid rgba(255,255,255,.46); padding:22px 24px; transition:transform .22s ease, background .22s ease; }
.experience-row:hover { transform:translateY(-2px); background:rgba(255,255,255,.36); }
.quests { gap:12px; border:0; }
.quest { border-radius:26px; border:1px solid rgba(255,255,255,.46); overflow:hidden; }
.quest:hover { background:rgba(255,255,255,.38); transform:translateY(-3px); }
.capabilities { gap:12px; border-top:0; }
.capability, .capability + .capability { border-right:1px solid rgba(255,255,255,.48); border-bottom:1px solid rgba(255,255,255,.48); border-radius:26px; padding:30px 30px 42px; }
.capability h3 { margin-top:58px; }
.capability:last-child { border-right:1px solid rgba(255,255,255,.48); }
.portrait-photo { border:1px solid rgba(255,255,255,.7); box-shadow:0 24px 70px rgba(43,50,75,.10), inset 0 1px 0 rgba(255,255,255,.62); background:rgba(255,255,255,.22); -webkit-backdrop-filter:blur(18px) saturate(130%); backdrop-filter:blur(18px) saturate(130%); }
.contact-bottom { border-radius:26px; padding:24px; }
.contact-links a { border:1px solid rgba(255,255,255,.58); border-radius:999px; padding:10px 14px; background:rgba(255,255,255,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.7); transition:transform .2s ease, background .2s ease, color .2s ease; }
.contact-links a:hover { transform:translateY(-2px); background:rgba(255,255,255,.52); border-color:rgba(49,92,255,.22); }
.ripple { position:fixed; width:8px; height:8px; margin:-4px 0 0 -4px; border:1px solid rgba(49,92,255,.20); border-radius:50%; pointer-events:none; z-index:999; opacity:.72; transform:scale(.3); animation:rippleOut 820ms cubic-bezier(.16,.72,.24,1) forwards; box-shadow:0 0 0 1px rgba(255,255,255,.25) inset; }
@keyframes rippleOut { 0% { opacity:.58; transform:scale(.35); } 55% { opacity:.24; } 100% { opacity:0; transform:scale(5.8); } }
@media (max-width:900px) { .site-header { top:8px; width:calc(100% - 16px); border-radius:20px; } .nav { padding:0 12px; } .experience-row { grid-template-columns:90px 1fr; } .capabilities { gap:10px; } .capability, .capability + .capability { padding:26px 24px 38px; } }
@media (prefers-reduced-motion: reduce) { .ambient-orb, .ambient-sheen { animation:none !important; } .ripple { display:none !important; } }


.portrait-photo::after {
  content:"";
  position:absolute;
  inset:1px;
  z-index:2;
  border-radius:50%;
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 0 0 1px rgba(255,255,255,.18);
}


/* V3 — section centering + subtle blue atmosphere */

/* These two editorial intro bands should sit optically centered between rules. */
#about-intro {
  padding: 0;
}
#about-intro .section-head {
  min-height: 470px;
  margin-bottom: 0;
  align-items: center;
}
#about-intro .section-kicker {
  padding-top: 0;
}

#work {
  padding-top: 0;
}
#work > .shell > .section-head {
  min-height: 410px;
  margin-bottom: 0;
  align-items: center;
}
#work > .shell > .section-head .section-kicker {
  padding-top: 0;
}
#work .project-grid {
  padding-top: 0;
}

/* A slightly clearer, but still extremely restrained, blue ambient wash. */
body {
  background:
    radial-gradient(ellipse 60% 42% at 13% 11%, rgba(89,126,255,.030), transparent 72%),
    radial-gradient(ellipse 54% 44% at 88% 30%, rgba(76,183,255,.026), transparent 74%),
    radial-gradient(ellipse 58% 46% at 34% 68%, rgba(112,92,255,.022), transparent 76%),
    radial-gradient(ellipse 48% 36% at 87% 88%, rgba(81,137,255,.025), transparent 75%),
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.06)),
    var(--paper);
}

/* Keep the moving layer visible enough to add life, never enough to become decoration. */
.ambient-bg {
  opacity: .78;
}
.ambient-orb {
  filter: blur(115px);
}
.orb-a { opacity: .085; }
.orb-b { opacity: .072; }
.orb-c { opacity: .060; }

@media (max-width: 900px) {
  #about-intro .section-head {
    min-height: 360px;
  }
  #work > .shell > .section-head {
    min-height: 340px;
  }
}


/* V4 — smaller portrait, layered ripple rings, stronger ambient atmosphere */

/* 1) Smaller profile image */
.portrait-photo {
  width: min(430px, 82%);
}
@media (max-width: 900px) {
  .portrait-photo {
    width: min(340px, 80%);
  }
}

/* 2) More visible ambient atmosphere, still restrained */
body {
  background:
    radial-gradient(ellipse 62% 44% at 10% 10%, rgba(78,120,255,.050), transparent 70%),
    radial-gradient(ellipse 58% 46% at 90% 28%, rgba(66,176,255,.044), transparent 72%),
    radial-gradient(ellipse 60% 48% at 34% 67%, rgba(112,92,255,.036), transparent 74%),
    radial-gradient(ellipse 50% 38% at 86% 88%, rgba(75,132,255,.040), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.05)),
    var(--paper);
}
.ambient-bg {
  opacity: .92;
}
.ambient-orb {
  filter: blur(105px);
}
.orb-a { opacity: .115; }
.orb-b { opacity: .100; }
.orb-c { opacity: .086; }

/* 3) Water-ripple cursor: three thinner concentric rings */
.ripple {
  position: fixed;
  left: 0;
  top: 0;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  pointer-events: none;
  z-index: 999;
  opacity: 1;
  transform: translate3d(0,0,0);
  animation: rippleLife 1050ms ease-out forwards;
}

.ripple::before,
.ripple::after,
.ripple > i {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: .55px solid rgba(49,92,255,.18);
  transform: translate(-50%, -50%) scale(.28);
  opacity: .62;
  box-shadow: 0 0 0 .25px rgba(255,255,255,.22) inset;
  will-change: transform, opacity;
}

/* small ring */
.ripple::before {
  width: 18px;
  height: 18px;
  animation: ringSmall 900ms cubic-bezier(.17,.67,.24,1) forwards;
}

/* medium ring */
.ripple::after {
  width: 30px;
  height: 30px;
  border-color: rgba(49,92,255,.14);
  animation: ringMedium 1020ms cubic-bezier(.17,.67,.24,1) 35ms forwards;
}

/* large ring */
.ripple > i {
  width: 44px;
  height: 44px;
  border-color: rgba(49,92,255,.11);
  animation: ringLarge 1160ms cubic-bezier(.17,.67,.24,1) 70ms forwards;
}

@keyframes ringSmall {
  0% { transform: translate(-50%,-50%) scale(.26); opacity:.55; }
  70% { opacity:.18; }
  100% { transform: translate(-50%,-50%) scale(1.65); opacity:0; }
}
@keyframes ringMedium {
  0% { transform: translate(-50%,-50%) scale(.24); opacity:.45; }
  72% { opacity:.14; }
  100% { transform: translate(-50%,-50%) scale(1.9); opacity:0; }
}
@keyframes ringLarge {
  0% { transform: translate(-50%,-50%) scale(.22); opacity:.34; }
  74% { opacity:.10; }
  100% { transform: translate(-50%,-50%) scale(2.08); opacity:0; }
}
@keyframes rippleLife {
  0%, 88% { opacity:1; }
  100% { opacity:0; }
}


/* V5 — slightly stronger ripple visibility + actually perceptible blue atmosphere */

/* Background: still soft, but visible now */
body {
  background:
    radial-gradient(ellipse 66% 48% at 8% 8%, rgba(70,112,255,.085), transparent 68%),
    radial-gradient(ellipse 60% 48% at 92% 26%, rgba(67,178,255,.072), transparent 70%),
    radial-gradient(ellipse 62% 50% at 32% 66%, rgba(112,92,255,.060), transparent 72%),
    radial-gradient(ellipse 54% 40% at 88% 88%, rgba(75,132,255,.065), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.03)),
    var(--paper);
}

/* Slightly stronger moving atmosphere */
.ambient-bg {
  opacity: 1;
}
.ambient-orb {
  filter: blur(92px);
}
.orb-a { opacity: .16; }
.orb-b { opacity: .135; }
.orb-c { opacity: .115; }
.ambient-sheen {
  opacity: .18;
}

/* Cursor ripples: only a little stronger than V4 */
.ripple::before,
.ripple::after,
.ripple > i {
  border-width: .65px;
}

.ripple::before {
  border-color: rgba(49,92,255,.25);
}
.ripple::after {
  border-color: rgba(49,92,255,.20);
}
.ripple > i {
  border-color: rgba(49,92,255,.16);
}

@keyframes ringSmall {
  0% { transform: translate(-50%,-50%) scale(.26); opacity:.68; }
  70% { opacity:.24; }
  100% { transform: translate(-50%,-50%) scale(1.65); opacity:0; }
}
@keyframes ringMedium {
  0% { transform: translate(-50%,-50%) scale(.24); opacity:.56; }
  72% { opacity:.20; }
  100% { transform: translate(-50%,-50%) scale(1.9); opacity:0; }
}
@keyframes ringLarge {
  0% { transform: translate(-50%,-50%) scale(.22); opacity:.44; }
  74% { opacity:.15; }
  100% { transform: translate(-50%,-50%) scale(2.08); opacity:0; }
}


/* V6 — light/dark mode */

:root {
  color-scheme: light;
}

.nav-actions {
  display:flex;
  align-items:center;
  gap:14px;
}

.theme-toggle {
  position:relative;
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.58);
  background:rgba(255,255,255,.28);
  color:var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 6px 20px rgba(43,50,75,.055);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
  cursor:pointer;
  transition:
    transform .2s ease,
    background .25s ease,
    border-color .25s ease,
    color .25s ease;
}

.theme-toggle:hover {
  transform:translateY(-1px);
  background:rgba(255,255,255,.46);
}

.theme-toggle:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.theme-icon {
  position:absolute;
  font-size:17px;
  line-height:1;
  transition:opacity .22s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}

.theme-icon-sun {
  opacity:1;
  transform:rotate(0deg) scale(1);
}

.theme-icon-moon {
  opacity:0;
  transform:rotate(-28deg) scale(.62);
}

/* ---------------- DARK THEME ---------------- */

html[data-theme="dark"] {
  color-scheme: dark;

  --paper: #0b0d12;
  --paper-2: #12151c;
  --ink: #f1f3f7;
  --muted: #969ca8;
  --line: rgba(228,234,246,.13);
  --accent: #7192ff;
  --signal: #78e08f;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 66% 48% at 8% 8%, rgba(66,101,255,.16), transparent 66%),
    radial-gradient(ellipse 60% 48% at 92% 26%, rgba(41,161,255,.12), transparent 68%),
    radial-gradient(ellipse 62% 50% at 32% 66%, rgba(104,76,255,.10), transparent 70%),
    radial-gradient(ellipse 54% 40% at 88% 88%, rgba(55,107,255,.10), transparent 68%),
    linear-gradient(180deg, rgba(17,21,31,.42), rgba(4,6,10,.18)),
    var(--paper);
}

html[data-theme="dark"] .page-noise {
  opacity:.055;
  mix-blend-mode:screen;
}

html[data-theme="dark"] .ambient-bg {
  opacity:1;
}

html[data-theme="dark"] .ambient-orb {
  filter:blur(100px);
}

html[data-theme="dark"] .orb-a { opacity:.22; }
html[data-theme="dark"] .orb-b { opacity:.18; }
html[data-theme="dark"] .orb-c { opacity:.16; }
html[data-theme="dark"] .ambient-sheen { opacity:.07; }

html[data-theme="dark"] .site-header {
  background:rgba(15,18,25,.62);
  border-color:rgba(255,255,255,.10);
  box-shadow:
    0 12px 42px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.08);
}

html[data-theme="dark"] .site-header.scrolled {
  background:rgba(13,16,23,.76);
  border-color:rgba(255,255,255,.12);
}

html[data-theme="dark"] .theme-toggle {
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.11);
  color:#f6f7fb;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 24px rgba(0,0,0,.18);
}

html[data-theme="dark"] .theme-toggle:hover {
  background:rgba(255,255,255,.09);
}

html[data-theme="dark"] .theme-icon-sun {
  opacity:0;
  transform:rotate(26deg) scale(.62);
}

html[data-theme="dark"] .theme-icon-moon {
  opacity:1;
  transform:rotate(0deg) scale(1);
}

html[data-theme="dark"] .hero h1 .soft,
html[data-theme="dark"] .section-title .muted,
html[data-theme="dark"] .lede .muted {
  color:#8d94a2;
}

html[data-theme="dark"] .hero-note,
html[data-theme="dark"] .quest,
html[data-theme="dark"] .capability,
html[data-theme="dark"] .experience-row,
html[data-theme="dark"] .contact-bottom,
html[data-theme="dark"] .portrait-photo {
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.09);
  box-shadow:
    0 20px 60px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.06);
}

html[data-theme="dark"] .experience-row:hover,
html[data-theme="dark"] .quest:hover {
  background:rgba(255,255,255,.06);
}

html[data-theme="dark"] .project-visual {
  border-color:rgba(255,255,255,.09);
  box-shadow:
    0 26px 76px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.08);
}

html[data-theme="dark"] .project-card:hover .project-visual {
  box-shadow:
    0 34px 90px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.10);
}

html[data-theme="dark"] .visual-fresh {
  background:#dfe2e8;
  color:#111;
}

html[data-theme="dark"] .visual-qvrse {
  filter:saturate(.92) brightness(.87);
}

html[data-theme="dark"] .visual-slance,
html[data-theme="dark"] .visual-scs,
html[data-theme="dark"] .visual-up,
html[data-theme="dark"] .visual-trader {
  filter:brightness(.94);
}

html[data-theme="dark"] .contact-links a {
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

html[data-theme="dark"] .contact-links a:hover {
  background:rgba(255,255,255,.085);
  border-color:rgba(113,146,255,.28);
}

html[data-theme="dark"] .portrait-photo::before {
  background:var(--accent);
  opacity:.095;
}

html[data-theme="dark"] .portrait-photo::after {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

html[data-theme="dark"] .browser {
  box-shadow:12px 14px 0 rgba(0,0,0,.58);
}

html[data-theme="dark"] .btn.ghost {
  border-color:rgba(255,255,255,.16);
}

html[data-theme="dark"] .ripple::before {
  border-color:rgba(132,160,255,.36);
}
html[data-theme="dark"] .ripple::after {
  border-color:rgba(132,160,255,.28);
}
html[data-theme="dark"] .ripple > i {
  border-color:rgba(132,160,255,.21);
}

@media (max-width: 900px) {
  .nav-actions { gap:9px; }
  .theme-toggle {
    width:38px;
    height:38px;
    flex-basis:38px;
  }
  .availability { display:none; }
}


/* V9 — smaller, more tech-native display typography */
.hero h1 {
  max-width: 980px;
  font-size: clamp(46px, 6.1vw, 88px);
  line-height: .97;
  letter-spacing: -.052em;
  font-weight: 670;
}

.section-title {
  max-width: 860px;
  font-size: clamp(30px, 3.65vw, 52px);
  line-height: 1.06;
  letter-spacing: -.044em;
  font-weight: 620;
}

.lede {
  max-width: 760px;
  font-size: clamp(20px, 2.25vw, 32px);
  line-height: 1.22;
  letter-spacing: -.032em;
  font-weight: 500;
}

.about-copy p {
  max-width: 760px;
  font-size: clamp(21px, 2.25vw, 31px);
  line-height: 1.28;
  letter-spacing: -.032em;
}

.quest h3 {
  font-size: clamp(25px, 2.6vw, 37px);
  line-height: 1;
  letter-spacing: -.042em;
}

.capability h3 {
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: -.048em;
}

.contact h2 {
  max-width: 1040px;
  font-size: clamp(54px, 7.4vw, 104px);
  line-height: .9;
  letter-spacing: -.062em;
}

@media (max-width: 900px) {
  .hero h1 {
    font-size: clamp(42px, 11.5vw, 64px);
    line-height: .98;
  }
  .section-title {
    font-size: clamp(31px, 8.5vw, 43px);
    line-height: 1.06;
  }
  .lede {
    font-size: clamp(22px, 6.3vw, 29px);
  }
  .about-copy p {
    font-size: clamp(22px, 6vw, 29px);
  }
  .contact h2 {
    font-size: clamp(56px, 15vw, 86px);
  }
}


/* V10 — expanded experience + outdoor portrait */
.portrait-photo img {
  object-fit: cover;
  object-position: center 38%;
}
.experience-row h3 {
  line-height: 1.1;
}
@media (max-width: 900px) {
  .experience-row {
    padding: 20px 18px;
  }
}


/* V12 — differentiate Side Quests vs How I Work */
#quests .section-head { margin-bottom: 30px; }
.quests { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; border:0; align-items:start; }
.quest { position:relative; min-height:0; padding:24px 24px 26px; border-radius:28px; overflow:hidden; }
.quest:nth-child(1){grid-column:1/span 4;min-height:290px;transform:translateY(0)}
.quest:nth-child(2){grid-column:5/span 4;min-height:332px;transform:translateY(32px)}
.quest:nth-child(3){grid-column:9/span 4;min-height:302px;transform:translateY(12px)}
.quest:hover{transform:translateY(-5px)!important}
.quest::after{content:"";position:absolute;inset:auto 14px 14px auto;width:86px;height:86px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(61,97,255,.11),rgba(61,97,255,0) 72%);pointer-events:none}
.quest-num{display:inline-flex;align-items:center;justify-content:center;width:fit-content;padding:7px 10px;border-radius:999px;border:1px solid rgba(61,97,255,.12);background:rgba(255,255,255,.26);font-size:12px;letter-spacing:.08em}
.quest-mark{font-size:46px;line-height:1;margin:28px 0 22px;opacity:.96}
.quest h3{font-size:clamp(28px,2.4vw,38px);line-height:.98;margin-bottom:12px}
.quest p{max-width:28ch}
.how-work-kicker{margin-bottom:18px}
.capabilities{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:10px;border-radius:34px;border:1px solid rgba(255,255,255,.48);background:rgba(255,255,255,.24);box-shadow:0 20px 54px rgba(43,50,75,.06),inset 0 1px 0 rgba(255,255,255,.68);-webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%);overflow:hidden}
.capabilities::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0)),radial-gradient(circle at 20% 10%,rgba(61,97,255,.045),transparent 30%),radial-gradient(circle at 80% 90%,rgba(61,97,255,.03),transparent 30%);pointer-events:none}
.capability,.capability+.capability{position:relative;z-index:1;min-height:0;padding:28px 24px 30px;border:0;border-radius:24px;background:transparent;box-shadow:none}
.capability+.capability{border-left:1px solid rgba(17,17,17,.08)}
.capability::before{content:"";display:block;width:100%;height:2px;margin-bottom:18px;border-radius:999px;background:linear-gradient(90deg,rgba(61,97,255,.80),rgba(61,97,255,.15))}
.capability .num{font-size:12px;letter-spacing:.12em;margin-bottom:18px;opacity:.85}
.capability h3{font-size:clamp(34px,3vw,52px);line-height:.96;margin:0 0 18px}
.capability ul{margin:0;padding:0;list-style:none}
.capability li{position:relative;padding-left:16px;margin:0 0 10px;color:var(--muted)}
.capability li::before{content:"•";position:absolute;left:0;top:0;color:var(--accent)}
html[data-theme="dark"] .quest-num{border-color:rgba(113,146,255,.22);background:rgba(255,255,255,.05)}
html[data-theme="dark"] .capabilities{border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.035);box-shadow:0 20px 54px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)}
html[data-theme="dark"] .capabilities::before{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)),radial-gradient(circle at 20% 10%,rgba(113,146,255,.07),transparent 30%),radial-gradient(circle at 80% 90%,rgba(58,135,255,.05),transparent 30%)}
html[data-theme="dark"] .capability+.capability{border-left-color:rgba(255,255,255,.08)}
@media(max-width:900px){.quests{grid-template-columns:1fr;gap:12px}.quest:nth-child(1),.quest:nth-child(2),.quest:nth-child(3){grid-column:auto;min-height:0;transform:none}.quest-mark{margin:22px 0 18px;font-size:38px}.capabilities{grid-template-columns:1fr;gap:0;padding:8px}.capability,.capability+.capability{padding:24px 20px 26px;border-left:0}.capability+.capability{border-top:1px solid rgba(17,17,17,.08)}html[data-theme="dark"] .capability+.capability{border-top-color:rgba(255,255,255,.08)}}


/* V13 — Transmuter selected work */
.visual-transmuter{background:#0a0d12;color:#f4f6fb;position:relative;overflow:hidden}
.visual-transmuter::before{content:"";position:absolute;inset:-22%;background:radial-gradient(circle at 34% 40%,rgba(78,116,255,.44),transparent 24%),radial-gradient(circle at 68% 58%,rgba(74,213,255,.22),transparent 22%),radial-gradient(circle at 54% 72%,rgba(153,93,255,.20),transparent 25%);filter:blur(28px)}
.visual-transmuter::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 88%)}
.transmuter-ring{position:absolute;border:1px solid rgba(131,157,255,.34);border-radius:50%;left:50%;top:47%;transform:translate(-50%,-50%)}
.transmuter-ring.r1{width:180px;height:180px;box-shadow:0 0 60px rgba(83,115,255,.08)}
.transmuter-ring.r2{width:270px;height:270px;border-color:rgba(110,145,255,.18)}
.transmuter-ring.r3{width:360px;height:360px;border-color:rgba(110,145,255,.09)}
.transmuter-node{position:absolute;left:50%;top:47%;width:18px;height:18px;border-radius:50%;background:#8ca2ff;transform:translate(-50%,-50%);box-shadow:0 0 0 16px rgba(113,146,255,.08),0 0 45px rgba(113,146,255,.40)}
.transmuter-type{position:absolute;left:26px;bottom:23px;z-index:3;font-size:clamp(42px,5vw,76px);line-height:.86;letter-spacing:-.065em;font-weight:760}
.transmuter-sub{position:absolute;right:25px;top:23px;z-index:3;width:230px;font:10px/1.55 ui-monospace,monospace;color:rgba(244,246,251,.62);text-transform:uppercase;text-align:right}
.transmuter-badge{position:absolute;right:25px;bottom:25px;z-index:3;padding:9px 11px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.06);font:10px ui-monospace,monospace;text-transform:uppercase;backdrop-filter:blur(12px)}


/* V14 — Transmuter copy refinement */
.transmuter-title,
.visual-transmuter .transmuter-title,
.project-visual.visual-transmuter .transmuter-title {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  letter-spacing: -.06em;
}

/* case study */
.case-hero { padding:100px 0 60px; }
.case-breadcrumb { color:var(--muted); font:11px ui-monospace,monospace; text-transform:uppercase; }
.case-title { margin:60px 0 36px; font-size:clamp(70px,12vw,170px); line-height:.8; letter-spacing:-.075em; }
.case-meta { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; border-top:1px solid var(--line); padding-top:16px; }
.case-meta .item small { display:block; font:9px ui-monospace,monospace; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.case-meta .item span { font-size:13px; }
.case-art { min-height:620px; margin:20px 0 90px; }
.case-body { display:grid; grid-template-columns:1fr 2fr; gap:90px; padding:90px 0; border-top:1px solid var(--line); }
.case-body h2 { margin:0; font:11px ui-monospace,monospace; text-transform:uppercase; color:var(--muted); }
.case-copy { max-width:760px; }
.case-copy .big { font-size:clamp(30px,4vw,54px); line-height:1.1; letter-spacing:-.045em; margin:0 0 36px; }
.case-copy p, .case-copy li { color:var(--muted); font-size:15px; line-height:1.7; }
.case-copy ul { padding-left:20px; }
.case-copy strong { color:var(--ink); }
.next-project { padding:90px 0 120px; border-top:1px solid var(--line); }
.next-project a { display:flex; justify-content:space-between; align-items:end; gap:30px; }
.next-project span { font:10px ui-monospace,monospace; color:var(--muted); text-transform:uppercase; }
.next-project strong { font-size:clamp(50px,8vw,110px); letter-spacing:-.065em; }

@media (max-width: 900px) {
  .shell { width:min(calc(100% - 28px), var(--max)); }
  .nav-links { display:none; }
  .hero { min-height:auto; padding-top:100px; }
  .hero-bottom, .section-head, .about-grid, .case-body { grid-template-columns:1fr; gap:34px; }
  .hero-notes { margin-top:22px; }
  .section { padding:84px 0; }
  .project-card.span-7, .project-card.span-5, .project-card.span-6 { grid-column:span 12; }
  .project-visual { min-height:360px; }
  .experience-row { grid-template-columns:90px 1fr; gap:16px; }
  .experience-row p, .experience-row .tag { grid-column:2; text-align:left; }
  .quests, .capabilities { grid-template-columns:1fr; }
  .quest { min-height:250px; }
  .capability, .capability + .capability { padding:28px 0 44px; border-right:0; border-bottom:1px solid var(--line); }
  .capability h3 { margin-top:45px; }
  .portrait-photo { width:min(420px,100%); }
  .contact-bottom { grid-template-columns:1fr; }
  .contact-links { justify-content:flex-start; }
  .case-meta { grid-template-columns:repeat(2,1fr); }
  .case-art { min-height:440px; }
}

@media (max-width: 560px) {
  .nav { height:64px; }
  .nav-cta .availability { display:none; }
  .hero h1 { font-size:clamp(46px,14vw,72px); line-height:.96; }
  .hero-bottom { margin-top:34px; }
  .hero-notes { grid-template-columns:1fr; }
  .section-title { font-size:48px; }
  .lede { font-size:28px; }
  .project-visual { min-height:300px; }
  .project-description { grid-template-columns:1fr auto; }
  .experience-row { grid-template-columns:1fr; }
  .experience-row p, .experience-row .tag { grid-column:1; }
  .fact-list, .case-meta { grid-template-columns:1fr; }
  .contact h2 { font-size:19vw; }
  .footer { gap:20px; flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}

/* Slance project art */
.visual-slance { background:#f0eadf; color:#111; }
.visual-slance::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,107,84,.12), transparent 38%), linear-gradient(300deg, rgba(48,58,255,.12), transparent 42%); }
.slance-frame { position:absolute; border:1px solid rgba(17,17,17,.55); background:#fff8ec; box-shadow:7px 8px 0 rgba(17,17,17,.9); }
.slance-frame span { position:absolute; left:10px; top:9px; font:9px ui-monospace,monospace; color:#666; }
.slance-frame-a { width:34%; height:48%; left:8%; top:14%; transform:rotate(-4deg); background:linear-gradient(145deg,#ff705a 0 48%,#f4c54b 48% 100%); }
.slance-frame-b { width:34%; height:48%; left:34%; top:26%; transform:rotate(2deg); background:linear-gradient(45deg,#2727ee 0 52%,#c9c5ff 52% 100%); }
.slance-frame-c { width:28%; height:42%; right:8%; top:12%; transform:rotate(5deg); background:linear-gradient(150deg,#121212 0 50%,#75e4c0 50% 100%); }
.slance-type { position:absolute; left:25px; bottom:22px; font-size:clamp(45px,6vw,84px); font-weight:800; letter-spacing:-.075em; z-index:4; }
.slance-sub { position:absolute; right:22px; bottom:24px; width:170px; font:10px/1.45 ui-monospace,monospace; text-transform:uppercase; z-index:4; text-align:right; }


/* V9 final responsive type overrides — keep display type compact everywhere */
@media (max-width: 900px) {
  .hero h1 {
    font-size: clamp(42px, 11.5vw, 64px);
    line-height: .98;
  }
  .section-title {
    font-size: clamp(31px, 8.5vw, 43px);
    line-height: 1.06;
  }
  .lede {
    font-size: clamp(22px, 6.3vw, 29px);
  }
  .about-copy p {
    font-size: clamp(22px, 6vw, 29px);
  }
  .contact h2 {
    font-size: clamp(56px, 15vw, 86px);
  }
}
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(40px, 11.8vw, 58px); }
  .section-title { font-size: clamp(29px, 8.4vw, 39px); }
  .lede { font-size: clamp(21px, 6.2vw, 27px); }
  .about-copy p { font-size: clamp(21px, 6vw, 27px); }
  .contact h2 { font-size: clamp(52px, 14vw, 76px); }
}


/* Stacking About / Selected Work intro cards.
   Only the two intro panels pin; the project gallery scrolls normally. */
.intro-stack {
  position: relative;
  isolation: isolate;
  padding-bottom: clamp(220px, 29vh, 340px);
}
.intro-stack > #about-intro,
.intro-stack > #work {
  position: sticky;
  top: 94px;
  width: min(calc(100% - 24px), 1500px);
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 7% 25%, rgba(84,117,255,.095), transparent 55%),
    linear-gradient(120deg, rgba(255,255,255,.22), transparent 62%),
    var(--paper);
  box-shadow: 0 20px 52px rgba(30,44,92,.095), inset 0 1px 0 rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
}
.intro-stack > #about-intro { z-index: 1; }
.intro-stack > #work {
  z-index: 2;
  scroll-margin-top: 94px;
  background:
    radial-gradient(ellipse at 90% 70%, rgba(94,181,255,.10), transparent 53%),
    linear-gradient(130deg, rgba(255,255,255,.30), transparent 58%),
    var(--paper);
  box-shadow: 0 26px 66px rgba(30,44,92,.13), inset 0 1px 0 rgba(255,255,255,.7);
}
.intro-stack > #about-intro .section-head,
.intro-stack > #work > .shell > .section-head { margin-bottom: 0; }
.intro-stack-tail { height: 0; }
.work-projects { position: relative; z-index: 3; padding: 24px 0 100px; }
html[data-theme="dark"] .intro-stack > #about-intro,
html[data-theme="dark"] .intro-stack > #work {
  border-color: rgba(255,255,255,.12);
  background:
    radial-gradient(ellipse at 10% 15%, rgba(72,106,255,.15), transparent 55%),
    linear-gradient(120deg, rgba(255,255,255,.03), transparent 65%),
    var(--paper);
  box-shadow: 0 24px 62px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.075);
}
html[data-theme="dark"] .intro-stack > #work {
  background:
    radial-gradient(ellipse at 90% 75%, rgba(49,142,255,.14), transparent 58%),
    linear-gradient(120deg, rgba(255,255,255,.045), transparent 65%),
    var(--paper);
}
@media (max-width: 900px) {
  .intro-stack { padding-bottom: clamp(150px, 23vh, 220px); }
  .intro-stack > #about-intro,
  .intro-stack > #work { top: 78px; width: calc(100% - 12px); border-radius: 20px; }
  .intro-stack > #work { scroll-margin-top: 78px; }
  .work-projects { padding-top: 16px; }
}
@media (max-width: 560px) {
  .intro-stack > #about-intro .section-head { min-height: 320px; }
  .intro-stack > #work > .shell > .section-head { min-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-stack { padding-bottom: 0; }
  .intro-stack > #about-intro,
  .intro-stack > #work { position: relative; top: auto; }
}


/* How I Work: scroll-sequenced panels (Build → Grow → Connect). */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .how-work-section {
    min-height: calc(100vh + 1050px);
    padding-top: 108px;
    padding-bottom: 108px;
  }

  .how-work-stage {
    position: sticky;
    top: clamp(92px, 15vh, 154px);
  }

  .how-work-section .capabilities {
    /* Keep the original three-column, connected glass framework. */
    isolation: isolate;
  }

  .how-work-section.is-scroll-ready .capability {
    transform: translate3d(var(--cap-shift, 0px), 0, 0);
    opacity: var(--cap-opacity, 1);
    will-change: transform, opacity;
  }
}

/* Reduced motion, touch/mobile and no-JS: original stationary layout. */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .how-work-section .capability {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Side Quests: four experiments and a separate selected web design showcase. */
#quests .quests {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding-bottom: 22px;
}
#quests .quests > .quest {
  grid-column: span 6;
  min-height: 286px;
}
#quests .quests > .quest:nth-child(1),
#quests .quests > .quest:nth-child(3) { transform: translateY(0); }
#quests .quests > .quest:nth-child(2),
#quests .quests > .quest:nth-child(4) { transform: translateY(18px); }
#quests .quests > .quest:hover { transform: translateY(-5px) !important; }
#quests .quest h3 { font-size: clamp(28px, 2.4vw, 36px); }
#quests .quest p { max-width: 43ch; }

.web-showcase {
  margin-top: clamp(86px, 10vw, 142px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.web-showcase-intro {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 34px;
  margin-bottom: 27px;
}
.web-showcase-eyebrow {
  padding-top: 9px;
  color: var(--accent);
  font: 700 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  white-space: nowrap;
}
.web-showcase-intro h3 {
  max-width: 580px;
  margin: 0;
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 620;
}
.web-showcase-intro h3 span { color: var(--muted); }
.web-showcase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.web-design-link { display: block; min-width: 0; }
.web-design-preview {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: end;
  overflow: hidden;
  aspect-ratio: 1.43;
  padding: 20px;
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(32,45,90,.08), inset 0 1px 0 rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.22);
  transition: transform .3s ease, box-shadow .3s ease;
}
.web-design-link:hover .web-design-preview,
.web-design-link:focus-visible .web-design-preview {
  transform: translateY(-5px);
  box-shadow: 0 26px 55px rgba(32,45,90,.16);
}
.web-design-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 3px; }
.web-design-preview strong {
  position: relative; z-index: 2;
  font-size: clamp(27px, 3.2vw, 46px);
  letter-spacing: -.07em; line-height: .93; font-weight: 760;
}
.web-design-preview strong span { display: block; padding-top: 7px; font: 600 9px/1.4 ui-monospace, monospace; letter-spacing: .14em; }
.mock-toolbar { position: absolute; top: 18px; left: 20px; display: flex; gap: 5px; z-index: 2; }
.mock-toolbar i { display: block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; }
.web-design-preview-trader { background: radial-gradient(circle at 74% 38%, #2b3b44, transparent 55%), #10161a; color: #dcff83; }
.mock-trader-chart { position: absolute; left: 9%; right: 5%; top: 25%; height: 41%; opacity: .75; }
.mock-trader-chart svg { width: 100%; height: 100%; overflow: visible; }
.web-design-preview-transmuter { background: radial-gradient(circle at 54% 45%, #284168, #0f1322 66%); color: #edf3ff; }
.mock-orbit { position: absolute; width: 175px; aspect-ratio: 1; border: 1px solid rgba(138,169,255,.3); border-radius: 50%; left: 49%; top: 44%; transform: translate(-50%,-50%); }
.mock-orbit-b { width: 260px; border-color: rgba(138,169,255,.13); }
.mock-orbit-core { position:absolute; left:49%; top:44%; width:16px; height:16px; border-radius:50%; transform:translate(-50%,-50%); background:#8cafff; box-shadow:0 0 0 15px rgba(140,175,255,.08); }
.web-design-preview-up { background: radial-gradient(circle at 73% 23%, rgba(0,204,255,.35), transparent 46%), #071b1a; color: #a1ffe3; }
.mock-up-orbit { position:absolute; width:245px; aspect-ratio:1; border:1px solid rgba(130,255,215,.25); border-radius:50%; left:70%; top:46%; transform:translate(-50%,-50%); }
.mock-up-orbit.two { width:145px; border-color:rgba(130,255,215,.46); }
.web-design-meta { display:flex; justify-content:space-between; gap:18px; align-items:center; padding:17px 4px 5px; }
.web-design-meta b { display:block; font-size:17px; font-weight:650; letter-spacing:-.03em; }
.web-design-meta small { display:block; margin-top:4px; color:var(--muted); font-size:12px; }
.web-design-arrow { color:var(--accent); font-size:23px; transition:transform .25s ease; }
.web-design-link:hover .web-design-arrow { transform:translate(3px,-3px); }
@media (max-width: 900px) {
  #quests .quests > .quest { grid-column: span 12; min-height: 230px; transform: none !important; }
  #quests .quests > .quest:hover { transform: translateY(-3px) !important; }
  .web-showcase-intro { flex-direction: column; gap: 15px; }
  .web-showcase-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .web-showcase-grid { grid-template-columns: 1fr; }
  .web-design-preview { aspect-ratio: 1.62; }
  .web-showcase { margin-top: 62px; }
}
@media (prefers-reduced-motion: reduce) {
  .web-design-preview, .web-design-arrow { transition: none !important; }
}


/* ---- Performance: same look, far less work per frame ----
   1. Real glass blur only where content actually scrolls behind it (the header).
      Every other glass panel sits over the soft, near-flat background, where a live
      blur is invisible but still had to be recalculated on every frame.            */
.hero-note, .quest, .capability, .experience-row, .contact-bottom,
.portrait-photo, .theme-toggle, .capabilities,
.intro-stack > #about-intro, .intro-stack > #work {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 2. The drifting orbs: drop the huge blur filter and get the same softness from
      longer gradient fades instead, so moving them is a cheap GPU transform.        */
.ambient-orb, html[data-theme="dark"] .ambient-orb { filter: none; transform: translateZ(0); }
.orb-a { background: radial-gradient(circle at 36% 34%, rgba(49,92,255,.8), rgba(49,92,255,.42) 24%, rgba(49,92,255,.14) 46%, rgba(49,92,255,.04) 62%, transparent 76%); }
.orb-b { background: radial-gradient(circle at 50% 50%, rgba(101,216,255,.78), rgba(101,216,255,.40) 24%, rgba(101,216,255,.13) 46%, rgba(101,216,255,.04) 62%, transparent 76%); }
.orb-c { background: radial-gradient(circle at 50% 50%, rgba(140,120,255,.8), rgba(140,120,255,.40) 24%, rgba(140,120,255,.12) 46%, rgba(140,120,255,.035) 62%, transparent 76%); }

/* 3. Grain overlay: plain blending looks the same at this strength, but no longer
      forces the whole page to be re-blended under it while scrolling.             */
.page-noise, html[data-theme="dark"] .page-noise { mix-blend-mode: normal; transform: translateZ(0); }

/* 4. Portrait now ships as a lighter WebP inside <picture>; keep the old layout. */
.portrait-photo picture { display: contents; }

/* ---- GSAP / Lenis smooth scrolling (desktop, pointer devices only) ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.how-work-section.is-gsap .capability { will-change: transform, opacity; }
/* stands in for the frosted look the live blur gave this large panel */
.capabilities { background: rgba(255,255,255,.32); }
html[data-theme="dark"] .capabilities { background: rgba(255,255,255,.045); }


/* ---- Experience: cards stack on top of each other while scrolling ---- */
@media (prefers-reduced-motion: no-preference) {
  .experience { --stack-top: 94px; --stack-step: 10px; gap: 14px; padding-bottom: clamp(80px, 14vh, 160px); }
  .experience > .experience-row {
    position: sticky;
    top: calc(var(--stack-top) + var(--i, 0) * var(--stack-step));
    transform-origin: 50% 0;
    /* solid version of the glass look, so the card underneath doesn't show through */
    background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.42)), var(--paper);
    border-color: rgba(255,255,255,.7);
    box-shadow: 0 -8px 28px rgba(50,58,88,.05), 0 14px 42px rgba(50,58,88,.06), inset 0 1px 0 rgba(255,255,255,.75);
    transition: background .22s ease;
  }
  .experience > .experience-row:hover { transform: none; background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.54)), var(--paper); }
  html[data-theme="dark"] .experience > .experience-row {
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03)), var(--paper);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 -8px 28px rgba(0,0,0,.22), 0 20px 60px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
  }
  html[data-theme="dark"] .experience > .experience-row:hover { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05)), var(--paper); }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .experience { --stack-top: 78px; --stack-step: 8px; gap: 12px; }
}
.experience > .experience-row:nth-child(1) { --i: 0; }
.experience > .experience-row:nth-child(2) { --i: 1; }
.experience > .experience-row:nth-child(3) { --i: 2; }
.experience > .experience-row:nth-child(4) { --i: 3; }
.experience > .experience-row:nth-child(5) { --i: 4; }
.experience > .experience-row:nth-child(6) { --i: 5; }
.experience > .experience-row:nth-child(7) { --i: 6; }
.experience > .experience-row:nth-child(8) { --i: 7; }
.experience > .experience-row:nth-child(9) { --i: 8; }
.experience > .experience-row:nth-child(10) { --i: 9; }
.experience > .experience-row:nth-child(11) { --i: 10; }
.experience > .experience-row:nth-child(12) { --i: 11; }

/* Hero: start the content close under the nav instead of pushing it to the bottom of the screen */
.hero { min-height: 0; align-content: start; padding-top: clamp(56px, 8vh, 88px); }
@media (max-width: 900px) { .hero { padding-top: 56px; } }
/* Hero: a little more room under the nav so the hero fills more of the first screen */
.hero { min-height: min(82vh, 860px); align-content: center; padding-top: clamp(72px, 11vh, 128px); padding-bottom: clamp(56px, 8vh, 96px); }
@media (max-width: 900px) { .hero { min-height: 0; padding-top: 72px; } }