:root { --bg:#fff; --soft:#f5f5f5; --ink:#0a0a0a; --muted:#595959; --line:#e5e5e5; --radius:12px; --nav-h:64px; --container:1100px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; overflow-x:hidden; background:var(--bg); color:var(--ink); font-family:Inter,system-ui,sans-serif; line-height:1.6; } a { color:inherit; } button { font:inherit; } img { display:block; max-width:100%; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { line-height:.98; letter-spacing:-.055em; } h2 { font-size:clamp(2.5rem,6vw,5.5rem); } h2 em { color:var(--muted); font-style:normal; }.container { width:min(100% - 40px,var(--container)); margin-inline:auto; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link { position:fixed; z-index:20; top:10px; left:10px; padding:8px 12px; background:var(--ink); color:var(--bg); transform:translateY(-160%); }.skip-link:focus { transform:translateY(0); }:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.site-header { position:sticky; z-index:10; top:0; height:var(--nav-h); border-bottom:1px solid var(--line); background:rgba(255,255,255,.9); backdrop-filter:blur(10px); }.navbar { display:flex; align-items:center; justify-content:space-between; height:100%; }.brand { display:grid; width:36px; height:36px; place-items:center; border-radius:8px; background:var(--ink); color:var(--bg); box-shadow:0 2px 8px rgba(0,0,0,.12); font-weight:800; text-decoration:none; }.nav-links { display:none; }.nav-links a { min-height:44px; align-items:center; color:var(--muted); font-size:.8125rem; font-weight:600; letter-spacing:.06em; text-decoration:none; text-transform:uppercase; }.nav-links a:hover,.nav-links a.active { color:var(--ink); }.nav-links a.active { box-shadow:inset 0 -2px var(--ink); }.menu-toggle { display:grid; width:44px; height:44px; place-content:center; gap:5px; border:0; background:none; cursor:pointer; }.menu-toggle span:not(.sr-only) { display:block; width:21px; height:2px; background:var(--ink); }.site-header.menu-open .nav-links { position:absolute; top:var(--nav-h); right:0; left:0; display:grid; padding:8px 20px 16px; border-bottom:1px solid var(--line); background:var(--bg); }
.scroll-progress { position:fixed; z-index:11; top:var(--nav-h); left:0; width:100%; height:2px; background:var(--line); }.scroll-progress span { display:block; width:0; height:100%; background:var(--ink); }.scene { position:relative; padding-block:88px; scroll-margin-top:var(--nav-h); }.scene-number,.project-label,.timeline-date { margin-bottom:18px; color:var(--muted); font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.scene-intro { display:grid; min-height:calc(100svh - var(--nav-h)); align-items:center; padding-block:48px; }.intro-layout { display:grid; gap:36px; }.intro-copy { position:relative; z-index:1; }.intro-name { margin-bottom:14px; font-size:clamp(1rem,2vw,1.25rem); font-weight:700; letter-spacing:.09em; }.intro-title { margin-bottom:22px; font-size:clamp(3.15rem,10vw,9rem); font-weight:800; white-space:pre-line; }.intro-tagline { color:var(--muted); font-size:clamp(1rem,2vw,1.25rem); }.scroll-cue { display:inline-flex; gap:12px; margin-top:32px; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }.scroll-cue span { animation:nudge 1.8s ease-in-out infinite; }.portrait-frame { overflow:hidden; border-radius:var(--radius); background:var(--soft); }.portrait-frame img { width:100%; aspect-ratio:4/5; filter:grayscale(1) blur(4px); object-fit:cover; transition:filter 1s ease,transform .2s linear; }.scene-intro.is-ready .portrait-frame img { filter:grayscale(1) blur(0); }
.narrow-layout { max-width:780px; }.scene-beginning h2 { margin-bottom:28px; }.lead { max-width:620px; color:var(--muted); font-size:clamp(1.1rem,2vw,1.4rem); }.learning-path { display:flex; flex-wrap:wrap; gap:10px; margin:42px 0 0; padding:0; list-style:none; }.learning-path li { display:flex; align-items:center; gap:10px; font-size:.875rem; font-weight:700; }.learning-path li:not(:last-child)::after { color:var(--muted); content:'→'; }
.scene-building { border-top:1px solid var(--line); }.split-scene { display:grid; gap:48px; }.sticky-caption h2 { margin-bottom:0; }.story-copy { border-top:1px solid var(--line); }.story-beat { display:grid; grid-template-columns:42px 1fr; gap:12px; padding-block:28px; border-bottom:1px solid var(--line); }.story-beat>span { color:var(--muted); font-size:.75rem; font-weight:700; }.story-beat h3 { margin-bottom:10px; font-size:1.2rem; }.story-beat p { margin-bottom:0; color:var(--muted); }
.scene-problems { background:var(--ink); color:var(--bg); }.scene-problems .scene-number { color:#bdbdbd; }.terminal-label { margin-bottom:14px; font-size:clamp(1.25rem,3vw,2.25rem); font-weight:700; letter-spacing:-.04em; }.terminal-window { max-width:640px; padding:24px; border:1px solid #595959; font-family:ui-monospace,monospace; }.terminal-window p { margin-bottom:9px; color:#d0d0d0; }.terminal-window p:first-child { color:var(--bg); }.terminal-window span { font-weight:700; }.growth-copy { margin-top:88px; }.growth-copy p { margin-bottom:10px; color:#bdbdbd; }.growth-copy h2 { margin-bottom:0; }.scene-problems :focus-visible { outline-color:var(--bg); }
.scene-stack { background:var(--soft); }.scene-stack h2 { margin-bottom:44px; }.stack-grid { display:grid; gap:12px; }.stack-group { min-height:210px; padding:24px; border:1px solid var(--line); background:var(--bg); transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease; }.stack-group:hover { transform:translateY(-4px); border-color:var(--ink); box-shadow:0 12px 24px rgba(0,0,0,.08); }.stack-group h3 { margin-bottom:32px; font-size:.75rem; letter-spacing:.1em; }.stack-group p { margin-bottom:0; color:var(--muted); }.stack-group-exploring { border-style:dashed; }
.projects-heading { display:grid; gap:20px; align-items:end; margin-bottom:36px; }.projects-heading h2,.projects-heading p { margin-bottom:0; }.projects-heading p { max-width:300px; color:var(--muted); }.project-card { display:grid; border:1px solid var(--line); transition:border-color .35s ease,box-shadow .35s ease; }.project-card:hover { border-color:var(--ink); box-shadow:0 14px 30px rgba(0,0,0,.08); }.project-image { display:grid; min-height:220px; place-items:center; overflow:hidden; background:var(--soft); color:var(--muted); font-size:5rem; font-weight:800; transition:transform .5s ease; }.project-card:hover .project-image { transform:scale(.98); }.project-content { padding:28px; }.project-content h3 { margin-bottom:14px; font-size:clamp(1.6rem,3vw,2.5rem); }.project-content>p:not(.project-label) { color:var(--muted); }.project-link { display:inline-flex; gap:10px; margin-top:18px; color:var(--muted); font-weight:700; }.project-link span { transition:transform .2s ease; }.project-card:hover .project-link span { transform:translateX(4px); }
.scene-journey { border-top:1px solid var(--line); }.journey-layout { display:grid; gap:44px; }.journey-content { max-width:620px; }.journey-line { display:grid; gap:10px; margin:0; padding:0; list-style:none; }.journey-line li { position:relative; display:flex; gap:14px; align-items:center; font-weight:700; }.journey-line li::before { display:block; width:10px; height:10px; border:1px solid var(--ink); border-radius:50%; content:''; }.journey-line li:not(:last-child)::after { position:absolute; top:20px; left:4px; width:1px; height:20px; background:var(--line); content:''; }.journey-statement { margin-block:52px; }.journey-statement p { margin-bottom:2px; font-size:clamp(1.5rem,4vw,3rem); font-weight:700; letter-spacing:-.04em; }.journey-statement p:first-child { color:var(--muted); }.timeline-item { padding-left:20px; border-left:1px solid var(--ink); }.timeline-item h3 { margin-bottom:10px; font-size:1.1rem; }.timeline-item p:not(.timeline-date) { margin-bottom:8px; color:var(--muted); }
.scene-ending { background:var(--ink); color:var(--bg); }.scene-ending .scene-number { color:#bdbdbd; }.ending-name { margin-bottom:12px; font-size:clamp(1.3rem,2vw,2rem); font-weight:700; letter-spacing:.2em; }.scene-ending h2 { margin-bottom:36px; font-size:clamp(2.4rem,7vw,6rem); }.ending-actions { display:flex; flex-wrap:wrap; gap:12px; }.button { display:inline-flex; min-height:46px; align-items:center; gap:12px; justify-content:center; padding:10px 16px; border:1px solid var(--bg); font-size:.75rem; font-weight:700; letter-spacing:.06em; text-decoration:none; text-transform:uppercase; transition:background-color .2s ease,color .2s ease; }.button-light { background:var(--bg); color:var(--ink); }.button-light:hover { background:var(--ink); color:var(--bg); }.button-dark { color:var(--bg); }.button-dark:hover { background:var(--bg); color:var(--ink); }.contact-details { display:flex; flex-wrap:wrap; gap:16px; margin-top:60px; color:#d0d0d0; font-size:.875rem; }.contact-details a:hover { color:var(--bg); }.copy-button { padding:0; border:0; background:none; color:inherit; cursor:pointer; text-decoration:underline; }.scene-ending :focus-visible { outline-color:var(--bg); }.site-footer { padding-block:18px; border-top:1px solid #333; background:var(--ink); color:#bdbdbd; font-size:.75rem; }.site-footer>div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; }.site-footer p { margin:0; }.site-footer a:hover { color:var(--bg); }
.js-enabled .reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }.js-enabled .reveal.is-visible { opacity:1; transform:translateY(0); }.js-enabled .intro-line { opacity:0; transform:translateY(10px); }.js-enabled .intro-line.is-typed { opacity:1; transform:translateY(0); transition:opacity .3s ease,transform .3s ease; }.typing-cursor::after { display:inline-block; width:.08em; height:.9em; margin-left:.12em; background:currentColor; animation:blink .8s step-end infinite; content:''; vertical-align:-.05em; }@keyframes blink { 50% { opacity:0; } }@keyframes nudge { 50% { transform:translateY(5px); } }
@media (min-width:768px) { .container { width:min(100% - 48px,var(--container)); }.menu-toggle { display:none; }.nav-links { display:flex; height:100%; gap:28px; }.scene { padding-block:120px; }.intro-layout { grid-template-columns:1.1fr .65fr; gap:64px; align-items:center; }.intro-layout>.scene-number { grid-column:1/-1; margin-bottom:-12px; }.split-scene,.journey-layout { grid-template-columns:minmax(250px,.72fr) minmax(0,1fr); gap:96px; }.sticky-caption { position:sticky; top:130px; align-self:start; }.stack-grid { grid-template-columns:repeat(2,1fr); }.projects-heading { grid-template-columns:1fr auto; }.project-card { grid-template-columns:.8fr 1fr; }.project-image { min-height:360px; }.scene-ending { padding-block:140px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }.js-enabled .reveal,.js-enabled .intro-line { opacity:1; transform:none; }.portrait-frame img { filter:grayscale(1); } }