/* Shared by every page. Layout: one left-aligned column, like a man page; text art only. */
:root {
  --bg: #0f1317;
  --fg: #d8d3c6;
  --dim: #7b8591;
  --line: #262d35;
  --accent: #e2a65c;
  --ornament: #6f9ee8;
  --grass-far: #182019;
  --grass: #1f2c22;
  --grass-hi: #2e4233;
  --flower: #4a4322;
  --horse: #8a5a33;
  --horse-dark: #4a2f1b;
  --horse-hi: #b07a47;
  --heart: #d9788b;
  --teal: #5fb8a8;
  --faint: #39424c;
  --body: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --art: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --lh: 1.6;
  --photo-bg: #0f1317; /* photos sit on their own dark "screen" box */
  --photo-fg: #d8d3c6;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html {
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* keep phones from enlarging text and breaking the art */
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/var(--lh) var(--body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
main {
  max-width: 92ch;
  margin: 0 auto;
  padding-block: 56px 40px;
  display: grid;
  gap: 56px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
pre { margin: 0; font-family: var(--art); font-variant-ligatures: none; }
.dim { color: var(--dim); }
h2 { font: 600 13px/var(--lh) var(--body); margin: 0 0 16px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.12em; }
footer { border-top: 1px dashed var(--line); padding-top: 16px; font-size: 12px; color: var(--dim); }
/* text photos: 150 columns scaled to fit their container (150 chars x 0.6em = 90em, plus 20px padding) */
figure:has(.photo), details:has(.photo) { container-type: inline-size; }
.photo {
  background: var(--photo-bg); color: var(--photo-fg);
  font-size: min(6.5px, calc((100cqi - 24px) / 90)); line-height: 1.1;
  padding: 10px; width: max-content; max-width: 100%; overflow: hidden;
  -webkit-text-size-adjust: none; text-size-adjust: none;
}
/* faint ASCII field behind the page (bg.js) */
#bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  font-size: 12px; line-height: 1.2; color: var(--grass);
}
/* colour codes used by Art.toHTML */
.art .a { color: var(--accent); }
.art .d { color: var(--dim); }
.art .b { color: var(--ornament); }
.art .t { color: var(--teal); }
.art .f { color: var(--faint); }
.art .h { color: var(--grass-hi); }
.art .g { color: var(--grass); }
.art .k { color: var(--grass-far); }
.art .y { color: var(--flower); }
.art .r { color: var(--horse); }
.art .q { color: var(--horse-dark); }
.art .p { color: var(--horse-hi); }
.art .l { color: var(--heart); }