/* Page regions.
 *
 * One column, one measure, everything on the character grid. The responsive
 * work is mostly done by the ch unit: when the viewport is narrower than the
 * measure, the measure gives way and the grid stays intact.
 */

.page {
  width: min(var(--measure), 100vw - var(--cw) * 4);
  margin-inline: auto;
  padding-block-end: calc(var(--lh) * 3);
}

/* -- status bar ------------------------------------------------------------ */

.statusbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--cw) * 2);
  align-items: baseline;
  padding: calc(var(--lh) / 4) 0;
  background: var(--bg);
  border-block-end: 1px solid var(--rule);
  font-size: 0.875rem;
}

/* Deliberately not link-coloured: it is the site's own name, and painting it
 * green would claim it is a verifiable external reference, which is what green
 * means everywhere else here. */
.statusbar__host {
  color: var(--fg-strong);
  font-weight: 700;
  text-decoration: none;
}

.statusbar__host:hover { text-decoration: underline; }
.statusbar__host[aria-current="page"] { cursor: default; }
.statusbar__spacer { margin-inline-start: auto; }

/* -- banner ---------------------------------------------------------------- */

/* Wordmark and portrait on one row, kept side by side on a phone too -- the
 * brief was explicit about that, so no breakpoint stacks them. The ASCII art
 * already scales with the viewport, and the portrait takes a share of the row
 * rather than a fixed size, so both shrink together. */
.banner-row {
  display: flex;
  align-items: center;
  gap: calc(var(--cw) * 2);
  margin-block: var(--lh) 0;
}

.banner-row .banner {
  flex: 1 1 auto;
  min-width: 0;          /* lets the <pre> shrink instead of forcing overflow */
  margin-block: 0;
}

.portrait {
  flex: 0 0 30%;
  max-width: 170px;
  margin: 0;
}

.portrait svg {
  display: block;
  width: 100%;
  height: auto;
  /* Safari derives no height from a viewBox alone; without this the drawing is
   * laid out and never painted. Ratio matches the viewBox. */
  aspect-ratio: 70 / 65;
}

.banner { margin-block: var(--lh) 0; }

/* Geometry, not characters: see static/svg/wordmark.svg for why. It scales to
 * the column and cannot come apart, whatever font the device has. */
.banner__mark {
  display: block;
  color: var(--axis-public);
}

.banner__mark svg {
  display: block;
  width: 100%;
  max-width: 17rem;
  height: auto;
  aspect-ratio: 270 / 108;
}

/* Ordinary Latin letters, so any font can draw them. */
.banner__sub {
  display: block;
  margin-block-start: calc(var(--lh) / 3);
  color: var(--axis-public);
  font-size: 0.75rem;
  letter-spacing: 0.35em;
}

.banner__tagline {
  margin-block: var(--lh) 0;
  color: var(--fg-dim);
}

/* The routing paragraph. Full --fg rather than --fg-dim: the tagline above it
   is a label and may recede, but this is the one piece of prose on the page
   that tells a visitor where to go, and dimming it would bury the thing it
   exists to surface. Held to a readable measure -- the page grid is wide enough
   for a table, which is far too wide for running text. */
.banner__intro {
  margin-block: calc(var(--lh) / 2) 0;
  max-width: 68ch;
}

/* -- navigation ------------------------------------------------------------ */

.nav {
  margin-block: var(--lh);
  padding-block: calc(var(--lh) / 4);
  border-block: 1px solid var(--rule);
}

.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--cw) * 2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The prompt is generated, so "$" is never part of the copied text and never
 * read aloud as a stray dollar sign in the middle of the link list. */
.nav__list::before {
  content: "$ cd";
  color: var(--fg-dim);
}

.nav__link[aria-current="page"] {
  color: var(--fg-strong);
  text-decoration: underline;
}

/* -- sections -------------------------------------------------------------- */

.section { margin-block: calc(var(--lh) * 2); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
  gap: var(--lh) calc(var(--cw) * 3);
}

.card__title { margin-block: 0 calc(var(--lh) / 2); }
.card p { margin-block-end: 0; }

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

.footer {
  margin-block-start: calc(var(--lh) * 2);
  padding-block-start: calc(var(--lh) / 2);
  border-block-start: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--fg-dim);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--cw) * 2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* -- narrow viewports ------------------------------------------------------ */

@media (max-width: 52ch) {
  :root { --measure: 100%; }
  .statusbar { font-size: 0.8125rem; }
}