/* Let's Make Something Awesome
 *
 * Keeps the original newspaper look: centred letterspaced masthead over a
 * heavy rule, serif text on white, small-caps captions, a right-hand index of
 * categories, tags and archives. What changes is that it now reflows.
 *
 * The typeface lives in fonts.css, which tools/fetch_font.py generates. Swap
 * the whole site's type by re-running that script, not by editing here.
 */

:root {
  --ink: #141210;
  --ink-soft: #55504a;
  --ink-faint: #7d766e;
  --paper: #ffffff;
  --rule: #141210;
  --rule-hair: #d9d3ca;
  --accent: #8a1c10;
  --focus: #1a5fb4;

  --measure: 44rem;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);

  --step-body: clamp(1.0625rem, 0.99rem + 0.34vw, 1.1875rem);
  --step-title: clamp(1.85rem, 1.45rem + 1.9vw, 2.6rem);
  --step-mast: clamp(1.28rem, 0.78rem + 2.5vw, 2.1rem);
  --step-card: clamp(1.32rem, 1.15rem + 0.8vw, 1.6rem);
  --step-small: 0.8125rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #eae5dd;
    --ink-soft: #b3aca2;
    --ink-faint: #8d867c;
    --paper: #14130f;
    --rule: #eae5dd;
    --rule-hair: #3a352e;
    --accent: #e8836f;
    --focus: #8ab4f8;
  }
}
:root[data-theme="dark"] {
  --ink: #eae5dd;
  --ink-soft: #b3aca2;
  --ink-faint: #8d867c;
  --paper: #14130f;
  --rule: #eae5dd;
  --rule-hair: #3a352e;
  --accent: #e8836f;
  --focus: #8ab4f8;
}

/* --- base -------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body), var(--font-emoji);
  font-size: var(--step-body);
  line-height: 1.62;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 0.055em;
  text-underline-offset: 0.16em;
  text-decoration-color: var(--rule-hair);
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}
a:hover { color: var(--accent); text-decoration-color: currentColor; }

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

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

.skip {
  position: absolute;
  left: -9999px;
  background: var(--paper);
  color: var(--ink);
  padding: 0.75rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

.sep { margin: 0 0.4em; color: var(--ink-faint); }

/* --- masthead ---------------------------------------------------------- */

.masthead {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  /* The lower bound also has to clear the switch in the top-left corner;
     below about 2.3rem it starts colliding with a wrapped title on a phone. */
  padding: clamp(2.4rem, 4vw, 2.6rem) var(--gutter) 0;
}

.masthead__title {
  margin: 0;
  padding-bottom: 0.3em;
  border-bottom: 3px solid var(--rule);
  font-size: var(--step-mast);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.055em;
  text-align: center;
  text-transform: uppercase;
}
.masthead__title a { text-decoration: none; }
.masthead__title a:hover { color: inherit; }

.masthead__nav {
  margin-top: 2px;
  padding-top: 0.55em;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: var(--step-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.masthead__nav a {
  display: inline-block;
  padding: 0.45em 0.7em;
  text-decoration: none;
}
.masthead__nav a:hover { color: var(--accent); }
.masthead__nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* --- light/dark switch -------------------------------------------------- */

/* Hidden until theme.js unhides it: without JavaScript the switch would do
   nothing, and the page already follows the operating system.

   No visible label on purpose. The state is carried by the thumb position and
   by aria-checked; a word beside it would have to change on every click, and
   a stale one is worse than none. The name lives in aria-label and the
   tooltip in title, both set by theme.js. */
.themetoggle {
  position: absolute;
  top: 0.4rem;
  /* Pull back by the padding so the track, not the tap target, lines up with
     the gutter the masthead rule starts at. */
  left: calc(var(--gutter) - 0.45rem);
  display: inline-flex;
  align-items: center;
  /* Padding rather than size: the switch is deliberately small, and this is
     what keeps the tap target big enough to hit on a phone. */
  padding: 0.45rem;
  border: 0;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
}
.themetoggle[hidden] { display: none; }
.themetoggle:hover { color: var(--ink-soft); }
/* The visible switch is far smaller than a fingertip. This invisible box is
   what actually gets tapped, and it sizes independently so the control can
   stay small without becoming a 13px target on a phone. */
.themetoggle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.themetoggle__track {
  position: relative;
  display: block;
  width: 1.55rem;
  height: 0.8rem;
  border: 1px solid currentColor;
  border-radius: 1rem;
}
.themetoggle__thumb {
  position: absolute;
  top: 50%;
  left: 0.13rem;
  width: 0.46rem;
  height: 0.46rem;
  border-radius: 50%;
  background: currentColor;
  transform: translate(0, -50%);
  transition: transform 0.16s ease;
}
.themetoggle[aria-checked="true"] .themetoggle__thumb {
  transform: translate(0.66rem, -50%);
}
@media (prefers-reduced-motion: reduce) {
  .themetoggle__thumb { transition: none; }
}

/* --- layout ------------------------------------------------------------ */

.layout {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(1.8rem, 5vw, 3.2rem) var(--gutter) 0;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 60rem) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 14rem;
    align-items: start;
  }
  .sidebar { position: sticky; top: 1.5rem; }
}

