/* ════════════════════════════════════════════════
   DESIGN TOKENS
   ════════════════════════════════════════════════ */
:root {
    --bg:          #F8F6F1;
    --bg-alt:      #F0EDE6;
    --surface:     #FFFFFF;
    --surface-2:   #FAF9F6;
    --border:      #E2DED4;
    --border-2:    #D6D0C4;
    --text:        #191916;
    --text-mid:    #4A4840;
    --text-muted:  #8A8680;
    --gold:        #8B6B14;
    --gold-light:  rgba(139,107,20,0.08);
    --gold-mid:    rgba(139,107,20,0.18);
    --green:       #2A6040;
    --blue:        #2E5A8E;
    --amber:       #7A5C0E;
    --sans:        'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif;
    --serif:       'Playfair Display', Georgia, 'Times New Roman', serif;
    --mono:        'JetBrains Mono', 'SF Mono', Consolas, monospace;
    --spring:      cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --elastic:     cubic-bezier(0.34, 1.56, 0.64, 1);
    --max-w:       1280px;
    --pad-x:       clamp(24px, 6vw, 80px);
    --gap-section: clamp(72px, 10vw, 140px);
}

/* ════════════════════════════════════════════════
   RESET
   ════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    cursor: none;
}
::selection { background: rgba(139,107,20,0.14); color: var(--text); }
a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
img { max-width: 100%; display: block; }

/* ════════════════════════════════════════════════
   GRAIN
   ════════════════════════════════════════════════ */
.grain {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 9001; opacity: 0.022;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    animation: grainShift 0.15s steps(1) infinite;
}
@keyframes grainShift {
    0%{background-position:0 0} 10%{background-position:-20px -30px}
    20%{background-position:-40px 10px} 30%{background-position:5px -18px}
    40%{background-position:-30px 25px} 50%{background-position:12px -38px}
    60%{background-position:-22px 5px} 70%{background-position:33px -22px}
    80%{background-position:-10px 40px} 90%{background-position:25px -5px}
    100%{background-position:0 0}
}

/* ════════════════════════════════════════════════
   CURSOR
   ════════════════════════════════════════════════ */
.cursor {
    position: fixed; top: 0; left: 0;
    width: 10px; height: 10px;
    background: var(--text); border-radius: 50%;
    pointer-events: none; z-index: 10000;
    transform: translate(-50%, -50%);
    mix-blend-mode: multiply;
    transition: width .3s var(--elastic), height .3s var(--elastic),
                background .3s ease, mix-blend-mode .3s ease;
}
body.cursor-link .cursor {
    width: 48px; height: 48px;
    background: rgba(139,107,20,0.15);
    mix-blend-mode: normal;
    border: 1px solid rgba(139,107,20,0.3);
}
body.cursor-text .cursor {
    width: 3px; height: 28px; border-radius: 2px;
    background: var(--gold); mix-blend-mode: normal;
}

/* ════════════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════════════ */
#navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 0 var(--pad-x); height: 64px;
    background: rgba(248,246,241,0.9);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid transparent;
    transform: translateY(-100%);
    transition: transform .5s var(--ease-expo), border-color .3s ease;
}
#navbar.visible { transform: translateY(0); border-bottom-color: var(--border); }
.nav-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo-wordmark {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 17px; font-weight: 700; letter-spacing: -0.03em;
    color: var(--text); text-transform: uppercase;
}
.logo-rule { display: inline-block; width: 1px; height: 16px; background: var(--border-2); }
.logo-sub {
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase;
}
.nav-links { display: flex; gap: 32px; margin: 0 auto; align-items: center; }
.nav-link {
    font-family: var(--mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--text-muted);
    position: relative; transition: color .2s ease;
    display: flex; align-items: center;
}
.nav-link::after {
    content: ''; position: absolute; bottom: -2px; left: 0;
    width: 0; height: 1px; background: var(--gold);
    transition: width .35s var(--ease-expo);
}
.nav-link:hover, .nav-link.active { color: var(--text); }
.nav-link.active::after { width: 100%; }
/* Resume — plain link, no box */
.nav-resume { color: var(--text-muted) !important; }
.nav-resume:hover { color: var(--amber) !important; }
.nav-resume::after { display: none !important; }
.nav-availability {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 10px;
    color: var(--text-muted); letter-spacing: 0.04em; flex-shrink: 0;
}
.avail-dot {
    width: 6px; height: 6px; background: #2ecc71; border-radius: 50%;
    animation: pulseDot 2.4s ease infinite;
}
@keyframes pulseDot {
    0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(46,204,113,0.5); }
    50%      { opacity:.8; box-shadow:0 0 0 6px rgba(46,204,113,0); }
}

