/* gor.bio open wiki — text-only stylesheet
   Colors (fixed, no others):
     background/surfaces #F5F5DC Beige
     all text            #191970 MidnightBlue
     borders/decoration  #A87A7A RosyBrown (darkened from #BC8F8F for WCAG 1.4.11: 3.31:1 on Beige)
     bookstore link     #DC143C Crimson (sole exception, always bold)
   A dark variant (prefers-color-scheme) inverts the same roles.
   Typography:
     48px IBM Plex Serif -> primary title
     32px IBM Plex Serif -> major section title
     22px Mozilla Text   -> subsection heading
     16px Mozilla Text   -> body
     14px Mozilla Text   -> navigation/controls/tables
     13px Mozilla Text   -> supporting information
     12px Mozilla Text   -> metadata/microcopy
   Fonts are declared by family name with the specified fallbacks;
   both families are self-hosted in /assets/fonts (no third-party requests). */

@font-face {
 font-family: "IBM Plex Serif";
 src: url("/assets/fonts/ibm-plex-serif-600.woff2") format("woff2");
 font-weight: 600;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: "Mozilla Text";
 src: url("/assets/fonts/mozilla-text.woff2") format("woff2");
 font-weight: 400 700;
 font-style: normal;
 font-display: swap;
}

:root {
 color-scheme: light dark;
 --bg: #f5f5dc;
 --ink: #191970;
 --rule: #a87a7a;
 --bookstore: #dc143c; /* sole color exception: e-book link */
 --on-bookstore: #f5f5dc;
 --tint: rgba(25, 25, 112, 0.05);
 --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
 --sans: "Mozilla Text", Arial, Helvetica, sans-serif;
 --mono: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Dark variant follows the device setting: same three-color idea, inverted
   (midnight page, beige ink, lightened rosy rule, lightened crimson for contrast). */
@media (prefers-color-scheme: dark) {
 :root {
  --bg: #101045;
  --ink: #f0f0d2;
  --rule: #c49a9a;
  --bookstore: #ff7d96;
  --on-bookstore: #101045;
  --tint: rgba(245, 245, 220, 0.06);
 }
}

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

* {
 box-sizing: border-box;
}

html {
 background: var(--bg);
}

body {
 margin: 0 auto;
 max-width: 780px;
 padding: 24px 20px 56px;
 background: var(--bg);
 color: var(--ink);
 font-family: var(--sans);
 font-size: 16px;
 line-height: 1.65;
 overflow-wrap: break-word;
}

/* ---------- links ---------- */

a {
 color: var(--ink);
 text-decoration-thickness: 1px;
 text-underline-offset: 2px;
}
a:hover {
 text-decoration-thickness: 2px;
}
a:focus-visible,
input[type="search"]:focus-visible,
button:focus-visible {
 outline: 2px solid var(--rule);
 outline-offset: 1px;
}
.bookstore-link {
 color: var(--bookstore);
 font-weight: bold;
}

/* ---------- headings (semantic levels, fixed sizes) ---------- */

h1 {
 font-family: var(--serif);
 font-size: 48px;
 line-height: 1.15;
 margin: 0 0 16px;
 font-weight: 600;
}
h2 {
 font-family: var(--serif);
 font-size: 32px;
 line-height: 1.2;
 margin: 44px 0 12px;
 font-weight: 600;
}
h3 {
 font-size: 22px;
 line-height: 1.3;
 margin: 32px 0 8px;
 font-weight: 600;
}

/* ---------- text sizes ---------- */

p {
 margin: 0 0 16px;
}
.lede {
 font-size: 18px;
 line-height: 1.55;
}
.small {
 font-size: 13px;
}
.meta {
 font-size: 12px;
 color: var(--ink);
 opacity: 0.85;
}
.reuse {
 margin-top: 40px;
 padding-top: 10px;
 border-top: 1px solid var(--rule);
}

strong {
 font-weight: 700;
}
em {
 font-style: italic;
}

/* ---------- lists ---------- */

ul,
ol {
 margin: 0 0 16px;
 padding-left: 26px;
}
li {
 margin-bottom: 4px;
}
ul.plain {
 list-style: none;
 padding-left: 0;
}
ul.plain li {
 margin-bottom: 10px;
}
ul.article-list {
 list-style: none;
 padding-left: 0;
}
ul.article-list li {
 margin-bottom: 12px;
}

/* ---------- code ---------- */

code {
 font-family: var(--mono);
 font-size: 13px;
 background: transparent;
}
pre {
 border: 1px solid var(--rule);
 padding: 12px 14px;
 overflow-x: auto;
 font-size: 13px;
 line-height: 1.5;
 margin: 0 0 16px;
}
pre code {
 font-size: 13px;
}

/* ---------- tables ---------- */

table {
 border-collapse: collapse;
 font-size: 14px;
 margin: 0 0 16px;
 width: 100%;
}
th,
td {
 border: 1px solid var(--rule);
 padding: 6px 10px;
 text-align: left;
 vertical-align: top;
}
th {
 font-weight: 700;
}

/* ---------- quotes / rules ---------- */

blockquote {
 border-left: 3px solid var(--rule);
 margin: 0 0 16px;
 padding: 2px 16px;
}
blockquote p {
 margin-bottom: 8px;
}
hr {
 border: 0;
 border-top: 1px solid var(--rule);
 margin: 36px 0;
}

/* ---------- forms ---------- */

.search-form {
 margin: 20px 0;
}
input[type="search"] {
 background: var(--bg);
 border: 1px solid var(--rule);
 color: var(--ink);
 font-family: var(--sans);
 font-size: 16px;
 padding: 7px 10px;
 width: min(340px, 100%);
 margin-right: 8px;
 border-radius: 0;
}
button {
 background: var(--bg);
 border: 1px solid var(--rule);
 color: var(--ink);
 font-family: var(--sans);
 font-size: 16px;
 padding: 7px 18px;
 cursor: pointer;
 border-radius: 0;
}
button {
 transition: background-color 0.15s, color 0.15s;
}
button:hover {
 background: var(--ink);
 color: var(--bg);
}
button:disabled,
input[type="search"]:disabled {
 opacity: 0.6;
 cursor: not-allowed;
}
input[type="search"]:focus,
button:focus {
 outline: 2px solid var(--rule);
 outline-offset: 1px;
}

/* ---------- landing hero (text objects) ----------
   The ASCII frame is 144x42 but its objects only occupy the middle ~70
   columns. The box is a size container: type scales with its width so the
   art always fits, and on narrow screens the empty side columns are cropped
   (not shrunk to illegibility) by centering an oversized <pre>. */

.hero-art {
 container-type: inline-size;
 margin: 28px 0 8px;
 border: 1px solid var(--rule);
 overflow: hidden;
 background: var(--tint);
}
.hero-art pre {
 border: 0;
 padding: 0;
 /* Frame rows 0-3 and 38-41 are always blank: pull them out of the box. */
 margin: -2.8em auto -3.4em;
 width: 144ch; /* full frame width, so trimmed lines never shift the art off-center */
 font-family: var(--mono);
 font-size: min(11px, calc(100cqw / 144 / 0.62));
 line-height: 1.05;
 color: var(--ink);
 overflow: hidden;
}
@container (max-width: 560px) {
 .hero-art pre {
  margin: -2.8em 0 -3.4em;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(100cqw / 84 / 0.62);
 }
}

/* ---------- article illustrations (hotlinked, Wikimedia) ---------- */

figure.article-image {
 margin: 20px 0;
}
figure.article-image img {
 width: 100%;
 max-width: 640px;
 height: auto;
 border: 1px solid var(--rule);
 display: block;
}
figure.article-image figcaption {
 font-size: 12px;
 color: var(--ink);
 opacity: 0.85;
 margin-top: 6px;
}

/* ---------- tags ---------- */

.tag {
 font-size: 13px;
 border: 1px solid var(--rule);
 padding: 1px 9px;
 margin: 2px 4px 2px 0;
 display: inline-block;
 text-decoration: none;
 transition: background-color 0.15s, color 0.15s;
}
.tag:hover {
 background: var(--ink);
 color: var(--bg);
}

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

header.site {
 border-bottom: 1px solid var(--rule);
 padding-bottom: 14px;
 margin-bottom: 32px;
}
.brand {
 font-family: var(--serif);
 font-size: 24px;
 font-weight: 600;
 line-height: 1.2;
 margin: 0 0 6px;
}
.brand a {
 text-decoration: none;
}
.brand a:hover {
 text-decoration: underline;
 text-decoration-thickness: 2px;
}

nav ul {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 flex-wrap: wrap;
 gap: 4px 16px;
}
nav {
 font-size: 14px;
}
nav a {
 text-decoration: none;
}
nav a:hover {
 text-decoration: underline;
}
nav a[aria-current="page"] {
 text-decoration: underline;
 text-decoration-thickness: 2px;
}

/* Skip-to-content: hidden until keyboard focus lands on it. */
.skip {
 position: absolute;
 left: -9999px;
}
.skip:focus-visible {
 left: 8px;
 top: 8px;
 z-index: 10;
 background: var(--bg);
 border: 1px solid var(--rule);
 padding: 6px 10px;
}

footer.site {
 border-top: 1px solid var(--rule);
 margin-top: 56px;
 padding-top: 16px;
 font-size: 13px;
}
footer.site nav {
 margin-bottom: 14px;
}
footer.site .meta {
 margin: 2px 0;
}

/* ---------- books CTA ---------- */

aside.books-cta {
 margin-top: 40px;
 padding: 12px 16px;
 border-top: 1px solid var(--rule);
 font-size: 14px;
}
aside.books-cta p {
 margin: 0;
}
aside.has-cover::after,
aside.book-promo::after {
 content: "";
 display: block;
 clear: both;
}
a.cta-cover {
 float: left;
 width: 56px;
 margin: 2px 14px 4px 0;
 line-height: 0;
}
a.cta-cover img {
 width: 100%;
 height: auto;
 border: 1px solid var(--rule);
 display: block;
}

/* ---------- pagination ---------- */

.pagination {
 font-size: 14px;
 margin: 8px 0 20px;
}
.pagination a,
.pagination span {
 margin-right: 8px;
}

/* ---------- responsive ---------- */

@media (max-width: 600px) {
 body {
  padding: 16px 14px 40px;
 }
 h1 {
  font-size: 34px;
 }
 h2 {
  font-size: 26px;
 }
 .lede {
  font-size: 16px;
 }
 input[type="search"] {
  width: 100%;
  margin: 0 0 8px;
 }
}

/* ---------- toolkit / kit promo ---------- */

aside.kit-home {
 border: 1px solid var(--rule);
 padding: 12px 16px;
 margin: 20px 0;
}
aside.kit-home p {
 margin: 0;
}
aside.book-promo a.cta-cover {
 width: 72px;
 margin-right: 16px;
}
article.kit-page h2 {
 clear: both;
}
figure.kit-figure {
 float: right;
 width: 340px;
 margin: 4px 0 8px 20px;
}
figure.kit-figure img {
 display: block;
 width: 100%;
 height: auto;
 border: 1px solid var(--rule);
}
figure.kit-figure figcaption {
 margin-top: 6px;
 font-size: 12px;
 opacity: 0.85;
}
a.kit-buy {
 display: inline-block;
 background: var(--bookstore);
 color: var(--on-bookstore);
 font-weight: 700;
 padding: 10px 18px;
 border: 1px solid var(--bookstore);
 text-decoration: none;
}
a.kit-buy:hover {
 background: var(--bg);
 color: var(--bookstore);
}

@media (max-width: 600px) {
 figure.kit-figure {
  float: none;
  width: auto;
  max-width: 420px;
  margin: 0 auto 16px;
 }
 a.kit-buy {
  display: block;
  text-align: center;
 }
}

/* ---------- headings anchors / table of contents ---------- */

h2[id],
h3[id] {
 scroll-margin-top: 12px;
}
h2[id]:target,
h3[id]:target {
 text-decoration: underline;
 text-decoration-color: var(--rule);
 text-decoration-thickness: 2px;
 text-underline-offset: 6px;
}
nav.toc {
 border: 1px solid var(--rule);
 background: var(--tint);
 padding: 10px 18px 6px;
 margin: 0 0 24px;
 font-size: 14px;
}
nav.toc .toc-title {
 font-weight: 700;
 margin: 0 0 4px;
}
nav.toc ol {
 margin: 0 0 8px;
 padding-left: 22px;
 columns: 2 260px;
 column-gap: 28px;
}
nav.toc li {
 margin-bottom: 3px;
 break-inside: avoid;
}

/* ---------- reading measure ---------- */

article > p,
article > ul,
article > ol,
article > blockquote {
 max-width: 72ch;
}

/* ---------- e-book page: the cover tilts like a book on a desk ---------- */

figure.book-figure {
 width: 300px;
 perspective: 900px;
}
figure.book-figure img {
 border: 0;
 box-shadow: 6px 6px 0 var(--rule);
 transform: rotateY(-14deg);
 transform-origin: left center;
 transition: transform 0.4s ease, box-shadow 0.4s ease;
}
figure.book-figure a:hover img,
figure.book-figure a:focus-visible img {
 transform: rotateY(0deg);
 box-shadow: 3px 3px 0 var(--rule);
}
article.book-page h2 {
 clear: none;
}
article.book-page h2#contents {
 clear: both;
}
article.book-page h3 {
 font-size: 18px;
 margin: 24px 0 6px;
}
article.book-page ul {
 columns: 2 280px;
 column-gap: 28px;
 font-size: 15px;
}
article.book-page li {
 break-inside: avoid;
}
@media (max-width: 600px) {
 figure.book-figure {
  width: auto;
  max-width: 280px;
 }
 figure.book-figure img {
  transform: none;
  box-shadow: 4px 4px 0 var(--rule);
 }
}
@media (prefers-reduced-motion: reduce) {
 figure.book-figure img,
 .tag,
 button {
  transition: none;
 }
}

/* ---------- print ---------- */

@media print {
 :root {
  --bg: #fff;
  --ink: #000;
  --rule: #666;
 }
 header.site nav,
 footer.site nav,
 .search-form,
 .hero-art,
 aside.books-cta,
 aside.kit-home,
 nav.toc {
  display: none;
 }
 body {
  max-width: none;
  padding: 0;
 }
 article a[href^="http"]::after {
  content: " (" attr(href) ")";
  font-size: 12px;
 }
}