/* ---------------------------------------------------------------
   arturochuquimia.com — one stylesheet. No JavaScript, no webfonts,
   no build step, no dependencies.

   The choices below come from reading research, not taste:

   - Off-white ground, near-black ink (~15:1). Pure #000 on #fff is
     21:1 and causes halation — letters that visibly glow — for the
     roughly one reader in three with astigmatism. WCAG's 4.5:1 is a
     floor, not a ceiling; 12-16:1 is the comfortable band.
   - A system serif stack. Zero bytes, no font flash, no layout shift.
     Serif vs sans is a genuine draw in the literature; serifs only
     ever lost on low-resolution screens. Charter was drawn by Matthew
     Carter to survive screen rendering, and it is already installed.
   - A narrow measure: 55ch, about 57 characters per line at 20px,
     line-height 1.6. Paul Graham's essays run 435px wide, roughly 60
     characters; Bear Blog's default is 700px of 16px monospace. Both
     are tighter than the 66ch this page used to be. Ragged right, no
     hyphenation: justified text without a real hyphenation engine
     opens rivers of white space and measurably slows reading.
   - Figures may break out past the measure (.wide). Narrowing the
     text is only comfortable if the pictures are exempt from it.
   - Dark mode follows the operating system. A manual toggle would
     need JavaScript, and the OS switch already is the toggle.
   --------------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; }   /* iOS won't inflate text */