/* ════════════════════════════════════════════════
   REVEAL SYSTEM
   ════════════════════════════════════════════════ */
.reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity .75s var(--ease-expo), transform .75s var(--ease-expo);
    transition-delay: var(--delay, 0s);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-line {
    opacity: 0; transform: translateY(14px);
    transition: opacity .55s var(--ease-expo), transform .55s var(--ease-expo);
}
.reveal-line.visible { opacity: 1; transform: translateY(0); }
.journey-item {
    opacity: 0; transform: translateY(28px);
    transition: opacity .75s var(--ease-expo), transform .75s var(--ease-expo);
    transition-delay: var(--delay, 0s);
}
.journey-item.visible { opacity: 1; transform: translateY(0); }

/* ════════════════════════════════════════════════
   SHARED
   ════════════════════════════════════════════════ */
.section-label {
    font-family: var(--mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 40px;
    display: flex; align-items: center; gap: 16px;
}
.section-label::before {
    content: ''; display: inline-block; width: 32px; height: 1px; background: var(--gold);
}
.section-desc {
    font-family: var(--serif); font-size: clamp(15px, 1.5vw, 17px);
    font-style: italic; color: var(--text-muted);
    max-width: 600px; line-height: 1.75; margin-bottom: 40px;
}

/* ════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════ */
#hero {
    position: relative; min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: 100px var(--pad-x) 60px; overflow: hidden;
}
.hero-bg {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.hero-bg-text {
    position: absolute; top: -15%; left: -8%; width: 120%; height: 140%;
    font-family: var(--mono); font-size: 12px; line-height: 2.6;
    color: var(--text); opacity: 0.018;
    word-spacing: 2.5em; word-break: break-all;
    transform: rotate(-4deg);
    animation: bgDrift 100s linear infinite; user-select: none;
}
@keyframes bgDrift {
    0%   { transform: rotate(-4deg) translateY(0); }
    100% { transform: rotate(-4deg) translateY(-15%); }
}

/* Hero split layout */
.hero-split {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1fr 420px;
    gap: clamp(40px, 6vw, 80px); align-items: center;
    max-width: var(--max-w);
}
.hero-left { display: flex; flex-direction: column; gap: 24px; }
.hero-eyebrow {
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted);
    opacity: 0; animation: heroPop .6s var(--ease-expo) .15s forwards;
}
.hero-oneliner {
    font-family: var(--serif); font-size: 14px; font-style: italic;
    color: var(--text-muted); line-height: 1.5; max-width: 480px;
    opacity: 0; animation: heroPop .6s var(--ease-expo) .3s forwards;
    margin-top: 6px; margin-bottom: -8px;
}
/* TYPING HEADLINE */
.hero-headline {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(44px, 7vw, 96px); font-weight: 700;
    line-height: 1.04; letter-spacing: -0.04em; color: var(--text);
    min-height: 2.2em;
}
.typing-line { display: inline; white-space: pre-wrap; }
.typing-cursor {
    display: inline-block; width: 3px; margin-left: 1px;
    font-size: 0.9em; color: var(--gold); font-weight: 300;
    animation: cursorBlink .85s step-end infinite;
    vertical-align: middle;
}
@keyframes cursorBlink {
    0%,100% { opacity: 1; }
    50%      { opacity: 0; }
}
.hero-sub {
    font-size: clamp(15px, 1.5vw, 17px); line-height: 1.8;
    color: var(--text-mid); max-width: 540px;
    opacity: 0; animation: heroPop .7s var(--ease-expo) 2.2s forwards;
}
.hero-ctas {
    display: flex; gap: 14px; flex-wrap: wrap;
    opacity: 0; animation: heroPop .7s var(--ease-expo) 2.4s forwards;
}
.cta-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; background: var(--text); color: var(--bg);
    border-radius: 4px; font-family: var(--mono); font-size: 12px;
    letter-spacing: 0.06em; text-transform: uppercase;
    transition: background .3s ease, transform .25s var(--elastic);
}
.cta-primary:hover { background: var(--gold); color: #fff; transform: translateY(-2px); }
.cta-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border: 1px solid var(--border-2); color: var(--text-mid);
    border-radius: 4px; font-family: var(--mono); font-size: 12px;
    letter-spacing: 0.06em; text-transform: uppercase;
    transition: border-color .3s ease, color .3s ease, transform .25s var(--elastic);
}
.cta-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }

