/* ---------- Theme tokens (edit colours here) ---------- */
:root{
  --bg:#0b1426; --panel:#121f38; --fg:#e8eef7; --muted:#9fb0c8;
  --accent:#ff9f43; --accent2:#5ec8e5; --line:#26385a; --sky:#1b3358; --on-accent:#10131a;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:light){
  :root{--bg:#e9f1f8;--panel:#fff;--fg:#10223a;--muted:#46597a;--accent:#b45309;--accent2:#0b6e8f;--line:#c3d3e6;--sky:#bcd6ee;--on-accent:#fff}
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:linear-gradient(var(--sky),var(--bg) 70vh) var(--bg);color:var(--fg);font:400 1.05rem/1.65 "IBM Plex Sans",system-ui,sans-serif}
h1,h2,h3{font-family:"Chakra Petch",system-ui,sans-serif;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(2.6rem,8vw,5.5rem);font-weight:700}
h1.page{font-size:clamp(2.2rem,6vw,4rem)}
h2{font-size:clamp(1.8rem,4vw,2.6rem)}
h3{font-size:1.3rem}
a{color:var(--accent2)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:60rem;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.block{padding:4.5rem 0}
.lede{font-size:1.2rem;color:var(--muted);max-width:38rem}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:30}

/* ---------- Header, progress bar, footer ---------- */
#bar{position:fixed;top:env(safe-area-inset-top,0px);left:0;height:3px;width:0;background:var(--accent);z-index:40}
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;justify-content:space-between;padding:.8rem clamp(1rem,4vw,3rem);background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{font:700 1.15rem "Chakra Petch",sans-serif;color:var(--fg);text-decoration:none}
.site-header nav{display:flex;gap:.25rem 1.2rem;flex-wrap:wrap}
.site-header nav a{color:var(--muted);text-decoration:none;padding:.2rem 0;border-bottom:2px solid transparent}
.site-header nav a:hover{color:var(--fg)}
.site-header nav a[aria-current="page"]{color:var(--fg);border-color:var(--accent)}
.site-footer{padding:3rem 0 4rem;color:var(--muted);text-align:center;font-size:.9rem}

/* ---------- Buttons ---------- */
.btn{display:inline-block;margin:.4rem .6rem .4rem 0;padding:.7rem 1.3rem;border-radius:4px;background:var(--accent);color:var(--on-accent);font-weight:500;text-decoration:none}
.btn.alt{background:transparent;color:var(--fg);border:1px solid var(--line)}

/* ---------- Home: hero ---------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden}
.hero .wrap{position:relative;z-index:2}
.cloud{position:absolute;border-radius:50%;background:var(--fg);opacity:.07;filter:blur(18px);will-change:transform}

/* ---------- Home: scroll-driven flight ---------- */
.flight{height:380vh;position:relative}
.stick{position:sticky;top:calc(3.5rem + env(safe-area-inset-top,0px));height:calc(100vh - 4rem);display:flex;flex-direction:column;justify-content:center}
.stick svg{width:100%;max-height:62vh;overflow:visible}
.route-bg{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:3 9}
.route{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.wp circle{fill:var(--bg);stroke:var(--line);stroke-width:3;transition:all .3s}
.wp text{fill:var(--muted);font:500 15px "IBM Plex Sans",sans-serif;transition:fill .3s}
.wp.on circle{stroke:var(--accent2);fill:var(--accent2)}
.wp.on text{fill:var(--fg)}
.plane{fill:var(--fg)}
.hud{display:flex;gap:1.5rem;flex-wrap:wrap;font:500 .95rem ui-monospace,Menlo,monospace;color:var(--accent2);margin-bottom:.8rem}
.hud b{color:var(--fg);font-weight:500}
.caption{min-height:5.5rem;max-width:36rem}
.caption h3{color:var(--accent);margin-bottom:.2rem}
.caption p{margin:0;color:var(--muted)}
.stages{display:none}

/* ---------- Projects: flight log ---------- */
.log{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:7rem 1fr;gap:.3rem 1.5rem;padding:1.6rem .5rem;border-bottom:1px solid var(--line);transition:background .2s,padding .2s}
.row:hover{background:var(--panel);padding-left:1.2rem}
.row .id{font:500 .9rem ui-monospace,Menlo,monospace;color:var(--accent2);padding-top:.3rem}
.row p{margin:0 0 .5rem;color:var(--muted)}
.tags{display:flex;gap:.4rem;flex-wrap:wrap}
.tags span{font-size:.85rem;padding:.1rem .6rem;border:1px solid var(--line);border-radius:99px;color:var(--muted)}

/* ---------- About: logbook timeline ---------- */
.tl{margin-left:.6rem;padding-left:1.8rem;border-left:2px solid var(--line)}
.ev{position:relative;padding-bottom:2.2rem}
.ev::before{content:"";position:absolute;left:calc(-1.8rem - 7px);top:.45rem;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg)}
.ev .when{font:500 .9rem ui-monospace,Menlo,monospace;color:var(--accent2)}
.ev p{margin:.2rem 0 0;color:var(--muted)}

/* ---------- Skills ---------- */
.panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.2rem}
.panel div{background:var(--panel);padding:1.4rem;border-radius:10px;border-top:3px solid var(--accent)}
.panel div:nth-child(even){border-top-color:var(--accent2);border-radius:2px 18px 2px 18px}
.panel ul{margin:0;padding-left:1.1rem;color:var(--muted)}

/* ---------- Scroll reveal ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}
@media (max-width:560px){.row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.cloud{display:none}}