/* ==========================================================================
   COLOURS: edit here. Every colour on the site is one of these variables.
   A bone-white page ruled in heavy ink, a grotesk for the frame, a serif for the mathematics, and nothing else.

   Contents
     1. Colours and measures   5. About and Docs
     2. Base                   6. The index
     3. Masthead and footer    7. An agenda page
     4. The landing page       8. Questions, answers, lists
   ========================================================================== */
:root {
  color-scheme: light;
  --paper: #f2efe7;
  --paper-hi: #faf8f3;      /* boxes on the page */
  --ink: #1d1c1a;
  --muted: #6b6155;
  --red: #d8371f;
  --blue: #5aa8d8;
  --mark: #ffd25e;          /* selection */
  --glow: #ffcf40;

  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Text that may carry mathematics, set beside KaTeX's Computer Modern: Libertinus is as light and as low in x-height. */
  --serif: "Libertinus Serif", "STIX Two Text", "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --rule: 6px;              /* the heavy rules of the frame */
  --line: 3px;              /* boxes */
  --rail: 320px;            /* the column left of the vertical rule */
  --pad: clamp(16px, 6vw, 88px);
  --gap: 64px;
}

/* ==========================================================================
   2. Base
   The page is two columns: a rail on the left, and the text beyond a heavy vertical rule that runs the full height of the page.
   ========================================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; overflow-x: clip; }
body { margin: 0; isolation: isolate; overflow-x: clip; color: var(--ink); font: 400 18px/1.5 var(--sans); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh;
  background: linear-gradient(var(--ink), var(--ink)) var(--rail) 0 / var(--rule) 100% no-repeat, var(--paper); }
main { flex: 1; }
/* A quiet yellow glow behind the page, anchored to the lower-right corner. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle 35vmax at calc(100% - 15vmax) calc(100% - 15vmax), color-mix(in srgb, var(--glow) 35%, transparent), transparent 65%); transform-origin: bottom right; animation: background-glow 30s ease-in-out infinite alternate; }
@keyframes background-glow { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
@media print { body::before { display: none; } }
::selection { background: var(--mark); color: var(--ink); }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--red); }
:focus-visible { outline: var(--line) solid var(--red); outline-offset: 3px; }
code, .id { font-family: var(--mono); font-size: 0.82em; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 50; background: var(--ink); color: var(--paper); padding: 6px 10px; }
em { font-style: italic; }
strong { font-weight: 600; }

/* Labels stay small and plain; italics are reserved for explicit emphasis. */
.label, .badge, .entry-kind, .section-head small, .contents-title, section h2 small, .status, .chip, .menu-button, .totals dt { font-size: 0.82rem; font-weight: 400; color: var(--muted); }

.grid { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: calc(var(--rule) + var(--gap)); padding-right: var(--pad); }
.grid > * { grid-column: 2; min-width: 0; }
.rail { grid-column: 1; padding: 0 32px; }
@media (max-width: 960px) {
  body { background: var(--paper); }
  .grid { grid-template-columns: minmax(0, 1fr); padding-left: var(--pad); }
  .grid > *, .rail { grid-column: 1; }
  .rail { padding: 0; }
}

/* ==========================================================================
   3. Masthead and footer
   The name on one line, the site's contents in the rail, a heavy rule beneath.
   ========================================================================== */