/* Hero quick tags */
.hero-tags {
    display: flex; flex-wrap: wrap; gap: 8px;
    opacity: 0; animation: heroPop .7s var(--ease-expo) 2.6s forwards;
}
.htag {
    font-family: var(--mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--text-muted); padding: 4px 12px;
    border: 1px solid var(--border); border-radius: 100px;
    background: var(--surface);
}
.htag-gold { color: var(--amber); border-color: var(--gold-mid); background: var(--gold-light); }
.htag-blue { color: var(--blue); border-color: rgba(46,90,142,0.2); background: rgba(46,90,142,0.05); }
/* Guinness WR stamp — intentionally different from all other tags */
.htag-guinness {
    color: #fff; background: var(--gold);
    border-color: var(--gold);
    font-weight: 700; letter-spacing: 0.12em;
    box-shadow: 0 2px 8px rgba(139,107,20,0.35);
}

/* Hero right — photo */
.hero-right {
    position: relative;
    opacity: 0; animation: heroPop .9s var(--ease-expo) .8s forwards;
}
.hero-photo-frame {
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border);
    position: relative; aspect-ratio: 2/3;
    box-shadow: 0 24px 64px rgba(25,25,22,0.12), 0 4px 16px rgba(25,25,22,0.06);
}
.hero-photo {
    width: 100%; height: 100%; object-fit: cover; object-position: top center;
    display: block;
}
.photo-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(25,25,22,0.72) 100%);
    pointer-events: none;
}
.photo-caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 20px 20px 18px;
    display: flex; flex-direction: column; gap: 4px;
}
.photo-name {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: #fff;
}
.photo-role { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.6); letter-spacing: 0.06em; }
.hero-live-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px; background: var(--border);
    border: 1px solid var(--border); border-radius: 6px;
    margin-top: 12px; overflow: hidden;
}
.live-stat {
    background: var(--surface); padding: 14px 12px;
    display: flex; flex-direction: column; gap: 3px; text-align: center;
}
.ls-num {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: var(--text);
}
.ls-label { font-family: var(--mono); font-size: 9px; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; }

