:root{color-scheme:dark;--ink:#f6f1e8;--gold:#ffd17b;--muted:#b8becf;--bg:#0c1122}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:5px}.skip{position:fixed;left:20px;top:-100px;z-index:10;padding:12px;background:var(--bg)}.skip:focus{top:15px}#journey{height:720vh}#stage{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;background:#0c1122}.landscape{position:absolute;inset:0;background-image:url('assets/vasteras-promenade.png');background-repeat:repeat-x;background-size:auto 100%;image-rendering:pixelated;will-change:background-position;opacity:.88}.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,27,.72),rgba(8,12,27,.25) 48%,transparent 80%),linear-gradient(90deg,rgba(8,12,27,.64),transparent 80%)}header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:30px 4.5vw;z-index:3}.brand{display:flex;gap:18px;align-items:center;text-decoration:none;font-family:monospace;font-size:27px;font-weight:bold;letter-spacing:-3px;color:var(--gold)}.brand span{font:12px monospace;letter-spacing:2px;color:var(--ink)}.header-right{display:flex;align-items:center;gap:35px}.linkedin-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:40px;padding:9px 14px;border:1px solid var(--gold);background:#0b1125e6;color:var(--gold);font:700 14px monospace;text-decoration:none;box-shadow:3px 3px 0 #8e632e;white-space:nowrap}.linkedin-button:hover{background:var(--gold);color:var(--bg)}.linkedin-button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #8e632e}#language{border:1px solid #697187;background:#0b1125b3;padding:9px 14px;font:14px monospace}#language span{color:#949cad}#track{height:100%;display:flex;will-change:transform}.scene{flex:0 0 100vw;width:100vw;position:relative;padding:clamp(112px,17vh,170px) 8vw 210px}.scene-content{max-width:660px}.eyebrow{font:13px monospace;letter-spacing:3px;color:var(--gold);text-transform:uppercase;margin-bottom:22px}.intro h1{font-size:clamp(48px,6.5vw,96px);line-height:1.02;letter-spacing:-4px;margin:0 0 24px;font-weight:800;max-width:800px}.intro h1 em{font-style:normal;color:var(--gold)}.intro .lead{font-size:clamp(18px,2vw,23px);line-height:1.5;max-width:500px;color:#d1d6e4}.intro .scene-content{max-width:850px}.intro-actions{display:flex;gap:24px;align-items:center;margin-top:28px}.start{background:var(--gold);color:#111626;border:0;padding:15px 22px;font:700 14px monospace;box-shadow:4px 4px 0 #8e632e}.text-link{font:14px monospace;text-underline-offset:6px}.chapter{position:absolute;right:7vw;top:23vh;font:clamp(72px,13vw,180px) monospace;color:#f4d49e12;pointer-events:none}.experience .scene-content{padding:25px 30px;background:linear-gradient(110deg,#0c1425f5,#0c1425d9);border-left:3px solid var(--gold);max-width:670px;box-shadow:12px 12px 0 #060b1625}.experience .eyebrow{margin:0 0 13px;font-size:12px;letter-spacing:2px}.experience h2{font-size:clamp(25px,3vw,40px);line-height:1.13;letter-spacing:-1px;margin:0 0 9px}.role{color:var(--gold);font-size:17px;margin:0 0 18px}.details{padding-left:18px;margin:0;color:#d2d9e7;font-size:16px;line-height:1.55}.details li+li{margin-top:8px}.tech{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}.tech span{font:12px monospace;color:#b7cfdd;padding:5px 8px;background:#233747a6}.contact-note{font:14px monospace;color:#c4cddd;margin-top:20px}.walker{position:absolute;bottom:119px;left:28%;width:88px;height:134px;z-index:2;transition:left .1s linear}.sprite{height:115px;width:88px;background-image:url('assets/walk.png');background-size:400% 100%;background-repeat:no-repeat;image-rendering:pixelated;transform-origin:50% 100%}.walker span{display:block;font:10px monospace;letter-spacing:2px;text-align:center;color:var(--gold);margin-top:5px}.ground{position:absolute;bottom:100px;height:9px;left:0;right:0;background:#8a9ca1;border-top:3px solid #ccd4c2;box-shadow:0 6px 0 #222c3c}footer{position:absolute;bottom:0;height:100px;left:0;right:0;background:#0a1021f5;padding:15px 4.5vw 0;border-top:1px solid #293249}.footer-top{display:flex;justify-content:space-between;gap:15px;font:11px monospace;letter-spacing:1.8px;color:#afb9cd}#location{color:var(--gold)}#timeline{display:flex;margin-top:18px;border-top:2px solid #30384a}#timeline button{position:relative;flex:1;border:0;background:transparent;color:#919db3;font:12px monospace;text-align:left;padding:12px 0 0}#timeline button:before{content:'';position:absolute;left:0;top:-4px;width:6px;height:6px;background:#647089}#timeline button.active{color:var(--gold)}#timeline button.active:before{background:var(--gold);box-shadow:0 0 10px #ffd17b70}.reading{padding:70px 8vw;max-width:1200px;margin:auto}.reading-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.reading h2{font-size:32px}.reading button{background:none;border:1px solid #46516b;padding:12px}.read-item{display:grid;grid-template-columns:190px 1fr;gap:25px;padding:32px 0;border-bottom:1px solid #2a3347}.read-item h3{margin:0 0 8px;font-size:23px}.read-item .dates{font:13px monospace;color:var(--gold)}.read-item p{line-height:1.6;color:var(--muted)}@media(min-width:1500px){.scene{padding-left:12vw}.walker{left:29%}}@media(max-width:700px){#stage{min-height:650px}.brand span{display:none}.header-right{gap:16px}header{padding:22px 6vw}.scene{padding:100px 6vw 230px}.intro h1{font-size:54px;letter-spacing:-2.5px}.intro .lead{font-size:18px;max-width:320px}.eyebrow{font-size:11px;letter-spacing:2px}.experience .scene-content{padding:18px;max-height:calc(100svh - 275px);min-height:340px;overflow:auto}.experience h2{font-size:27px}.role{font-size:16px;margin-bottom:12px}.details{font-size:16px;line-height:1.42}.tech{margin-top:14px}.walker{left:24%;width:70px;height:110px}.sprite{height:94px;width:70px}.walker span{font-size:9px}.footer-top{font-size:10px;letter-spacing:.7px}#hint{display:none}#timeline button{font-size:10px}#timeline button .nav-name{display:none}#timeline button .nav-year{display:block}.reading{padding:40px 6vw}.reading-head{align-items:flex-start;flex-direction:column}.read-item{grid-template-columns:1fr;gap:12px}.chapter{display:none}.intro-actions{gap:18px}.start{padding:14px}.text-link{font-size:12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.landscape{will-change:auto}#track{will-change:auto}.walker{transition:none}}@media(max-height:720px) and (min-width:701px){.scene{padding-top:100px}.experience .scene-content{max-height:calc(100svh - 245px);overflow:auto}.intro h1{font-size:60px}.intro .lead{font-size:18px}.eyebrow{margin-bottom:14px}}
.nav-year{display:inline-block;margin-right:10px;color:inherit}.nav-name{opacity:.8}.intro h1{font-family:'Courier New',monospace;font-weight:900;text-shadow:4px 4px 0 #11192d}.landscape{transition:filter .7s ease}.scene:nth-child(3){--gold:#8bd6d3}.scene:nth-child(4){--gold:#bcb0ff}.scene:nth-child(5){--gold:#e8ce96}.scene:nth-child(6){--gold:#98d6b5}.scene:nth-child(7){--gold:#9fc7ff}@media(max-height:650px){#stage{min-height:100svh}.scene{padding-top:85px}.intro h1{font-size:42px;margin-bottom:12px}.intro .lead{font-size:16px}.intro-actions{margin-top:15px}.experience .scene-content{min-height:0;max-height:calc(100svh - 225px)}.walker{height:95px}.sprite{height:80px;width:60px}.eyebrow{margin-bottom:10px}}

/* Two opaque panorama layers blend between career locations. */
.landscapes{position:absolute;inset:0 0 100px;overflow:hidden}
.landscape{opacity:1;will-change:opacity;background-repeat:no-repeat;background-size:cover;transition:none}

/* The opaque feet end at row 677 of the 724px sprite. Offset its transparent padding. */
.walker{--sprite-height:115px;bottom:109px;height:var(--sprite-height)}
.sprite{height:var(--sprite-height);position:relative;top:calc(var(--sprite-height) * .0649171271)}
.walker span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin:0 0 2px;padding:4px 6px;background:#0a1021b3;white-space:nowrap}
@media(max-width:700px){.walker{--sprite-height:94px;height:var(--sprite-height)}}
@media(max-height:650px){.walker{--sprite-height:80px;height:var(--sprite-height)}}
@media(prefers-reduced-motion:reduce){.landscape{will-change:auto}}

.landscapes{opacity:.88}

/* Desk scenes use the same ground plane and responsive scale as the walker. */
#stage{--actor-h:115px;--actor-w:88px;--actor-x:28%;--station-scale:1.144;--station-ratio:.75;--station-anchor:.748;--station-foot:.858;--station-h:calc(var(--actor-h) * var(--station-scale));--station-w:calc(var(--station-h) * var(--station-ratio))}
.walker{--sprite-height:var(--actor-h);left:var(--actor-x);width:var(--actor-w)}
.workstation{position:absolute;z-index:2;pointer-events:none;visibility:hidden;width:var(--station-w);height:var(--station-h);left:calc(var(--actor-x) + var(--actor-w) * .5 - var(--station-w) * var(--station-anchor));bottom:calc(109px - var(--station-h) * (1 - var(--station-foot)));background-image:url('assets/desk-sequence-clean.png');background-repeat:no-repeat;background-size:400% 100%;image-rendering:pixelated;will-change:transform}
@media(min-width:1500px){#stage{--actor-x:29%}}
@media(max-width:700px){#stage{--actor-h:94px;--actor-w:70px;--actor-x:24%}}
@media(max-height:650px){#stage{--actor-h:80px;--actor-w:60px}}
@media(prefers-reduced-motion:reduce){.workstation{will-change:auto}}

.trail-dog{--dog-height:41.142857px;position:absolute;left:0;bottom:109px;width:64px;height:var(--dog-height);z-index:2;visibility:hidden;pointer-events:none;will-change:transform}
.dog-sprite{width:100%;height:100%;background-image:url('assets/french-bulldog.png');background-size:400% 100%;background-repeat:no-repeat;image-rendering:pixelated;transform-origin:center bottom}
@media(max-width:700px){.trail-dog{--dog-height:32.142857px;width:50px}}
@media(max-height:650px){.trail-dog{--dog-height:28.285714px;width:44px}}
@media(prefers-reduced-motion:reduce){.trail-dog{will-change:auto}}