/* Cranium front page. Same warm neutrals as the Brainpower portal so the family reads as one,
   with a zombie-green accent. Colours are tokens on :root; dark mode redefines them below.
   Every word on the site is lowercase (text-transform on html), so new copy follows suit. */
:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface-1: #fcfcfb;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --grid: #e1e0d9;
  --border: rgba(11, 11, 11, 0.10);
  --accent: #3d8a26;
  --accent-ink: #ffffff;
  --accent-soft: rgba(61, 138, 38, 0.12);
  --shadow: rgba(0, 0, 0, 0.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d0d0d; --surface-1: #1a1a19;
    --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781;
    --grid: #2c2c2a; --border: rgba(255, 255, 255, 0.10);
    --accent: #8fe05a; --accent-ink: #0d0d0d; --accent-soft: rgba(143, 224, 90, 0.16);
    --shadow: rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface-1: #1a1a19;
  --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781;
  --grid: #2c2c2a; --border: rgba(255, 255, 255, 0.10);
  --accent: #8fe05a; --accent-ink: #0d0d0d; --accent-soft: rgba(143, 224, 90, 0.16);
  --shadow: rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; text-transform: lowercase; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--text-muted); }
.grow { flex: 1; }

/* the iris: a black sheet over the page with a hole that animate.js opens from the centre on
   every load. The keyframe is the safety net: with JavaScript off or the libraries missing the
   sheet still leaves after 2.5 s, and readers who asked for reduced motion never see it. */
#iris { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1000; pointer-events: none; display: block; animation: iris-off 0.01s 2.5s forwards; }
@keyframes iris-off { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { #iris { display: none; } }

/* header */
.site-header { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 18px 0 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand .mark { width: 40px; height: 40px; display: block; }
.brand .name { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.site-header nav { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.site-header nav a { color: var(--text-secondary); text-decoration: none; padding: 6px 10px; border-radius: 6px; font-size: 14px; }
.site-header nav a:hover { background: var(--grid); color: var(--text-primary); }
#theme { width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-1); color: var(--text-secondary); cursor: pointer; display: inline-grid; place-items: center; }
#theme:hover { color: var(--text-primary); background: var(--grid); }
#theme svg { width: 16px; height: 16px; }
#theme .sun { display: none; }
:root[data-theme="dark"] #theme .sun { display: block; }
:root[data-theme="dark"] #theme .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #theme .sun { display: block; }
  :root:not([data-theme="light"]) #theme .moon { display: none; }
}

/* the splash: the header and hero sit on the horde photo, which is dark in both themes,
   so the band carries its own (dark) tokens and fades into the page colour at its foot.
   The photo is its own layer (.hero-bg, taller than the band so it can drift without
   showing an edge) so animate.js can move it independently of the copy. */
.hero-band {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(92vh, 960px); display: flex;
  color: #f3f2ee;
  --text-primary: #ffffff; --text-secondary: #d6d4cc; --text-muted: #a9a79f;
  --grid: rgba(255, 255, 255, 0.12); --border: rgba(255, 255, 255, 0.22); --surface-1: rgba(13, 13, 13, 0.45);
  --accent: #8fe05a; --accent-ink: #0d0d0d; --accent-soft: rgba(143, 224, 90, 0.16);
  background: #0b0c0e;
}
.hero-bg {
  position: absolute; left: 0; right: 0; top: -30%; bottom: 0; z-index: -3;
  background: url(img/hands-1600.webp) center bottom / cover no-repeat; will-change: transform;
}
@media (max-width: 700px) { .hero-bg { background-image: url(img/hands-900.webp); background-position: 42% bottom; } }
@media (min-width: 1700px) { .hero-bg { background-image: url(img/hands-2400.webp); } }
.fog {
  position: absolute; z-index: -2; pointer-events: none; opacity: 0.22; width: 90%; height: 60%;
  background: radial-gradient(ellipse at center, rgba(220, 225, 230, 0.55), rgba(220, 225, 230, 0) 65%);
  filter: blur(30px); will-change: transform, opacity;
}
.fog-a { left: -25%; bottom: -10%; }
.fog-b { right: -30%; bottom: 5%; width: 80%; height: 50%; }
.hero-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.15) 30%, rgba(0, 0, 0, 0) 55%, var(--page) 100%);
}
.hero-band > .wrap { display: flex; flex-direction: column; width: 100%; }
.hero-band .site-header nav a:hover { background: var(--grid); }

/* hero: the skull reveal above the tagline, centred in the sky above the hands */
.hero { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 0 44vh; position: relative; }
.hero h1 .word { display: inline-block; white-space: nowrap; }
.hero h1 .ch { display: inline-block; }
.scroll-cue { position: absolute; left: 50%; bottom: 14vh; transform: translateX(-50%); color: rgba(255, 255, 255, 0.7); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.25); }
.scroll-cue svg { width: 20px; height: 20px; }
.scroll-cue:hover { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.hero-copy { max-width: 720px; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.6); }
/* no drop-shadow filter on the mark: Chromium paints a box around an animated GIF under one
   (seen 2026-09-30), so the glow behind the skull is a radial gradient instead */