@keyframes heroPop {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Scroll indicator positioned strictly in center */
.hero-scroll {
    position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    opacity: 0; animation: heroPopScroll .6s var(--ease-expo) 2.8s forwards;
    z-index: 5;
}
@keyframes heroPopScroll {
    from { opacity: 0; transform: translate(-50%, 14px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.scroll-label {
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.scroll-track { width: 1px; height: 48px; background: var(--border); position: relative; overflow: hidden; margin: 0 auto; }
.scroll-thumb {
    position: absolute; top: 0; left: 0; width: 100%; height: 40%;
    background: var(--gold); animation: scrollThumb 1.8s var(--ease-smooth) infinite;
}
@keyframes scrollThumb { 0% { transform: translateY(-100%); } 50%,100% { transform: translateY(250%); } }

/* ════════════════════════════════════════════════
   MARQUEE TICKER
   ════════════════════════════════════════════════ */
.marquee-wrap {
    overflow: hidden; background: var(--text); padding: 14px 0;
    border-top: none; border-bottom: none;
    position: relative; z-index: 1;
}
.marquee-track {
    display: flex; align-items: center; gap: 28px;
    white-space: nowrap;
    animation: marqueeScroll 38s linear infinite;
}
.marquee-track span {
    font-family: var(--mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.1em; color: rgba(248,246,241,0.55); flex-shrink: 0;
}
.mx-sep { color: var(--gold) !important; opacity: 0.9 !important; }
@keyframes marqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/* Slowed from 38s to 62s so items are actually readable */
.marquee-track { animation-duration: 62s !important; }

/* ════════════════════════════════════════════════
   NUMBERS
   ════════════════════════════════════════════════ */
#numbers {
    padding: var(--gap-section) var(--pad-x);
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.numbers-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 32px 40px; margin-bottom: 48px;
}
.stat-block { display: flex; flex-direction: column; gap: 6px; }
.stat-num {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(36px, 4.5vw, 56px); font-weight: 700;
    letter-spacing: -0.04em; color: var(--text); line-height: 1; display: block;
}
.gwrnum { color: var(--gold); }
.stat-name { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.stat-detail { font-family: var(--serif); font-size: 13px; font-style: italic; color: var(--text-muted); line-height: 1.45; }
.numbers-footer {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 32px; border-top: 1px solid var(--border); padding-top: 32px;
}
.numbers-quote {
    font-family: var(--serif); font-size: clamp(20px, 2.2vw, 26px);
    font-style: italic; color: var(--text); line-height: 1.5;
    border-left: 2px solid var(--gold); padding-left: 20px; flex: 1; min-width: 260px;
    font-weight: 500;
}
.numbers-labels {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 10px; font-family: var(--mono); font-size: 11px;
    color: var(--text-muted); letter-spacing: 0.04em;
}
.nl { display: inline; }
.nl-sep { color: var(--border-2); }

/* ════════════════════════════════════════════════
   STORY
   ════════════════════════════════════════════════ */
#story {
    padding: var(--gap-section) var(--pad-x);
}
/* Portrait stamp tag */
.ptag-stamp {
    color: #fff !important; background: var(--gold) !important;
    border-color: var(--gold) !important; font-weight: 700;
    letter-spacing: 0.12em; box-shadow: 0 2px 6px rgba(139,107,20,0.35);
}
.story-layout {
    display: grid; grid-template-columns: 300px 1fr;
    gap: 72px; align-items: start; max-width: var(--max-w);
}
.portrait-frame {
    position: sticky; top: 100px;
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border);
    aspect-ratio: 3/4;
    position: sticky; top: 100px;
}
.portrait-photo {
    width: 100%; height: 100%; object-fit: cover; object-position: top center;
    display: block;
}
.portrait-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 55%, rgba(25,25,22,0.8) 100%);
    pointer-events: none;
}
.portrait-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 20px 18px 16px;
    display: flex; flex-direction: column; gap: 4px;
}
.pi-name {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -0.01em;
}
.pi-detail { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.6); letter-spacing: 0.05em; }
.portrait-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.ptag {
    font-family: var(--mono); font-size: 9px; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--amber);
    padding: 4px 10px; border: 1px solid var(--gold-mid);
    border-radius: 3px; background: var(--gold-light);
}
.ptag-blue { color: var(--blue); border-color: rgba(46,90,142,0.2); background: rgba(46,90,142,0.05); }
.portrait-philosophy {
    margin-top: 20px; background: var(--bg-alt);
    border: 1px solid var(--border); border-radius: 6px; padding: 18px;
}
.pp-text { font-family: var(--serif); font-size: 13px; font-style: italic; color: var(--text-mid); line-height: 1.65; margin-bottom: 8px; }
.pp-attr { font-family: var(--mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.05em; }

.manifesto-heading {
    font-family: var(--serif); font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 700; font-style: italic; color: var(--text);
    margin-bottom: 10px; letter-spacing: -0.02em; line-height: 1.2;
}
.manifesto-sub {
    font-family: var(--serif); font-size: 15px; font-style: italic;
    color: var(--text-muted); line-height: 1.65; margin-bottom: 32px; max-width: 520px;
}
.manifesto-lines { display: flex; flex-direction: column; }
.manifesto-line {
    font-size: clamp(14px, 1.4vw, 16px); line-height: 1.85;
    color: var(--text-mid); padding: 16px 0 16px 24px;
    border-left: 1px solid var(--border);
    transition: border-color .3s ease, color .3s ease;
}
.manifesto-line:hover { border-left-color: var(--gold); color: var(--text); }

/* Skills grid in story */
.manifesto-skills {
    margin-top: 40px; display: grid;
    grid-template-columns: repeat(3, 1fr); gap: 24px;
    border-top: 1px solid var(--border); padding-top: 32px;
}
.skills-group { display: flex; flex-direction: column; gap: 8px; }
.sg-label {
    font-family: var(--mono); font-size: 9px; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--gold); font-weight: 700; margin-bottom: 4px;
}
.sg-item { font-family: var(--mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.02em; }

/* ════════════════════════════════════════════════
   JOURNEY & EDUCATION
   ════════════════════════════════════════════════ */
#startups {
    padding: var(--gap-section) var(--pad-x);
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
}
.dual-layout {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 8vw, 120px); max-width: var(--max-w); margin: 0 auto;
}
.startup-track, .education-track { display: flex; flex-direction: column; max-width: 820px; }
.journey-item { display: grid; grid-template-columns: 48px 1fr; gap: 24px; position: relative; margin-bottom: 0; }
.journey-line-col { display: flex; flex-direction: column; align-items: center; }
.journey-num {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 50%;
    font-family: var(--mono); font-size: 10px; color: var(--gold);
    z-index: 2; flex-shrink: 0;
}
.journey-num svg { width: 14px; height: 14px; opacity: 0.8; }
.journey-connector {
    width: 1px; flex: 1; background: var(--border); min-height: 48px;
    margin-top: 8px; margin-bottom: 0px; position: relative;
    transform-origin: top;
}
.ed-connector { background: linear-gradient(to bottom, var(--border), transparent); }
.journey-body { padding-bottom: 48px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.journey-item:last-child .journey-body { border-bottom: none; }
.journey-header { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; flex-wrap: wrap; }
.journey-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(20px, 2.5vw, 28px); font-weight: 700;
    letter-spacing: -0.03em; color: var(--text); line-height: 1.1;
}
.journey-status {
    font-family: var(--mono); font-size: 9px; text-transform: uppercase;
    letter-spacing: 0.08em; padding: 3px 10px; border-radius: 100px;
}
.js-active { color: var(--gold); background: var(--gold-light); border: 1px solid var(--gold-mid); }
.js-past { color: var(--text-muted); background: var(--bg-alt); border: 1px solid var(--border); }
.journey-year { font-family: var(--mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; margin-bottom: 14px; }
.journey-text { font-size: clamp(14px, 1.4vw, 15px); line-height: 1.85; color: var(--text-mid); margin-bottom: 16px; }
.journey-insight {
    background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--gold);
    border-radius: 0 6px 6px 0; padding: 14px 18px; margin-bottom: 16px;
}
.ji-label { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); display: block; margin-bottom: 5px; }
.journey-insight p { font-family: var(--serif); font-size: 14px; font-style: italic; color: var(--text-mid); line-height: 1.6; }
.journey-grants { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.grant-pill {
    font-family: var(--mono); font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--blue); padding: 4px 12px;
    border: 1px solid rgba(46,90,142,0.2); border-radius: 100px;
    background: rgba(46,90,142,0.04);
}

