/* Deep Nacre — deepnacre.com (landing, verification register, 404)
   White ground, near-black ink, neutral greys. One dark blue, used only for meaning (focus, selection, copied).
   Fonts are self-hosted latin subsets; notices in fonts/OFL.txt. */

@font-face {
  font-family: "Prata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/prata-latin.v1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/public-sans-latin.v1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin.v1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #ffffff;
  --ink: #111111;
  --body: #2a2a2a;
  --muted: #5c5c5c;
  --dim: #6b6b6b;
  --line: #8a8a8a;
  --rule: #d6d6d6;
  --rule-soft: #e9e9e9;
  --rule-strong: #111111;
  --accent: #1f3a5f;
  --sel: #dbe3ee;
  --serif: "Prata", Georgia, "Times New Roman", Times, serif;
  --sans: "Public Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --gap: 0.6ch;
  --gap-mid: 1.3ch;
  --label-col: 10.5rem;
  --measure: 38rem;
  --mark: 28px;
  --page: 78rem;
  color-scheme: light;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
}

p {
  text-wrap: pretty;
}

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.wrap {
  width: min(100% - 2.5rem, var(--page));
  margin-inline: auto;
}

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

.skip {
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  transform: translateY(-150%);
  background: var(--ink);
  color: var(--paper);
  padding: 0.5rem 0.75rem;
  z-index: 2;
}

.skip:focus {
  transform: none;
}

.nw {
  white-space: nowrap;
}

dl,
dt,
dd {
  margin: 0;
}

/* Masthead: the lockup at left, two links at right, one black rule beneath.
   Logo proportions: cap height = 0.72 x mark; Prata caps are 0.8 em, so the wordmark is set at 0.9 x mark. */

.mast {
  border-bottom: 1px solid var(--rule-strong);
}

/* Wraps at any width (the links drop under the lockup, right-aligned) so a large root font never overflows. */
.mast-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 1.1rem 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--mark) * 0.27);
  text-decoration: none;
}

.mark {
  display: block;
  flex: none;
  width: var(--mark);
  height: var(--mark);
  color: var(--ink);
}

.mark .n {
  fill: var(--paper);
}

.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(var(--mark) * 0.9);
  line-height: 1;
  white-space: nowrap;
  transform: translateY(0.085em);
}

.nav {
  display: flex;
  gap: 1.75rem;
  margin-inline-start: auto;
}

.nav a,
.kicker,
.label {
  margin: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* The hit areas are taller than the text (34.6 px; 46 px with a touch pointer): the negative block margins
   give the extra room back to the flex line, so the masthead keeps its height. */
.nav a {
  text-decoration: none;
  padding: 0.6rem 0;
  margin: -0.6rem 0;
}

.brand {
  padding: 0.5rem 0;
  margin: -0.5rem 0;
}

.nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.85em;
  text-decoration-skip-ink: none;
}

@media (pointer: coarse) {
  .nav a {
    padding: 1rem 0;
    margin: -1rem 0;
  }

  .brand {
    padding: 0.6rem 0;
    margin: -0.6rem 0;
  }
}

.nav a:hover {
  color: var(--ink);
}

/* Hero */

.hero {
  padding: 2.5rem 0 3.25rem;
}

.hero-grid {
  display: grid;
  grid-template-areas: "copy" "act" "vis";
  gap: 0;
}

.hero-copy {
  grid-area: copy;
  max-width: 40rem;
}

.hero-visual {
  grid-area: vis;
  margin: 2.5rem 0 0;
  min-width: 0;
  max-width: 40rem;
}

.hero-actions {
  grid-area: act;
  max-width: 40rem;
}

.kicker {
  margin-bottom: 1.25rem;
}

