/* DAEMON Network — self-contained styles for network.daemongg.com.
 *
 * Identity rule: colour belongs to the creators, not to the chrome.
 * Every frame element here is cream-on-void, and the only hues on the page
 * come from each creator's own --tint. That is what separates this subsite
 * from the hub, which owns the brand orange — and it is why there is no
 * --accent token any more. Introducing one would put the brand back in
 * competition with the people the page exists to show. */

@font-face {
  font-family: 'Big Shoulders Display';
  src: url('/fonts/big-shoulders-display-900.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk-300.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Martian Mono';
  src: url('/fonts/martian-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Martian Mono';
  src: url('/fonts/martian-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  --surface-0: oklch(4% 0.006 45);
  --surface-1: oklch(8% 0.008 45);
  --surface-2: oklch(13% 0.01 45);
  --surface-border: oklch(20% 0.012 45);
  --surface-border-strong: oklch(30% 0.014 45);
  --ink-primary: oklch(93% 0.012 85);
  --ink-secondary: oklch(70% 0.014 75);
  --ink-tertiary: oklch(48% 0.014 70);
  /* Chrome is monochrome on purpose — see the note at the top of this file.
     --on-air is the one exception: a broadcast signal, not a brand colour. */
  --chrome: oklch(93% 0.012 85);
  --on-air: #FF3B30;
  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'Martian Mono', ui-monospace, monospace;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-section: clamp(4rem, 8vw, 7rem);
  --radius-sm: 2px;
  --radius-md: 4px;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
}

* {
  box-sizing: border-box;
}
html {
  color-scheme: dark;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--surface-0);
  color: var(--ink-primary);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Film grain, same as the main site */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

.container {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin: 0;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition:
    background-color 220ms var(--ease),
    border-color 220ms var(--ease),
    color 220ms var(--ease);
}
.btn--primary {
  background: var(--chrome);
  color: oklch(11% 0.02 45);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: #fff;
}
.btn--ghost {
  border-color: var(--surface-border-strong);
  color: var(--ink-primary);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--chrome);
  color: var(--chrome);
}

/* --- Top bar: mirrors the main site, but every link goes home --- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
}
.topbar__brand img {
  height: 34px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
}
.topbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.topbar__link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-tertiary);
  transition: color 220ms var(--ease);
}
.topbar__link:hover,
.topbar__link:focus-visible {
  color: var(--ink-primary);
}

/* --- Roster hero ---
   Deliberately small. The hub opens with a full-viewport display headline;
   if this page did the same it would just read as the hub again. Here the
   title is a caption on the roster, not a statement, so the faces arrive
   almost immediately. */
.net-hero {
  padding-block: var(--space-2xl) var(--space-lg);
}
.net-hero__title {
  margin-top: var(--space-2xs);
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  text-transform: uppercase;
  max-width: 18ch;
  line-height: 1.05;
}
.net-hero__lede {
  margin: var(--space-md) 0 0;
  max-width: 46ch;
  font-size: 1.02rem;
  color: var(--ink-secondary);
  line-height: 1.65;
}

/* --- Air state ---
   Two states from one block. Off-air is deliberately inert; on-air is the
   loudest thing on the page, because a network's headline news is that
   somebody is streaming right now.

   The markup ships off-air, since nothing here polls Twitch yet. To wire it
   up later, set data-air="live" on .live and fill .live__copy — no CSS
   change needed. Nothing fakes a live state in the meantime. */
.live {
  padding-bottom: var(--space-2xl);
}
.live__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  padding-block: var(--space-lg);
  border-block: 1px solid var(--surface-border);
  transition: border-color 300ms var(--ease);
}
.live__lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  flex-shrink: 0;
}
.live__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-tertiary);
}
.live__copy {
  flex: 1 1 24rem;
  margin: 0;
  color: var(--ink-secondary);
}

/* on-air */
.live[data-air='live'] .live__inner {
  border-color: color-mix(in oklch, var(--on-air) 45%, transparent);
}
.live[data-air='live'] .live__lockup {
  color: var(--on-air);
}
.live[data-air='live'] .live__dot {
  background: var(--on-air);
  animation: air-pulse 1.8s var(--ease) infinite;
}
.live[data-air='live'] .live__copy {
  color: var(--ink-primary);
}
@keyframes air-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--on-air) 70%, transparent);
  }
  70% {
    box-shadow: 0 0 0 7px transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .live[data-air='live'] .live__dot {
    animation: none;
  }
}

