/* ==========================================================================
   BlastRadius — incident noir
   A fault sequence from an accident report, read at night.

   Design rules, from .impeccable.md, restated here because CSS is where they
   get broken: no glow, no neon, no scanlines. Dark is not permission for a
   cyberpunk dashboard. One accent, used only where something is destroyed.
   Rules and indentation instead of cards.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */

@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

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

:root {
  /* Ground and ink. Neither is pure — the ground is tinted blue, the ink warm,
     so the page reads as paper under a lamp rather than as a screen. */
  --ground:      oklch(0.165 0.019 262);
  --ground-lift: oklch(0.203 0.021 262);
  --ground-sunk: oklch(0.128 0.017 262);
  --ink:         oklch(0.929 0.010 85);
  --ink-soft:    oklch(0.742 0.012 262);
  --ink-faint:   oklch(0.573 0.014 262);

  /* The single accent. Ember — used only where something is destroyed. */
  --ember:       oklch(0.652 0.186 33);
  --ember-deep:  oklch(0.505 0.171 30);

  /* Severity, lifted from the CLI's own palette so page and tool agree. */
  --sev-severe:  oklch(0.648 0.163 27);
  --sev-high:    oklch(0.788 0.132 76);
  --sev-unknown: oklch(0.712 0.148 322);
  --sev-low:     oklch(0.760 0.126 152);

  --rule:        color-mix(in oklch, var(--ink) 13%, transparent);
  --rule-strong: color-mix(in oklch, var(--ink) 26%, transparent);

  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans:  'Archivo', ui-sans-serif, system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid scale, ~1.28 ratio at the top end. */
  --t-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --t-sm:   clamp(0.84rem, 0.81rem + 0.15vw, 0.94rem);
  --t-base: clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --t-lede: clamp(1.16rem, 1.08rem + 0.40vw, 1.42rem);
  --t-h3:   clamp(1.10rem, 1.04rem + 0.30vw, 1.28rem);
  --t-h2:   clamp(2.10rem, 1.60rem + 2.30vw, 3.75rem);
  --t-h1:   clamp(3.00rem, 1.90rem + 5.20vw, 7.25rem);

  --gutter: clamp(1.25rem, 0.80rem + 2.20vw, 3.25rem);
  --shell:  74rem;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

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

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.04; text-wrap: balance; }
p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
em { font-style: italic; }
code { font-family: var(--mono); font-size: 0.88em; }

a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--ember); }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 1px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--ember); color: var(--ground);
  padding: 0.7rem 1.1rem; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.kicker {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.6rem;
}

.h2 {
  font-family: var(--serif);
  font-size: var(--t-h2);
  letter-spacing: -0.014em;
}
.h2--wide { max-width: 18ch; }

.lede { font-size: var(--t-lede); line-height: 1.42; color: var(--ink); }

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

.masthead {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklch, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 4rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand__name {
  font-family: var(--mono); font-size: var(--t-sm);
  font-weight: 700; letter-spacing: -0.02em;
}
/* A blast radius: a filled core and the ring it reaches. Not an icon-in-a-box. */
.brand__mark {
  inline-size: 0.72rem; block-size: 0.72rem; border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ember) 26%, transparent);
  flex: none;
}

.masthead__nav { display: flex; gap: clamp(0.9rem, 2vw, 1.9rem); }
.masthead__nav a {
  font-size: var(--t-sm); color: var(--ink-soft);
  text-decoration: none; white-space: nowrap;
}
.masthead__nav a:hover { color: var(--ink); }
@media (max-width: 46rem) { .masthead__nav { display: none; } }

/* ---------------------------------------------------------------- sequence */

.sequence {
  padding-block: clamp(3.5rem, 7vw, 8rem) clamp(3rem, 6vw, 6.5rem);
  position: relative;
}
/* A single vertical hairline behind the ledger — the spine of the report. */
.sequence::before {
  content: '';
  position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: 100%;
  background:
    radial-gradient(120% 70% at 12% 0%,
      color-mix(in oklch, var(--ember) 7%, transparent) 0%,
      transparent 62%);
  pointer-events: none;
}
.sequence > .shell { position: relative; }

