/* Ktesio — ktesio.com
   One stylesheet, no build step. Tokens first, then layout, then components.
   Red (--red) is reserved for limits: the budget ceiling, the fixed end date. */

/* ---------------------------------------------------------------- fonts */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-text-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-text-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-text-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader Display";
  src: url("/fonts/newsreader-display-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- tokens */

:root {
  --paper: #f2f1ed;
  --paper-2: #e9e7e1;
  --ink: #111111;
  --ink-2: #55554f;
  --rule: #cfccc4;
  --rule-strong: #111111;
  --red: #c2331a;
  --green: #2e6b4f;
  --code-bg: #161614;
  --code-ink: #edebe5;
  --code-muted: #9a988f;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --display: "Newsreader Display", "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 76rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --label-col: 10.5rem;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111110;
    --paper-2: #1b1b19;
    --ink: #f2f1ed;
    --ink-2: #a9a8a1;
    --rule: #34332f;
    --rule-strong: #f2f1ed;
    --red: #ff5b3d;
    --green: #6fbe8e;
    --code-bg: #1b1b19;
    --code-ink: #edebe5;
    --code-muted: #a9a8a1;
  }
}

/* ----------------------------------------------------------------- base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--serif);
  font-kerning: normal;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 60rem) {
  body {
    font-size: 1.1875rem;
  }
}

main:focus {
  outline: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 500;
}

p,
ul,
ol,
dl,
blockquote,
figure {
  margin: 0;
}

p + p {
  margin-top: 1em;
}

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

a:hover {
  text-decoration-thickness: 2px;
}

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

code,
kbd,
pre {
  font-family: var(--mono);
  font-size: 0.875em;
}

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

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

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 0.9rem;
  background: var(--ink);
  color: var(--paper);
  font: 500 0.875rem/1 var(--mono);
  text-decoration: none;
}

.skip:focus {
  top: 1rem;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Small mono labels used across the site. */
.label,
.hero__kicker,
.glance__title,
.chapter__kicker,
.chapter__sub,
.fig__kicker,
.ledger__facts dt,
.situations__title,
.pillar h3,
.facts dt,
.essay__meta,
.founder__role,
.hero__founder-id,
.founder__cap,
.founder__now-label,
.shipped__kind,
.shipped__facts dt,
.timeline {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* A config value still waiting for real data, e.g. [CONTACT EMAIL]. */
.ph {
  display: inline-block;
  padding: 0 0.35em;
  border: 1px dashed var(--red);
  border-radius: 3px;
  color: var(--red);
  font-family: var(--mono);
  font-size: 0.8em;
  font-weight: 500;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
}

/* --------------------------------------------------------------- header */

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

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 4.5rem;
}

.brand {
  display: inline-flex;
  color: var(--ink);
  text-decoration: none;
}

.brand .wordmark {
  width: auto;
  height: 1.625rem;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  list-style: none;
  padding: 0;
}