/* ════════════════════════════════════════════════
   PROJECTS
   ════════════════════════════════════════════════ */
#work { padding: var(--gap-section) var(--pad-x); }
.work-header-row { margin-bottom: 48px; }
.projects-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.project-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    transition: transform .35s var(--elastic), box-shadow .35s ease, border-color .35s ease;
    overflow: hidden;
}
.project-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-2);
    box-shadow: 0 12px 40px rgba(25,25,22,0.1), 0 3px 10px rgba(25,25,22,0.05);
}
.project-card.flagship { grid-column: span 2; background: var(--surface-2); border-color: var(--gold-mid); }
.project-card.flagship:hover {
    border-color: rgba(139,107,20,0.4);
    box-shadow: 0 20px 60px rgba(139,107,20,0.1), 0 4px 16px rgba(139,107,20,0.06);
}
.card-inner { padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 10px; height: 100%; }
.card-top { display: flex; align-items: center; justify-content: space-between; }
.card-badge {
    font-family: var(--mono); font-size: 9px; text-transform: uppercase;
    letter-spacing: 0.08em; padding: 3px 10px; border-radius: 100px;
}
.badge-shipped { color: var(--green); background: rgba(42,96,64,0.06); border: 1px solid rgba(42,96,64,0.2); }
.badge-active  { color: var(--gold); background: var(--gold-light); border: 1px solid var(--gold-mid); }
.badge-paper   { color: var(--blue); background: rgba(46,90,142,0.05); border: 1px solid rgba(46,90,142,0.18); }
.card-number { font-family: var(--mono); font-size: 11px; color: var(--border-2); letter-spacing: 0.04em; }
.card-name {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(17px, 1.7vw, 22px); font-weight: 700;
    letter-spacing: -0.025em; color: var(--text); line-height: 1.15;
}
.card-desc { font-size: 13px; line-height: 1.68; color: var(--text-mid); flex: 1; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
.card-tags span {
    font-family: var(--mono); font-size: 10px; color: var(--amber);
    padding: 3px 8px; border: 1px solid rgba(122,92,14,0.15);
    border-radius: 3px; background: rgba(122,92,14,0.03); letter-spacing: 0.02em;
}
.card-pm {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .45s var(--ease-expo), opacity .35s ease, margin-top .35s ease;
    margin-top: 0; border-top: 1px solid transparent;
}
.project-card:hover .card-pm {
    max-height: 140px; opacity: 1; margin-top: 10px;
    border-top-color: var(--border); padding-top: 12px;
}
.pm-label {
    font-family: var(--mono); font-size: 9px; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--text-muted); display: block; margin-bottom: 6px;
}
.card-pm p { font-family: var(--serif); font-size: 12px; font-style: italic; color: var(--text-mid); line-height: 1.6; }

/* ════════════════════════════════════════════════
   RESEARCH
   ════════════════════════════════════════════════ */