.layout__body { min-width: 0; }

.intro {
  margin: 0 0 2.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule-hair);
}
.intro__text {
  margin: 0;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-style: italic;
}

/* --- article ----------------------------------------------------------- */

.post__head { margin-bottom: 1.6rem; }

.post__title {
  margin: 0 0 0.28em;
  max-width: 24ch;
  font-size: var(--step-title);
  font-weight: 600;
  line-height: 1.13;
  letter-spacing: -0.006em;
  text-wrap: balance;
}

.post__meta {
  margin: 0;
  font-size: var(--step-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.post__meta a { color: var(--ink-soft); }

.jump {
  text-decoration-color: currentColor;
  white-space: nowrap;
}
.jump:hover { color: var(--accent); }

.prose { max-width: var(--measure); }

/* All vertical rhythm in the article comes from these rules and nothing else.
 *
 * Every selector here is a single class plus the universal selector, which
 * scores below a class-plus-element selector: a reset like `.prose p { margin:
 * 0 }` outranks `.prose > * + *` and silently flattens the spacing between
 * every paragraph on the site. Adding spacing per element is what causes that,
 * so the gap belongs to the pair, never to the element.
 */
.prose > * { margin-top: 0; margin-bottom: 0; }
.prose > * + * { margin-top: 1.05em; }
.prose > * + h2 { margin-top: 2.1em; }
.prose > * + h3 { margin-top: 1.8em; }
.prose > h2 + *, .prose > h3 + * { margin-top: 0.45em; }
.prose > * + figure, .prose > figure + * { margin-top: 2.1em; }

.prose h2, .prose h3 {
  font-weight: 600;
  line-height: 1.22;
  text-wrap: balance;
}
.prose h2 { font-size: 1.42em; }
.prose h3 { font-size: 1.18em; }

.prose ul, .prose ol { margin-left: 0; padding-left: 1.35em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--ink-faint); }

.prose blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: 1.1em;
  border-left: 2px solid var(--rule-hair);
  color: var(--ink-soft);
  font-style: italic;
}

.prose hr {
  margin: 2.4em 0;
  border: 0;
  border-top: 1px solid var(--rule-hair);
}

/* Figures break the measure on wide screens the way the original did, while
   staying inside the column once there is no room to bleed. */
figure {
  margin: 2.1em 0;
  max-width: none;
}
figure img { width: 100%; border-radius: 1px; }

figcaption {
  margin-top: 0.7em;
  padding: 0.6em 0;
  border-top: 1px solid var(--rule-hair);
  border-bottom: 1px solid var(--rule-hair);
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Sits on the meta line beside the date. The negative margin keeps a 44px
   touch target from opening up the line it lives on. */
.share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -14px 0 -14px 0.5em;
  vertical-align: middle;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.12s ease;
}
.share[hidden] { display: none; }
.share:hover { color: var(--accent); }
.share__icon { display: block; }

.share--labelled {
  width: auto;
  gap: 0.5em;
  margin: 0;
  padding: 0.5em 0.9em;
  border: 1px solid var(--rule-hair);
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--step-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.share--labelled:hover { border-color: var(--accent); color: var(--accent); }

.footer__share { margin-top: 1.1rem; }

.share__flash {
  margin-left: 0.2em;
  font-size: var(--step-small);
  letter-spacing: 0.06em;
  text-transform: none;
  font-style: italic;
  color: var(--ink-soft);
}
.share__flash[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .share { transition: none; } }

.post__tags {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule-hair);
  max-width: var(--measure);
}
.post__tagshead {
  margin: 0 0 0.7rem;
  font-size: var(--step-small);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.tagcloud {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}
.tagcloud a {
  display: inline-block;
  padding: 0.3em 0.6em;
  border: 1px solid var(--rule-hair);
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--ink-soft);
}
.tagcloud a:hover { border-color: var(--accent); color: var(--accent); }

/* --- tag filter --------------------------------------------------------- */

