/* LAUNCHPAD CAPITAL MARKETS. One proof sheet of one issue.
   Every proportion below is read off art/ref/dispatch-card.jpg (736 x 1104) and set as a share of
   the page COLUMN, never of the window: his column is 606 of 736 (82.3%), ours is 1120.
   Ratios kept: column/frame 0.823, crop mark arm/column 0.048, mark thickness/column 0.0082,
   display/column 0.069 (41.6 of 606 -> 64 of 1120 with a short line), body 15, dateline 14. */

@font-face {
  font-family: "VGA";
  src: url("/fonts/Web437_IBM_VGA_8x16.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JB";
  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JB";
  src: url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JB";
  src: url("/fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --field: #000000;          /* 85.1% of his frame */
  --ink: #f8f8f8;            /* his white */
  --acid: #39ff14;           /* his green, measured */
  --acid-dim: rgba(57, 255, 20, 0.62);   /* text weight: 5.4:1 on the field */
  --acid-hair: rgba(57, 255, 20, 0.34);  /* rules and frames, never text */
  --acid-faint: rgba(57, 255, 20, 0.14);
  --grey: #a9afa7;           /* his grey, lifted to 9.2:1 on black */
  --grey-dim: #7e847d;       /* 5.5:1, separators and disabled only */
  --imprint: #101018;        /* his dark strip */
  --up: #39ff14;
  --down: #ff6a00;           /* the orange of his flying object */
  --paper: #f8f8f8;

  --column: 1120px;
  --gutter: 72px;            /* room for the crop marks outside the column */
  --mark-arm: 52px;
  --mark-thick: 5px;
  --row: 44px;
  --cell: 8px;               /* the VGA face draws an 8 x 16 cell: every pixel size is a multiple */
}

* { box-sizing: border-box; }
html { background: var(--field); }
body {
  margin: 0;
  /* no background here: a fixed layer at a negative z-index would paint behind it and vanish */
  color: var(--ink);
  font: 400 15px/24px "JB", ui-monospace, "Courier New", monospace;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--acid); color: #000; }

/* ---- the sheet: one column, crop marks outside it ---------------------------------------- */
.sheet {
  width: min(var(--column), 100vw - var(--gutter) * 2);
  margin: 0 auto;
  padding: 92px 0 120px;
  position: relative;
  z-index: 2;
}
.marks { position: absolute; inset: 40px calc(var(--gutter) * -0.62); pointer-events: none; z-index: 3; }
.marks i {
  position: absolute;
  width: var(--mark-arm); height: var(--mark-arm);
  background: url("/img/crop-mark.png") no-repeat center / 100% 100%;
  image-rendering: pixelated;
}
.marks i:nth-child(1) { top: 0; left: 0; }
.marks i:nth-child(2) { top: 0; right: 0; transform: scaleX(-1); }
.marks i:nth-child(3) { bottom: 0; left: 0; transform: scaleY(-1); }
.marks i:nth-child(4) { bottom: 0; right: 0; transform: scale(-1); }

/* ---- rules: his two weights, both generated tiles ----------------------------------------- */
.rule, .rule-heavy, .rule-pale {
  height: 1px; border: 0; margin: 0;
  background: url("/img/rule-hair.png") repeat-x center / auto 100%;
}
.rule-heavy { height: 3px; background-image: url("/img/rule-heavy.png"); }
.rule-pale { background-image: url("/img/rule-pale.png"); }

/* ---- the issue line: his dateline, and it is the navigation ------------------------------- */
.issue {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 0;
  margin: 18px 0 0; padding: 0;
  font: 400 16px/24px "VGA", "JB", monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--acid);
  will-change: transform; /* grey antialiasing for the bitmap face on Windows Chrome */
}
.issue .sep { color: var(--acid-dim); padding: 0 12px; }
.issue > span { display: flex; align-items: center; flex-wrap: wrap; }
.issue a {
  color: var(--acid); text-decoration: none; white-space: nowrap;
  padding: 9px 16px; margin: 0 -4px;
}
.issue a:hover { background: var(--acid-faint); }
.issue a[aria-current="page"] { background: var(--acid); color: #000; }
.issue a:focus-visible { outline: 2px solid var(--paper); outline-offset: 1px; }
.issue .stamp { color: var(--grey); letter-spacing: 0.08em; }

/* ---- the lead: his headline, one green word ----------------------------------------------- */
.lead {
  position: relative;
  margin: 46px 0 0;
  font: 400 64px/1.25 "VGA", "JB", monospace;
  letter-spacing: 0;
  color: var(--ink);
  max-width: 62%;
  will-change: transform;
}
.lead b { font-weight: 400; color: var(--acid); }
.lead .sub { display: block; margin-top: 8px; font-size: 0.5em; color: var(--grey); }

/* his object leaves the column at the top right and overlaps the set */
/* his object: it leaves the column on the right and the set never runs into it, because the lead
   keeps 62% of the column and the object starts after it */
.flier {
  position: absolute;
  top: 132px; right: calc(var(--gutter) * -0.88);
  width: min(34%, 390px); height: auto;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 0;
}

/* a ch max-width is an overflow on a phone, not a column: min() keeps the text inside its box */
.say { margin: 30px 0 0; max-width: min(72ch, 100%); color: var(--grey); font-size: 15px; line-height: 26px;
  overflow-wrap: anywhere; min-width: 0; } /* a 44 character address does not break on its own */
.say strong { color: var(--ink); font-weight: 500; }
.say a { color: var(--acid); text-underline-offset: 3px; }

/* ---- keys --------------------------------------------------------------------------------- */
.key {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 22px;
  font: 400 16px/1 "VGA", "JB", monospace; letter-spacing: 0.08em; text-transform: uppercase;
  color: #000; text-decoration: none; cursor: pointer;
  border: 0; background-color: var(--acid);
  border-image: url("/img/key-green.png") 6 fill / 6px / 0 stretch;
  will-change: transform;
  transition: transform 0.08s ease, filter 0.12s ease;
}
.key:hover { filter: brightness(1.12); }
.key:active { transform: translateY(1px); }
.key:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

.key-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 18px;
  font: 400 16px/1 "VGA", "JB", monospace; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; cursor: pointer; border: 0;
  background-color: var(--imprint);
  border-image: url("/img/key-dark.png") 6 fill / 6px / 0 stretch;
  will-change: transform;
  transition: transform 0.08s ease, filter 0.12s ease;
}
.key-dark:hover { filter: brightness(1.5); }
.key-dark:active { transform: translateY(1px); }
.key-dark:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.key-dark[aria-disabled="true"] { opacity: 0.74; cursor: default; pointer-events: none; }
.key-dark img { height: 15px; width: auto; display: block; }

/* ---- the imprint: his dark strip, grown into the window that carries the mint -------------- */
.imprint {
  margin: 44px 0 0;
  border: 0;
  border-image: url("/img/imprint-frame.png") 6 fill / 6px / 0 stretch;
  background-color: var(--imprint);
}
.imprint-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 28px; min-height: 46px;
  font: 400 16px/20px "VGA", "JB", monospace; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--acid);
  background: rgba(57, 255, 20, 0.07);
  will-change: transform;
}
.imprint-bar .clock { color: var(--grey); }
.imprint-body { padding: 24px 28px 26px; }
.imprint-label {
  font: 400 16px/1 "VGA", "JB", monospace; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grey); margin: 0 0 10px; will-change: transform;
}
.mint {
  display: block; width: 100%;
  font: 500 16px/26px "JB", monospace; color: var(--acid);
  overflow-wrap: anywhere; min-width: 0; user-select: all;
}
.mint.empty { color: var(--grey-dim); user-select: none; }
.imprint-keys { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ---- the table: the war score ------------------------------------------------------------- */
.band { margin: 76px 0 0; }
.band-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  margin-bottom: 14px;
}
.band-head h2 {
  margin: 0;
  font: 400 32px/1.25 "VGA", "JB", monospace; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink); will-change: transform;
}
.band-head .note { font-size: 15px; color: var(--grey); }