header.site { border-bottom: var(--rule) solid var(--ink); }
header.site .grid { align-items: end; }
.brand { grid-column: 2; padding: 40px 0 26px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand span { display: block; font: 500 clamp(1.4rem, 2.2vw, 1.9rem)/1.1 var(--sans); letter-spacing: -0.025em; }
nav.site { grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 40px 32px 26px; font-size: 1.5rem; line-height: 1.2; }
nav.site a, nav.site button.signin { padding: 0; color: var(--ink); font: inherit; background: none; border: 0; cursor: pointer; text-decoration: none; text-align: left; }
nav.site a:hover, nav.site button.signin:hover { color: var(--red); }
nav.site a[aria-current=page] { font-style: normal; }
nav.site a[aria-current=page]::before { content: "→ "; }
nav.site button.signin { margin-top: 0.6em; font-size: 1rem; padding: 4px 10px; color: var(--paper); background: var(--ink); }
nav.site button.signin:hover { color: var(--paper); background: var(--red); }
button.link { padding: 0; font: inherit; color: inherit; text-decoration: underline; background: none; border: 0; cursor: pointer; }
@media (max-width: 960px) {
  .brand { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 16px; padding: 28px 0 12px; }
  nav.site { grid-row: 2; flex-direction: row; flex-wrap: wrap; gap: 4px 20px; padding: 4px 0 20px; font-size: 1.2rem; }
  nav.site a[aria-current=page]::before { content: none; }
  nav.site button.signin { margin: 0; }
}

footer.site { margin-top: 160px; padding: 48px 0 56px; border-top: var(--rule) solid var(--ink); font-size: 0.95rem; line-height: 1.4; }
footer.site .foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px 48px; }
footer.site p { margin: 0; }
footer.site nav { display: flex; flex-direction: column; }

/* ==========================================================================
   4. The landing page: the introduction in large type.
   ========================================================================== */
.stage { padding-top: 96px; padding-bottom: 96px; border-bottom: var(--rule) solid var(--ink); }
.hero h1 { font: 500 clamp(2.8rem, 6.2vw, 5.6rem)/0.98 var(--sans); letter-spacing: -0.035em; margin: 0 0 48px; max-width: 15ch; text-wrap: balance; }
.stage .hero p { max-width: 60ch; margin: 0 0 16px; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* Buttons: black blocks, as on a form. */
.btn, .button, .pose { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border: var(--line) solid var(--ink); background: transparent; color: var(--ink); font: 500 1rem/1 var(--sans); white-space: nowrap; cursor: pointer; text-decoration: none; }
.btn:hover, .button:hover, .pose:hover { color: var(--paper); background: var(--red); border-color: var(--red); }
.btn.primary, .button.primary, .pose { color: var(--paper); background: var(--ink); }
.btn.primary:hover, .button.primary:hover, .pose:hover { color: var(--paper); background: var(--red); border-color: var(--red); }

/* ==========================================================================
   5. About and Docs
   ========================================================================== */
.page-fallback { white-space: pre-wrap; font: inherit; }
#page-content img { max-width: 100%; height: auto; }
.about-page { padding: 72px 0 24px; max-width: 760px; }
.about-page .hero h1 { margin: 0 0 32px; max-width: 14ch; }
.about-page .hero h1:last-child { margin-bottom: 0; }
.about-page .hero p { margin: 0 0 16px; max-width: 60ch; }
.about-page section { margin-top: 72px; }
.about-page section h2 { display: block; font: 500 2.2rem/1.05 var(--sans); letter-spacing: -0.03em; margin: 0 0 20px; padding: 0; border: 0; }
.about-page section h3 { font: 500 1.35rem/1.2 var(--sans); margin: 32px 0 8px; }
.about-page section p { margin: 0 0 16px; max-width: 60ch; }
/* Lists in the text stay plain. */
.about-page ol, .about-page ul { margin: 0 0 16px; padding-left: 1.4em; max-width: 60ch; }
.about-page li { margin: 4px 0; }

/* ==========================================================================
   6. The index
   ========================================================================== */
main.grid { padding-top: 96px; }
body[data-page="index"] main.grid { padding-bottom: 160px; background: linear-gradient(var(--ink), var(--ink)) var(--rail) 0 / var(--rule) 100% no-repeat, var(--paper); }
body[data-page="index"] footer.site { margin-top: 0; }
@media (max-width: 960px) { body[data-page="index"] main.grid { background: var(--paper); } }
main.grid > .about-page, main.grid > .empty:first-child { padding-top: 0; }
.totals { grid-column: 1; grid-row: 1 / span 4; align-self: start; position: sticky; top: 24px; margin: 0; padding: 0 32px; }
.totals:empty { display: none; }
.totals div { display: flex; align-items: baseline; gap: 14px; padding: 6px 0; border-bottom: 1.5px solid var(--ink); }
.totals div:first-child { border-top: 1.5px solid var(--ink); }
.totals dd { order: -1; margin: 0; min-width: 2.2ch; font: 500 2.4rem/1.1 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.totals dt { font-size: 1.05rem; color: var(--ink); }
@media (max-width: 960px) { .totals { grid-column: 1; grid-row: auto; position: static; padding: 0; margin-bottom: 56px; } }

.section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 24px; }
.section-head h2 { font: 500 clamp(2.2rem, 4vw, 3rem)/1 var(--sans); letter-spacing: -0.035em; margin: 0; }
.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 40px; }
.search { position: relative; flex: 1 1 260px; }
.search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; }
.controls input[type=search] { width: 100%; height: 48px; padding: 0 14px 0 42px; border: var(--line) solid var(--ink); border-radius: 0; background: var(--paper-hi); color: var(--ink); font: 400 1.05rem var(--sans); }
.controls input[type=search]::placeholder { color: var(--muted); }
.controls input[type=search]:hover, .controls input[type=search]:focus { border-color: var(--red); }
.controls input[type=search]:focus { outline: none; }
.chips { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.chip { border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink); font-size: 1rem; text-decoration: underline; text-underline-offset: 3px; }
.chip:hover { color: var(--red); }
.chip[aria-pressed=true] { font-style: normal; text-decoration: none; }
.chip[aria-pressed=true]::before { content: "→ "; }
select { height: 48px; padding: 0 12px; border: var(--line) solid var(--ink); border-radius: 0; background: var(--paper-hi); color: var(--ink); font: inherit; font-size: 1rem; }
.menu { position: relative; }
.menu-button { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border: var(--line) solid var(--ink); background: var(--paper-hi); cursor: pointer; }
.menu-button::before { content: "Sort"; }
.menu-button:hover, .menu-button[aria-expanded=true] { border-color: var(--red); color: var(--red); }
.menu-button span { color: inherit; font-size: 1rem; }
.menu-button::after { content: "↓"; color: inherit; }
.menu-button[aria-expanded=true]::after { content: "↑"; }
.menu-list { position: absolute; right: 0; top: calc(100% - var(--line)); z-index: 10; min-width: 100%; margin: 0; padding: 0; list-style: none; background: var(--paper-hi); border: var(--line) solid var(--ink); white-space: nowrap; font-size: 1rem; }
.menu-list:focus { outline: none; }
.menu-list li { padding: 8px 16px; cursor: pointer; }
.menu-list li.active { background: color-mix(in srgb, var(--red) 12%, var(--paper-hi)); color: var(--red); }
.menu-list li[aria-selected=true] { background: var(--red); color: var(--paper); }
@media (max-width: 600px) { .menu-list { left: 0; right: auto; } }

