:root { --ink:#f2f1eb; --muted:#9d9da6; --orange:#ff5c35; --blue:#b9d9ff; --black:#08090d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-snap-type:y mandatory; background:var(--black); }
html.is-gliding { scroll-behavior:auto; scroll-snap-type:none; }
body { margin:0; background:var(--black); color:var(--ink); font-family:Arial,Helvetica,sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
::selection { background:var(--orange); color:var(--black); }

.scene { position:fixed; inset:0; z-index:0; background:radial-gradient(circle at 50% 50%,#170b0d 0,#0d0a10 32%,#07080d 74%); }
.scene canvas { width:100%; height:100%; display:block; }
.noise { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.16; 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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"); }

.site-header { position:fixed; z-index:20; inset:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:28px 40px; mix-blend-mode:difference; }
.brand { display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.18em; }
.brand span { display:grid; place-items:center; width:34px; height:34px; border:1px solid currentColor; border-radius:50%; font-weight:700; letter-spacing:0; }
.nav { display:flex; gap:30px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.nav a { opacity:.72; transition:opacity .2s; }
.nav a:hover { opacity:1; }
.menu-button { display:none; color:inherit; border:0; background:transparent; font-size:10px; letter-spacing:.18em; }

.timeline-index { position:fixed; z-index:15; right:38px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:11px; font-size:9px; letter-spacing:.1em; color:var(--muted); }
.index-current { color:var(--ink); }
.index-track { position:relative; width:1px; height:110px; background:rgba(255,255,255,.18); }
.index-track i { position:absolute; top:0; left:0; width:1px; background:var(--orange); transition:height .5s ease; }

.panel { position:relative; z-index:2; min-height:100svh; padding:110px 10vw 74px; scroll-snap-align:start; scroll-snap-stop:always; }
.hero { z-index:3; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:5vw; overflow:hidden; }
.hero::before { content:''; position:absolute; left:39px; top:98px; bottom:70px; width:1px; background:rgba(255,255,255,.12); }
.hero-copy { max-width:850px; position:relative; z-index:2; }
.eyebrow { margin:0 0 24px; color:var(--orange); font-size:10px; font-weight:700; letter-spacing:.21em; }
.hero h1 { margin:0; font-size:clamp(64px,9vw,146px); line-height:.83; letter-spacing:-.075em; font-weight:700; }
.hero-summary { max-width:610px; margin:42px 0 0; color:#b8b8bf; font-size:clamp(16px,1.45vw,22px); line-height:1.55; }
.hero-actions { display:flex; align-items:center; gap:34px; margin-top:38px; font-size:12px; letter-spacing:.08em; }
.primary-action { display:flex; align-items:center; justify-content:space-between; gap:34px; min-width:228px; padding:17px 18px; background:var(--orange); color:#090a0e; font-weight:700; }
.portrait-wrap { position:relative; width:min(33vw,460px); aspect-ratio:1; justify-self:end; }
.portrait-wrap img { width:100%; height:100%; object-fit:cover; border-radius:50%; filter:saturate(.7) contrast(1.07); box-shadow:0 0 80px rgba(255,92,53,.16); }
.portrait-wrap::after { content:''; position:absolute; inset:0; border-radius:50%; box-shadow:inset 24px 0 60px rgba(8,9,13,.8); }
.portrait-orbit { position:absolute; z-index:-1; inset:-11%; border:1px solid rgba(185,217,255,.32); border-radius:50%; transform:rotateX(66deg) rotateZ(-18deg); }
.portrait-label { position:absolute; right:-18px; bottom:15%; z-index:2; padding:10px 14px; background:var(--blue); color:var(--black); font-size:9px; font-weight:700; letter-spacing:.18em; }
.scroll-cue { position:absolute; left:40px; bottom:28px; display:flex; align-items:center; gap:12px; color:#7e7e86; font-size:8px; letter-spacing:.18em; writing-mode:vertical-rl; transform:rotate(180deg); }
.scroll-cue span { width:1px; height:34px; background:var(--orange); animation:pulse 1.8s ease-in-out infinite; }

.experience { height:100svh; min-height:100svh; pointer-events:none; }
.js-loading .experience-card { opacity:0; visibility:hidden; }
.year-mark { position:absolute; z-index:3; left:3.5vw; top:50%; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; text-orientation:mixed; color:rgba(185,217,255,.42); font-size:clamp(44px,5.5vw,92px); line-height:.8; font-weight:800; letter-spacing:.04em; text-shadow:0 0 24px rgba(255,92,53,.24); user-select:none; }
.experience:nth-child(even) .year-mark { left:3.5vw; right:auto; }
.experience-card { --card-focus:0; --planet-dx:0px; --planet-dy:0px; --connector-length:0px; --connector-angle:0rad; position:fixed; top:0; left:0; width:min(80vw,1200px); overflow:visible; padding:48px 56px 45px; border:1px solid rgba(185,217,255,calc(.08 + var(--card-focus) * .34)); border-radius:30px 30px 30px 82px; background:radial-gradient(circle at 10% 10%,rgba(185,217,255,.1),transparent 30%),linear-gradient(145deg,rgba(20,21,28,calc(.72 + var(--card-focus) * .23)),rgba(9,10,14,.9)); box-shadow:0 28px calc(38px + var(--card-focus) * 62px) rgba(0,0,0,.52),inset 0 0 42px rgba(185,217,255,calc(var(--card-focus) * .045)),0 0 calc(var(--card-focus) * 42px) rgba(255,92,53,.1); backdrop-filter:blur(20px); transform-origin:center; transform-style:preserve-3d; will-change:transform,opacity,filter; pointer-events:none; scrollbar-width:none; }
.experience-card::-webkit-scrollbar { display:none; }
.experience-card::before { content:''; position:absolute; inset:9px; border:1px solid rgba(255,92,53,calc(.05 + var(--card-focus) * .13)); border-radius:15px 15px 15px 48px; pointer-events:none; }
.orbit-connector { position:absolute; z-index:-2; left:50%; top:50%; width:var(--connector-length); height:1px; transform:rotate(var(--connector-angle)); transform-origin:0 50%; background:linear-gradient(90deg,rgba(185,217,255,.04),rgba(185,217,255,.36)); box-shadow:0 0 6px rgba(185,217,255,.2); opacity:calc(var(--card-focus) * .65); }
.planet-marker { position:absolute; z-index:-1; left:calc(50% + var(--planet-dx)); top:calc(50% + var(--planet-dy)); width:38px; height:38px; border:1px solid rgba(255,92,53,.48); border-radius:50%; transform:translate(-50%,-50%) rotate(18deg); box-shadow:0 0 12px rgba(255,92,53,.16),inset 0 0 8px rgba(185,217,255,.1); opacity:var(--card-focus); }
.planet-marker::before,.planet-marker::after { content:''; position:absolute; border:1px solid rgba(185,217,255,.3); border-radius:50%; }
.planet-marker::before { inset:-13px 7px; transform:rotate(56deg); }
.planet-marker::after { inset:7px -16px; transform:rotate(-22deg); }
.card-count { float:right; color:#6e6e77; font-size:9px; letter-spacing:.18em; }
.experience-card .eyebrow { margin-bottom:34px; }
.period { color:var(--blue); font-size:11px; letter-spacing:.14em; }
.experience h2 { margin:13px 0 4px; max-width:520px; font-size:clamp(32px,3.1vw,49px); line-height:.98; letter-spacing:-.05em; }
.experience h3 { margin:13px 0 0; color:#a8a8b1; font-size:16px; font-weight:400; }
.summary { margin:26px 0 20px; color:#bebec5; font-size:14px; line-height:1.6; }
.impact-list { display:grid; gap:8px; margin:0 0 24px; padding:0; list-style:none; color:#e0e0e2; font-size:12px; }
.impact-list li { padding-left:18px; position:relative; }
.impact-list li::before { content:'↳'; position:absolute; left:0; color:var(--orange); }
.stack { display:flex; flex-wrap:wrap; gap:7px; }
.stack span { border:1px solid rgba(185,217,255,.24); padding:7px 9px; color:#afb9c4; font-size:9px; letter-spacing:.08em; }

.finale { min-height:100svh; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(to bottom,transparent,rgba(8,9,13,.86) 25%); }
.finale-copy { max-width:1050px; margin:0 auto; text-align:center; }
.finale h2 { margin:0 auto 26px; max-width:900px; font-size:clamp(54px,8vw,118px); line-height:.9; letter-spacing:-.07em; }
.finale-copy>p:not(.eyebrow) { max-width:690px; margin:0 auto; color:#aaaab3; font-size:17px; line-height:1.65; }
.facts { display:flex; justify-content:center; gap:clamp(32px,7vw,100px); margin:62px 0; }
.facts div { display:flex; flex-direction:column; gap:5px; }
.facts strong { color:var(--blue); font-size:38px; }
.facts span { color:#85858d; font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.download-area { display:grid; grid-template-columns:auto repeat(2,auto); align-items:center; justify-content:center; gap:10px; margin-top:28px; }
.download-area p { margin-right:14px; color:#898991; font-size:11px; }
.download-area a { border:1px solid rgba(255,255,255,.2); padding:15px 18px; font-size:11px; transition:border-color .2s,background .2s; }
.download-area a:hover { border-color:var(--orange); background:rgba(255,92,53,.08); }
.download-area a span { color:var(--orange); margin-left:16px; }
.email-link { display:inline-block; margin-top:42px; font-size:clamp(24px,3vw,42px); border-bottom:1px solid var(--orange); }
.linkedin-link { display:block; margin:18px auto 0; color:#9999a2; font-size:11px; letter-spacing:.12em; }
.finale footer { position:absolute; left:40px; right:40px; bottom:27px; display:flex; justify-content:space-between; color:#686870; font-size:8px; letter-spacing:.17em; }

@keyframes pulse { 0%,100% { opacity:.35; transform:scaleY(.45); transform-origin:bottom; } 50% { opacity:1; transform:scaleY(1); } }

@media (max-width:800px) {
  .site-header { padding:20px; }
  .brand strong { display:none; }
  .menu-button { display:block; }
  .nav { display:none; position:absolute; top:66px; right:20px; flex-direction:column; gap:0; min-width:170px; padding:10px; background:rgba(8,9,13,.96); border:1px solid rgba(255,255,255,.15); }
  .nav.open { display:flex; }
  .nav a { padding:14px; }
  .timeline-index { right:15px; }
  .panel { padding:88px 25px 64px; }
  .hero { grid-template-columns:1fr; align-content:center; }
  .hero::before,.scroll-cue { display:none; }
  .hero h1 { font-size:clamp(58px,18vw,90px); }
  .hero-summary { margin-top:28px; max-width:calc(100% - 20px); }
  .portrait-wrap { position:absolute; right:-18vw; top:12vh; width:65vw; opacity:.42; z-index:-1; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:20px; }
  .experience,.experience:nth-child(even) { padding:90px 38px 70px 20px; min-height:105svh; }
  .experience-card,.experience:nth-child(even) .experience-card { width:min(94vw,520px); padding:30px 29px; }
  .experience-card .eyebrow { margin-bottom:35px; }
  .year-mark,.experience:nth-child(even) .year-mark { z-index:auto; left:2vw; right:auto; top:20%; transform:none; writing-mode:horizontal-tb; color:rgba(255,255,255,.035); font-size:38vw; letter-spacing:-.1em; text-shadow:none; }
  .summary { font-size:14px; }
  .finale { padding-left:22px; padding-right:38px; }
  .facts { gap:23px; }
  .facts strong { font-size:30px; }
  .download-area { grid-template-columns:1fr; }
  .download-area p { margin-right:0; }
  .finale footer { left:20px; right:36px; }
  .finale footer span:last-child { display:none; }
}

@media (max-height:750px) and (min-width:801px) {
  .experience-card { width:min(80vw,820px); padding:26px 31px 25px; }
  .experience-card .eyebrow { margin-bottom:14px; }
  .experience h2 { font-size:clamp(24px,2.35vw,34px); }
  .experience h3 { margin-top:7px; font-size:13px; }
  .summary { margin:13px 0 11px; font-size:12px; line-height:1.42; }
  .impact-list { gap:4px; margin-bottom:12px; font-size:10px; }
  .stack { gap:4px; }
  .stack span { padding:5px 7px; font-size:8px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; scroll-snap-type:none; }
  .scroll-cue span { animation:none; }
  .scene { display:none; }
  .experience { display:flex; align-items:center; justify-content:center; pointer-events:auto; }
  .experience-card { position:relative!important; top:auto!important; left:auto!important; opacity:1!important; visibility:visible!important; filter:none!important; transform:none!important; pointer-events:auto!important; }
  .orbit-connector,.planet-marker { display:none; }
  body { background:radial-gradient(circle at 70% 20%,#1b1c24,var(--black) 55%); }
}