/* SPDX-FileCopyrightText: 2026 Curtis Galloway
 * SPDX-License-Identifier: Apache-2.0
 *
 * oxbox.ai -- a cyanotype. The reading surface is the positive print: dark ink
 * on cool blueprint paper. Anything the machine produced -- terminal output,
 * code blocks, the commands you are meant to run -- is printed in the negative,
 * pale on Prussian blue. Two hues carry all the meaning: blue is what we
 * measured or control, brass is somebody else's word or somebody else's code.
 */

/* ---------- faces ---------- */

@font-face {
  font-family: 'Plex Mono';
  src: url('/static/fonts/ibm-plex-mono-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/static/fonts/ibm-plex-mono-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/static/fonts/ibm-plex-mono-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('/static/fonts/literata-400_700-normal.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('/static/fonts/literata-400_700-italic.woff2') format('woff2');
  font-weight: 400 700; font-style: italic; font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  color-scheme: light dark;

  --mono: 'Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --serif: 'Literata', Charter, 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  --paper:  #eceff4;
  --panel:  #e3e8ef;
  --sunk:   #d9e0ea;
  --ink:    #101e33;
  --ink-2:  #41577a;
  --ink-3:  #54678a;
  --rule:   #c3cddb;
  --rule-2: #a9b8cc;
  --blue:   #17458a;
  --brass:  #8a5510;

  --neg:      #0a1b33;
  --neg-2:    #0f2444;
  --neg-ink:  #dde7f5;
  --neg-dim:  #91a8c8;
  --neg-rule: rgba(150, 190, 245, .22);
  --neg-hi:   #cfe4ff;
  --neg-brass:#e6b36a;
  --neg-blue: #9dc2f5;
  --grid:     rgba(150, 190, 245, .085);
  --grid-4:   rgba(150, 190, 245, .16);

  --focus: #2f6ad0;
  --edge: rgba(16, 30, 51, .17);
  --shell: min(100% - 2.5rem, 70rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:  #0c1a2e;
    --panel:  #112741;
    --sunk:   #16304f;
    --ink:    #e4ebf6;
    --ink-2:  #a6bad6;
    --ink-3:  #7d93b4;
    --rule:   #1e3a5c;
    --rule-2: #2a4c74;
    --blue:   #93baf2;
    --brass:  #e2a85e;
    --neg:    #071328;
    --neg-2:  #0b1e3a;
    --focus:  #7fb0ff;
    --edge:   rgba(150, 190, 245, .22);
  }
}

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--blue); text-underline-offset: .18em; text-decoration-thickness: from-font; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 1px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

.shell { width: var(--shell); margin-inline: auto; }

/* A grid item defaults to min-width:auto, so one wide child -- a terminal
 * figure, a model id, a table -- stretches its whole column past the viewport
 * and the page scrolls sideways. Every grid track here is explicitly allowed
 * to be narrower than its contents; the scrolling belongs to the .scroller,
 * the .probe-body and the <pre>, not to the page. */
.hero-inner > *, .doc-body > *, .prose > *, .layer > *,
.card-grid > *, .footer-inner > *, .probe-stack > * { min-width: 0; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--neg); color: var(--neg-ink);
  font-family: var(--mono); font-size: .82rem; padding: .7rem 1rem; z-index: 50;
}
.skip:focus { left: 0; }

/* ---------- shared type ---------- */

.eyebrow {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-3); margin: 0 0 1rem;
}
.eyebrow a { color: inherit; }
.eyebrow .sep { opacity: .5; }
.lede {
  font-size: 1.22rem; line-height: 1.58; color: var(--ink-2);
  max-width: 40rem; margin: 0;
}
.section-title {
  font-family: var(--mono); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(1.15rem, .95rem + .8vw, 1.5rem);
  line-height: 1.25; margin: 0 0 .6rem;
}
.section-note { color: var(--ink-2); max-width: 38rem; margin: 0 0 2rem; font-size: .98rem; }

code {
  font-family: var(--mono); font-size: .88em; letter-spacing: -.01em;
  overflow-wrap: break-word;
}
pre {
  background: var(--neg); color: var(--neg-ink);
  border-left: 2px solid var(--neg-blue);
  padding: 1.05rem 1.15rem; margin: 1.6rem 0;
  overflow-x: auto; font-size: .84rem; line-height: 1.65;
}
pre code { background: none; padding: 0; font-size: 1em; color: inherit; }

