/* Lambda Symbolics · Interlisp Paper stylesheet.
   Black ink on one gentle off-white substrate. No second surface color,
   no flat gray, no solid shadows, no JavaScript.
   Reference: DESIGN.md (Interlisp Paper) in the Hiisi repository. */

@font-face {
  font-family: "Times New Roman";
  src: url("fonts/times-new-roman-regular.woff2") format("woff2"),
       url("fonts/times-new-roman-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Times New Roman";
  src: url("fonts/times-new-roman-bold.woff2") format("woff2"),
       url("fonts/times-new-roman-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Times New Roman";
  src: url("fonts/times-new-roman-italic.woff2") format("woff2"),
       url("fonts/times-new-roman-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Times New Roman";
  src: url("fonts/times-new-roman-bold-italic.woff2") format("woff2"),
       url("fonts/times-new-roman-bold-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "CMU Typewriter Text";
  src: url("fonts/cmu-typewriter-regular.woff2") format("woff2"),
       url("fonts/cmu-typewriter-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "CMU Typewriter Text";
  src: url("fonts/cmu-typewriter-bold.woff2") format("woff2"),
       url("fonts/cmu-typewriter-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "CMU Typewriter Text";
  src: url("fonts/cmu-typewriter-italic.woff2") format("woff2"),
       url("fonts/cmu-typewriter-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "CMU Typewriter Text";
  src: url("fonts/cmu-typewriter-bold-italic.woff2") format("woff2"),
       url("fonts/cmu-typewriter-bold-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink:   #000000;
  --paper: #fffefa;

  /* Semantic accents: tiny flare and rare semantic controls only. */
  --accent-blue:   #003a70;
  --accent-red:    #8a1c1c;
  --accent-green:  #12633a;
  --accent-yellow: #8a6a00;

  --font-serif: "Times New Roman", Times, "Nimbus Roman No9 L", "Liberation Serif", serif;
  --font-mono:  "CMU Typewriter Text", "Courier New", Courier, "Liberation Mono", monospace;

  --bitmap-dither: radial-gradient(var(--ink) 1px, transparent 1px);

  /* The letterhead lockup. Named because the row gap has to reserve the
     descender of its lambda, and needs the same number to do it. */
  --wordmark-size: clamp(38px, 12vw, 62px);
  --wordmark-tail: calc(0.427 * var(--wordmark-size));
}

* {
  box-sizing: border-box;
}

html {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.52;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
}

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

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

/* -- Shell -- */

.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: 24px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 10;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 4px 8px;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* -- Letterhead header -- */

.letterhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  /* The lockup is pulled up by its descender so the row aligns on the letter
     baseline. When the header wraps, the row gap has to give that height
     back, or the tail of the lambda lands on the navigation. */
  gap: calc(12px + var(--wordmark-tail)) 32px;
  flex-wrap: wrap;
  padding: 50px 0 16px;
}

.wordmark {
  font-size: var(--wordmark-size);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav {
  margin: 0;
  padding: 0;
}

.site-nav-list {
  display: flex;
  gap: 8px 24px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-size: 19px;
  color: var(--ink);
  text-decoration: underline;
  font-style: italic;
  font-weight: 700;
  padding-block: 4px;
}

.wordmark img {
  display: block;
  width: auto;
  /* Sized so the cap height of the lockup matches the setting it replaced,
     then pulled up by the descender, because the tail of the lambda falls
     below the letter baseline and the letterhead aligns on baselines. */
  height: 1.097em;
  margin-bottom: calc(-1 * var(--wordmark-tail));
}

.wordmark:hover {
  text-decoration: none;
}

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

/* -- Document structure -- */

h1 {
  font-size: clamp(46px, 8vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0 0 28px;
}

h2 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  padding-bottom: 6px;
  margin: 0 0 20px;
}

h3 {
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 40px 0 8px;
}

p,
ul,
ol {
  max-width: 68ch;
  margin: 0 0 16px;
}

ul,
ol {
  padding-left: 1.4em;
}

li {
  margin-bottom: 6px;
}

a {
  color: var(--ink);
  text-decoration: none;
  font-style: initial;
  text-underline-offset: 2px;
}

main p a:not(.button),
main li a,
main td a,
main dd a {
  text-decoration: underline;
  font-style: italic;
}

/* CMU Typewriter Text is a classic TeX mono: keep size close to body
   and avoid the aggressive negative tracking Nimbus needed. */
code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

pre {
  max-width: 100%;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--ink);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.42;
  overflow-x: auto;
}

pre code {
  font-size: inherit;
}

pre kbd {
  font-family: inherit;
  font-weight: 700;
}

.window-body pre {
  border: 0;
  margin: 0;
  padding: 2px 0;
}

/* Algol-style monochrome syntax marking: bold for keywords, italic for
   comments, bold italic for placeholders. No color; ink stays black. */
.hl-keyword {
  font-weight: 700;
}

.hl-comment {
  font-style: italic;
}

pre var,
.hl-placeholder {
  font-weight: 700;
  font-style: italic;
  font-family: inherit;
}

/* PS1 transcript prompts: the package tag is bold, echoing the rule that a
   leading parenthesis means Lisp; the working directory is italic, a
   contextual aside rather than language. User@host and the sigil stay
   plain roman, since they carry no CCLSH-specific meaning. */
.hl-package {
  font-weight: 700;
}

.hl-path {
  font-style: italic;
}

.doc-section {
  margin-top: 96px;
}

.install-section {
  margin-top: clamp(48px, 7vw, 72px);
}

.install-banner {
  margin-bottom: 40px;
  padding: clamp(28px, 5vw, 52px) clamp(18px, 4vw, 40px);
  color: var(--ink);
  background: var(--paper);
  text-align: center;
}

.install-copy {
  appearance: none;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  cursor: copy;
}

.install-copy code {
  display: inline-block;
  max-width: 100%;
  color: inherit;
  font-size: clamp(16px, 2.5vw, 28px);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.install-copy:hover code {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.install-note {
  max-width: none;
  margin: 12px 0 0;
  font-size: 15px;
  font-style: italic;
}

.install-window {
  max-width: none;
}

.lede {
  font-size: 21px;
  line-height: 1.35;
  max-width: 56ch;
}

.motto {
  font-size: 15px;
  margin-top: 24px;
}

.section-intro {
  font-size: 19px;
  max-width: 62ch;
}

/* -- Single-column page opening (registry and similar indexes) -- */

.page-open {
  padding-top: 56px;
}

.page-open h1 {
  font-size: clamp(42px, 7vw, 72px);
}

.registry-section {
  margin-top: 64px;
}

/* -- Two-column hero with a document specimen -- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px 48px;
  align-items: start;
  padding-top: 56px;
}

.hero > *,
.duo > * {
  min-width: 0;
}

.hero-copy h1 {
  font-size: clamp(42px, 7vw, 72px);
}

.mascot-window {
  max-width: 520px;
  margin: 0;
  justify-self: end;
}

.mascot-window .window-body {
  padding: 0;
}

.mascot-image {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper);
}

/* -- Actions -- */

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 28px 0 16px;
}

.button {
  display: inline-block;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 9px 16px;
  text-decoration: none;
}

.button:hover,
.button:focus-visible,
.button:active {
  background: var(--ink);
  color: var(--paper);
}

/* -- Fields -- */

input,
select,
textarea {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 8px 10px;
  min-height: 42px;
  width: 100%;
  accent-color: var(--ink);
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  min-height: 0;
}

/* Ranges and progress are fully claimed; native tracks render gray. */
input[type="range"] {
  appearance: none;
  border: 0;
  padding: 0;
  height: 24px;
  background: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--ink);
}

input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--ink);
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 20px;
  margin-top: -9px;
  background: var(--ink);
  border: 0;
}

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 20px;
  background: var(--ink);
  border: 0;
  border-radius: 0;
}

progress {
  appearance: none;
  height: 12px;
  border: 1px solid var(--ink);
  background: var(--paper);
}

progress::-webkit-progress-bar {
  background: var(--paper);
}

progress::-webkit-progress-value {
  background: var(--ink);
}

progress::-moz-progress-bar {
  background: var(--ink);
}

input[type="file"] {
  padding: 6px;
}

::file-selector-button {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 4px 10px;
  margin-right: 10px;
  cursor: pointer;
}

input[type="file"]:hover::file-selector-button {
  background: var(--ink);
  color: var(--paper);
}

input:disabled,
select:disabled,
textarea:disabled {
  border-style: dashed;
}

label {
  font-weight: 700;
  font-size: 15px;
}

.field {
  display: grid;
  gap: 4px;
}

.field > span {
  font-weight: 700;
  font-size: 15px;
}

.field--inline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 400;
}

.field--switch {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
}

.helper-note {
  font-size: 14px;
  margin: 2px 0 0;
}

.field--error input,
.field--error select,
.field--error textarea {
  border: 1px solid var(--accent-red);
}

.error-note {
  font-size: 14px;
  margin: 2px 0 0;
}

.error-note::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  background: var(--accent-red);
}

/* -- Switch: a checkbox wearing its state.
   Square knob, no pill; on = track and knob invert together. -- */

input[type="checkbox"].switch {
  appearance: none;
  position: relative;
  width: 46px;
  height: 24px;
  min-height: 0;
  padding: 0;
  flex: 0 0 auto;
  cursor: pointer;
}

input[type="checkbox"].switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--ink);
}

