/* Scriptorium for williamliaw.com: normal mode (Fancy off), light.
   Source of truth: the Scriptorium download (assets/downloads/Scriptorium.zip): the manuscript snippet with Fancy
   mode off, on the Typewriter theme in light mode, 22 px text. Colours and proportions were checked against a
   light-mode screenshot of the sample note. Loaded after Tale's main.css (_includes/head.html), so it only
   overrides. Light only, by request. */

/* The exact fonts the Scriptorium installer installs (google/fonts @5bb2873), Latin subset, every OpenType
   feature kept. Google's hosted EB Garamond drops small caps (smcp) and old-style figures (onum), which made the
   browser fake the small caps. Licences: fonts/OFL-*.txt. */
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-Scriptorium.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-Italic-Scriptorium.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Scriptorium.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Yinit";   /* Yannis Haralambous' decorative initials, public domain (fonts/Yinit-README.txt) */
  src: url("fonts/Yinit-Scriptorium.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Goudy Initialen";   /* after F. W. Goudy, digitised by Dieter Steffmann; LPPL (fonts/GoudyInitialen-README.txt) */
  src: url("fonts/GoudyInitialen-Scriptorium.woff2") format("woff2");
  font-display: swap;
}
:root.goudy { --initials-goudy: "Goudy Initialen", "Cormorant Garamond", "EB Garamond", Georgia, serif; }   /* set by head.html */
:root.yinit { --initials: "Yinit", "Cormorant Garamond", "EB Garamond", Georgia, serif; }   /* set by head.html once Yinit loads */

:root {
  --paper: #f7f2e7;        /* manuscript: warm paper */
  --ink: #2a2420;          /* manuscript: soft ink */
  --muted: #595959;        /* Typewriter --text-muted: subtitle, fleuron */
  --faint: #9e9e9e;        /* Typewriter --text-faint: rule under the title */
  --border: #e6e6e6;       /* Typewriter --background-modifier-border */
  --accent: #8b2323;       /* manuscript: oxblood drop caps */
  --link: #7d2219;         /* links: rubric ink, a shade off the drop caps */
  --link-hover: #5e1610;
  --quote-bar: #e5e5e5;    /* manuscript: quotation bar */
  --quote-ink: #979797;    /* manuscript: quotation text */
  --code-bg: #fcf5e4;      /* Typewriter --background-primary-alt */
  --code-ink: #6c99bb;     /* Typewriter --code-normal */
  --text: "EB Garamond", "Literata", Georgia, serif;
  --display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --mono: "JetBrains Mono", Menlo, Monaco, monospace;
  color-scheme: light;
}

/* ---------- Type, paper and measure: 22 px text, 1.45 leading, 36 em column ---------- */
html { font-family: var(--text); font-size: 18px; }
@media (min-width: 600px) { html { font-size: 20px; } }
@media (min-width: 1000px) { html { font-size: 22px; } }
html, body { background: var(--paper); color: var(--ink); }
* { line-height: 1.45; }
body {
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-variant-ligatures: common-ligatures;
}
main, footer, .nav-container { max-width: 36rem; }
::selection { background: rgba(204, 230, 255, 0.99); }
strong, b { font-weight: 620; }

/* Links: rubric ink with a hand-drawn pen underline (an uneven stroke), darker on hover, as if inked twice
   (also in the image-focus caption slip) */
