:root {
  color-scheme: dark;
  --ink: oklch(96% 0.008 130);
  --quiet: oklch(74% 0.016 145);
  --muted: oklch(58% 0.014 145);
  --canvas: oklch(12% 0.011 145);
  --canvas-deep: oklch(9% 0.008 145);
  --surface: oklch(16% 0.014 145);
  --line: oklch(31% 0.015 145 / 0.78);
  --signal: oklch(84% 0.154 195);
  --signal-ink: oklch(20% 0.045 195);
  --display: "Familjen Grotesk", "Avenir Next", system-ui, sans-serif;
  --sans: "Manrope", "Avenir Next", Avenir, system-ui, sans-serif;
  --mono: "Roboto Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --container: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--canvas-deep); color: var(--ink); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.container { width: var(--container); margin-inline: auto; }
.mono { color: var(--signal); font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; }
.site-header { position: sticky; inset: 0 0 auto; z-index: 10; border-bottom: 1px solid var(--line); background: oklch(9% 0.008 145 / .9); backdrop-filter: blur(14px); }
.nav { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .7rem; font-size: .9rem; font-weight: 800; letter-spacing: -.02em; }
.brand-logo { width: 35px; height: 35px; display: block; }
.nav-links { display: flex; gap: 1.25rem; color: var(--quiet); font-size: .8rem; font-weight: 700; }
.nav-links a:hover { color: var(--ink); }
.project-page { padding-block: clamp(4rem, 10vw, 9rem); }
.page-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, .48fr); gap: 2rem; align-items: end; padding-bottom: clamp(2.5rem, 6vw, 5rem); border-bottom: 1px solid var(--line); }
.page-heading h1 { max-width: 11ch; margin: .7rem 0 0; font-family: var(--display); font-size: clamp(3rem, 6.2vw, 6rem); letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.page-heading p { max-width: 42ch; margin: 0; color: var(--quiet); text-wrap: pretty; }
.project-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; margin-top: clamp(2.5rem, 5vw, 4rem); border: 1px solid var(--line); background: var(--line); }
.project { display: flex; min-height: 260px; flex-direction: column; align-items: flex-start; padding: clamp(1.3rem, 2.5vw, 1.85rem); background: var(--canvas); transition: background .25s var(--ease), transform .25s var(--ease); }
.project:hover { background: var(--surface); transform: translateY(-3px); }
.project.wide { grid-column: span 7; }
.project.narrow { grid-column: span 5; }
.project.half { grid-column: span 6; }
.project-top { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .75rem; }
.symbol { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--signal); color: var(--signal); font-family: var(--mono); font-size: .72rem; }
.project h2 { margin: 1.8rem 0 .6rem; font-family: var(--display); font-size: clamp(1.25rem, 2.3vw, 1.9rem); letter-spacing: -.025em; line-height: 1.1; }
.project p { max-width: 50ch; margin: 0; color: var(--quiet); font-size: .86rem; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: 1.3rem; }
.tag { padding: .28rem .45rem; border: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: .62rem; }
.project-note { padding: 1rem 0; color: var(--muted); font-size: .78rem; }
.site-footer { border-top: 1px solid var(--line); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; padding-block: 1.6rem; color: var(--muted); font-size: .75rem; }
@media (max-width: 680px) {
  .page-heading { grid-template-columns: 1fr; }
  .project.wide, .project.narrow, .project.half { grid-column: 1 / -1; }
  .nav-links { gap: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}