/* jbrussell.net
   One typeface (B612, drawn for Airbus cockpit displays), pure black or pure white,
   and a canvas behind everything. The page itself stays plain so the picture can move. */

@font-face { font-family: "B612"; src: url("/assets/fonts/b612-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "B612"; src: url("/assets/fonts/b612-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "B612"; src: url("/assets/fonts/b612-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "B612 Mono"; src: url("/assets/fonts/b612mono-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --paper: #000;
  --ink: #fff;
  --haze: #a8a8a8;
  --rule: rgba(255, 255, 255, .24);
  --hostile: #ff453a;
  --own: #4da6ff;
  --sans: "B612", Verdana, "Segoe UI", system-ui, sans-serif;
  --mono: "B612 Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(20px, 5.6vw, 84px);
  --measure: 35rem;
  --bar: 46px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --paper: #fff;
  --ink: #000;
  --haze: #595959;
  --rule: rgba(0, 0, 0, .24);
  --hostile: #d21f12;
  --own: #0b5fd0;
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar) + 20px);
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--ink); color: var(--paper); }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── the picture ── */
#scene {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100vh; height: 100lvh;
  z-index: 0; display: block; pointer-events: none;
  background: var(--paper);
}
#lvh { position: fixed; top: 0; left: 0; width: 0; height: 100vh; height: 100lvh; visibility: hidden; pointer-events: none; }

/* ── top bar: what the sensor is doing, and the two things people came for ── */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  height: calc(var(--bar) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) calc(var(--gutter) - 8px) 0 var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid transparent;
}
.bar.is-past { border-bottom-color: var(--rule); }
.bar-name { display: none; font-weight: 700; font-size: .875rem; text-decoration: none; white-space: nowrap; }
@media (min-width: 620px) { .bar.is-past .bar-name { display: block; } }
.bar-status {
  flex: 1; min-width: 0; margin: 0;
  font: 400 .6875rem/1 var(--mono); color: var(--haze);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar-nav { display: flex; align-items: center; }
.bar-nav a, .bar-nav button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  font: 700 .8125rem/1 var(--sans); color: var(--ink);
  background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}

/* ── first screen ── */
main {
  position: relative; z-index: 1;
  /* a paper-coloured halo, the way map lettering is knocked out of the linework under it */
  text-shadow: 0 0 2px var(--paper), 0 0 5px var(--paper), 0 0 11px var(--paper);
}

.hero {
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--bar) + env(safe-area-inset-top, 0px) + clamp(26px, 7vh, 92px)) var(--gutter) 0;
}
.hero h1 {
  margin: 0;
  font-weight: 700;
  font-size: clamp(3.25rem, 14.6vw, 7.5rem);
  line-height: .9;
  letter-spacing: -.045em;
}
.hero h1 span { display: block; }
.hero .lede {
  margin: clamp(20px, 3.6vh, 40px) 0 0;
  max-width: 19em;
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  line-height: 1.24;
  letter-spacing: -.012em;
}
.hero .sub {
  margin: 12px 0 0;
  max-width: 31rem;
  color: var(--haze);
}

.actions { display: flex; gap: 10px; margin-top: clamp(22px, 3.4vh, 36px); max-width: 26rem; }
.btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 20px;
  border: 1.5px solid var(--ink);
  background: var(--paper); color: var(--ink);
  font: 700 1.0625rem/1 var(--sans);
  text-decoration: none;
}
.btn { text-shadow: none; }
.btn.is-primary { background: var(--ink); color: var(--paper); }
.btn:active { opacity: .78; }

.more { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 10px 0 0; padding: 0; list-style: none; }
.more a, .more button {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0;
  font: 700 1rem/1 var(--sans); color: var(--ink);
  background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}

/* ── sections ── */
.sec { padding: 0 var(--gutter); margin-top: clamp(104px, 19vh, 200px); }
.sec > * { max-width: var(--measure); }
.sec h2 {
  margin: 0 0 clamp(28px, 5vh, 52px);
  font-size: clamp(2rem, 8vw, 3.25rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.item + .item { margin-top: clamp(52px, 9vh, 92px); }
.item h3 { margin: 0; font-size: 1.4375rem; line-height: 1.18; letter-spacing: -.022em; }
.item .kind { margin: 5px 0 14px; color: var(--haze); }
.item p { margin: 0 0 12px; }
.item ul { margin: 0 0 12px; padding: 0 0 0 1.15em; }
.item li { margin: 0 0 7px; padding-left: 2px; }
.item li::marker { color: var(--haze); }
.item .stack { margin: 14px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--haze); }
.item .out { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 0 22px; padding: 0; list-style: none; }
.item .out a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 5px;
}

