/* Self-contained: deliberately does not load styles.css, whose centred
   `display: grid` + `overflow: hidden` body is built for the single-screen
   landing page and fights a scrolling index. The shared visual language
   (violet wash, system light/dark, Inter stack) is restated here instead. */

:root {
  color-scheme: light dark;

  --card-radius: 16px; /* must track RADIUS in src/cards.js */

  --ink: light-dark(#1a1720, #ece9f2);
  --ink-soft: light-dark(#4a4356, #b6aec6);
  --ink-faint: light-dark(#6d6479, #8b8199);
  --surface: light-dark(rgba(255, 255, 255, 0.62), rgba(28, 24, 36, 0.52));
  --edge: light-dark(rgba(88, 70, 130, 0.16), rgba(196, 181, 253, 0.14));
  --edge-strong: light-dark(rgba(88, 70, 130, 0.34), rgba(196, 181, 253, 0.32));
  --violet: light-dark(#6d4ad8, #c4b5fd);
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  padding: clamp(1.5rem, 5vw, 4rem) clamp(1.25rem, 5vw, 3rem) 4rem;
  background: canvas;
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Same drifting wash as the landing page, so the two read as one site. */
body::before {
  content: '';
  position: fixed;
  inset: -20vmax;
  pointer-events: none;
  z-index: -2;
  opacity: 0.2;
  background:
    radial-gradient(circle at 16% 22%, #a78bfa 0, transparent 40%),
    radial-gradient(circle at 84% 28%, #8b5cf6 0, transparent 38%),
    radial-gradient(circle at 48% 84%, #c4b5fd 0, transparent 36%);
  filter: blur(52px) saturate(120%);
  animation: drift 28s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 1%, 0) scale(1.04); }
}

#cards-gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* -------------------------------------------------------------- masthead */

.masthead {
  max-width: 60rem;
  margin: 0 auto 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.back {
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
  width: fit-content;
}
.back:hover { color: var(--violet); }

.masthead h1 {
  margin: 0;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.standfirst {
  margin: 0;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 1.02rem;
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ grid */

main {
  max-width: 60rem;
  margin: 0 auto;
}

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 26rem));
  justify-content: start;
  gap: 1.25rem;
}

.grid > li { display: flex; }

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.5rem;
  border: 1px solid var(--edge);
  border-radius: var(--card-radius);
  transition: border-color 220ms ease, transform 220ms ease;

  /* Fallback surface. Once the shader is painting behind the grid it supplies
     the colour, so this drops back to a plain translucent pane. */
  background: var(--surface);
  backdrop-filter: blur(10px);
}

.gl-ready .card {
  background: light-dark(rgba(255, 255, 255, 0.60), rgba(14, 11, 21, 0.66));
  backdrop-filter: blur(4px);
}

.card:hover,
.card:focus-within {
  border-color: var(--edge-strong);
  transform: translateY(-2px);
}

.card h2 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

.card > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  text-wrap: pretty;
}

.card code {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 0.86em;
  color: var(--violet);
  overflow-wrap: anywhere;
}

.tech {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tech li {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
}

/* Pushes the action row to the bottom so buttons line up across a ragged row. */
.actions {
  margin: auto 0 0;
  padding-top: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.actions a {
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.actions a.primary {
  color: var(--violet);
  font-weight: 600;
}

.actions a[aria-disabled='true'] {
  color: var(--ink-faint);
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}

a:focus-visible,
.card:focus-within {
  outline-offset: 3px;
}

a:focus-visible {
  outline: 2px solid var(--violet);
  border-radius: 3px;
}

/* ---------------------------------------------------------------- footer */

.foot {
  max-width: 60rem;
  margin: 3.5rem auto 0;
  color: var(--ink-faint);
  font-size: 0.9rem;
}
.foot p { margin: 0; }
.foot a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .card { transition: none; }
  .card:hover, .card:focus-within { transform: none; }
}