/* nashkell, in the look of h0ffmann/closed-source (its cover follows the type and colours of the
   cover of Hoppe's "Democracy: The God That Failed": a black field, the first half of the title in
   yellow letters, a red band, the second half in black on paper). The same tokens, by the same
   author. The body is a short mathematical paper: numbered sections, and statements labelled
   Definition, Proposition, Remark. The pictures are equations, drawn in one line each. */
:root {
  --paper: #F4EFE6; --surface: #EBE3D6; --ink: #141210; --muted: #5F5B56; --rule: #CFC8BC;
  --black: #0F0E0D; --yellow: #F2C230; --red: #A3201C; --on-black: #F4EFE6;
  --serif: 'EB Garamond', Garamond, Georgia, serif;
  --display: 'Playfair Display', 'Bodoni 72', Didot, Georgia, serif;
  --caps: 'Oswald', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #121110; --surface: #1C1B19; --ink: #F1EADF; --muted: #B4AEA6; --rule: #3A3734; --black: #050505; color-scheme: dark; }
}
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font: 400 20px/1.6 var(--serif); -webkit-text-size-adjust: 100%; }
body { margin: 0; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
p, li, dd { max-width: 68ch; }

/* The cover: black field, yellow letters; a red band; then paper. */
.cover .field { background: var(--black); color: var(--on-black); padding: 34px max(16px, calc((100% - 1040px) / 2 + 16px)) 40px; }
.where { margin: 0 0 26px; font: 400 14px/1.4 var(--mono); color: #B4AEA6; }
.where a { text-decoration-color: var(--yellow); }
h1 { margin: 0; line-height: .95; }
h1 .head { display: block; font: 600 clamp(52px, 11vw, 132px)/.95 var(--caps); letter-spacing: .01em; color: var(--yellow); }
h1 .tail { display: block; margin-top: 10px; font: 900 clamp(30px, 5.4vw, 64px)/1.02 var(--display); color: var(--on-black); }
.cover .band { background: var(--red); color: #F4EFE6; padding: 10px max(16px, calc((100% - 1040px) / 2 + 16px)); font: 500 15px/1.4 var(--caps); letter-spacing: .08em; text-transform: uppercase; }
.cover .paper { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; max-width: 1072px; margin: 0 auto; padding: 34px 16px 30px; border-bottom: 3px double var(--rule); }
.lede p { margin: 0 0 14px; }
.jump { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 18px; font: 500 14px/1.5 var(--caps); letter-spacing: .04em; }
.jump a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.jump a:hover { border-color: var(--red); }

/* Two plots side by side on the cover, each in a broken frame, its equations as its caption. */
.cover-plots { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-content: start; }
.cover-plot, .plot { position: relative; margin: 0; padding: 18px 16px 14px; }
.cover-plot::before, .plot::before, .cover-plot::after, .plot::after { content: ""; position: absolute; width: 30px; height: 30px; border-color: var(--red); border-style: solid; }
.cover-plot::before, .plot::before { top: 0; left: 0; border-width: 2px 0 0 2px; }
.cover-plot::after, .plot::after { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
svg { display: block; width: 100%; height: auto; aspect-ratio: 1; }
svg path { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
figcaption strong { display: block; margin-top: 6px; font: italic 400 18px/1.3 var(--serif); }
.eqs { list-style: none; margin: 6px 0 0; padding: 0; }
.eqs li { margin: 0 0 3px; }
.eqs code { font: 400 12.5px/1.45 var(--mono); color: var(--muted); white-space: pre-wrap; }
.plots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin: 24px 0; }

/* The paper: numbered sections, labelled statements. */
main { max-width: 1072px; margin: 0 auto; padding: 0 16px 70px; }
.part { padding: 40px 0 10px; border-bottom: 1px solid var(--rule); }
h2 { margin: 0 0 18px; font: 900 clamp(28px, 4.2vw, 44px)/1.08 var(--display); }
h2 .num { color: var(--red); font: 600 .8em var(--caps); margin-right: 6px; }
.statement p { margin: 0 0 14px; }
.label { font: 600 15px/1 var(--caps); letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.statement.remark .label { color: var(--muted); }
.statement.proposition p { font-style: italic; }
.warn { color: var(--red); }
.quote { margin: 18px 0 22px; padding-left: 18px; border-left: 3px solid var(--red); max-width: 68ch; }
.quote blockquote { margin: 0; font-style: italic; }
.quote figcaption { margin-top: 6px; font: 400 13px/1.4 var(--mono); color: var(--muted); }
.matrix { display: grid; grid-template-columns: 1fr 1fr; margin: 20px 0 24px; max-width: 760px; border: 2px solid var(--ink); }
.cell { display: flex; flex-direction: column; gap: 8px; min-height: 120px; padding: 16px 18px; border: 1px solid var(--rule); }
.cell .moves { font: 400 12.5px/1.4 var(--mono); color: var(--muted); }
.cell strong { font: 700 clamp(19px, 2.3vw, 24px)/1.15 var(--display); }
.cell.good { background: var(--black); color: var(--yellow); }
.cell.good .moves { color: #B4AEA6; }
.cell.bad strong, .cell.worst strong { color: var(--red); }
.pairs { display: grid; grid-template-columns: max-content max-content; gap: 4px 22px; margin: 16px 0 20px; font: 400 16px/1.4 var(--mono); }
.pairs dt { color: var(--muted); }
.pairs dd { margin: 0; color: var(--red); }
pre { margin: 16px 0; padding: 14px 16px; overflow-x: auto; background: var(--surface); border-left: 3px solid var(--red); font: 400 14px/1.55 var(--mono); }
footer { padding: 30px 0 0; font-size: 16px; color: var(--muted); }

@media (max-width: 760px) {
  html { font-size: 18px; }
  .cover .paper { grid-template-columns: 1fr; }
  .plots { grid-template-columns: 1fr; }
  .matrix { grid-template-columns: 1fr; }
}

/* A DOI as a two-part badge, as closed-source's site has it: the label in red, the number on paper. */
.doi { display: inline-flex; margin: 0 10px 8px 0; border: 1px solid var(--rule); font: 500 14px/1 var(--caps); text-decoration: none; color: var(--ink); background: var(--paper); }
.doi span { padding: 7px 10px; }
.doi span:first-child { background: var(--red); color: #F4EFE6; letter-spacing: .12em; text-transform: uppercase; }
.doi:hover { border-color: var(--red); }
.doi-line { margin: 20px 0 0; }
.dois dt { margin-top: 12px; }
.dois dd { margin: 4px 0 0; }
.citation { white-space: pre-wrap; }