/* HAICoS v2.
 *
 * Three registers, each with one job:
 *   evolutionary tree  -> structure: branching, nodes, tips, organic curves
 *   computational      -> surface: mono labels, a faint plot grid, axis ticks
 *   human              -> warmth: a warm ground, a warm serif, a warm lineage
 *
 * The palette is the argument. The six decorative rainbow colours of the
 * Horizons build are gone; colour now means something. Everything human is
 * warm, everything machine is cool, and where the two lineages exchange, the
 * hues meet in the violet between them.
 */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=DM+Sans:wght@400;500;600;700&display=swap");

:root {
  /* A warm off-white, not paper-white. The single cheapest source of warmth
     on the whole page. */
  --background: 40 33% 98%;
  --foreground: 25 20% 14%;
  --card: 40 40% 99%;
  --muted: 36 24% 94%;
  --muted-foreground: 28 10% 44%;
  --border: 34 22% 88%;
  --primary: 25 24% 20%;
  --primary-foreground: 40 33% 98%;
  --destructive: 6 72% 50%;

  /* The human lineage: ochre, amber, clay. */
  --human-1: 38 88% 52%;
  --human-2: 26 78% 50%;
  --human-3: 14 68% 50%;
  /* The machine lineage: cyan, blue, indigo. */
  --machine-1: 191 82% 42%;
  --machine-2: 212 80% 52%;
  --machine-3: 246 62% 60%;
  /* Where the two exchange. Sits exactly between the families. */
  --exchange: 300 46% 52%;

  --accent: var(--machine-1);
  --radius: .6rem;
  --maxw: 70rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: 25 18% 8%;
    --foreground: 38 25% 93%;
    --card: 25 16% 11%;
    --muted: 25 14% 16%;
    --muted-foreground: 32 12% 62%;
    --border: 26 14% 22%;
    --primary: 38 30% 92%;
    --primary-foreground: 25 18% 8%;
    --human-1: 42 92% 62%; --human-2: 28 84% 60%; --human-3: 14 74% 60%;
    --machine-1: 189 78% 55%; --machine-2: 212 84% 66%; --machine-3: 248 70% 72%;
    --exchange: 300 52% 68%;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0; overflow-x: clip;
  font-family: "DM Sans", system-ui, sans-serif;
  background: hsl(var(--background)); color: hsl(var(--foreground));
  line-height: 1.65; -webkit-font-smoothing: antialiased;
}
::selection { background: hsl(var(--human-1) / .28); }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: 46rem; }

/* Headings share the body face, tightened up. The warmth in this design comes
   from the palette and the ground, not from the letterforms. */
h1, h2, h3 {
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 700; letter-spacing: -.028em; line-height: 1.12;
}
.mono, .mono-accent, .tick {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
}
.mono-accent { color: hsl(var(--human-2)); margin: 0; }
.mono-accent.cool { color: hsl(var(--machine-1)); }
.muted { color: hsl(var(--muted-foreground)); }
a { color: inherit; }