/* ---------- masthead ---------- */

.masthead { border-bottom: 1px solid var(--rule); background: var(--paper); }
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 3.75rem; flex-wrap: wrap;
}
.wordmark {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-weight: 600; font-size: 1.02rem;
  letter-spacing: -.02em; color: var(--ink); text-decoration: none;
}
.mark { flex: none; }
.nav {
  display: flex; align-items: center; gap: 1.4rem;
  font-family: var(--mono); font-size: .82rem; letter-spacing: .01em;
}
.nav a { color: var(--ink-2); text-decoration: none; padding: .3rem 0; }
.nav a:hover { color: var(--ink); text-decoration: underline; }
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--blue); }
.nav-out { color: var(--ink-3) !important; }

.home .masthead { background: var(--neg); border-bottom-color: var(--neg-rule); }
.home .wordmark { color: var(--neg-ink); }
.home .nav a { color: var(--neg-dim); }
.home .nav a:hover { color: var(--neg-ink); }
.home .nav a[aria-current="page"] { color: var(--neg-ink); }
.home .nav-out { color: var(--neg-dim) !important; }

/* ---------- hero ---------- */

.hero {
  background-color: var(--neg);
  background-image:
    repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(to right, var(--grid-4) 0 1px, transparent 1px 112px),
    repeating-linear-gradient(to bottom, var(--grid-4) 0 1px, transparent 1px 112px);
  color: var(--neg-ink);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem);
  border-bottom: 1px solid var(--neg-rule);
}
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem); align-items: start;
}
@media (min-width: 62rem) { .hero-inner { grid-template-columns: 1.15fr .85fr; } }
.hero .eyebrow { color: var(--neg-brass); }
.hero h1 {
  font-family: var(--mono); font-weight: 600;
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.25rem);
  line-height: 1.1; letter-spacing: -.035em;
  margin: 0 0 1.4rem; text-wrap: balance;
}
.hero .lede { color: var(--neg-dim); max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 0; }

.btn {
  font-family: var(--mono); font-size: .84rem; letter-spacing: .01em;
  padding: .72rem 1.15rem; text-decoration: none; display: inline-block;
  border: 1px solid var(--neg-hi); background: var(--neg-hi); color: var(--neg);
}
.btn:hover { background: #fff; border-color: #fff; }
.btn--ghost { background: transparent; color: var(--neg-ink); border-color: var(--neg-dim); }
.btn--ghost:hover { background: rgba(150, 190, 245, .12); border-color: var(--neg-dim); }

/* the denial column: the most characteristic artifact in this project's world */
.probe-stack {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem; align-content: start;
}
.probe {
  margin: 0; background: rgba(4, 12, 26, .55);
  border: 1px solid var(--neg-rule); font-family: var(--mono);
  font-size: clamp(.72rem, .62rem + .3vw, .82rem); line-height: 1.5;
}
.probe-head {
  padding: .7rem .95rem; border-bottom: 1px solid var(--neg-rule);
  color: var(--neg-dim); letter-spacing: .01em;
}
.probe-prompt { color: var(--neg-brass); margin-right: .5em; }
.probe-body { padding: .85rem .95rem; overflow-x: auto; }
.probe-line { margin: 0; padding: .17rem 0; display: flex; gap: 0 .9em; }
.verdict { color: var(--neg-hi); font-weight: 600; flex: none; }
.probe-what { color: var(--neg-ink); flex: 1 1 auto; white-space: nowrap; }
.probe-why { color: var(--neg-brass); flex: none; white-space: nowrap; }
.probe-elide {
  margin: 0; color: var(--neg-dim); letter-spacing: .3em; padding: .4rem 0 .1rem;
}
@supports (grid-template-columns: subgrid) {
  .probe-body { display: grid; grid-template-columns: auto 1fr auto; }
  .probe-line { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  .probe-elide { grid-column: 1 / -1; }
}
.probe-foot {
  margin: 0; padding: .7rem .95rem; border-top: 1px solid var(--neg-rule);
  color: var(--neg-hi);
}

@keyframes arrive { from { opacity: 0; transform: translateY(.35rem); } to { opacity: 1; transform: none; } }
.probe-line, .probe-foot { animation: arrive .45s cubic-bezier(.2, .7, .3, 1) both; }
.probe-line:nth-child(1) { animation-delay: .10s; }
.probe-line:nth-child(2) { animation-delay: .19s; }
.probe-line:nth-child(3) { animation-delay: .28s; }
.probe-line:nth-child(4) { animation-delay: .37s; }
.probe-line:nth-child(5) { animation-delay: .46s; }
.probe-line:nth-child(6) { animation-delay: .55s; }
.probe-foot { animation-delay: .68s; }
@media (prefers-reduced-motion: reduce) {
  .probe-line, .probe-foot { animation: none; }
}

/* ---------- the five layers ---------- */

.layers { padding: clamp(3rem, 6vw, 4.5rem) 0; }
.layer-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--rule-2);
  border-block: 1px solid var(--rule-2);
}
.layer {
  background: var(--paper); padding: 1.5rem 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem 1.75rem;
}
@media (min-width: 50rem) {
  .layer { grid-template-columns: 7.5rem 11rem minmax(0, 1fr); align-items: baseline; }
}
.layer-by { margin: 0; font-family: var(--mono); font-size: .78rem; color: var(--ink-3); }
.layer-by code { background: none; padding: 0; color: var(--brass); font-size: 1em; }
.layer h3 {
  margin: 0; font-family: var(--mono); font-weight: 600; font-size: .98rem;
  letter-spacing: -.01em; line-height: 1.4;
}
.layer p:last-child { margin: 0; color: var(--ink-2); font-size: .98rem; max-width: 40rem; }