h1 {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.375rem, 1.1rem + 3.1vw, 4rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* The headline breaks after "the" when it sits beside the drawing; elsewhere it wraps naturally. */
.hb {
  display: none;
}

.sub {
  margin: 0;
  max-width: 34rem;
  color: var(--body);
  font-size: 1rem;
  line-height: 1.6;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0 1.4rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.btn.ghost {
  background: var(--paper);
  color: var(--ink);
}

@media (hover: hover) {
  .btn:hover {
    background: var(--paper);
    color: var(--ink);
  }

  .btn.ghost:hover {
    background: var(--ink);
    color: var(--paper);
  }
}

/* The arrow is a small inline drawing in the figure's line style (the self-hosted subset has no U+2192). */
.arr {
  display: inline-block;
  flex: none;
  width: 0.9em;
  height: 0.65em;
  vertical-align: -0.02em;
  overflow: visible;
}

.arr path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The drawing (Fig. 1). Type sizes are in viewBox units and are set per breakpoint so that every label
   renders at 11-13 px whatever the drawing's on-screen width (600 units wide). */

.d {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.d text {
  font-family: var(--sans);
  fill: var(--ink);
}

.d .cap {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.d .dim,
.d .lab,
.d .of {
  fill: var(--muted);
}

.d .num {
  font-family: var(--serif);
  font-size: 26px;
  fill: var(--muted);
  letter-spacing: 0;
}

.d .lab.on,
.d .lab.lit,
.d .dim.on,
.d .dim.lit,
.d .num.on,
.d .num.lit {
  fill: var(--ink);
}

.d .griddot {
  fill: #e9e9e9;
  stroke: none;
}

.d .gridfill {
  fill: url(#grid);
  stroke: none;
}

.d .hatchline {
  stroke: #e2e2e2;
  stroke-width: 1;
}

.d path,
.d rect,
.d circle {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The mark inside the drawing: class rules outrank the element rules above, in every engine's use-tree */
.d .mk-bg {
  fill: #111;
  stroke: none;
}

.d .mk-n {
  fill: #fff;
  stroke: none;
}

.d .rule {
  stroke: var(--rule);
  stroke-width: 1;
}

.d .dash {
  stroke: var(--line);
  stroke-dasharray: 3 4;
}

/* the line each guardian signs on */
.d .sl {
  stroke: var(--line);
}

.d .ink {
  stroke: var(--ink);
  stroke-width: 1.4;
}

.d .box {
  stroke: var(--line);
  stroke-width: 1;
  stroke-linejoin: miter;
  stroke-linecap: butt;
}

.d .box.ink {
  stroke: var(--ink);
  stroke-width: 1;
}

.d .gbox {
  stroke: var(--line);
  stroke-width: 1;
  stroke-linejoin: miter;
  stroke-linecap: butt;
}

.d .gate {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.d .box,
.d .gate {
  fill: var(--paper);
}

.d .gbox {
  fill: url(#hatch);
}

.d .box.on,
.d .box.lit,
.d .gbox.on,
.d .gbox.lit {
  stroke: var(--ink);
}

.d .sig {
  stroke: var(--ink);
  stroke-width: 1.35;
}

.d .dot {
  stroke: var(--muted);
  stroke-width: 1.6;
  stroke-dasharray: 0.01 4.5;
}

.d .con {
  stroke: var(--ink);
  stroke-width: 1.4;
}

.d .held {
  stroke: var(--ink);
  stroke-width: 1;
}

.d .pearl {
  fill: var(--ink);
  stroke: none;
}

.d .pulse {
  stroke: var(--ink);
  stroke-width: 1;
  opacity: 0;
}

.d .hidden {
  visibility: hidden;
}

.d .idle {
  opacity: 0;
}

/* The markup is the finished frame. hero.js adds html.hero-anim in the same task as its first frame (which is
   this finished frame, written as inline styles), so these rules never show on their own: while the script
   is still loading, or without it, the markup stands as drawn. */
.hero-anim .d .anim,
.hero-anim .d .st {
  opacity: 0;
}

.hero-anim .d .lab.on:not(.lit),
.hero-anim .d .dim.on:not(.lit),
.hero-anim .d .num.on:not(.lit) {
  fill: var(--muted);
}

.hero-anim .d .box.on:not(.lit) {
  stroke: var(--line);
}

.hero-anim .d .gbox.on:not(.lit) {
  stroke: var(--line);
}

.hero-anim .d .lab,
.hero-anim .d .dim,
.hero-anim .d .num,
.hero-anim .d .box,
.hero-anim .d .gbox {
  transition: fill 0.35s ease, stroke 0.35s ease;
}

.d-log {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1.2em;
  margin: 0.75rem 4% 0;
  padding: 0.7rem 0 0;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
  min-height: 1.5em;
}

.d-log .ph {
  min-width: 2em;
  color: var(--ink);
}

/* Sections */

h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1.2;
  text-wrap: balance;
}

h3 {
  margin: 0 0 0.5rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.25;
}

.how {
  padding: 3.5rem 0 4rem;
  border-top: 1px solid var(--rule-strong);
}

.sec-head {
  display: grid;
  gap: 0.75rem 3rem;
  margin-bottom: 2.25rem;
}

.sec-head p {
  margin: 0;
  max-width: var(--measure);
  color: var(--muted);
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--rule);
}

.steps li {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}

.steps .num {
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
}

.steps p {
  margin: 0;
  max-width: 24rem;
  color: var(--body);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Status: four boxed cells and a mono stamp (the script fills them; without it the cells say so) */

.status {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--rule-strong);
}

.status-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  margin-bottom: 0.9rem;
}

.status-head .label {
  color: var(--ink);
}

.stamp {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
}

.status-grid {
  border: 1px solid var(--rule);
  display: grid;
}

.status-grid > div {
  padding: 1rem 1.15rem 1.1rem;
  border-bottom: 1px solid var(--rule);
}

.status-grid > div:last-child {
  border-bottom: 0;
}

.status-grid dt {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.status-grid dd {
  font-size: 1.0625rem;
  line-height: 1.4;
}

.status-grid dd::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.55em;
  vertical-align: 0.05em;
  background: var(--rule);
}

.status-grid dd.is-value::before,
.status-grid dd.is-unknown::before,
.status-grid dd.is-id::before {
  display: none;
}

.status-grid dd.is-up::before {
  background: var(--ink);
}

.status-grid dd.is-down::before,
.status-grid dd.is-paused::before {
  background: transparent;
  outline: 1px solid var(--ink);
  outline-offset: -1px;
}

.status-grid dd.is-unknown {
  color: var(--muted);
}

.status-grid dd.is-value,
.status-grid .id {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
}

.id,
.v {
  font-family: var(--mono);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  font-variant-numeric: tabular-nums;
}

.id {
  font-size: 0.92em;
}

/* Registers: Particulars on both pages, the verification register on /verification/ */

.facts,
.verify {
  padding: 3.5rem 0 4rem;
  border-top: 1px solid var(--rule-strong);
}

.facts-grid {
  display: grid;
  gap: 1.5rem 3rem;
}

.facts-grid .sec-head {
  margin: 0;
}

.register {
  border-top: 1px solid var(--rule-strong);
}

.register > div {
  display: grid;
  gap: 0.25rem 1.5rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule);
}

.register dt {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
}

.register dd {
  max-width: var(--measure);
  text-wrap: pretty;
}

.more {
  margin: 1.5rem 0 0;
  max-width: var(--measure);
  font-size: 0.9375rem;
}

.more a {
  font-weight: 500;
  white-space: nowrap;
}

.more-note {
  color: var(--muted);
}

/* Page header on the verification page (and the 404) */

.lede {
  padding: 2.5rem 0 3rem;
}

.lede h1 {
  font-size: clamp(2rem, 1.1rem + 2.4vw, 3.25rem);
}

.lede p:not(.kicker) {
  margin: 0;
  max-width: var(--measure);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* The values: fixed groups of four, eight per row, a wider gap after the fourth.
   All spacing is CSS margins on the group spans, so a copy or a selection yields the exact string.
   The groups are inline-block: rows break between groups, and a double-click in Firefox without
   scripts then selects nothing rather than a fragment of the key (with scripts, copy.js selects it all). */

.values > .row {
  position: relative;
  padding: 0.85rem 0 1rem;
}

/* Row header on narrow screens: label left, copy button (if scripted) right */
.values dt {
  display: flex;
  align-items: center;
  min-height: 2rem;
  padding-inline-end: 5.5rem;
}

.v {
  display: block;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.65;
  text-wrap: wrap;
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}

.hex {
  --group: calc(4ch + var(--gap));
  --slack: calc(var(--gap-mid) - var(--gap) + 0.5ch);
  --rows8: calc(8 * var(--group) + var(--slack));
  --rows4: calc(4 * var(--group) + var(--slack));
  overflow-wrap: normal;
  word-break: normal;
  max-inline-size: var(--rows8);
}

/* Where eight groups do not fit the value column, the box snaps to four per row instead of leaving a
   ragged row. This follows the column's real width, so it also holds when a user stylesheet enlarges
   the root font size, which the em breakpoints below cannot follow. */
@supports (max-inline-size: round(down, 100% - 1ch, 1ch)) {
  .hex {
    max-inline-size: clamp(var(--rows4), calc(round(down, 100% - var(--slack), 4 * var(--group)) + var(--slack)), var(--rows8));
  }
}

.v .g,
.hex .pfx {
  display: inline-block;
}

.hex .g {
  margin-inline-end: var(--gap);
}

.hex .mid {
  margin-inline-end: var(--gap-mid);
}

/* The DER header ends its row: the trailing margin leaves no room for the next group. */
.hex .der-end {
  margin-inline-end: 9ch;
}

.hex .g:last-child {
  margin-inline-end: 0;
}

.hex .der,
.hex .pfx {
  color: var(--dim);
}

/* 0x hangs in the margin; five groups per row at every width */
.hex.addr {
  max-inline-size: calc(2ch + var(--gap) + 5 * (4ch + var(--gap)) + 0.5ch);
  padding-inline-start: calc(2ch + var(--gap));
}

.hex .pfx {
  margin-inline-start: calc(-2ch - var(--gap));
  margin-inline-end: var(--gap);
}

.note {
  margin: 0.4rem 0 0;
  max-width: var(--measure);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}

.note + .note {
  margin-top: 0.25rem;
}

.note.role {
  font-size: 0.9375rem;
  color: var(--ink);
}

/* Copy button (inserted by copy.js; absent without script): black on white, inverted when hovered or pressed */

.copy {
  position: absolute;
  inset-block-start: 0.85rem;
  inset-inline-end: 0;
  margin: 0;
  padding: 0 0.75rem;
  min-height: 2rem;
  min-width: 4.5rem;
  font: 500 0.6875rem/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
}

/* Hover inverts only where a pointer can hover: touch browsers keep :hover set after a tap until the
   next tap elsewhere, which would leave a black button behind every copy. Pressing inverts everywhere. */
@media (hover: hover) {
  .copy:hover {
    color: var(--paper);
    background: var(--ink);
  }
}

.copy:active {
  color: var(--paper);
  background: var(--ink);
}

.copy:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.copy.done,
.copy.done:hover {
  color: var(--paper);
  background: var(--accent);
  border-color: var(--accent);
}

.copy.fail,
.copy.fail:hover {
  color: var(--ink);
  background: var(--paper);
  border-style: dashed;
}

/* Off-screen textarea used by the execCommand fallback */
.clip {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
}

@media (pointer: coarse) {
  .copy {
    min-height: 2.75rem;
  }

  .values dt {
    min-height: 2.75rem;
  }
}

/* Footer */

footer {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9375rem;
}

footer p {
  margin: 0 0 0.4rem;
  max-width: var(--measure);
}

.colophon {
  margin-top: 1.1rem;
  max-width: none;
  font-size: 0.8125rem;
}

/* Each colophon segment stays on one line when it fits and wraps inside itself only when it is
   wider than the line (very narrow viewports at large default font sizes). */
.colophon .nw {
  display: inline-block;
  white-space: normal;
}

/* ---- Breakpoints (em, so they follow the reader's default font size) ---- */

/* Drawing type: the drawing is (viewport - gutters) wide below 45em, so the unit size follows the viewport
   and the labels stay ~11 px on screen: 288 px wide at 320 -> 22.9 units; 358 px at 390 -> 19.3; 448 px at 480 -> 14.7.
   (The 10.3-unit floor is reached only where the drawing has grown to its 640 px cap, where a unit is 1.07 px.)
   "of 3" sits inside the 68-unit ring under the numeral, so it is capped at 16 units: below ~475 px it is
   smaller on screen than the other labels, and never on the ring. */
@media (max-width: 44.9375em) {
  .d .cap {
    font-size: max(calc(26.9px - 2.333vw), 10.3px);
    letter-spacing: 0.06em;
  }

  .d .of {
    font-size: min(max(calc(26.9px - 2.333vw), 10.3px), 16px);
    letter-spacing: 0.03em;
  }

  .d-log {
    min-height: calc(3em + 0.7rem + 1px);
  }
}

@media (max-width: 36em) {
  .d .num {
    font-size: 28px;
  }

  .d .griddot {
    r: 1.1;
  }

  .d .ink,
  .d .con,
  .d .sig {
    stroke-width: 1.8;
  }

  .d .dot {
    stroke-width: 2.2;
    stroke-dasharray: 0.01 5.5;
  }

  .d .rule,
  .d .box,
  .d .gbox,
  .d .gate,
  .d .held {
    stroke-width: 1.4;
  }

  .d .box.ink {
    stroke-width: 1.4;
  }
}

@media (max-width: 30em) {
  .wrap {
    width: min(100% - 2rem, var(--page));
  }

  /* The lockup and the two links (11 px, as on wider screens) share one line from 375 px; narrower than
     that the links drop under the lockup. */
  .mast-inner {
    padding: 1rem 0;
    gap: 0.25rem 0.75rem;
  }

  :root {
    --mark: 24px;
  }

  .nav {
    gap: 1rem;
  }

  .nav a {
    letter-spacing: 0.08em;
  }

  .hero {
    padding: 2rem 0 2.75rem;
  }

  .cta .btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .d .cap {
    font-size: calc(39.3px - 5.125vw);
  }

  .d .of {
    font-size: min(calc(39.3px - 5.125vw), 16px);
  }
}

/* Narrow phones: smaller mono so eight groups still fit. The address has no four-per-row form, so its
   size is also capped by the viewport (26.1ch = 15.66em in Plex Mono) for large default font sizes. */
@media (max-width: 26.25em) {
  .v {
    font-size: 0.875rem;
  }

  .hex.addr {
    font-size: min(0.875rem, calc((100vw - 2.5rem) / 15.7));
  }
}

/* Very narrow: four hex groups per row (the DER header goes 4 + 2); a smaller headline so the primary
   button clears a 568 px fold; the station labels close up a little so three of them keep clear of each
   other in the 600-unit drawing (10.7 px at 320, 11 px from 340). */
@media (max-width: 22.4375em) {
  .hex {
    max-inline-size: var(--rows4);
  }

  h1 {
    font-size: 2.125rem;
  }

  .kicker {
    margin-bottom: 1rem;
  }

  .hero {
    padding-top: 1.75rem;
  }

  .d .lab {
    font-size: calc((39.3px - 5.125vw) * 0.97);
    letter-spacing: 0;
  }
}

/* Wider screens */

@media (min-width: 45em) {
  :root {
    --mark: 32px;
  }

  .wrap {
    width: min(100% - 5rem, var(--page));
  }

  .mast-inner {
    padding: 1.35rem 0;
  }

  .hero {
    padding: 3.5rem 0 4rem;
  }

  .hero-visual {
    margin-top: 3rem;
  }

  .sub {
    font-size: 1.0625rem;
    line-height: 1.65;
  }

  .cta {
    margin-top: 2rem;
  }

  .d .cap {
    font-size: 11px;
  }

  .sec-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: end;
  }

  /* Between 45em and 60em the steps stay a list, each row with its numeral in a narrow left column;
     three columns would give each step under 220 px. */
  .steps li {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    column-gap: 1rem;
    padding: 1.6rem 0 1.75rem;
  }

  .steps .num {
    grid-row: 1 / span 2;
    margin: 0;
    padding-top: 0.45rem;
  }

  .steps h3,
  .steps p {
    grid-column: 2;
  }

  .status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .status-grid > div {
    border-bottom: 0;
    border-right: 1px solid var(--rule);
  }

  .status-grid > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--rule);
  }

  .status-grid > div:nth-child(2n) {
    border-right: 0;
  }

  .facts-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
  }

  .facts-grid .sec-head {
    grid-template-columns: none;
  }

  .register > div {
    grid-template-columns: var(--label-col) minmax(0, 1fr);
    padding: 0.7rem 0;
    align-items: baseline;
  }

  .lede {
    padding: 4rem 0 3.5rem;
  }

  .values > .row {
    padding: 1rem 0;
  }

  .values dt {
    display: block;
    min-height: 0;
    padding-inline-end: 0;
    padding-top: 0.2rem;
  }

  /* The button is taken out of the flow so that its height (44px with a touch pointer) never sets the
     height of the value's first line; the value keeps a margin clear of it. */
  .values dd {
    position: relative;
  }

  .values dd > .v {
    margin-inline-end: 5.75rem;
  }

  /* The value's room is the column less the button margin (and, for the address, a viewport-based cap
     that only matters at large default font sizes: 15.7em = 26.1ch of Plex Mono). */
  @supports (max-inline-size: round(down, 100% - 1ch, 1ch)) {
    .hex {
      max-inline-size: clamp(var(--rows4), calc(round(down, 100% - 5.75rem - var(--slack), 4 * var(--group)) + var(--slack)), var(--rows8));
    }
  }

  .hex.addr {
    font-size: min(0.95rem, calc((100vw - 24rem) / 15.7));
  }

  .copy {
    inset-block-start: -0.2rem;
  }
}

/* With a touch pointer the 44px button reaches down into the first caption line, so that line keeps
   clear of the button column as the value does. */
@media (min-width: 45em) and (pointer: coarse) {
  .copy {
    inset-block-start: -0.6rem;
  }

  .values dd > .v + .note {
    margin-inline-end: 5.75rem;
  }
}

/* The registers are query containers: when the two-column layout would leave the value column too
   narrow for the keys, the rows stack again as they do on phones. */

@media (min-width: 45em) {
  .register {
    container-type: inline-size;
  }

  @container (max-width: 39.5em) {
    .register > div {
      grid-template-columns: none;
      padding: 0.8rem 0;
      align-items: normal;
    }

    .values > .row {
      padding: 0.85rem 0 1rem;
    }

    .values dt {
      display: flex;
      min-height: 2rem;
      padding-inline-end: 5.5rem;
      padding-top: 0;
    }

    .values dd {
      position: static;
    }

    .values dd > .v {
      margin-inline-end: 0;
    }

    .copy {
      inset-block-start: 0.85rem;
    }

    .hex.addr {
      font-size: min(0.95rem, calc((100vw - 6.25rem) / 15.7));
    }

    @supports (max-inline-size: round(down, 100% - 1ch, 1ch)) {
      .hex {
        max-inline-size: clamp(var(--rows4), calc(round(down, 100% - var(--slack), 4 * var(--group)) + var(--slack)), var(--rows8));
      }
    }
  }
}

@media (min-width: 45em) and (pointer: coarse) {
  @container (max-width: 39.5em) {
    .values dt {
      min-height: 2.75rem;
    }

    .values dd > .v + .note {
      margin-inline-end: 0;
    }
  }
}

@media (min-width: 60em) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }

  .steps li {
    display: block;
    padding: 1.75rem 2rem 2rem 0;
    border-bottom: 0;
  }

  .steps li + li {
    padding-left: 2rem;
    border-left: 1px solid var(--rule);
  }

  .steps .num {
    margin-bottom: 1.25rem;
    padding-top: 0;
  }
}

