/* The cover follows the type and colour scheme of the cover of Hoppe's "Democracy: The God That
   Failed" (Transaction, 2001), in the identity the owner set on 13 October 2026: a black field,
   the first half of the title in yellow letters, a red band, the second half in black on paper.
   No brown anywhere. Colours are choices, not samples; no cover art is reproduced.
   Motion follows Anthropic's frontend-design skill (Apache-2.0): one orchestrated entrance, and
   nothing moves under prefers-reduced-motion. */
:root {
  --paper: #F4EFE6;
  --surface: #EBE3D6;
  --ink: #141210;
  --muted: #5F5B56;
  --rule: #CFC8BC;
  --black: #0F0E0D;
  --yellow: #F2C230;
  --red: #A3201C;
  --red-text: #A3201C;
  --on-black: #F4EFE6;
  --ok: #2F6B2F;
  --warn: #8A5A00;
  --serif: 'EB Garamond', Garamond, Georgia, serif;
  --display: 'Playfair Display', 'Bodoni 72', Didot, Georgia, serif;
  --caps: 'Oswald', 'Arial Narrow', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121110;
    --surface: #1C1B19;
    --ink: #F1EADF;
    --muted: #B4AEA6;
    --rule: #3A3734;
    --black: #050505;
    --red-text: #E0675F;
    --ok: #7BC07B;
    --warn: #E0B35A;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 19px/1.55 var(--serif);
}
a { color: var(--red-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code, pre { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .78em; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* The cover */
.cover-art .field {
  background: var(--black);
  background-image: radial-gradient(80rem 30rem at 20% 0%, rgba(255, 240, 220, .08), transparent 70%);
  color: var(--on-black);
  padding: 72px 0 40px;
}
.imprint, .band p, .byline, .status, .jump a, .section-head h2, .tag, .figure span, .thinker .n {
  font-family: var(--caps);
  text-transform: uppercase;
  letter-spacing: .18em;
}
.imprint { margin: 0 0 24px; font-size: 13px; opacity: .8; }
.cover-title { margin: 0; }
.cover-title .head {
  display: block;
  font: 900 clamp(56px, 13vw, 168px)/.9 var(--display);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--yellow);
}
.band { background: var(--red); color: #FFF5EE; transform-origin: left center; }
.band p { margin: 0; padding: 14px 0; font-size: clamp(12px, 1.6vw, 15px); }
.paper { padding: 28px 0 40px; border-bottom: 1px solid var(--rule); }
.tail {
  margin: 0;
  font: 700 clamp(40px, 8.5vw, 104px)/1 var(--display);
  text-transform: uppercase;
  color: var(--ink);
}
.byline { margin: 14px 0 0; font-size: 15px; color: var(--muted); }
.figures { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
/* The GitHub pill, in the middle of the cover. After marola-site's navigation pill (the mark, the
   repository, a star); the round shape is picasso's site's status pill, and the star is a
   one-line drawing used as a mask, like the drawings behind the tiles. */
.gh-row { margin: 36px 0 4px; text-align: center; }
.gh {
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px;
  border: 1px solid var(--ink); border-radius: 999px; background: var(--surface);
  color: var(--ink); text-decoration: none; font: 400 16px/1 var(--caps); letter-spacing: .06em;
}
.gh:hover { text-decoration: none; border-color: var(--red-text); }
/* The first pill is the paper itself, in the cover's black with yellow letters. */
.gh-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.gh-read { background: var(--black); border-color: var(--black); color: var(--yellow); }
.gh-read .gh-version { color: var(--on-black); border-left-color: rgba(244, 239, 230, .35); }
.gh-read:hover { border-color: var(--red); }
.gh img { flex: none; }
.gh-name { font-weight: 600; }
.gh-owner { color: var(--muted); font-weight: 400; }
.gh-version, .gh-star { padding-left: 12px; border-left: 1px solid var(--rule); }
.gh-version { color: var(--red-text); }
.gh-star { display: inline-flex; align-items: center; gap: 7px; }
.gh-star::before {
  content: ""; width: 19px; height: 19px; background: currentColor;
  -webkit-mask: url(drawings/star.svg) no-repeat center / contain; mask: url(drawings/star.svg) no-repeat center / contain;
}
.gh:hover .gh-star::before { background: var(--red-text); }
@media (max-width: 480px) { .gh { gap: 9px; padding: 10px 14px; font-size: 14px; } .gh-owner { display: none; } }
.figure {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 18px; border: 1px solid var(--ink); color: var(--ink);
  transition: background .2s ease-out, color .2s ease-out;
}
.figure b { font: 900 40px/1 var(--display); color: var(--red-text); }
.figure span { font-size: 12px; }
.figure:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
/* The project stamps, after the logo band of picasso's site. Marola's mark carries its own white
   disc and Ouroboric publishes a dark logo, so neither needs a plate in dark mode. */
.stamps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px;
  margin: 28px 0 0;
}
.stamp {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--rule); color: var(--ink);
  transition: border-color .2s ease-out;
}
.stamp:hover { text-decoration: none; border-color: var(--red-text); }
.stamp img { display: block; max-width: 100%; height: auto; }
.stamp picture { flex: 0 1 auto; min-width: 0; }
.stamp span { flex: 1 1 11em; font-size: 14px; line-height: 1.35; color: var(--muted); }
.stamp b { display: block; font: 700 22px/1.1 var(--display); color: var(--ink); }
.status { margin: 18px 0 0; font-size: 11px; color: var(--muted); }

.jump {
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  padding-top: 14px; padding-bottom: 14px;
}
.jump a { font-size: 12px; color: var(--ink); }
.jump a:hover { color: var(--red-text); }
.cover > .jump { border-bottom: 3px double var(--rule); max-width: none; }
.cover > .jump { padding-left: max(16px, calc((100% - 1040px) / 2 + 16px)); }

/* Sections */
main section { padding: 56px 0 8px; }
.section-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-top: 2px solid var(--ink); padding-top: 10px;
}
.section-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.section-head a { font-size: 15px; font-style: italic; }
.sub { color: var(--muted); max-width: 46em; }
.feature .section-head h2 { font: 900 clamp(34px, 5vw, 52px)/1 var(--display); letter-spacing: 0; text-transform: none; }

/* The 50 Thinkers */
.thinkers {
  list-style: none; padding: 0; margin: 20px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.thinker {
  background: var(--paper); padding: 12px 14px 14px; min-height: 108px;
  display: flex; flex-direction: column; gap: 4px;
  transition: background .2s ease-out;
}
.thinker .n { font-size: 12px; color: var(--red-text); }
.thinker b { font: 700 20px/1.15 var(--display); }
.thinker .why { font-size: 14px; line-height: 1.35; color: var(--muted); }
.thinker:hover { background: var(--surface); }
.thinker.is-open b { font-weight: 400; font-style: italic; color: var(--muted); font-family: var(--serif); }
.thinker.is-open { background: repeating-linear-gradient(135deg, var(--paper) 0 10px, var(--surface) 10px 11px); }

/* Second brain */
.notes { list-style: none; padding: 0; margin: 20px 0 0; border-top: 1px solid var(--rule); }
.note {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--rule);
}
.note a { color: var(--ink); font-size: 21px; }
.note a:hover { color: var(--red-text); }
.tags { display: flex; gap: 6px; }
.tag { font-size: 11px; padding: 3px 8px; border: 1px solid var(--rule); color: var(--muted); }
.tag.is-verified { border-color: var(--ok); color: var(--ok); }
.tag.is-partial { border-color: var(--warn); color: var(--warn); }
.tag.is-unverified, .tag.is-open-question { border-color: var(--red-text); color: var(--red-text); }

/* Read, abstract, contents, author, fabric, cite */
.labs { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.labs li { border-top: 1px solid var(--ink); padding-top: 10px; }
.labs li > a, .labs .name { font: 700 22px/1.2 var(--display); }
.labs p { margin: 6px 0 0; font-size: 16px; color: var(--muted); }
.stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 28px; }
.stat b { display: block; font: 900 44px/1 var(--display); color: var(--red-text); }
.stat span { font-size: 14px; color: var(--muted); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.filters button, .copy {
  font: 400 12px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 14px; background: transparent; color: var(--ink);
  border: 1px solid var(--ink); cursor: pointer;
}
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.prose { max-width: 40em; }
.prose p:first-child::first-letter {
  float: left; font: 900 4.1em/.8 var(--display); color: var(--red-text);
  padding: 6px 8px 0 0;
}
.keywords { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-style: italic; color: var(--muted); }
.keywords li::before { content: "· "; color: var(--red-text); }

.eras { list-style: none; padding: 0; margin: 16px 0 0; columns: 2 320px; column-gap: 32px; }
.era { break-inside: avoid; border-bottom: 1px dotted var(--rule); padding: 8px 0; }
.era-head { display: flex; gap: 14px; align-items: baseline; }
.era-n { font: 700 18px/1 var(--display); color: var(--red-text); min-width: 1.6em; }
h3 { margin: 0; font: 400 19px/1.3 var(--serif); }

.steps { padding-left: 1.2em; max-width: 46em; }
.steps li { margin: 6px 0; }
.steps li::marker { color: var(--red-text); font-family: var(--display); font-weight: 700; }
.credit { margin-top: 16px; font-size: 16px; color: var(--muted); }
/* The DOIs section: one large tile for each work, after the product tiles of apple.com. The tiles
   are the only place on the page set in the system sans, with round corners and their own
   colours, so they stand apart from the book. Each colour is the work's subject: the cover's
   black, with a yellow name, for the paper, sea blue for marola (water), deep green for ww3-gpu (waves), and the pale
   blue of the Nix logo for picasso. */
main section.shelf { padding-top: 48px; }
.shelf {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-family: var(--sans);
}
.shelf h2 { margin: 0; font: 700 clamp(34px, 5.4vw, 56px)/1.05 var(--sans); letter-spacing: -.025em; color: var(--ink); }
.shelf-lede { margin: 14px 0 0; max-width: 34em; font: 400 clamp(17px, 2vw, 21px)/1.4 var(--sans); color: var(--muted); }
.tiles { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tile {
  --tile: #1D1D1F; --on: #F5F5F7; --soft: rgba(245, 245, 247, .72); --chip: rgba(245, 245, 247, .16);
  position: relative; grid-column: span 2; display: flex; flex-direction: column;
  min-height: 340px; padding: 28px 28px 26px; border-radius: 28px;
  background: var(--tile); color: var(--on); overflow: hidden; isolation: isolate;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease;
}

.tile-paper { --tile: #0F0E0D; --drawing: url(drawings/padlock.svg); grid-column: 1 / -1; min-height: 300px; }
.tile-marola { --tile: #0A4D7C; --drawing: url(drawings/fish.svg); }
.tile-ww3-gpu { --tile: #0E4B43; --drawing: url(drawings/wave.svg); }
.tile-picasso { --tile: #DCE7F7; --on: #16233F; --soft: rgba(22, 35, 63, .74); --chip: rgba(22, 35, 63, .1); --drawing: url(drawings/guitar.svg); }
/* A friend's work: a wide tile like the paper's, in Ouroboric's orange. */
.tile-friend { grid-column: 1 / -1; min-height: 280px; }
.tile-ouroboric { --tile: #B8400A; --drawing: url(drawings/ouroboros.svg); }
.tile-friend h3 { font-size: clamp(34px, 5vw, 60px); }
.tile-friend::before { width: min(40%, 440px); right: 4%; bottom: -24px; opacity: .2; }
/* One line drawing behind each tile's text, after the drawings on picasso's site
   (.claude/skills/card-style/SKILL.md). It is a mask, so it takes the tile's text colour. */
.tile::before {
  content: ""; position: absolute; z-index: -1; right: -22px; bottom: -18px;
  width: min(74%, 400px); aspect-ratio: 3 / 2; pointer-events: none;
  background: var(--on); opacity: .14;
  -webkit-mask: var(--drawing, none) no-repeat center / contain; mask: var(--drawing, none) no-repeat center / contain;
}
.tile-paper::before { width: min(46%, 520px); right: 3%; bottom: -30px; opacity: .16; }
.tile:hover { transform: scale(1.015); box-shadow: 0 18px 40px rgba(20, 18, 16, .22); }
.tile:focus-within { outline: 3px solid var(--red-text); outline-offset: 3px; }
.tile-tags { margin: 0; padding-right: 52px; display: flex; flex-wrap: wrap; gap: 8px; }
.tile-tags span { padding: 6px 12px; border-radius: 999px; background: var(--chip); font: 600 14px/1 var(--sans); }
.tile h3 { margin: 22px 0 0; font: 700 clamp(30px, 3.6vw, 44px)/1.05 var(--sans); letter-spacing: -.025em; }
.tile-paper h3 { font-size: clamp(34px, 5vw, 60px); max-width: 14em; color: #F2C230; }
.tile h3 a { color: inherit; text-decoration: none; }
.tile h3 a:focus-visible { outline: 0; }
/* The whole tile is the link. */
.tile-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tile-text { margin: 12px 0 0; max-width: 30em; font: 400 17px/1.4 var(--sans); color: var(--soft); }
.tile-doi { margin: auto 0 0; padding-top: 28px; font: 600 clamp(17px, 1.75vw, 21px)/1.2 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.tile-doi span { display: block; margin-bottom: 4px; font: 600 13px/1 var(--sans); letter-spacing: 0; color: var(--soft); }
.tile-more { margin: 10px 0 0; font: 400 15px/1.3 var(--sans); }
.tile-more a { position: relative; z-index: 1; color: var(--on); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.tile-go {
  position: absolute; right: 22px; top: 22px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--on); pointer-events: none;
}
.tile-go::after {
  content: ""; position: absolute; left: 13px; top: 14px; width: 10px; height: 10px;
  border-top: 2.5px solid var(--tile); border-right: 2.5px solid var(--tile); transform: rotate(45deg);
}
@media (max-width: 860px) { .tile { grid-column: span 3; } .tile-picasso, .tile-friend { grid-column: 1 / -1; min-height: 260px; } }
@media (max-width: 560px) { .tile, .tile-picasso, .tile-friend { grid-column: 1 / -1; min-height: 0; padding: 24px 22px 22px; border-radius: 24px; } }
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } .tile:hover { transform: none; } }

/* Citation scores: one bar for each README, in the band's colour. */
.scores { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 18px; }
.score { --band: var(--warn); --fill: #E3A900; border-top: 1px solid var(--rule); padding-top: 12px; }
.score.is-high { --band: var(--ok); --fill: var(--ok); }
.score.is-low { --band: var(--red-text); --fill: var(--red); }
.score-name { margin: 0; }
.score-name a { font: 700 22px/1.2 var(--display); }
.score-name span { font-size: 15px; color: var(--muted); }
.score-bar { margin: 8px 0 6px; height: 12px; background: var(--surface); border: 1px solid var(--rule); }
.score-bar span { display: block; height: 100%; background: var(--fill); }
.score-figure { margin: 0; font-size: 16px; color: var(--muted); }
.score-figure b { color: var(--band); }

/* A DOI as a two-part badge, after picasso's site. */
.doi {
  display: inline-flex; vertical-align: middle; margin: 2px 6px 2px 0;
  border: 1px solid var(--ink); color: var(--ink); text-decoration: none;
  font: 400 12px/1 var(--caps); letter-spacing: .08em;
}
.doi span { padding: 6px 9px; }
.doi span:first-child { background: var(--red); color: #F4EFE6; letter-spacing: .14em; text-transform: uppercase; }
.doi:hover { text-decoration: none; border-color: var(--red-text); }
.doi-line { margin: 14px 0 0; }
.dois { margin: 18px 0; }
.dois dl { margin: 0; }
.dois dt { margin-top: 14px; }
.dois dd { margin: 4px 0 0; color: var(--muted); font-size: 16px; }
.dois p { margin: 14px 0 0; font-size: 16px; color: var(--muted); }
.works { list-style: none; padding: 0; margin: 6px 0 0; }
.labs .works li { border-top: 0; padding-top: 8px; font-size: 16px; color: var(--muted); }
.labs .works li > a { font: inherit; font-weight: 700; }
.labs .works li > a.doi { font: 400 12px/1 var(--caps); }
.cite { font-style: italic; }
.citation {
  background: var(--surface); border-left: 3px solid var(--red); padding: 14px 16px;
  overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}
.foot .made-with img { vertical-align: -3px; }
.foot { margin-top: 64px; padding-top: 18px; padding-bottom: 40px; border-top: 3px double var(--rule); font-size: 14px; color: var(--muted); }

:focus-visible { outline: 2px solid var(--red-text); outline-offset: 3px; }

/* One entrance: the title settles, the red band draws across, the 50 places fill in. */
@media (prefers-reduced-motion: no-preference) {
  .cover-title .head { animation: settle .9s cubic-bezier(.2, .7, .2, 1) both; }
  .band { animation: draw .7s cubic-bezier(.65, 0, .35, 1) .35s both; }
  .band p, .tail { animation: rise .6s ease-out .8s both; }
  .figures, .byline, .doi-line, .gh-row { animation: rise .6s ease-out 1s both; }
  .thinker { animation: rise .45s ease-out both; animation-delay: calc(1.1s + var(--i, 0) * 18ms); }
  @supports (animation-timeline: view()) {
    main section:not(.feature) {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes settle { from { opacity: 0; letter-spacing: .08em; } to { opacity: 1; letter-spacing: -.01em; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The preview of the book: the PDF in a frame, with the cover's rule above it. */
.preview { display: block; width: 100%; height: min(80vh, 900px); margin: 28px 0 8px; border: 0; border-top: 3px solid var(--ink); background: var(--paper, #fff); }

/* The CI card: what happens when the book changes, with the state of each check. One wide card in
   the cover's red with a yellow name, after the tiles (.claude/skills/card-style/SKILL.md): one
   flat colour, one line drawing as a mask, no motion. It is not one link: each badge opens its
   workflow. */
.ci-card {
  --tile: #8E1B17; --on: #FFF5EE; --soft: rgba(255, 245, 238, .82); --chip: rgba(255, 245, 238, .16);
  position: relative; padding: 28px 28px 26px; border-radius: 28px;
  background: var(--tile); color: var(--on); overflow: hidden; isolation: isolate;
}
.ci-card::before {
  content: ""; position: absolute; z-index: -1; right: 2%; top: -10px;
  width: min(38%, 420px); aspect-ratio: 3 / 2; pointer-events: none;
  background: var(--on); opacity: .14;
  -webkit-mask: url(drawings/wheel.svg) no-repeat center / contain; mask: url(drawings/wheel.svg) no-repeat center / contain;
}
.shelf .ci-card h2 { margin: 22px 0 0; max-width: 12em; font-size: clamp(34px, 5vw, 60px); color: #F2C230; }
.ci-card .tile-text { max-width: 36em; }
.ci-stages { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1.5fr 1.5fr; gap: 14px; counter-reset: stage; }
.ci-stage { counter-increment: stage; padding: 18px 18px 20px; border-radius: 18px; background: rgba(15, 14, 13, .28); }
.ci-stage h4 { margin: 0; font: 700 20px/1.2 var(--sans); letter-spacing: -.01em; }
.ci-stage h4::before { content: counter(stage) ". "; color: #F2C230; }
.ci-stage > p { margin: 8px 0 0; font: 400 15px/1.4 var(--sans); color: var(--soft); }
.ci-rows { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.ci-rows li { display: grid; gap: 6px; }
.ci-status { display: inline-flex; width: max-content; border-radius: 4px; }
.ci-status img { display: block; height: 20px; }
.ci-status:focus-visible { outline: 3px solid #F2C230; outline-offset: 3px; }
.ci-does { font: 400 14px/1.4 var(--sans); color: var(--soft); }
.ci-card .tile-more { margin-top: 22px; }
.ci-card .tile-more a { color: var(--on); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .ci-stages { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ci-card { padding: 24px 22px 22px; border-radius: 24px; } .ci-card::before { width: 60%; opacity: .1; } }

/* What changed in the latest release: a plain list, the red rule of the cover beside each line. */
.changes { list-style: none; margin: 20px 0 0; padding: 0; max-width: 46em; display: grid; gap: 10px; }
.changes li { padding-left: 16px; border-left: 3px solid var(--red); }

/* The easy abstract: one step for each paragraph, with its lead in bold. */
.prose.easy p { margin: 0 0 14px; }
.prose.easy b { color: var(--red-text); }

/* A note the owner approved for the book: the cover's black with yellow letters. */
.tag.is-approved { border-color: var(--black); background: var(--black); color: var(--yellow); }