.sequence__title {
  font-family: var(--serif);
  font-size: var(--t-h1);
  letter-spacing: -0.022em;
  margin-bottom: 1.6rem;
}
.sequence__title em { color: var(--ember); font-style: italic; }

.sequence__deck {
  font-size: var(--t-lede); line-height: 1.44;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}

/* ------------------------------------------------------------------ ledger */

.ledger {
  list-style: none; margin: 0; padding: 0;
  position: relative;
  max-width: 60rem;

  /* Column, gap and spine position are derived from one another rather than written
     out twice. The first version of this file duplicated the clamps in the grid and in
     the spine offset, they resolved to different widths, and the hairline was drawn
     straight through the timestamps. */
  --col:   clamp(4.5rem, 6vw, 6rem);
  --gap:   clamp(1.1rem, 3vw, 2.6rem);
  --spine: calc(var(--col) + var(--gap) / 2);
  --pad-y: clamp(1.1rem, 2vw, 1.7rem);
}

.ledger__row {
  display: grid;
  grid-template-columns: var(--col) 1fr;
  gap: var(--gap);
  padding-block: var(--pad-y);
  position: relative;
}

/* The spine, drawn per-row so it can begin and terminate at an event rather than
   running off into the padding. */
.ledger__row::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--spine);
  inline-size: 1px;
  background: var(--rule-strong);
}
.ledger__row:first-child::before { inset-block-start: calc(var(--pad-y) + 0.62em); }
.ledger__row--terminal::before { inset-block-end: calc(100% - var(--pad-y) - 0.9em); }

/* The tick on the spine. */
.ledger__row::after {
  content: '';
  position: absolute;
  inset-block-start: calc(var(--pad-y) + 0.62em);
  inset-inline-start: calc(var(--spine) - 2px);
  inline-size: 5px; block-size: 5px;
  border-radius: 50%;
  background: var(--ink-faint);
}

.ledger__time {
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  padding-top: 0.28em;
  text-align: end;
}

.ledger__event p { margin-bottom: 0.7em; max-width: 54ch; }
.ledger__event p:last-child { margin-bottom: 0; }

.ledger__aside {
  font-size: var(--t-sm);
  color: var(--ink-faint);
  border-left: 1px solid var(--rule);
  padding-left: 1rem;
  margin-top: 1rem !important;
}

/* 00:04 — the only second that matters. */
.ledger__row--pivot .ledger__time { color: var(--ember); }
.ledger__row--pivot::after {
  background: var(--ember);
  inline-size: 9px; block-size: 9px;
  inset-block-start: calc(var(--pad-y) + 0.44em);
  inset-inline-start: calc(var(--spine) - 4px);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--ember) 18%, transparent);
}
.ledger__row--pivot .ledger__event > p:first-child {
  font-size: var(--t-lede); line-height: 1.44;
}

/* 00:09 — the loss. */
.ledger__row--terminal::after { background: var(--ember-deep); }
.ledger__loss {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.4rem);
  line-height: 1.2;
  color: var(--ink);
  max-width: 26ch !important;
}

/* Staggered reveal. */
@media (prefers-reduced-motion: no-preference) {
  .js .ledger__row { opacity: 0; transform: translateY(14px); }
  .js .ledger__row.is-in {
    opacity: 1; transform: none;
    transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  }
}

/* ----------------------------------------------------------------- verdict */

.verdict {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
  max-width: 60rem;
}
.verdict__line {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.1rem + 2.1vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.014em;
  max-width: 22ch;
  margin-bottom: 1.2rem;
}
.verdict__note { color: var(--ink-faint); font-size: var(--t-sm); max-width: 52ch; }

/* ------------------------------------------------------------------- bands */

.band {
  padding-block: clamp(3.5rem, 7vw, 7.5rem);
  border-top: 1px solid var(--rule);
}
.band--output    { background: var(--ground-sunk); }
.band--providers { background: var(--ground-sunk); }
.band--install   { background: var(--ground-lift); }