@media (min-width: 64em) {
  .status-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .status-grid > div,
  .status-grid > div:nth-child(-n + 2) {
    border-bottom: 0;
    border-right: 1px solid var(--rule);
  }

  .status-grid > div:last-child {
    border-right: 0;
  }
}

/* Side by side: copy and actions at left, the drawing at right, the headline on two lines.
   The hero fills the first screen less the masthead (4.75rem) and a 7.25rem peek of the next section: the
   black rule, its 3.5rem of white and the "How a payout moves" heading row, whole, at any window height;
   the fold then falls midway between that row and the list's top rule.
   Between 64em and 72em the headline follows the viewport (46 px at 1024) so "Pearl Swap bridge." holds
   one line in a 440 px column. */
@media (min-width: 64em) {
  .hero {
    display: flex;
    align-items: center;
    min-height: calc(100svh - 12rem);
    padding: 3rem 0 3.5rem;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "copy vis" "act vis";
    gap: 0 4rem;
    align-items: center;
  }

  .hero-copy {
    align-self: end;
    max-width: none;
  }

  .hero-actions {
    align-self: start;
    max-width: none;
  }

  .hero-visual {
    align-self: center;
    margin: 0;
    max-width: none;
  }

  .hb {
    display: inline;
  }

  h1 {
    font-size: calc(0.9rem + 3.1vw);
    text-wrap: initial;
  }

  .d .cap {
    font-size: 15px;
  }

  .d .sig {
    stroke-width: 1.6;
  }
}