header {
  position: sticky; top: 0; z-index: 30;
  background: hsl(var(--background) / .86); backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(var(--border));
}
.bar { display: flex; align-items: center; justify-content: space-between; height: 4rem; gap: 1rem; }
.brand {
  font-family: "DM Sans", system-ui, sans-serif; font-weight: 700; font-size: 1.1rem;
  text-decoration: none; letter-spacing: -.02em;
}
.brand .h { color: hsl(var(--human-2)); }
.brand .m { color: hsl(var(--machine-2)); }
nav { display: flex; gap: 1.5rem; }
nav a {
  text-decoration: none; font-size: .9rem; color: hsl(var(--muted-foreground));
  padding: .25rem 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
nav a:hover { color: hsl(var(--foreground)); border-bottom-color: hsl(var(--human-1)); }
@media (max-width: 640px) { nav { gap: 1rem; } nav a { font-size: .82rem; } }

/* Hero. The atmosphere the Horizons build had and the first port threw away:
   most of the viewport, and a warm glow behind it so it reads as a place. */
.hero {
  position: relative; min-height: 78dvh; display: flex; flex-direction: column;
  justify-content: center; padding: 4rem 0 3rem; text-align: center; overflow: hidden;
}
.hero::before {
  /* The glow has to die out well inside its own box, or the box's bottom edge
     shows as a faint horizontal seam across the page. Hence gradients that
     reach transparent at 60% inside a box that extends past the hero on every
     side, plus a mask that fades the last third to nothing. */
  content: ""; position: absolute; inset: -30% -18% -22%;
  background:
    radial-gradient(ellipse 52% 46% at 32% 44%, hsl(var(--human-1) / .20), transparent 60%),
    radial-gradient(ellipse 48% 42% at 70% 54%, hsl(var(--machine-2) / .17), transparent 60%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  filter: blur(26px); z-index: -1; pointer-events: none;
}
.hero h1 { font-size: clamp(2.2rem, 5.8vw, 3.7rem); margin: 1.1rem 0 1.4rem; letter-spacing: -.035em; }
.hero h1 .h { color: hsl(var(--human-2)); }
.hero h1 .m { color: hsl(var(--machine-2)); }
.lede { max-width: 40rem; margin: 0 auto; font-size: 1.1rem; color: hsl(var(--muted-foreground)); }

section { padding: 5.5rem 0; }
section + section { border-top: 1px solid hsl(var(--border)); }
section h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin: .7rem 0 1.1rem; }
section > .wrap > p, section > .wrap > .narrow > p { color: hsl(var(--muted-foreground)); }

/* ---- The two trees, as the page's own ground ----------------------------
   Fixed behind everything and never interactive in its own right: it takes no
   pointer events, so nothing on the page becomes harder to click. The cursor
   still bends the branches, because art.js listens on the window instead. */
.art-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
}
.art-canvas { display: block; width: 100%; height: 100%; }

/* ---- Branching divider, the connective tissue between sections ----------- */
.divider { max-width: 24rem; margin: 0 auto; padding: .5rem 1.5rem; opacity: .7; }
.divider svg { width: 100%; height: auto; max-height: 2.75rem; display: block; }
.divider path { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.divider.draw path { animation: branchDraw 1.4s ease-in-out backwards; }
.divider.draw circle { animation: nodePop .4s ease-out backwards; transform-box: fill-box; transform-origin: center; }
@keyframes branchDraw { from { stroke-dashoffset: 1; opacity: 0; } }
@keyframes nodePop { from { transform: scale(0); } }
.divider circle { animation: treePulse 3s cubic-bezier(.4,0,.6,1) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes treePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.16); } }

/* ---- Cards, forms, events ------------------------------------------------ */
.signup {
  max-width: 30rem; margin: 2.5rem auto 0; padding: 1.75rem; text-align: left;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: 1rem; box-shadow: 0 14px 40px -26px hsl(25 40% 20% / .5);
}
.signup .mono-accent { text-align: center; margin-bottom: 1.1rem; }
.signup label { display: block; font-size: .82rem; font-weight: 500; margin: .7rem 0 .3rem; }
input[type="email"], input[type="text"], input[type="password"] {
  width: 100%; padding: .62rem .78rem; font: inherit; font-size: .93rem;
  color: hsl(var(--foreground)); background: hsl(var(--background));
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
}
input:focus-visible { outline: 2px solid hsl(var(--human-1)); outline-offset: 1px; }
button {
  margin-top: 1.1rem; width: 100%; padding: .68rem 1rem; font: inherit; font-weight: 600;
  font-size: .93rem; cursor: pointer; border: 0; border-radius: var(--radius);
  color: hsl(var(--primary-foreground)); background: hsl(var(--primary)); transition: opacity .15s;
}
button:hover { opacity: .9; }
button[disabled] { opacity: .55; cursor: progress; }
.form-msg { margin: .9rem 0 0; font-size: .88rem; }
.form-msg.ok { color: hsl(var(--machine-1)); }
.form-error, .form-msg.bad { color: hsl(var(--destructive)); font-size: .88rem; }
/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields that are not rendered at all. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pillars { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 2.5rem; }
.pillar {
  padding: 1.6rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: 1rem; border-top: 3px solid hsl(var(--c));
}
.pillar h3 { margin: .5rem 0 .6rem; font-size: 1.15rem; }
.pillar p { margin: 0; font-size: .93rem; color: hsl(var(--muted-foreground)); }
.glyph { width: 1.8rem; height: 1.8rem; display: block; }

