@font-face {
  font-family: "ET Book";
  src: url("/assets/fonts/et-book-roman.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ET Book";
  src: url("/assets/fonts/et-book-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "ET Book";
  src: url("/assets/fonts/et-book-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* the same roman with lining figures, so numbers in a table stand at full height */
@font-face {
  font-family: "ET Book Lining";
  src: url("/assets/fonts/et-book-roman-lining.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* excalidraw's hand-drawn face, for headings */
@font-face {
  font-family: "Virgil";
  src: url("/assets/fonts/virgil.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* code, and the tables that programs print, need a fixed width */
@font-face {
  font-family: "Cascadia Code";
  src: url("/assets/fonts/cascadia-code.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #ffffff;
  --paper: #f6f7f8;
  --surface-2: #f1f3f5;
  --ink: #1e1e1e;
  --ink-soft: #495057;
  --ink-faint: #6c737a;
  --accent: #1971c2;
  --rule: #e9ecef;
  --rule-strong: #ced4da;
  --orange: #e8590c;
  --purple: #7048e8;
  --green: #2f9e44;
  --red: #e03131;
  --glass: rgba(255, 255, 255, 0.82);
  --shadow: rgba(30, 30, 30, 0.45);
  --shadow-faint: rgba(30, 30, 30, 0.06);
  --selection: rgba(25, 113, 194, 0.18);
  --link-line: rgba(25, 113, 194, 0.35);
  --edge-blue: #a5d8ff;
  --edge-orange: #ffc078;
  --serif: "ET Book", Georgia, serif;
  /* set this to var(--serif) to take the hand-drawn headings away again */
  --display: "Virgil", "ET Book", cursive;
  --mono: "Cascadia Code", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --measure: 40rem;
  --gutter: clamp(1rem, 4.5vw, 1.4rem);
  /* diagrams and tables are allowed to be wider than the text */
  --wide: min(46rem, calc(100vw - 2 * var(--gutter)));
}

/* dark. the script in the head sets data-theme before anything is drawn. without it the device decides */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101212;
  --paper: #171919;
  --surface-2: #1e2122;
  --ink: #e9ecef;
  --ink-soft: #adb5bd;
  --ink-faint: #8f979f;
  --accent: #74c0fc;
  --rule: #262a2b;
  --rule-strong: #363b3d;
  --orange: #ff922b;
  --purple: #b197fc;
  --green: #69db7c;
  --red: #ff8787;
  --glass: rgba(16, 18, 18, 0.78);
  --shadow: rgba(0, 0, 0, 0.7);
  --shadow-faint: rgba(0, 0, 0, 0.4);
  --selection: rgba(116, 192, 252, 0.28);
  --link-line: rgba(116, 192, 252, 0.4);
  --edge-blue: #3f78aa;
  --edge-orange: #b9782a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #101212;
    --paper: #171919;
    --surface-2: #1e2122;
    --ink: #e9ecef;
    --ink-soft: #adb5bd;
    --ink-faint: #8f979f;
    --accent: #74c0fc;
    --rule: #262a2b;
    --rule-strong: #363b3d;
    --orange: #ff922b;
    --purple: #b197fc;
    --green: #69db7c;
    --red: #ff8787;
    --glass: rgba(16, 18, 18, 0.78);
    --shadow: rgba(0, 0, 0, 0.7);
    --shadow-faint: rgba(0, 0, 0, 0.4);
    --selection: rgba(116, 192, 252, 0.28);
    --link-line: rgba(116, 192, 252, 0.4);
    --edge-blue: #3f78aa;
    --edge-orange: #b9782a;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1.5rem; background: var(--bg); }

body {
  margin: 0 auto;
  padding: clamp(1.2rem, 4vw, 2.2rem) var(--gutter) 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.02rem + 0.45vw, 1.32rem);
  line-height: 1.6;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

::selection { background: var(--selection); color: var(--ink); }

/* ------------------------------------------------------------- motion */

@view-transition { navigation: auto; }
header { view-transition-name: site-header; }
::view-transition-old(root) { animation: 220ms var(--ease) both fade-out; }
::view-transition-new(root) { animation: 420ms var(--ease) both rise-in; }

@keyframes fade-out { to { opacity: 0; transform: translateY(-3px); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } }

main > * { animation: rise-in 560ms var(--ease) both; }
main > :nth-child(2) { animation-delay: 40ms; }
main > :nth-child(3) { animation-delay: 80ms; }
main > :nth-child(4) { animation-delay: 120ms; }
main > :nth-child(5) { animation-delay: 160ms; }
main > :nth-child(6) { animation-delay: 200ms; }
main > :nth-child(n + 7) { animation-delay: 240ms; }

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

a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--link-line); transition: color 180ms var(--ease), text-decoration-color 180ms var(--ease); }
a:hover { color: var(--ink); text-decoration-color: var(--ink); }
:where(a, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ------------------------------------------------------------- frame */

body { text-transform: lowercase; }
body > main { flex: 1 0 auto; }
code, pre, kbd, samp { text-transform: none; }

header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.3rem 1.5rem; margin-bottom: clamp(2.2rem, 7vw, 3.6rem); }
header .title { font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: var(--ink); text-decoration: none; }
header nav { display: flex; flex-wrap: wrap; gap: 0.1rem 1.2rem; font-size: 1.06rem; }
header nav a, footer nav a { color: var(--ink-soft); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 320ms var(--ease), color 180ms var(--ease); }
header nav a:hover, header nav a[aria-current="page"], footer nav a:hover { color: var(--ink); background-size: 100% 1px; }

footer { margin-top: 3.4rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); font-size: 1rem; color: var(--ink-faint); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; }
footer nav { display: flex; gap: 1.2rem; }

/* ------------------------------------------------------------- type */

h1, h2, h3 { color: var(--accent); font-family: var(--display); font-weight: 400; font-style: normal; line-height: 1.2; text-wrap: balance; }
h1 { margin: 0 0 0.6rem; font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.35rem); }
h2 { margin: 2.4rem 0 0.7rem; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem); }
h3 { margin: 1.9rem 0 0.5rem; font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.3rem); }
p { margin: 0 0 1.05em; text-wrap: pretty; }
strong { font-weight: 700; }

.byline { margin: 0 0 1.6rem; font-size: 1.02rem; color: var(--ink-faint); }
.byline span + span::before { content: "·"; margin: 0 0.55em; }
.standfirst { margin: 0 0 2rem; font-size: clamp(1.2rem, 1.08rem + 0.6vw, 1.42rem); line-height: 1.45; color: var(--ink-soft); }
.standfirst p { margin: 0; }
.lede-small { margin: -0.2rem 0 2.2rem; font-size: 1.1rem; color: var(--ink-faint); }

/* ------------------------------------------------------------- home */

.home section { margin-bottom: 2.8rem; }
.home section:last-child { margin-bottom: 0; }
.hello { padding-bottom: 0.4rem; }
.lede { margin: 0 0 1.6rem; font-size: clamp(1.5rem, 1.1rem + 1.9vw, 1.85rem); line-height: 1.3; letter-spacing: -0.006em; color: var(--ink); max-width: 34rem; }
.facts { display: grid; gap: 0.35rem; margin: 0; font-size: 1.12rem; }
.facts div { display: grid; grid-template-columns: minmax(5.6rem, 7.4rem) 1fr; }
.facts dt { color: var(--ink-faint); }
.facts dd { margin: 0; }

.label { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule-strong); font-family: var(--display); font-size: 1.1rem; color: var(--accent); }
.label span { font-family: var(--serif); font-size: 0.95rem; color: var(--ink-faint); }
.label a { color: inherit; text-decoration: none; }
.label a:hover { color: var(--ink); }

ul.rows { list-style: none; margin: 0; padding: 0; }
ul.rows li { border-bottom: 1px solid var(--rule); }
ul.rows a { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 0.7rem 0; color: var(--ink); text-decoration: none; transition: padding 300ms var(--ease), color 180ms var(--ease); }
ul.rows .t { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 360ms var(--ease); }
ul.rows time, ul.rows .d { flex: none; font-size: 1rem; color: var(--ink-faint); transition: color 180ms var(--ease); }
ul.rows a:hover { color: var(--accent); padding-left: 0.4rem; }
ul.rows a:hover .t { background-size: 100% 1px; }
ul.rows a:hover time, ul.rows a:hover .d { color: var(--accent); }

/* ------------------------------------------------------------- papers and books */

.item { margin: 0 0 2.2rem; }
h1.second { margin-top: 2.4rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.item:last-child { margin-bottom: 0; }
.item h2 { margin: 0 0 0.25rem; font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem); }
.item h2 a { color: inherit; text-decoration: none; }
.item h2 a:hover { color: var(--ink); }
.item .by { margin: 0 0 0.55rem; font-size: 1rem; color: var(--ink-faint); }
.item .note { margin: 0 0 0.5rem; }
.links { font-size: 1.05rem; }
.links a + a { margin-left: 1.3rem; }

.cover { display: block; width: 100%; height: auto; border-radius: 2px; border: 1px solid var(--rule); box-shadow: 0 1px 1px var(--shadow-faint), 0 14px 28px -18px var(--shadow); transition: transform 420ms var(--ease), box-shadow 420ms var(--ease); }
.book:hover .cover { transform: translateY(-4px) rotate(-0.8deg); box-shadow: 0 1px 1px var(--shadow-faint), 0 24px 38px -18px var(--shadow); }

.book { display: grid; grid-template-columns: 7rem 1fr; gap: 1.6rem; align-items: start; padding: 1.2rem 0 1.4rem; }
.book.big { grid-template-columns: 11rem 1fr; gap: 2rem; padding: 0 0 2.4rem; }
.book.big:last-child { padding-bottom: 0; }
.book h3 { margin: 0 0 0.3rem; font-size: 1.35rem; }
.book h1 { margin: 0 0 0.3rem; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.4rem); }
.book h3 a { color: inherit; text-decoration: none; }
.book h3 a:hover { color: var(--ink); }
.back { margin: 0 0 1.6rem; font-size: 1rem; }
.back a { color: var(--ink-faint); }
.back a::before { content: "\2190\00a0"; }
.book.big h3 { font-size: 1.7rem; }
.book .subtitle { margin: 0 0 0.7rem; color: var(--ink-soft); line-height: 1.4; }
.book .note { margin: 0 0 0.9rem; }
.book .meta { margin: 0 0 0.9rem; font-size: 1rem; color: var(--ink-faint); }

.button {
  display: inline-flex; align-items: baseline; gap: 0.55rem; padding: 0.42rem 1.1rem 0.5rem; border: 1px solid var(--ink); border-radius: 999px;
  color: var(--ink); text-decoration: none; font-size: 1.02rem; line-height: 1.2; white-space: nowrap;
  transition: background 220ms var(--ease), color 220ms var(--ease), transform 220ms var(--ease);
}
.button span { font-size: 0.9rem; opacity: 0.65; }
.actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.3rem; }
.code-link { font-size: 1.02rem; color: var(--ink-soft); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 320ms var(--ease), color 180ms var(--ease); }
.code-link:hover { color: var(--accent); background-size: 100% 1px; }
.code-link span { font-size: 0.9rem; opacity: 0.65; }
.button:hover { background: var(--ink); color: var(--bg); transform: translateY(-1px); }