.post a, .image-focus-caption a {
  color: var(--link);
  text-decoration: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='6' viewBox='0 0 120 6'%3E%3Cpath d='M0 3.3 C9 2.6 17 3.9 28 3.4 S44 2.5 55 3.1 S72 4.0 84 3.3 S101 2.6 111 3.5 S117 3.4 120 3.3' fill='none' stroke='%238b2323' stroke-opacity='0.5' stroke-width='1.15' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 120px 6px;
  background-position: 0 100%;
  padding-bottom: 0.06em;
}
.post a:hover, .post a:focus-visible, .image-focus-caption a:hover, .image-focus-caption a:focus-visible {
  color: var(--link-hover);
  text-decoration: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='6' viewBox='0 0 120 6'%3E%3Cpath d='M0 3.3 C9 2.6 17 3.9 28 3.4 S44 2.5 55 3.1 S72 4.0 84 3.3 S101 2.6 111 3.5 S117 3.4 120 3.3' fill='none' stroke='%238b2323' stroke-opacity='1' stroke-width='1.15' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- Navigation ---------- */
.nav { box-shadow: none; border-bottom: 1px solid var(--border); }
/* The title is the user's own italic calligraphy (assets/images/william-liaw-title.png: ink lifted off the paper,
   so it sits on the page with its brush texture), centred above the menu at every width. */
.nav-container { text-align: center; padding-block: 0.5rem 0.6rem; }
.nav-title { display: block; margin: 0 auto; padding: 0; line-height: 0; }
.nav-title img { display: block; height: 3.5rem; width: auto; max-width: 100%; margin: 0 auto; }
.nav ul { position: static; margin: 1.1rem 0 0; text-align: center; }
@media (max-width: 599px) { .nav-title img { height: auto; width: min(100%, 17.5rem); } }
.nav li { color: var(--ink); }
.nav a { color: var(--ink); font-family: var(--text); }
.nav li a { font-variant-caps: small-caps; letter-spacing: 0.06em; }
.nav li { padding-right: 1.4rem; }
.nav li:last-child { padding-right: 0; }

/* Phones: a fuller page width than Tale's 80% column, and the menu on one line */
@media (max-width: 599px) {
  main, footer, .nav-container { width: auto; margin-left: 20px; margin-right: 20px; }
  .nav li { padding-right: 0.7rem; }
  .nav li a { font-size: 0.95rem; letter-spacing: 0.04em; }
}

/* ---------- Headings: EB Garamond 550, centred small caps ---------- */
h1, h2, h3, h4, h5, h6 { color: var(--ink); font-family: var(--text); font-weight: 550; line-height: 1.25; }
.post h1:not(.post-title), .post h2, .post h3, .post h4, .post h5 {
  font-variant-caps: small-caps;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 1.95em 0 0.9em;
}
.post h1:not(.post-title), .post h2 { margin: 1.1em 0 1.2em; }
.post h1:not(.post-title) { font-size: 1.65rem; }
.post h2 { font-size: 1.45rem; }
.post h3 { font-size: 1.25rem; }
.post h4 { font-size: 1.1rem; }
.post h5 { font-size: 1rem; }
.post h6 { font-style: italic; font-weight: 400; color: var(--muted); text-align: center; font-size: 1.2rem; }

/* Page title: the note-title look (bold, upright, centred), then the italic subtitle and a short rule */
.post-title, .tags-header-title {
  color: var(--ink);
  font-family: var(--text);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1.2;
  margin: 1.2em 0 0.15em;
  text-align: center;
}
@media (max-width: 599px) { .post-title, .tags-header-title { font-size: 1.5rem; } }
.post-line, .tags-header-line, .notfound-line {
  border-top: 2px solid var(--faint);
  width: 3rem;
  margin: 1.1em auto 2.9em;
}
/* The byline is the subtitle (it sits under the title, see _layouts/post.html) */
.post-info {
  color: var(--muted);
  font-family: var(--text);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-wrap: balance;      /* when it can't fit on one line at body size, wrap into even lines */
}
.post-info span { font-style: italic; }
.post-info br { display: none; }

/* ---------- Book paragraphs: no gaps, every paragraph after the first indented ---------- */
.post p {
  margin: 0;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.post p + p { text-indent: 1.5em; }
.post { overflow-wrap: break-word; }   /* long URLs (e.g. in reference lists) wrap instead of widening the page */
.post p[style*="center"],
.post p:has(> img),
.post p:has(> a > img),
.post blockquote p,
.post li p { text-indent: 0; }
.post ul, .post ol, .post figure, .post pre, .post .highlight, .post img { margin-block: 1em; }
.post li + li { margin-top: 0.2em; }

/* ---------- Chapter openings: Yinit initial in oxblood, small-capped first line, not justified ---------- */
.post .post-line + p::first-letter,
.post .post-line + blockquote + p::first-letter,
.post :is(h1, h2):not(.post-title) + p::first-letter,
.post :is(h1, h2):not(.post-title) + blockquote + p::first-letter {
  float: left;
  font-family: var(--initials, var(--display));
  font-size: 3.667em;         /* a three-line drop: top at the first line's cap height, foot on the third baseline */
  line-height: 1;
  text-transform: uppercase;  /* Yinit has capitals only */
  margin: 0.18em 0.15em -0.1em 0;  /* lowers the initial to the cap line; the fourth line returns to the margin */
  padding: 0;
  color: var(--accent);
}
.post .post-line + p::first-line,
.post .post-line + blockquote + p::first-line,
.post :is(h1, h2):not(.post-title) + p::first-line,
.post :is(h1, h2):not(.post-title) + blockquote + p::first-line {   /* small caps only where there is a drop cap */
  font-variant-caps: small-caps;
  letter-spacing: 0.03em;
}
/* The opening paragraph is not justified: small caps would open huge word gaps. It hyphenates like any other
   paragraph, except at the end of the small-capped line: a word split there ("QUES- / tions") would change case
   halfway, so assets/scriptorium-keep-words.js wraps it in .sc-keep and it moves to the next line whole. */
.post .post-line + p,
.post .post-line + blockquote + p,
.post :is(h1, h2):not(.post-title) + p,
.post :is(h1, h2):not(.post-title) + blockquote + p { text-align: left; }
.post .sc-keep { white-space: nowrap; -webkit-hyphens: manual; hyphens: manual; }
/* After a scene break or a centred line the paragraph starts flush, but stays justified, in lowercase */
.post .post-line + p,
.post .post-line + blockquote + p,
.post :is(h1, h2):not(.post-title) + p,
.post :is(h1, h2):not(.post-title) + blockquote + p,
.post hr + p,
.post p[style*="center"] + p { text-indent: 0; }

/* About uses a Goudy Initialen letter: the same three-line drop (top on the first line's cap height, foot on the
   third baseline). Goudy's letters are 0.8 em squares standing on the baseline. */
.post.initial-goudy :is(.post-line + p, .post-line + blockquote + p)::first-letter {
  font-family: var(--initials-goudy, var(--display));
  font-size: 4.43em;
  line-height: 1;
  margin: 0.088em 0.1em -0.15em 0;
}

/* Drop caps belong to blog posts and project pages (front matter `project: true`). Other pages that use the post
   layout (About, Projects, Talks) carry .no-initial from _layouts/post.html and open with a plain first letter. */
.post.no-initial.no-initial p::first-letter {
  float: none;
  font: inherit;
  color: inherit;
  text-transform: none;
  margin: 0;
  padding: 0;
}
.post.no-initial.no-initial p::first-line { font-variant-caps: normal; letter-spacing: normal; }
/* ...and with no small caps, their opening paragraphs are set like any other: justified */
.post.no-initial.no-initial :is(.post-line + p, .post-line + blockquote + p,
  :is(h1, h2):not(.post-title) + p, :is(h1, h2):not(.post-title) + blockquote + p) { text-align: justify; }

/* The initial is three lines tall, so its paragraph is too: after a one- or two-line opening, the next block starts
   where it would after a three-line one, and its own margin (a quotation's, a list's) leaves the usual gap below the
   initial's foot. Clearing the float alone would put it flush against the foot: clearance swallows margin-top.
   Openings of three lines or more are unaffected. */
.post:not(.no-initial) :is(.post-line + p, .post-line + blockquote + p,
  :is(h1, h2):not(.post-title) + p, :is(h1, h2):not(.post-title) + blockquote + p) {
  min-height: 4.35em;   /* 3 x the 1.45 leading, where the lh unit is unsupported */
  min-height: 3lh;
}
/* ...and the next block never wraps around the initial's foot (or stacks its own indent on top of it). */
.post :is(.post-line + p, .post-line + blockquote + p) + *,
.post :is(h1, h2):not(.post-title) + p + *,
.post :is(h1, h2):not(.post-title) + blockquote + p + * {
  clear: left;
}

/* ---------- Scene breaks: --- becomes a fleuron; the posts' centred ⁂ lines match it ---------- */
.post hr { border: none; height: auto; margin: 1.6em 0; overflow: visible; text-align: center; }
.post hr::after { content: "❦"; font-family: var(--display); font-size: 1.4em; color: var(--muted); }
.post p[style*="center"] { margin: 1.6em 0; color: var(--muted); }

/* ---------- Quotations: bordered, grey, upright (only emphasis is italic) ---------- */
blockquote {
  border-left: 0.25rem solid var(--quote-bar);
  color: var(--quote-ink);
  font-style: normal;
  margin: 0.8rem 0;
}
@media (min-width: 600px) { blockquote { padding: 0 5rem 0 1.25rem; } }
.post blockquote p { margin: 0 0 1rem; text-align: justify; }
.post blockquote p:last-child { margin-bottom: 0; }
.post blockquote :is(em, i) { font-style: italic; }

/* ---------- Figures, code, tables ---------- */
.post figcaption, .post img + em { color: var(--muted); font-family: var(--text); font-style: italic; font-size: 0.9rem; text-align: center; }
pre, code { font-family: var(--mono); }
code { background-color: var(--code-bg); color: var(--code-ink); font-size: 0.85em; }
.highlight { background-color: var(--code-bg); }
.post table { width: 100%; border-collapse: collapse; margin-block: 1em; }
.post th { padding: calc(1em / 3) calc(2em / 3); border-bottom: 1px solid var(--border); }
.post td { padding: calc(1em / 6) calc(2em / 3); border-bottom: 1px solid var(--border); }

/* ---------- Maths (MathJax 3, SVG): ink colour; wide display equations scroll inside themselves on phones ---------- */
mjx-container { color: var(--ink); text-indent: 0; }
mjx-container[display="true"] { display: block; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding-block: 0.1em; }
/* MathJax's hidden screen-reader copy is absolutely positioned and as wide as the equation; keep it inside the box */
mjx-container { position: relative; }
mjx-container mjx-assistive-mml { max-width: 100% !important; }

/* ---------- Scriptorium page: the Fancy-mode switch as a hand-inked box with an oxblood pen tick ---------- */
.ink-check {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.3 4.2C7.6 3.7 13.1 4 20.5 3.5C20.8 9.1 20.4 14.6 20.8 20.6C14.7 21 9.2 20.5 3.5 20.9C3.2 15.1 3.7 9.6 3 3.9' fill='none' stroke='%232a2420' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.88'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.ink-check:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.6 12.2C7.3 13.4 8.6 14.9 9.9 16.6C13 11.6 16.6 6.6 21.8 1.9C22.3 1.6 22.6 2.1 22.2 2.5C17.6 7.4 13.9 12.6 10.8 18.6C10.5 19.2 9.8 19.2 9.5 18.7C8.4 16.6 7 14.6 5.3 12.9C4.9 12.5 5.2 11.9 5.6 12.2Z' fill='%238b2323'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.3 4.2C7.6 3.7 13.1 4 20.5 3.5C20.8 9.1 20.4 14.6 20.8 20.6C14.7 21 9.2 20.5 3.5 20.9C3.2 15.1 3.7 9.6 3 3.9' fill='none' stroke='%232a2420' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.88'/%3E%3C/svg%3E"); }
.ink-check:hover { filter: drop-shadow(0 0 0.04rem rgba(42, 36, 32, 0.45)); }
.ink-check:focus-visible { outline: 1px dashed var(--accent); outline-offset: 3px; }

/* ---------- Talks: a picture of each deck's best slide, mounted on the page ---------- */
.post figure.talk-shot { margin: 0.2em 0 1em; }
.post figure.talk-shot a { display: block; background: none; padding: 0; }
.post figure.talk-shot img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(42, 36, 32, 0.2), 0 8px 22px rgba(42, 36, 32, 0.14);
}

/* ---------- Post list (home page): each entry as a note title ---------- */
.catalogue-item { color: var(--ink); border-bottom-color: var(--border); }
.catalogue-time, .catalogue-pinned { color: var(--muted); font-family: var(--text); font-style: italic; letter-spacing: 0.01em; }
.catalogue-title { color: var(--ink); font-family: var(--text); font-weight: 600; font-size: 1.65rem; line-height: 1.2; }
.catalogue-line { border-top: 2px solid var(--faint); }
.catalogue-item p { text-align: left; }

/* ---------- Tags page ---------- */
.tags-clouds { font-family: var(--text); }
.tags-clouds a { background: var(--code-bg); color: var(--ink); font-variant-caps: small-caps; letter-spacing: 0.05em; }
.tags-clouds a:hover, .tags-clouds a:active { background: var(--border); }
.tags-item-icon { color: var(--muted); }
.tags-item-label { color: var(--ink); font-family: var(--text); font-variant-caps: small-caps; letter-spacing: 0.08em; }
.tags-post { gap: 1em; }
.tags-post > div { min-width: 0; }
.tags-post-title { color: var(--ink); display: block; }
.tags-post-line { border-top-color: var(--faint); }
.tags-post-meta { color: var(--muted); font-style: italic; }
.tags-post:hover .tags-post-meta, .tags-post:active .tags-post-meta { color: var(--ink); }

/* ---------- Pagination, 404, footer ---------- */
.pagination { border-top: 1px solid var(--border); font-family: var(--text); }
.pagination span { color: var(--ink); }
.pagination .top, .pagination .arrow { color: var(--ink); font-family: var(--text); font-variant-caps: small-caps; letter-spacing: 0.06em; }
.notfound-error { font-family: var(--text); font-weight: 600; }
footer { font-family: var(--text); }
footer span { color: var(--muted); font-size: 0.8rem; font-style: italic; }
footer a { color: var(--muted); text-decoration: underline; }

/* ---------- Image focus, after gwern.net (assets/image-focus.js): the Scriptorium plugin's overlay on the web ----------
   A picture in the text opens on its own over the inked-out page; its caption is set on a slip of paper. */
.image-focus-target { cursor: zoom-in; }
@media (hover: hover) { .image-focus-target:hover { box-shadow: 0 0 10px 0 rgba(42, 36, 32, 0.28); } }
.image-focus-target:focus { outline: none; }
.image-focus-target:focus-visible { outline: 1px dashed var(--accent); outline-offset: 3px; }

.image-focus {
  --focus-backdrop: rgba(36, 30, 26, 0.94);   /* ink */
  --focus-ink: #f1ebde;
  --focus-muted: #bfb39f;
  --focus-slip: var(--paper);                  /* the caption is set on a slip of paper */
  --focus-slip-ink: var(--ink);
  --focus-slip-rule: #b4a68e;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: var(--focus-backdrop);
  color: var(--focus-ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.4;
  text-align: left;
  cursor: zoom-out;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  overscroll-behavior: contain;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.image-focus * { line-height: inherit; }
.image-focus-stage { position: absolute; inset: 0; }
.image-focus .image-focus-image {
  position: absolute;
  display: block;
  max-width: none;
  max-height: none;
  margin: 0;
  background: var(--paper);                    /* paper behind transparent pictures */
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.45);
  transform-origin: center center;
  cursor: default;
  -webkit-user-drag: none;
}
.image-focus.is-zoomed .image-focus-image { cursor: grab; }
.image-focus.is-dragging .image-focus-image { cursor: grabbing; }
.image-focus .image-focus-image.is-loading { opacity: 0; }
.image-focus-counter {
  position: absolute;
  top: 0.75em;
  left: 4em;
  right: 4em;
  text-align: center;
  color: var(--focus-muted);
  font-variant-caps: all-small-caps;
  font-variant-numeric: oldstyle-nums;
  letter-spacing: 0.12em;
  font-size: 1.05em;
  pointer-events: none;
}
.image-focus-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.image-focus .image-focus-button {
  position: absolute;
  margin: 0;
  padding: 0 0.3em 0.08em;
  min-width: 1.6em;
  border: 1px dotted transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--focus-muted);
  font-family: var(--text);
  font-size: 2.2em;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.image-focus .image-focus-button:hover:not(:disabled),
.image-focus .image-focus-button:focus-visible {
  color: var(--focus-ink);
  border-color: var(--focus-muted);
  outline: none;
}
.image-focus .image-focus-button:focus:not(:focus-visible) { outline: none; }
.image-focus .image-focus-button:disabled { opacity: 0.25; pointer-events: none; cursor: default; }   /* a click there is a click outside */
.image-focus .image-focus-close { top: 0.25em; right: 0.4em; }
.image-focus :is(.image-focus-prev, .image-focus-next) { top: 50%; transform: translateY(-50%); font-size: 2.8em; }
.image-focus .image-focus-prev { left: 0.25em; }
.image-focus .image-focus-next { right: 0.25em; }
.image-focus.is-single :is(.image-focus-prev, .image-focus-next, .image-focus-counter) { display: none; }
.image-focus-caption {
  position: absolute;
  left: 50%;
  bottom: 0.9em;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: max-content;
  max-width: min(42em, calc(100% - 7em));
  max-height: 38vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 0.45em 1.25em 0.55em;
  background: var(--focus-slip);
  color: var(--focus-slip-ink);
  border: 1px solid var(--focus-slip-rule);
  box-shadow: inset 0 0 0 3px var(--focus-slip), inset 0 0 0 4px var(--focus-slip-rule);
  font-size: 1em;
  font-style: normal;
  text-align: center;
  text-wrap: pretty;
  overflow-wrap: break-word;
  cursor: auto;
  -webkit-user-select: text;
  user-select: text;
}
.image-focus.is-single .image-focus-caption { max-width: min(42em, calc(100% - 3.2em)); }
.image-focus-caption.is-empty { display: none; }
/* Phones: the picture takes the width; the arrows move to the foot, either side of the slip */
@media (max-width: 599px) {
  .image-focus :is(.image-focus-prev, .image-focus-next) { top: auto; bottom: 0.3em; transform: none; font-size: 2.4em; min-width: 1.1em; }
  .image-focus-caption { font-size: 0.92em; max-width: calc(100% - 8em); }
  .image-focus.is-single .image-focus-caption { max-width: calc(100% - 1.6em); }
}
@media (prefers-reduced-motion: no-preference) {
  .image-focus { animation: image-focus-in 0.18s ease-out; }
  .image-focus:not(.is-dragging) .image-focus-image { transition: transform 0.12s ease-out, opacity 0.15s ease-out; }
  .image-focus-target:active { transform: scale(0.985); }
}
@keyframes image-focus-in { from { opacity: 0; } }