/* NULD website: the launcher's palette and type (the canvas "NULD — identidad"). Fonts are served from fonts/
   (SIL OFL 1.1, licences beside them), nothing is loaded from other sites but GitHub's API (release.js). */
@font-face { font-family: Archivo; src: url(fonts/archivo.woff2) format("woff2"); font-weight: 400 800; font-stretch: 100% 125%; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Michroma; src: url(fonts/michroma.woff2) format("woff2"); font-display: swap; }

:root {
  --bg: #06070A; --panel: #0C0E12; --steel: #1A1D23; --edge: #2A303A; --edge2: #3A4150;
  --mist: #8A919C; --text2: #A9B0BA; --fg: #E6E8EC; --acid: #C8FF2E;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.6 Archivo, system-ui, sans-serif; }
a { color: var(--fg); }
a:hover { color: var(--acid); }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
code { font-family: var(--mono); font-size: .9em; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
.mono { font-family: var(--mono); }
.dim { color: var(--text2); }
.mist { color: var(--mist); }
.acid { color: var(--acid); }

/* nav */
.nav { border-bottom: 1px solid var(--steel); }
.nav .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; padding: 12px 0; }
.brand span { font-family: Michroma, sans-serif; font-size: 17px; letter-spacing: .06em; }
.nav a:not(.brand):not(.btn) { color: var(--text2); text-decoration: none; font-size: 15px; padding: 12px 0; }
.nav a:not(.brand):not(.btn):hover, .nav a[aria-current] { color: var(--fg); }

/* buttons */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 22px; text-decoration: none; font-weight: 700; border: 1px solid var(--edge2); color: var(--fg); }
button.btn { background: none; font-family: inherit; cursor: pointer; }
.btn.small { font-weight: 500; }
.btn.solid { background: var(--acid); border-color: var(--acid); color: var(--bg); }
.btn.solid:hover { color: var(--bg); background: #d8ff66; }
.btn.small { min-height: 40px; padding: 8px 14px; font: 500 14px var(--mono); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* type */
h1, h2, h3 { font-stretch: 125%; line-height: 1.08; }
h1 { margin: 0; font-weight: 700; font-size: clamp(34px, 4.4vw, 58px); letter-spacing: -.01em; }
h2 { margin: 0 0 12px; font-weight: 700; font-size: clamp(30px, 3vw, 38px); }
section { padding-top: 120px; }
.lead { margin: 0 0 32px; color: var(--text2); max-width: 680px; }

/* hero */
.hero { padding-top: 72px; }
.hero-top { display: flex; flex-wrap: wrap; gap: 28px 56px; align-items: flex-end; margin-bottom: 48px; }
.hero-top h1 { flex: 2 1 560px; }
.hero-top > div { flex: 1 1 320px; }
.hero-top p { margin: 0 0 24px; color: var(--text2); }
.screen { border: 1px solid var(--edge); background: var(--bg); }
.screen canvas { display: block; width: 100%; aspect-ratio: 16 / 9; }
.caption { display: flex; flex-wrap: wrap; gap: 8px 32px; padding-top: 14px; font: 13px var(--mono); color: var(--mist); }
.caption > :first-child { margin-right: auto; }

/* ruled table */
.rules { width: 100%; border-collapse: collapse; }
.scroll { overflow-x: auto; }
.rules td, .rules th { border-top: 1px solid var(--edge); padding: 20px 24px 20px 0; vertical-align: top; text-align: left; }
.rules tr:last-child td { border-bottom: 1px solid var(--edge); }
.rules .n { width: 56px; font: 13px var(--mono); color: var(--acid); padding-top: 24px; }
.rules .name { width: 280px; font-weight: 600; font-size: 19px; }
.rules .text { color: var(--text2); padding-right: 0; }

/* gallery: a scroll-snap strip with buttons, and a full-screen viewer */
.gallery-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 32px; margin-bottom: 28px; }
.gallery-head h2 { margin: 0; margin-right: auto; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 760px); gap: 20px; overflow-x: auto;
  scroll-snap-type: x mandatory; --edge-pad: max(24px, calc((100vw - 1200px) / 2 + 24px));
  scroll-padding-inline: var(--edge-pad); padding: 0 var(--edge-pad) 16px; scrollbar-color: var(--edge2) transparent; }