/* ------------------------------------------------------------- prose */

.prose { min-width: 0; }

/* diagrams sit on the page like they were drawn on it: no card, no border,
   and a little wider than the text so their labels stay readable */
.prose figure { display: block; width: var(--wide); margin: 2.2rem calc(50% - var(--wide) / 2); }
.prose figure img { display: block; width: 100%; height: auto; background: none; border: 0; border-radius: 0; }
.prose figcaption, .prose .caption { margin-top: 0.55rem; font-family: var(--display); font-size: 0.9rem; color: var(--ink-faint); text-align: center; }
.prose img { display: block; max-width: 100%; height: auto; border-radius: 3px; }
.prose > p > img { border: 1px solid var(--rule); }

.prose .code-caption { margin: 1.5rem 0 0.25rem; font: 0.62em/1.4 var(--mono); color: var(--ink-faint); text-transform: none; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.prose li { margin: 0.3em 0; padding-left: 0.2em; }
.prose li::marker { color: var(--ink-faint); font-variant-numeric: lining-nums; }
.prose blockquote { margin: 1.6em 0; padding: 0.1em 0 0.1em 1.2em; border-left: 3px solid var(--accent); color: var(--ink-soft); }
.prose blockquote p { margin: 0 0 0.5em; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.6em auto; width: 40%; }

/* inline code wraps, so a long expression never pushes the page sideways */
.prose code, .standfirst code { font: 0.74em/1.4 var(--mono); font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0; background: var(--surface-2); border-radius: 4px; padding: 0.12em 0.36em; overflow-wrap: anywhere; }
.prose pre, .prose .hl pre {
  margin: 0 0 1.5em; padding: 0.9rem 1.1rem; overflow-x: auto; background: var(--paper); border-left: 3px solid var(--edge-blue); border-radius: 0 4px 4px 0;
  font: 0.68em/1.55 var(--mono); font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0; tab-size: 4; white-space: pre; color: var(--ink);
  -webkit-overflow-scrolling: touch;
}
.prose .hl { margin: 0 0 1.5em; }
.prose .hl pre { margin: 0; }
.prose .code-caption + .hl pre, .prose .code-caption + pre { border-left-color: var(--edge-orange); }
.prose pre code { background: none; padding: 0; font: inherit; overflow-wrap: normal; }

.table-wrap { width: var(--wide); margin: 1.8em calc(50% - var(--wide) / 2); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; border-collapse: collapse; font-family: "ET Book Lining", var(--serif); font-size: 0.92em; line-height: 1.45; font-variant-numeric: lining-nums tabular-nums; }
.prose th { text-align: left; font-family: var(--display); font-weight: 400; padding: 0.5rem 1rem 0.55rem 0.7rem; border-bottom: 1.5px solid var(--ink); vertical-align: bottom; }
.prose td { padding: 0.55rem 1rem 0.55rem 0.7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose td:first-child, .prose th:first-child { white-space: nowrap; }
.prose tbody tr { transition: background 180ms var(--ease); }
.prose tbody tr:hover { background: var(--paper); }
.prose td code, .prose th code { white-space: nowrap; }

/* syntax colors, the excalidraw palette */
.hl .c, .hl .c1, .hl .cm, .hl .cs, .hl .ch { color: var(--ink-faint); }
.hl .k, .hl .kd, .hl .kn, .hl .kr, .hl .kc, .hl .kp { color: var(--accent); }
.hl .kt { color: var(--purple); }
.hl .s, .hl .s1, .hl .s2, .hl .sa, .hl .sb, .hl .sc, .hl .se, .hl .si, .hl .sx, .hl .sr { color: var(--green); }
.hl .m, .hl .mi, .hl .mf, .hl .mh, .hl .mo, .hl .mb { color: var(--orange); }
.hl .nf, .hl .nc, .hl .fm, .hl .nd, .hl .cp, .hl .cpf { color: var(--purple); }
.hl .nb, .hl .bp { color: var(--accent); }
.hl .o, .hl .ow { color: var(--ink-soft); }
.hl .err { color: inherit; background: none; border: 0; }

.tags { margin-top: 2.6rem; font-size: 1rem; color: var(--ink-faint); }
.more { margin-top: 3.2rem; }

.nf { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem 0; }
.nf h1 { margin: 0; font-size: clamp(3.4rem, 18vw, 6.4rem); line-height: 1; color: var(--accent); }
.nf p { margin: 0.6rem 0 0; }

/* ------------------------------------------------------------- music */

.music {
  position: fixed; z-index: 60; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 50%;
  border: 1px solid var(--rule-strong); background: var(--glass); color: var(--ink-faint); cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 6px 20px -8px var(--shadow);
  transition: color 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
}
.music[hidden] { display: none; }
/* named, so a page change fades the page under it and leaves the button where it is */
.music { view-transition-name: music; }
main:focus { outline: none; }
.music:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.music:active { transform: scale(0.94); }
.music .play { margin-left: 2px; }
.music .bars { display: none; align-items: flex-end; gap: 3px; height: 0.8rem; }
.music .bars i { display: block; width: 2px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; animation: bar 0.6s ease-in-out infinite alternate; }
.music .bars i:nth-child(1) { animation-duration: 0.45s; animation-delay: 0.1s; }
.music .bars i:nth-child(2) { animation-duration: 0.75s; animation-delay: 0.3s; }
.music .bars i:nth-child(3) { animation-duration: 0.55s; }
.music .bars i:nth-child(4) { animation-duration: 0.65s; animation-delay: 0.2s; }
.music.playing .play { display: none; }
.music.playing .bars { display: flex; }
/* running without sound yet: the bars move, and a ring beats until the first tap gives it sound */
.music.silent { color: var(--accent); border-color: var(--accent); }
.music.silent::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--accent); opacity: 0; animation: ring 1.9s var(--ease) infinite; }
@keyframes ring { from { transform: scale(0.82); opacity: 0.55; } to { transform: scale(1.25); opacity: 0; } }
/* and a note beside it, so nobody wonders why a song that is running cannot be heard */
.music.silent::before {
  content: "tap for sound"; position: absolute; right: calc(100% + 0.7rem); top: 50%; transform: translateY(-50%); white-space: nowrap;
  padding: 0.3rem 0.85rem 0.35rem; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--glass);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ink-soft); font-size: 0.95rem; line-height: 1.2;
  animation: nudge 2.2s var(--ease) infinite alternate;
}
@keyframes nudge { from { transform: translate(0, -50%); } to { transform: translate(-5px, -50%); } }
@keyframes bar { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }

