/* ── theme ────────────────────────────────────────────────────────────
   Seeded from figuritas (fun/album): oklch neutral palette + one accent,
   auto light/dark via light-dark(). Trimmed to only what a one-page,
   text-first showcase needs. Add tokens/rules as the page earns them.

   Accent policy: the resting page is neutral. Color lives in (a) the app
   icons themselves and (b) interaction — links/actions go accent on hover,
   not by default. That keeps --accent meaningful instead of spent on every
   URL. */
* {
  box-sizing: border-box;
}
html {
  scrollbar-gutter: stable;
}
:root {
  color-scheme: light dark;

  /* Neutral palette in oklch (perceptually uniform). Light L + dark L
     pair to the same "step away from bg" in either mode. */
  --bg: light-dark(oklch(1 0 0), oklch(0.17 0 0));
  --border: light-dark(oklch(0.9 0 0), oklch(0.26 0 0));
  --muted: light-dark(oklch(0.47 0 0), oklch(0.7 0 0));
  --text: light-dark(oklch(0.2 0 0), oklch(0.97 0 0));

  /* The one accent — reserved for hover / interaction. */
  --accent: light-dark(oklch(0.46 0.16 245), oklch(0.67 0.13 245));
}
body {
  font-family: system-ui, -apple-system, sans-serif;
  max-width: 38rem;
  min-height: 100dvh;
  margin: 0 auto;
  /* Roomy up top (header breathing room), tighter at the bottom so the
     pinned footer hugs the viewport edge instead of floating on padding. */
  padding: 4rem 1.25rem 1.5rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: column that fills the viewport, main grows to push
     the footer to the bottom when content is short. */
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
}

/* ── header ───────────────────────────────────────────────────────── */
.hdr {
  display: flex;
  align-items: center;
  /* Match .project so the name lands on the same column as the project titles. */
  gap: 1rem;
}
/* Monogram mark — a filled accent squircle matching the app-icon column
   (64px, flush). The app-icon PNGs are normalized to tight squircles, so
   every icon (mark + apps) shares the same size and left edge. Themed via
   tokens so it adapts light/dark. */
.mark {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  background: var(--accent);
  color: light-dark(#fff, oklch(0.17 0 0));
}

/* ── type ─────────────────────────────────────────────────────────── */
h1 {
  font-size: 1.6rem;
  margin: 0;
}
h2 {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 3rem 0 0;
}
h3 {
  font-size: 1.05rem;
  margin: 0 0 0.15rem;
}
p {
  margin: 0.5rem 0;
}
.lede {
  color: var(--muted);
  font-size: 1.05rem;
}
.muted {
  color: var(--muted);
  font-size: 0.85rem;
}

/* ── projects (app-store-ish row: icon + body) ────────────────────── */
.project {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
}
.project:first-of-type {
  border-top: 0;
}
.app-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  /* macOS AppIcon PNGs carry their own squircle — no radius here. */
}
.body {
  flex: 1;
  min-width: 0;
}
.project p {
  color: var(--muted);
}

/* ── actions ──────────────────────────────────────────────────────────
   One accent pill per project — the primary action, for the platform we
   most want a stranger to land on. Every *other* platform is a muted text
   link in the rail, never a second pill: the pill count stays at 1 no
   matter how many platforms ship, so focus never gets split.

   The rail is text, not glyphs, on purpose. Device silhouettes run out of
   distinguishable metaphors exactly when you need them — iOS and Android
   are the same rounded rectangle, and the only thing that tells them apart
   is a logo we can't use (Apple's mark is licence-only; see CLAUDE.md).
   Text has none of those problems and costs no assets. Glyphs are reserved
   for the two genuinely universal marks: GitHub and email. */
.links {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 0.75rem;
}
/* Other platforms this project ships to. Quiet by default; only the one
   being pointed at comes forward. */
.rail {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--muted);
}
.rail a {
  color: inherit;
  text-decoration: none;
  transition: color 0.12s ease;
}
.rail a:hover {
  color: var(--accent);
}
/* Separator between rail entries — decorative, so it stays out of the
   accessibility tree and out of copied text. */
.rail a + a::before,
.rail a + .pending::before,
.rail .pending + a::before {
  content: "·";
  margin-right: 0.4rem;
  color: var(--border);
}
/* A platform that exists but has nothing to link to yet. Deliberately not
   an <a>: a dead href="#" is a worse lie than plain text. */
.pending {
  opacity: 0.65;
}
/* GitHub sits at the far end, so the row reads: get it → where else → source. */
.links .secondary:last-child {
  margin-left: auto;
}
.ico {
  width: 1.2rem;
  height: 1.2rem;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  background: transparent;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.14s ease,
    color 0.14s ease,
    transform 0.06s ease;
}
.cta:hover {
  background: var(--accent);
  color: light-dark(#fff, oklch(0.17 0 0));
}
.cta:active {
  transform: translateY(1px);
  filter: brightness(0.94);
}
.cta .ico {
  width: 1.05rem;
  height: 1.05rem;
}
.secondary {
  display: inline-flex;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.12s ease;
}
.secondary:hover {
  color: var(--accent);
}

/* ── footer (icon links, pinned to bottom via the body flex column) ── */
footer {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}