/* ===========================================================================
   Payroll: one printed sheet.
   Three inks only (neon green paper, black ink, one white inlay), one bitmap
   face at every size, flat everywhere, and exactly one depth trick: a hard
   offset shadow with no blur under the white inlay. Read off art/ref/.
   =========================================================================== */

@font-face {
  font-family: "Departure Mono";
  src: url("/fonts/DepartureMono-Regular.woff2") format("woff2"),
       url("/fonts/DepartureMono-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --green: #39ff14;
  --ink: #000000;
  --paper: #ffffff;

  /* the face sits on an 11 px grid: only multiples stay crisp */
  --t-label: 22px;
  --t-body: 22px;
  --t-plate: 33px;
  --t-section: 44px;
  --t-display: 66px;
  --t-figure: 66px;

  --gutter: clamp(12px, 1.4vw, 26px);
  --pad-x: clamp(20px, 3vw, 44px);
  --gap: 64px;
  --gap-lg: 110px;

  --plate-pad-y: 44px;
  --plate-pad-x: 48px;
  --shadow: 14px 14px 0 var(--ink);
}

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

html { background: var(--ink); }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: "Departure Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--t-body);
  line-height: 2;
  font-synthesis: none;
  -webkit-font-smoothing: none;
  overflow-x: hidden;
}

img { max-width: 100%; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 16px 26px;
  z-index: 10;
}
.skip:focus { left: 8px; top: 8px; }

:focus-visible {
  outline: 4px solid var(--ink);
  outline-offset: 3px;
}
.plate :focus-visible,
.band :focus-visible { outline-color: var(--green); }

/* --------------------------------------------------------------- the band */
.band__short { display: none; }

.band {
  margin: 0;
  padding: 26px var(--pad-x);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-label);
  line-height: 1.5;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: center;
}

/* -------------------------------------------------------------- the sheet */
.sheet {
  background: var(--green);
  margin: 0 var(--gutter) var(--gutter);
  padding: 44px 0 96px;
  min-height: 1000px;
}

.col {
  width: min(1560px, 100%);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 56px;
  align-items: start;
}
.col > .chips { grid-area: 1 / 1 / 2 / 2; margin-bottom: 52px; }
.col > .lockup { grid-area: 1 / 2 / 3 / 3; }
.col > #view { grid-area: 2 / 1 / 3 / 3; min-width: 0; }


/* ------------------------------------------- chips left, the lockup right */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 1000px;
}