/* ------------------------------------------------------------- theme button */

header nav .theme {
  align-self: center; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; margin: -0.3rem -0.4rem -0.3rem 0.1rem; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer;
  transition: color 180ms var(--ease), background 180ms var(--ease), transform 300ms var(--ease);
}
header nav .theme:hover { color: var(--accent); background: var(--surface-2); }
header nav .theme:active { transform: rotate(35deg) scale(0.9); }
.theme svg { grid-area: 1 / 1; width: 1.1rem; height: 1.1rem; transition: transform 420ms var(--ease), opacity 260ms var(--ease); }
.theme .sun { opacity: 0; transform: rotate(-70deg) scale(0.4); }
:root[data-theme="dark"] .theme .sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme .moon { opacity: 0; transform: rotate(70deg) scale(0.4); }
/* without the script it could do nothing, so it is not shown */
:root:not([data-theme]) .theme { display: none; }
/* the whole page eases from one theme to the other, for the moment after the button is pressed */
.theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after {
  transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease, fill 280ms ease, stroke 280ms ease, filter 280ms ease, box-shadow 280ms ease !important;
}

/* ------------------------------------------------------------- art */

.art { display: block; max-width: 100%; height: auto; user-select: none; -webkit-user-drag: none; pointer-events: none; }