.site-nav a {
  display: inline-block;
  padding-block: 0.5rem;
  font: 500 0.8125rem/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-nav a:hover {
  text-decoration: underline;
}

.site-nav a[aria-current="page"]:not(.site-nav__cta) {
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
}

.site-nav a.site-nav__cta {
  padding: 0.7rem 0.95rem;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
}

.site-nav a.site-nav__cta:hover {
  text-decoration: none;
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

@media (max-width: 51.99rem) {
  .site-nav__opt {
    display: none;
  }
}

/* -------------------------------------------------------------- buttons */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  font: 600 1.0625rem/1.1 var(--serif);
  text-decoration: none;
}

.button:hover {
  background: transparent;
  color: var(--ink);
}

.button--quiet {
  background: transparent;
  color: var(--ink);
}

.button--quiet:hover {
  background: var(--ink);
  color: var(--paper);
}

.actions__or {
  color: var(--ink-2);
  font-size: 1rem;
}

/* ----------------------------------------------------------------- hero */

.hero {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.75rem;
  align-items: center;
}

.hero__kicker {
  color: var(--ink-2);
}

.hero__title {
  max-width: 17ch;
  margin-top: 1.25rem;
  font-family: var(--display);
  font-size: clamp(2.5rem, 1.35rem + 3.9vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

.hero__lede {
  max-width: 34rem;
  margin-top: 1.5rem;
}

.hero__lede p:first-child {
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.3125rem);
  line-height: 1.5;
}

.hero__lede p + p {
  margin-top: 0.9em;
  font-size: 1.0625rem;
}

.hero__object {
  max-width: 36rem;
}

@media (min-width: 64rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
    column-gap: clamp(3rem, 6vw, 6rem);
  }

  .hero__object {
    max-width: none;
  }
}

/* The founder, small, under the buttons: the one place the site says it is one
   person. The photograph as a small square in a hairline frame, the sentence, and
   the name in mono (static/founder/, scripts/founder.py). */
.hero__founder {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 34rem;
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.hero__founder .photo {
  flex: none;
  width: 3.75rem;
  height: 3.75rem;
}

.hero__founder-text {
  font-size: 1.0625rem;
  line-height: 1.45;
}

.hero__founder-line {
  display: block;
}

.hero__founder-id {
  display: block;
  margin-top: 0.3rem;
  color: var(--ink-2);
}

/* ------------------------------------------ the incident ledger (hero) */

.night {
  margin: 0;
  font: 400 0.875rem/1.4 var(--mono);
}

.night__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink-2);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.night__clock {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.night__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.night__row {
  position: relative;
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.85rem 0 0.85rem 0.75rem;
  border-bottom: 1px solid var(--rule);
}

.night__time {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.night__outcome {
  position: relative;
  color: var(--ink-2);
  text-align: right;
}

/* The one still open: a red mark and a red outcome. Red means a limit. */
.night__row--open::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7rem;
  bottom: 0.7rem;
  width: 3px;
  background: var(--red);
}

.night__row--open .night__outcome {
  color: var(--red);
}

.night__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 1.75rem;
  margin-top: 0.75rem;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.night__replay {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: 500 0.75rem/1 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Without this, the display above would override the hidden attribute. */
.night__replay[hidden] {
  display: none;
}

.night__replay:hover,
.night__replay:focus-visible {
  color: var(--ink);
}

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

/* Phones: the outcome moves under the event. */
@media (max-width: 40rem) {
  .night__row {
    grid-template-columns: 3rem minmax(0, 1fr);
    row-gap: 0.25rem;
  }

  .night__outcome {
    grid-column: 2;
    text-align: left;
  }
}

/* The play (static/js/home.js): rows land as the clock reaches them, each shows "…"
   for a moment, then its outcome; the summary comes last. */
@media (prefers-reduced-motion: no-preference) {
  .night--live .night__row {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }

  .night--live .night__row.is-in {
    opacity: 1;
    transform: none;
  }

  .night--live .night__row:not(.is-settled) .night__outcome > span {
    visibility: hidden;
  }

  .night--live .night__row.is-in:not(.is-settled) .night__outcome::after {
    content: "…";
    position: absolute;
    top: 0;
    right: 0;
    color: var(--ink-2);
  }

  .night--live .night__row--open.is-settled::before {
    animation: night-pulse 0.5s ease-out 2;
  }

  .night--live .night__sum {
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .night--live.night--done .night__sum {
    opacity: 1;
  }

  .night__replay {
    transition: opacity 0.3s ease;
  }

  @starting-style {
    .night__replay {
      opacity: 0;
    }
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 40rem) {
  .night--live .night__row.is-in:not(.is-settled) .night__outcome::after {
    right: auto;
    left: 0;
  }
}

@keyframes night-pulse {
  50% {
    transform: scaleY(1.6);
  }
}

/* --------------------------------------------------------------- glance */

.glance__title {
  margin-bottom: 0.9rem;
  color: var(--ink-2);
}

.glance__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-block: 1px solid var(--rule-strong);
}

.glance__grid div {
  padding: 1.1rem 0 1.4rem;
  border-top: 1px solid var(--rule);
}

.glance__grid div:first-child {
  border-top: 0;
}

.glance__grid dt {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.1;
}

.glance__grid dd {
  max-width: 22rem;
  margin: 0.45rem 0 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (min-width: 48rem) {
  .glance__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .glance__grid div:nth-child(2) {
    border-top: 0;
  }

  .glance__grid div:nth-child(2n + 1) {
    padding-right: 1.5rem;
  }

  .glance__grid div:nth-child(2n) {
    padding-left: 1.5rem;
    border-left: 1px solid var(--rule);
  }
}

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

  .glance__grid div {
    padding: 1.25rem 1.5rem 1.6rem;
    border-top: 0;
  }

  .glance__grid div:first-child {
    padding-left: 0;
  }

  .glance__grid div + div {
    border-left: 1px solid var(--rule);
  }
}

/* --------------------------------------------------------------- clocks */

/* The two clocks (partials/clocks.html; static/js/clocks.js writes the times): the
   time in Rotterdam and US Eastern now, to the minute. Hidden until the script has
   filled them, but not collapsed, so the line's height is there from the first paint
   and nothing shifts when the times appear. Tabular figures keep the line still when a
   minute turns. In the "At a glance" tile each zone takes a line, the time against the
   right edge like a ledger entry; in the footer the two share one line. Before the script
   writes a time, an invisible 00:00 holds its width (every time is as wide, in tabular
   figures), so the line is as wide hidden as filled, and a narrow footer wraps the same
   way with or without the script. */
.clocks {
  display: block;
  color: var(--ink-2);
  font: 500 0.75rem/1.6 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.clocks[hidden] {
  visibility: hidden;
}

.clocks__zone {
  white-space: nowrap;
}

.clocks__time {
  color: var(--ink);
}

.clocks__time:empty::before {
  content: "00:00";
}

.glance__grid .clocks {
  max-width: 13rem;
  margin-top: 0.8rem;
}

.glance__grid .clocks__zone {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.glance__grid .clocks__sep {
  display: none;
}

/* ------------------------------------------------------------- document */

.doc {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.doc__body {
  min-width: 0;
}

.toc {
  display: none;
}

@media (min-width: 64rem) {
  .doc {
    grid-template-columns: var(--label-col) minmax(0, 1fr);
    column-gap: 3rem;
  }

  .toc {
    display: block;
    position: sticky;
    top: 2rem;
    align-self: start;
    margin-top: clamp(3.5rem, 8vw, 6.5rem);
  }
}

.toc ol {
  display: grid;
  gap: 0.7rem;
  padding: 0;
  list-style: none;
}

.toc a {
  display: flex;
  gap: 0.75rem;
  color: var(--ink-2);
  font: 500 0.75rem/1.4 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}

.toc a:hover,
.toc a[aria-current="true"] {
  color: var(--ink);
}

.toc a[aria-current="true"] .toc__no {
  color: var(--green);
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

/* Entries that leave the page: set apart by a rule, and marked with an arrow. */
.toc li:not(.toc__page) + .toc__page {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
}

.toc__arrow {
  margin-left: 0.15rem;
}

.chapter {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  border-top: 1px solid var(--rule-strong);
}

.doc__body > .chapter:first-child {
  border-top: 0;
}

.chapter__kicker {
  display: flex;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
  color: var(--ink-2);
}

.chapter__kicker span {
  color: var(--ink);
}

/* "You are here": the chapter being read, and a page's own kicker, in green. */
.chapter--current .chapter__kicker span,
.page-head .chapter__kicker span {
  color: var(--green);
}

@media (prefers-reduced-motion: no-preference) {
  .chapter__kicker span {
    transition: color 0.3s ease;
  }
}

.chapter__sub {
  display: flex;
  gap: 0.9rem;
  margin: 3.5rem 0 1rem;
  color: var(--ink-2);
}

.chapter__sub span {
  color: var(--ink);
}

.chapter__body {
  max-width: 58rem;
  min-width: 0;
}

.chapter h2,
.shipped h2,
.faq h2 {
  margin-bottom: 1.25rem;
  font-family: var(--display);
  font-size: clamp(2rem, 1.25rem + 2.7vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.chapter__intro {
  max-width: 40rem;
  font-size: 1.1875rem;
}

.hekma__figure {
  max-width: 44rem;
  margin: 0 0 2.75rem;
}

.details__more {
  margin-top: 1rem;
  font: 500 0.875rem/1.4 var(--mono);
}

/* ------------------------------------------------ fig. 1: the fleet board */

.fig__kicker {
  display: flex;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule-strong);
  color: var(--ink-2);
}

.fig__kicker span {
  flex: none;
  color: var(--ink);
}

/* Dashed means "being built": the Policy bar, a kind Hekma can't run yet, hold. */
.board__policy {
  margin: 0 0 1rem;
  padding: 0.55rem 0.75rem;
  border: 1px dashed var(--ink-2);
  font: 400 0.8125rem/1.4 var(--mono);
}

.board__policy span,
.board__tel span {
  margin-right: 0.4rem;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.board__policy b {
  color: var(--red);
  font-weight: 500;
}

.board__runs {
  width: 100%;
  border-collapse: collapse;
  font: 400 0.8125rem/1.3 var(--mono);
}

.board__runs th,
.board__runs td {
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: middle;
}

.board__runs thead th {
  border-bottom-color: var(--rule-strong);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.board__runs tbody th {
  font-weight: 500;
}

.board__kind.board--built {
  text-decoration: underline dashed var(--ink-2);
  text-underline-offset: 0.3rem;
}

.board__state--paused {
  color: var(--ink-2);
}

.board__state b {
  margin-left: 0.3rem;
  color: var(--red);
  font-weight: 500;
}

.board__btns svg {
  display: block;
  width: 3.4rem;
  height: 1rem;
}

.board__btns rect {
  fill: none;
  stroke: var(--ink);
}

.board__btns .board__glyph {
  fill: var(--ink);
  stroke: none;
}

.board__hold {
  display: inline-block;
  padding: 0 0.45rem;
  border: 1px dashed var(--ink-2);
  border-radius: 2px;
  color: var(--ink-2);
}

.board__meter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 9rem;
}

.board__meter svg {
  flex: 1;
  min-width: 5rem;
  height: 0.5rem;
  overflow: visible;
}

.board__meter span {
  min-width: 2.6rem;
  text-align: right;
}

.board__track {
  fill: var(--rule);
}

.board__fill {
  fill: var(--ink);
}

.board__tick {
  stroke: var(--red);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.board__run--anomaly .board__fill {
  fill: var(--red);
}

.board__run--anomaly .board__meter span {
  color: var(--red);
}

.board__tel {
  margin: 1rem 0 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--ink);
  font: 400 0.8125rem/1.4 var(--mono);
}

.board__tel em {
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-style: normal;
}

.board__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0.9rem 0 0;
  color: var(--ink-2);
  font: 400 0.75rem/1.4 var(--mono);
}

.board__key::before {
  content: "";
  display: inline-block;
  width: 1.2rem;
  margin-right: 0.5rem;
  border-top: 1px solid var(--ink);
  vertical-align: middle;
}

.board__key--built::before {
  border-top-style: dashed;
  border-top-color: var(--ink-2);
}

.fig figcaption {
  margin-top: 1rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Phones: each Run becomes a small card (name and state, kind and control, meter). */
@media (max-width: 40rem) {
  .board__runs thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .board__runs,
  .board__runs tbody,
  .board__runs th,
  .board__runs td {
    display: block;
  }

  .board__runs tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rule);
  }

  .board__runs th,
  .board__runs td {
    padding: 0;
    border: 0;
  }

  .board__runs .board__state {
    grid-area: 1 / 2;
    text-align: right;
  }

  .board__runs .board__ctl {
    grid-area: 2 / 2;
    justify-self: end;
  }

  .board__runs .board__use {
    grid-column: 1 / -1;
  }
}

/* The meters fill once, left to right, when the page loads. */
@media (prefers-reduced-motion: no-preference) {
  .board__fill {
    transform-box: fill-box;
    transform-origin: left;
    animation: board-fill 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both;
  }
}

@keyframes board-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ---------------------------------------------------- offerings: ledger */

.ledger {
  margin-top: 2.75rem;
  padding: 0;
  list-style: none;
}

.ledger__row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--rule);
}

.ledger__row:first-child {
  border-top-color: var(--rule-strong);
}

.ledger__no {
  padding-top: 0.55rem;
  color: var(--ink-2);
  font: 500 0.8125rem/1 var(--mono);
}

.ledger__main,
.ledger__facts {
  grid-column: 2;
}

.ledger__name {
  margin-bottom: 0.5rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
}

.ledger__facts {
  display: grid;
  gap: 0.9rem;
  margin-top: 0.9rem;
}

.ledger__facts dt {
  color: var(--ink-2);
}

.ledger__facts dd {
  margin: 0.2rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
}

.ledger__row--minor .ledger__name {
  font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.5rem);
}

@media (min-width: 52rem) {
  .ledger__row {
    grid-template-columns: 3rem minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: 2rem;
    padding-block: 2rem;
  }

  .ledger__facts {
    grid-column: 3;
    margin-top: 0.35rem;
  }
}

.capabilities {
  max-width: 42rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 1rem;
}

/* ------------------------------------------------------------- situations */

/* Before the offerings: the buyer's own sentence on the left, the offering that
   answers it on the right. On wide screens the columns line up with the ledger's
   (number, name, facts), with the number column left empty. */
.situations {
  margin-top: 2.5rem;
}

.situations__title {
  margin-bottom: 0.75rem;
  color: var(--ink-2);
}

.situations__list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
}

.situations__item {
  display: grid;
  gap: 0.3rem 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule);
}

.situations__item dt {
  font: 600 1.0625rem/1.45 var(--serif);
}

.situations__item dd {
  margin: 0;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.5;
}

.situations__item dd strong {
  color: var(--ink);
  font-weight: 600;
}

@media (min-width: 52rem) {
  .situations__item {
    grid-template-columns: 3rem minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: 2rem;
    padding-block: 1.1rem;
  }

  .situations__item dt {
    grid-column: 2;
  }

  .situations__item dd {
    grid-column: 3;
  }
}

/* ---------------------------------------------------------------- shipped */

/* Unnumbered, after the chapters and before the questions: what Ktesio has built,
   one real screen each. Six different products share one square frame, so each
   screen is a crop, and the mono caption under it says where it comes from. On
   phones the tiles read as a list, the screen beside the text; from 40rem up a
   grid of two, from 64rem three. */
.shipped {
  padding-block: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--rule-strong);
}

.shipped__grid {
  display: grid;
  gap: 2rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}

.shipped__item {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}

.shipped__screen {
  display: block;
  flex: none;
  width: 7.5rem;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}

.shipped__screen img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.shipped__item:hover .shipped__screen,
.shipped__item:focus-within .shipped__screen {
  border-color: var(--ink);
}

.shipped__body {
  min-width: 0;
}

.shipped__cap {
  color: var(--ink-2);
  font: 400 0.75rem/1.4 var(--mono);
  letter-spacing: 0.02em;
}

.shipped__name {
  margin-top: 0.35rem;
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.625rem);
  line-height: 1.15;
}

.shipped__name a {
  text-decoration: none;
}

.shipped__name a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.shipped__kind {
  margin-top: 0.3rem;
  color: var(--ink-2);
}

.shipped__proves {
  margin-top: 0.6rem;
  font-size: 1rem;
  line-height: 1.5;
}

.shipped__facts {
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
}

.shipped__facts dt {
  color: var(--ink-2);
}

.shipped__facts dd {
  margin: 0.15rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.shipped__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: 0.75rem;
  font: 500 0.8125rem/1.4 var(--mono);
}

@media (min-width: 40rem) {
  .shipped__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.75rem 2rem;
  }

  .shipped__item {
    display: block;
  }

  .shipped__screen {
    width: auto;
  }

  .shipped__cap {
    margin-top: 0.7rem;
  }

  .shipped__name {
    margin-top: 0.75rem;
  }
}

