/* Fonts: self-hosted, no third-party requests */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/schibsted-grotesk-latin-800-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Tokens: dark is the default, light is the toggle */
:root{
  --bg:#07111F;--panel:#0C1A2E;--fg:#E3ECF8;--muted:#9DB0CC;--accent:#5CB2FF;--line:#1C2F4B;
  --headerbg:rgba(7,17,31,.9);--btn:#E3ECF8;--onbtn:#07111F;--glow:rgba(92,178,255,.22);
  --font:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --radius:16px;--gutter:clamp(16px,4vw,48px);--header-h:64px;--maxw:1240px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F2F6FB;--panel:#FFFFFF;--fg:#0B1A2E;--muted:#45597A;--accent:#0B5CC2;--line:#D3DEEC;
  --headerbg:rgba(242,246,251,.92);--btn:#0B1A2E;--onbtn:#F2F6FB;--glow:rgba(11,92,194,.18);
  color-scheme:light;
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:clamp(16px,.55vw + 13px,18px);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--fg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{margin:0;line-height:1.12;letter-spacing:-.02em}
.skip-link{position:absolute;inset-inline-start:var(--gutter);top:-100px;z-index:100;padding:10px 14px;border-radius:8px;background:var(--btn);color:var(--onbtn);text-decoration:none}
.skip-link:focus{top:12px}

/* Header */
.site-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px;padding:8px var(--gutter);border-bottom:1px solid var(--line);background:var(--headerbg)}
.brand{padding:10px 0;font-family:var(--mono);font-size:17px;font-weight:700;color:var(--fg);text-decoration:none}
.brand-prompt{color:var(--accent)}
.site-nav{order:3;display:flex;flex-wrap:wrap;gap:0 22px;width:100%}
.site-nav a{padding:10px 0;font-size:15px;color:var(--fg);text-decoration:none}
.site-nav a:hover{color:var(--accent)}
.header-tools{display:flex;align-items:center;gap:2px}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-inline-start:6px;padding:0;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--fg);cursor:pointer}
.theme-toggle svg{display:block}
.icon-moon{display:none!important}
:root[data-theme="light"] .icon-sun{display:none!important}
:root[data-theme="light"] .icon-moon{display:block!important}
@media (min-width:720px){.site-nav{order:0;width:auto}}
@media (min-width:960px){.site-header{position:sticky;top:0;z-index:20;min-height:var(--header-h);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}

/* Intro: terminal + portrait */
.intro{display:grid;gap:32px;max-width:var(--maxw);margin:0 auto;padding:clamp(24px,5vw,56px) var(--gutter)}
@media (min-width:960px){.intro{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center;min-height:calc(100vh - var(--header-h))}}
.terminal{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.terminal-bar{padding:12px 20px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:13px;color:var(--muted)}
.terminal-body{padding:clamp(18px,3vw,32px);font-family:var(--mono);font-size:clamp(14px,1.3vw,16px);line-height:1.65}
.terminal-body p{margin:0}
.t-cmd.gap{margin-top:14px}
.prompt,.ok{color:var(--accent)}
.t-out{color:var(--muted)}
.t-name{margin:4px 0 8px;font-family:var(--font);font-size:clamp(40px,6.5vw,84px);font-weight:800;line-height:1.02;letter-spacing:-.03em}
.t-mission{max-width:34ch;margin:2px 0 4px;font-family:var(--font);font-size:clamp(18px,1.9vw,24px);line-height:1.45}
.t-hint{margin-top:12px!important;display:flex;align-items:center}
.t-hint a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--muted);text-decoration:none;font-family:var(--font)}
.t-hint a:hover{color:var(--accent)}
.t-hint svg{display:block}
.caret{display:inline-block;width:.6em;height:1.1em;margin-inline-start:10px;background:var(--accent);animation:blink 1.1s steps(1) infinite}
.intro-portrait{width:100%;max-width:420px;justify-self:center}
@media (min-width:960px){.intro-portrait{max-width:none}}

/* Portraits */
.portrait{margin:0}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.portrait figcaption{margin-top:8px;font-size:12px;color:var(--muted)}

