/* ============================================================
   Warren Park — Portfolio
   Design language: Vy "Spor" design system (design.vy.no/spor)
   Real Spor design tokens (palette, radii, type scale) below.
   UI framework: UIkit (getuikit.com) for layout + components.
   ============================================================ */

:root {
  /* ---- Spor palette (from @vygruppen/spor-design-tokens) ---- */
  --green-50:#E5F4F1;  --green-100:#CCEAE4; --green-200:#B2DFD7; --green-300:#84CFC2;
  --green-400:#38B49E; --green-500:#00957A; --green-600:#037D67; --green-700:#00685E;
  --green-800:#00453E; --green-900:#012622; --green-1000:#001A18; --green-1100:#001211;

  --blue-50:#EDF1F7;  --blue-100:#DCE4EF; --blue-200:#B9C9DE; --blue-300:#A7BCD6;
  --blue-400:#8BA7CA; --blue-500:#688CBA; --blue-600:#4B78B0; --blue-700:#325D93;
  --blue-800:#003A70; --blue-900:#032647; --blue-1000:#041A2F; --blue-1100:#01101D;

  --yellow-300:#FAE053; --yellow-400:#F1C400; --yellow-500:#D7A700; --yellow-700:#8A6404;
  --orange-500:#DF8200; --orange-600:#BB4D0F; --orange-700:#84441F;
  --red-600:#D71818;

  --grey-50:#F5F5F5;  --grey-100:#EBEBEC; --grey-200:#D7D8D9; --grey-300:#AFB2B3;
  --grey-400:#888B8E; --grey-500:#606568; --grey-600:#4F5054; --grey-700:#363638;
  --grey-800:#2B2B2C; --grey-900:#1C1C1D; --grey-1000:#131314; --grey-1100:#0B0B0B;
  --white:#FFFFFF;

  /* ---- Semantic ---- */
  --brand:var(--green-600);
  --brand-dark:var(--green-800);
  --brand-darker:var(--green-900);
  --bg:var(--grey-50);
  --surface:var(--white);
  --surface-2:var(--grey-100);
  --border:var(--grey-200);
  --ink:var(--grey-1100);
  --text:var(--grey-800);
  --muted:var(--grey-500);

  /* mode accent — overridden per mode via [data-mode] */
  --accent:var(--green-600);
  --accent-soft:var(--green-50);
  --accent-ink:var(--green-800);

  /* ---- Spor radii ---- */
  --r-xs:0.375rem; --r-sm:0.75rem; --r-md:1.125rem; --r-lg:1.5rem; --r-xl:1.875rem;
  --r-pill:999px;

  /* ---- Spor spacing base (0.375rem grid) ---- */
  --sp-2:0.75rem; --sp-3:1.125rem; --sp-4:1.5rem; --sp-5:1.875rem;
  --sp-6:2.25rem; --sp-8:3.375rem; --sp-9:4.5rem; --sp-10:5.625rem; --sp-11:7.5rem;

  --maxw:1180px;
  --shadow-sm:0 1px 2px rgba(11,11,11,.04), 0 2px 8px rgba(11,11,11,.05);
  --shadow-md:0 6px 24px rgba(11,11,11,.08), 0 2px 6px rgba(11,11,11,.05);
  --shadow-lg:0 18px 48px rgba(1,38,34,.14);

  --font-sans:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Per-mode accent theming (Spor hues) */
[data-mode="academic"]{ --accent:var(--green-600); --accent-soft:var(--green-50); --accent-ink:var(--green-800);}
[data-mode="industry"]{ --accent:var(--blue-700); --accent-soft:var(--blue-50);  --accent-ink:var(--blue-800);}
[data-mode="uxr"]     { --accent:var(--orange-600);--accent-soft:#FFE6CC;         --accent-ink:var(--orange-700);}
[data-mode="mle"]     { --accent:var(--green-700); --accent-soft:var(--green-50);  --accent-ink:var(--green-900);}
[data-mode="swe"]     { --accent:var(--blue-800);  --accent-soft:var(--blue-50);   --accent-ink:var(--blue-900);}

/* ---------------- Base ---------------- */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-sans); font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4 { font-family:var(--font-sans); color:var(--ink); line-height:1.15; font-weight:700; letter-spacing:-0.02em; margin:0 0 .5em; }
h1 { font-size:clamp(2.3rem, 5.2vw, 3.6rem); }
h2 { font-size:clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size:1.3125rem; letter-spacing:-0.01em; }
p { margin:0 0 1rem; }
a { color:var(--accent-ink); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; display:block; }
strong { color:var(--ink); font-weight:700; }

.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.1rem, 4vw, 2.25rem); }
.section { padding-block:clamp(3rem, 7vw, var(--sp-11)); }
.section--tight { padding-block:clamp(2rem,5vw,var(--sp-9)); }