input[type="checkbox"].switch:checked {
  background: var(--ink);
}

input[type="checkbox"].switch:checked::before {
  left: auto;
  right: 3px;
  background: var(--paper);
}

/* Disabled keeps position as the state signal: dashed track, dithered knob. */
input[type="checkbox"].switch:disabled {
  cursor: default;
  border-style: dashed;
  background: var(--paper);
}

input[type="checkbox"].switch:disabled::before {
  background: var(--paper);
  background-image: var(--bitmap-dither);
  background-size: 3px 3px;
}

/* -- Catalogue entries -- */

.product {
  max-width: 68ch;
}

.product-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.product-head h3 {
  margin: 0;
}

.product-head a {
  font-size: 15px;
  text-decoration: underline;
  font-style: italic;
}

.entry,
.entry-head {
  max-width: 68ch;
}

.entry-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.entry-head h3 {
  margin: 0;
}

.entry-head a {
  font-size: 15px;
  text-decoration: underline;
  font-style: italic;
}

.service-link {
  font-size: 15px;
  text-decoration: underline;
  font-style: italic;
}

.property-sheet a {
  text-decoration: underline;
  font-style: italic;
}

.product p,
.entry p {
  margin-top: 8px;
}

/* -- Window and property sheet -- */

.window {
  position: relative;
  width: 100%;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--ink);
  max-width: 620px;
}