/* every cell carries a rule, so the checker reads the cell as a box: one em of air on the sides,
   and the table is pulled out by that em so the first column still starts on the column line */
.table-scroll { overflow-x: auto; overflow-y: hidden; margin: 0 -16px; -webkit-overflow-scrolling: touch; }
.table { width: 100%; min-width: 720px; border-collapse: collapse; }
.table th, .table td { text-align: right; padding: 11px 16px; height: var(--row); white-space: nowrap; }
.table th:first-child, .table td:first-child { text-align: left; }
.table thead th {
  font: 400 16px/20px "VGA", "JB", monospace; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--grey); font-weight: 400; height: 44px;
  white-space: normal; vertical-align: bottom; padding-bottom: 9px;
  border-bottom: 1px solid var(--acid-hair);
  will-change: transform;
}
.table tbody td { font: 400 15px/1.3 "JB", monospace; color: var(--ink); border-bottom: 1px solid rgba(248,248,248,0.09); }
.table tbody tr:hover td { background: rgba(57, 255, 20, 0.05); }
.table .pad { font: 400 16px/22px "VGA", "JB", monospace; letter-spacing: 0.02em; will-change: transform; }
.table .pad a { color: var(--ink); text-decoration: none; }
.table .pad a:hover { color: var(--acid); }
.table .num { font-variant-numeric: tabular-nums; }
.table .big { font-size: 16px; font-weight: 500; }
.table .dim { color: var(--grey); }
.table .up { color: var(--up); }
.table .down { color: var(--down); }
.table .tag {
  font: 400 16px/20px "VGA", "JB", monospace; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--grey-dim); will-change: transform;
}
.table .tag.in { color: var(--acid); }