.kicker {
  font-family:var(--font-mono); font-size:.78rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:.5rem; margin:0 0 1rem;
}
.kicker::before { content:""; width:1.6rem; height:2px; background:var(--accent); border-radius:2px; }
.section-head { max-width:52rem; margin-bottom:clamp(1.6rem,4vw,2.75rem); }
.section-head p { color:var(--muted); font-size:1.125rem; }
.lede { font-size:1.22rem; color:var(--grey-700); }

/* ---------------- Buttons ---------------- */
.btn {
  display:inline-flex; align-items:center; gap:.55rem; cursor:pointer;
  font-family:var(--font-sans); font-weight:600; font-size:1rem; line-height:1;
  padding:.85rem 1.4rem; border-radius:var(--r-pill); border:1.5px solid transparent;
  transition:transform .12s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
  text-decoration:none;
}
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn--primary { background:var(--brand); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover { background:var(--green-700); color:#fff; box-shadow:var(--shadow-md); }
.btn--ghost { background:transparent; color:var(--ink); border-color:var(--grey-300); }
.btn--ghost:hover { border-color:var(--ink); background:var(--surface); color:var(--ink); }
.btn--sm { padding:.55rem 1rem; font-size:.9rem; }
.btn .uk-icon { width:18px; }

/* ---------------- Navbar ---------------- */
.nav {
  position:sticky; top:0; z-index:980; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--border);
}
.nav__inner { display:flex; align-items:center; gap:1.5rem; height:72px; }
.brand { display:flex; align-items:center; gap:.7rem; font-weight:700; color:var(--ink); font-size:1.12rem; letter-spacing:-.02em; }
.brand:hover { text-decoration:none; }
.brand__mark {
  width:38px; height:38px; border-radius:12px; background:var(--brand);
  color:#fff; display:grid; place-items:center; font-weight:700; font-size:1.02rem;
  font-family:var(--font-sans); box-shadow:var(--shadow-sm);
}
.brand__role { font-size:.72rem; font-family:var(--font-mono); color:var(--muted); font-weight:500; letter-spacing:.02em; display:block; margin-top:1px; }
.nav__links { display:flex; gap:1.6rem; margin-left:auto; }
.nav__links a { color:var(--grey-700); font-weight:500; font-size:.98rem; }
.nav__links a:hover { color:var(--ink); text-decoration:none; }
.nav__right { display:flex; align-items:center; gap:1rem; }

/* Mode segmented switch */
.switch {
  display:inline-flex; background:var(--surface-2); border-radius:var(--r-pill);
  padding:4px; gap:2px; border:1px solid var(--border);
}
.switch button {
  border:0; background:transparent; cursor:pointer; font-family:var(--font-sans);
  font-weight:600; font-size:.88rem; color:var(--muted); padding:.5rem .95rem;
  border-radius:var(--r-pill); transition:all .18s ease; white-space:nowrap;
}
.switch button[aria-pressed="true"] { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }
.switch button:hover { color:var(--ink); }

.nav__burger { display:none; background:none; border:0; cursor:pointer; color:var(--ink); }

/* ---------------- Hero ---------------- */
.hero { position:relative; overflow:hidden; padding-block:clamp(3rem,7vw,6rem) clamp(2.5rem,5vw,4.5rem); }
.hero::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(1100px 520px at 82% -8%, var(--accent-soft) 0%, transparent 62%),
    radial-gradient(760px 460px at -6% 8%, var(--green-50) 0%, transparent 55%);
}
.hero__grid { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero__title { margin-bottom:1.1rem; }
.hero__title .accgrad { color:var(--accent-ink); }
.hero__sub { font-size:1.2rem; color:var(--grey-700); max-width:34rem; margin-bottom:1.7rem; }
.hero__ctas { display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1.7rem; }
.hero__media { position:relative; }
.hero__media img { width:100%; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); border:1px solid var(--border); }
.hero__media .cap {
  position:absolute; left:14px; bottom:14px; background:rgba(11,11,11,.72); color:#fff;
  font-size:.76rem; font-family:var(--font-mono); padding:.35rem .7rem; border-radius:var(--r-pill);
  backdrop-filter:blur(4px);
}
.lens-chip {
  display:inline-flex; align-items:center; gap:.5rem; background:var(--accent-soft);
  color:var(--accent-ink); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-family:var(--font-mono); font-size:.76rem; font-weight:500; letter-spacing:.06em;
  padding:.4rem .8rem; border-radius:var(--r-pill); text-transform:uppercase; margin-bottom:1.2rem;
}
.lens-chip .dot { width:8px; height:8px; border-radius:50%; background:var(--accent); }

