/* Font URLs carry no content hash, so a new font version needs a new file
   name; otherwise browsers keep the cached file for up to a year. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter/Inter-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2");
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-root);
  scroll-behavior: smooth;
}

/* A faint accent glow at the top. The column layout keeps the footer at
   the bottom of short pages. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background-color: var(--color-bg);
  background-image: radial-gradient(var(--glow-shape), var(--color-glow), transparent 70%);
  background-repeat: no-repeat;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}

/* A static line grid behind everything that fades out downwards:
   texture without images, scripts or motion. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--color-grid) var(--border-width), transparent var(--border-width)),
    linear-gradient(90deg, var(--color-grid) var(--border-width), transparent var(--border-width));
  background-size: var(--grid-spacing) var(--grid-spacing);
  mask-image: radial-gradient(var(--grid-fade-shape), black 20%, transparent 100%);
}

main {
  flex: 1 0 auto;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--color-text-strong);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

p,
dl,
dd,
figure {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--color-text-strong);
  text-decoration: underline;
  text-decoration-color: var(--color-link-underline);
  text-underline-offset: var(--space-1);
  transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
}

a:hover {
  text-decoration-color: var(--color-accent);
}

:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: var(--focus-width);
  border-radius: var(--radius-sm);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Layout */

.column {
  width: 100%;
  max-width: calc(var(--column-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-12) var(--space-16);
}

.page__header {
  display: grid;
  gap: var(--space-4);
}

.page__title {
  font-size: var(--font-size-title);
}

.page__lead {
  font-size: var(--font-size-lg);
}

/* "Deutsch  English" below the title of the legal pages. */
.language-switch ul {
  display: flex;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-label);
}

.language-switch a {
  color: var(--color-text-muted);
}

.language-switch a[aria-current="page"] {
  color: var(--color-text-strong);
  text-decoration-color: var(--color-accent);
}

.page__section {
  display: grid;
  gap: var(--space-6);
}

.section__title {
  font-size: var(--font-size-lg);
}

.section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.divider {
  width: var(--divider-width);
  margin: var(--space-6) auto;
  border: 0;
  border-top: var(--border-width) solid var(--color-border);
}

/* Text */

.eyebrow,
.meta {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-label);
}

.eyebrow {
  text-transform: uppercase;
}

.muted {
  color: var(--color-text-muted);
}

.prose {
  display: grid;
  gap: var(--space-4);
}

.prose :is(h2, h3) {
  margin-top: var(--space-4);
}

.prose :is(ul, ol) {
  margin: 0;
  padding-left: var(--space-6);
  list-style: revert;
}

.prose pre {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.prose code {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Header and footer */

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: var(--color-on-accent);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-8);
}

.site-header__mark {
  color: var(--color-text-strong);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-label);
  text-decoration: none;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
}

/* Flex list items keep icon links on the same center line as text links,
   instead of sitting on the text baseline. */
.site-nav li {
  display: flex;
}

.site-nav a {
  display: inline-flex;
  color: var(--color-text-muted);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--color-text-strong);
}

.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
}

.site-footer {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.site-footer a {
  color: var(--color-text-muted);
}

.inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

/* Home */

.intro {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-8) var(--space-2);
}

.home-section {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-4);
}

/* Label/value rows like "Creator of [SailVault] [PineForge]". */
.chip-rows {
  display: grid;
  gap: var(--space-2);
}

.chip-rows > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-strong);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
  text-decoration: none;
  transition: border-color var(--transition-fast);
}

a.chip:hover {
  border-color: var(--color-accent);
}

.chip img,
.chip .icon {
  width: var(--icon-size);
  height: var(--icon-size);
}

.monogram {
  display: inline-grid;
  place-items: center;
  width: var(--icon-size);
  height: var(--icon-size);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

/* Project grid: two columns in the reading column, more rows as projects
   are added. The negative margin keeps icons on the text's left edge while
   the hover background gets room around them. The title link stretches over
   the whole item, so screen readers announce one short link while pointer
   users can click anywhere on it. */
.project-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--project-min-width)), 1fr));
  gap: var(--space-2);
  margin-inline: calc(-1 * var(--space-3));
}

.project-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.project-item:hover,
.project-item:has(.project-item__link:focus-visible) {
  background: var(--color-surface);
}

.project-item__icon,
.project-item__icon img {
  width: var(--project-icon-size);
  height: var(--project-icon-size);
}

.project-item__icon .monogram {
  width: 100%;
  height: 100%;
  font-size: var(--font-size-lg);
}

.project-item__body {
  display: grid;
  gap: var(--space-1);
}

.project-item__title {
  font-size: var(--font-size-base);
}

.project-item__link {
  text-decoration: none;
}

.project-item__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.project-item__link:focus-visible {
  outline: none;
}

/* Project page */

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.facts > div {
  display: grid;
}

.facts dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.page__cover img,
.screenshot-list img {
  width: 100%;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.screenshot-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--screenshot-width)), 1fr));
  gap: var(--space-6);
}

/* Devlog */

.devlog-list {
  display: grid;
  gap: var(--space-6);
}

.devlog-item {
  display: grid;
  gap: var(--space-1);
}

.devlog-item__title {
  font-size: var(--font-size-base);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}