/* cadaclysm.blitter.studio — palette from assets/logo/README.md. Blue belongs to the
   discharge, the links and one button; the graphite is never anything else. */
@font-face {
  font-family: "Quantico";
  src: url("font/Quantico-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
:root {
  --bg: #1C1B1A; --fg: #F1EFE8; --muted: #B4B2A9; --rule: #3A3937;
  --blue: #378ADD; --core: #E6F1FB;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --display: "Quantico", "Arial Narrow", sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.55 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: #6FAAE8; text-decoration: underline; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin: 0; line-height: 1.1; }
h1 { font-size: clamp(34px, 5vw, 64px); }
h2 { font-size: clamp(26px, 3vw, 36px); }
h3 { font-size: 22px; }
p { margin: 0; }
.wrap { max-width: 1248px; margin: 0 auto; padding-inline: 16px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* Header */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 28px; }
.nav .brand { display: flex; align-items: center; gap: 14px; color: var(--fg); font-family: var(--display); font-weight: 700; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: 0.06em; }
.nav .brand img { width: clamp(52px, 4vw, 60px); height: clamp(52px, 4vw, 60px); }
.nav .links { display: flex; gap: 28px; flex-wrap: wrap; font-size: 15px; }
.nav .links a { color: var(--muted); }
.nav .links a[aria-current] { color: var(--fg); }
/* Game Engines opens a list of the engine pages on hover or keyboard focus -- CSS
   only, as the site has no script. A touch screen follows the link to the hub page,
   which lists the same four. */
.nav .menu { position: relative; }
.nav .menu > a::after { content: " ▾"; font-size: 0.8em; }
.nav .submenu { display: none; position: absolute; top: 100%; left: -18px; z-index: 10; flex-direction: column; min-width: 280px; padding: 10px 0; background: var(--bg); border: 1px solid var(--rule); }
.nav .menu:hover .submenu, .nav .menu:focus-within .submenu { display: flex; }
.nav .submenu a { padding: 8px 18px; white-space: nowrap; }
.nav .submenu a:hover { color: var(--fg); text-decoration: none; background: rgba(241,239,232,0.05); }
@media (hover: none) { .nav .menu:hover .submenu { display: none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--fg); color: var(--fg); }
.btn:hover { text-decoration: none; background: rgba(241,239,232,0.08); }
.btn-primary { background: var(--blue); border-color: var(--blue); color: var(--bg); }
.btn-primary:hover { background: #4E9AE3; color: var(--bg); }
.actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--bg); }
.hero .art { position: relative; width: 100%; height: min(56.25vw, 82vh); }
.hero .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,27,26,0.6) 0%, rgba(28,27,26,0) 28%, rgba(28,27,26,0) 50%, rgba(28,27,26,0.95) 100%); }
.hero .label { position: absolute; top: 24px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; color: var(--muted); z-index: 1; }
.hero .label.left { left: 16px; } .hero .label.right { right: 16px; }
.hero .copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; margin-top: -22vh; padding-bottom: 48px; max-width: 900px; }
.hero .copy p { font-size: clamp(17px, 1.5vw, 20px); max-width: 680px; }

/* Doors, badges, bands */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 72px; }
.door { display: flex; flex-direction: column; gap: 14px; padding: 36px 32px; border: 1px solid var(--rule); }
.door a { margin-top: auto; }
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tiers .door h3 { font-size: clamp(26px, 3vw, 36px); }
.tiers .door .per { font-family: var(--sans); font-weight: 400; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.tiers .door .btn { align-self: flex-start; margin-top: auto; }
.door.trial { border-color: var(--blue); gap: 18px; }
.door.trial .actions { margin-top: 6px; }
.badges { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 56px; }
.badge { font-family: var(--mono); font-size: 15px; padding: 10px 16px; border: 1px solid #5F5E5A; color: var(--fg); }
.badge:hover { border-color: var(--fg); text-decoration: none; }
.band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; margin-top: 96px; }
.band .text { display: flex; flex-direction: column; gap: 18px; }
.band img { border: 1px solid var(--rule); }
.band.flip img { order: 2; }

/* Datasheet pieces (subpages) */
.section { display: flex; flex-direction: column; gap: 24px; margin-top: 72px; }
.table-box { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 720px; }
th { text-align: left; font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0 12px 10px 0; border-bottom: 1px solid var(--fg); }
td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.fig { margin: 0; }
.fig img { border: 1px solid var(--rule); }
.fig figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; }
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }

/* Code: the filter language and the blacksmith's chains */
pre { margin: 0; padding: 16px 18px; font-family: var(--mono); font-size: 14px; line-height: 1.55; color: var(--fg); background: rgba(241,239,232,0.05); border: 1px solid var(--rule); overflow-x: auto; tab-size: 4; }
code { font-family: var(--mono); font-size: 0.92em; }
/* Syntax colours, written into the pages by scripts/www-highlight.py: keywords
   take the discharge blue, strings the core white, comments step back. */
.hl-k { color: var(--blue); }
.hl-s { color: var(--core); }
.hl-c { color: var(--muted); font-style: italic; }
.hl-n { color: #E8C070; }
.hl-f { color: #9CD3FF; }
p code, td code, li code { padding: 1px 5px; background: rgba(241,239,232,0.05); border: 1px solid var(--rule); }
.section ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
/* Numbered install steps on the engine pages: each step a paragraph, maybe a block. */
.section ol.steps { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 22px; max-width: 900px; }
.section ol.steps li > * + * { margin-top: 12px; }
.section ol.steps pre code { padding: 0; background: none; border: 0; } /* a block, not `li code` */
/* A work-in-progress page's one panel. */
.wip { display: flex; flex-direction: column; gap: 14px; padding: 36px 32px; border: 1px dashed var(--rule); max-width: 820px; }

/* Status, footer */
.status { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; margin-top: 96px; padding-top: 40px; border-top: 1px solid var(--rule); }
.status .text { display: flex; flex-direction: column; gap: 14px; }
.foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 72px; padding-block: 24px 48px; font-size: 14px; color: var(--muted); }

/* Examples: code on the left with CSS-only language tabs (a radio per language, the
   labels as the strip, the checked radio's pane shown by sibling selectors), the part
   on the right with its picture and its files. */
.example { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; padding: 28px; border: 1px solid var(--rule); }
.example .code { display: flex; flex-direction: column; min-width: 0; }
.example .code input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.example nav.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); }
.example .tabs label { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; padding: 8px 14px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.example .tabs label:hover { color: var(--fg); }
.example .pane { display: none; }
.example .pane pre { border-top: 0; min-height: 320px; }
.example .code input:nth-of-type(1):checked ~ .tabs label:nth-of-type(1),
.example .code input:nth-of-type(2):checked ~ .tabs label:nth-of-type(2),
.example .code input:nth-of-type(3):checked ~ .tabs label:nth-of-type(3),
.example .code input:nth-of-type(4):checked ~ .tabs label:nth-of-type(4),
.example .code input:nth-of-type(5):checked ~ .tabs label:nth-of-type(5),
.example .code input:nth-of-type(6):checked ~ .tabs label:nth-of-type(6),
.example .code input:nth-of-type(7):checked ~ .tabs label:nth-of-type(7),
.example .code input:nth-of-type(8):checked ~ .tabs label:nth-of-type(8) { color: var(--fg); border-bottom-color: var(--blue); }
.example .code input:nth-of-type(1):checked ~ .pane:nth-of-type(1),
.example .code input:nth-of-type(2):checked ~ .pane:nth-of-type(2),
.example .code input:nth-of-type(3):checked ~ .pane:nth-of-type(3),
.example .code input:nth-of-type(4):checked ~ .pane:nth-of-type(4),
.example .code input:nth-of-type(5):checked ~ .pane:nth-of-type(5),
.example .code input:nth-of-type(6):checked ~ .pane:nth-of-type(6),
.example .code input:nth-of-type(7):checked ~ .pane:nth-of-type(7),
.example .code input:nth-of-type(8):checked ~ .pane:nth-of-type(8) { display: block; }
.example .part { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.example .part img { border: 1px solid var(--rule); }
.example .part h3 { margin-top: -6px; }
.example .files { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.section .example + .example { margin-top: 32px; }

/* Docs (generated by scripts/www-docs.py): a language row under the title, a sticky
   contents column beside the reference, one .api block per call. */
.docs-intro { display: flex; flex-direction: column; gap: 12px; max-width: 820px; color: var(--muted); }
.docs-switch { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); }
.docs-switch a { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; padding: 8px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.docs-switch a:hover { color: var(--fg); text-decoration: none; }
.docs-switch a[aria-current] { color: var(--fg); border-bottom-color: var(--blue); }
.docs-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; margin-top: 40px; }
.docs-toc { position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; font-size: 14px; padding-right: 8px; }
.docs-toc a { color: var(--muted); padding: 3px 0; }
.docs-toc a:hover { color: var(--fg); text-decoration: none; }
.docs-toc .toc-h { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg); margin-top: 16px; padding-bottom: 4px; }
.docs-body > .section:first-child { margin-top: 0; }
.docs-body .section { gap: 18px; }
.docs-body h3.docs-h4 { font-size: 17px; margin-top: 8px; }
.api-group { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; margin-top: 8px; border-top: 1px solid var(--rule); scroll-margin-top: 16px; }
.api-group > h3 { font-size: 26px; }
.api { display: flex; flex-direction: column; gap: 10px; padding: 18px 0 6px; scroll-margin-top: 16px; }
.api + .api { border-top: 1px dashed var(--rule); }
.api h4 { margin: 0; font-size: 17px; font-weight: 600; }
.api h4 a { color: var(--fg); }
.api h4 code { font-size: 16px; overflow-wrap: anywhere; }
.docs-body p code, .docs-body li code, .docs-body h2 { overflow-wrap: anywhere; }
.api pre { font-size: 13.5px; padding: 12px 14px; }
.api p { max-width: 820px; }
.api-sub { margin: 24px 0 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.api .absent { color: var(--muted); font-style: italic; }
.api .absent::before { content: "Not in this wrapper. "; font-style: normal; color: #E8C070; }
.api .note { color: var(--muted); }
.api .only { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); border: 1px solid var(--blue); padding: 1px 6px; margin-left: 8px; vertical-align: middle; }
.docs-doors { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .docs-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* CSS-only tabs on the start page: the same radio trick as .example, for up to eight panes. */
.tabset { display: flex; flex-direction: column; min-width: 0; }
.tabset input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.tabset nav.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); }
.tabset .tabs label { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; padding: 8px 14px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabset .tabs label:hover { color: var(--fg); }
.tabset .pane { display: none; flex-direction: column; gap: 16px; padding-top: 20px; }
.tabset input:nth-of-type(1):checked ~ .tabs label:nth-of-type(1),
.tabset input:nth-of-type(2):checked ~ .tabs label:nth-of-type(2),
.tabset input:nth-of-type(3):checked ~ .tabs label:nth-of-type(3),
.tabset input:nth-of-type(4):checked ~ .tabs label:nth-of-type(4),
.tabset input:nth-of-type(5):checked ~ .tabs label:nth-of-type(5),
.tabset input:nth-of-type(6):checked ~ .tabs label:nth-of-type(6),
.tabset input:nth-of-type(7):checked ~ .tabs label:nth-of-type(7),
.tabset input:nth-of-type(8):checked ~ .tabs label:nth-of-type(8),
.tabset input:nth-of-type(9):checked ~ .tabs label:nth-of-type(9) { color: var(--fg); border-bottom-color: var(--blue); }
.tabset input:nth-of-type(1):checked ~ .pane:nth-of-type(1),
.tabset input:nth-of-type(2):checked ~ .pane:nth-of-type(2),
.tabset input:nth-of-type(3):checked ~ .pane:nth-of-type(3),
.tabset input:nth-of-type(4):checked ~ .pane:nth-of-type(4),
.tabset input:nth-of-type(5):checked ~ .pane:nth-of-type(5),
.tabset input:nth-of-type(6):checked ~ .pane:nth-of-type(6),
.tabset input:nth-of-type(7):checked ~ .pane:nth-of-type(7),
.tabset input:nth-of-type(8):checked ~ .pane:nth-of-type(8),
.tabset input:nth-of-type(9):checked ~ .pane:nth-of-type(9) { display: flex; }
.tabset input:focus-visible ~ .tabs label { outline-offset: -2px; }

@media (max-width: 800px) {
  .doors, .band, .figs, .status, .tiers, .example, .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .docs-toc { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
  .docs-toc .toc-h { width: 100%; margin-top: 8px; }
  .example { padding: 18px; }
  .band { gap: 24px; margin-top: 64px; }
  .band.flip img { order: 0; }
  .hero .copy { margin-top: 24px; }
  .nav .links { gap: 18px; }
}