@media (min-width: 64rem) {
  .shipped__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------------- faq */

/* Unnumbered, like the exit: the questions people ask before they write. */
.faq {
  padding-block: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--rule-strong);
}

.faq__list {
  margin: 2.25rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
}

.faq__item {
  display: grid;
  gap: 0.4rem 2rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--rule);
}

.faq__item dt {
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.2;
  text-wrap: balance;
}

.faq__item dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
}

.faq__steps {
  margin: 0;
  padding-left: 1.25rem;
}

.faq__steps li + li {
  margin-top: 0.3rem;
}

@media (min-width: 52rem) {
  .faq__item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    padding-block: 1.6rem;
  }
}

/* ------------------------------------------------ engagements: timeline */

.timeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  align-items: end;
  margin: 2.25rem 0 3rem;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
}

.timeline li {
  position: relative;
  padding: 0 0.75rem 0.9rem 0;
  border-bottom: 2px solid var(--ink);
}

.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 2px;
  height: 12px;
  background: var(--ink);
}

.timeline li span {
  display: block;
  padding-left: 0.6rem;
}

.timeline .timeline__end {
  padding-right: 0;
  border-bottom-color: transparent;
  color: var(--red);
}

.timeline .timeline__end::before {
  bottom: -7px;
  width: 3px;
  height: 3.1rem;
  background: var(--red);
}

