:root {
  --paper: #fcf5ee;
  --ink: #850e35;
  --accent: #ee6983;
  --soft: #ffc4c4;
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1rem, .96rem + .18vw, 1.12rem);
  line-height: 1.82;
  transition: background-color 480ms ease, color 480ms ease;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--accent);
  color: var(--paper);
}

a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

.skip-link {
  position: fixed;
  top: -5rem;
  left: 1rem;
  z-index: 20;
  padding: .55rem .8rem;
  background: var(--ink);
  color: var(--paper);
  font-size: .75rem;
}
.skip-link:focus { top: 1rem; }

.note {
  width: min(720px, calc(100% - 3rem));
  margin-inline: auto;
  padding: clamp(5rem, 13vh, 9rem) 0 clamp(8rem, 22vh, 14rem);
}

.note header {
  margin-bottom: clamp(3.5rem, 9vh, 6.5rem);
}

.note h1 {
  max-width: 12ch;
  margin: 0 0 1.25rem;
  overflow-wrap: break-word;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 9vw, 7.4rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .92;
}

.note time {
  display: block;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  font-size: .67rem;
  font-weight: 650;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.prose {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.14rem, 1.05rem + .38vw, 1.38rem);
  line-height: 1.86;
  /* A bare URL is one unbreakable 70-odd character word. Without this it sets
     the width of the page and everything else inherits the sideways scroll. */
  overflow-wrap: break-word;
}

.prose p { margin: 0 0 1.5em; }
.prose p:last-child { margin-bottom: 0; }
.prose h2, .prose h3 {
  margin: 2.6em 0 .8em;
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.15;
}
.prose h2 { font-size: 1.8em; }
.prose h3 { font-size: 1.35em; }
.prose a {
  overflow-wrap: anywhere;
  text-decoration-color: var(--accent);
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}
.prose blockquote {
  margin: 2.2em 0;
  padding-left: 1.25em;
  border-left: 2px solid var(--accent);
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  font-style: italic;
}
.prose img { max-width: 100%; height: auto; }
.prose code {
  overflow-wrap: anywhere;
  padding: .08em .28em;
  border-radius: .18em;
  background: var(--soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82em;
}
.prose pre {
  overflow-x: auto;
  margin: 2.2em 0;
  padding: 1.25rem;
  background: var(--ink);
  color: var(--paper);
  line-height: 1.55;
}
.prose pre code { padding: 0; background: transparent; }
.prose .highlight { margin: 2.2em 0; }
.prose .highlight pre { margin: 0; }

.prose ul, .prose ol {
  margin: 0 0 1.5em;
  padding-left: 1.4em;
}
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--accent); }
.prose li > ul, .prose li > ol { margin: .4em 0 0; }

/* Task lists arrive as a bare checkbox inside the item, which reads badly
   next to a bullet. Drop the marker and let the checkbox take its place. */
.prose ul:has(> li > input[type="checkbox"]) { padding-left: 0; }
.prose li:has(> input[type="checkbox"]) { list-style: none; }
.prose li > input[type="checkbox"] {
  width: .72em;
  height: .72em;
  margin: 0 .6em 0 0;
  accent-color: var(--accent);
  vertical-align: baseline;
}

