@font-face {
  font-family: "Familjen Grotesk";
  src: url(/fonts/familjen-grotesk.woff2) format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --paper: #ffffff;
  --ink: #1c1c1c;
  --muted: #5e6166;
  --rule: #e3e3df;
  --hover: #f7f2f2;
  --red: #b0172b; /* fanröd: years, chapter numbers, focus */
  --measure: 46rem;
  --gutter: clamp(1rem, 5vw, 3rem);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141618;
    --ink: #ecebe8;
    --muted: #a3a6ab;
    --rule: #2c2f33;
    --hover: #1f2225;
    --red: #ff7a86;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(*) {
  animation-duration: .45s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
/* Page: the old page stays put and the new one (stacked on top) fades in over
   it, so the screen never blanks or cuts. The name is part of the page and
   simply crossfades: big two-line name and one-line header can't morph. */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: .25s ease-out both vt-in; }
@keyframes vt-in { from { opacity: 0; } }
/* Titles can change line count: swap snapshots in a short window mid-flight.
   Opacities always sum to 1 and plus-lighter adds them, so text never dims. */
.works .title, .title-block h1 { view-transition-class: morph; }
::view-transition-old(*.morph), ::view-transition-new(*.morph) {
  animation: .45s linear both;
  mix-blend-mode: plus-lighter;
}
::view-transition-old(*.morph) { animation-name: morph-out; }
::view-transition-new(*.morph) { animation-name: morph-in; }
@keyframes morph-out { 0%, 40% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes morph-in { 0%, 40% { opacity: 0; } 60%, 100% { opacity: 1; } }

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.55 "Familjen Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.bar, main, footer {
  width: min(100% - 2 * var(--gutter), var(--measure));
  margin-inline: auto;
}
a { color: inherit; text-decoration-color: var(--muted); text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }
h1, h2, p { margin: 0; }

/* Header on inner pages */
.bar { padding-block: 1.5rem; }
.name-small {
  display: inline-block;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
}

/* Home */
.hero {
  --name-size: clamp(3.4rem, 14vw, 7rem);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(1.75rem, 5vw, 2.5rem) clamp(1rem, 4vw, 2.5rem);
  padding-block: clamp(2.5rem, 8vw, 5rem) clamp(2rem, 5vw, 3rem);
}
.name-big {
  font-size: var(--name-size);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.045em;
  text-box: trim-both cap alphabetic; /* box runs from cap top to baseline */
}
/* Same height as the trimmed name: cap height (.65em) + one line (.86em),
   so the photo's top and bottom line up with "Björn" and "Horgby". */
.hero img {
  height: calc(var(--name-size) * 1.51);
  width: auto;
  border-radius: 4px;
}
.lede {
  grid-column: 1 / -1;
  max-width: 34em;
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  line-height: 1.45;
  text-wrap: pretty;
}

section + section { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
h2 { font-size: 1rem; font-weight: 600; color: var(--muted); margin-bottom: .5rem; }

.works, .toc { list-style: none; margin: 0; padding: 0; }
.works li, .toc li { border-top: 1px solid var(--rule); }
.works li:last-child, .toc li:last-child { border-bottom: 1px solid var(--rule); }
.works a, .toc a {
  display: grid;
  margin-inline: -.75rem;
  padding-inline: .75rem;
  border-radius: 6px;
  text-decoration: none;
}
.works a:hover, .toc a:hover { background: var(--hover); }

.works a { grid-template-columns: 3.5rem 1fr; gap: 1rem; padding-block: 1.1rem; }
.year { color: var(--red); font-weight: 600; font-variant-numeric: tabular-nums; padding-top: .3em; }
.works .title {
  display: block;
  width: fit-content;
  font-size: clamp(1.3rem, 3.4vw, 1.65rem);
  font-weight: 700; /* same weight and tracking as the h1 it morphs into */
  line-height: 1.15;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.works .sub { display: block; margin-top: .3rem; text-wrap: balance; }
.works .meta { display: block; margin-top: .3rem; color: var(--muted); font-size: .9375rem; }

/* Inner pages */
.title-block { padding-block: clamp(2rem, 9vw, 5rem) clamp(2rem, 6vw, 3rem); }
.title-block h1 {
  width: fit-content;
  font-size: clamp(2.3rem, 7.5vw, 4.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.title-block .sub { margin-top: 1rem; font-size: clamp(1.15rem, 2.6vw, 1.4rem); line-height: 1.35; text-wrap: balance; }
.title-block .meta { margin-top: .5rem; color: var(--muted); }
.note { color: var(--muted); font-size: .9375rem; margin-bottom: .75rem; }

.toc a {
  grid-template-columns: 2.25rem 1fr auto 1.25rem;
  align-items: baseline;
  gap: .75rem;
  padding-block: .8rem;
}
.toc.plain a { grid-template-columns: 1fr auto 1.25rem; }
.toc .no { color: var(--red); font-weight: 600; font-variant-numeric: tabular-nums; }
.toc .t { font-weight: 500; }
.toc .size { color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.toc svg { width: 1.25rem; height: 1.25rem; align-self: center; color: var(--muted); }
.toc a:hover svg { color: var(--red); }

footer {
  padding-block: clamp(3rem, 8vw, 5rem) 2rem;
  color: var(--muted);
  font-size: .875rem;
}

@media (max-width: 34rem) {
  .works a { grid-template-columns: 2.75rem 1fr; gap: .75rem; }
  .toc a { grid-template-columns: 1.75rem 1fr 1.25rem; row-gap: .1rem; }
  .toc.plain a { grid-template-columns: 1fr 1.25rem; }
  .toc .size { grid-row: 2; grid-column: 2; }
  .toc.plain .size { grid-column: 1; }
  .toc svg { grid-row: 1 / 3; grid-column: -2; }
}