.window--wide {
  max-width: none;
}

.screenshot-window {
  margin: 20px 0 28px;
}

.screenshot-window .window-body {
  padding: 0;
  background: #000000;
}

.screenshot-image {
  display: block;
  width: 100%;
  height: auto;
}

.window::after {
  content: "";
  position: absolute;
  inset: 15px -15px -15px 15px;
  background-image: var(--bitmap-dither);
  background-size: 3px 3px;
  z-index: -1;
}

.window-titlebar {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.15;
  min-height: 26px;
  display: flex;
  align-items: center;
  padding: 5px 8px;
}

.window-body {
  padding: 12px 14px;
}

.property-sheet {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px;
  border: 1px solid var(--ink);
  padding: 12px 16px;
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.38;
}

.property-sheet dt {
  font-weight: 700;
}

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

.window .property-sheet {
  border: 0;
  padding: 0;
  margin: 0;
}

/* -- Tables -- */

table {
  border-collapse: collapse;
  width: 100%;
  max-width: 880px;
  font-size: 15px;
  line-height: 1.38;
  margin: 0 0 16px;
}

caption {
  text-align: left;
  font-size: 13px;
  letter-spacing: 0.015em;
  padding-bottom: 6px;
}

th,
td {
  border: 1px solid var(--ink);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}