:root {
  color-scheme: light dark;
  --bg:      light-dark(#faf9f7, #161616);
  --ink:     light-dark(#1a1a1a, #d4d4d4);
  --muted:   light-dark(#6b6862, #8b8880);
  --link:    light-dark(#2a5b9a, #8ab4d8);
  --visited: light-dark(#6b5b8f, #a795c4);
  --rule:    light-dark(#e2ded6, #2e2e2e);
}

body {
  margin: 0 auto;
  padding: 3.5rem 1.25rem 6rem;
  max-width: 55ch;
  background: var(--bg);
  color: var(--ink);
  font-family: Charter, "Iowan Old Style", "Bitstream Charter",
               "Palatino Linotype", Cambria, Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.6;
  text-align: left;
  hyphens: none;
  hanging-punctuation: first;   /* Safari today, Interop 2026 */
  overflow-wrap: break-word;    /* a pasted URL can't force scroll */
}

/* dark mode only: thins strokes that would otherwise glow */
@media (prefers-color-scheme: dark) {
  body { -webkit-font-smoothing: antialiased; }
}

::selection   { background: color-mix(in srgb, var(--link) 25%, var(--bg)); }
::target-text { background: color-mix(in srgb, var(--link) 25%, var(--bg)); }

/* nav ------------------------------------------------------------ */

header { margin-bottom: 3.5rem; }
nav { font-size: 0.9rem; color: var(--muted); margin-left: -0.4rem; }
nav a {
  display: inline-block;
  padding: 0.35rem 0.4rem;   /* >=24px tap target, WCAG 2.5.8 */
  margin-right: 0.85rem;
}
nav a[aria-current] { color: var(--ink); text-decoration: none; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg);
  outline: 2px solid var(--link);
}

:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

/* text ----------------------------------------------------------- */

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
  margin: 2.5rem 0 1rem;
}
h1 { font-size: 1.5rem; margin-top: 0; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

p { text-wrap: pretty; }
p, ul, ol { margin: 0 0 0.85em; }
ul, ol { padding-left: 1.2em; }
li { margin-bottom: 0.3em; }

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
a:visited { color: var(--visited); }
a:hover { text-decoration-color: currentColor; }

.date { color: var(--muted); font-size: 0.95rem; margin-top: -0.5rem; }

blockquote {
  margin: 1.5em 0;
  padding-left: 1.2em;
  border-left: 1px solid var(--rule);
  color: var(--muted);
}

/* footnotes: no JavaScript, and :target flashes the one you jumped to */
sub, sup { line-height: 0; }        /* keep them out of the line spacing */
var { font-style: italic; }         /* maths variables, no renderer needed */
sup a { text-decoration: none; padding: 0 0.15em; }
.footnotes, .meta { font-size: 0.85rem; color: var(--muted); }
.meta { line-height: 1.5; margin-top: 2.5rem; }
[id]:target { background: color-mix(in srgb, var(--link) 12%, transparent); }

/* code, figures, tables ------------------------------------------ */

code, pre {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
}
pre {
  overflow-x: auto;         /* never wrap code: indentation is meaning */
  tab-size: 4;
  padding: 1em;
  border: 1px solid var(--rule);
  line-height: 1.45;
}

img, video { max-width: 100%; height: auto; }
video { display: block; background: var(--rule); }

figure { margin: 2rem 0; }
figure img { display: block; }
.center { text-align: center; }
figcaption {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* side-by-side figures for homework write-ups */
.row { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0; }
.row figure { flex: 1 1 14rem; margin: 0; }


/* a figure that ignores the measure, since 55ch is narrow for pictures */
figure.wide {
  width: min(46rem, 92vw);
  margin-left: calc(50% - min(23rem, 46vw));
}

/* pen-on-paper scans: multiply drops the white paper so the drawing sits
   straight on the page; dark mode inverts first, then screens it off */
.ink { mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) {
  .ink { filter: invert(1); mix-blend-mode: screen; }
}

/* a portrait clip at full width would be a column of its own */
video.portrait { max-width: 19rem; margin-inline: auto; }

/* the L corner marks corner_brackets() draws around every panel in
   p1_plots.py, redrawn in CSS so the video is framed like the figures */
.brackets {
  --arm: 1.1rem;
  --thick: 1.5px;
  width: fit-content;
  margin-inline: auto;
  padding: 0.5rem;
  background:
    linear-gradient(var(--link) 0 0) left  top    / var(--arm) var(--thick),
    linear-gradient(var(--link) 0 0) left  top    / var(--thick) var(--arm),
    linear-gradient(var(--link) 0 0) right top    / var(--arm) var(--thick),
    linear-gradient(var(--link) 0 0) right top    / var(--thick) var(--arm),
    linear-gradient(var(--link) 0 0) left  bottom / var(--arm) var(--thick),
    linear-gradient(var(--link) 0 0) left  bottom / var(--thick) var(--arm),
    linear-gradient(var(--link) 0 0) right bottom / var(--arm) var(--thick),
    linear-gradient(var(--link) 0 0) right bottom / var(--thick) var(--arm);
  background-repeat: no-repeat;
}

table {
  display: block;           /* scrolls on its own; no wrapper div */
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 2rem 0;
}
caption {
  text-align: left;
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
th, td {
  text-align: left;
  padding: 0.35em 1.5em 0.35em 0;
  border-bottom: 1px solid var(--rule);
}

/* a section break, not a line */
hr { border: 0; margin: 3rem 0; color: var(--muted); text-align: center; }
hr::after { content: "· · ·"; }

/* index lists: date column, title beside it ---------------------- */

ul.index { list-style: none; padding: 0; margin: 0; }
ul.index li { display: flex; gap: 1rem; margin-bottom: 0.55em; }
ul.index time {
  flex: 0 0 6.5rem;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8rem;
  padding-top: 0.35em;
}

footer {
  margin-top: 5rem;
  color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 34rem) {
  body { padding: 2.5rem 1.1rem 4rem; font-size: 1.15rem; }
  /* the rag gets ugly at ~40ch, so hyphenate here and only here */
  p { hyphens: auto; hyphenate-limit-chars: 6 3 3; }
  ul.index li { flex-direction: column; gap: 0; }
  ul.index time { padding-top: 0; }
}

@media print {
  body { max-width: 100%; padding: 0; font-size: 11pt;
         background: #fff; color: #000; }
  nav, footer, .skip { display: none; }
  a { color: #000; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  figure.wide { width: auto; margin-left: 0; }
  figure, pre, tr { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}