/* JetBrains Mono — SIL Open Font License 1.1 — see fonts/OFL.txt */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-500.woff2") format("woff2");
}

/* Light is the base palette; the block below swaps it for dark. The page
   follows the operating system only — there is no in-page theme switch. */
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #52525b;
  --fg-strong: #101012;
  --fg-muted: #6b6b74;
  --focus: #2563eb;

  /* One left rail: the mark, the headline and the links all start here. */
  --rail: 2.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #18191b;
    --fg: #a8a8b0;
    --fg-strong: #f4f4f6;
    --fg-muted: #8b8b95;
    --focus: #7ea6ff;
  }
}

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

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--rail);
  background: var(--bg);
  color: var(--fg);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9375rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: 2px;
}

/* The mark is a quiet home link, not the focal point — the cursor that used
   to live here has moved to the end of the sentence, where the typing is. */
.mark {
  display: inline-block;
  font-weight: 500;
  color: var(--fg-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.mark:hover {
  color: var(--fg-strong);
}

/* Main -------------------------------------------------------------------- */

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 3vh;
}

/* Set as a statement, not a paragraph. The measure is deliberately narrow so
   the sentence breaks into a block of two or three lines. */
.intro {
  /* The measure is what produces the three-line break, so it is held at every
     width rather than released to 100% on phones. 22ch is the exact length of
     "Hi, I'm Peter Kuczera," — narrower splits the name, wider pulls "a" up.
     min() guards against overflow on screens too narrow for it. */
  max-width: min(22ch, 100%);
  margin: 0;
  font-size: clamp(1.2rem, 6.2vw, 3rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--fg);
}

.intro strong {
  font-weight: 500;
  color: var(--fg-strong);
}

/* A caret, not a block. At display size a full character cell of blinking
   solid competes with the sentence it is supposed to punctuate. */
.cursor {
  display: inline-block;
  width: 0.085em;
  min-width: 2px;
  height: 1.05em;
  margin-left: 0.16em;
  vertical-align: -0.17em;
  background: var(--fg-strong);
  /* Six blinks, then gone. `forwards` is what holds the final keyframe —
     without it the element reverts to its un-animated state and lands solid. */
  animation: blink 1.2s step-end 6 forwards;
}

/* Starts visible — a cursor that boots into its "off" half reads as a
   rendering glitch for the first half second. */
@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* `animation: none` alone reverts to the un-animated state — a solid bar welded
   to the headline forever, the exact end state `forwards` exists to avoid. Match
   the settled state instead: gone, with the layout unchanged. */
@media (prefers-reduced-motion: reduce) {
  .cursor {
    animation: none;
    opacity: 0;
  }
}

/* Set small and close to the headline: a dry line delivered in large type
   stops being dry, and the tight gap keeps it attached to the sentence above
   rather than floating as its own section. */
.tagline {
  /* Holds one line on desktop; on narrow screens it has to break, so balance
     the two halves rather than stranding "reliable." on its own. */
  max-width: 68ch;
  text-wrap: balance;
  margin: clamp(1.5rem, 4vh, 2.25rem) 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--fg);
}

/* Links ------------------------------------------------------------------- */

/* Destinations, not icons — in mono a URL is legible as itself, and it says
   where the click goes without asking anyone to decode a glyph. */
.links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
  font-size: 1rem;
}

.links a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--fg-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

/* Sized in em so the marks track the text rather than sitting at a fixed
   pixel size that drifts out of step on small screens. */
.icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.links a:hover {
  color: var(--fg-strong);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

@media (max-width: 640px) {
  :root {
    --rail: 1.75rem;
  }

  /* Touch targets. The rows are only ~26px of text; the padding lifts each to
     ~44px of tappable height while the gap comes off, so the list looks the
     same but stops being fiddly with a thumb. */
  .links {
    gap: 0;
  }

  .links a {
    padding: 0.55rem 0;
  }
}