th {
  font-weight: 700;
}

.table-scroll {
  overflow-x: auto;
}

.table-scroll table {
  margin-bottom: 0;
}

/* -- Two-column groups -- */

.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 32px 48px;
  align-items: start;
  max-width: 1180px;
}

.duo h3 {
  margin-top: 0;
}

.specimen-row {
  margin-top: 32px;
}

.code-label {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 2px;
}

.caveat {
  margin-top: 28px;
  font-style: italic;
}

.closing-actions {
  margin-top: 40px;
}

/* -- Syllabus -- */

.syllabus {
  max-width: 1180px;
  columns: 2 340px;
  column-gap: 48px;
}

.syllabus li {
  break-inside: avoid;
  margin-bottom: 12px;
}

/* -- Colophon footer -- */

.colophon {
  display: flex;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
  margin-top: 128px;
  padding: 12px 0 48px;
}

.colophon p {
  margin: 0;
  font-size: 18px;
  font-style: italic;
  letter-spacing: 0.015em;
}

/* -- Small screens -- */

@media (max-width: 880px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 32px;
  }

  .doc-section {
    margin-top: 72px;
  }

  .colophon {
    margin-top: 96px;
  }

  .site-nav a {
    padding-block: 8px;
  }
}

@media (max-width: 480px) {
  .shell {
    padding-inline: 20px;
  }

  :root {
    --wordmark-size: clamp(30px, 9.5vw, 38px);
  }

  .property-sheet {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .property-sheet dd {
    margin-bottom: 8px;
  }
}

/* -- Unlinked printable sheets (shared chrome) --
   Pages whose body carries .sheet-page present physical print objects.
   On screen they keep the letterhead and instructions; in print only the
   sheet itself remains. */

button.button {
  font-family: var(--font-serif);
  cursor: pointer;
}

@media print {
  .sheet-page .letterhead,
  .sheet-page .sheet-intro,
  .sheet-page .sheet-legend,
  .sheet-page .colophon {
    display: none;
  }

  .sheet-page .sheet-section {
    margin-top: 0;
  }
}

/* -- Bookmark sheet (unlinked printable) --
   Each bookmark is a physical print object of exactly 50 mm × 150 mm and
   must never scale. */

.bookmark-sheet {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 44px 40px;
  margin-top: 44px;
}

.bookmark {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 50mm;
  height: 150mm;
  border: 1px solid var(--ink);
  background: var(--paper);
}

.bookmark::after {
  content: "";
  position: absolute;
  inset: 12px -12px -12px 12px;
  background-image: var(--bitmap-dither);
  background-size: 3px 3px;
  z-index: -1;
}

.bookmark p {
  margin: 0;
  max-width: none;
}

.bookmark-titlebar {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.15;
  padding: 4px 7px;
}

.bookmark-mascot {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper);
}

.bookmark-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px;
}

.bookmark-push {
  margin-top: auto;
}