/* the falling pair, a small detail beside the introduction. the words wrap round it */
.hello::after { content: ""; display: block; clear: both; }
.hello .falling { float: right; width: clamp(5rem, 24%, 9.5rem); margin: 0.7rem 0 0.4rem 1.2rem; }
.divider { margin: 0.2rem 0 2.6rem; }
.divider .art { width: min(100%, 36rem); margin: 0 auto; }

.head { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; }
.head .art { flex: 0 1 auto; width: clamp(5.5rem, 26vw, 10.5rem); }
main > .supper { width: 100%; max-width: 40rem; margin: 0 0 2.2rem; }
.end { margin: 2.4rem 0 0; }
.end .art { width: clamp(5.5rem, 32%, 8.5rem); margin: 0 auto; }
/* the width is the smallest of: almost the screen, the column, and what keeps the picture under half the screen's height */
.nf .art { width: min(92vw, 40rem, 86dvh); margin: 1.6rem 0 0; }
@media (max-height: 520px) {
  .nf h1 { font-size: 3.2rem; }
  .nf .art { margin-top: 0.8rem; }
}

/* the frieze runs under the footer, fading out at both ends so it has no hard edge */
.plinth { margin: 2rem auto 0; width: min(100%, 40rem); }
.plinth .art {
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}

