:root{
  --navy:#0f2436;      /* sidebar */
  --navy-2:#173450;
  --paper:#f3f6f9;     /* page */
  --ink:#1b2632;
  --muted:#5d6b7a;
  --steel:#0e6e8c;     /* accent */
  --sky:#8fd3e8;       /* accent on dark */
  --rule:#d9e1e8;
  --display:"Schibsted Grotesk","Inter",system-ui,sans-serif;
  --text:"Figtree","Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible{outline:2px solid var(--steel);outline-offset:3px;border-radius:3px}

.layout{display:grid;grid-template-columns:minmax(300px,380px) 1fr;min-height:100vh}

/* Sidebar */
.side{background:var(--navy);color:#e6eef5;padding:56px 40px;position:relative;overflow:hidden}
.side-inner{position:sticky;top:56px}
.side::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:
   radial-gradient(120% 60% at 110% -10%, var(--navy-2) 0 40%, transparent 41%),
   repeating-radial-gradient(circle at 115% -15%, transparent 0 22px, rgba(143,211,232,.10) 22px 23px);}
.side > *{position:relative}
.name{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,4.2vw,3.4rem);line-height:.95;letter-spacing:-.02em;margin:0;color:#fff}
.name span{display:block}
.headline{font-family:var(--display);font-weight:500;font-size:1.15rem;color:var(--sky);margin:18px 0 32px}
.contact{list-style:none;padding:0;margin:0 0 36px;font-size:.95rem}
.contact li{padding:7px 0;border-top:1px solid rgba(255,255,255,.08)}
.contact li:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.contact a{text-decoration:none;border-bottom:1px solid rgba(143,211,232,.35);transition:border-color .2s,color .2s}
.contact a:hover{color:#fff;border-color:var(--sky)}
.contact .k{display:block;font-size:.75rem;color:#8ea3b6}
.btn{display:inline-block;background:var(--sky);color:var(--navy);font-weight:700;text-decoration:none;padding:12px 20px;border-radius:999px;font-size:.95rem;transition:background .2s,transform .2s}
.btn:hover{background:#fff;transform:translateY(-1px)}

/* Main */
.main{padding:64px clamp(24px,6vw,88px) 80px;max-width:960px}
section{margin-bottom:56px}
h2{font-family:var(--display);font-weight:700;font-size:1.55rem;letter-spacing:-.01em;margin:0 0 20px;color:var(--navy);display:flex;align-items:center;gap:14px}
h2::after{content:"";flex:1;height:1px;background:var(--rule)}
.summary p{font-size:1.12rem;line-height:1.7;margin:0;max-width:70ch}

/* Skills */
.skills{display:grid;grid-template-columns:200px 1fr;gap:0;margin:0}
.skills dt,.skills dd{padding:11px 0;border-bottom:1px solid var(--rule);margin:0}
.skills dt{font-weight:700;color:var(--navy)}
.skills dd{color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{background:#fff;border:1px solid var(--rule);padding:2px 10px;border-radius:999px;font-size:.88rem}

/* Timeline */
.timeline{list-style:none;margin:0;padding:0 0 0 28px;border-left:2px solid var(--rule)}
.job{position:relative;padding-bottom:34px}
.job:last-child{padding-bottom:0}
.job::before{content:"";position:absolute;left:-36px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:3px solid var(--steel)}
.job.minor::before{border-color:#9fb1c1;width:10px;height:10px;left:-35px;top:8px}
.when{font-size:.88rem;font-weight:600;color:var(--steel)}
.role{font-family:var(--display);font-weight:700;font-size:1.2rem;margin:2px 0 0;color:var(--navy)}
.org{color:var(--muted);font-size:.98rem}
.minor .role{font-size:1.05rem}
.part{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:20px 22px;margin-top:16px}
.part h4{font-family:var(--display);font-size:1.05rem;margin:0;color:var(--navy)}
.part .dates{font-weight:500;color:var(--muted);font-size:.9rem;margin-left:6px}
.stack{font-size:.85rem;color:var(--steel);margin:4px 0 0;font-weight:500}
.desc{color:var(--muted);margin:10px 0 0}
ul.points{margin:12px 0 0;padding-left:20px}
ul.points li{margin-bottom:7px}
ul.points li::marker{color:var(--steel)}

/* Project */
.project{background:#fff;border:1px solid var(--rule);border-left:4px solid var(--steel);border-radius:14px;padding:22px 24px}
.project h3{font-family:var(--display);margin:0;font-size:1.2rem;color:var(--navy)}
.project h3 a{color:var(--steel);text-decoration:none;border-bottom:1px solid transparent}
.project h3 a:hover{border-color:var(--steel)}

/* Education */
.edu .deg{font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--navy);margin:0}
.edu p{margin:2px 0}
.edu .yr{color:var(--steel);font-weight:600}

footer{color:var(--muted);font-size:.85rem;border-top:1px solid var(--rule);padding-top:20px}

/* Page-load: one orchestrated moment on the name */
@media (prefers-reduced-motion:no-preference){
  .name span{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .name span:nth-child(2){animation-delay:.12s}
  .headline{animation:fade .8s .35s both}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}

@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .side{padding:44px 24px}
  .side-inner{position:static}
  .skills{grid-template-columns:1fr}
  .skills dt{border-bottom:none;padding-bottom:4px}
  .skills dd{padding-top:0}
  .main{padding:44px 20px 60px}
}
@media print{
  .side{background:#fff;color:var(--ink)} .side::before,.btn{display:none}
  .name,.headline{color:var(--navy)} .layout{grid-template-columns:260px 1fr}
}