/* ---------- cards ---------- */

.latest { padding: 0 0 clamp(3rem, 6vw, 4.5rem); }
/* Discrete bordered cards rather than the hairline grid used for the layers.
 * A 1px gap over a rule-coloured background needs every cell filled, and the
 * featured card spans the full row, so an odd issue count left a solid grey
 * block where a card was missing. */
.card-grid {
  display: grid; gap: 1.25rem; margin: 1.5rem 0 4rem;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}
.card {
  background: var(--paper); color: inherit; text-decoration: none;
  border: 1px solid var(--rule-2);
  padding: 1.6rem 1.5rem; display: flex; flex-direction: column; gap: .6rem;
}
.card:hover { background: var(--panel); }
.card--featured { grid-column: 1 / -1; }
.card-top {
  margin: 0; display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.card-top .eyebrow { margin: 0; }
.card--featured .card-top .eyebrow { color: var(--brass); }
.card-title {
  margin: 0; font-family: var(--mono); font-weight: 600; letter-spacing: -.015em;
  font-size: 1.08rem; line-height: 1.35; color: var(--ink);
}
.card--featured .card-title { font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); }
.card-dek { margin: 0; color: var(--ink-2); font-size: .96rem; line-height: 1.6; }
.card--featured .card-dek { max-width: 44rem; }
.card-go {
  margin: .3rem 0 0; font-family: var(--mono); font-size: .76rem;
  letter-spacing: .04em; color: var(--blue);
}
.card:hover .card-go { text-decoration: underline; }
.card-go::after { content: ' \2192'; }


/* ---------- documents ---------- */

.doc-head { padding: clamp(2.75rem, 6vw, 4.25rem) 0 clamp(1.75rem, 3vw, 2.5rem); }
@media (min-width: 64rem) {
  .doc--toc .doc-head .shell {
    display: grid; grid-template-columns: 13rem minmax(0, 1fr);
    column-gap: 3.5rem; row-gap: 0;
  }
  .doc--toc .doc-head .shell > * { grid-column: 2; }
}
.doc-head h1 {
  font-family: var(--mono); font-weight: 600;
  font-size: clamp(1.85rem, 1.15rem + 2.4vw, 2.85rem);
  line-height: 1.12; letter-spacing: -.035em;
  margin: 0 0 1.15rem; text-wrap: balance; max-width: 22ch;
}
.doc-body {
  padding-bottom: 5rem; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem; align-items: start;
}
@media (min-width: 64rem) {
  .doc-body { grid-template-columns: 13rem minmax(0, 1fr); gap: 3.5rem; }
}
.prose-section { padding-bottom: 5rem; }

.toc {
  font-family: var(--mono); font-size: .78rem; line-height: 1.5;
  border-left: 1px solid var(--rule-2); padding-left: 1.1rem;
}
@media (min-width: 64rem) { .toc { position: sticky; top: 2.5rem; order: -1; } }
.toc-title {
  margin: 0 0 .7rem; text-transform: uppercase; letter-spacing: .16em;
  font-size: .68rem; color: var(--ink-3);
}
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- prose ---------- */

