/* hellswarm.net: the Hell Swarm company page.
   Identity source: agents/art/style-registry/ironveil/hell-swarm-3d-identity.md (the world: charred black,
   crimson sky, light that means something) and the game's own title screen tokens (engine-3d/index.html,
   Art proposal 2026-05-27: hell-red slab title, blood moon, white serif menu, gold resource, ember hairline).
   The Millrace sheet uses Millrace's own palette (products/millrace/art/palette.json: paper, ink, water, raider). */

@font-face {
  font-family: "Roboto Slab";
  src: url("assets/fonts/roboto-slab-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #08060a;
  --ink: #ece6e6;
  --ink-dim: #a39696;
  --red: #ff0d0d;
  --red-2: #ff2a2a;
  --red-deep: #7a1212;
  --gold: #ffd34d;
  --edge: #5a1414;
  --lava: #ff4500;
  --ember: #ff7a24;
  --panel: linear-gradient(180deg, rgba(28, 10, 10, 0.92), rgba(10, 4, 5, 0.94));
  --depth: 0 10px 28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 120, 80, 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
  --serif: "Rockwell", "Roboto Slab", "Bitter", Georgia, serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Millrace */
  --paper: #e7dcc4;
  --paper-2: #dfcbaf;
  --m-ink: #2e2116;
  --m-soft: #6b5540;
  --m-rule: #b8a583;
  --water-deep: #0b6f80;
  --water: #149fb2;
  --crest: #68dae7;
  --raider: #9c2a24;
  --gutter: clamp(16px, 4vw, 40px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* The page field: the game's sky, laid down the WHOLE document (not pinned to the viewport). Crimson horizon
   under the title, lava heat by Hell Swarm, deep water and raider red by Millrace, smoke to the footer. */
body {
  margin: 0;
  color: var(--ink);
  font-family: "Rockwell", "Roboto Slab", "Bitter", Georgia, serif; /* = --serif, written out for tools that do not resolve var() */
  font-size: 17px; line-height: 1.5; font-weight: 400;
  background:
    radial-gradient(55% 9% at 22% 3%, rgba(58, 12, 16, 0.55), rgba(58, 12, 16, 0) 74%),
    radial-gradient(50% 9% at 80% 9%, rgba(70, 14, 14, 0.50), rgba(70, 14, 14, 0) 74%),
    radial-gradient(70% 11% at 50% 21%, rgba(110, 29, 16, 0.80), rgba(110, 29, 16, 0) 74%),
    radial-gradient(45% 10% at 12% 28%, rgba(122, 18, 18, 0.55), rgba(122, 18, 18, 0) 74%),
    radial-gradient(45% 10% at 88% 31%, rgba(150, 40, 10, 0.45), rgba(150, 40, 10, 0) 74%),
    radial-gradient(50% 10% at 30% 39%, rgba(160, 48, 12, 0.42), rgba(160, 48, 12, 0) 74%),
    radial-gradient(45% 9% at 76% 45%, rgba(122, 18, 18, 0.50), rgba(122, 18, 18, 0) 74%),
    radial-gradient(50% 9% at 18% 52%, rgba(96, 16, 20, 0.45), rgba(96, 16, 20, 0) 74%),
    radial-gradient(45% 9% at 88% 58%, rgba(80, 18, 24, 0.40), rgba(80, 18, 24, 0) 74%),
    radial-gradient(50% 10% at 8% 66%, rgba(11, 88, 102, 0.42), rgba(11, 88, 102, 0) 74%),
    radial-gradient(50% 10% at 94% 72%, rgba(11, 100, 116, 0.44), rgba(11, 100, 116, 0) 74%),
    radial-gradient(45% 9% at 16% 80%, rgba(156, 42, 36, 0.36), rgba(156, 42, 36, 0) 74%),
    radial-gradient(50% 9% at 84% 86%, rgba(20, 70, 84, 0.34), rgba(20, 70, 84, 0) 74%),
    radial-gradient(70% 10% at 50% 99%, rgba(110, 29, 16, 0.60), rgba(110, 29, 16, 0) 74%),
    linear-gradient(180deg, #0a0206 0%, #120505 30%, #0c0506 60%, #070709 85%, #0a0305 100%);
  min-height: 100vh;
  overflow-x: clip;
}

/* palette-reactive-background (playground 12.6): a bias light that belongs to whichever section is in front
   of you. Three authored colours per section, interpolated on scroll. Painted by site.js; static floor here. */
.field {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(68% 68% at 18% 22%, rgba(110, 29, 16, 0.35), rgba(0, 0, 0, 0) 70%),
    radial-gradient(68% 68% at 82% 78%, rgba(42, 10, 10, 0.45), rgba(0, 0, 0, 0) 70%);
}
.top, main, .foot { position: relative; z-index: 1; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50; padding: 12px 16px; min-height: 44px;
  background: #140303; color: #ffdede; border: 1px solid var(--red); border-radius: 4px; text-decoration: none;
}
.skip:focus { top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- header ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px var(--gutter);
  position: absolute; top: 0; left: 0; right: 0;
}
.top-mark {
  font-weight: 800; font-size: 18px; letter-spacing: 0.04em; color: var(--red-2); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}
.top-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.top-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 4px;
  font-weight: 700; font-size: 15px; letter-spacing: 0.02em; text-decoration: none; color: var(--ink);
  transition: color .12s ease, text-shadow .12s ease;
}
.top-nav a:hover { color: var(--red-2); text-shadow: 0 0 14px rgba(255, 20, 20, 0.5); }

/* ---------- hero: the title screen ---------- */
.hero {
  position: relative; min-height: 86vh; min-height: 86svh; display: grid; place-items: center;
  padding: 104px var(--gutter) 72px; overflow: hidden; isolation: isolate;
}
.embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-inner { width: min(1100px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; }

.titleblock { position: relative; width: 100%; user-select: none; }
.title {
  position: relative; z-index: 1; margin: 0; line-height: 0.92; font-weight: 800;
  /* fluid-type-clamp-floor (playground M.3): the 14vw term stays live down to a 297px viewport, so the
     floor (2.6rem) never becomes what a phone renders; measured: fits 320px with room. */
  font-size: clamp(2.6rem, 14vw, 9.5rem);
  letter-spacing: 0.01em; color: var(--red); text-shadow: 0 0 24px rgba(255, 18, 18, 0.4);
}
.title.reflection {
  z-index: 0; transform: scaleY(-1); margin-top: 0.36em; color: #5a0808; text-shadow: none; opacity: 0.55;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 80%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 80%);
}
/* the blood moon, from the game's home screen: an opaque disc under a dimmed crimson face, risen between
   the title and its reflection */
.moon {
  position: absolute; left: 50%; top: 62%; z-index: 2; pointer-events: none;
  width: clamp(64px, 11vw, 136px); aspect-ratio: 1; border-radius: 50%; background: #000;
  box-shadow: 0 0 60px 18px rgba(110, 0, 0, 0.16);
  transform: translate(-50%, -50%);
}
.moon-face {
  position: absolute; inset: 0; border-radius: 50%; opacity: 0.5;
  background:
    radial-gradient(ellipse 27% 21% at 35% 33%, rgba(8, 0, 0, 0.55), transparent 72%),
    radial-gradient(ellipse 20% 22% at 60% 38%, rgba(9, 0, 0, 0.50), transparent 73%),
    radial-gradient(ellipse 15% 15% at 68% 52%, rgba(8, 0, 0, 0.50), transparent 72%),
    radial-gradient(ellipse 9% 11% at 81% 41%, rgba(7, 0, 0, 0.55), transparent 70%),
    radial-gradient(ellipse 22% 26% at 30% 61%, rgba(8, 0, 0, 0.45), transparent 74%),
    radial-gradient(ellipse 15% 13% at 45% 75%, rgba(8, 0, 0, 0.45), transparent 73%),
    radial-gradient(circle at 52% 22%, rgba(6, 0, 0, 0.5) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 71% 71%, rgba(6, 0, 0, 0.45) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 38%, #6e0e0e, #4a0404 50%, #2a0000 78%, #0e0000 100%);
  box-shadow: inset -12px -14px 30px rgba(0, 0, 0, 0.6);
}
.lede {
  margin: -0.4em 0 0; font-size: clamp(16px, 1.9vw, 20px); font-weight: 700; letter-spacing: 0.08em;
  color: var(--ink-dim); position: relative; z-index: 3;
}

/* the game menu, but the entries are games */
.menu { margin-top: clamp(28px, 5vh, 56px); width: 100%; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.menu-item {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 14px;
  min-height: 56px; min-width: min(360px, 100%); padding: 8px 20px; text-decoration: none; color: #fff; border-radius: 6px;
  transition: color .12s ease, text-shadow .12s ease, background-color .12s ease;
}
.mi-name { font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; letter-spacing: 0.02em; line-height: 1.1; }
.mi-play {
  font: 700 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--edge); border-radius: 3px; padding: 5px 7px; background: rgba(10, 4, 4, 0.6);
  transform: translateY(-4px);
}
.mi-kind { order: 3; flex-basis: 100%; text-align: center; font-size: 14px; color: var(--ink-dim); letter-spacing: 0.03em; }
.menu-item:hover, .menu-item:focus-visible { color: var(--red-2); text-shadow: 0 0 16px rgba(255, 20, 20, 0.55); }
.menu-item:hover .mi-play, .menu-item:focus-visible .mi-play { border-color: var(--red); color: #ffdede; }

/* ---------- Hell Swarm: the game ---------- */
.game-hs {
  width: min(1240px, 100%); margin: 0 auto; padding: clamp(56px, 9vw, 120px) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: center;
}
.hs-shot { margin: 0; min-width: 0; position: relative; }
.hs-shot img {
  display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--edge);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 80px rgba(255, 69, 0, 0.18);
}
.hs-shot::after {
  /* ember hairline along the bottom edge of the frame */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 122, 36, 0), rgba(255, 122, 36, 0.85), rgba(255, 122, 36, 0));
}
.hs-copy { min-width: 0; }
.eyebrow {
  margin: 0 0 10px; font: 700 13px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
}
.game-hs h2 {
  margin: 0 0 22px; font-size: clamp(40px, 5.4vw, 72px); line-height: 0.95; font-weight: 800; color: var(--red);
  text-shadow: 0 0 22px rgba(255, 18, 18, 0.35);
}
.beats { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.beats li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; font-size: 18px; line-height: 1.35; }
.beat-n {
  width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 50%;
  font: 700 12px/1 var(--mono); color: #1a0606; background: var(--gold); box-shadow: 0 0 12px rgba(255, 211, 77, 0.35);
}
.hs-sub { margin: 0 0 10px; font: 800 13px/1.3 var(--serif); letter-spacing: 0.12em; text-transform: uppercase; color: var(--red-2); }
.heroes { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.heroes li {
  padding: 8px 12px; border-radius: 6px; font-weight: 800; font-size: 15px; color: var(--ink);
  background: linear-gradient(#1a0606, #0b0202); border: 1px solid var(--edge); box-shadow: var(--depth);
}
.hs-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
  font: 700 17px/1 var(--serif); letter-spacing: 0.04em; text-decoration: none; color: #ffdede;
  background: linear-gradient(#2c0909, #140303); border: 1px solid var(--red); border-radius: 4px;
  box-shadow: var(--depth); transition: box-shadow .12s ease, color .12s ease, background .12s ease;
}
.cta:hover { color: #fff; background: linear-gradient(#3a0c0c, #1a0303); box-shadow: 0 0 18px rgba(255, 30, 30, 0.4), var(--depth); }
.cta:active { transform: translateY(1px); }
.spec { font: 700 12px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }

/* ---------- Millrace: an estate-map sheet laid on the table ---------- */
.game-mr { padding: clamp(24px, 5vw, 64px) var(--gutter) clamp(72px, 10vw, 128px); }
.sheet {
  position: relative; width: min(1120px, 100%); margin: 0 auto; color: var(--m-ink);
  background: var(--paper); border-radius: 4px; padding: clamp(20px, 3.4vw, 40px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  font-family: var(--sans);
}
.sheet::before {
  /* the map plate's double rule */
  content: ""; position: absolute; inset: 10px; border: 1px solid var(--m-rule); border-radius: 2px; pointer-events: none;
}
.sheet-head {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 40px; align-items: end;
  margin-bottom: clamp(18px, 3vw, 30px);
}
.sheet-title { min-width: 0; }
.game-mr .eyebrow { color: var(--m-soft); font-family: var(--sans); letter-spacing: 0.12em; }
.game-mr h2 {
  margin: 0 0 18px; font: 800 clamp(40px, 5vw, 64px)/0.95 var(--sans); letter-spacing: -0.01em; color: var(--m-ink);
}
.cta-ink {
  font-family: var(--sans); color: var(--paper); background: var(--m-ink); border-color: var(--m-ink);
  box-shadow: 0 6px 16px rgba(46, 33, 22, 0.25);
}
.cta-ink:hover { color: #fff; background: #3d2c1e; box-shadow: 0 0 0 3px rgba(20, 159, 178, 0.35), 0 6px 16px rgba(46, 33, 22, 0.3); }
.game-mr :focus-visible { outline-color: var(--water-deep); }

/* chart-line-draw (playground 12.3): the race pays out from the river head to the walls as the sheet
   arrives. The dash gap IS the undrawn part; the dashed ghost below is the channel still dry. */
.chain { min-width: 0; }
.race { display: block; width: 100%; height: auto; overflow: visible; }
.race path { fill: none; stroke-linejoin: round; }
.race-ghost { stroke: var(--m-rule); stroke-width: 1.6; stroke-dasharray: 4 5; }
.race-water { stroke: var(--water); stroke-width: 5; stroke-linecap: round; }
.race-crest { stroke: var(--crest); stroke-width: 1.6; stroke-dasharray: 6 9; opacity: 0; }
.chain.flowing .race-crest { opacity: 1; animation: race-flow 1.4s linear infinite; }
@keyframes race-flow { to { stroke-dashoffset: -30; } }
.stations { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; }
.stations li {
  font: 800 13px/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-ink);
  transition: color .25s ease;
}
.js.anim .stations li:not(.wet) { color: var(--m-soft); }
.stations li.wet { color: var(--m-ink); }

.map { position: relative; margin: 0; }
.map img { display: block; width: 100%; height: auto; border: 1px solid var(--m-ink); border-radius: 2px; }

.legend {
  position: relative; list-style: none; margin: clamp(18px, 3vw, 28px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 24px;
}
.legend li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 10px; font-size: 16px; line-height: 1.35; color: var(--m-ink); }
.key { display: block; width: 30px; height: 20px; margin-top: 1px; }
.key-hill { background: linear-gradient(180deg, #dfcbaf 0 33%, #cbb48f 33% 66%, #a8926c 66%); border: 1px solid var(--m-ink); border-radius: 2px; }
.key-bell { background: radial-gradient(circle at 50% 55%, var(--raider) 0 5px, transparent 6px); }
.key-water { background: linear-gradient(var(--water), var(--water)) center / 100% 5px no-repeat; border-radius: 3px; }
.key-gate { background: linear-gradient(90deg, var(--m-ink) 0 6px, transparent 6px 24px, var(--m-ink) 24px) center / 100% 14px no-repeat; }

/* ---------- footer ---------- */
.foot { padding: 56px var(--gutter) 40px; border-top: 1px solid rgba(90, 20, 20, 0.6); }
.foot-inner { width: min(1240px, 100%); margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 4px 28px; align-items: baseline; }
.foot-mark { margin: 0; font-weight: 800; font-size: 28px; color: var(--red); }
.foot-co { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-dim); }
.foot-links { grid-column: 1 / -1; list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.foot-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; margin-left: -10px; margin-right: 10px;
  font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; border-radius: 4px;
}
.foot-links a:hover { color: var(--red-2); }
.foot-copy { grid-column: 1 / -1; margin: 14px 0 0; font: 12px/1.4 var(--mono); color: var(--ink-dim); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .game-hs { grid-template-columns: minmax(0, 1fr); }
  .sheet-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .top-mark { font-size: 16px; }
  .top-nav a { padding: 0 8px; font-size: 14px; }
  .hero { padding: 92px var(--gutter) 40px; min-height: 0; }
  .menu-item { padding: 8px 12px; }
  .beats li { font-size: 17px; }
  .legend { grid-template-columns: minmax(0, 1fr); }
  .stations li { font-size: 11px; letter-spacing: 0.06em; }
  .foot-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .chain.flowing .race-crest { animation: none; }
  .cta, .menu-item, .top-nav a { transition: none; }
}