/* x4ssh site, from the design kit (design/README.md): the panel's two inks, reversed, and nothing else. Tone is dither,
   never a grey. No radii: corners step, the way a pixel does. The band along the top and bottom is the status bar. */

@font-face {
  font-family: "DejaVu Sans Mono";
  src: url("/fonts/dejavu-sans-mono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DejaVu Sans Mono";
  src: url("/fonts/dejavu-sans-mono-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #222222;
  --paper: #e2e0d8;
  --mono: "DejaVu Sans Mono", ui-monospace, Menlo, monospace;
  /* A rectangle with 4px steps in its corners */
  --steps: polygon(
    12px 0, calc(100% - 12px) 0, calc(100% - 12px) 4px, calc(100% - 8px) 4px, calc(100% - 8px) 8px, calc(100% - 4px) 8px, calc(100% - 4px) 12px, 100% 12px,
    100% calc(100% - 12px), calc(100% - 4px) calc(100% - 12px), calc(100% - 4px) calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) calc(100% - 4px), calc(100% - 12px) calc(100% - 4px), calc(100% - 12px) 100%,
    12px 100%, 12px calc(100% - 4px), 8px calc(100% - 4px), 8px calc(100% - 8px), 4px calc(100% - 8px), 4px calc(100% - 12px), 0 calc(100% - 12px),
    0 12px, 4px 12px, 4px 8px, 8px 8px, 8px 4px, 12px 4px
  );
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 1rem/1.5 var(--mono);
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; height: auto; }
img[src$=".svg"] { image-rendering: pixelated; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

h1, h2, h3 { font-weight: 700; line-height: 1.2; margin: 0; }
h2 { font-size: clamp(1.5rem, 3vw, 1.75rem); text-wrap: balance; }
h3 { font-size: 1rem; }
p, ul, ol { margin: 0; }

.wrap { width: 100%; max-width: 1040px; margin-inline: auto; padding-inline: 20px; }

.skip { position: absolute; left: 20px; top: -60px; background: var(--paper); color: var(--ink); padding: 8px 20px; z-index: 2; }
.skip:focus { top: 60px; }

/* The status bar, reversed for a page on ink */
.band { background: var(--paper); color: var(--ink); }
.band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 20px; min-height: 40px; }
.band nav ul { list-style: none; padding: 0; display: flex; gap: 20px; }
.band nav a { text-decoration: none; }
.band nav a:hover { text-decoration: underline; }

/* Paper going down into ink, a dither band at a time */
.fade { height: 24px; background: url("/img/fade.png") repeat-x 0 0 / 4px 24px; image-rendering: pixelated; }
.fade.up { transform: scaleY(-1); }

.hero { padding-top: 40px; }
.hero-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px 60px; }
.hero h1 { font-size: clamp(2rem, 4.2vw, 2.75rem); text-wrap: balance; }
.hero h1 .line { display: block; white-space: nowrap; }
.cursor { display: inline-block; width: 0.6em; height: 0.92em; margin-left: 0.1em; vertical-align: -0.14em; background: var(--paper); animation: blink 2s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.lede { margin-top: 20px; max-width: 44ch; font-size: 1.0625rem; text-wrap: pretty; }
.actions { position: relative; z-index: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 28px; }
.btn { position: relative; display: inline-block; padding: 10px 20px; background: var(--paper); color: var(--ink); font-weight: 700; text-decoration: none; }
.btn::after { content: ""; position: absolute; inset: 6px -6px -6px 6px; z-index: -1; background: url("/img/d50.png") 0 0 / 4px 4px; image-rendering: pixelated; }
.btn:hover { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 2px var(--paper); }
.req { margin-top: 24px; font-size: 0.875rem; }

/* The snail on a piece of the panel, its shadow the only kind the kit has. One frame a second, and it stops by itself
   after 40 seconds, as it does on the device. */
.plate { position: relative; justify-self: end; margin: 0 12px 12px 0; }
.plate::before { content: ""; position: absolute; inset: 12px -12px -12px 12px; background: url("/img/d50.png") 0 0 / 4px 4px; image-rendering: pixelated; clip-path: var(--steps); }
.tile { position: relative; padding: 20px; background: var(--paper); clip-path: var(--steps); }
.snail { width: 447px; height: 267px; background: url("/img/snail.png") 100% 0 / 500% 100% no-repeat; image-rendering: pixelated; animation: sweep 4s steps(4, end) 10; }
@keyframes sweep { from { background-position-x: 0%; } to { background-position-x: 100%; } }
@media (max-width: 1039px) {
  .hero-top { grid-template-columns: minmax(0, 1fr); }
  .plate { justify-self: start; }
  .tile { padding: 8px; }
  .snail { width: 298px; height: 178px; }
}

/* The hero's animation (site/hero). Its stage brings its own band above the device; the height is held at the stage's
   shape before the script loads. Its phone design (below 560px) runs the device off both edges of the screen, past
   the column's padding. The bleed starts 40px wider than the phone design, so the stage, measuring a figure that grows
   by that padding, never draws the phone design without it. */
.hero-demo { margin: 0; aspect-ratio: 1000 / 680; }
.hero-demo noscript img { width: 100%; margin-top: 40px; }
@media (max-width: 599px) { .hero-demo { margin-inline: -20px; } }
@media (max-width: 559px) { .hero-demo { aspect-ratio: 360 / 461; } }

.section { padding-top: 60px; }
.hero + .section { padding-top: 20px; }
.note { margin-top: 8px; }

.decks { display: grid; gap: 20px; margin-top: 20px; }
@media (min-width: 46rem) { .decks { grid-template-columns: 1fr 1fr; } }
.decks figure { margin: 0; }
.decks img { width: 100%; border: 2px solid var(--paper); }
figcaption { margin-top: 12px; font-size: 0.875rem; }

/* Each point is a command, on its own small status bar */
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; list-style: none; padding: 0; }
.trio li { box-shadow: inset 0 0 0 2px var(--paper); }
.trio h3 { padding: 8px 12px; background: var(--paper); color: var(--ink); }
.trio p { padding: 12px; text-wrap: pretty; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; margin-top: 20px; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: flex; align-items: flex-start; gap: 12px; text-wrap: pretty; }
.steps li::before { content: counter(step); flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--paper); color: var(--ink); font-weight: 700; }

.back { margin-top: 20px; }
code { font: inherit; font-weight: 700; }

.site-footer { margin-top: 60px; }
.foot { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px 20px; padding-block: 40px; font-size: 0.875rem; }
@media (max-width: 760px) { .foot { grid-template-columns: repeat(2, 1fr); } .foot .about { grid-column: 1 / -1; } }
.foot h2 { margin-bottom: 12px; font-size: 0.875rem; }
.foot ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.about img { margin-bottom: 20px; }
.about p { max-width: 30ch; }
.legal { font-size: 0.8125rem; }
.legal .wrap { padding-block: 10px; }

.lost { min-height: 100vh; display: grid; place-content: center; }
.lost img { border: 2px solid var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .cursor, .snail { animation: none; }
}

.nb { white-space: nowrap; }

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