.events { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
.event {
  display: grid; grid-template-columns: 11rem 1fr; gap: 1.5rem;
  padding: 1.7rem; background: hsl(var(--card));
  border: 1px solid hsl(var(--border)); border-radius: 1rem;
}
@media (max-width: 680px) { .event { grid-template-columns: 1fr; gap: .6rem; } }
.event .when { font-family: "IBM Plex Mono", monospace; font-size: .82rem; color: hsl(var(--human-2)); }
.event .where { font-size: .82rem; color: hsl(var(--muted-foreground)); margin-top: .2rem; }
.event h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.event p { margin: 0 0 .8rem; font-size: .93rem; color: hsl(var(--muted-foreground)); }
.tag {
  display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; padding: .22rem .55rem; margin-right: .4rem;
  border-radius: 999px; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground));
}

.closing { padding: 6rem 0; text-align: center; }
.closing p {
  font-size: clamp(1.25rem, 2.8vw, 1.75rem); max-width: 38rem; margin: 0 auto;
  line-height: 1.35; font-weight: 500; letter-spacing: -.02em;
}
footer { border-top: 1px solid hsl(var(--border)); padding: 2.5rem 0; font-size: .85rem; color: hsl(var(--muted-foreground)); }
.footrow { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }

/* Sections reveal as they arrive, which is what made the original feel alive. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.shown { opacity: 1; transform: none; }

.login-body { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; }
.login-card { width: 100%; max-width: 23rem; padding: 2rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 1rem; }
.login-card h1 { font-size: 1.5rem; margin: .5rem 0 .4rem; }
.login-card .muted { font-size: .88rem; margin: 0 0 1rem; }
.admin-main { padding: 2.5rem 0; }
table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: .9rem; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid hsl(var(--border)); }
th { font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.tablewrap { overflow-x: auto; }
.actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .divider.draw path, .divider.draw circle, .divider circle { animation: none; }
  .co-branch, .co-node, .co-lineage { transition: none; }
}

/* ---- v2: elements the original site's own content needs ----------------- */
h3.sub { font-size: 1.05rem; margin: 2rem 0 .5rem; letter-spacing: -.015em; }
.section-sub {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: hsl(var(--muted-foreground)); font-weight: 500;
  margin: 3rem 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid hsl(var(--border));
}

.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: flex; gap: 1.5rem; align-items: flex-start; justify-content: space-between;
  padding: 1.1rem 0; border-bottom: 1px solid hsl(var(--border));
}
.rows strong { font-weight: 600; display: block; }
.rows .by { font-size: .85rem; color: hsl(var(--muted-foreground)); }
.rows.wide li p { margin: .35rem 0 0; font-size: .9rem; color: hsl(var(--muted-foreground)); max-width: 44rem; }
.rows .meta { display: flex; align-items: center; gap: .7rem; flex: 0 0 auto; }
.rows .yr { font-family: "IBM Plex Mono", monospace; font-size: .82rem; color: hsl(var(--muted-foreground)); }
.pill {
  font-family: "IBM Plex Mono", monospace; font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; padding: .22rem .55rem; border-radius: 999px;
  border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); white-space: nowrap;
}
.pill.on { color: hsl(var(--machine-1)); border-color: hsl(var(--machine-1) / .45); }
@media (max-width: 620px) { .rows li { flex-direction: column; gap: .5rem; } }