.strip figure { margin: 0; scroll-snap-align: start; }
.strip button { display: block; width: 100%; padding: 0; border: 1px solid var(--edge); background: none; cursor: zoom-in; }
.strip img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.strip figcaption { padding-top: 12px; font-size: 15px; color: var(--text2); }
.strip figcaption .mono { color: var(--acid); margin-right: 10px; font-size: 14px; }
.count { font: 14px var(--mono); color: var(--mist); }
.viewer { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(6, 7, 10, .96); color: var(--fg); }
.viewer::backdrop { background: rgba(0, 0, 0, .7); }
.viewer[open] { display: grid; grid-template-rows: auto 1fr auto; }
.viewer header, .viewer footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 24px; }
.viewer header .count { margin-right: auto; }
.viewer .stage { display: grid; place-items: center; min-height: 0; padding: 0 24px; }
.viewer .stage img { max-width: 100%; max-height: 100%; object-fit: contain; border: 1px solid var(--edge); }
.viewer footer p { margin: 0 auto 0 0; color: var(--text2); }

/* downloads: a file listing */
.files { width: 100%; border-collapse: collapse; font: 14px var(--mono); border: 1px solid var(--edge); }
.files td { padding: 16px 20px; border-top: 1px solid var(--edge); vertical-align: top; }
.files tr:first-child td { border-top: 0; background: var(--panel); }
.files td:nth-child(2) { color: var(--text2); font-family: Archivo, sans-serif; font-size: 15px; }
.files td:last-child { color: var(--mist); text-align: right; white-space: nowrap; }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 32px; counter-reset: s; }
.steps li { border-top: 2px solid var(--fg); padding: 20px 0; counter-increment: s; }
.steps li::before { content: counter(s); display: block; font: 13px var(--mono); color: var(--acid); margin-bottom: 8px; }

footer.site { padding-block: 120px 56px; display: flex; flex-wrap: wrap; gap: 16px 40px; color: var(--mist); font-size: 14px; }
footer.site > :first-child { margin-right: auto; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  section { padding-top: 88px; }
  .rules .name { width: 180px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* the manual: a printed page (light paper, black ink, the acid as a highlighter) */
body.paper { background: var(--fg); color: var(--bg); }
.paper a { color: var(--bg); }
.paper a:hover { color: #2B4BFF; }
.paper .ink2 { color: #3A4150; }
.paper .runhead { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; border-bottom: 2px solid var(--bg); font: 13px var(--mono); }
.paper .runhead a { text-decoration: none; padding: 20px 0; }
.paper .runhead a:first-child { margin-right: auto; }
.paper .cover { padding-block: 88px 72px; display: flex; flex-wrap: wrap; gap: 40px 48px; align-items: flex-end; border-bottom: 1px solid var(--bg); }
.paper .cover .logo { display: flex; align-items: center; gap: 24px; margin-bottom: 36px; }
.paper .cover .logo span { font-family: Michroma, sans-serif; font-size: clamp(52px, 8vw, 96px); letter-spacing: .04em; line-height: 1; }
.paper .cover h1 { font-size: clamp(30px, 3.6vw, 46px); max-width: 640px; }
.paper .cover > div { flex: 1 1 520px; min-width: 0; }
.paper .cover > p { flex: 1 1 300px; margin: 0; color: #3A4150; }
.paper .mark { background: var(--acid); padding: 0 6px; }
.paper .fig { flex: 1 1 100%; margin: 16px 0 0; }
.paper .fig .frame { border: 10px solid var(--bg); background: var(--bg); }
.paper .fig .frame canvas, .paper .fig .frame img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.paper figcaption { font: 13px var(--mono); padding-top: 10px; color: #3A4150; }
.paper .chapter { display: flex; flex-wrap: wrap; gap: 20px 48px; padding-block: 72px; border-bottom: 1px solid var(--bg); }
.paper .chapter > header { flex: 0 0 220px; }
.paper .chapter > header b { display: block; font: 44px/1 Michroma, sans-serif; }
.paper .chapter > header h2 { margin: 14px 0 0; font-size: 24px; line-height: 1.2; }
.paper .chapter > div { flex: 1 1 560px; min-width: 0; }
.paper .chapter p { margin: 0 0 18px; }
.paper .chapter li { margin-bottom: 10px; }
.paper pre { margin: 0 0 20px; background: var(--bg); color: var(--fg); font: 14px/1.7 var(--mono); padding: 20px 24px; overflow-x: auto; }
.paper table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.paper th, .paper td { border-top: 1px solid var(--mist); padding: 12px 20px 12px 0; text-align: left; vertical-align: top; }
.paper th { font-weight: 600; }
.paper tr:last-child td { border-bottom: 1px solid var(--mist); }
.paper td:first-child { font-family: var(--mono); font-weight: 500; white-space: nowrap; }
.paper .btn.ink { background: var(--bg); color: var(--fg); border-color: var(--bg); }
.paper .btn.ink:hover { color: var(--acid); }
.paper footer.site { color: #3A4150; border-top: 2px solid var(--bg); padding-block: 24px 48px; font: 13px var(--mono); }
.paper :focus-visible { outline-color: #2B4BFF; }