/* dark. an ink drawing is black on transparency, so flipping it gives white on transparency, and a picture
   in colour, the oyster, is left as it is. the diagrams were drawn for white paper, so their
   lightness is reversed and their hues turned back, which keeps blue blue and orange orange */
:root[data-theme="dark"] .art.ink { filter: invert(1); }
:root[data-theme="dark"] .prose figure img { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="dark"] .cover { filter: brightness(0.93); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .art.ink { filter: invert(1); }
  :root:not([data-theme]) .prose figure img { filter: invert(1) hue-rotate(180deg); }
  :root:not([data-theme]) .cover { filter: brightness(0.93); }
}

/* ------------------------------------------------------------- small screens */

@media (max-width: 760px) {
  /* a diagram is drawn for about 680px. squeezed into a phone its labels turn
     to dust, so it keeps a readable size and scrolls sideways, edge to edge */
  .prose figure { width: auto; margin: 1.8rem calc(-1 * var(--gutter)); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .prose figure img { width: 34rem; max-width: none; margin-left: var(--gutter); margin-right: var(--gutter); }
  .prose figure { scroll-padding-inline: var(--gutter); }
  .table-wrap { width: auto; margin-inline: 0; }
  .prose th, .prose td { padding-right: 0.7rem; }
}

@media (max-width: 720px) {
  /* a portrait cover beside the words leaves the words about half the screen, so here it sits over them as a banner */
  .book, .book.big { grid-template-columns: 1fr; gap: 1.1rem; }
  .book .cover-link, .cover-link picture { display: block; }
  .book .cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 12%; }
  .book:hover .cover { transform: none; }
  .plinth { width: auto; margin-inline: calc(-1 * var(--gutter)); }
}

@media (max-width: 520px) {
  .button { padding: 0.5rem 1.2rem 0.55rem; }
  .prose pre, .prose .hl pre { padding: 0.8rem 0.9rem; font-size: 0.64em; }
  ul.rows a { flex-direction: column; gap: 0.1rem; }
  .facts div { grid-template-columns: 5.8rem 1fr; }
  footer { margin-top: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}