/* --- The wall -------------------------------------------------------------
   A browse surface, not a roster. Each creator gets a full-bleed tile
   carrying their own art, their own tint on the frame, and a channel badge.
   The chrome stays cream-on-void so the only colour in the grid is theirs. */
.wall-sec {
  padding-bottom: var(--space-section);
}
.wall-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--surface-border);
}
.wall-count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

.wall {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: 1fr;
}
/* The flagship spans the full row, which both gives the home channel a
   feature banner and makes the tiles divide evenly: 3 + 6 singles = 9 cells
   across 3 columns, and 2 + 6 = 8 across 2. No orphan row either way. */
@media (min-width: 40rem) {
  .wall {
    grid-template-columns: repeat(2, 1fr);
  }
  .channel--flagship {
    grid-column: 1 / -1;
  }
}
@media (min-width: 64rem) {
  .wall {
    grid-template-columns: repeat(3, 1fr);
  }
}

.channel {
  position: relative;
}
.channel__link {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--surface-border);
  background: var(--surface-1);
  text-decoration: none;
  color: var(--ink-primary);
  transition:
    border-color 260ms var(--ease),
    transform 320ms var(--ease),
    box-shadow 320ms var(--ease);
}
.channel--flagship .channel__link {
  aspect-ratio: 12 / 4;
}
@media (max-width: 40rem) {
  .channel__link,
  .channel--flagship .channel__link {
    aspect-ratio: 3 / 2;
  }
}
.channel__link:hover,
.channel__link:focus-visible {
  border-color: var(--tint);
  transform: translateY(-3px);
  box-shadow: 0 26px 60px -34px color-mix(in oklch, var(--tint) 85%, transparent);
}

.channel__art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in oklch, var(--tint) 20%, transparent), transparent 70%),
    var(--surface-1);
}
.channel__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 620ms var(--ease);
}
.channel__link:hover .channel__art img {
  transform: scale(1.05);
}
/* The eye is a mark, not a photo — let it sit rather than fill the frame. */
.channel__eye {
  width: 46% !important;
  height: auto !important;
  object-fit: contain !important;
}
.channel__link:hover .channel__eye {
  transform: scale(1.04);
}
.channel__mono {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.5rem, 9vw, 6rem);
  line-height: 1;
  color: color-mix(in oklch, var(--tint) 70%, transparent);
}

/* Scrim so the name stays legible over any artwork. */
.channel__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--surface-0) 4%, color-mix(in oklch, var(--surface-0) 55%, transparent) 34%, transparent 62%),
    linear-gradient(to top, color-mix(in oklch, var(--tint) 22%, transparent), transparent 45%);
}

.channel__meta {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 0.15rem;
  padding: var(--space-md);
}
.channel__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  justify-self: start;
  margin-bottom: var(--space-2xs);
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-0) 78%, transparent);
  border: 1px solid var(--surface-border-strong);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.channel__badge i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
/* Live tiles jump the queue visually — set data-air="live" on .channel. */
.channel[data-air='live'] .channel__badge {
  color: var(--on-air);
  border-color: color-mix(in oklch, var(--on-air) 55%, transparent);
}

.channel__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  line-height: 1;
  text-transform: uppercase;
}
.channel--flagship .channel__name {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
}
.channel__role {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--tint) 78%, var(--ink-secondary));
}

/* --- Creator page -----------------------------------------------------------
   Rebuilt to match the wall. It used to open with a small circular avatar and
   then hand over most of the page to an empty striped box captioned "Coming
   through" — a placeholder for feeds a static site can never fetch. With only
   one channel that box stretched the full width and the page read as broken.

   So: the same banner language as the wall tile, then the creator's actual
   channels as links. Nothing here pretends to be a feed. */
.creator {
  position: relative;
  overflow: clip;
}
.creator__glow {
  position: absolute;
  top: -20%;
  left: 50%;
  width: min(70rem, 120vw);
  aspect-ratio: 1;
  translate: -50% 0;
  background: radial-gradient(circle, color-mix(in oklch, var(--tint) 18%, transparent), transparent 62%);
  pointer-events: none;
}