.band__deck {
  color: var(--ink-soft);
  max-width: 58ch;
  margin-top: 1.4rem;
  margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
}

/* Asymmetric split — lead column narrower, deliberately off-balance. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
}
@media (max-width: 56rem) {
  .split { grid-template-columns: 1fr; gap: 2.2rem; }
}
.split__lead { position: sticky; top: 6rem; }
@media (max-width: 56rem) { .split__lead { position: static; } }
.split__lead-note {
  margin-top: 1.4rem; font-size: var(--t-sm);
  color: var(--ink-faint); max-width: 34ch;
}
.split__body > p { max-width: 58ch; }

/* --------------------------------------------------------------- questions */

.questions { margin: 2.2rem 0; }
.questions__item { padding-block: 1.2rem; border-top: 1px solid var(--rule); }
.questions__item dt {
  font-family: var(--serif);
  font-size: var(--t-h3);
  line-height: 1.22;
  margin-bottom: 0.5rem;
}
.questions__item dd {
  margin: 0; color: var(--ink-soft);
  font-size: var(--t-sm); max-width: 56ch;
}

/* ---------------------------------------------------------------- terminal */

.terminal {
  border: 1px solid var(--rule-strong);
  background: oklch(0.108 0.014 262);
  overflow: hidden;
}
.terminal__bar {
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in oklch, var(--ink) 3%, transparent);
}
.terminal__cmd {
  font-family: var(--mono); font-size: var(--t-xs);
  color: var(--ink-faint); letter-spacing: 0.01em;
}
.terminal__out {
  margin: 0;
  padding: clamp(1rem, 2.4vw, 1.9rem);
  font-family: var(--mono);
  font-size: clamp(0.68rem, 0.60rem + 0.34vw, 0.83rem);
  line-height: 1.62;
  color: var(--ink);
  overflow-x: auto;
  tab-size: 2;
}

.sev { font-weight: 700; }
.sev--cat {
  background: var(--ember); color: oklch(0.14 0.02 262);
  padding: 0 0.34em; margin-inline-start: -0.34em;
}
.sev--sev { color: var(--sev-severe); }
.sev--unk { color: var(--sev-unknown); }
.sev-inline { color: var(--ember); font-weight: 700; }
.fp  { color: var(--ink-faint); }
.dim { color: var(--ink-faint); }
.pivot { color: var(--ember); }

.notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(1.4rem, 3vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3.2rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--rule);
}
.notes p { color: var(--ink-soft); font-size: var(--t-sm); }
.notes strong { color: var(--ink); font-weight: 600; }
.tone-cat { color: var(--ember); }

/* ---------------------------------------------------------------- refusals */

.refusals {
  list-style: none; margin: 0; padding: 0;
  counter-reset: refusal;
}
.refusals > li {
  counter-increment: refusal;
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.6rem 1rem;
}
.refusals > li::before {
  content: counter(refusal, decimal-leading-zero);
  font-family: var(--mono); font-size: var(--t-xs);
  color: var(--ember); padding-top: 0.42em;
  grid-row: span 2;
}
.refusals h3 {
  font-family: var(--sans);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.refusals p {
  grid-column: 2;
  color: var(--ink-soft); font-size: var(--t-sm);
  max-width: 54ch; margin: 0;
}
.refusals__coda {
  margin-top: 1.8rem; padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-faint); font-size: var(--t-sm);
}

/* --------------------------------------------------------------- providers */

.table-scroll { overflow-x: auto; }

.providers {
  inline-size: 100%;
  border-collapse: collapse;
  text-align: start;
  min-inline-size: 34rem;
}
.providers thead th {
  font-family: var(--mono); font-size: var(--t-xs);
  font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 0 0.8rem; text-align: start;
  border-bottom: 1px solid var(--rule-strong);
}
.providers tbody th {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--t-h3);
  text-align: start; white-space: nowrap;
  padding: 1.15rem 1.6rem 1.15rem 0;
  vertical-align: baseline;
}
.providers td {
  padding: 1.15rem 0;
  color: var(--ink-soft); font-size: var(--t-sm);
  vertical-align: baseline;
}
.providers tbody tr + tr th,
.providers tbody tr + tr td { border-top: 1px solid var(--rule); }