#research {
    padding: var(--gap-section) var(--pad-x);
    background: var(--bg-alt); border-top: 1px solid var(--border);
}
.research-header-row {
    display: flex; flex-wrap: wrap; gap: 24px;
    justify-content: space-between; align-items: flex-end; margin-bottom: 40px;
}
.research-subhead {
    font-family: var(--serif); font-size: clamp(15px, 1.5vw, 18px);
    font-style: italic; color: var(--text-muted); margin-top: 8px; line-height: 1.6;
}
.research-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rb {
    font-family: var(--mono); font-size: 9px; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-muted);
    padding: 4px 10px; border: 1px solid var(--border);
    border-radius: 3px; background: var(--surface);
}
.paper-entry { border-bottom: 1px solid var(--border); transition: background .3s ease; transition-delay: var(--delay,0s); }
.paper-entry:first-of-type { border-top: 1px solid var(--border); }
.paper-inner { padding: 26px 0; transition: padding .3s ease; }
.paper-entry:hover .paper-inner { padding-left: 14px; }
.paper-pinned {
    background: rgba(139,107,20,0.025); border-radius: 8px;
    border: 1px solid var(--gold-mid); margin-bottom: 12px;
}
.paper-pinned:first-of-type { border-top: 1px solid var(--gold-mid); }
.paper-pinned .paper-inner { padding: 26px 28px; }
.paper-pinned:hover .paper-inner { padding-left: 28px; }
.paper-pin-label {
    font-family: var(--mono); font-size: 9px; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--gold); margin-bottom: 12px;
}
.paper-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.paper-year { font-family: var(--mono); font-size: 12px; color: var(--gold); font-weight: 500; }
.paper-sep { color: var(--border-2); font-size: 12px; }
.paper-venue { font-family: var(--mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.03em; }
.highlight-venue { color: var(--amber); font-weight: 700; }
.paper-role { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 2px 8px; border: 1px solid var(--border); border-radius: 3px; }
.paper-title { font-family: var(--sans); font-size: clamp(17px, 1.8vw, 22px); font-weight: 600; letter-spacing: -0.02em; color: var(--text); line-height: 1.3; margin-bottom: 10px; }
.paper-tldr { font-family: var(--serif); font-size: 14px; font-style: italic; color: var(--text-muted); line-height: 1.65; }
.paper-context { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.paper-context-tag {
    font-family: var(--mono); font-size: 9px; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--amber);
    padding: 3px 10px; border: 1px solid var(--gold-mid);
    border-radius: 100px; background: var(--gold-light);
}

/* ════════════════════════════════════════════════
   OPEN SOURCE
   ════════════════════════════════════════════════ */
#opensource { padding: var(--gap-section) var(--pad-x); }
.opensource-top { margin-bottom: 40px; }
.opensource-line {
    font-family: var(--serif); font-size: clamp(16px, 1.7vw, 19px);
    font-style: italic; color: var(--text-mid); line-height: 1.65;
    max-width: 600px; border-left: 2px solid var(--gold); padding-left: 20px; margin-top: 12px;
}
.opensource-layout { display: grid; grid-template-columns: 1.8fr 1fr; gap: 56px; align-items: start; }
.heatmap-label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 12px; }
.heatmap-grid { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.hm-sq { aspect-ratio: 1; border-radius: 2px; min-width: 0; transition: transform .2s var(--elastic); }
.hm-sq:hover { transform: scale(1.5); z-index: 1; position: relative; }
.hm-sq.l0 { background: rgba(139,107,20,0.05); }
.hm-sq.l1 { background: rgba(139,107,20,0.14); }
.hm-sq.l2 { background: rgba(139,107,20,0.30); }
.hm-sq.l3 { background: rgba(139,107,20,0.50); }
.hm-sq.l4 { background: rgba(139,107,20,0.74); }
.heatmap-footer { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.hf-item { font-family: var(--mono); font-size: 10px; color: var(--text-muted); }
.hf-squares { display: flex; gap: 3px; }
.hf-squares .hm-sq { width: 12px; height: 12px; min-width: 12px; aspect-ratio: auto; }
.os-stats-col { display: flex; flex-direction: column; gap: 22px; padding-top: 20px; }
.os-stat-row { display: flex; flex-direction: column; gap: 3px; }
.os-stat-num { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.os-stat-desc { font-family: var(--serif); font-size: 13px; font-style: italic; color: var(--text-muted); }

/* ════════════════════════════════════════════════
   VISION
   ════════════════════════════════════════════════ */
#vision {
    position: relative; min-height: 100vh;
    display: flex; align-items: center;
    padding: var(--gap-section) var(--pad-x); overflow: hidden;
    background: var(--bg-alt); border-top: 1px solid var(--border);
}
.vision-ambient { position: absolute; inset: 0; pointer-events: none; }
.sonar {
    position: absolute; top: 50%; left: 30%;
    border-radius: 50%; border: 1px solid rgba(139,107,20,0.10);
    animation: sonarRing 6s ease-out infinite;
    transform: translate(-50%, -50%) scale(1);
}
.s1{width:80px;height:80px;animation-delay:0s}
.s2{width:80px;height:80px;animation-delay:1.5s}
.s3{width:80px;height:80px;animation-delay:3s}
.s4{width:80px;height:80px;animation-delay:4.5s}
@keyframes sonarRing {
    0%  { transform: translate(-50%,-50%) scale(1);  opacity: .5; }
    100%{ transform: translate(-50%,-50%) scale(18); opacity: 0; }
}
.vision-grain {
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
    background-size: 200px 200px; opacity: 0.035;
    animation: grainShift 0.18s steps(1) infinite;
}
.vision-layout {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
    max-width: var(--max-w); width: 100%; align-items: center;
}
.vision-left { display: flex; flex-direction: column; gap: 20px; }
.vision-stat {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(38px, 5.5vw, 72px); font-weight: 700;
    letter-spacing: -0.04em; line-height: 1.05; color: var(--text);
}
.vision-mid { font-size: clamp(16px, 1.8vw, 20px); line-height: 1.6; color: var(--text-mid); max-width: 440px; }
.vision-sign { font-family: var(--serif); font-size: clamp(15px, 1.5vw, 18px); font-style: italic; color: var(--text-mid); }
.vision-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border: 1.5px solid var(--text); border-radius: 4px;
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
    color: var(--text); text-transform: uppercase; width: fit-content;
    transition: background .35s ease, color .35s ease, transform .3s var(--elastic);
}
.vision-cta:hover { background: var(--text); color: var(--bg); transform: translateY(-3px); }
/* Dark fill variant used when section background is dark */
.vision-cta-dark {
    background: var(--text); color: var(--bg) !important; border-color: var(--text);
    transition: background .3s ease, opacity .3s ease, transform .3s var(--elastic);
}
.vision-cta-dark:hover { background: var(--gold); border-color: var(--gold); color: #fff !important; transform: translateY(-3px); }

/* ---- Full Dark Vision Section ---- */
.vision-dark {
    background: #111110;
}
.vision-dark .sonar {
    border-color: rgba(139,107,20,0.15);
}
.vision-dark .vision-stat { color: #f5f3ee; }
.vision-dark .vision-mid  { color: rgba(245,243,238,0.7); }
.vision-dark .vision-sign { color: rgba(245,243,238,0.5); }
.vision-dark .vb-label    { color: var(--gold); }
.vision-dark .vb-block p  { color: rgba(245,243,238,0.65); }
.vision-dark .vb-block    { border-bottom-color: rgba(255,255,255,0.08); }
.vision-dark .vb-block:first-child { border-top-color: rgba(255,255,255,0.08); }
.vision-body { display: flex; flex-direction: column; gap: 0; }
.vb-block {
    padding: 22px 0; border-bottom: 1px solid var(--border);
}
.vb-block:first-child { border-top: 1px solid var(--border); }
.vb-label {
    font-family: var(--mono); font-size: 9px; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--gold); display: block; margin-bottom: 8px;
}
.vb-block p { font-size: clamp(13px, 1.3vw, 15px); line-height: 1.85; color: var(--text-mid); }

/* ════════════════════════════════════════════════
   HACKATHONS + CERTIFICATIONS
   ════════════════════════════════════════════════ */
#hackathons { padding: var(--gap-section) var(--pad-x); }
.hackathons-dual-layout {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 7vw, 120px); max-width: var(--max-w); margin: 0 auto; align-items: start;
}
.hackathons-col .timeline { max-width: 100%; }

.certs-col { display: flex; flex-direction: column; }
.certs-grid {
    display: flex; flex-direction: column; gap: 10px; margin-top: 8px;
}
.cert-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 4px;
    transition: border-color .25s ease, transform .25s var(--elastic);
    position: relative;
}
.cert-card:hover { border-color: var(--gold-mid); transform: translateX(4px); }
.cert-issuer {
    font-family: var(--mono); font-size: 9px; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--gold); font-weight: 700;
}
.cert-name {
    font-family: var(--sans); font-size: 13px; font-weight: 600;
    color: var(--text); letter-spacing: -0.01em; line-height: 1.35;
}
.cert-meta {
    font-family: var(--mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.02em;
}
.cert-badge {
    position: absolute; top: 12px; right: 12px;
    font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 2px 8px; border-radius: 100px; border: 1px solid;
}
.cert-badge-gold { color: var(--amber); border-color: var(--gold-mid); background: var(--gold-light); }
.tl-item { display: grid; grid-template-columns: 80px 24px 1fr; gap: 24px; align-items: start; margin-bottom: 0; }
.tl-date { font-family: var(--mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; padding-top: 4px; text-align: right; }
.tl-node { display: flex; flex-direction: column; align-items: center; }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-2); flex-shrink: 0; margin-top: 4px; transition: background .3s ease; }
.gold-dot { background: var(--gold); box-shadow: 0 0 0 5px var(--gold-light); }
.tl-stem { width: 1px; flex: 1; background: var(--border); min-height: 60px; margin-top: 4px; margin-bottom: -28px; }
.tl-body { padding-bottom: 48px; }
.tl-item:last-child .tl-body { padding-bottom: 0; }
.tl-body h3 { font-family: var(--sans); font-size: clamp(16px, 1.6vw, 18px); font-weight: 600; letter-spacing: -0.02em; color: var(--text); margin-bottom: 4px; line-height: 1.25; }
.tl-where { font-family: var(--mono); font-size: 10px; color: var(--gold); letter-spacing: 0.04em; margin-bottom: 10px; text-transform: uppercase; }
.tl-body p { font-size: 14px; line-height: 1.8; color: var(--text-mid); margin-bottom: 10px; }
.tl-learned { font-family: var(--serif); font-size: 13px !important; font-style: italic; color: var(--text-muted) !important; }

