/* ============================================================
   mtvchk.dev foundations
   Raw color pairs stay separate from the composed tokens so the
   contrast checker can read them and so pairs can be recombined.
   ============================================================ */

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

:root {
  color-scheme: light dark;

  --bg-light: #FFFFFF;
  --bg-dark: #0B0B0C;
  --ink-light: #111112;
  --ink-dark: #E8E6E3;
  --muted-light: #5C5C63;
  --muted-dark: #8A8A8F;
  --rule-light: #E2E2E4;
  --rule-dark: #232326;
  --accent-light: #8A5200;
  --accent-dark: #E8A33D;

  --bg: light-dark(var(--bg-light), var(--bg-dark));
  --ink: light-dark(var(--ink-light), var(--ink-dark));
  --muted: light-dark(var(--muted-light), var(--muted-dark));
  --rule: light-dark(var(--rule-light), var(--rule-dark));
  --accent: light-dark(var(--accent-light), var(--accent-dark));

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --step: 8px;
  --col: 72ch;

  accent-color: var(--accent);
}

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

body {
  margin: 0;
  padding: calc(var(--step) * 6) calc(var(--step) * 3);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  /* Keeps line length stable if the fallback font paints first. */
  font-size-adjust: 0.52;
  font-size: clamp(14px, 0.5rem + 0.6vw, 16px);
  line-height: 1.6;
}

main { max-width: var(--col); margin-inline: auto; }

a { color: var(--accent); text-underline-offset: 0.2em; }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

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

/* ============================================================
   Wordmark
   Two literals, swapped by width. The reveal animates clip-path
   in whole-column steps so the art never renders a partial glyph.
   ============================================================ */

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

.wordmark pre {
  margin: 0;
  font: inherit;
  line-height: 1.15;
  color: var(--ink);
  /* Scale the art to fill the container instead of letting it overflow.
     A monospace glyph advance is a fraction of the font size, not the
     whole of it: JetBrains Mono measures 0.5673em here, so dividing by
     the column count alone renders the art at roughly half the width it
     should have. 0.58 is that measured ratio plus about 2 percent of
     slack, so a fallback font with slightly wider glyphs still fits.
     The rem cap is a ceiling, not the usual case. */
  font-size: min(1.5rem, calc(100cqw / (var(--cols) * 0.58)));
  animation: reveal 900ms steps(var(--cols)) 120ms both;
}

.wordmark { container-type: inline-size; }

.wordmark__wide { --cols: 55; }
.wordmark__narrow { --cols: 27; display: none; }

@container (max-width: 34rem) {
  .wordmark__wide { display: none; }
  .wordmark__narrow { display: block; }
}

@keyframes reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.wordmark__cursor {
  display: inline-block;
  width: 1ch;
  height: 1.15em;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: blink 900ms steps(1) 1020ms 4 both;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark pre { animation: none; clip-path: none; }
  .wordmark__cursor { animation: none; opacity: 1; }
}

/* ============================================================
   Buttons, status, chips, section headers
   ============================================================ */

.btn {
  display: inline-block;
  padding: calc(var(--step) * 1.5) calc(var(--step) * 3);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  font: inherit;
  text-decoration: none;
}
.btn:hover { opacity: 0.88; }

.btn--ghost {
  background: transparent;
  color: var(--accent);
}

.status { white-space: nowrap; }
/* The glyph is decorative; the word next to it carries the meaning,
   so status never depends on color or shape alone. The empty alt text
   after the slash keeps the raw symbol out of the accessibility tree,
   so a screen reader reads "Live", not "black circle Live". */
.status::before { margin-inline-end: 0.5ch; }
.status--live::before { content: "\25CF" / ""; color: var(--accent); }
.status--beta::before { content: "\25D0" / ""; color: var(--muted); }
.status--planned::before { content: "\25CB" / ""; color: var(--muted); }

.chip {
  display: inline-block;
  padding: 0 0.75ch;
  border: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.875em;
}

.section { margin-block: calc(var(--step) * 8); }

.section__title {
  display: flex;
  align-items: center;
  gap: 1ch;
  margin: 0 0 calc(var(--step) * 3);
  font-size: 1em;
  font-weight: 700;
  text-transform: lowercase;
  color: var(--muted);
}
/* Rule drawn as a flex-filling element, not as box-drawing characters, which
   break at fractional container widths. */
.section__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ============================================================
   Project card and footer
   ============================================================ */

.cards { display: grid; gap: calc(var(--step) * 2); }

.card {
  border: 1px solid var(--rule);
  padding: calc(var(--step) * 3);
}

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1ch;
}

/* A flex item's automatic minimum size is its longest unbreakable token,
   so wrapping alone does not stop a long domain from pushing the card
   past the viewport. These two make the wrap guarantee actually hold. */
.card__name { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.card__name a { color: var(--ink); }

.card__desc { margin: calc(var(--step) * 1.5) 0; }

.card__stack { display: flex; flex-wrap: wrap; gap: 0.5ch; }

.legal {
  margin-top: calc(var(--step) * 8);
  padding-top: calc(var(--step) * 3);
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.875em;
}