.tagcloud--filter a {
  transition: color 0.12s ease, border-color 0.12s ease,
              background-color 0.12s ease, opacity 0.12s ease;
}

.tagcloud--filter a.is-selected {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-weight: 600;
}
.tagcloud--filter a.is-selected:hover { background: var(--accent); border-color: var(--accent); }

/* Still readable, plainly not clickable. Dimming rather than hiding keeps the
   tag set from reflowing under the cursor while you filter. */
.tagcloud--filter a.is-unavailable {
  opacity: 0.32;
  cursor: default;
  border-style: dashed;
}
.tagcloud--filter a.is-unavailable:hover {
  border-color: var(--rule-hair);
  color: var(--ink-soft);
}

.tagfilter__status {
  margin: 0.8rem 0 0;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-soft);
}
.tagfilter__status[hidden], .tagfilter__clear[hidden] { display: none; }

.tagfilter__clear {
  margin-top: 0.75rem;
  padding: 0.5em 0.8em;
  border: 1px solid var(--rule-hair);
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  min-height: 44px;
  transition: color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}
.tagfilter__clear:hover {
  border-color: var(--accent);
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .tagfilter__clear { transition: none; }
}

.card[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tagcloud--filter a { transition: none; }
}

/* --- contact ------------------------------------------------------------ */