.timeline .timeline__end span {
  padding-left: 0.85rem;
}

.rules {
  display: grid;
  gap: 1.75rem 3rem;
  padding: 0;
  list-style: none;
}

.rules li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.rules__no {
  grid-row: span 2;
  padding-top: 0.3rem;
  color: var(--ink-2);
  font: 500 0.8125rem/1 var(--mono);
}

.rules h3 {
  margin-bottom: 0.2rem;
  font: 600 1.125rem/1.4 var(--serif);
}

@media (min-width: 48rem) {
  .rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ----------------------------------------------------------------- hekma */

/* The name and its tagline; the brand pages (templates/brand.html) share it. */
.hekma__title,
.brand__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 1rem;
}

.hekma__title span,
.brand__title span {
  color: var(--ink-2);
  font-size: 0.55em;
  letter-spacing: -0.01em;
}

.note {
  max-width: 44rem;
  margin-top: 1rem;
  color: var(--ink-2);
  font-size: 1rem;
}

.pillars {
  display: grid;
  gap: 1.75rem;
  margin: 2.75rem 0;
}

.chapter__sub + .pillars {
  margin-top: 0;
}

.pillar {
  padding-top: 0.9rem;
  border-top: 2px solid var(--ink);
}

.pillar h3 {
  margin-bottom: 0.7rem;
}

