/* The plain pages' content (About, Why post-SaaS, Bring your project,
   Contact, Security, the creator programme terms, the 404 page, and the
   catalogue and plans pages): a page head, then sections, each a heading
   beside its text on wide screens. Black continues the three.js pages'
   world; type is the same grotesk and mono. Components (frame/README.md):
   .page, .page-head, .kicker, .page-title, .lede, .actions, .page-section,
   .prose, .cards/.card, .facts, .address, .prompt, .rule-quote, .note. */

.page {
  --measure: 38em;
  --body-size: clamp(17px, 1.25vw, 20px);
  /* Each section's space above and below its rule: two make the space
     between sections (the frame's --rer-space-section). */
  --section-pad: calc(var(--rer-space-section) / 2);
  display: block;
  padding: var(--rer-space-top) var(--gutter) var(--rer-space-end);
}

/* Head */

.page-head { max-width: 62rem; padding-bottom: calc(var(--rer-space-head) + 16px); }
.page-head:last-child { padding-bottom: 0; } /* a page that is only its head (404): the end space alone */
.kicker {
  margin: 0 0 clamp(24px, 2.4vw, 36px);
  font: 400 13px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.page-title {
  margin: 0;
  font-size: clamp(40px, 5.4vw, 92px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--paper);
  text-wrap: balance;
}
.lede {
  max-width: 34em;
  margin: calc(var(--rer-space-inset) + 4px) 0 0;
  font-size: clamp(19px, 1.6vw, 26px);
  font-weight: 300;
  line-height: 1.45;
  color: var(--text-soft);
  text-wrap: pretty;
}
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: calc(var(--rer-space-inset) + 8px); }

/* Sections: the heading beside the text (901 px and up), above it below. */

.page-section {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--rer-space-inset) var(--rer-space-label);
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 24px;
}
.page-section:last-child { padding-bottom: 0; }
.page-section > h2 {
  margin: 0;
  font-size: clamp(22px, 2vw, 34px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--paper);
}
.page-section > .section-kicker { grid-column: 1; }
.page-section > :not(h2):not(.section-kicker) { grid-column: 2; min-width: 0; }

/* Running text */

.prose { max-width: var(--measure); font-size: var(--body-size); line-height: var(--rer-leading); color: var(--text-soft); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin: 0 0 0.6em; padding-left: 0.2em; }
.prose li::marker { color: var(--text-faint); }
.prose h3 { margin: 2em 0 0.6em; font-size: 1em; font-weight: 600; color: var(--text); }
.prose strong { font-weight: 600; color: var(--text); }
.prose a, .note a, .card a:not(.pill) {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--hairline);
}
.prose a:hover, .note a:hover, .card a:not(.pill):hover { color: #fff; text-decoration-color: #fff; }
.prose a:focus-visible, .note a:focus-visible, .card a:focus-visible, .page a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}
.prose code, .card code {
  font: 0.88em/1.5 var(--mono);
  color: var(--text);
  overflow-wrap: anywhere;
}

/* Cards: short, parallel items (addresses, steps, plans, projects). */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 1.8vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 2.4vw, 36px);
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 16px;
  line-height: var(--rer-leading);
  color: var(--text-soft);
}
.card h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--text); }
.card p { margin: 0; }
.card .pill { align-self: flex-start; margin-top: auto; }

/* A definition list of short facts: term in mono, value beside it. */

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 18px 36px; margin: 0; font-size: var(--body-size); line-height: 1.5; }
.facts dt { font: 400 13px/2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.facts dd { margin: 0; color: var(--text-soft); min-width: 0; overflow-wrap: anywhere; }
.facts a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--hairline); }

.address { margin: 0 0 1.1em; font: 400 15px/1.7 var(--mono); font-style: normal; color: var(--text-soft); }

/* A prompt to give an agent, and a quoted rule: set apart from the text. */

.prompt, .rule-quote {
  max-width: var(--measure);
  margin: 0;
  padding: 24px 28px;
  border-left: 2px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.prompt { font: 400 15px/1.65 var(--mono); color: var(--text); }
.rule-quote { font-size: clamp(19px, 1.5vw, 24px); font-weight: 400; line-height: 1.5; color: var(--paper); white-space: normal; }

.note { max-width: var(--measure); margin: 0; font: 400 13px/1.6 var(--mono); color: var(--text-faint); }

/* Narrow: one column. */

@media (max-width: 900px) {
  .page-section { grid-template-columns: minmax(0, 1fr); }
  .page-section > h2, .page-section > .section-kicker, .page-section > :not(h2):not(.section-kicker) { grid-column: 1; }
}

@media (max-width: 480px) {
  .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .facts dd { margin-bottom: 18px; }
}