/* The site's look: a book serif on off-white, all lowercase, green as the one accent colour.
   The text face is the reader's own system serif (Iowan Old Style on Apple devices, Palatino or
   Georgia elsewhere), so nothing is downloaded for it. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fcfcfa;
  --text: #1c1c1c;
  --muted: #6f6f6a;
  --rule: #dcdcd6;
  --accent: #2f6b3f;
  --mark: #fff1b8;
  --font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --measure: 39rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1.01rem/1.58 var(--font);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 4rem 1.25rem 6rem;
  text-transform: lowercase;
}

pre,
code,
mark,
.katex {
  text-transform: none;
}

h1,
h2,
h3 {
  font-size: 1.15em;
  font-weight: 600;
  line-height: 1.4;
  text-transform: lowercase;
}

h1 {
  margin: 0 0 1.2rem;
}

h2 {
  margin: 3rem 0 0.8rem;
}

h3 {
  font-weight: 400;
  font-style: italic;
  margin: 2rem 0 0.5rem;
}

p,
ul,
ol,
blockquote,
pre,
table {
  margin: 0 0 1.2rem;
}

ul {
  list-style: "–  ";
  padding-left: 1.75rem;
}

ul ul {
  list-style: "·  ";
}

ol {
  padding-left: 2.2rem;
}

li {
  margin: 0.35rem 0;
}

li > ul,
li > ol {
  margin: 0.35rem 0 0.8rem;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--accent);
}

hr {
  border: 0;
  border-top: 1px dashed var(--rule);
  margin: 2.5rem 0;
}

img {
  max-width: 100%;
  height: auto;
}

blockquote {
  margin-left: 0;
  padding-left: 1rem;
  border-left: 1px solid var(--muted);
  color: var(--muted);
}

code,
pre {
  font-family: var(--mono);
  font-size: 0.86em;
}

:not(pre) > code {
  color: var(--accent);
}

pre code {
  font-size: 1em;
}

pre {
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
  overflow-x: auto;
  line-height: 1.55;
}

table {
  border-collapse: collapse;
}

th,
td {
  padding: 0.3rem 1.2rem 0.3rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  font-weight: 400;
}

th {
  font-weight: 600;
  text-transform: lowercase;
}

mark {
  background: var(--mark);
  color: inherit;
  padding: 0.1em 0.4em;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Portrait and Fig. 1 */

.portrait {
  display: none;
  margin: 0 0 1.5rem;
  width: 12rem;
  max-width: 80%;
}

.portrait img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1);
}

.fig {
  display: none;
  margin: 2rem 0 0;
  max-width: 20rem;
}

/* The graph again, large and faint, behind the top of the front page. It fades out half-way down. */
.backdrop {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: min(80vh, 48rem);
  opacity: 0.5;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
  mask-image: linear-gradient(to bottom, #000 45%, transparent);
}

.backdrop svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
}

.backdrop svg * {
  vector-effect: non-scaling-stroke;
}

/* On narrow screens there is no side margin for the paths to live in: keep the rings and stars only. */
@media (max-width: 48rem) {
  .backdrop polyline,
  .backdrop .fig-stars,
  .backdrop .fig-start,
  .backdrop .fig-min {
    display: none;
  }
}

.fig svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
}

.fig svg * {
  vector-effect: non-scaling-stroke;
}

.fig-contours {
  stroke: var(--rule);
}

.fig-gd {
  stroke: var(--muted);
  stroke-dasharray: 3 3;
}

.fig-sky {
  fill: var(--muted);
  opacity: 0.55;
}

.fig-zo {
  stroke: var(--accent);
  stroke-width: 0.9;
  stroke-linejoin: round;
}

.fig-stars {
  fill: var(--accent);
}

.fig-start {
  fill: var(--bg);
  stroke: var(--text);
}

.fig-min {
  fill: var(--text);
}

figcaption {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

figcaption b {
  font-weight: 600;
}

/* Front page */

.motto {
  margin-top: -0.9rem;
  color: var(--muted);
  font-style: italic;
}

.links,
.meta,
.back,
.empty,
.draft,
.summary,
.posts time {
  color: var(--muted);
}

.links {
  margin-top: 3rem;
}

/* The Järnefelt headpiece. It is ink on white, multiplied onto the page so it takes the paper colour. */

.plate {
  margin: 0 0 2.5rem;
}

.plate img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.plate figcaption {
  margin-top: 0.4rem;
  text-align: right;
}

.plate-bottom {
  display: none;
  margin: 4rem 0 0;
}

.signoff {
  margin: 3.5rem 0 0;
  width: 14rem;
  max-width: 70%;
}

.signoff img {
  display: block;
  width: 100%;
  height: auto;
}

.posts {
  list-style: none;
  padding: 0;
}

.posts li {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  margin: 0 0 0.7rem;
}

.posts time {
  flex: none;
  width: 5.5rem;
  text-transform: lowercase;
}

.summary {
  margin: 0;
}

.draft {
  font-style: italic;
}

/* Posts */

.summary:empty {
  display: none;
}

.back {
  margin-bottom: 3rem;
  text-transform: lowercase;
}

article header {
  margin-bottom: 2rem;
}

article header h1 {
  margin-bottom: 0;
}

.meta {
  text-transform: lowercase;
}

.katex {
  font-size: 1.15em;
}

.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25rem 0;
}

.footnotes {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--rule);
}

.footnotes h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}