/* the weight bar is the pad's share, drawn as the printed rule of the sheet */
.wbar { display: block; height: 7px; margin-top: 6px; background: rgba(248,248,248,0.10); }
.wbar i { display: block; height: 100%; background: var(--acid); }

/* ---- chart -------------------------------------------------------------------------------- */
.chart-wrap { position: relative; margin-top: 10px; }
canvas.chart { display: block; width: 100%; height: 260px; }
.legend { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 14px; font-size: 15px; color: var(--grey); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 14px; height: 7px; display: block; }

/* ---- plain blocks ------------------------------------------------------------------------- */
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
.rows { margin: 0; padding: 0; list-style: none; }
.rows { margin: 0 -16px; }
.rows li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  min-height: 44px; padding: 11px 16px; border-bottom: 1px solid rgba(248,248,248,0.09);
}
.rows .k { color: var(--grey); font-size: 15px; }
.rows .v { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.steps { counter-reset: s; margin: 0; padding: 0; list-style: none; }
.steps li { position: relative; padding: 0 0 26px 62px; }
.steps li::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font: 400 32px/1 "VGA", "JB", monospace; color: var(--acid); will-change: transform;
}
.steps h3 { margin: 0 0 8px; font: 400 16px/24px "VGA", "JB", monospace; letter-spacing: 0.02em; color: var(--ink); will-change: transform; }
.steps p { margin: 0; color: var(--grey); font-size: 15px; line-height: 25px; }

.foot-note { margin-top: 18px; font-size: 15px; color: var(--grey-dim); }
.empty-state { padding: 26px 0; color: var(--grey); font-size: 15px; }
input[type="text"] {
  font: 400 15px/24px "JB", monospace; color: var(--ink); background: #07090a;
  border: 1px solid var(--acid-hair); padding: 12px 18px; min-height: 48px; width: 100%;
}
input[type="text"]:focus-visible { outline: 2px solid var(--acid); outline-offset: 1px; }

/* ---- the field is alive: an even scan treatment and the tape that drifts behind the sheet --- */
.field { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--field); }
.field canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.85; }
.scan {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(57,255,20,0.030) 0 1px, transparent 1px 4px);
}

@media (max-width: 1280px) { .lead { max-width: 64%; font-size: 48px; } }
@media (max-width: 980px) {
  :root { --gutter: 34px; --mark-arm: 26px; }
  .cols { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .flier { width: 42%; top: 164px; right: -18px; }
  .lead { max-width: 100%; font-size: 48px; }
}
@media (max-width: 680px) {
  :root { --gutter: 22px; --mark-arm: 17px; }
  .sheet { padding: 60px 0 90px; }
  .marks { inset: 24px -16px; }
  /* on a phone the object comes out of the corner and into the flow, right aligned above the
     lead, because absolutely placed it lands on the issue line and eats two words of it */
  .flier { position: static; display: block; width: 58%; margin: 18px -14px 0 auto; }
  .lead { margin-top: 34px; font-size: 32px; }
  .band { margin-top: 56px; }
  .imprint-body { padding: 20px 20px 22px; }
  .imprint-bar { padding: 13px 20px; flex-wrap: wrap; min-height: 48px; }
  .issue .sep { padding: 0 7px; }

}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .field canvas { display: none; }
}

/* ---- the opening block of a page that has no flying object: the lead on the left, the numbers
   that page is about on the right, so the window is filled with content and not with air ------ */
.lede { display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 34fr); gap: 48px; align-items: start; }
.lede .lead { max-width: 100%; }
.facts { margin: 52px 0 0; }
.facts h2 {
  margin: 0 0 12px; font: 400 16px/20px "VGA", "JB", monospace;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); will-change: transform;
}
.facts ul { margin: 0 -16px; padding: 0; list-style: none; }
.facts li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 16px; min-height: 44px; border-bottom: 1px solid rgba(248,248,248,0.09);
}
.facts .k { color: var(--grey); font-size: 15px; }
.facts .v { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.facts .v.on { color: var(--acid); }
@media (max-width: 980px) {
  .lede { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .facts { margin-top: 28px; }
}

/* a pad whose score is under question: the brief asks for it to be marked where the score is */
.table .flag {
  display: block; margin-top: 4px;
  font: 400 16px/20px "VGA", "JB", monospace; letter-spacing: 0.06em;
  color: var(--down); will-change: transform;
}

/* the number the wallet test left, printed under the raw one so neither can pass for the other */
.table .under {
  margin-top: 2px; font: 400 15px/18px "JB", monospace; color: var(--grey); font-weight: 400;
}
.table .under.up { color: var(--up); }
.table .under.down { color: var(--down); }
.table .under.dim { color: var(--grey-dim); }