.cr-back {
  display: inline-block;
  margin-block: var(--space-lg) var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  text-decoration: none;
  transition: color 200ms var(--ease);
}
.cr-back:hover,
.cr-back:focus-visible {
  color: var(--chrome);
}

/* Banner — the wall tile, opened out. */
.cr-banner {
  position: relative;
  aspect-ratio: 12 / 4;
  min-height: 15rem;
  overflow: hidden;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}
@media (max-width: 40rem) {
  .cr-banner {
    aspect-ratio: 3 / 2;
  }
}
.cr-banner__art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in oklch, var(--tint) 22%, transparent), transparent 70%),
    var(--surface-1);
}
/* Blurred backdrop built from the creator's own mark — colour without a crop. */
.cr-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(46px) saturate(1.35);
  opacity: 0.45;
  transform: scale(1.25);
}
/* The mark itself, whole. */
.cr-banner__mark {
  position: absolute;
  right: 7%;
  top: 50%;
  translate: 0 -50%;
  height: 70%;
  width: auto;
  max-width: 42%;
  object-fit: contain;
  /* The avatars are square PNGs with their own dark grounds, so without a
     radius and a ring they read as artwork pasted onto the banner. */
  border-radius: var(--radius-md);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--tint) 40%, transparent),
    0 18px 40px -22px #000;
}
/* The eye is a transparent mark, not a tile — no plate behind it. */
.cr-banner__mark--eye {
  border-radius: 0;
  box-shadow: none;
}
.cr-banner__mark--eye {
  height: 52%;
}
@media (max-width: 40rem) {
  .cr-banner__mark {
    right: 50%;
    top: 34%;
    translate: 50% -50%;
    height: 46%;
    max-width: 62%;
  }
}
.cr-banner__mono {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: 1;
  color: color-mix(in oklch, var(--tint) 70%, transparent);
}
.cr-banner__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--surface-0) 6%, color-mix(in oklch, var(--surface-0) 60%, transparent) 40%, transparent 70%),
    linear-gradient(to top, color-mix(in oklch, var(--tint) 20%, transparent), transparent 50%);
}
.cr-banner__meta {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 0.2rem;
  padding: var(--space-md);
}
.cr-banner__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  justify-self: start;
  margin-bottom: var(--space-2xs);
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-0) 78%, transparent);
  border: 1px solid var(--surface-border-strong);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.cr-banner__badge i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.cr-banner__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.6rem);
  line-height: 1;
  text-transform: uppercase;
}
.cr-banner__role {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--tint) 78%, var(--ink-secondary));
}

.cr-bio {
  margin: var(--space-xl) 0 0;
  max-width: 54ch;
  font-size: 1.05rem;
  color: var(--ink-secondary);
  line-height: 1.7;
}

/* Channels — real links, not feed placeholders. */
.cr-channels {
  padding-block: var(--space-xl) var(--space-section);
}
.cr-channels__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--surface-border);
}
.cr-channels__count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.cr-channels__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.ch {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  text-decoration: none;
  color: var(--ink-primary);
  transition:
    border-color 220ms var(--ease),
    transform 220ms var(--ease);
}
.ch:hover,
.ch:focus-visible {
  border-color: var(--tint);
  transform: translateY(-2px);
}
.ch__plat {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ch__handle {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  color: var(--ink-tertiary);
}
.ch__go {
  color: var(--tint);
  font-family: var(--font-mono);
}

/* Empty state for a creator whose handles aren't confirmed yet. */
.ch-pending {
  margin: 0;
  padding: var(--space-md);
  border: 1px dashed var(--surface-border-strong);
  border-radius: var(--radius-md);
  color: var(--ink-secondary);
  max-width: 52ch;
}
.ch-pending a {
  color: var(--tint);
}

.cr-note {
  margin: var(--space-lg) 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-tertiary);
}


/* --- Footer --- */
.site-footer {
  padding-block: var(--space-xl) var(--space-lg);
  border-top: 1px solid var(--surface-border);
}
.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__links a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-secondary);
  transition: color 220ms var(--ease);
}
.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--chrome);
}
.site-footer__meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-tertiary);
  margin: 0;
}

/* --- Reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms var(--ease),
    transform 700ms var(--ease);
}
.reveal.on {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}