.prose .table-wrap {
  margin: 2.4em 0;
  overflow-x: auto;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .84em;
  line-height: 1.65;
}
.prose th, .prose td {
  padding: .6em 1.1em .6em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  text-align: left;
  vertical-align: top;
}
.prose th:last-child, .prose td:last-child { padding-right: 0; }
.prose th {
  border-bottom: 2px solid color-mix(in srgb, var(--ink) 45%, transparent);
  font-weight: 650;
  white-space: nowrap;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose .ta-left { text-align: left; }
.prose .ta-center { text-align: center; }
.prose .ta-right { text-align: right; }

.prose hr {
  width: 4.5rem;
  margin: 3.2em 0;
  border: 0;
  border-top: 2px solid var(--accent);
}

.prose figure { margin: 2.4em 0; }
.prose figure img { display: block; width: 100%; }

/* Standardised image sizes, as fractions of the prose column, so images look
   consistent whatever resolution the source happens to be. Set via the URL
   fragment: ![alt](photo.jpg#right,medium) */
.prose .img-small { width: 45%; }
.prose .img-medium { width: 65%; }
.prose .img-full { width: 100%; }
/* Breaks out past the column, but never past the viewport: between 600px and
   800px the column is still 720px wide, so a flat 118% would overhang both
   edges. Centring by transform keeps it correct at every width. */
.prose .img-wide {
  width: min(118%, calc(100vw - 2.5rem));
  max-width: calc(100vw - 2.5rem);
  margin-left: 50%;
  transform: translateX(-50%);
}
.prose .img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.prose .img-left {
  float: left;
  margin: .4em 1.8em 1.2em 0;
}
.prose .img-right {
  float: right;
  margin: .4em 0 1.2em 1.8em;
}
/* A float must not escape into the next section. */
.prose h2, .prose h3, .prose hr, .prose .table-wrap { clear: both; }
.prose::after { content: ""; display: table; clear: both; }
.prose figcaption {
  margin-top: .7em;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  font-size: .78em;
  line-height: 1.6;
}
/* The built-in figure shortcode wraps its title in an h4; keep it a caption. */
.prose figcaption h4 {
  margin: 0;
  font-size: inherit;
  font-weight: 650;
}

.prose h1 {
  margin: 2.6em 0 .8em;
  font-size: 2.1em;
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.12;
}
.prose h4, .prose h5, .prose h6 {
  margin: 2.2em 0 .7em;
  font-size: 1em;
  font-weight: 650;
  letter-spacing: .04em;
}
.prose h5, .prose h6 {
  font-size: .88em;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Inline marks enabled in hugo.toml: ==mark==, ^sup^, ~sub~, ++ins++. */
.prose mark {
  padding: .05em .2em;
  background: var(--soft);
  color: inherit;
}
.prose sup, .prose sub { font-size: .7em; line-height: 0; }
.prose ins { text-decoration: underline; text-decoration-color: var(--accent); }

/* YouTube players. A class, not an inline style, so style-src stays closed. */
.prose iframe.video {
  display: block;
  width: 100%;
  margin: 2.4em 0;
  border: 0;
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.prose .footnote-ref { font-size: .72em; text-decoration: none; }
.prose .footnotes {
  margin-top: 3.5em;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  font-size: .8em;
}
.prose .footnotes hr {
  width: 100%;
  margin: 0 0 1.6em;
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.prose .footnotes li { margin-bottom: .8em; }
.prose .footnotes p { margin-bottom: 0; }
.footnote-backref { text-decoration: none; }

/* Syntax highlighting. `noClasses = false` emits Chroma token classes, and the
   palette is swapped at runtime by site.js, so these map to the palette
   variables rather than fixed colours — a static theme would clash with two of
   the three palettes. Code sits on var(--ink), so var(--paper) is the base. */
.prose .chroma .c, .prose .chroma .ch, .prose .chroma .cm,
.prose .chroma .c1, .prose .chroma .cs, .prose .chroma .cp, .prose .chroma .cpf {
  color: color-mix(in srgb, var(--paper) 48%, transparent);
  font-style: italic;
}
.prose .chroma .k, .prose .chroma .kc, .prose .chroma .kd, .prose .chroma .kn,
.prose .chroma .kp, .prose .chroma .kr, .prose .chroma .kt,
.prose .chroma .o, .prose .chroma .ow {
  color: var(--soft);
  font-weight: 650;
}
.prose .chroma .s, .prose .chroma .sa, .prose .chroma .sb, .prose .chroma .sc,
.prose .chroma .s1, .prose .chroma .s2, .prose .chroma .se, .prose .chroma .sh,
.prose .chroma .si, .prose .chroma .sx, .prose .chroma .sr, .prose .chroma .ss,
.prose .chroma .m, .prose .chroma .mb, .prose .chroma .mf, .prose .chroma .mh,
.prose .chroma .mi, .prose .chroma .il, .prose .chroma .mo {
  color: color-mix(in srgb, var(--accent) 62%, var(--paper));
}
.prose .chroma .nf, .prose .chroma .nc, .prose .chroma .nb, .prose .chroma .nn,
.prose .chroma .nt, .prose .chroma .nd, .prose .chroma .na {
  color: var(--paper);
  font-weight: 650;
}
.prose .chroma .nv, .prose .chroma .vc, .prose .chroma .vg, .prose .chroma .vi,
.prose .chroma .p, .prose .chroma .nx {
  color: color-mix(in srgb, var(--paper) 82%, transparent);
}
.prose .chroma .err {
  color: var(--soft);
  text-decoration: underline wavy;
}
.prose .chroma .ln, .prose .chroma .lnt {
  color: color-mix(in srgb, var(--paper) 34%, transparent);
  user-select: none;
}

.scroll-track {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 15;
  width: 4px;
  background: color-mix(in srgb, var(--soft) 52%, transparent);
}
.scroll-progress {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}

.random-jump {
  position: fixed;
  right: clamp(1.25rem, 4vw, 3rem);
  bottom: clamp(1.25rem, 4vw, 3rem);
  z-index: 12;
  width: 4.2rem;
  height: 4.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.random-shape,
.random-shape::before,
.random-shape::after {
  position: absolute;
  inset: 50% auto auto 50%;
  display: block;
  width: 2.3rem;
  height: 2.3rem;
  content: "";
  background: var(--accent);
  border-radius: 68% 32% 61% 39% / 35% 64% 36% 65%;
  transform: translate(-50%, -50%) rotate(0);
  transition: border-radius 500ms ease, transform 500ms cubic-bezier(.2,.8,.2,1), background-color 480ms ease;
}

.random-shape::before {
  opacity: .55;
  background: var(--soft);
  transform: translate(-22%, -82%) rotate(68deg) scale(.7);
}

.random-shape::after {
  opacity: .72;
  background: var(--ink);
  transform: translate(-85%, -15%) rotate(-38deg) scale(.42);
}

.random-jump:hover .random-shape,
.random-jump:focus-visible .random-shape {
  border-radius: 32% 68% 38% 62% / 63% 35% 65% 37%;
  transform: translate(-50%, -50%) rotate(135deg) scale(1.08);
}

.random-jump:hover .random-shape::before,
.random-jump:focus-visible .random-shape::before {
  transform: translate(-15%, -90%) rotate(-82deg) scale(.74);
}

.random-jump:hover .random-shape::after,
.random-jump:focus-visible .random-shape::after {
  transform: translate(-92%, -10%) rotate(120deg) scale(.46);
}

body.is-leaving {
  opacity: 0;
  transition: opacity 180ms ease;
}

@media (max-width: 600px) {
  .prose .img-left, .prose .img-right {
    float: none;
    margin: 2em 0;
  }
  .prose .img-small, .prose .img-medium, .prose .img-wide {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    transform: none;
  }
  .note {
    width: min(100% - 2.2rem, 720px);
    padding-top: 5.5rem;
  }
  .note header { margin-bottom: 3.5rem; }
  .note h1 { font-size: clamp(3rem, 16vw, 5.3rem); }
  .random-jump { width: 3.5rem; height: 3.5rem; }
  .scroll-track { width: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}