/* Story: sticky stage (desktop) + chapters */
.story{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.stage{display:none}
.chapter{display:flex;flex-direction:column;gap:16px;padding-block:clamp(48px,9vh,120px)}
.chapter p{margin:0;max-width:62ch}
.chapter h2{font-size:clamp(30px,4vw,48px);font-weight:800}
.chapter h3{margin-top:18px;font-size:clamp(17px,1.5vw,20px);font-weight:600;color:var(--muted)}
.chapter-label{font-family:var(--mono);font-size:13px;color:var(--accent)}
.chapter-visual{overflow:hidden;aspect-ratio:1/1;margin-bottom:8px;border:1px solid var(--line);border-radius:18px;background:#0A1630}
.chapter-visual .ill{width:100%;height:100%}
.chapter-visual-portrait{aspect-ratio:auto;max-width:420px;border:0;border-radius:0;background:none}
@media (min-width:960px){
  .story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px)}
  .stage{display:block;position:sticky;top:calc(var(--header-h) + 24px);align-self:start;height:calc(100vh - var(--header-h) - 48px);overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#0A1630}
  .stage-item{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .8s ease,transform 1.2s ease}
  .stage-item.is-active{opacity:1;transform:none}
  .stage-item .ill{width:100%;height:100%}
  .stage-portrait .portrait,.stage-portrait picture{position:relative;height:100%}
  .stage-portrait img{height:100%;aspect-ratio:auto;border:0;border-radius:0}
  .stage-portrait figcaption{position:absolute;bottom:12px;inset-inline-end:12px;margin:0;padding:4px 10px;border-radius:999px;background:rgba(7,17,31,.82);color:#E3ECF8}
  .chapter{min-height:calc(100vh - var(--header-h));justify-content:center}
  .chapter-visual{display:none}
}

/* What I do today */
.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0 0;padding:0;list-style:none}
.services li{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:15px;line-height:1.35}
.svc-icon{flex:none;color:var(--accent)}

/* Career timeline */
.timeline{margin:8px 0 0;padding:0;list-style:none;border-inline-start:2px solid var(--line)}
.step{position:relative;display:grid;gap:2px;padding-block:0 18px;padding-inline-start:22px}
.step::before{content:"";position:absolute;top:.5em;inset-inline-start:-7px;width:12px;height:12px;border:2px solid var(--line);border-radius:50%;background:var(--bg)}
.step-when{font-family:var(--mono);font-size:13px;color:var(--accent)}
.step-what{font-weight:600}
.step-where{font-size:15px;color:var(--muted)}
.step-note{max-width:58ch;margin-top:4px;font-size:15px}
.step.is-current::before{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 4px var(--glow)}
.step.is-progress::before{border-style:dashed;border-color:var(--accent)}
.badge{display:inline-block;margin-inline-start:6px;padding:1px 8px;border:1px solid var(--accent);border-radius:999px;font-family:var(--mono);font-size:11px;font-weight:400;color:var(--accent);vertical-align:2px}
.badge-dashed{border-style:dashed}
.industries{font-size:15px;color:var(--muted)}

/* Projects */
.projects{display:grid;gap:8px;margin:6px 0 0;padding:0;list-style:none}
.project{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);transition:border-color .3s ease}
.project:hover,.project.is-lit{border-color:var(--accent)}
.project-title{font-weight:600}
.project-text{font-size:15px;color:var(--muted)}

/* Contact */
.mail-button{display:inline-flex;align-items:center;min-height:52px;padding:0 24px;border-radius:999px;background:var(--btn);color:var(--onbtn);font-family:var(--mono);font-size:15px;font-weight:700;text-decoration:none}
a.mail-button:hover{color:var(--onbtn);opacity:.88}
span.mail-button{border:1px solid var(--line);background:transparent;color:var(--fg)}

/* Footer */
.site-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;max-width:var(--maxw);margin:0 auto;padding:28px var(--gutter) 36px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.site-footer p{margin:0}
.site-footer nav{display:flex;gap:20px}
.site-footer a{padding:12px 0;color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--accent)}

/* Text pages */
.page{display:flex;flex-direction:column;gap:14px;max-width:72ch;margin:0 auto;padding:clamp(32px,6vw,72px) var(--gutter)}
.page h1{font-size:clamp(32px,4.5vw,48px);font-weight:800}
.page h2{margin-top:18px;font-size:20px}
.page p{margin:0}

/* Scroll reveal (only when scripts run) */
:root.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
:root.js .reveal.is-visible{opacity:1;transform:none}

/* Terminal typing */
.type{display:inline-block;white-space:nowrap;animation:type .6s steps(18,jump-none) both}
.fade{animation:fadeup .45s ease-out both}
.d1{animation-delay:.3s}.d2{animation-delay:1s}.d3{animation-delay:1.2s}.d4{animation-delay:1.6s}.d5{animation-delay:2.3s}.d6{animation-delay:2.9s}.d7{animation-delay:3.6s}.d8{animation-delay:4.2s}.d9{animation-delay:4.9s}
.bob{animation:bob 1.6s ease-in-out infinite}

/* Illustrations */
.ill{display:block}
.ill .sweep{transform-origin:400px 400px;animation:spin 8s linear infinite}
.ill .blip{transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out infinite}
.ill .blip-2{animation-delay:1.2s}
.ill .cursor{animation:blink 1.1s steps(1) infinite}
.ill .flow{animation:flow 1.2s linear infinite}
.ill .part{transition:opacity .4s ease}
.ill.has-lit .part{opacity:.35}
.ill .part.is-lit{opacity:1;filter:drop-shadow(0 0 8px rgba(111,180,255,.85))}

@keyframes type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fadeup{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:0}}
@keyframes bob{50%{transform:translateY(4px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(2.8);opacity:0}}
@keyframes flow{to{stroke-dashoffset:-16}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .type,.fade,.caret,.bob,.ill .sweep,.ill .blip,.ill .cursor,.ill .flow{animation:none!important}
  .type{clip-path:none}
  :root.js .reveal{opacity:1;transform:none;transition:none}
  .stage-item{transition:none}
}