.pillar p {
  font-size: 1rem;
  line-height: 1.55;
}

@media (min-width: 52rem) {
  .pillars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.25rem;
  }

  /* Two or four pillars (a brand page's): two to a row, so none sits alone. */
  .pillars--pairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A brand page's N.2: why the brand, in a reading measure. */
.brand__why {
  max-width: 40rem;
}

.hekma__try {
  display: grid;
  gap: 1.75rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 64rem) {
  .hekma__try {
    grid-template-columns: minmax(0, 1fr) 15rem;
    align-items: start;
    gap: 2.25rem;
  }
}

.code {
  min-width: 0;
  border-radius: 4px;
  background: var(--code-bg);
  color: var(--code-ink);
}

@media (prefers-color-scheme: dark) {
  .code {
    box-shadow: inset 0 0 0 1px var(--rule);
  }
}

.code pre {
  margin: 0;
  padding: 1.25rem 1.4rem;
  overflow-x: auto;
  font: 400 0.8125rem/1.8 var(--mono);
  tab-size: 2;
}

.code pre:focus-visible {
  outline-offset: -2px;
}

.code .c,
.code .p {
  color: var(--code-muted);
}

.code .p {
  user-select: none;
}

.facts {
  font-size: 0.875rem;
}

.facts div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--rule);
}