.chip {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  max-width: 100%;
  overflow-wrap: anywhere;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 14px 30px;
  border: 3px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: var(--t-label);
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
}
.chip:hover { background: #111; }
.chip[aria-current="page"] {
  background: var(--green);
  color: var(--ink);
}
.chip--ghost {
  background: transparent;
  color: var(--ink);
}
.chip--ghost:hover { background: rgba(0, 0, 0, 0.08); }
.chip:active { transform: translate(2px, 2px); }

.lockup {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 28px;
  text-align: right;
}
.lockup__name { display: block; }
.lockup__wordmark {
  display: block;
  width: clamp(190px, 16vw, 292px);
  height: auto;
}
.lockup__ticker {
  display: block;
  margin: 2px 0 0;
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  line-height: 1.4;
}
.lockup__sprite {
  display: block;
  width: 104px;
  height: auto;
  image-rendering: pixelated;
}

/* ------------------------------------------------------ the printed blocks */
.eyebrow {
  margin: 0 0 30px;
  font-size: var(--t-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.display {
  margin: 0;
  font-size: var(--t-display);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0.01em;
  max-width: min(30ch, 100%);
}

/* The one paragraph that stays on the paper gets a short measure: thin black strokes on a field
   this bright are hardest to track over a long line. */
.lede {
  margin: 34px 0 0;
  max-width: 64ch;
  font-size: var(--t-body);
  letter-spacing: 0.02em;
}

.rule {
  height: 3px;
  background: var(--ink);
  margin: 46px 0 var(--gap);
  border: 0;
}

.section-title {
  margin: 0 0 8px;
  font-size: var(--t-section);
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.section-note {
  margin: 0 0 32px;
  max-width: 74ch;
  letter-spacing: 0.02em;
}

.block + .block,
.inlay + .block,
.plate + .block { margin-top: var(--gap-lg); }

/* ------------------------------------------------------ the black plate */
.plate {
  background: var(--ink);
  color: var(--paper);
  padding: var(--plate-pad-y) var(--plate-pad-x);
}
.plate__title {
  margin: 0 0 18px;
  color: var(--green);
  font-size: var(--t-label);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
h3.plate__title { margin: 0 0 18px; }
.plate__note {
  margin: 0 0 30px;
  color: var(--paper);
  max-width: 74ch;
}
.plate a { color: var(--paper); }

/* ------------------------------------------ the white inlay with the shadow */
.inlay {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.inlay__strip {
  background: var(--ink);
  color: var(--paper);
  padding: 18px 28px;
  font-size: var(--t-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
}
.inlay__strip b { color: var(--paper); font-weight: 400; }
.inlay__body { padding: 40px 44px; }

/* ---------------------------------------------------------------- the keys */
.keys {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.key {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 60px;
  padding: 14px 30px;
  border: 3px solid var(--ink);
  background: var(--green);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-label);
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
}
.key img { width: 28px; height: 28px; display: block; }
.key:hover { background: #57ff3c; }
.key:active { transform: translate(2px, 2px); }

.key--dark {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--paper);
}
.key--dark:hover { background: #151515; }

/* an unavailable action is printed in outline and says why: never a greyed fill */
.key[aria-disabled="true"],
.key:disabled {
  background: transparent;
  color: var(--ink);
  cursor: not-allowed;
}
.key[aria-disabled="true"]:active,
.key:disabled:active { transform: none; }
.plate .key[aria-disabled="true"],
.plate .key:disabled,
.step .key[aria-disabled="true"],
.step .key:disabled {
  color: var(--paper);
  border-color: var(--paper);
  background: transparent;
}
.inlay .key--dark[aria-disabled="true"],
.inlay .key--dark:disabled {
  color: var(--ink);
  border-color: var(--ink);
  background: transparent;
}
.key[aria-disabled="true"] img,
.key:disabled img { opacity: 0.55; }

/* ----------------------------------------------------------------- the rows */
/* Green is the paper and the accent fill, never the ink on black: his reference uses green TEXT
   exactly once, for the tag on its black plate, and everything else on black is white. Neon green
   type on black blooms and runs the words together at reading size. */
/* A dot rule: how a one bit press prints a light hairline. Keeps the sheet on three inks. */
.rows { display: block; }
.row {
  position: relative;
  display: grid;
  gap: 8px 32px;
  align-items: center;
  padding: 26px 0;
}
.row::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--paper) 0 2px, transparent 2px 5px);
}
.row:last-child::after { display: none; }
/* A long handle wraps rather than running out of its plate on the narrowest phone. */
.row > *, .step > * { min-width: 0; overflow-wrap: anywhere; }
.row__head {
  padding: 0 0 16px;
  color: var(--paper);
  font-size: var(--t-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.row__head::after { height: 3px; background: repeating-linear-gradient(90deg, var(--paper) 0 3px, transparent 3px 6px); }
.row a { color: var(--paper); }
.row__big { font-size: 33px; line-height: 1.3; }
.row__muted { color: var(--paper); }

.inlay .row::after { background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px); }
.inlay .row__head { color: var(--ink); }
.inlay .row__head::after { background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 6px); }
.inlay .row a,
.inlay .row__muted { color: var(--ink); }

/* -------------------------------------------------------------- the figure */
.figure {
  font-size: var(--t-figure);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--paper);
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
.figure--ink { color: var(--ink); }
.caret {
  display: inline-block;
  width: 0.5em;
  height: 0.08em;
  background: currentColor;
  margin-left: 0.12em;
  animation: blink 1.06s steps(1, end) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.stamp { height: 62px; width: auto; display: block; image-rendering: pixelated; }

/* The heading a cell prints for itself once the row stacks. */
.row > [data-k]::before {
  content: attr(data-k);
  display: none;
  color: var(--paper);
  font-size: var(--t-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.inlay .row > [data-k]::before { color: var(--ink); }

/* --------------------------------------------------------- the address line */
/* The address is the one string people read character by character, so it is set a step larger
   than the body and given room between the glyphs. The string itself is never altered: it stays one
   selectable run, so a copy is a copy. */
.mint {
  font-size: 33px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0 0 30px;
}
/* The honest "no address yet" line is a sentence, not an address: it reads at body size. */
.mint--empty { font-size: var(--t-body); line-height: 2; }

/* ----------------------------------------------------------------- the steps */
/* the steps are rows of one plate, each with its own printed object at the left */
.step {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 3fr) minmax(0, 8fr);
  gap: 10px 36px;
  align-items: start;
  padding: 30px 0;
}
.step::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--paper) 0 2px, transparent 2px 5px);
}
.step:last-child::after { display: none; }
.step:last-child { padding-bottom: 0; }
.step:first-child { padding-top: 0; }
.step img {
  width: 96px;
  height: auto;
  image-rendering: pixelated;
}
.step h3 {
  margin: 0;
  color: var(--paper);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.step p { margin: 0; }

/* ------------------------------------------------------------------- forms */
.field { display: block; margin-bottom: 28px; }
.field span {
  display: block;
  margin-bottom: 12px;
  font-size: var(--t-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.field input,
.field select {
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 14px 22px;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-body);
}
.plate .field input,
.plate .field select {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--paper);
}
.field small {
  display: block;
  margin-top: 10px;
  font-size: var(--t-body);
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }

.notice {
  margin: 26px 0 0;
  padding: 22px 26px;
  border: 3px solid currentColor;
}

/* The risk line lives inside a plate, so it is white on black like everything else that has to
   be read rather than glanced at. */
.risk {
  margin: 30px 0 0;
  font-size: var(--t-body);
  max-width: 74ch;
  color: var(--paper);
}

.hidden { display: none !important; }

/* ------------------------------------------------------------- the widths */
@media (max-width: 1200px) {
  :root { --t-display: 55px; --gap: 52px; --gap-lg: 88px; }
  .step { grid-template-columns: 96px minmax(0, 3fr) minmax(0, 6fr); gap: 10px 28px; }
}

/* Under this the column cannot hold the chip row and the mark side by side, so the sheet stacks:
   the name first, then the chips, then the print. Nothing is squeezed. */
@media (max-width: 1100px) {
  .col { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .col > .lockup { grid-area: auto; order: 1; gap: 22px; margin-bottom: 40px; }
  .col > .chips { grid-area: auto; order: 2; margin-bottom: 46px; }
  .col > #view { grid-area: auto; order: 3; }
  .lockup__ticker { display: none; }
  .lockup { align-items: flex-end; }
  .lockup__sprite { width: 84px; }
  .lockup__wordmark { width: min(276px, 54vw); }
}

/* The rows stack here, so nothing has to fit 22 px type into a sixty pixel column. */
@media (max-width: 760px) {
  .row { grid-template-columns: 1fr !important; gap: 4px 0; padding: 24px 0; }
  .row__head { display: none; }
  .row > [data-k]::before { display: block; margin-bottom: 2px; }
  .row > [data-k] + [data-k] { margin-top: 16px; }
  .figure { display: block; }
}

@media (max-width: 900px) {
  :root {
    --t-display: 44px;
    --t-section: 33px;
    --plate-pad-y: 34px;
    --plate-pad-x: 30px;
    --gap: 46px;
    --gap-lg: 74px;
    --shadow: 10px 10px 0 var(--ink);
  }
  .display { max-width: none; }
  .grid2 { grid-template-columns: 1fr; }
  .row__big { font-size: 26.4px; }
  .figure { font-size: 44px; }
  .inlay__body { padding: 30px 30px; }
  .mint { font-size: var(--t-body); }
  .inlay__strip { padding: 16px 24px; }
}

@media (max-width: 560px) {
  :root { --t-display: 33px; --t-figure: 33px; --gap: 36px; --gap-lg: 58px; --pad-x: 20px; }
  .band__long { display: none; }
  .band__short { display: inline; }
  .band { padding: 18px var(--pad-x); letter-spacing: 0.06em; }
  .sheet { padding-top: 30px; }
  .col > .lockup { margin-bottom: 30px; }
  .col > .chips { margin-bottom: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .col > .chips .chip { padding: 14px 22px; }
  .col > .chips .chip { width: 100%; }
  .col > .chips .chip:nth-child(5) { grid-column: 1 / -1; }
  .lede { margin-top: 26px; }
  .rule { margin: 32px 0 var(--gap); }
  .step { grid-template-columns: 76px minmax(0, 1fr); gap: 14px 22px; }
  .step img { width: 72px; }
  .step h3 { align-self: center; }
  .step p { grid-column: 1 / -1; }
  .chips { gap: 10px; }
  .chip, .key { padding: 13px 26px; gap: 12px; }
  /* on a phone every action is a full width row, so the mark and the label keep their em of air */
  .keys > .key { width: 100%; justify-content: flex-start; text-align: left; }
  .figure { font-size: 33px; }
  .row__big { font-size: 22px; }
  .stamp { height: 44px; }
  /* A 33 px figure needs a full em at its sides, even on the narrowest phone. */
  .inlay__body { padding: 26px 32px; }
  .plate { padding: 30px 32px; }
}

/* below this a two up chip row cannot keep an em at its sides, so the chips stack */
@media (max-width: 360px) {
  .col > .chips { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}