.event.big { grid-template-columns: 14rem 1fr; margin-bottom: 1.25rem; }
.event.big .when { margin-top: .6rem; }
.event.big h3 { margin-bottom: .5rem; }
@media (max-width: 760px) { .event.big { grid-template-columns: 1fr; } }

.facts { display: grid; grid-template-columns: 7rem 1fr; gap: .4rem 1rem; margin: 0 0 1.1rem; }
.facts dt {
  font-family: "IBM Plex Mono", monospace; font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: hsl(var(--muted-foreground)); padding-top: .15rem;
}
.facts dd { margin: 0; font-size: .92rem; }

.fellow {
  margin-top: 1.2rem; padding: 1.1rem 1.25rem; border-radius: var(--radius);
  background: hsl(var(--human-1) / .08); border: 1px solid hsl(var(--human-1) / .3);
}
.fellow strong { display: block; margin-bottom: .35rem; }
.fellow p { margin: 0; font-size: .9rem; }
.fellow .deadline { margin-top: .6rem; color: hsl(var(--human-3)); letter-spacing: .1em; }

footer .brandline { font-weight: 700; font-size: 1.05rem; margin: 0 0 .6rem; letter-spacing: -.02em; }
footer .brandline .h { color: hsl(var(--human-2)); }
footer .brandline .m { color: hsl(var(--machine-2)); }
.foot-mission { max-width: 34rem; margin: 0 0 1rem; }
.copy { margin: 0; font-size: .8rem; }

/* ---- Multi-page: nav state, inner pages, and a single-colour wordmark --- */
/* HAICoS reads as one word, so it is one colour. */
.brand, .brand .h, .brand .m,
footer .brandline, footer .brandline .h, footer .brandline .m {
  color: hsl(var(--machine-2));
}
nav a.here { color: hsl(var(--foreground)); border-bottom-color: hsl(var(--machine-2)); }
/* Pages without a hero still need air under the sticky header. */
main.inner > section:first-child { padding-top: 3.5rem; }

/* ---- Join the network --------------------------------------------------- */
.small { font-size: .88rem; }
.joinform {
  max-width: 46rem; margin: 2.5rem 0 0; padding: 1.75rem;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 1rem;
}
.joinform label { display: block; font-size: .85rem; font-weight: 500; margin: 0 0 .3rem; }
.joinform .req {
  font-family: "IBM Plex Mono", monospace; font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: hsl(var(--human-2)); margin-left: .35rem;
}
.grid2 { display: grid; gap: 1rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-bottom: 1rem; }
.joinform textarea, .joinform select {
  width: 100%; padding: .62rem .78rem; font: inherit; font-size: .93rem;
  color: hsl(var(--foreground)); background: hsl(var(--background));
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
}
.joinform textarea { resize: vertical; margin-bottom: 1.25rem; }
.joinform select { appearance: none; background-image: none; }
.joinform fieldset { border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: .9rem 1rem 1rem; margin: 0 0 1.25rem; }
.joinform legend { font-size: .85rem; font-weight: 500; padding: 0 .4rem; }
label.chk {
  display: flex; align-items: flex-start; gap: .55rem; font-weight: 400;
  font-size: .92rem; margin: .45rem 0 0; cursor: pointer;
}
label.chk input { margin: .25rem 0 0; flex: 0 0 auto; accent-color: hsl(var(--human-2)); }
label.chk.big {
  padding: .9rem 1rem; border-radius: var(--radius); margin: 0 0 1.25rem;
  background: hsl(var(--human-1) / .08); border: 1px solid hsl(var(--human-1) / .3);
}
.joinform button { max-width: 16rem; }
.after-signup { max-width: 30rem; margin: 1rem auto 0; font-size: .9rem; color: hsl(var(--muted-foreground)); }
.after-signup a { color: hsl(var(--machine-2)); text-underline-offset: 2px; }
.dataline {
  margin: 0 0 1.1rem; font-size: .82rem; line-height: 1.55;
  color: hsl(var(--muted-foreground)); max-width: 42rem;
  padding-top: 1rem; border-top: 1px solid hsl(var(--border));
}