.facts div:first-child {
  border-top: 2px solid var(--ink);
}

.facts dt {
  color: var(--ink-2);
}

.facts dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  text-align: right;
}

.facts code {
  font-size: 1em;
}

.limits {
  max-width: 44rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--red);
  color: var(--ink);
  font-size: 1rem;
}

.linkrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
  font: 500 0.875rem/1.4 var(--mono);
}

.ext {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.ext-mark {
  width: 0.62em;
  height: 0.62em;
  flex: none;
}

/* --------------------------------------------------------------- writing */

.essay {
  max-width: 50rem;
  padding-top: 1rem;
  border-top: 2px solid var(--ink);
}

.essay__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  color: var(--ink-2);
}

.essay__title {
  margin: 0.9rem 0 1rem;
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.essay__title a {
  text-decoration: none;
}

.essay__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.essay__summary {
  max-width: 42rem;
}

.essay__quote {
  margin: 2rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--ink);
  font-size: 1.375rem;
  font-style: italic;
  line-height: 1.4;
}

.essay__more {
  font: 500 0.875rem/1.4 var(--mono);
}

/* ----------------------------------------------------------------- photo */

/* The founder's photograph (static/founder/, scripts/founder.py), in colour, in a
   hairline frame: 4:5 on /about/, a small square on the home page. Never a link. */