.prose > * { max-width: 44rem; }
.prose > .scroller, .prose > pre { max-width: 100%; }
.prose--narrow { max-width: 44rem; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.15rem; }
.prose h2 {
  font-family: var(--mono); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); line-height: 1.3;
  margin: 3rem 0 1.1rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
  max-width: none;
}
.prose h3 {
  font-family: var(--mono); font-weight: 600; font-size: 1.02rem;
  letter-spacing: -.01em; line-height: 1.4; margin: 2.2rem 0 .8rem;
}
.prose h4 {
  font-family: var(--mono); font-weight: 500; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3);
  margin: 2rem 0 .7rem;
}
.prose ul, .prose ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
.prose li { margin: 0 0 .55rem; }
.prose li > ul, .prose li > ol { margin: .55rem 0 0; }
.prose ul { list-style: none; padding-left: 1.15rem; }
.prose ul > li { position: relative; }
.prose ul > li::before {
  content: ''; position: absolute; left: -1.15rem; top: .72em;
  width: .45rem; height: 1px; background: var(--rule-2);
}
.prose blockquote {
  margin: 1.6rem 0; padding: .2rem 0 .2rem 1.25rem;
  border-left: 2px solid var(--brass); color: var(--ink-2); font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.doc-source { font-size: .9rem; color: var(--ink-3); }

/* ---------- tables ---------- */

.scroller {
  overflow-x: auto; margin: 1.75rem 0 2rem;
  background:
    linear-gradient(to right, var(--paper) 40%, transparent) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--paper) 40%, transparent) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--edge), transparent) left center / .85rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--edge), transparent) right center / .85rem 100% no-repeat scroll;
}
.data { border-collapse: collapse; width: 100%; font-size: .93rem; line-height: 1.55; }
.data th {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3);
  padding: .45rem .8rem .45rem 0; border-bottom: 1px solid var(--rule-2);
  white-space: nowrap; vertical-align: bottom;
}
.data td {
  padding: .6rem .8rem .6rem 0; border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.data tr:last-child td { border-bottom: 0; }
.data th:last-child, .data td:last-child { padding-right: 0; }
.data.defs td:first-child {
  font-family: var(--mono); font-size: .8rem; color: var(--ink-3);
  white-space: nowrap; letter-spacing: .01em;
}
.data .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.data .nowrap { white-space: nowrap; }
.al-r { text-align: right; }
.al-c { text-align: center; }
.al-l { text-align: left; }

.tag {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; padding: .12em .5em; border: 1px solid currentColor;
  white-space: nowrap; display: inline-block;
}
.tag--free { color: var(--blue); }
.tag--paid, .tag--unknown { color: var(--brass); }

/* ---------- manifests ---------- */

.callout {
  border: 1px solid var(--rule-2); background: var(--panel);
  padding: 1.4rem 1.5rem; margin: 0 0 .5rem;
}
.callout-title {
  margin: 0 0 .9rem; font-family: var(--mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .16em; color: var(--ink-3);
}
.callout-cmd { margin: 0 0 .9rem; }
.callout-cmd code {
  display: block; background: var(--neg); color: var(--neg-ink);
  border-left: 2px solid var(--neg-blue); padding: .85rem 1rem;
  font-size: .8rem; line-height: 1.6; overflow-x: auto; white-space: pre;
}
.callout-note { margin: 0; font-size: .93rem; color: var(--ink-2); }

.file-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.file-list li {
  padding: .8rem 0; border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.file-list .meta { font-family: var(--mono); font-size: .76rem; color: var(--ink-3); }
.archive-title { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--rule); background: var(--panel);
  padding: 3rem 0 2.25rem; margin-top: auto;
  font-size: .9rem; color: var(--ink-2);
}
.footer-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 46rem) { .footer-inner { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer p { margin: 0 0 .5rem; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin: 0 0 .4rem; }
.footer-mark {
  font-family: var(--mono); font-weight: 600; font-size: 1rem;
  letter-spacing: -.02em; color: var(--ink);
}
.footer-title {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--ink-3); margin-bottom: .8rem;
}
.footer a { color: var(--ink-2); }
.footer a:hover { color: var(--blue); }
.colophon {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
}
.colophon p {
  margin: 0; max-width: 44rem; font-family: var(--mono);
  font-size: .74rem; line-height: 1.7; color: var(--ink-3);
}