/* Same look as wecanfixeverything.com: the omarchy.org palette (Tokyo Night)
   and JetBrains Mono, served from here instead of Google Fonts. */
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-700.woff2') format('woff2');
}

:root {
  --background: rgb(26, 27, 38);
  --blue:       rgb(122, 162, 247);
  --cyan:       rgb(125, 207, 255);
  --green:      rgb(158, 206, 106);
  --red:        rgb(247, 118, 142);
  --white:      rgb(255, 255, 255);
  --font-family: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: dark; }

body {
  background: var(--background);
  color: var(--blue);
  font-family: var(--font-family);
  font-weight: 300;
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2em;
  padding: 2em;
  text-align: center;
  text-wrap: balance;
}

/* The slogan, set as a diff. */
.diff {
  text-align: left;
  font-size: clamp(1.375rem, 6vw, 3rem);
  line-height: 1.4;
  white-space: nowrap;
}

.diff del, .diff ins { text-decoration: none; display: block; }

/* Gutter markers in ::before: copy/paste reads like a diff, a screen reader
   hears the sentence. */
.ctx::before      { content: "  "; white-space: pre; }
.diff del::before { content: "- "; }
.diff ins::before { content: "+ "; }

.diff del { color: var(--red); }
.diff del .word { text-decoration: line-through; text-decoration-thickness: 0.06em; }
.diff ins { color: var(--green); font-weight: 700; }

.tagline {
  font-size: clamp(1rem, 2.5vw, 1.375rem);
  max-width: 32ch;
}

a {
  color: var(--cyan);
  font-weight: 700;
  font-size: clamp(0.875rem, 1.75vw, 1rem);
  text-decoration-thickness: 0.0875em;
  text-underline-offset: 0.25em;
  transition: color 0.15s cubic-bezier(0.33, 1, 0.68, 1);
}

@media (hover: hover) {
  a:hover { color: var(--white); }
}