.photo {
  display: block;
  border: 1px solid var(--rule-strong);
}

/* --------------------------------------------------------------- founder */

.founder__id {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.25rem;
  margin: 2rem 0 1.25rem;
  padding-top: 1rem;
  border-top: 2px solid var(--ink);
}

.founder__name {
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1.2;
}

.founder__role {
  color: var(--ink-2);
}

.founder__bio {
  max-width: 40rem;
}

.page-body .founder__id {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* /about/: the portrait (4:5, in a hairline frame) and, under it, the mono
   caption and the dated Now line. From 52rem up it sits beside the name and bio;
   the company details run under both. */
.founder__portrait {
  max-width: 18rem;
  margin: 0 0 2rem;
}

.founder__portrait .photo {
  width: 100%;
  height: auto;
}

.founder__portrait figcaption {
  margin-top: 0.75rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.founder__cap {
  display: block;
}

.founder__now {
  display: block;
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  color: var(--ink);
}

.founder__now-label {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--ink-2);
}

@media (min-width: 52rem) {
  .founder {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: 3rem;
  }

  .founder__portrait {
    grid-column: 1;
    margin-bottom: 0;
  }

  .founder__text {
    grid-column: 2;
  }

  .founder > .chapter__sub,
  .founder > .details,
  .founder > .details__more {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------------ exit */

/* The home page ends with an unnumbered way to get in touch. */
.exit {
  padding-block: clamp(3rem, 7vw, 5rem) clamp(4rem, 9vw, 7rem);
  border-top: 1px solid var(--rule-strong);
}

.exit__title {
  max-width: 17ch;
  margin-bottom: 1.25rem;
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  position: relative;
  z-index: 2;
  padding-block: 3rem 2.25rem;
  border-top: 1px solid var(--rule-strong);
  font-size: 0.9375rem;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 2rem;
}

.brand--footer .monogram {
  width: 2.25rem;
  height: 2.25rem;
}

.brands {
  margin-bottom: 2rem;
}

.brands__title {
  margin-bottom: 1rem;
  color: var(--ink-2);
}

.brands__list {
  display: grid;
  gap: 1.25rem 3rem;
  padding: 0;
  list-style: none;
}

/* As many columns of at least 18rem as fit (three at full width), and empty
   tracks collapse, so two brands still share the row evenly. */
@media (min-width: 52rem) {
  .brands__list {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  }
}

.brands__item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.brands__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.6rem;
}

.brands__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.75rem;
}

.brands__name {
  font-weight: 600;
}

.brands__host {
  color: var(--ink-2);
  font: 400 0.75rem/1.4 var(--mono);
}

.brands__text {
  margin-top: 0.2rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  color: var(--ink-2);
  font-size: 0.875rem;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0;
  list-style: none;
}

/* ------------------------------------------------ plain pages (legal etc) */

.page-head {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
}

.page-head h1 {
  max-width: 22ch;
  margin-top: 1rem;
  font-family: var(--display);
  font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.page-head p {
  max-width: 40rem;
  margin-top: 1.25rem;
  font-size: 1.1875rem;
}

.page-body {
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(4rem, 9vw, 7rem);
  border-top: 1px solid var(--rule-strong);
}

.page-body .chapter__body > :first-child {
  margin-top: 0;
}

.prose {
  max-width: 42rem;
}

.prose h2 {
  margin: 2.75rem 0 0.75rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin: 2rem 0 0.5rem;
  font: 600 1.125rem/1.4 var(--serif);
}

.prose p,
.prose ul,
.prose ol,
.prose dl,
.prose table {
  margin-top: 1rem;
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: 0.4rem;
}

.prose strong {
  font-weight: 600;
}

.page-head .page-head__kicker,
.page-head .chapter__kicker {
  margin-top: 0;
  color: var(--ink-2);
  font-size: 0.75rem;
}

.page-head__kicker a {
  text-decoration: none;
}

.page-head__kicker a:hover {
  text-decoration: underline;
}

.page-head .page-head__updated {
  margin-top: 1.5rem;
  color: var(--ink-2);
  font-size: 0.75rem;
}

.page-head .actions {
  margin-top: 2rem;
  font-size: 1rem;
}

.page-head--404 {
  padding-bottom: clamp(5rem, 14vw, 10rem);
}

/* ---------------------------------------------------- company details */

.details {
  max-width: 50rem;
  border-top: 2px solid var(--ink);
}

.details div {
  display: grid;
  gap: 0.25rem 2rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--rule);
}

.details dt {
  color: var(--ink-2);
  font: 500 0.75rem/1.6 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 48rem) {
  .details div {
    grid-template-columns: 16rem minmax(0, 1fr);
    align-items: baseline;
  }
}

.details__notes {
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.page-body .wrap > .details {
  border-top: 0;
}

/* --------------------------------------------------------------- contact */

.contact {
  display: grid;
  gap: 3.5rem;
}

@media (min-width: 64rem) {
  .contact {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
}

.notice {
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--ink);
  background: var(--paper-2);
}

.notice--email {
  font-size: 1.25rem;
  line-height: 1.5;
}

.form {
  display: grid;
  gap: 1.5rem;
}

/* The form is part of the first paint. Without JavaScript it can't pass the
   spam check: the <noscript> on /contact/ loads noscript.css, which hides it. */

.form__row {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 40rem) {
  .form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.field {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

@media (min-width: 40rem) {
  .field--half {
    max-width: calc(50% - 0.75rem);
  }
}

.field label {
  font: 600 1rem/1.35 var(--serif);
}

.field__optional {
  color: var(--ink-2);
  font-weight: 400;
}

.field__hint {
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.field input,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--ink-2);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.5 var(--serif);
}

.field textarea {
  min-height: 11rem;
  resize: vertical;
}

.field input:hover,
.field textarea:hover {
  border-color: var(--ink);
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 0;
  border-color: var(--ink);
}

.field input:user-invalid,
.field textarea:user-invalid {
  border-color: var(--red);
  box-shadow: inset 3px 0 0 var(--red);
}

/* Honeypot: invisible to people, tempting to form-filling bots. */
.form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__turnstile:empty {
  display: none;
}

.form__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding-top: 0.5rem;
}

.form__submit .button {
  min-width: 8rem;
}

.form__submit .button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.form__note {
  max-width: 26rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.form__status:empty {
  display: none;
}

.form__status {
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--ink);
  background: var(--paper-2);
}

.form__status[data-kind="ok"] {
  border-left-color: var(--green);
}

.form__status[data-kind="error"] {
  border-left-color: var(--red);
}

.contact__aside {
  display: grid;
  gap: 2.25rem;
  align-content: start;
}

.aside-block {
  padding-top: 0.9rem;
  border-top: 2px solid var(--ink);
}

.aside-block h2 {
  margin-bottom: 0.75rem;
  color: var(--ink-2);
}

.aside-block p {
  font-size: 1rem;
}

.aside-block__email {
  font-size: 1.125rem;
  overflow-wrap: anywhere;
}

.steps {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
  font-size: 1rem;
  line-height: 1.5;
}

.steps li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  padding-top: 0.2rem;
  color: var(--ink-2);
  font: 500 0.8125rem/1.4 var(--mono);
}