.contact {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 3px solid var(--rule);
  max-width: var(--measure);
}
.contact__head {
  margin: 0 0 0.5rem;
  font-size: var(--step-small);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.contact__line { margin: 0; }
.contact__email { word-break: break-word; }

/* --- recipe ------------------------------------------------------------- */

/* Set apart from the article the way a boxed recipe sits in a newspaper:
   heavy rule above, tighter measure, ingredients beside the method once there
   is room for two columns. */
/* Leaves the heading clear of the viewport edge when the jump link lands. */
.recipe {
  scroll-margin-top: 1.5rem;
  margin-top: 3.2rem;
  padding-top: 1.3rem;
  border-top: 3px solid var(--rule);
  max-width: var(--measure);
}

.recipe__kicker {
  margin: 0 0 0.35em;
  font-size: var(--step-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.recipe__name {
  margin: 0;
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.95rem);
  font-weight: 600;
  line-height: 1.16;
  text-wrap: balance;
}

.recipe__summary {
  margin: 0.45em 0 0;
  color: var(--ink-soft);
  font-style: italic;
}

.recipe__source {
  margin: 0.5em 0 0;
  font-size: 0.9rem;
  color: var(--ink-faint);
}
.recipe__source a { color: var(--ink-soft); }

.recipe__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule-hair);
}
.recipe__facts dt {
  font-size: var(--step-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.recipe__facts dd { margin: 0.15em 0 0; }

.recipe__body {
  margin-top: 1.6rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) {
  .recipe__body {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 2.4rem;
    align-items: start;
  }
  .recipe:not(:has(.recipe__ingredients)) .recipe__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.recipe__subhead {
  margin: 0 0 0.7rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step-small);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.recipe__group {
  margin: 1.2rem 0 0.45rem;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--ink-soft);
}
.recipe__group:first-of-type { margin-top: 0; }

.recipe__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.recipe__list li {
  padding: 0.4em 0;
  border-bottom: 1px solid var(--rule-hair);
}
.recipe__list li:last-child { border-bottom: 0; }

.recipe__steps {
  margin: 0;
  padding-left: 1.5em;
}
.recipe__steps li { margin-bottom: 1em; }
.recipe__steps li:last-child { margin-bottom: 0; }
.recipe__steps li::marker {
  color: var(--ink-faint);
  font-variant-numeric: normal;
}

.recipe__notes {
  margin-top: 2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-hair);
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.recipe__notes p { margin: 0 0 0.6em; }
.recipe__notes p:last-child { margin-bottom: 0; }

@media print {
  /* A recipe is the part worth printing: keep it whole and start it fresh. */
  .recipe { break-before: page; break-inside: avoid; border-top-width: 2pt; }
  .recipe__steps li { break-inside: avoid; }
}

/* --- post navigation --------------------------------------------------- */

.postnav {
  margin-top: 3rem;
  padding-top: 1.3rem;
  border-top: 3px solid var(--rule);
  display: grid;
  gap: 1.4rem;
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--measure);
}
@media (min-width: 38rem) {
  .postnav { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .postnav__link--next { text-align: right; }
  .postnav__link--next:only-child { grid-column: 2; }
}
.postnav__link {
  text-decoration: none;
  line-height: 1.3;
  font-size: 1.05rem;
}
.postnav__link span {
  display: block;
  margin-bottom: 0.35em;
  font-size: var(--step-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.postnav__link:hover { color: var(--accent); }

/* --- post list --------------------------------------------------------- */

.cards { list-style: none; margin: 0; padding: 0; }

.card {
  padding-bottom: 2.6rem;
  margin-bottom: 2.6rem;
  border-bottom: 1px solid var(--rule-hair);
  display: grid;
  gap: 1.3rem;
}
.card:last-child { border-bottom: 0; }

@media (min-width: 42rem) {
  .card {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 1.8rem;
    align-items: start;
  }
  .card:not(:has(.card__media)) .card__text { grid-column: 1 / -1; }
}

.card__media { display: block; text-decoration: none; }
.card__media figure { margin: 0; }
.card__media figcaption { display: none; }
.card__media img { aspect-ratio: 4 / 3; object-fit: cover; }

.card__title {
  margin: 0 0 0.25em;
  font-size: var(--step-card);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}
.card__title a { text-decoration: none; }
.card__title a:hover { color: var(--accent); }

.card__meta {
  margin: 0 0 0.6em;
  font-size: var(--step-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.card__meta a { color: var(--ink-soft); }

.card__excerpt { margin: 0; color: var(--ink-soft); }
.card__more { margin: 0.6em 0 0; font-size: 0.95rem; }

/* --- archive headers --------------------------------------------------- */

.archivehead {
  margin-bottom: 2.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 3px solid var(--rule);
}
.archivehead__kicker {
  margin: 0 0 0.3em;
  font-size: var(--step-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.archivehead__title {
  margin: 0;
  font-size: var(--step-title);
  font-weight: 600;
  line-height: 1.14;
}
.archivehead__count {
  margin: 0.4em 0 0;
  font-size: var(--step-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- comments ---------------------------------------------------------- */

.comments {
  margin-top: 3.4rem;
  padding-top: 1.4rem;
  border-top: 3px solid var(--rule);
  max-width: var(--measure);
}
.comments__head {
  margin: 0 0 0.3em;
  font-size: 1.24rem;
  font-weight: 600;
}
.comments__closed {
  margin: 0 0 2rem;
  font-size: 0.88rem;
  color: var(--ink-faint);
  font-style: italic;
}

.comments__list { list-style: none; margin: 0; padding: 0; }
.comments__list .comments__list {
  margin-top: 1.4rem;
  margin-left: 0;
  padding-left: clamp(0.9rem, 3vw, 1.6rem);
  border-left: 1px solid var(--rule-hair);
}

.comment + .comment { margin-top: 1.7rem; }

.comment__meta {
  margin: 0 0 0.35em;
  font-size: var(--step-small);
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.comment__author {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.comment__body { font-size: 0.97em; }
.comment__body p { margin: 0 0 0.7em; }
.comment__body p:last-child { margin-bottom: 0; }

/* --- sidebar ----------------------------------------------------------- */

.sidebar { font-size: 0.9rem; }

@media (max-width: 59.99rem) {
  .sidebar {
    padding-top: 2rem;
    border-top: 3px solid var(--rule);
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }
}

.sidebar__block + .sidebar__block { margin-top: 2.1rem; }
@media (max-width: 59.99rem) {
  .sidebar__block + .sidebar__block { margin-top: 0; }
}

.sidebar__head {
  margin: 0 0 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step-small);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sidebar__list { list-style: none; margin: 0; padding: 0; }
.sidebar__list li { display: flex; gap: 0.5em; align-items: baseline; }
.sidebar__list li + li { margin-top: 0.15em; }
.sidebar__list a {
  flex-grow: 1;
  padding: 0.28em 0;
  text-decoration: none;
}
.sidebar__list a:hover { color: var(--accent); }
.count { color: var(--ink-faint); font-size: 0.82em; font-variant-numeric: tabular-nums; }

/* --- footer ------------------------------------------------------------ */

.footer {
  max-width: 72rem;
  margin: clamp(3rem, 8vw, 5rem) auto 0;
  padding: 1.3rem var(--gutter) clamp(2rem, 6vw, 3.4rem);
  border-top: 3px solid var(--rule);
  text-align: center;
  font-size: var(--step-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.footer p { margin: 0; }
.footer__fine {
  margin-top: 0.8em;
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  color: var(--ink-faint);
}

/* --- print ------------------------------------------------------------- */

@media print {
  .masthead__nav, .sidebar, .postnav, .comments, .skip, .card__more,
  .themetoggle { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .layout { display: block; padding: 0; }
  a { text-decoration: none; }
  .prose a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  figure { break-inside: avoid; }
}