/* /iw — one quiet two-family portfolio index. Minimal shared chrome. */
:root {
  color-scheme: dark;
  --void: #02070c;
  --line: rgba(132, 194, 214, 0.18);
  --line-strong: rgba(132, 220, 235, 0.34);
  --text: #edf8fb;
  --muted: #8da8b3;
  --quiet: #668794;
  --cyan: #29d4e3;
  --cyan-bright: #5ce8f1;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% -10%, rgba(24, 127, 151, 0.18), transparent 42%),
    var(--void);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

main {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(48px, 10vh, 110px) clamp(18px, 5vw, 40px) 48px;
}

.kicker {
  margin: 0 0 10px;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
}

h1 {
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.intro { margin: 0 0 38px; color: var(--muted); font-size: 1rem; }
.intro strong { color: var(--text); }

.site-group {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.site-group + .site-group {
  margin-top: 34px;
}

.aiml-family { border-top-color: rgba(183, 155, 255, 0.32); }
.aiml-family .section-kicker,
.aiml-family .site-name { color: #b79bff; }

/* Three columns once there is room for them. Below this the page keeps the
   single-column stack it has always had -- the grid simply never engages, so
   mobile is untouched. The reading column stays narrow; only the link box
   widens, so line length in the intro and footer does not change. */
@media (min-width: 1000px) {
  main { max-width: 1080px; }
  .kicker, h1, .intro, .home-link, footer { max-width: 620px; }
  .site-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    align-items: start;
  }
  .site-groups .site-group + .site-group { margin-top: 0; }
}

.section-kicker {
  margin: 0 0 4px;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.site-group h2 {
  margin: 0 0 14px;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.navy-family {
  border-top-color: rgba(112, 225, 193, 0.3);
}

.navy-family .section-kicker,
.navy-family .site-name {
  color: #70e1c1;
}

.site-list { display: grid; gap: 10px; }

.site-list a {
  display: block;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(5, 19, 29, 0.55);
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.site-list a:hover {
  border-color: var(--line-strong);
  transform: translateX(3px);
}

.site-name {
  display: block;
  color: var(--cyan-bright);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.site-desc { display: block; color: var(--quiet); font-size: 0.85rem; }

.home-link {
  display: inline-block;
  margin-top: 30px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  text-decoration: none;
}

.home-link:hover { color: var(--cyan-bright); }

footer { margin-top: 46px; padding-top: 18px; border-top: 1px dashed var(--line); }

.credit { margin: 0 0 10px; color: var(--muted); font-size: 0.8rem; }
.credit a { color: var(--cyan-bright); text-decoration: none; }
.credit a:hover { text-decoration: underline; }

.fine-print { margin: 0; color: var(--quiet); font-size: 0.68rem; line-height: 1.55; }

@media (prefers-contrast: more) {
  .site-list a { border-color: var(--line-strong); }
  .fine-print { color: var(--muted); }
}