.tag {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.12em 0.5em; margin-inline-end: 0.55em;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.tag--full { color: var(--sev-low); }
.tag--part { color: var(--sev-high); }
.tag--none { color: var(--sev-unknown); }

.gapnote {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-faint); font-size: var(--t-sm);
  max-width: 62ch;
}
.gapnote strong { color: var(--ink); font-weight: 600; }

/* ----------------------------------------------------------------- install */

.install { margin-top: 1rem; }
.install__cmd {
  font-family: var(--mono);
  font-size: clamp(1rem, 0.82rem + 0.85vw, 1.6rem);
  margin: 0 0 1.4rem;
  padding: clamp(1rem, 2.2vw, 1.6rem) clamp(1rem, 2.4vw, 1.9rem);
  border: 1px solid var(--rule-strong);
  background: var(--ground-sunk);
  overflow-x: auto;
  color: var(--ink);
}
.install__note { color: var(--ink-soft); font-size: var(--t-sm); max-width: 60ch; }

.ci {
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--rule);
}
.ci__label {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 0.9rem;
}
.ci__cmd {
  font-family: var(--mono); font-size: var(--t-sm);
  margin: 0 0 1rem; padding: 0.9rem 1.1rem;
  border: 1px solid var(--rule);
  background: var(--ground-sunk);
  overflow-x: auto;
}
.ci__note { color: var(--ink-faint); font-size: var(--t-sm); max-width: 60ch; }

/* --------------------------------------------------------------- incidents */

.incidents__cta { margin-top: 1.8rem; }
.link-arrow {
  font-family: var(--mono); font-size: var(--t-sm);
  color: var(--ember);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--ember) 40%, transparent);
  padding-bottom: 0.15em;
}
.link-arrow:hover { border-bottom-color: var(--ember); }

/* ------------------------------------------------------------- legal pages */

/* Imprint and privacy. Narrow measure, plain hierarchy — these exist to be read
   and cited, not admired, so the noir stays in the ground colour and nowhere else. */
.legal { max-width: 46rem; }

.legal__sub {
  font-size: var(--t-lede);
  line-height: 1.44;
  color: var(--ink-soft);
  max-width: 52ch;
  margin-bottom: 2.6rem;
}

.legal h2 {
  font-family: var(--sans);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.008em;
  margin: 2.4rem 0 0.7rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.legal h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 1.8rem 0 0.5rem;
  color: var(--ink);
}
.legal p { color: var(--ink-soft); max-width: 60ch; }
.legal a { color: var(--ink); }

.legal ul {
  margin: 0 0 1.05em;
  padding-left: 1.1rem;
  color: var(--ink-soft);
  max-width: 60ch;
}
.legal li { margin-bottom: 0.85em; }
.legal li strong { color: var(--ink); font-weight: 600; }

.legal__rule {
  border: 0;
  border-top: 1px solid var(--rule-strong);
  margin: 3.2rem 0 0;
}
.legal section[lang='de'] h2 { border-top: 0; padding-top: 0; }

/* ------------------------------------------------------------------- foot */

.foot {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background: var(--ground-sunk);
}
.foot__inner { display: grid; gap: 0.9rem; }
.foot__line { max-width: 56ch; }
.foot__line strong { font-family: var(--mono); font-weight: 700; font-size: 0.94em; }
.foot__meta { color: var(--ink-faint); font-size: var(--t-sm); max-width: 60ch; }
.foot__nav { display: flex; gap: 1.4rem; margin-top: 0.6rem; }
.foot__nav a { font-size: var(--t-sm); color: var(--ink-faint); text-decoration: none; }
.foot__nav a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ print */

@media print {
  body { background: #fff; color: #000; }
  .masthead, .skip { display: none; }
}