@media (min-width: 72em) {
  h1 {
    font-size: clamp(2.375rem, 1.1rem + 3.1vw, 4rem);
  }

  .d .cap {
    font-size: 13.5px;
  }
}

@media (min-width: 76em) {
  .hero-grid {
    gap: 0 5rem;
  }

  .d .cap {
    font-size: 13px;
  }
}

@media (min-width: 83em) {
  .d .cap {
    font-size: 12px;
  }
}

/* Print: black on white, no controls, rows kept whole, the finished drawing */

@media print {
  :root {
    --paper: #fff;
    --ink: #000;
    --muted: #333;
    --dim: #555;
    --line: #555;
    --rule: #bbb;
    --rule-strong: #000;
  }

  .skip,
  .copy {
    display: none;
  }

  .hero-anim .d .anim:not(.idle),
  .hero-anim .d .st {
    opacity: 1;
  }

  .register > div,
  .steps li {
    break-inside: avoid;
  }
}

/* Paper narrower than the 45em screen breakpoint (A4 inside the browser's default margins is 717px)
   still gets the two-column registers; the copy button's room in the row header is not reserved. */

@media print and (min-width: 36em) {
  .register > div {
    grid-template-columns: var(--label-col) minmax(0, 1fr);
    padding: 0.7rem 0;
    align-items: baseline;
  }

  .values > .row {
    padding: 1rem 0;
  }

  .values dt {
    display: block;
    min-height: 0;
    padding-inline-end: 0;
    padding-top: 0.2rem;
  }
}