.hero-art { position: relative; }
.hero-art::before { content: ""; position: absolute; inset: -20% -30%; z-index: -1; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); }
.hero-art img { display: block; position: relative; width: 150px; height: 150px; margin: 0 auto 8px; }
@media (min-width: 720px) {
  .hero { padding: 36px 0 40vh; }
  .hero-art img { width: 220px; height: 220px; }
}
.eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--accent); }
.hero h1 { font-size: clamp(40px, 7vw, 76px); line-height: 1; margin: 0 0 16px; letter-spacing: -0.03em; font-weight: 800; }
.hero .lead { font-size: 18px; line-height: 1.55; color: var(--text-secondary); margin: 0 auto 24px; max-width: 600px; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.cta a, .links a {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 10px 16px; border-radius: 8px;
  font-weight: 600; font-size: 15px; border: 1px solid var(--border); color: var(--text-primary); background: var(--surface-1);
  text-shadow: none;
}
.cta a:hover, .links a:hover { background: var(--grid); }
.cta a.primary, .links a.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cta a.primary:hover, .links a.primary:hover { filter: brightness(1.08); background: var(--accent); }

/* the compact band (support): shorter, copy left-aligned, no skull */
.hero-band.compact { min-height: min(64vh, 640px); }
.hero-band.compact .hero { align-items: flex-start; text-align: left; padding: 40px 0 16vh; }
.hero-band.compact .hero .cta { justify-content: flex-start; }
.hero-band.compact .hero .lead { margin-left: 0; }
.hero-band.compact .hero h1 { font-size: clamp(36px, 5.5vw, 60px); }
.section.first { border-top: 0; padding-top: 24px; }

/* plain hero for the 404 page: no photo, left-aligned */
.hero.plain { align-items: flex-start; text-align: left; padding: 40px 0 8px; }
.hero.plain .hero-copy { text-shadow: none; }
.hero.plain .cta { justify-content: flex-start; }
.hero.plain .lead { margin-left: 0; }
.hero.plain h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; }

/* prose pages (support) */
.prose { max-width: 720px; color: var(--text-secondary); line-height: 1.6; }
.prose p { margin: 0 0 12px; }
.prose ul { padding-left: 20px; margin: 0 0 12px; }
.prose li { margin: 6px 0; }
.prose b { color: var(--text-primary); font-weight: 600; }

/* sections */
.section { padding: 32px 0; border-top: 1px solid var(--border); }
#products { border-top: 0; padding-top: 24px; }
.section h2 { font-size: 13px; letter-spacing: .12em; color: var(--text-muted); margin: 0 0 20px; font-weight: 600; }

/* project cards */
.projects { display: grid; gap: 18px; }
.project {
  display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; padding: 22px;
}
@media (min-width: 880px) { .project { grid-template-columns: 5fr 7fr; gap: 32px; padding: 28px; } }
.project .head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.project .icon { width: 48px; height: 48px; border-radius: 11px; flex: none; }
.project h3 { font-size: 24px; margin: 0; line-height: 1.15; }
.project .tagline { color: var(--text-secondary); margin: 2px 0 0; font-size: 14px; }
.project p.summary { color: var(--text-secondary); line-height: 1.55; margin: 0 0 14px; }
.project .facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 13px; color: var(--text-muted); }
.project .facts b { color: var(--text-secondary); font-weight: 600; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--accent-soft); color: var(--accent); }
.badge.soon { background: var(--grid); color: var(--text-secondary); }
.badge.free { background: var(--accent); color: var(--accent-ink); }
.links { display: flex; flex-wrap: wrap; gap: 8px; }
.links a { padding: 8px 14px; font-size: 14px; }
.shot-wrap { overflow: hidden; border-radius: 12px; }
.shot { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); box-shadow: 0 18px 50px var(--shadow); }
.project.soon { grid-template-columns: 1fr; border-style: dashed; background: transparent; }
.project.soon p { color: var(--text-secondary); margin: 0; }

/* footer */
.site-footer { border-top: 1px solid var(--border); margin-top: 40px; padding: 22px 0 36px; color: var(--text-muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.site-footer a { color: var(--text-secondary); }