.bookmark-name {
  font-size: 27px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.bookmark-line {
  font-size: 12.5px;
  line-height: 1.35;
}

.bookmark-name + .bookmark-line {
  margin-top: 6px;
}

.bookmark-glyph {
  font-size: 150px;
  line-height: 1;
  font-weight: 700;
  margin-left: -4px;
}

.bookmark-wordmark {
  font-size: 29px;
  line-height: 0.95;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin-top: 8px;
}

.bookmark-motto {
  font-size: 11.5px;
  margin-top: 8px;
}

.bookmark-points {
  list-style: none;
  max-width: none;
  margin-bottom: 0;
  padding-left: 0;
  font-size: 11.5px;
  line-height: 1.35;
}

.bookmark-points li {
  margin-bottom: 7px;
}

.bookmark-points li:last-child {
  margin-bottom: 0;
}

.bookmark-props {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 5px 10px;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.35;
}

.bookmark-props dt {
  font-weight: 700;
}

.bookmark-props dd {
  margin: 0;
}

.bookmark pre {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 10px;
  line-height: 1.5;
  overflow: visible;
}

.bookmark pre + .bookmark-line {
  margin-top: 8px;
}

.bookmark-foot {
  padding: 8px 10px 10px;
}

.bookmark-command {
  font-size: 11px;
  line-height: 1.45;
}

.bookmark-command code {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.bookmark-url {
  font-size: 11px;
  font-style: italic;
}

.bookmark-command + .bookmark-url {
  margin-top: 5px;
}

.bookmark-dither {
  flex: 0 0 auto;
  height: 8mm;
  background-image: var(--bitmap-dither);
  background-size: 3px 3px;
}

@media print {
  .bookmark-sheet {
    flex-wrap: nowrap;
    gap: 8mm;
    margin-top: 0;
  }

  .bookmark {
    break-inside: avoid;
  }

  .bookmark::after {
    display: none;
  }
}


/* -- Business card sheet (unlinked printable) --
   Each card is a physical print object of exactly 85 mm × 55 mm, the
   European standard, and must never scale. */

.card-sheet {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px 36px;
  margin-top: 44px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 85mm;
  height: 55mm;
  border: 1px solid var(--ink);
  background: var(--paper);
}

.card::after {
  content: "";
  position: absolute;
  inset: 10px -10px -10px 10px;
  background-image: var(--bitmap-dither);
  background-size: 3px 3px;
  z-index: -1;
}

.card p {
  margin: 0;
  max-width: none;
}

.card--letterhead {
  flex-direction: row;
}

.card-main {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 12px;
}

.card-glyph {
  position: absolute;
  top: 6px;
  right: 11px;
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
}

.card-name {
  font-size: 25px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.card-role {
  font-size: 12px;
  font-style: italic;
  margin-top: 5px;
}

.card-contact {
  margin-top: auto;
  padding-top: 8px;
  font-size: 11px;
  line-height: 1.4;
}

.card-edge {
  flex: 0 0 auto;
  width: 6mm;
  background-image: var(--bitmap-dither);
  background-size: 3px 3px;
}

.card-titlebar {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.15;
  padding: 4px 7px;
}

.card-body {
  flex: 1 1 auto;
  padding: 9px 12px;
}

.card-props {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 3px 12px;
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
}

.card-props dt {
  font-weight: 700;
}

.card-props dd {
  margin: 0;
}

.card-dither {
  flex: 0 0 auto;
  height: 4mm;
  background-image: var(--bitmap-dither);
  background-size: 3px 3px;
}

@media print {
  .card-sheet {
    gap: 6mm;
    margin-top: 0;
  }

  .card {
    break-inside: avoid;
  }

  .card::after {
    display: none;
  }
}

/* -- Print -- */

@media print {
  html {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .shell {
    max-width: none;
    padding-inline: 0;
  }

  .letterhead {
    padding-top: 0;
  }

  .autolith-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 24px;
  }

  .skip-link,
  .site-nav {
    display: none;
  }

  .doc-section {
    margin-top: 48px;
  }

  .colophon {
    padding-bottom: 0;
  }

}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

}

/* -- Captured terminal sessions -- */
/* Real asciinema recordings. The screen is one inverted object: black
   ground, paper phosphor, inside a titled window. The player chrome
   follows the canon; the recording's pixels are the captured artifact. */

.demo-cast {
  background: #000000;
}

.demo-cast .ap-wrapper,
.demo-cast .ap-player,
.demo-cast .ap-player div,
.demo-cast .ap-control-bar,
.demo-cast .ap-control-bar * {
  border-radius: 0 !important;
}

.asciinema-player-theme-paper {
  --term-color-foreground: #fffefa;
  --term-color-background: #000000;
  --term-color-0: hsl(0, 0%, 0%);
  --term-color-1: hsl(343, 70%, 55%);
  --term-color-2: hsl(103, 70%, 44%);
  --term-color-3: hsl(43, 70%, 55%);
  --term-color-4: hsl(193, 70%, 49.5%);
  --term-color-5: hsl(283, 70%, 60.5%);
  --term-color-6: hsl(163, 70%, 60.5%);
  --term-color-7: hsl(0, 0%, 85%);
  --term-color-8: hsl(0, 0%, 30%);
  --term-color-9: hsl(343, 70%, 55%);
  --term-color-10: hsl(103, 70%, 44%);
  --term-color-11: hsl(43, 70%, 55%);
  --term-color-12: hsl(193, 70%, 49.5%);
  --term-color-13: hsl(283, 70%, 60.5%);
  --term-color-14: hsl(163, 70%, 60.5%);
  --term-color-15: hsl(0, 0%, 100%);
}

.demo-cast .ap-control-bar {
  background: #000000;
}

.demo-cast .ap-control-bar svg {
  fill: #fffefa;
}

.demo-cast .ap-control-bar span.ap-timer {
  color: #fffefa;
}

.demo-cast .ap-control-bar .ap-progressbar .ap-bar .ap-gutter-empty {
  background: #000000;
  background-image: radial-gradient(#fffefa 1px, transparent 1px);
  background-size: 4px 4px;
}

.demo-cast .ap-control-bar .ap-progressbar .ap-bar .ap-gutter-full {
  background: #fffefa;
}

.demo-cast .ap-play-button svg .ap-play-btn-fill {
  fill: #fffefa;
}

.demo-cast-window .window-body {
  padding: 14px 16px;
}

.demo-load-row {
  margin: 0 0 12px;
}

.cast-load {
  padding: 6px 14px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid var(--ink);
  cursor: pointer;
}

.cast-load:hover {
  background: var(--ink);
  color: var(--paper);
}

.demo-terminal {
  container-type: inline-size;
  border: 1px solid var(--ink);
}

.demo-cast-window .property-sheet {
  margin: 14px 0 0;
}

.demo-cast-window [hidden] {
  display: none;
}

.demo-tab-row {
  display: flex;
}

.demo-tab {
  flex: 1;
  padding: 9px 12px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  border: 0;
  border-right: 1px solid var(--ink);
  cursor: pointer;
}

.demo-tab:last-child {
  border-right: 0;
}

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

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

.demo-tab--active:focus-visible {
  outline-color: var(--paper);
}

.cast-poster {
  margin: 0;
  padding: 1.2cqw 1.4cqw;
  background: #000000;
  color: #fffefa;
  font-size: 1.98cqw;
  line-height: 1.3;
  overflow-x: auto;
  border: 0;
}



/* -- Autolith docs -- */

.docs-path {
  max-width: 68ch;
  padding-top: 48px;
  font-size: 15px;
  font-style: italic;
  letter-spacing: 0.02em;
}

.docs-path a {
  font-style: italic;
}

.doc-page h1 {
  font-size: clamp(34px, 5vw, 56px);
  margin: 10px 0 24px;
}

/* -- Contents window for serial documents -- */

.doc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px 48px;
  align-items: start;
}

.doc-content {
  min-width: 0;
}

.doc-contents {
  position: sticky;
  top: 24px;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.toc-list li {
  margin-bottom: 0;
}

.toc-part {
  margin-top: 14px;
  font-weight: 700;
  font-size: 15px;
}

.toc-part:first-child {
  margin-top: 0;
}

.toc-list a,
.toc-list .toc-current {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 8px;
  font-size: 15px;
  font-style: normal;
  text-decoration: none;
}

.toc-list a:hover,
.toc-list a:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.toc-current {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
}

.toc-number {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0;
  min-width: 2ch;
  text-align: right;
}

.docs-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px 40px;
  flex-wrap: wrap;
  max-width: 68ch;
  margin-top: 72px;
}

.docs-pager-cell {
  min-width: 0;
}

.docs-pager-cell--next {
  margin-left: auto;
  text-align: right;
}

.docs-pager-label {
  display: block;
  font-size: 14px;
  font-style: italic;
  letter-spacing: 0.02em;
}

.docs-pager a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 880px) {
  .doc-body {
    grid-template-columns: 1fr;
  }

  .doc-contents {
    position: static;
  }
}

@media print {
  .doc-contents {
    display: none;
  }

  .doc-body {
    display: block;
  }
}