/* ════════════════════════════════════════════════
   CONTACT
   ════════════════════════════════════════════════ */
#contact { padding: var(--gap-section) var(--pad-x); background: var(--bg-alt); border-top: 1px solid var(--border); }
.contact-layout { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; max-width: 800px; margin: 0 auto; }
.contact-head { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: clamp(30px, 4vw, 50px); font-weight: 700; letter-spacing: -0.035em; color: var(--text); line-height: 1.1; margin-bottom: 12px; }
.contact-sub { font-size: clamp(14px, 1.4vw, 15px); line-height: 1.85; color: var(--text-mid); margin-bottom: 32px; max-width: 500px; }
.contact-email {
    display: block; font-family: var(--mono); font-size: clamp(13px, 1.4vw, 16px);
    letter-spacing: -0.01em; color: var(--text); margin-bottom: 28px;
    position: relative; width: fit-content;
}
.contact-email::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: center; transition: transform .4s var(--ease-expo); }
.contact-email:hover::after { transform: scaleX(1); }
.contact-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.contact-link { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); transition: color .2s ease; }
.contact-link:hover { color: var(--text); }
.link-sep { color: var(--border-2); font-size: 14px; }
.contact-note { font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--text-muted); }
.scholar-btn {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 12px; margin-bottom: 8px;
    padding: 12px 24px; border: 1.5px solid var(--border-2); border-radius: 4px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-mid);
    transition: border-color .3s ease, color .3s ease, transform .25s var(--elastic);
}
.scholar-btn:hover { border-color: var(--gold); color: var(--amber); transform: translateY(-2px); }


