/* Document, type and layout. Components live in components.css. */

/* block, not swap: a pixel face falling back to a smooth one and back reads as a glitch */
@font-face {
  font-family: "Departure Mono";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/assets/fonts/departuremono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/plexmono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/plexmono-700.woff2") format("woff2");
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--ink);
  background-image: linear-gradient(var(--ph-scan) 1px, transparent 1px);
  background-size: 100% var(--scanline);
  color: var(--ph-text);
  font: var(--t-body-sm);
  -webkit-font-smoothing: antialiased;
  /* Departure has one weight; a synthesized bold or italic is a smear */
  font-synthesis: none;
  min-height: 100vh;
}

/* Dirty tubes get a few percent of unevenness; clean tubes set --tube-dirty:none and this never paints. */
.grime {
  display: var(--tube-dirty);
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .035) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .03) 0 3px, transparent 3px 11px),
    radial-gradient(120px 90px at 22% 18%, rgba(0, 0, 0, .045), transparent 70%),
    radial-gradient(180px 120px at 78% 62%, rgba(0, 0, 0, .04), transparent 70%),
    radial-gradient(90px 70px at 55% 88%, rgba(0, 0, 0, .05), transparent 70%);
}

img { display: block; image-rendering: pixelated; }

a { color: var(--ph); text-decoration: none; }
a:hover { color: var(--ph-hot); }

/* Focus is a 3px wash ring, never a glow. */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring) var(--ph-l1);
}

/* == type: every Departure element wears one of these. Weight 400, no smoothing,
   whole pixel tracking; bold is the 1px text shadow, never font-weight == */

h1, h2, h3 { margin: 0; }

.px { font: var(--dm11); -webkit-font-smoothing: none; }
.px-b { text-shadow: var(--px-bold); }

.t-title {
  font: var(--t-title);
  letter-spacing: var(--track-title);
  color: var(--ph-bright);
  -webkit-font-smoothing: none;
}
.t-hero-num {
  font: var(--dm44);
  color: var(--ph-bright);
  -webkit-font-smoothing: none;
}
.t-section {
  font: var(--t-section);
  letter-spacing: 0;
  color: var(--ph-bright);
  -webkit-font-smoothing: none;
}
.t-modal {
  font: var(--t-modal);
  letter-spacing: 0;
  color: var(--ph-bright);
  -webkit-font-smoothing: none;
}
.t-card {
  font: var(--t-card);
  color: var(--ph-bright);
  -webkit-font-smoothing: none;
}
.t-micro {
  font: var(--t-micro);
  letter-spacing: var(--track-micro);
  color: var(--ph-dim);
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-font-smoothing: none;
}
.t-eyebrow {
  font: var(--t-micro);
  letter-spacing: var(--track-eyebrow);
  color: var(--ph-dim);
  text-transform: uppercase;
  -webkit-font-smoothing: none;
}
.t-num {
  font: var(--dm22-num);
  color: var(--ph-bright);
  -webkit-font-smoothing: none;
}
.t-body {
  font: var(--t-body);
  color: var(--ph-mute);
  max-width: var(--measure);
}
.t-secondary {
  font: var(--t-secondary);
  color: var(--ph-text2);
}
.t-caption {
  font: var(--t-caption);
  color: var(--ph-mute2);
}
.t-data {
  font: var(--t-data);
  color: var(--ph-text2);
}

/* Unknown is a dash in mute2, never a zero. Zeros are facts. */
.t-unknown { color: var(--ph-mute2); }

.is-alert { color: var(--alert); }
.is-go { color: var(--go); }
.is-info { color: var(--info); }

code, .code {
  font: 400 12px/1.5 var(--face-mono);
  color: var(--ph);
  background: rgba(var(--ph-rgb), .07);
  padding: 1px 5px;
}

pre {
  margin: 0;
  background: var(--surface);
  border: var(--line) solid var(--ph-l2);
  padding: 16px 18px;
  overflow-x: auto;
  font: 400 12px/1.7 var(--face-mono);
  color: var(--ph-text);
}

/* == page shell == */

.shell {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

.page-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s5);
  flex-wrap: wrap;
  padding: var(--s9) 0 var(--s2);
}
.page-head__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 280px;
}

.sec {
  padding: var(--section-pad) 0;
  border-bottom: var(--line) solid var(--ph-l1);
}
.sec:last-child { border-bottom: 0; }

/* The 01 TITLE pattern */
.sec__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.sec__num {
  font: var(--dm11);
  color: var(--ph);
  -webkit-font-smoothing: none;
}

.lede {
  font: var(--t-lede);
  color: var(--ph-mute);
  max-width: var(--measure);
  margin: 0 0 var(--s5);
}

/* == the 1px grid: the wrapper's background is the seams == */

.grid {
  display: grid;
  gap: var(--line);
  background: var(--ph-l2);
  border: var(--line) solid var(--ph-l2);
}
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid > * { background: var(--surface); }

.cell { padding: var(--s4); }

.row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.spacer { flex: 1 1 auto; }

@media (max-width: 720px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  :root { --page-pad: var(--s3); --section-pad: var(--s6); }
}