/* A title, a guiding question, and an editorial illustration. */
.entries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 48px 32px; }
.entry { position: relative; display: flex; flex-direction: column; min-width: 0; border: var(--line) solid var(--ink); padding: 20px; }
.entry h3 { margin: 0 0 12px; font: 500 1.55rem/1.15 var(--sans); letter-spacing: -0.025em; text-wrap: balance; }
.entry h3 a { text-decoration: none; }
.entry h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.entry .question { margin: 0 0 20px; font-size: 1.25rem; line-height: 1.35; }
.agenda-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--paper-hi); }
.agenda-image[hidden] { display: none; }
.entry .agenda-image { margin-top: auto; }
.entry .tags { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 20px; }
.entry .tag { position: relative; z-index: 2; cursor: pointer; background: transparent; border: 1px solid var(--muted); padding: 3px 8px; font: 400 0.8rem/1.3 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.entry .tag:hover, .entry .tag:focus-visible { color: var(--red); border-color: currentColor; }
.entry:has(.tag:hover) h3 { color: inherit; }
.entry .badge.private { margin-bottom: 12px; }
.entry:hover h3 { color: var(--red); }

.badge { color: inherit; }
.badge.private { font-style: normal; color: var(--red); }
.bar { position: relative; display: inline-block; width: 80px; height: 10px; border: 1.5px solid var(--ink); vertical-align: middle; }
.bar > span { display: block; height: 100%; min-width: 2px; background: var(--ink); }

.empty { padding: 32px 0 64px; font-size: 1.4rem; font-style: normal; }

/* ==========================================================================
   7. An agenda page. The page is the grid: the head and the body in the text column, the side in the rail.
   ========================================================================== */
.layout { display: contents; }
.layout > aside { grid-column: 1; grid-row: 1 / span 2; padding: 0 32px; }
.layout > .body { grid-column: 2; grid-row: 2; }
.agenda-head { grid-column: 2; grid-row: 1; padding: 0 0 56px; }
.agenda-head .badge { font-size: 1.1rem; font-style: normal; color: var(--ink); }
.agenda-head .badge.private { color: var(--red); }
.agenda-head h1 { font: 500 clamp(2.8rem, 5.6vw, 5rem)/0.98 var(--sans); letter-spacing: -0.035em; margin: 0 0 24px; max-width: 22ch; text-wrap: balance; }
.agenda-head .question { font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.22; letter-spacing: -0.015em; margin: 0 0 18px; max-width: 36ch; }
.agenda-head .summary { color: var(--muted); max-width: 62ch; margin: 0; }

.side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 28px; font-size: 1rem; }
.contents-title { display: block; margin-bottom: 6px; }
.contents ol { list-style: none; margin: 0; padding: 0; font-size: 1.3rem; line-height: 1.3; }
.contents a { display: flex; justify-content: space-between; gap: 8px; text-decoration: none; }
.contents a.current { font-style: normal; }
.contents a.current::before { content: "→\00a0"; }
.contents a.current { justify-content: flex-start; }
.contents a.current small { margin-left: auto; }
.contents a small { font-size: 0.9rem; color: var(--muted); }
.side .actions { display: flex; flex-direction: column; gap: 10px; }
.side .actions .button { width: 100%; }
@media (max-width: 960px) {
  .layout > aside, .layout > .body, .agenda-head { grid-column: 1; grid-row: auto; }
  .layout > aside { padding: 0 0 48px; }
  .side { position: static; gap: 20px; }
  .side .contents { display: none; }
  .side .actions { flex-direction: row; flex-wrap: wrap; }
  .side .actions .button { width: auto; }
}

