:root{--bg:#020817;--surface:#030b1a;--text:#f8fafc;--muted:#c3ccd8;--line:rgba(255,255,255,.13);--accent:#4f8cff;--accent2:#ff8b98}html[data-theme="light"]{--bg:#eef2f7;--surface:#fff;--text:#101827;--muted:#475569;--line:rgba(16,24,39,.14)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,sans-serif;transition:background-color .35s ease,color .35s ease}a{color:inherit;text-decoration:none}button{font:inherit}main{max-width:1200px;margin:0 auto;padding:56px 28px 180px}.intro{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;margin-bottom:68px}.intro h1{margin:0;font-family:'Space Grotesk',sans-serif;font-size:clamp(3rem,7vw,6rem);font-weight:500;line-height:.92;letter-spacing:-.04em}.intro p{max-width:350px;margin:4px 0 0;font-family:Inter, sans-serif;font-size:1rem;line-height:1.45;color:var(--muted)}.filters{display:flex;gap:38px;margin-bottom:2.75rem;border-bottom:1px solid var(--line);font-family:"Space Grotesk",sans-serif;font-size:.82rem}.filter{position:relative;padding:0 0 10px;border:0;background:transparent;color:var(--muted);cursor:pointer;appearance:none;transition:color .18s ease}.filter::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:2px;background:var(--accent);transition:right .25s ease}.filter:hover,.filter.active{color:var(--text)}.filter.active::after{right:0}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.25rem;row-gap:4.5rem}.project-card{min-width:0;animation:rise .7s cubic-bezier(.23,1,.32,1) both}.project-card:nth-child(2){animation-delay:90ms}.project-card:nth-child(3){animation-delay:180ms}.project-card:nth-child(4){animation-delay:270ms}.project-media{position:relative;display:block;overflow:hidden;aspect-ratio:1.82;background:var(--surface);isolation:isolate;transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}.project-media img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.92);transform:scale(1.004);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .24s cubic-bezier(.23,1,.32,1),filter .24s ease}.project-card{position:relative}.project-card:hover{z-index:2}.project-card:hover img{transform:scale(1.04);filter:saturate(1.08)}.project-card:hover .project-arrow{transform:translate(3px,-3px);opacity:1}.project-meta{display:flex;justify-content:space-between;gap:16px;padding-top:14px}.project-name{font-family:'Space Grotesk',sans-serif;font-size:1rem}.project-description{margin-top:2px;font-family:Inter,sans-serif;font-size:.76rem;color:var(--muted)}.project-arrow{font-size:1.1rem;color:var(--accent2);opacity:.65;transition:transform .22s ease,opacity .22s ease}.reveal{opacity:0;transform:translateY(16px);animation:rise .72s cubic-bezier(.23,1,.32,1) forwards}.reveal.delay{animation-delay:110ms}@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){main{padding:42px 18px 120px}.intro{grid-template-columns:1fr;gap:22px;margin-bottom:45px}.intro h1{font-size:clamp(3.3rem,17vw,5rem)}.intro p{max-width:320px}.filters{gap:22px;overflow:auto}.project-grid{grid-template-columns:1fr;row-gap:3.25rem}.project-media{aspect-ratio:1.55}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
.skip-link{position:absolute;left:1rem;top:-3rem;z-index:100;background:#fff;color:#0b121c;padding:.6rem 1.1rem;border-radius:6px;font-size:.875rem;font-weight:600;transition:top 150ms ease}
.skip-link:focus{top:1rem}



/* header — exact parity with Home/About: fixed, same sizes, same colors */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background-color .3s ease;
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: .75rem; }
.brand img { display: block; width: 150px; height: 52px; object-fit: contain; object-position: center; }
@media (max-width: 767px) {
  .brand img { width: 124px; height: 48px; }
}
.header-actions { display: flex; align-items: center; gap: 12px; }
.nav-links a { position: relative; color: #d1d5db; transition: color .15s ease; }
html[data-theme="light"] .nav-links a { color: #475569; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: #fff; }
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a[aria-current="page"] { color: #102033; }
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 2px;
}
.theme-toggle {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.theme-toggle:hover { transform: rotate(12deg) scale(1.05); background: rgb(255 255 255 / 0.1); }
html[data-theme="light"] .theme-toggle { border-color: rgb(16 32 51 / 0.2); }
/* the toggle draws its own sun / moon (stroke: currentColor) instead of the
   Unicode dingbats ☼ / ☾: some platforms render those through the
   colour-emoji font, which ignores text colour and painted a solid white disc
   on dark backgrounds regardless of theme */
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
main { padding-top: 9.5rem; }
@media (max-width: 700px) { main { padding-top: 8rem; } }
@media (max-width: 559px) { main { padding-top: 9.25rem; } }
/* ── primary nav — one shared bar on Home, About, Projects, Contact and Yrkon.
      A 1fr / auto / 1fr grid keeps the links on the page centre line whatever
      the logo and the theme button measure. ── */
.nav-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.5rem;
}
.nav-bar > :first-child { justify-self: start; }
.nav-bar > :last-child { justify-self: end; }
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-size: 0.875rem;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .nav-bar { padding: 1.5rem 3rem; }
  .nav-links { gap: 3rem; }
}
@media (max-width: 767px) {
  .nav-bar { padding: 1.25rem 1.25rem; gap: 0.75rem; }
  .nav-links { gap: 1.35rem; font-size: 0.8125rem; }
}
@media (max-width: 559px) {
  .nav-bar { grid-template-columns: 1fr auto; row-gap: 0.85rem; padding: 1rem 1.25rem; }
  .nav-links { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 1.5rem; }
}

/* ── footer — the same markup and rules on Home, About, Projects, Contact and
      Yrkon; the inner column lines up with .nav-bar above it ── */
.site-footer {
  --f-line: rgba(255, 255, 255, 0.13);
  --f-accent: #4f8cff;
  --f-muted: #c3ccd8;
  --f-faint: #8d98a8;
  --f-text: #f8fafc;
  border-top: 1px solid var(--f-line);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--f-muted);
}
html[data-theme="light"] .site-footer {
  --f-line: rgba(16, 24, 39, 0.14);
  --f-accent: #245bb5;
  --f-muted: #475569;
  --f-faint: #5b6a7e;
  --f-text: #101827;
}
.site-footer-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 34px 1.5rem 30px;
}
.site-footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
.site-footer h2 {
  margin: 0 0 9px;
  color: var(--f-accent);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.site-footer p { margin: 5px 0; }
.site-footer a {
  display: block;
  margin: 5px 0;
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--f-text); }
.site-footer-base {
  margin-top: 34px;
  text-align: center;
}
.site-footer-base p { margin: 0; }
.site-footer-base .site-footer-credit {
  margin-top: 10px;
  font-size: 0.66rem;
  color: var(--f-faint);
}
@media (min-width: 1024px) {
  .site-footer-inner { padding: 34px 3rem 30px; }
}
@media (max-width: 767px) {
  .site-footer-inner { padding: 28px 1.25rem 26px; }
  .site-footer-cols { grid-template-columns: 1fr 1fr; }
  .site-footer-cols > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 519px) {
  .site-footer-cols { grid-template-columns: 1fr; }
  .site-footer-cols > div:last-child { grid-column: auto; }
}