/* Stat row */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:.5rem; }
.stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:1.1rem 1.2rem; }
.stat b { display:block; font-size:1.7rem; color:var(--ink); letter-spacing:-.02em; line-height:1; margin-bottom:.35rem; }
.stat span { font-size:.85rem; color:var(--muted); }

/* ---------------- Cards / generic ---------------- */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }

/* About */
.about__single { max-width:58rem; }
.about__prose p { margin-bottom:1.1rem; }
.about__grid { display:grid; grid-template-columns:1.4fr .9fr; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
.about__photo img { border-radius:var(--r-lg); border:1px solid var(--border); box-shadow:var(--shadow-md); }
.about__photo figcaption { font-size:.85rem; color:var(--muted); margin-top:.7rem; font-family:var(--font-mono); }
.pill-list { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; }
.pill {
  font-size:.85rem; background:var(--surface-2); color:var(--grey-700); border:1px solid var(--border);
  padding:.4rem .85rem; border-radius:var(--r-pill); font-weight:500;
}

/* ---------------- Projects ---------------- */
.projects { display:flex; flex-direction:column; gap:clamp(1.6rem,4vw,2.5rem); }
.project {
  display:block; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-sm);
}
/* Media sits on top, full width, and is never cropped */
.project__media {
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,3vw,2rem); border-bottom:1px solid var(--border);
  background:radial-gradient(120% 150% at 50% 0%, var(--accent-soft) 0%, var(--grey-100) 72%);
}
.project__media img {
  width:auto; max-width:100%; max-height:400px; object-fit:contain;
  border-radius:var(--r-sm); box-shadow:var(--shadow-sm); background:#fff;
}
.project__media--video { padding:0; background:#000; border-bottom:0; }
.project__media--video .vwrap { width:100%; aspect-ratio:16/9; }
.project__media video { width:100%; height:100%; object-fit:contain; background:#000; display:block; }
.project__body { padding:clamp(1.5rem,3.2vw,2.4rem); }
.project__lead { font-size:1.13rem; color:var(--ink); font-weight:600; line-height:1.45; margin:0 0 1rem; }
.project__eyebrow { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.9rem; }
.project__name { font-size:1.6rem; letter-spacing:-.02em; margin:0; }
.badge {
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; font-weight:500;
  padding:.28rem .6rem; border-radius:var(--r-pill); background:var(--surface-2); color:var(--grey-600); border:1px solid var(--border);
}
.badge--venue { background:var(--accent-soft); color:var(--accent-ink); border-color:transparent; }
.rq {
  border-left:3px solid var(--accent); background:var(--accent-soft);
  padding:.85rem 1.1rem; border-radius:0 var(--r-sm) var(--r-sm) 0; margin:0 0 1.1rem;
}
.rq .rq__label { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); display:block; margin-bottom:.3rem; opacity:.85; }
.rq p { margin:0; font-size:1.06rem; color:var(--grey-900); font-weight:500; font-style:italic; }
.project__desc { color:var(--grey-700); font-size:1.02rem; }
.project__tags { display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0 1.2rem; }
.tag { font-family:var(--font-mono); font-size:.72rem; color:var(--grey-600); background:var(--surface-2); border:1px solid var(--border); padding:.24rem .6rem; border-radius:var(--r-xs); }
.project__media--link { text-decoration:none; }
.project__media--link:hover img { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.project__media--link img { transition:transform .25s ease, box-shadow .25s ease; }
.project__name a { color:inherit; }
.project__name a:hover { color:var(--accent-ink); text-decoration:none; }

/* “In the case study” — signals the depth behind each card */
.project__inside {
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:1rem 0; margin:0 0 1.2rem;
}
.project__inside-lbl {
  display:block; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.6rem;
}
.project__inside ul {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem 1.5rem;
}
.project__inside li {
  font-size:.92rem; color:var(--grey-700); padding-left:1.1rem; position:relative; line-height:1.45;
}
.project__inside li::before {
  content:""; position:absolute; left:0; top:.62em; width:.42rem; height:.42rem;
  border-radius:50%; background:var(--accent);
}
@media (max-width:640px){ .project__inside ul { grid-template-columns:1fr; } }

.project__foot { margin-top:auto; display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.link-out { display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.92rem; color:var(--accent-ink); }
.link-out:hover { gap:.6rem; text-decoration:none; }

/* Video figure */
.video-note { font-size:.82rem; color:var(--muted); font-family:var(--font-mono); position:absolute; top:12px; left:12px; background:rgba(11,11,11,.66); color:#fff; padding:.28rem .6rem; border-radius:var(--r-pill); z-index:2; pointer-events:none; }

/* ---------------- Approach / skills ---------------- */
.approach-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.approach-card { padding:1.6rem; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.approach-card h3 { display:flex; align-items:center; gap:.6rem; }
.approach-card .num { font-family:var(--font-mono); color:var(--accent); font-size:.9rem; font-weight:600; }
.approach-card p { color:var(--grey-700); font-size:1rem; margin:0; }

.skills-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.skill-col h4 { font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.9rem; }
.skill-col ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.45rem; }
.skill-col li { font-size:.9rem; background:var(--surface); border:1px solid var(--border); padding:.35rem .75rem; border-radius:var(--r-pill); color:var(--grey-800); }
.skill-col li.strong { background:var(--accent-soft); color:var(--accent-ink); border-color:transparent; font-weight:600; }

/* future agenda */
.future-list { display:grid; gap:1rem; counter-reset:fa; }
.future-item { display:grid; grid-template-columns:auto 1fr; gap:1.1rem; padding:1.4rem 1.5rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
.future-item::before { counter-increment:fa; content:"0" counter(fa); font-family:var(--font-mono); font-size:1.1rem; font-weight:600; color:var(--accent); }
.future-item h3 { font-size:1.12rem; margin-bottom:.35rem; }
.future-item p { margin:0; color:var(--grey-700); font-size:.98rem; }

/* ---------------- Timeline (experience) ---------------- */
.timeline { position:relative; margin-top:1rem; }
.tl-item { display:grid; grid-template-columns:170px 1fr; gap:1.5rem; padding:1.4rem 0; border-top:1px solid var(--border); }
.tl-item:first-child { border-top:0; }
.tl-when { font-family:var(--font-mono); font-size:.82rem; color:var(--muted); }
.tl-role { font-weight:700; color:var(--ink); font-size:1.08rem; }
.tl-org { color:var(--accent-ink); font-weight:600; }
.tl-item p { margin:.4rem 0 0; color:var(--grey-700); font-size:.98rem; }

/* ---------------- Publications ---------------- */
.pub-group { margin-bottom:1.8rem; }
.pub-group > h4 { font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.8rem; }
.pub {
  display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:baseline;
  padding:1rem 1.15rem; border-radius:var(--r-md); border:1px solid var(--border);
  background:var(--surface); margin-bottom:.6rem; transition:border-color .15s ease, box-shadow .15s ease;
}
.pub:hover { border-color:var(--accent); box-shadow:var(--shadow-sm); }
.pub__yr { font-family:var(--font-mono); font-size:.85rem; color:var(--muted); }
.pub__title { color:var(--ink); font-weight:600; font-size:1rem; }
.pub__title a:hover { color:var(--accent-ink); }
.pub__meta { color:var(--muted); font-size:.88rem; margin-top:.15rem; }
.pub__meta b { color:var(--grey-700); font-weight:600; }
.pub__tag { font-family:var(--font-mono); font-size:.72rem; color:var(--accent-ink); background:var(--accent-soft); padding:.24rem .55rem; border-radius:var(--r-pill); white-space:nowrap; }
.pub-featured { font-weight:700; }

/* ---------------- Contact / footer ---------------- */
.contact { background:var(--brand-darker); color:#dfeeea; border-radius:var(--r-xl); padding:clamp(2.2rem,5vw,3.6rem); position:relative; overflow:hidden; }
.contact::after { content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(56,180,158,.25), transparent 70%); }
.contact h2 { color:#fff; }
.contact p { color:#bfe0d8; max-width:40rem; }
.contact__links { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; position:relative; z-index:1; }
.contact .btn--primary { background:#fff; color:var(--brand-darker); }
.contact .btn--primary:hover { background:var(--green-50); color:var(--brand-darker); }
.contact .btn--ghost { color:#fff; border-color:rgba(255,255,255,.4); }
.contact .btn--ghost:hover { background:rgba(255,255,255,.1); color:#fff; border-color:#fff; }
.cv-note { margin-top:1.4rem; font-size:.9rem; color:#9fd0c6; font-family:var(--font-mono); }

.footer { padding:2.5rem 0 3rem; color:var(--muted); font-size:.9rem; }
.footer__inner { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center; }
.footer a { color:var(--grey-700); }

/* ---------------- Reveal animation ---------------- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }

/* ---------------- Mobile menu ---------------- */
.mobile-menu { display:none; }

/* ---------------- Responsive ---------------- */
@media (max-width:960px){
  .hero__grid { grid-template-columns:1fr; }
  .hero__media { max-width:520px; }
  .about__grid { grid-template-columns:1fr; }
  .project__media img { max-height:300px; }
  .approach-grid, .skills-grid { grid-template-columns:1fr; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .nav__links { display:none; }
  .nav__burger { display:inline-flex; }
  .tl-item { grid-template-columns:1fr; gap:.4rem; }
  .pub { grid-template-columns:auto 1fr; }
  .pub__tag { grid-column:2; justify-self:start; }
}
@media (max-width:560px){
  .stats { grid-template-columns:1fr 1fr; }
  .switch button { padding:.5rem .7rem; font-size:.82rem; }
  .brand__role { display:none; }
}

/* Focus visibility (accessibility, Spor emphasis) */
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:4px; }

@media (prefers-reduced-motion:reduce){
  * { scroll-behavior:auto !important; }
  .reveal { transition:none; opacity:1; transform:none; }
}