.stats { display: flex; flex-direction: column; }
.stat { display: flex; align-items: baseline; gap: 14px; padding: 6px 0; border-bottom: 1.5px solid var(--ink); }
.stat:first-child { border-top: 1.5px solid var(--ink); }
.stat b { min-width: 2.2ch; font: 500 2.4rem/1.1 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 1.05rem; }
.progress { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.progress .bar { flex: 1; }

.body > section { padding-top: 72px; }
.body > section:first-child { padding-top: 0; }
section h2 small { letter-spacing: 0; }
section h2 { font: 500 clamp(2rem, 3.4vw, 2.6rem)/1.05 var(--sans); letter-spacing: -0.035em; margin: 0 0 24px; padding-bottom: 12px; border-bottom: var(--line) solid var(--ink); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.readme-body { max-width: 68ch; overflow-wrap: anywhere; line-height: 1.55; }
.readme-body > :first-child { margin-top: 0; }
.readme-body > p:first-child { font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.01em; }
.readme-body h1, .readme-body h2, .readme-body h3 { display: block; border: 0; padding: 0; letter-spacing: -0.02em; }
.readme-body h1 { font: 500 2rem/1.1 var(--sans); margin: 0 0 18px; }
.readme-body h2 { font: 500 1.6rem/1.15 var(--sans); margin: 40px 0 12px; }
.readme-body h3 { font: 500 1.25rem/1.2 var(--sans); margin: 28px 0 8px; }
.readme-body p { margin: 0 0 16px; }
.readme-body li { margin: 4px 0; }
.readme-body img { max-width: 100%; height: auto; border: var(--line) solid var(--ink); }
.readme-body pre { padding: 16px; border: var(--line) solid var(--ink); background: var(--paper-hi); overflow-x: auto; }
.readme-body .readme-fallback { white-space: pre-wrap; }
.readme-body blockquote { margin: 20px 0; padding-left: 32px; font-style: normal; }
.readme-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.95rem; }
.readme-body th, .readme-body td { border-bottom: 1.5px solid var(--ink); padding: 6px 14px 6px 0; text-align: left; }
.readme-body th { font-weight: 600; }
.readme-body hr { border: 0; border-top: var(--line) solid var(--ink); margin: 32px 0; }
.footnotes { font-size: 0.88em; color: var(--muted); }
.footnotes .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ==========================================================================
   8. Questions, answers, lists
   ========================================================================== */
.q-filter { margin: 0 0 20px; }
ul.tree, ul.tree ul { list-style: none; margin: 0; padding: 0; }
ul.tree ul { margin-left: 11px; padding-left: 36px; border-left: 1.5px solid var(--ink); }
ul.tree > .q { padding: 18px 20px; margin-bottom: 16px; border: var(--line) solid var(--ink); background: var(--paper-hi); }
ul.tree > .q:target { background: #fff; outline: var(--line) solid var(--red); outline-offset: -3px; }
ul.tree ul .q { padding: 14px 0 2px; }
.q-line { display: flex; gap: 14px; align-items: flex-start; }
.q-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.q-text p { margin: 0 0 8px; }
.q-text p:last-child { margin-bottom: 0; }
.q-title { margin: 0; font-size: 1.2rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.q-statement { margin-top: 8px; }
.q-motivation { margin-top: 8px; color: var(--muted); font-size: 0.95rem; }
.q-meta { display: flex; gap: 4px 16px; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); margin: 10px 0 0; }
.answers { margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.answer { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 10px 14px; background: var(--ink); color: var(--paper); }
.answer a:hover { color: var(--mark); }
.answer .text { flex: 1; min-width: 12rem; }
.answer .note { font-size: 0.82rem; color: inherit; font-style: normal; }

.status { flex: none; margin-top: 3px; font-style: normal; }
.status.s-open { color: var(--red); }
.status.s-answered { background: none; color: var(--ink); }
li.q[hidden] { display: none; }


ol.list, ul.list { margin: 0; padding: 0; list-style: none; }
.list li { padding: 14px 0; border-bottom: 1.5px solid var(--ink); }
.list li:first-child { border-top: 1.5px solid var(--ink); }
.list .what { font-size: 0.85rem; font-style: normal; color: var(--muted); }
.list .why { color: var(--muted); font-size: 0.85rem; margin-top: 6px; }
.who { font-size: 1rem; }
.who .n { color: var(--muted); }
.note { color: var(--muted); font-size: 0.95rem; }

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

/* KaTeX sets formulas at 1.21em, which outsizes the text and spreads the lines;
   display mathematics scrolls rather than widening the page. */
.katex { font-size: 1.05em; line-height: 1; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.nowrap { white-space: nowrap; }

/* The serif: an agenda's question and summary, its README, problems and claims, on the index as on the agenda page.
   Headings and captions stay in the grotesk. The serif runs small, so it is set a size up, and KaTeX at its own size. */
.entry :is(.question, .summary), .agenda-head :is(.question, .summary), .readme-body, .q-text, .answer .text, .list .text { font-family: var(--serif); letter-spacing: 0; }
.entry .summary, .agenda-head .summary, .readme-body, .q-statement, .list .text { font-size: 1.1em; }
.entry .summary { font-size: 1.02rem; }
.q-title { font-family: var(--sans); font-size: 1.3rem; font-weight: 500; }
.q-motivation { font-size: 1.04rem; }
.readme-body :is(h1, h2, h3) { font-family: var(--sans); }
/* Footnote marks leave the leading alone, and adjacent marks are separated, as 1,3 and not 13. */
.readme-body sup { line-height: 0; }
.readme-body sup + sup::before { content: ","; }
:is(.entry, .agenda-head, .readme-body, .q-text, .answer, .list) .katex { font-size: 1em; }

.agenda-head { max-width: 960px; }
.agenda-head .question { max-width: 52ch; margin-bottom: 32px; }
.agenda-head .agenda-image { max-width: 800px; }
@media (max-width: 960px) { .layout > aside { order: 3; padding-top: 48px; } }