/* figures: drawn in the same line language as the picture behind the page, on solid paper */
.fig { margin: 0 0 18px; max-width: 27rem; border: 1px solid var(--rule); background: var(--paper); text-shadow: none; }
.fig svg, .fig img { display: block; width: 100%; height: auto; }
.fig > a { display: block; }
.fig figcaption { padding: 8px 10px 9px; border-top: 1px solid var(--rule); font-size: .75rem; line-height: 1.45; color: var(--haze); }
.fig figcaption a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* drawing sheets are dense, so they get the full measure */
.fig.is-sheet { max-width: var(--measure); }
.fig svg { color: var(--ink); fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.fig .t { stroke-width: .8; opacity: .55; }
.fig .d { stroke-dasharray: 4 4; }
.fig .p { fill: var(--paper); }
.fig .ring { fill: var(--paper); fill-rule: evenodd; }
.fig .solid { fill: currentColor; }
.fig .f { stroke-width: .55; opacity: .5; }
.fig .m { fill: currentColor; fill-opacity: .3; stroke: none; }
.fig .s { fill: currentColor; stroke: none; }
.fig #fly-eye .t { stroke-width: .5; opacity: .5; }
.fig .h { stroke: var(--hostile); }
.fig .o { stroke: var(--own); }
.fig text { font: 13.2px var(--mono); fill: currentColor; stroke: none; }
.fig text.h { fill: var(--hostile); stroke: none; }
.fig text.o { fill: var(--own); stroke: none; }
.fig text.inv { fill: var(--paper); }

.minor { margin: clamp(52px, 9vh, 92px) 0 0; padding: 0; list-style: none; }
.minor li { margin: 0 0 14px; }
.minor b { font-weight: 700; }

.tools { margin: 0; }
.tools dt { font-weight: 700; margin-top: 18px; }
.tools dt:first-child { margin-top: 0; }
.tools dd { margin: 2px 0 0; color: var(--haze); }

/* ── last screen: room for the intercept above, the links below ── */
.sec.contact {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}
.contact .ask { margin: 0 0 24px; font-size: 1.125rem; line-height: 1.4; max-width: 22em; }
.rows { margin: 0; padding: 0; list-style: none; width: 100%; }
.rows a, .rows button {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  width: 100%; min-height: 58px; padding: 16px 0;
  border: 0; border-bottom: 1px solid var(--rule);
  background: none; color: var(--ink); cursor: pointer;
  font: inherit; text-align: left; text-decoration: none;
}
.rows li:first-child > a, .rows li:first-child > button { border-top: 1px solid var(--rule); }
.rows b { font-size: 1.25rem; line-height: 1.2; letter-spacing: -.015em; }
.rows span { color: var(--haze); font-size: .8125rem; text-align: right; overflow-wrap: anywhere; }

.colophon { margin: 34px 0 0; font-size: .8125rem; line-height: 1.55; color: var(--haze); }
.theme { margin: 6px 0 0; }
.theme button {
  min-height: 44px; padding: 0;
  font: 700 .8125rem/1 var(--sans); color: var(--ink); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}

/* ── the code, full screen and always black on white so a camera reads it ── */
dialog.qr {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: #fff; color: #000;
}
dialog.qr::backdrop { background: #fff; }
.qr-in {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px; text-align: center;
}
.qr-in svg { width: min(78vw, 56vh); height: auto; display: block; }
.qr-in p { margin: 0; }
.qr-in .who { font-weight: 700; font-size: 1.375rem; letter-spacing: -.02em; }
.qr-in .url { font: 400 .9375rem/1 var(--mono); }
.qr-in button {
  margin-top: 8px; min-height: 48px; padding: 0 26px;
  font: 700 1rem/1 var(--sans); color: #fff; background: #000; border: 0; cursor: pointer;
}
.qr-in button:focus-visible { outline: 2px solid #000; outline-offset: 3px; }

/* ── wider screens: the text keeps to the left and the right half is open airspace ── */
@media (min-width: 860px) {
  .hero .sub { font-size: 1.0625rem; }
  .actions { max-width: 24rem; }
  .bar-status { font-size: .75rem; }
}

/* phones: the right margin is the flight corridor, so the text keeps out of it */
@media (max-width: 859px) {
  .sec > * { max-width: calc(100% - 64px); }
}

@media (max-width: 350px) {
  .actions { flex-direction: column; }
  .bar-nav a { display: none; }
}

@media print {
  #scene, .bar, .actions, .more, dialog.qr, .theme { display: none !important; }
  :root { --paper: #fff; --ink: #000; --haze: #333; }
  .hero { min-height: 0; padding-top: 0; }
  .sec { margin-top: 36px; }
  .sec.contact { min-height: 0; display: block; }
}