/* ---- Full Dark Contact Section ---- */
.contact-dark {
    background: #111110;
    border-top: none;
}
.contact-dark .contact-head { color: #f5f3ee; }
.contact-dark .contact-sub  { color: rgba(245,243,238,0.6); }
.contact-dark .contact-email { color: #f5f3ee; }
.contact-dark .contact-link { color: rgba(245,243,238,0.5); }
.contact-dark .contact-link:hover { color: var(--gold); }
.contact-dark .link-sep     { color: rgba(255,255,255,0.15); }
.contact-dark .contact-note { color: rgba(245,243,238,0.4); }

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .projects-grid { grid-template-columns: repeat(2, 1fr); }
    .project-card.flagship { grid-column: span 2; }
    .vision-layout { grid-template-columns: 1fr; gap: 40px; }
    .contact-layout { grid-template-columns: 1fr; }
    .contact-photo-wrap { aspect-ratio: 3/2; max-height: 260px; }
}
@media (max-width: 900px) {
    .hero-split { grid-template-columns: 1fr; }
    .hero-right { display: none; }
    .story-layout { grid-template-columns: 1fr; }
    .portrait-frame { aspect-ratio: 4/3; max-height: 320px; position: static; }
    .manifesto-skills { grid-template-columns: repeat(2, 1fr); }
    .opensource-layout { grid-template-columns: 1fr; }
    .dual-layout { grid-template-columns: 1fr; }
    .war-record-header { grid-template-columns: 1fr; }
    .wr-graphic-col { display: none; }
}
@media (max-width: 768px) {
    body { cursor: auto; }
    .cursor { display: none; }
    .logo-sub, .logo-rule { display: none; }
    .nav-availability { display: none; }
    .nav-links { gap: 20px; }
    .projects-grid { grid-template-columns: 1fr; }
    .project-card.flagship { grid-column: span 1; }
    .numbers-inner { grid-template-columns: repeat(2, 1fr); }
    .tl-item { grid-template-columns: 60px 18px 1fr; gap: 12px; }
    .journey-item { grid-template-columns: 1fr; }
    .journey-line-col { flex-direction: row; align-items: center; gap: 12px; }
    .journey-connector { width: 32px; height: 1px; min-height: auto; margin: 0; }
    .manifesto-skills { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .hero-ctas { flex-direction: column; }
    .cta-primary, .cta-ghost { width: 100%; justify-content: center; }
}